/* ==========================================================================
   TAILWIND UTILITY SUPPLEMENT & FALLBACK
   Guarantees that all responsive grids, margins, paddings, space-y, flex,
   and colors function properly regardless of PurgeCSS compilation.
   ========================================================================== */

/* ---------- Spacing: Margins ---------- */
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.25rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-7 { margin-bottom: 1.75rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.mb-9 { margin-bottom: 2.25rem !important; }
.mb-10 { margin-bottom: 2.5rem !important; }
.mb-12 { margin-bottom: 3rem !important; }
.mb-14 { margin-bottom: 3.5rem !important; }
.mb-16 { margin-bottom: 4rem !important; }
.mb-20 { margin-bottom: 5rem !important; }

.mt-1 { margin-top: 0.25rem !important; }
.mt-1\.5 { margin-top: 0.375rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-8 { margin-top: 2rem !important; }
.mt-10 { margin-top: 2.5rem !important; }
.mt-12 { margin-top: 3rem !important; }
.mt-14 { margin-top: 3.5rem !important; }
.mt-16 { margin-top: 4rem !important; }
.mt-20 { margin-top: 5rem !important; }
.mt-24 { margin-top: 6rem !important; }

.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* ---------- Spacing: Paddings ---------- */
.p-2\.5 { padding: 0.625rem !important; }
.p-7 { padding: 1.75rem !important; }
.pt-3 { padding-top: 0.75rem !important; }
.pt-4 { padding-top: 1rem !important; }
.pt-6 { padding-top: 1.5rem !important; }
.pt-8 { padding-top: 2rem !important; }
.py-4\.5 { padding-top: 1.125rem !important; padding-bottom: 1.125rem !important; }
.py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-24 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.py-28 { padding-top: 7rem !important; padding-bottom: 7rem !important; }

/* ---------- Space-Y & Gap ---------- */
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem !important; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem !important; }
.space-y-7 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.75rem !important; }
.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem !important; }
.space-y-10 > :not([hidden]) ~ :not([hidden]) { margin-top: 2.5rem !important; }

.gap-16 { gap: 4rem !important; }
.gap-20 { gap: 5rem !important; }

/* ---------- Flex & Grid Basics ---------- */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.flex-row { flex-direction: row !important; }
.list-none { list-style-type: none !important; }
.w-px { width: 1px !important; }
.w-\[26\%\] { width: 26% !important; }
.h-\[440px\] { height: 440px !important; }
.min-h-\[90vh\] { min-height: 90vh !important; }

