/* Shared smart CTA styles (Applied to both #smart-cta and .hero-smart-cta) */

#smart-cta.text-light-mode .cta-title,
.hero-smart-cta.text-light-mode .cta-title {
  color: #ffffff;
}

#smart-cta.text-light-mode .cta-sub,
.hero-smart-cta.text-light-mode .cta-sub {
  color: rgba(255, 255, 255, 0.85);
}

#smart-cta.text-light-mode .cta-divider,
.hero-smart-cta.text-light-mode .cta-divider {
  border-color: rgba(255, 255, 255, 0.25);
}

#smart-cta.text-dark-mode .cta-title,
.hero-smart-cta.text-dark-mode .cta-title {
  color: #000000;
}

#smart-cta.text-dark-mode .cta-sub,
.hero-smart-cta.text-dark-mode .cta-sub {
  color: #334155;
}

#smart-cta.text-dark-mode .cta-divider,
.hero-smart-cta.text-dark-mode .cta-divider {
  border-color: rgba(100, 116, 139, 0.20);
}

/* Align both text lines to the left */
#smart-cta .cta-title,
#smart-cta .cta-sub,
.hero-smart-cta .cta-title,
.hero-smart-cta .cta-sub {
  text-align: left !important;
}

/* Desktop & Base Sizing + Indigo/Purple Ambient Shadow */
#smart-cta .ios26-liquid-pill,
.hero-smart-cta .ios26-liquid-pill {
  height: 3rem !important;
  box-shadow:
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.35),
    0 0.5rem 1.5rem rgba(79, 70, 229, 0.22),
    0 1rem 2.75rem rgba(79, 70, 229, 0.14) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#smart-cta .ios26-liquid-pill:hover,
.hero-smart-cta .ios26-liquid-pill:hover {
  box-shadow:
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.5),
    0 0.625rem 1.875rem rgba(79, 70, 229, 0.30),
    0 1.25rem 3.25rem rgba(79, 70, 229, 0.18) !important;
}

@media (min-width: 48rem) {
  #smart-cta .ios26-liquid-pill,
  .hero-smart-cta .ios26-liquid-pill {
    height: 3.75rem !important;
  }
}

/* ==========================================================================
   MOBILE: Solid White CTA with Indigo Shadow & Purple Icon
   ========================================================================== */
@media (max-width: 47.9375rem) {
  
  /* 1. Force solid background with vibrant purple shadow */
  #smart-cta .ios26-liquid-pill,
  .hero-smart-cta .ios26-liquid-pill {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 
      0 0.5rem 1.5rem rgba(79, 70, 229, 0.22),
      0 0.875rem 2.25rem rgba(79, 70, 229, 0.14) !important;
  }

  /* Hide internal glare gradients to maximize mobile performance */
  #smart-cta .ios26-liquid-pill::before,
  #smart-cta .ios26-liquid-pill::after,
  .hero-smart-cta .ios26-liquid-pill::before,
  .hero-smart-cta .ios26-liquid-pill::after {
    display: none !important;
  }

  /* 2. Text remains dark on mobile */
  #smart-cta .cta-title,
  #smart-cta.text-light-mode .cta-title,
  #smart-cta.text-dark-mode .cta-title,
  .hero-smart-cta .cta-title,
  .hero-smart-cta.text-light-mode .cta-title,
  .hero-smart-cta.text-dark-mode .cta-title {
    color: #0f172a !important; /* Slate 900 */
    text-align: left !important;
  }

  #smart-cta .cta-sub,
  #smart-cta.text-light-mode .cta-sub,
  #smart-cta.text-dark-mode .cta-sub,
  .hero-smart-cta .cta-sub,
  .hero-smart-cta.text-light-mode .cta-sub,
  .hero-smart-cta.text-dark-mode .cta-sub {
    color: #64748b !important; /* Slate 500 */
    text-align: left !important;
  }

  #smart-cta .cta-divider,
  #smart-cta.text-light-mode .cta-divider,
  #smart-cta.text-dark-mode .cta-divider,
  .hero-smart-cta .cta-divider,
  .hero-smart-cta.text-light-mode .cta-divider,
  .hero-smart-cta.text-dark-mode .cta-divider {
    border-color: rgba(226, 232, 240, 0.8) !important;
  }

  /* 3. Action button inside remains purple */
  #smart-cta .cart-btn-glass,
  .hero-smart-cta .cart-btn-glass {
    background: #4f46e5 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3) !important;
  }
  
  #smart-cta .cart-btn-glass .material-symbols-outlined,
  .hero-smart-cta .cart-btn-glass .material-symbols-outlined {
    color: #ffffff !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   HERO BANNER CTA ONLY — Whitish Liquid Glass Pill & Crisp Contrast
   ══════════════════════════════════════════════════════════════════ */
.hero-smart-cta .ios26-liquid-pill {
  /* Luminous whitish frosted glass */
  background: rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: blur(1.5rem) saturate(180%) !important;
  -webkit-backdrop-filter: blur(1.5rem) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 1),
    0 0.5rem 1.75rem rgba(0, 0, 0, 0.28),
    0 1rem 2.5rem rgba(79, 70, 229, 0.22) !important;
}

.hero-smart-cta .ios26-liquid-pill:hover {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 1),
    0 0.625rem 2rem rgba(0, 0, 0, 0.35),
    0 1.25rem 3.25rem rgba(79, 70, 229, 0.30) !important;
}

/* Ensure high contrast dark typography on the whitish pill */
.hero-smart-cta .cta-title,
.hero-smart-cta.text-light-mode .cta-title,
.hero-smart-cta.text-dark-mode .cta-title {
  color: #0f172a !important; /* Slate 900 */
}

.hero-smart-cta .cta-sub,
.hero-smart-cta.text-light-mode .cta-sub,
.hero-smart-cta.text-dark-mode .cta-sub {
  color: #64748b !important; /* Slate 500 */
}