/* Fix banner elements: fixed positioning + z-index above Tidio chat */
.cky-modal {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483646 !important;
}

.cky-btn-revisit-wrapper {
  position: fixed !important;
  z-index: 2147483644 !important;
}

.cky-consent-container {
  position: fixed !important;
  z-index: 2147483645 !important;
}

.cky-overlay {
  position: fixed !important;
  z-index: 2147483643 !important;
}

/* Show portfolio card on mobile (simplified) */
@media (max-width: 900px) {
  .hero-visual {
    display: block !important;
    max-width: 100%;
    margin: 20px auto 0;
    transform: scale(0.85);
    transform-origin: top center;
  }
}

/* Tablet intermediate layout */
@media (min-width: 601px) and (max-width: 900px) {
  .plans-grid,
  .steps-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px;
  }
}

/* Fix touch targets for cookie buttons on mobile */
@media (max-width: 768px) {
  .cky-btn-accept,
  .cky-btn-reject,
  .cky-btn-customize {
    min-height: 44px !important;
    padding: 10px 20px !important;
  }
}

/* Optimize logo display size */
.custom-logo {
  max-width: 38px;
  max-height: 38px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Stripe Dark Theme — force dark background so WC Stripe ae() detects night theme
   Must match specificity of conflicting rule: .woocommerce-checkout #payment .payment_box (1-2-0) */
.woocommerce-checkout #payment .payment_box,
.woocommerce-checkout #payment li.wc_payment_method .wc-payment-form {
    background-color: #0e2233 !important;
}

/* Stripe Dark Theme — force dark background so WC Stripe ae() detects night theme */
li.wc_payment_method .payment_box,
li.wc_payment_method .wc-payment-form {
    background-color: #0e2233 !important;
}

/* Stripe Dark Theme — force dark background so WC Stripe ae() detects night theme */
li.wc_payment_method .payment_box,
li.wc_payment_method .wc-payment-form {
    background-color: #0e2233 !important;
}

/* === Polar Funded UI fixes — added 2026-04-07 === */

/* Bug 1: /challenges/ tabs were left-anchored, breaking visual centering */
.page-template-challenges .type-tabs,
.page-template-challenges .size-tabs,
body.page-template-page-challenges .type-tabs,
body.page-template-page-challenges .size-tabs,
.challenges-section .type-tabs,
.challenges-section .size-tabs {
  justify-content: center !important;
  align-items: center !important;
}

/* Bug 2: coupon area on /checkout/ overflowed on mobile (input + button side-by-side > viewport) */
@media (max-width: 600px) {
  #polar-coupon-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px !important;
  }
  #polar-coupon-box > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  #polar-coupon-input {
    width: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }
  #polar-apply-coupon {
    width: 100% !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  /* Native Woo coupon (fallback when polar custom UI not used) */
  .woocommerce-form-coupon .form-row,
  form.checkout_coupon .form-row {
    width: 100% !important;
    float: none !important;
    display: block !important;
    margin: 0 0 10px !important;
  }
  .woocommerce-form-coupon input.input-text,
  form.checkout_coupon input.input-text,
  .woocommerce-form-coupon button,
  form.checkout_coupon button {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Bug 3: "US$" currency symbol rendered at full size of the price number — make it a smaller prefix */
.woocommerce-Price-amount .woocommerce-Price-currencySymbol,
.polar-order-summary .woocommerce-Price-currencySymbol,
.shop_table .woocommerce-Price-currencySymbol {
  font-size: 0.65em !important;
  font-weight: 500 !important;
  vertical-align: 0.15em !important;
  margin-right: 2px !important;
  letter-spacing: 0.02em !important;
  opacity: 0.85;
}


/* === Polar Funded checkout redesign — added 2026-04-07 === */
/* Companion to WPCode footer JS that reorders coupon + trust badges */

/* Section titles for the new "Discount Code" and "Trusted by" wrappers */
.polar-section-title {
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-family: 'League Spartan', 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}
.polar-section-title--small {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: center !important;
  color: rgba(255,255,255,0.55) !important;
  letter-spacing: 1.2px !important;
}

/* Discount Code section (wrapper added by reorder JS) */
.polar-discount-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 20px;
  margin: 24px 0 0 !important;
}
.polar-discount-section #polar-coupon-box {
  border-top: 0 !important;
  padding: 0 !important;
}
.polar-discount-section #polar-coupon-input {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}

