/* === SCRMBL x ConvertKit – hero pill form === */

/* Base form: no card, centered under hero copy */
.scrmbl-form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 !important;
}

/* Kill CK background overlay + inner white card */
.scrmbl-form .formkit-background {
  display: none !important;
}

.scrmbl-form [data-style="minimal"] {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* Hide CK heading/subheading/guarantee inside the form */
.scrmbl-form .formkit-header,
.scrmbl-form .formkit-subheader,
.scrmbl-form .formkit-guarantee {
  display: none !important;
}

/* Layout: row on desktop */
.scrmbl-form .formkit-fields {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px !important;        /* space between pills */
  margin: 0 !important;
}

/* Prevent CK from stretching them together */
.scrmbl-form .formkit-field,
.scrmbl-form .formkit-submit {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
}

/* Email input pill */
.scrmbl-form .formkit-input {
  display: block;
  width: 280px;
  max-width: 340px;
  height: 48px;
  padding: 0 22px !important;
  border-radius: 999px !important;
  border: none !important;
  outline: none;
  font-size: 16px;
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
}

/* Button pill */
.scrmbl-form .formkit-submit {
  border-radius: 999px !important;
  background: #2ecc40 !important;   /* your green */
  color: #ffffff !important;
  border: none !important;
  cursor: pointer;
  padding: 0 32px !important;
  height: 48px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

/* Fix CK inner span so it matches the pill height */
.scrmbl-form .formkit-submit span {
  display: block;
  padding: 0 !important;
  line-height: 48px;
}

/* Hover tweak */
.scrmbl-form .formkit-submit:hover {
  filter: brightness(1.06);
}

/* Mobile: stack vertically, full width */
@media (max-width: 767px) {
  .scrmbl-form .formkit-fields {
    flex-direction: column !important;
    flex-wrap: wrap;
    gap: 12px !important;
  }

  .scrmbl-form .formkit-input,
  .scrmbl-form .formkit-submit {
    width: 100% !important;
    max-width: 300px;
  }
}

/* Wider email pill */
.scrmbl-form .formkit-input {
  width: 360px !important;     /* base width */
  max-width: 420px !important; /* allow expansion */
  height: 48px;
  padding: 0 22px !important;
  border-radius: 999px !important;
  border: none !important;
  outline: none;
  font-size: 16px;
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
}

@media (max-width: 767px) {
  .scrmbl-form .formkit-input,
  .scrmbl-form .formkit-submit {
    width: 100% !important;
    max-width: 300px;
  }
}

#scrmbl_team_fields h3 {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 700;
}

.scrmbl-field input {
    border-radius: 8px;
}

/* ===============================
   SCRMBL – Menu Cart Colors
   =============================== */

/* ---- Home / Transparent header: WHITE icon + text ---- */
.ast-theme-transparent-header #wpmenucartli a,
.ast-theme-transparent-header #wpmenucartli i,
.ast-theme-transparent-header #wpmenucartli span,
.ast-theme-transparent-header #wpmenucartli .wpmenucart-icon,
.ast-theme-transparent-header #wpmenucartli .wpmenucart-icon-shopping-cart-0,
.ast-theme-transparent-header #wpmenucartli .wpmenucart-icon-shopping-cart-1,
.ast-theme-transparent-header #wpmenucartli svg,
.ast-theme-transparent-header #wpmenucartli svg * {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Make sure the "1 item" text is white too */
.ast-theme-transparent-header #wpmenucartli .wpmenucart-contents,
.ast-theme-transparent-header #wpmenucartli .wpmenucart-shortcode {
    color: #ffffff !important;
}

/* ---- Other pages (non-transparent header): BLACK icon + text ---- */
body:not(.ast-theme-transparent-header) #wpmenucartli a,
body:not(.ast-theme-transparent-header) #wpmenucartli i,
body:not(.ast-theme-transparent-header) #wpmenucartli span,
body:not(.ast-theme-transparent-header) #wpmenucartli .wpmenucart-icon,
body:not(.ast-theme-transparent-header) #wpmenucartli .wpmenucart-icon-shopping-cart-0,
body:not(.ast-theme-transparent-header) #wpmenucartli .wpmenucart-icon-shopping-cart-1,
body:not(.ast-theme-transparent-header) #wpmenucartli svg,
body:not(.ast-theme-transparent-header) #wpmenucartli svg * {
    color: #000000 !important;
    fill: #000000 !important;
    stroke: #000000 !important;
}

/* "1 item" text in black on solid headers */
body:not(.ast-theme-transparent-header) #wpmenucartli .wpmenucart-contents,
body:not(.ast-theme-transparent-header) #wpmenucartli .wpmenucart-shortcode {
    color: #000000 !important;
}

/* ===============================
   SCRMBL – Cart Icon & Text Size
   =============================== */

/* Change size of the cart ICON */
#wpmenucartli svg,
#wpmenucartli svg * {
    width: 26px !important;      /* adjust icon width */
    height: 26px !important;     /* adjust icon height */
}

/* Change size of the "1 item" TEXT */
#wpmenucartli .wpmenucart-contents,
#wpmenucartli .wpmenucart-shortcode {
    font-size: 17px !important;   /* adjust text size */
    font-weight: 500;             /* optional: make text slightly bolder */
}

@media (max-width: 921px){
  header.site-header,
  .site-header,
  .ast-primary-header-bar{
    position: relative !important;
    z-index: 999999 !important;
  }
}

@media (max-width: 480px) {
  .scrmbl-hosted-line {
    white-space: nowrap;
    font-size: 19px;
  }
}

@media (max-width: 767px){
  .scrmbl-waitlist-line{
    font-size: 16px !important;
    font-style: italic !important;
    font-weight: 700 !important;
    line-height: 1.35;
  }
}

.woocommerce-cart .cross-sells {
  display: none;
}

  /* Mobile only */
  @media (max-width: 480px) {
    .scrmbl-hero h3 {
      font-size: 20px;
      line-height: 1.25;
    }

    .scrmbl-hero h4 {
      font-size: 15px;
      line-height: 1.3;
    }
  }

@media (max-width: 480px) {
  .scrmbl-hero h4 {
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: -0.3px;
    white-space: nowrap;
  }
}

/* Astra: force mobile header content to stay left */
.ast-builder-header .ast-builder-layout-element,
.ast-builder-header .ast-builder-grid-row,
.ast-builder-header .ast-builder-grid-row-container-inner,
.ast-mobile-header-wrap .ast-builder-grid-row-container-inner {
  justify-content: flex-start !important;
}

/* Prevent left section from stretching/centering */
.ast-mobile-header-wrap .ast-builder-grid-row-container-inner {
  text-align: left !important;
}

/* When the off-canvas menu is open, keep header from re-centering */
.ast-flyout-open .ast-mobile-header-wrap .ast-builder-grid-row-container-inner,
.ast-flyout-menu-enable.ast-flyout-open .ast-mobile-header-wrap .ast-builder-grid-row-container-inner {
  justify-content: flex-start !important;
}