/* ── SkyVayu Theme CSS ── */
/* CSS variables are injected by js/theme.js via inline styles on :root */
/* This file handles only what CSS vars can't reach: hardcoded bg/colors in inline styles */

/* Toggle button */
#theme-toggle {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(143,144,151,0.25);
  background: rgba(255,255,255,0.08);
  color: #c5c6cd;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s, color .2s;
  align-self: center;
  flex-shrink: 0;
}
#theme-toggle:hover { border-color: #fbbf24; color: #fbbf24; }

/* Light mode — override hardcoded backgrounds that can't be reached by vars */
[data-theme="light"] body { background: #f4f6f9 !important; color: #0d1b2a !important; }

/* Nav hardcoded bg */
[data-theme="light"] nav,
[data-theme="light"] .nav {
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(13,27,42,0.10) !important;
}

/* Hero hardcoded overlay */
[data-theme="light"] .hero { background: #f4f6f9 !important; }
[data-theme="light"] .hero-bg { filter: brightness(0.55) !important; opacity: 0.65 !important; }
[data-theme="light"] .hero-overlay {
  background: linear-gradient(to bottom,
    rgba(244,246,249,0.25) 0%,
    rgba(244,246,249,0.6) 60%,
    rgba(244,246,249,0.85) 100%) !important;
}

/* Sections with hardcoded dark backgrounds */
[data-theme="light"] .section-how   { background: #eef1f5 !important; }
[data-theme="light"] .section-why   { background: #f4f6f9 !important; }
[data-theme="light"] .section-routes { background: #eef1f5 !important; }
[data-theme="light"] .section-cta   { background: #eef1f5 !important; }
[data-theme="light"] .booking-section { background: #f4f6f9 !important; }
[data-theme="light"] footer, [data-theme="light"] .home-footer { background: #e7ebf1 !important; }

/* Cards with hardcoded rgba dark backgrounds */
[data-theme="light"] .bento-card,
[data-theme="light"] .step,
[data-theme="light"] .quote-card,
[data-theme="light"] .live-card,
[data-theme="light"] .route-card,
[data-theme="light"] .summary-card,
[data-theme="light"] .traveller-card,
[data-theme="light"] .flight-card,
[data-theme="light"] .accordion,
[data-theme="light"] .timeline-item,
[data-theme="light"] .support-card,
[data-theme="light"] .booking-card,
[data-theme="light"] .card,
[data-theme="light"] .filter-dropdown,
[data-theme="light"] .accordion-header,
[data-theme="light"] .accordion-body {
  background: #ffffff !important;
  border-color: rgba(13,27,42,0.10) !important;
  box-shadow: 0 1px 3px rgba(13,27,42,0.06) !important;
  backdrop-filter: none !important;
}

/* Stats bar */
[data-theme="light"] .stats-bar { background: #eef1f5 !important; }

/* Inputs */
[data-theme="light"] input,
[data-theme="light"] .field-input,
[data-theme="light"] .b-input,
[data-theme="light"] .b-input-date,
[data-theme="light"] .filter-select {
  background: #ffffff !important;
  border-color: rgba(13,27,42,0.15) !important;
  color: #0d1b2a !important;
}
[data-theme="light"] input::placeholder { color: rgba(13,27,42,0.35) !important; }

/* Text overrides for hardcoded colours */
[data-theme="light"] .hero-h1,
[data-theme="light"] .hero-h1 span,
[data-theme="light"] .hero-title { color: #0d1b2a !important; }
[data-theme="light"] .hero-h1 em,
[data-theme="light"] .hero-title em { color: #c4942e !important; }
[data-theme="light"] .hero-sub,
[data-theme="light"] .hero-eyebrow { color: rgba(13,27,42,0.65) !important; }

/* Buttons */
[data-theme="light"] .btn-select,
[data-theme="light"] .btn-pay,
[data-theme="light"] .btn-cta,
[data-theme="light"] .btn-cta-primary,
[data-theme="light"] .btn-primary { background: #c4942e !important; color: #fff !important; }
[data-theme="light"] .btn-book-now { background: #c4942e !important; color: #fff !important; }

/* Progress */
[data-theme="light"] .progress-wrap { background: rgba(196,148,46,0.12) !important; }
[data-theme="light"] .progress-fill { background: #c4942e !important; }

/* Image gradients */
[data-theme="light"] .img-gradient,
[data-theme="light"] .route-img-gradient {
  background: linear-gradient(0deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 55%) !important;
}

/* Confirmed page bg */
[data-theme="light"] .bg-image { opacity: 0.03 !important; }

/* Index nav links */
[data-theme="light"] .nav-links a { color: rgba(13,27,42,0.65) !important; }
[data-theme="light"] .nav-links a.active,
[data-theme="light"] .nav-links a:hover { color: #c4942e !important; }
[data-theme="light"] .nav-logo,
[data-theme="light"] .logo { color: #c4942e !important; }

/* Autocomplete dropdown */
[data-theme="light"] .ac-dropdown {
  background: #ffffff !important;
  border-color: rgba(13,27,42,0.15) !important;
  box-shadow: 0 4px 16px rgba(13,27,42,0.08) !important;
}
[data-theme="light"] .ac-item {
  color: #0d1b2a !important;
}
[data-theme="light"] .ac-item:hover,
[data-theme="light"] .ac-item.selected {
  background: rgba(196,148,46,0.08) !important;
  color: #0d1b2a !important;
}

/* OTP modal */
[data-theme="light"] .otp-modal-box {
  background: #ffffff !important;
  border-color: rgba(13,27,42,0.12) !important;
  box-shadow: 0 20px 60px rgba(13,27,42,0.15) !important;
}
[data-theme="light"] .otp-modal-title { color: #0d1b2a !important; }
[data-theme="light"] .otp-modal-sub   { color: rgba(13,27,42,0.55) !important; }
[data-theme="light"] .otp-modal-close { color: rgba(13,27,42,0.45) !important; }
[data-theme="light"] .otp-modal-close:hover { color: #0d1b2a !important; }
[data-theme="light"] .otp-modal-phone-input {
  background: #f4f6f9 !important;
  border-color: rgba(13,27,42,0.15) !important;
  color: #0d1b2a !important;
}
[data-theme="light"] .otp-modal-phone-input::placeholder { color: rgba(13,27,42,0.35) !important; }
[data-theme="light"] .country-dd {
  background: #f4f6f9 !important;
  border-color: rgba(13,27,42,0.15) !important;
  color: #0d1b2a !important;
}
[data-theme="light"] .country-dd-list {
  background: #ffffff !important;
  border-color: rgba(13,27,42,0.12) !important;
}
[data-theme="light"] .country-dd-search {
  background: #f4f6f9 !important;
  border-color: rgba(13,27,42,0.12) !important;
  color: #0d1b2a !important;
}
[data-theme="light"] .country-dd-item { color: rgba(13,27,42,0.75) !important; }
[data-theme="light"] .country-dd-item:hover { background: rgba(196,148,46,0.08) !important; }
[data-theme="light"] .otp-digit {
  background: #f4f6f9 !important;
  border-color: rgba(13,27,42,0.15) !important;
  color: #0d1b2a !important;
}
[data-theme="light"] #otp-modal { background: rgba(13,27,42,0.5) !important; }

/* CTA section — dark bg image + overlay */
[data-theme="light"] .final-cta-bg {
  filter: brightness(1) !important;
  opacity: 0.08 !important;
}
[data-theme="light"] .final-cta-overlay {
  background: radial-gradient(ellipse at center, rgba(244,246,249,0.5) 0%, rgba(244,246,249,0.97) 100%) !important;
}
[data-theme="light"] .final-cta { background: #eef1f5 !important; }
[data-theme="light"] .final-cta-title { color: #0d1b2a !important; }
[data-theme="light"] .section-cta::before { display: none !important; }

/* Filter button on results page */
[data-theme="light"] .filter-btn {
  background: #ffffff !important;
  border-color: rgba(13,27,42,0.15) !important;
  color: #0d1b2a !important;
}
[data-theme="light"] .filter-text { color: rgba(13,27,42,0.65) !important; }
[data-theme="light"] .filter-btn svg path { fill: #0d1b2a !important; }

 /* Notif dots */
 [data-theme="light"] .notif-dot { background: #dde2ea !important; }
 [data-theme="light"] .notif-dot.active { background: #c4942e !important; }

/* payment2 — icons use currentColor, set to gold */
[data-theme="light"] .accordion-icon { color: #c4942e !important; background: rgba(196,148,46,0.10) !important; border-color: rgba(196,148,46,0.20) !important; }
[data-theme="light"] .trust-icon { color: #c4942e !important; background: rgba(196,148,46,0.10) !important; border-color: rgba(196,148,46,0.20) !important; }
[data-theme="light"] .security-note-inline svg { color: #c4942e !important; }
[data-theme="light"] .security-note-inline { color: rgba(13,27,42,0.55) !important; }

/* confirm bar on results */
[data-theme="light"] .confirm-bar { background: rgba(196,148,46,0.06) !important; border-color: rgba(196,148,46,0.30) !important; }
[data-theme="light"] .confirm-title { color: #c4942e !important; }
[data-theme="light"] .btn-confirm { background: #c4942e !important; color: #ffffff !important; }