/* Trusted by section at the bottom of the checkout */
.polar-trusted-by {
  margin: 36px 0 16px !important;
  padding: 24px 0 0 !important;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}
.polar-trusted-by .polar-trust-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.polar-trusted-by .trust-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 14px !important;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}
.polar-trusted-by .trust-badge img.emoji {
  width: 14px !important;
  height: 14px !important;
  vertical-align: middle;
}

/* Mobile checkout redesign refinements */
@media (max-width: 768px) {
  .polar-discount-section { padding: 16px; margin-top: 20px !important; }
  .polar-section-title { font-size: 14px !important; }
  .polar-trusted-by { margin: 28px 0 8px !important; padding-top: 20px !important; }
  .polar-trusted-by .trust-badge {
    padding: 6px 10px !important;
    font-size: 11px;
  }
  /* Tighten Stripe payment box on mobile */
  .woocommerce-checkout #payment .payment_box {
    padding: 14px !important;
  }
  /* Place-order button: full width, comfortable tap target */
  #place_order {
    width: 100% !important;
    min-height: 56px !important;
    font-size: 16px !important;
  }
}

/* Desktop spacing — keep checkout grid centered, single column, max 720 */
.polar-checkout-grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 24px !important;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.polar-checkout-grid > * {
  margin: 0 !important;
}

/* Express checkout section visual lift */
.polar-express-section {
  padding: 4px 0 !important;
}
.polar-or-section {
  text-align: center;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  margin: 4px 0 !important;
}

/* Order summary visual polish */
.polar-order-summary {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 24px !important;
}
.polar-order-summary h3 {
  margin-top: 0 !important;
}

/* Customer details section header */
#customer_details {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 24px !important;
}

/* Payment section visual polish */
#payment.woocommerce-checkout-payment {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 24px !important;
}


/* Force all checkout grid children to fill the column */
.polar-checkout-grid > * { width: 100% !important; box-sizing: border-box !important; }


/* === Footer color fix on Woo pages — added 2026-04-07 === */
/* WooCommerce global stylesheet was overriding footer link color (forcing teal) and paragraph opacity. Scope tighter. */
body.woocommerce #colophon a,
body.woocommerce-page #colophon a,
body.woocommerce-checkout #colophon a,
body.woocommerce-cart #colophon a,
body.woocommerce-account #colophon a,
body.woocommerce #colophon .footer-col a,
body.woocommerce-page #colophon .footer-col a,
body.woocommerce-checkout #colophon .footer-col a {
  color: rgba(255,255,255,0.5) !important;
}
body.woocommerce #colophon a:hover,
body.woocommerce-page #colophon a:hover,
body.woocommerce-checkout #colophon a:hover {
  color: rgba(255,255,255,0.85) !important;
}
body.woocommerce #colophon h4,
body.woocommerce-page #colophon h4,
body.woocommerce-checkout #colophon h4 {
  color: #ffffff !important;
}
body.woocommerce #colophon p,
body.woocommerce-page #colophon p,
body.woocommerce-checkout #colophon p {
  color: rgba(255,255,255,0.5) !important;
}
body.woocommerce #colophon .footer-bottom p,
body.woocommerce-page #colophon .footer-bottom p,
body.woocommerce-checkout #colophon .footer-bottom p,
body.woocommerce #colophon .footer-disclaimer,
body.woocommerce-page #colophon .footer-disclaimer,
body.woocommerce-checkout #colophon .footer-disclaimer,
body.woocommerce #colophon .footer-restricted,
body.woocommerce-page #colophon .footer-restricted,
body.woocommerce-checkout #colophon .footer-restricted {
  color: rgba(255,255,255,0.3) !important;
}

