/* ==== Layout Fixes ==== */
body,
html {
  overflow-x: hidden !important;
  padding: 0;
  margin: 0;
}

/* ==== Navigation Hover Style ==== */
.wp-block-navigation-item__label:hover {
  color: #d0d0d0;
  text-decoration: underline;
}

/* ==== Product Column Layout ==== */
.productColumn {
  justify-content: space-between !important;
  height: 100%;
}

/* ==== Button Styling ==== */
#zc-manage {
  background-color: #29ABE2;
  border: none;
}
#zc-manage:hover {
  background-color: #29ABE3BF;
  border: none;
}

/* ==== Form Input Styling ==== */
div.zcinputbox {
  min-width: 100% !important;
  padding-top: 5px;
}

/* ==== Signup Page Padding Fixes ==== */
#SIGNUP_BODY {
  padding: 0px !important;
}
#SIGNUP_PAGE {
  padding-top: 0px !important;
}

/* ==== Global Form Scroll & Box Control ==== */
#quoteForm,
#quoteForm * {
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* ==== reCAPTCHA Section Fixes ==== */
#captcha {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: visible !important;
}

#recapDiv {
  width: 100% !important;
  max-width: 304px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

#recapDiv > div {
  width: 304px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Don't style iframe directly — causes Google CAPTCHA to break */

/* ==== Hide extra duplicate recaptcha container if it appears ==== */
#captcha + div[style*="position"] {
  display: none !important;
}

/* ==== Label Widths ==== */
div[name="SIGNUP_FORM_LABEL"]:contains("Tell Us About Your Project") {
  min-width: 75% !important;
  white-space: nowrap !important;
}
div[name="SIGNUP_FORM_LABEL"] {
  min-width: 130px;
  white-space: nowrap;
}

/* ==== Font Styling: 18px Heebo ==== */
div[name="SIGNUP_FORM_LABEL"],
#SIGNUP_BODY,
#SIGNUP_PAGE,
#REQUIRED_FIELD_TEXT {
  font-family: 'Heebo', sans-serif !important;
  font-size: 18px !important;
}
.zcinputbox input,
.zcinputbox textarea {
  font-family: 'Heebo', sans-serif !important;
  font-size: 18px !important;
}
#zcWebOptin {
  font-family: 'Heebo', sans-serif !important;
  font-size: 18px !important;
}

/* ==== Reduce space between heading underline and form ==== */
#signupMainDiv {
  margin-top: 0px !important;
}
#SIGNUP_PAGE > br {
  display: none !important;
}

@media screen and (max-width: 480px) {
  h2 {
    font-size: 3.25rem !important; 
  }
}

@media screen and (max-width: 550px) {
  .wp-block-site-logo img {
    max-width: 150px !important;
  }
}

@media screen and (max-width: 550px) {
  a.gb-text {
    font-size: 1.25rem !important;
		margin: 0px 15px 15px 15px;
  }
}

/* ===== Two-column layout for the checkbox list ===== */
#selectMailingLists #listRelTable {
  width: 100%;
  border-collapse: separate; /* keep spacing sane */
}
#selectMailingLists #listRelTable tr {
  display: inline-block;      /* let rows wrap like cards */
  width: 50%;                 /* two columns */
  box-sizing: border-box;
  vertical-align: top;
  padding-right: 8px;         /* small gutter between columns */
}
#selectMailingLists #listRelTable td {
  width: 100%;
  display: block;             /* ensure full width inside the "card" */
}

/* Make it a single column on small screens */
@media (max-width: 640px) {
  #selectMailingLists #listRelTable tr {
    width: 100%;
    padding-right: 0;
  }
}

/* Optional niceties for the list items */
#selectMailingLists label div {
  border: 1px solid transparent;
  border-radius: 12px;
  transition: border-color .15s ease, background-color .15s ease;
}
#selectMailingLists label div:hover {
  border-color: #3a3a3a;
  background-color: rgba(255,255,255,0.04);
}

/* ===== Turn asterisks and the helper key yellow ===== */
/* Inline styles from the embed set these red, so use !important to override */
[name="SIGNUP_REQUIRED"] {
  color: #FCEE21 !important;  /* warm yellow */
}
#REQUIRED_FIELD_TEXT {
  color: #FCEE21 !important;
}
/* Match "What type of sign..." text to other form labels */
#selectMailingLists div[name="SIGNUP_FORM_LIST"] {
  font-family: Heebo !important;
  font-size: 20px !important;
  color: #ffffff !important;
  text-align: left !important;
  margin-top: 5px !important;
  margin-bottom: 10px !important;
	font-weight: bold !important;
}
/* Remove top padding from the form wrapper */
#SIGNUP_HEADING {
  padding-top: 0 !important;
	display: none;
}

#SIGNUP_PAGE div#imgBlock {
	display: none;
}

.page-id-1933::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    right: 10px; /* Pushed slightly further from the edge to fit all three */
    width: 10px; /* Total width for 3 lines (2px each) + 2px gaps */
    
    /* Creating the 3-line effect using a background gradient */
    background-image: linear-gradient(to right, 
        #fcee21 0px, #fcee21 2px, 
        transparent 2px, transparent 4px, 
        #eb088c 4px, #eb088c 6px, 
        transparent 6px, transparent 8px, 
        #29abe2 8px, #29abe2 10px
    );
    
    /* Making it dashed */
    /* This creates a mask: 4px of visible line, 4px of empty space */
    -webkit-mask-image: linear-gradient(to bottom, black 4px, transparent 4px);
    mask-image: linear-gradient(to bottom, black 4px, transparent 4px);
    -webkit-mask-size: 100% 8px;
    mask-size: 100% 8px;

    z-index: 99999;
    pointer-events: none;
    opacity: 0.33;
}

/* Target the image and its immediate containers on the specific page */
.page-id-1933 img.main-image,
.page-id-1933 .guten-image-wrap, 
.page-id-1933 .wp-block-image {
    overflow: visible !important;
}

/* 1. The Combined Animation */
@keyframes bounceAndShake {
    0%, 100% { transform: translate(0, 0); }
    /* The initial jump */
    20% { transform: translate(0, -12px); }
    /* The mid-air shake */
    30% { transform: translate(-5px, -8px); }
    40% { transform: translate(5px, -6px); }
    50% { transform: translate(-5px, -4px); }
    /* Coming back down */
    70% { transform: translate(2px, -2px); }
    /* Final settle */
    80% { transform: translate(0, 0); }
}

/* 2. Apply to the Button on Page 1933 */
.page-id-1933 .guten-20JSWB a.guten-button {
    display: inline-block !important;
    animation: bounceAndShake 2s cubic-bezier(.36,.07,.19,.97) both;
    animation-delay: 4s;
    animation-iteration-count: 2;
}

/* 1. Define the Reveal Animation */
@keyframes revealButton {
    from {
        opacity: 0;
        visibility: hidden;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
}

/* 2. Apply purely to the Yellow Button on the Fence Slats page */
.page-id-1933 .gb-text-11945c71 {

    /* Linking the animation to the scroll position */
    animation: revealButton linear both;
    animation-timeline: scroll();
    animation-range: 350px 700px; /* Hidden at top, fully visible by 350px scroll */
    
    /* Smoothness fallback */
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* 3. Ensure the button is clickable */
.page-id-1933 .gb-text-11945c71 a {
    pointer-events: auto !important;
}

/* 2. Apply purely to the Yellow Button on the Fence Slats page */
.page-id-1933 .gb-text-11945c71 {
    /* Fixed positioning ensures it follows the user once it appears */
    position: fixed; 
    bottom: 25px; 
    z-index: 9999;