/**
 * Light Theme – Premium Elevation
 * Drop Cars – Premium intercity taxi
 *
 * Applied when html does NOT have .dark-mode
 * Replaces plain white/grey with polished
 * glass-card aesthetics & soft sky-blue tones.
 */

/* ── Navbar — frosted glass in light mode ── */
html:not(.dark-mode) .site-header {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border-bottom: 1px solid rgba(186, 230, 253, 0.45) !important;
  box-shadow: 0 2px 16px rgba(15, 28, 60, 0.07) !important;
  border-top: none !important;
}

/* ── Cards — premium light glass ── */
html:not(.dark-mode) .seo-card,
html:not(.dark-mode) .service-card,
html:not(.dark-mode) .city-card,
html:not(.dark-mode) .trust-card,
html:not(.dark-mode) .route-card,
html:not(.dark-mode) .testimonial-card,
html:not(.dark-mode) .vehicle-card,
html:not(.dark-mode) .feature-card,
html:not(.dark-mode) .fare-card {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  border: 1px solid rgba(186, 230, 253, 0.55) !important;
  box-shadow: 0 4px 20px rgba(15, 28, 60, 0.08), 0 1px 4px rgba(15, 28, 60, 0.05) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important;
}

html:not(.dark-mode) .seo-card:hover,
html:not(.dark-mode) .service-card:hover,
html:not(.dark-mode) .city-card:hover,
html:not(.dark-mode) .route-card:hover,
html:not(.dark-mode) .testimonial-card:hover,
html:not(.dark-mode) .vehicle-card:hover,
html:not(.dark-mode) .feature-card:hover {
  box-shadow: 0 12px 36px rgba(15, 28, 60, 0.15), 0 2px 8px rgba(15, 28, 60, 0.08) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  transform: translateY(-2px);
}

/* ── Booking form fields — subtle blue tint ── */
html:not(.dark-mode) .field input,
html:not(.dark-mode) .field select {
  background: rgba(248, 252, 255, 0.92) !important;
  border: 1px solid rgba(148, 196, 220, 0.65) !important;
}

html:not(.dark-mode) .field input:focus,
html:not(.dark-mode) .field select:focus {
  background: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18) !important;
}

/* ── Trip type tabs — light blue active state ── */
html:not(.dark-mode) .fare-toggle__switch input:checked + label,
html:not(.dark-mode) .fare-toggle__switch .trip-type-option--active {
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(3, 105, 161, 0.35) !important;
}

/* ── FAQ items — elevated glass ── */
html:not(.dark-mode) .faq-item,
html:not(.dark-mode) .faq__items article,
html:not(.dark-mode) .faq__item {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(186, 230, 253, 0.5) !important;
  box-shadow: 0 2px 10px rgba(15, 28, 60, 0.06) !important;
}