/* ---------- Backgrounds & Borders ---------- */
.bg-slate-50 { background-color: #f8fafc !important; }
.bg-slate-50\/70 { background-color: rgba(248, 250, 252, 0.7) !important; }
.bg-slate-50\/80 { background-color: rgba(248, 250, 252, 0.8) !important; }
.bg-slate-100 { background-color: #f1f5f9 !important; }
.bg-slate-100\/50 { background-color: rgba(241, 245, 249, 0.5) !important; }
.bg-slate-100\/70 { background-color: rgba(241, 245, 249, 0.7) !important; }
.bg-slate-300 { background-color: #cbd5e1 !important; }
.bg-slate-700 { background-color: #334155 !important; }
.bg-white\/80 { background-color: rgba(255, 255, 255, 0.8) !important; }
.bg-white\/95 { background-color: rgba(255, 255, 255, 0.95) !important; }

.border-slate-200 { border-color: #e2e8f0 !important; }
.border-slate-200\/80 { border-color: rgba(226, 232, 240, 0.8) !important; }
.border-slate-200\/90 { border-color: rgba(226, 232, 240, 0.9) !important; }
.border-orange-200 { border-color: #fed7aa !important; }
.border-emerald-200 { border-color: #a7f3d0 !important; }
.border-sky-200 { border-color: #bae6fd !important; }

/* ---------- Text Colors & Sizes ---------- */
.text-slate-800 { color: #1e293b !important; }
.text-slate-900 { color: #0f172a !important; }
.text-orange-600 { color: #ea580c !important; }
.text-orange-700 { color: #c2410c !important; }
.text-emerald-600 { color: #059669 !important; }
.text-emerald-700 { color: #047857 !important; }
.text-sky-600 { color: #0284c7 !important; }
.text-sky-700 { color: #0369a1 !important; }

.text-\[9px\] { font-size: 9px !important; line-height: 12px !important; }
.text-\[10px\] { font-size: 10px !important; line-height: 14px !important; }
.text-\[11px\] { font-size: 11px !important; line-height: 15px !important; }

/* ---------- Shadows & Transitions ---------- */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
.shadow-md\/80 { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04) !important; }
.transition-colors { transition-property: color, background-color, border-color !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; }

/* ---------- Interactive Transforms ---------- */
.hover\:-translate-y-0\.5:hover { transform: translateY(-2px) !important; }
.hover\:-translate-y-1:hover { transform: translateY(-4px) !important; }
.hover\:-translate-y-1\.5:hover { transform: translateY(-6px) !important; }
.hover\:scale-\[1\.01\]:hover { transform: scale(1.01) !important; }
.hover\:scale-\[1\.02\]:hover { transform: scale(1.02) !important; }
.hover\:bg-brand-whatsappHover:hover { background-color: #1eb857 !important; }
.hover\:bg-slate-200:hover { background-color: #e2e8f0 !important; }
.hover\:bg-slate-700:hover { background-color: #334155 !important; }
.hover\:text-orange-600:hover { color: #ea580c !important; }
.hover\:text-slate-800:hover { color: #1e293b !important; }
.hover\:text-slate-900:hover { color: #0f172a !important; }
.hover\:underline:hover { text-decoration-line: underline !important; }

/* ---------- Responsive Breakpoints: SM (640px) ---------- */
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row !important; }
  .sm\:h-28 { height: 7rem !important; }
  .sm\:h-\[500px\] { height: 500px !important; }
  .sm\:p-7 { padding: 1.75rem !important; }
  .sm\:p-9 { padding: 2.25rem !important; }
  .sm\:p-10 { padding: 2.5rem !important; }
  .sm\:p-12 { padding: 3rem !important; }
  .sm\:p-14 { padding: 3.5rem !important; }
  .sm\:text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ---------- Responsive Breakpoints: MD (768px) ---------- */
@media (min-width: 768px) {
  .md\:h-24 { height: 6rem !important; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ---------- Responsive Breakpoints: LG (1024px) ---------- */
@media (min-width: 1024px) {
  .lg\:py-24 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
  .lg\:py-36 { padding-top: 9rem !important; padding-bottom: 9rem !important; }
  .lg\:p-7 { padding: 1.75rem !important; }
  .lg\:p-12 { padding: 3rem !important; }
  .lg\:mb-16 { margin-bottom: 4rem !important; }
  .lg\:mb-20 { margin-bottom: 5rem !important; }
  .lg\:mt-16 { margin-top: 4rem !important; }
  .lg\:mt-24 { margin-top: 6rem !important; }
  .lg\:gap-16 { gap: 4rem !important; }
  .lg\:space-y-7 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.75rem !important; }
  .lg\:text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
  .lg\:text-5xl { font-size: 3rem !important; line-height: 1 !important; }
  
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  
  .lg\:col-span-4 { grid-column: span 4 / span 4 !important; }
  .lg\:col-span-5 { grid-column: span 5 / span 5 !important; }
  .lg\:col-span-6 { grid-column: span 6 / span 6 !important; }
  .lg\:col-span-7 { grid-column: span 7 / span 7 !important; }
  .lg\:col-span-8 { grid-column: span 8 / span 8 !important; }
}

/* ---------- Responsive Breakpoints: XL (1280px) ---------- */
@media (min-width: 1280px) {
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

.px-7 { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }
.border-emerald-300 { border-color: #6ee7b7 !important; }
.border-slate-300\/90 { border-color: rgba(203, 213, 225, 0.9) !important; }
.text-emerald-800 { color: #065f46 !important; }

@media (min-width: 1024px) {
  .lg\:py-32 { padding-top: 8rem !important; padding-bottom: 8rem !important; }
}

/* ==========================================================================
   PREMIUM FROSTED GLASS DOCK HEADER DESIGN SYSTEM
   Unifies Light and Dark themes with identical rounded geometry,
   deep translucent blur, and specular rim lighting.
   ========================================================================== */

.nav-glass-dock {
  border-radius: 1.25rem !important; /* 20px */
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (min-width: 640px) {
  .nav-glass-dock {
    border-radius: 1.6rem !important; /* ~26px */
  }
}

/* Light Theme: Edge-to-Edge Sticky Frosted Glacier Glass Navigation */
.light-theme .main-nav-glass {
  background: rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border-bottom: 1.5px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 4px 20px -2px rgba(11, 25, 44, 0.05) !important;
}

.light-theme .nav-glass-dock {
  background: rgba(255, 255, 255, 0.76) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 16px 36px -6px rgba(11, 25, 44, 0.08),
              0 3px 10px rgba(11, 25, 44, 0.03),
              inset 0 1px 0 rgba(255, 255, 255, 0.95),
              inset 0 -1px 0 rgba(226, 232, 240, 0.4) !important;
}

.light-theme .top-announcement-glass {
  background: rgba(248, 250, 252, 0.82) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.75) !important;
}

.light-theme .mobile-nav-glass {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 20px 40px -10px rgba(11, 25, 44, 0.15) !important;
}

/* Dark Theme: Edge-to-Edge Sticky Frosted Obsidian Glass Navigation */
body:not(.light-theme) .main-nav-glass {
  background: rgba(11, 17, 32, 0.90) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 6px 28px -4px rgba(0, 0, 0, 0.7) !important;
}

body:not(.light-theme) .nav-glass-dock {
  background: rgba(11, 17, 32, 0.76) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 45px -8px rgba(0, 0, 0, 0.7),
              0 4px 14px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.12),
              inset 0 -1px 0 rgba(0, 0, 0, 0.5) !important;
}

body:not(.light-theme) .top-announcement-glass {
  background: rgba(15, 23, 42, 0.82) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body:not(.light-theme) .mobile-nav-glass {
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85) !important;
}

/* Pill Navigation Links */
.nav-link-pill {
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.light-theme .nav-link-pill {
  color: #334155 !important;
}
.light-theme .nav-link-pill:hover {
  color: #EA580C !important;
  background: rgba(234, 88, 12, 0.08) !important;
}

body:not(.light-theme) .nav-link-pill {
  color: #cbd5e1 !important;
}
body:not(.light-theme) .nav-link-pill:hover {
  color: #fb923c !important;
  background: rgba(249, 115, 22, 0.12) !important;
}

/* Calculator & Card Polish Utilities */
.items-stretch { align-items: stretch !important; }
.border-2 { border-width: 2px !important; }
.pr-20 { padding-right: 5rem !important; }
.pr-24 { padding-right: 6rem !important; }
.pl-4 { padding-left: 1rem !important; }
.cursor-pointer { cursor: pointer !important; }
.pointer-events-none { pointer-events: none !important; }
.shadow-xs { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
.active\:scale-95:active { transform: scale(0.95) !important; }

/* ============================================================
   FLOATING DYNAMIC HEADER ON SCROLL (LIGHT & DARK SYMMETRY)
============================================================ */
#main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none;
}

#main-header > * {
  pointer-events: auto;
}

#top-announcement-bar {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  max-height: 52px;
  opacity: 1;
}

#nav-dock-wrapper {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  width: 100%;
  padding: 0;
}

#main-navbar {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#main-nav-inner {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#nav-logo {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Scrolled State: Transforms header into floating dock */
#main-header.is-scrolled #top-announcement-bar {
  max-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
  border-bottom: none !important;
}

#main-header.is-scrolled #nav-dock-wrapper {
  padding: 8px 14px !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}

@media (min-width: 768px) {
  #main-header.is-scrolled #nav-dock-wrapper {
    padding: 10px 24px !important;
  }
/* Header Spacer default sizing to guarantee full clearance of Ribbon + Main Nav */
#header-spacer {
  height: 114px !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}
@media (min-width: 640px) {
  #header-spacer {
    height: 132px !important;
  }
}
@media (min-width: 1024px) {
  #header-spacer {
    height: 156px !important;
  }
}

#main-header.is-scrolled #main-nav-inner {
  height: 64px !important;
}

@media (min-width: 640px) {
  #main-header.is-scrolled #main-nav-inner {
    height: 76px !important;
  }
}

@media (min-width: 1024px) {
  #main-header.is-scrolled #main-nav-inner {
    height: 84px !important;
  }
}

#main-header.is-scrolled #nav-logo {
  height: 48px !important;
  max-width: 230px !important;
}

@media (min-width: 640px) {
  #main-header.is-scrolled #nav-logo {
    height: 58px !important;
    max-width: 300px !important;
  }
}

@media (min-width: 1024px) {
  #main-header.is-scrolled #nav-logo {
    height: 68px !important;
    max-width: 350px !important;
  }
}

/* Light Theme: Scrolled Floating Dock Glass */
.light-theme #main-header.is-scrolled #main-navbar {
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 20px 42px -10px rgba(11, 25, 44, 0.12),
              0 4px 16px rgba(11, 25, 44, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* Dark Theme: Scrolled Floating Dock Glass */
body:not(.light-theme) #main-header.is-scrolled #main-navbar {
  border-radius: 22px !important;
  background: rgba(11, 17, 32, 0.75) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.85),
              0 4px 16px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* ============================================================
   FAQ ACCORDION (UNIVERSAL INTERACTIVE CONTRACTION & EXPANSION)
============================================================ */
.accordion-item {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.accordion-header {
  cursor: pointer !important;
  user-select: none !important;
}

.accordion-content {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: none !important;
  transition: max-height 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.28s ease,
              padding 0.3s ease !important;
}

.accordion-icon {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.accordion-item.active .accordion-content {
  max-height: 600px !important;
  opacity: 1 !important;
  padding-top: 0.75rem !important;
  padding-bottom: 1.25rem !important;
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg) !important;
}