/* === Order Recap card right above Pay Now button — added 2026-04-07 === */
.polar-order-recap {
  margin: 0 0 18px 0;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(56,189,248,0.07), rgba(14,165,233,0.04));
  border: 1px solid rgba(56,189,248,0.22);
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
}
.polar-recap-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 10px;
}
.polar-recap-items {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
}
.polar-recap-items li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.polar-recap-items li:last-child {
  border-bottom: 0;
}
.polar-recap-name {
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
.polar-recap-line-total {
  font-weight: 600;
  white-space: nowrap;
  color: rgba(255,255,255,0.95);
}
.polar-recap-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}
.polar-recap-total-amt {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0;
  text-transform: none;
}
.polar-recap-total-amt .woocommerce-Price-currencySymbol {
  font-size: 0.65em !important;
  font-weight: 500 !important;
  vertical-align: 0.15em !important;
  margin-right: 2px !important;
  opacity: 0.85;
}
@media (max-width: 768px) {
  .polar-order-recap { padding: 14px 16px; }
  .polar-recap-total-amt { font-size: 18px !important; }
}


/* === Order recap savings line — added 2026-04-07 === */
.polar-recap-savings {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 8px 0 12px;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 8px;
  font-size: 12px;
}
.polar-recap-savings-label {
  color: rgba(255,255,255,0.75);
  font-weight: 500;
  letter-spacing: 0.3px;
}
.polar-recap-savings-amt {
  color: #f87171 !important;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.polar-recap-savings-amt .woocommerce-Price-amount,
.polar-recap-savings-amt .woocommerce-Price-amount bdi {
  color: #f87171 !important;
  font-weight: 700 !important;
}
.polar-recap-savings-amt .woocommerce-Price-currencySymbol {
  color: #f87171 !important;
  opacity: 0.85;
}
@media (max-width: 768px) {
  .polar-recap-savings { padding: 8px 10px; font-size: 11px; }
}


/* === Polar Funded promo banner — added 2026-04-07 === */
:root { --polar-promo-h: 0px; }

.polar-promo-bar {
  position: fixed;
  top: 32px; /* below WP admin bar; will be 0 for non-admins */
  left: 0;
  right: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 11px 56px 11px 20px;
  background: linear-gradient(90deg, #0ea5e9 0%, #38bdf8 50%, #0ea5e9 100%);
  background-size: 200% 100%;
  animation: polar-promo-shimmer 8s linear infinite;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 12px rgba(14,165,233,0.35);
}
body:not(.admin-bar) .polar-promo-bar { top: 0; }

@keyframes polar-promo-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.polar-promo-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  max-width: 1200px;
}
.polar-promo-icon {
  font-size: 18px;
  line-height: 1;
}
.polar-promo-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.polar-promo-text strong {
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 13px;
}
.polar-promo-sep {
  opacity: 0.55;
  font-weight: 400;
}
.polar-promo-deadline {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.92;
}
.polar-promo-code {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: rgba(255,255,255,0.95);
  color: #0c4a6e;
  border: 0;
  border-radius: 6px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.polar-promo-code:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
.polar-promo-code.is-copied {
  background: #22c55e;
  color: #ffffff;
}
.polar-promo-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: all 0.18s ease;
}
.polar-promo-close:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-50%) scale(1.05);
}

/* Push masthead/header below banner via JS-set --polar-promo-h */
#masthead { transition: top 0.2s ease; }

/* Mobile */
@media (max-width: 768px) {
  .polar-promo-bar {
    padding: 9px 44px 9px 14px;
    font-size: 11px;
    gap: 8px;
  }
  .polar-promo-icon { font-size: 15px; }
  .polar-promo-text { gap: 6px; font-size: 11px; }
  .polar-promo-text strong { font-size: 11px; }
  
  
  .polar-promo-code { padding: 3px 9px; font-size: 11px; }
  .polar-promo-close { right: 10px; width: 24px; height: 24px; font-size: 16px; }
}



/* === Polar Funded promo banner — !important position fix (some other rule was overriding) === */
#polar-promo-bar.polar-promo-bar,
.polar-promo-bar {
  position: fixed !important;
  top: 32px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100001 !important;
}
body:not(.admin-bar) #polar-promo-bar.polar-promo-bar,
body:not(.admin-bar) .polar-promo-bar {
  top: 0 !important;
}
/* Ensure header stays clear of promo bar even if JS hasn't run yet */
.polar-promo-bar ~ #masthead,
#masthead { transition: top 0.2s ease; }