/* ── Stats strip ── */
html:not(.dark-mode) .d1t-stat-block {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  border: 1.5px solid rgba(15, 28, 46, 0.15) !important;
  border-radius: 12px !important;
  box-shadow: 
    0 10px 30px rgba(15, 28, 60, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html:not(.dark-mode) .d1t-stat-block:hover {
  transform: translateY(-4px) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: #0284c7 !important;
  box-shadow: 
    0 18px 40px rgba(2, 132, 199, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html:not(.dark-mode) .d1t-stat-block__num { 
  color: #0369a1 !important; 
  text-shadow: none !important;
}

html:not(.dark-mode) .d1t-stat-block__label { 
  color: #475569 !important; 
}

/* ── Vehicle selector cards ── */
html:not(.dark-mode) .vehicle-selector-card {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1.5px solid rgba(15, 28, 46, 0.12) !important;
  box-shadow: 0 2px 8px rgba(15, 28, 60, 0.02) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ── Hero booking card — glass (light) ── */
html:not(.dark-mode) .booking-card--home {
  background: rgba(255, 255, 255, 0.42) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1.5px solid rgba(15, 28, 46, 0.14) !important;
  box-shadow:
    0 30px 80px rgba(14, 165, 233, 0.12),
    0 4px 16px rgba(15, 28, 60, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  border-radius: 20px !important;
}

/* ── Trip type & Oneway Subtypes tab row design (light mode) ── */
html:not(.dark-mode) .trip-type-options,
html:not(.dark-mode) .oneway-subtypes,
html:not(.dark-mode) .fare-toggle__switch {
  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1.5px solid rgba(15, 28, 46, 0.12) !important;
  border-radius: 99px !important;
  padding: 3px !important;
  box-shadow: inset 0 2px 4px rgba(15, 28, 60, 0.04) !important;
  gap: 4px !important;
  margin-bottom: 0.5rem !important;
}

html:not(.dark-mode) .trip-type-options .trip-type-option,
html:not(.dark-mode) .oneway-subtypes label,
html:not(.dark-mode) .fare-toggle__switch label {
  border-radius: 99px !important;
  border: none !important;
  transition: all 0.25s ease !important;
  color: #334155 !important;
  font-weight: 600 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
}

html:not(.dark-mode) .oneway-subtypes label {
  font-size: 0.78rem !important;
  padding: 6px 10px !important;
}

html:not(.dark-mode) .trip-type-options .trip-type-option:hover,
html:not(.dark-mode) .oneway-subtypes label:hover,
html:not(.dark-mode) .fare-toggle__switch label:hover {
  color: #0ea5e9 !important;
  background: rgba(255, 255, 255, 0.45) !important;
}

html:not(.dark-mode) .trip-type-options .trip-type-option.trip-type-option--active,
html:not(.dark-mode) .trip-type-options .trip-type-option.active,
html:not(.dark-mode) .oneway-subtypes input:checked+label,
html:not(.dark-mode) .oneway-subtypes label.active {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
  font-weight: 700 !important;
}

/* ── Label typography enhancement in light mode for the booking form ── */
html:not(.dark-mode) .booking-form label.field > span,
html:not(.dark-mode) .booking-form .field > span,
html:not(.dark-mode) .booking-form .field__label-row > span {
  color: #0f1c2e !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: block !important;
  margin-bottom: 0.35rem !important;
}

/* ── Inputs & Fields styling in light mode ── */
html:not(.dark-mode) .field input,
html:not(.dark-mode) .field select,
html:not(.dark-mode) .promo-row input {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1.5px solid rgba(15, 28, 46, 0.16) !important;
  border-radius: 8px !important;
  font-size: 0.95rem !important;
  color: #0f172a !important;
  padding: 0.65rem 0.85rem !important;
  box-shadow: inset 0 1px 2px rgba(15, 28, 60, 0.02) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ── Promo apply button ── */
html:not(.dark-mode) .btn-promo-apply {
  background: rgba(248, 252, 255, 0.95) !important;
  border: 1px solid rgba(148, 196, 220, 0.65) !important;
  color: #0369a1 !important;
  border-radius: 8px !important;
}
html:not(.dark-mode) .btn-promo-apply:hover {
  background: rgba(224, 242, 254, 0.95) !important;
  border-color: #38bdf8 !important;
}

/* ── Section backgrounds in light mode ── */
html:not(.dark-mode) section:not(.hero):not(.city-hero):not(.route-hero) {
  background: transparent;
}

/* ── Upgraded Hero Overlay & Text for Light Mode ── */
html:not(.dark-mode) .hero::after,
html:not(.dark-mode) .city-hero::before,
html:not(.dark-mode) .route-hero::before {
  background: linear-gradient(
    135deg,
    rgba(14, 165, 233, 0.14) 0%,      /* Sky blue */
    rgba(99, 102, 241, 0.10) 35%,     /* Indigo */
    rgba(244, 63, 94, 0.06) 70%,      /* Rose */
    rgba(255, 255, 255, 0.0) 100%
  ) !important;
}

/* Eyebrow glow pulsing animation */
html:not(.dark-mode) .hero__copy .hero__eyebrow {
  background: rgba(3, 105, 161, 0.08) !important;
  border: 1px solid rgba(3, 105, 161, 0.25) !important;
  color: #0369a1 !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Heading clean modern contrast - Dark for bright backdrop */
html:not(.dark-mode) .hero__copy h1,
html:not(.dark-mode) .city-hero h1,
html:not(.dark-mode) .route-hero h1 {
  color: #0f1c2e !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}

html:not(.dark-mode) .hero__copy .hero__sub,
html:not(.dark-mode) .city-hero p,
html:not(.dark-mode) .route-hero p {
  color: #334155 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4) !important;
}

/* Focus glow for text input fields */
html:not(.dark-mode) .field input:focus,
html:not(.dark-mode) .field select:focus,
html:not(.dark-mode) .field textarea:focus,
html:not(.dark-mode) .promo-row input:focus {
  background: #ffffff !important;
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.2) !important;
  transform: translateY(-1px);
}

/* ── Light Mode Partner Pages Overrides ── */
html:not(.dark-mode) .partner-form-card {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  border: 1px solid rgba(186, 230, 253, 0.55) !important;
  box-shadow: 0 4px 20px rgba(15, 28, 60, 0.08), 0 1px 4px rgba(15, 28, 60, 0.05) !important;
}

html:not(.dark-mode) .form-field label {
  color: #0f1c2e !important;
}

html:not(.dark-mode) .form-field input,
html:not(.dark-mode) .form-field select,
html:not(.dark-mode) .form-field textarea {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1.5px solid rgba(15, 28, 46, 0.16) !important;
  color: #0f172a !important;
}

html:not(.dark-mode) .form-field input:focus,
html:not(.dark-mode) .form-field select:focus,
html:not(.dark-mode) .form-field textarea:focus {
  background: #ffffff !important;
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.2) !important;
}

html:not(.dark-mode) .btn-submit {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
}

html:not(.dark-mode) .btn-submit:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35) !important;
}

html:not(.dark-mode) .btn-submit:active {
  transform: translateY(0);
}

html:not(.dark-mode) .benefit-icon {
  background: rgba(15, 28, 46, 0.05) !important;
  color: #0284c7 !important;
}

html:not(.dark-mode) .benefit-content h4 {
  color: #0f1c2e !important;
}

html:not(.dark-mode) .benefit-content p {
  color: #475569 !important;
}

html:not(.dark-mode) .partner-hero p {
  color: #475569 !important;
}