/* === Polar Funded promo banner — mobile keep-everything-visible (override) === */
@media (max-width: 768px) {
  .polar-promo-bar {
    padding: 8px 38px 8px 10px !important;
    gap: 6px !important;
    font-size: 10px !important;
  }
  .polar-promo-icon { font-size: 13px !important; }
  .polar-promo-inner { gap: 6px !important; }
  .polar-promo-text {
    gap: 5px !important;
    flex-wrap: nowrap !important;
    font-size: 10px !important;
    overflow: hidden;
  }
  .polar-promo-text strong { font-size: 10px !important; letter-spacing: 0.3px !important; }
  .polar-promo-sep { font-size: 9px !important; opacity: 0.5; }
  .polar-promo-sep--mobile-hide { display: inline !important; }
  .polar-promo-deadline { display: inline !important; font-size: 9px !important; letter-spacing: 0.3px !important; }
  .polar-promo-text > span { display: inline !important; }
  .polar-promo-code {
    padding: 2px 7px !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
  }
  .polar-promo-close { right: 8px !important; width: 22px !important; height: 22px !important; font-size: 14px !important; }
}
@media (max-width: 480px) {
  .polar-promo-bar {
    padding: 7px 32px 7px 8px !important;
    font-size: 9px !important;
  }
  .polar-promo-icon { display: none !important; }
  .polar-promo-text { gap: 4px !important; font-size: 9px !important; }
  .polar-promo-text strong { font-size: 9px !important; }
  .polar-promo-sep { font-size: 8px !important; }
  .polar-promo-deadline { font-size: 8px !important; }
  .polar-promo-text > span { display: inline !important; }
  .polar-promo-text > span:not(.polar-promo-sep):not(.polar-promo-deadline) { display: inline !important; }
  .polar-promo-code { padding: 2px 6px !important; font-size: 9px !important; }
  .polar-promo-close { right: 6px !important; width: 20px !important; height: 20px !important; font-size: 13px !important; }
}
@media (max-width: 360px) {
  .polar-promo-bar { font-size: 8px !important; padding-right: 28px !important; }
  .polar-promo-text strong, .polar-promo-text, .polar-promo-text > span { font-size: 8px !important; }
  .polar-promo-code { font-size: 8px !important; padding: 1px 5px !important; }
}


/* === Polar Funded promo banner — single-line nowrap (final override) === */
#polar-promo-bar.polar-promo-bar {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#polar-promo-bar.polar-promo-bar::-webkit-scrollbar { display: none; }
#polar-promo-bar.polar-promo-bar .polar-promo-inner {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  max-width: none !important;
}
#polar-promo-bar.polar-promo-bar .polar-promo-text {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
#polar-promo-bar.polar-promo-bar .polar-promo-text > * {
  display: inline-flex !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
/* Make sure no breakpoint hides anything */
@media (max-width: 768px) {
  #polar-promo-bar.polar-promo-bar .polar-promo-icon,
  #polar-promo-bar.polar-promo-bar .polar-promo-deadline,
  #polar-promo-bar.polar-promo-bar .polar-promo-sep,
  #polar-promo-bar.polar-promo-bar .polar-promo-sep--mobile-hide,
  #polar-promo-bar.polar-promo-bar .polar-promo-text > span {
    display: inline-flex !important;
  }
}
@media (max-width: 480px) {
  #polar-promo-bar.polar-promo-bar { font-size: 9px !important; padding: 7px 30px 7px 8px !important; }
  #polar-promo-bar.polar-promo-bar .polar-promo-text,
  #polar-promo-bar.polar-promo-bar .polar-promo-text strong,
  #polar-promo-bar.polar-promo-bar .polar-promo-text > span { font-size: 9px !important; }
  #polar-promo-bar.polar-promo-bar .polar-promo-icon { font-size: 11px !important; display: inline-flex !important; }
  #polar-promo-bar.polar-promo-bar .polar-promo-code { font-size: 9px !important; padding: 1px 5px !important; }
}