/**
 * Southern Drop Taxi — Unique Midnight Emerald & Cyber Cyan Theme
 * Overrides default styles with custom glassmorphism and cyber neon accents.
 * Load AFTER all other CSS files.
 */

/* ══════════════════════════════════════════════════════════════
   1. BOOKING CARD – Cyber Emerald Glassmorphism
   ══════════════════════════════════════════════════════════════ */
.booking-card {
  background: rgba(8,37,35, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(45,212,191, 0.35);
  border-top: 4px solid var(--cyan-neon);
  border-radius: 20px;
  padding: 1.6rem;
  box-shadow: 0 20px 50px rgba(4,26,25, 0.5), 0 0 30px rgba(45,212,191, 0.25);
  text-align: left;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
  contain: layout style;
  color: #ffffff;
}

.booking-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(45,212,191, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.booking-card:hover {
  box-shadow: 0 25px 60px rgba(4,26,25, 0.65), 0 0 40px rgba(45,212,191, 0.35);
  transform: translateY(-2px);
}

.booking-card__header {
  color: #ffffff !important;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
}

/* Form fields inside booking card */
.booking-card .field span {
  color: #a7ece4;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.booking-card .field input,
.booking-card .field select {
  background: rgba(4,26,25, 0.75);
  border: 1px solid rgba(45,212,191, 0.3);
  color: #ffffff;
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  font-size: 0.92rem;
  transition: all 0.25s ease;
}

.booking-card .field input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.booking-card .field input:focus,
.booking-card .field select:focus {
  outline: none;
  border-color: var(--cyan-neon);
  box-shadow: 0 0 18px rgba(45,212,191, 0.45);
  background: rgba(4,26,25, 0.9);
}

/* City/route hero dark glass card */
.city-hero .booking-card,
.route-hero .booking-card {
  background: rgba(8,37,35, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(45,212,191, 0.35);
  border-top: 4px solid var(--cyan-neon);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(4,26,25, 0.5);
  color: #ffffff;
}

@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .city-hero .booking-card,
  .route-hero .booking-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8,37,35, 0.96);
  }
}
.city-hero .booking-card:hover,
.route-hero .booking-card:hover {
  box-shadow: 0 25px 60px rgba(4,26,25, 0.65);
  transform: none;
}
.city-hero .booking-card > h2,
.route-hero .booking-card > h2 {
  color: #fff;
  margin: 0 0 1.25rem;
  font-size: clamp(1.3rem, 2.6vw, 1.65rem);
  font-weight: 800;
}
.city-hero .booking-card .field input,
.city-hero .booking-card .field select,
.route-hero .booking-card .field input,
.route-hero .booking-card .field select {
  background: rgba(4,26,25, 0.75);
  border: 1px solid rgba(45,212,191, 0.3);
  color: #fff;
  border-radius: 10px;
}
.city-hero .booking-card .field input::placeholder,
.route-hero .booking-card .field input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.city-hero .booking-card .field input:focus,
.city-hero .booking-card .field select:focus,
.route-hero .booking-card .field input:focus,
.route-hero .booking-card .field select:focus {
  outline: none;
  border-color: var(--cyan-neon);
  box-shadow: 0 0 18px rgba(45,212,191, 0.45);
  background: rgba(4,26,25, 0.9);
}
.city-hero .booking-card .field,
.route-hero .booking-card .field { color: rgba(255,255,255,0.88); }
.city-hero .booking-card .btn-primary,
.route-hero .booking-card .btn-primary {
  border-radius: 12px;
  width: 100%;
}
.city-hero .booking-card .form-response,
.route-hero .booking-card .form-response { color: rgba(255,255,255,0.92); }

/* Promo row on dark card */
.city-hero .booking-card .promo-row,
.route-hero .booking-card .promo-row {
  display: grid;
  grid-template-columns: max-content minmax(0,1fr) auto;
  align-items: center;
  gap: 0.45rem 0.5rem;
  margin-top: 0.75rem; width: 100%;
}
.city-hero .booking-card .promo-row input[type="text"],
.route-hero .booking-card .promo-row input[type="text"] {
  background: rgba(3,23,22,0.6);
  border: 1px solid rgba(251,113,133,0.35);
  color: #fff; font-size: 0.8125rem; font-weight: 600;
  height: 36px; padding: 0 0.55rem; border-radius: 10px;
}
.city-hero .booking-card .btn-promo-apply,
.route-hero .booking-card .btn-promo-apply {
  height: 36px; padding: 0 0.85rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #fb7185, #0077b6);
  color: #ffffff; font-weight: 800; font-size: 0.72rem;
  border: none; white-space: nowrap;
}

/* Trip type switcher */
.trip-type-options,
.fare-toggle__switch {
  background: rgba(3, 23, 22, 0.7) !important;
  border: 1px solid rgba(251,113,133, 0.25) !important;
  border-radius: 12px !important;
  padding: 4px !important;
}

.trip-type-option,
.oneway-subtypes label {
  color: #c5e5e0 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}

.trip-type-option--active,
.trip-type-option.active,
.fare-toggle__switch input:checked + label {
  background: linear-gradient(135deg, #fb7185 0%, #0077b6 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(251,113,133, 0.35) !important;
}

/* Vehicle card selected */
.vehicle-selector-card {
  background: rgba(3, 23, 22, 0.6) !important;
  border: 1px solid rgba(251,113,133, 0.2) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  transition: all 0.3s ease !important;
}

.vehicle-selector-card.active,
.vehicle-selector-card.vehicle-selector-card--active {
  border: 2px solid var(--cyan-neon) !important;
  background: rgba(251,113,133, 0.15) !important;
  box-shadow: 0 0 20px rgba(251,113,133, 0.3) !important;
}
.vehicle-selector-card__name { color: #ffffff !important; font-weight: 700 !important; }
.vehicle-selector-card__price { color: var(--cyan-neon) !important; font-weight: 800 !important; }
.vehicle-selector-card:hover {
  border-color: rgba(251,113,133, 0.6) !important;
  transform: translateY(-2px);
}

/* Primary Book Button */
.booking-card .btn-primary,
#calculate-fare-btn,
#confirm-booking-btn {
  background: linear-gradient(135deg, #fb7185 0%, #0077b6 100%) !important;
  color: #ffffff !important;
  font-family: "Outfit", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 0.85rem 1.5rem !important;
  box-shadow: 0 8px 25px rgba(251,113,133, 0.35) !important;
  transition: all 0.3s ease !important;
}

.booking-card .btn-primary:hover,
#calculate-fare-btn:hover,
#confirm-booking-btn:hover {
  background: linear-gradient(135deg, #fda4af 0%, #11998e 100%) !important;
  box-shadow: 0 12px 30px rgba(56, 239, 125, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* Quote / fare modal */
.quote-modal__overlay { background: rgba(3, 23, 22, 0.75); }
.quote-modal {
  background: #092825;
  color: #ffffff;
  border-top: 4px solid var(--cyan-neon);
  border-radius: 20px;
}
.quote-modal__header {
  background: linear-gradient(135deg, #0e3833, #04221f);
  border-radius: 20px 20px 0 0;
}
.quote-fare-amount { color: var(--gold); }

/* Form response states */
.form-response--success { color: var(--cyan-neon); }

/* ══════════════════════════════════════════════════════════════
   2. FOOTER – Deep Emerald, Cyber Cyan accents
   ══════════════════════════════════════════════════════════════ */
.site-footer {
  background: #021210;
  color: #c5e5e0;
  position: relative;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   3. CYBER NEON TICKER STRIP
   ══════════════════════════════════════════════════════════════ */
.d1t-ticker {
  background: linear-gradient(90deg, #051a19 0%, #0e3532 50%, #051a19 100%);
  color: #5eead4;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  padding: 0.65rem 0;
  border-top: 1px solid rgba(45,212,191, 0.35);
  border-bottom: 1px solid rgba(45,212,191, 0.35);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(4,26,25, 0.4);
}

.d1t-ticker__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  white-space: nowrap;
  animation: tickerScroll 25s linear infinite;
}

@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.d1t-ticker__sep {
  color: var(--gold);
  font-size: 1.1rem;
}
/* Subtle radial glow top-right */
.site-footer::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(251,113,133,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.site-footer .footer__col-title { color: var(--amber); }
.site-footer .social-link:hover {
  background: var(--amber);
  color: var(--green-900);
}
.site-footer .newsletter-form button {
  background: linear-gradient(135deg, #fb7185, #e11d48);
  color: var(--green-900);
}
.site-footer .newsletter-form button:hover { filter: brightness(1.08); }
.site-footer .footer__dest-link:hover  { color: var(--amber-light); }
.site-footer .footer__nav-links a:hover { color: var(--amber-light); }
.site-footer .footer__bottom-bar a     { color: var(--amber-light); }
.site-footer .footer__theme-panel      { background: var(--green-800); }
.site-footer .footer__theme-link:hover { color: var(--amber); }
.site-footer .footer__theme-link.active { color: var(--amber); }

.cta { background: var(--green-800); }

/* Floating call btn */
.floating-contact a[aria-label="Call"],
.floating-contact a.floating-call {
  background: var(--green-700);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   3. TRUST / STATS SECTION – warm cards
   ══════════════════════════════════════════════════════════════ */
.trust-section {
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
.trust-section::before {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
}

.trust-card,
.stat-card,
.feature-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
  overflow: hidden;
}
.trust-card::after,
.feature-card::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--amber-dark), var(--amber));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.trust-card:hover::after,
.feature-card:hover::after { transform: scaleX(1); }
.trust-card:hover,
.feature-card:hover {
  box-shadow: var(--shadow-amber);
  transform: translateY(-4px);
}

/* Icon circles on trust cards */
.trust-icon,
.feature-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--amber-pale);
  color: var(--amber-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  transition: background 0.25s, color 0.25s;
}
.trust-card:hover .trust-icon,
.feature-card:hover .feature-icon {
  background: var(--amber);
  color: var(--green-900);
}

/* ══════════════════════════════════════════════════════════════
   4. SERVICES / ROUTE CARDS
   ══════════════════════════════════════════════════════════════ */
.service-card,
.route-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.34,1.3,0.64,1), box-shadow 0.3s ease;
  border: 1px solid var(--gray-200);
  background: var(--white);
}
.service-card:hover,
.route-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 14px 36px rgba(15, 46, 43, 0.12);
  border-color: var(--amber-light);
}

/* ══════════════════════════════════════════════════════════════
   5. FAQ ACCORDION
   ══════════════════════════════════════════════════════════════ */
.faq-item {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 0.6rem;
  transition: border-color 0.25s;
}
.faq-item[open],
.faq-item:focus-within { border-color: var(--amber-light); }

.faq-item summary {
  padding: 1rem 1.2rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--green-800);
  display: flex; align-items: center; justify-content: space-between;
  list-style: none;
  background: var(--white);
  transition: background 0.2s;
}
.faq-item summary:hover { background: var(--amber-pale); }
.faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--amber-dark);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}
.faq-item[open] summary::after {
  content: "−";
  transform: rotate(0deg);
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item .faq-body {
  padding: 0 1.2rem 1rem;
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.7;
  border-top: 1px solid var(--gray-200);
}

/* ══════════════════════════════════════════════════════════════
   6. VEHICLE SECTION CARDS
   --------------------------------------------------------------
   IMPORTANT: These big-card styles target ONLY the homepage fleet
   showcase cards (.vehicle-card:not(.vehicle-card--fare-option)).
   The compact fare-list cards inside the booking modal MUST keep
   their original horizontal flex layout from booking-form.css.
   ══════════════════════════════════════════════════════════════ */
.vehicle-card:not(.vehicle-card--fare-option) {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1rem;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.34,1.4,0.64,1);
  position: relative; overflow: hidden;
}
.vehicle-card:not(.vehicle-card--fare-option)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--amber-pale), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.vehicle-card:not(.vehicle-card--fare-option):hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(15, 46, 43, 0.12), 0 4px 8px rgba(251,113,133,0.12);
  border-color: var(--amber-light);
}
.vehicle-card:not(.vehicle-card--fare-option):hover::before { opacity: 1; }

.vehicle-card:not(.vehicle-card--fare-option) .vehicle-card__price {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--green-700);
}

/* ── Fare-list cards inside booking modal: keep tight horizontal layout ── */
.vehicle-card--fare-option {
  text-align: left;
  padding: 0.55rem 0.7rem;
}
.vehicle-card--fare-option .vehicle-card__price {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--green-700);
  margin-top: 0.1rem;
}
.vehicle-card--fare-option .vehicle-card__title-line {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--green-900);
}
.vehicle-card--fare-option .vehicle-card__title-line small {
  color: var(--amber-dark);
}
.vehicle-card--fare-option .vehicle-card__meta {
  font-size: 0.78rem;
  color: var(--gray-600);
  gap: 0.5rem;
}
.vehicle-card--fare-option .vehicle-card__distance {
  font-size: 0.78rem;
  color: var(--green-700);
}
/* Compact image on narrow screens so info has room */
@media (max-width: 420px) {
  .vehicle-card--fare-option {
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
  }
  .vehicle-card--fare-option .vehicle-card__media {
    flex: 0 0 54px;
    height: 54px;
    border-radius: 12px;
  }
  .vehicle-card--fare-option .vehicle-card__media img {
    max-width: 48px;
    max-height: 48px;
  }
  .vehicle-card--fare-option .vehicle-card__title-line {
    font-size: 0.88rem;
    gap: 0.3rem;
  }
  .vehicle-card--fare-option .vehicle-card__title-line small {
    font-size: 0.7rem;
  }
  .vehicle-card--fare-option .vehicle-card__meta,
  .vehicle-card--fare-option .vehicle-card__distance {
    font-size: 0.72rem;
  }
  .vehicle-card--fare-option .vehicle-card__price {
    font-size: 1rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   7. SECTION HEADINGS – accent underline
   ══════════════════════════════════════════════════════════════ */
.section-title {
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--green-900);
  margin-bottom: 0.4rem;
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: "";
  display: block;
  height: 4px;
  width: 48px;
  background: linear-gradient(90deg, var(--amber), var(--amber-dark));
  border-radius: 2px;
  margin-top: 0.45rem;
}

.section-subtitle {
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  color: var(--gray-600);
  max-width: 540px;
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════════════
   8. REVIEWS / TESTIMONIALS
   ══════════════════════════════════════════════════════════════ */
.review-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: box-shadow 0.3s, transform 0.3s;
  position: relative;
}
.review-card::before {
  content: "\201C";
  position: absolute;
  top: 0.8rem; right: 1.2rem;
  font-size: 4rem;
  line-height: 1;
  color: var(--amber-pale);
  font-family: Georgia, serif;
  pointer-events: none;
}
.review-card:hover {
  box-shadow: var(--shadow-amber);
  transform: translateY(-3px);
}
.review-card .stars { color: var(--amber); font-size: 1rem; }

/* ══════════════════════════════════════════════════════════════
   9. CTA BANNER – warm green
   ══════════════════════════════════════════════════════════════ */
.cta {
  background: linear-gradient(135deg, var(--green-800) 0%, var(--green-700) 100%);
  position: relative; overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(251,113,133,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.cta .btn-primary { box-shadow: 0 6px 20px rgba(251,113,133,0.35); }

/* ══════════════════════════════════════════════════════════════
   10. ANIMATED COUNTER (JS counts up on viewport enter)
   ══════════════════════════════════════════════════════════════ */
.tct-counter {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--amber);
  line-height: 1;
  /* Prevent layout shift while count-up animates:
     display:inline-block lets min-width apply; text-align:right keeps
     the number right-anchored so surrounding labels never move.        */
  display: inline-block;
  min-width: 3.6ch;          /* fits "15,000" for most proportional fonts */
  text-align: right;
  will-change: contents;     /* hint: only text changes, no geometry reflow */
}

/* Hero stat numbers are smaller — tighten the reserved width */
.hero__stat-num.tct-counter {
  font-size: inherit;         /* respect the 0.85 rem set by .hero__stat   */
  font-weight: 800;
  color: var(--amber-light);
  min-width: 3.2ch;
}

/* ══════════════════════════════════════════════════════════════
   11. ROUTE PAGE / CITY PAGE section tints
   ══════════════════════════════════════════════════════════════ */
.city-hero,
.route-hero {
  background-color: var(--green-900);
}
.city-hero::after,
.route-hero::after {
  background: linear-gradient(
    160deg,
    rgba(15, 46, 43, 0.65) 0%,
    rgba(15, 46, 43, 0.85) 50%,
    rgba(15, 46, 43, 0.97) 100%
  );
}

/* ══════════════════════════════════════════════════════════════
   12. LOADING SPINNER
   ══════════════════════════════════════════════════════════════ */
.form-response__spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2.5px solid rgba(15, 118, 110, 0.20);
  border-top-color: var(--green-600);
  border-radius: 50%;
  animation: tct-spin 0.75s linear infinite;
  vertical-align: middle;
  margin-right: 0.35rem;
}
@keyframes tct-spin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════
   13. WHATSAPP FLOATING – keep green, add pulse ring
   ══════════════════════════════════════════════════════════════ */
.wa-floating-btn {
  position: relative;
}
.wa-floating-btn::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.5);
  animation: tct-wa-pulse 2.5s ease-out infinite;
  pointer-events: none;
}
@keyframes tct-wa-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════
   14. PAGE TRANSITION FADE-IN
   ══════════════════════════════════════════════════════════════
   NOTE: Originally used `transform: translateY()` on <main>, but ANY
   transform on an ancestor (even an identity matrix left over after
   the animation completes) creates a new containing block for
   `position: fixed` descendants — which broke the .quote-modal
   overlay (it sized itself to <main>'s height instead of the viewport).
   Opacity-only fade has no such side-effect.
*/
@keyframes tct-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
main {
  animation: tct-page-in 0.4s ease both;
}

/* ══════════════════════════════════════════════════════════════
   15. TOP ANNOUNCEMENT BANNER – amber
   ══════════════════════════════════════════════════════════════ */
.text-banner {
  background: linear-gradient(90deg, var(--green-700), var(--green-600), var(--green-700));
  background-size: 200% 100%;
  animation: tct-banner-shift 6s linear infinite;
  color: var(--white);
  border-bottom: 2px solid var(--amber-dark);
  box-shadow: 0 3px 12px rgba(251, 113, 133, 0.20);
}
@keyframes tct-banner-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ══════════════════════════════════════════════════════════════
   16. TRIP TYPE TABS + ACTIVE CHIPS – green instead of navy
   ══════════════════════════════════════════════════════════════ */
/* Primary trip type row active */
.trip-type-options .trip-type-option.trip-type-option--active,
.trip-type-options .trip-type-option.active {
  background: linear-gradient(135deg, var(--green-700) 0%, var(--green-600) 100%) !important;
  color: #fff !important;
  border-color: var(--green-800) !important;
  box-shadow: 0 4px 10px rgba(15, 118, 110, 0.22) !important;
}
/* Secondary oneway subtypes active */
.oneway-subtypes input:checked + label,
.oneway-subtypes label.active {
  background: linear-gradient(135deg, var(--green-700) 0%, var(--green-600) 100%) !important;
  color: #fff !important;
  border-color: var(--green-800) !important;
  box-shadow: 0 3px 8px rgba(15, 118, 110, 0.18) !important;
}
/* Fare toggle active tab */
.fare-toggle__switch .trip-type-option--active,
.fare-toggle__switch input:checked + label {
  background: linear-gradient(135deg, var(--green-700), var(--green-600)) !important;
  color: #fff !important;
}
/* City/route hero btn-primary – amber, not navy */
.city-hero .booking-card .btn-primary,
.route-hero .booking-card .btn-primary {
  background: linear-gradient(135deg, #fb7185, #e11d48) !important;
  color: var(--green-900) !important;
  box-shadow: 0 10px 28px rgba(225, 29, 72, 0.35) !important;
}
/* Promo apply on dark card */
.city-hero .booking-card .promo-row input[type="text"]:focus,
.route-hero .booking-card .promo-row input[type="text"]:focus {
  border-color: rgba(251,113,133, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(251,113,133, 0.22) !important;
}
/* Dark fare modal – city/route page */
body.city-page .quote-modal__card,
body.route-page .quote-modal__card {
  background: #0f2e2b !important;
  border: 1px solid rgba(251, 113, 133, 0.2) !important;
}
body.city-page .vehicle-card--fare-option.active,
body.route-page .vehicle-card--fare-option.active {
  background: linear-gradient(135deg, var(--green-700) 0%, var(--green-600) 100%) !important;
  border-color: var(--amber) !important;
  box-shadow: 0 8px 16px rgba(15, 46, 43, 0.46) !important;
}
body.city-page .vehicle-card--fare-option.active .vehicle-card__radio--left,
body.route-page .vehicle-card--fare-option.active .vehicle-card__radio--left {
  border-color: var(--amber) !important;
  background: linear-gradient(135deg, #fb7185, #e11d48) !important;
}
body.city-page .selected-fare-card__toggle input:checked ~ .selected-fare-card__switch,
body.route-page .selected-fare-card__toggle input:checked ~ .selected-fare-card__switch {
  background: var(--amber) !important;
}
body.city-page .quote-modal__actions .btn-primary,
body.city-page .quote-modal .quote-btn--confirm,
body.route-page .quote-modal__actions .btn-primary,
body.route-page .quote-modal .quote-btn--confirm {
  background: linear-gradient(135deg, #fb7185, #e11d48) !important;
  color: var(--green-900) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(225, 29, 72, 0.3) !important;
}
/* Toggle switch checked state (fare type) */
.quote-fare-type-toggle input:checked ~ .quote-fare-type-toggle__switch {
  background: var(--amber) !important;
}
/* Phone input focus */
.phone-input-wrapper:focus-within {
  border-color: var(--green-500) !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.16) !important;
}
/* Hourly active */
.hourly-option--active {
  background: var(--green-700) !important;
  border-color: var(--green-700) !important;
  color: #fff !important;
}
/* Fare card amount */
.fare-card {
  background: linear-gradient(160deg, #ecfeff 0%, #ccfbf1 45%, #f0fdfa 100%) !important;
  border-color: #99f6e4 !important;
}
.fare-card__amount { color: var(--green-800) !important; }
.fare-card__label  { color: var(--green-700) !important; }

/* ══════════════════════════════════════════════════════════════
   18. RESPONSIVE TWEAKS
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .booking-card {
    border-left-width: 4px;
  }
  .hero__badge { font-size: 0.7rem; }
}

/* ══════════════════════════════════════════════════════════════
   FARE QUOTE MODAL → RIGHT-SIDE SLIDE-IN DRAWER
   ══════════════════════════════════════════════════════════════ */
/* Always rendered (flex) but hidden — so the card transform reliably transitions */
.quote-modal {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.quote-modal.quote-modal--open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}
.quote-modal__card {
  max-width: 480px !important;
  width: 100% !important;
  max-height: 100vh !important;
  height: 100vh !important;
  border-radius: 0 !important;
  margin: 0 !important;
  overflow-y: auto;
  transform: translateX(100%) !important;
  will-change: transform;
}
/* When open: rest at 0 + play the slide-in (animation reliably fires on render) */
.quote-modal.quote-modal--open .quote-modal__card {
  transform: translateX(0) !important;
  animation: tct-drawer-in 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes tct-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .quote-modal.quote-modal--open .quote-modal__card { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   MASTER HIGH-CONTRAST & OBSIDIAN VELVET THEME OVERRIDES
   ══════════════════════════════════════════════════════════════ */

/* Site Header Navbar - Seamless Obsidian Velvet Glassmorphism */
.site-header {
  background: #041a19 !important;
  border-bottom: 1px solid rgba(45,212,191, 0.25) !important;
  box-shadow: 0 4px 25px rgba(4,26,25, 0.6) !important;
  color: #ffffff !important;
}

.site-header a,
.site-header .nav-link,
.site-header .nav__link,
.site-header .nav-dropdown__toggle {
  color: #a7ece4 !important;
  transition: color 0.25s ease !important;
}

.site-header a:hover,
.site-header .nav-link:hover,
.site-header .nav__link:hover {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(45,212,191, 0.6) !important;
}

.logo__mark {
  background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%) !important;
  color: #ffffff !important;
  padding: 0.1rem 0.35rem !important;
  border-radius: 4px !important;
}

.logo__text {
  color: #ffffff !important;
  background: rgba(8,37,35, 0.85) !important;
  border: 1px solid rgba(45,212,191, 0.35) !important;
  padding: 0.1rem 0.35rem !important;
  border-radius: 4px !important;
}

/* Ticker Strip - Royal Obsidian Violet */
.d1t-ticker {
  background: linear-gradient(90deg, #051a19 0%, #0e3532 50%, #051a19 100%) !important;
  color: #5eead4 !important;
  border-top: 1px solid rgba(45,212,191, 0.35) !important;
  border-bottom: 1px solid rgba(45,212,191, 0.35) !important;
  box-shadow: 0 4px 20px rgba(4,26,25, 0.4) !important;
}

.d1t-ticker span {
  color: #5eead4 !important;
  font-weight: 700 !important;
}

.d1t-ticker__sep {
  color: #fbbf24 !important;
}

/* Hero Stats Strip - High Contrast Royal Violet */
.hero__stats-strip .d1t-stat-block,
.d1t-stats-strip .d1t-stat-block,
.city-hero .hero__stats-strip .d1t-stat-block,
.route-hero .hero__stats-strip .d1t-stat-block,
html:not(.dark-mode) .hero__stats-strip .d1t-stat-block,
html:not(.dark-mode) .city-hero .hero__stats-strip .d1t-stat-block {
  background: rgba(8,37,35, 0.85) !important;
  border: 1px solid rgba(45,212,191, 0.35) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 4px 20px rgba(4,26,25, 0.4) !important;
}

.hero__stats-strip .d1t-stat-block__num,
.d1t-stats-strip .d1t-stat-block__num,
.city-hero .d1t-stat-block__num,
.route-hero .d1t-stat-block__num,
html:not(.dark-mode) .hero__stats-strip .d1t-stat-block__num,
html:not(.dark-mode) .city-hero .d1t-stat-block__num {
  color: #5eead4 !important;
  text-shadow: 0 0 12px rgba(45,212,191, 0.5) !important;
  font-weight: 800 !important;
}

.hero__stats-strip .d1t-stat-block__label,
.d1t-stats-strip .d1t-stat-block__label,
.city-hero .d1t-stat-block__label,
.route-hero .d1t-stat-block__label,
html:not(.dark-mode) .hero__stats-strip .d1t-stat-block__label,
html:not(.dark-mode) .city-hero .d1t-stat-block__label {
  color: #a7ece4 !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ══════════════════════════════════════════════════════════════
   VIBRANT HIGH-CONTRAST NON-FLAT COLOR SYSTEM OVERRIDES
   ══════════════════════════════════════════════════════════════ */

/* 1. Booking Form Glass Card & Form Elements */
.booking-card,
.city-hero .booking-card,
.route-hero .booking-card {
  background: linear-gradient(145deg, rgba(17,59,52, 0.96) 0%, rgba(9,33,29, 0.98) 100%) !important;
  border: 1px solid rgba(45,212,191, 0.45) !important;
  border-top: 4px solid transparent !important;
  border-image: linear-gradient(90deg, #5eead4, #fb7185, #2dd4bf, #0ea5a4, #fb7185) 1 !important;
  box-shadow: 0 25px 60px rgba(4,26,25, 0.75), 0 0 35px rgba(45,212,191, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.booking-card .field span,
.booking-card label {
  color: #edfaf8 !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.booking-card .field input,
.booking-card .field select,
.city-hero .booking-card .field input,
.city-hero .booking-card .field select,
.route-hero .booking-card .field input,
.route-hero .booking-card .field select {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1.5px solid rgba(45,212,191, 0.4) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.booking-card .field input::placeholder {
  color: rgba(206,241,236, 0.65) !important;
}

.booking-card .field input:focus,
.booking-card .field select:focus,
.city-hero .booking-card .field input:focus,
.city-hero .booking-card .field select:focus,
.route-hero .booking-card .field input:focus,
.route-hero .booking-card .field select:focus {
  outline: none !important;
  border-color: #fb7185 !important;
  box-shadow: 0 0 22px rgba(251,113,133, 0.5), inset 0 0 12px rgba(45,212,191, 0.25) !important;
  background: rgba(8,37,35, 0.95) !important;
}

/* Trip Type Selector Chips */
.trip-type-options,
.fare-toggle__switch {
  background: rgba(4,26,25, 0.85) !important;
  border: 1.5px solid rgba(45,212,191, 0.35) !important;
  border-radius: 14px !important;
  padding: 5px !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.trip-type-option,
.oneway-subtypes label {
  color: #a7ece4 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

.trip-type-option:hover {
  background: rgba(45,212,191, 0.2) !important;
  color: #ffffff !important;
}

.trip-type-option--active,
.trip-type-option.active,
.fare-toggle__switch input:checked + label,
.oneway-subtypes input:checked + label {
  background: linear-gradient(135deg, #2dd4bf 0%, #0ea5a4 50%, #fb7185 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 20px rgba(45,212,191, 0.55) !important;
}

/* Vehicle Selector Cards Inside Booking Form */
.vehicle-selector-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px;
}

/* ══════════════════════════════════════════════════════════════
   MASTER BOOKING CARD DARK OBSIDIAN GLASS OVERRIDES
   (Guarantees 100% High Contrast & Readability in ALL Modes)
   ══════════════════════════════════════════════════════════════ */

/* 1. Main Booking Card Container */
.booking-card,
.booking-card--home,
.city-hero .booking-card,
.route-hero .booking-card,
html:not(.dark-mode) .booking-card,
html:not(.dark-mode) .booking-card--home,
html.dark-mode .booking-card,
html.dark-mode .booking-card--home {
  background: linear-gradient(145deg, rgba(13,47,41, 0.98) 0%, rgba(7,26,23, 0.99) 100%) !important;
  border: 1px solid rgba(45,212,191, 0.45) !important;
  border-top: 4px solid transparent !important;
  border-image: linear-gradient(90deg, #5eead4, #fb7185, #2dd4bf, #0ea5a4, #fb7185) 1 !important;
  box-shadow: 0 25px 60px rgba(4,26,25, 0.85), 0 0 35px rgba(45,212,191, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  padding: 1.6rem !important;
}

/* 2. Header Title & Subtitle */
.booking-card > h2,
.booking-card__header,
.booking-card--home > h2,
html:not(.dark-mode) .booking-card > h2,
html:not(.dark-mode) .booking-card--home > h2 {
  color: #ffffff !important;
  font-family: "Outfit", sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.4rem, 2.5vw, 1.75rem) !important;
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: 1.2rem !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
}

/* 3. Field Labels (Always Crisp White / Lavender) */
.booking-card .field span,
.booking-card label,
.booking-card--home .field span,
.booking-card--home label,
html:not(.dark-mode) .booking-card .field span,
html:not(.dark-mode) .booking-card--home .field span,
html:not(.dark-mode) .booking-card label {
  color: #edfaf8 !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
  margin-bottom: 0.4rem !important;
  display: block !important;
}

/* 4. Form Input & Select Controls */
.booking-card .field input,
.booking-card .field select,
.booking-card input[type="text"],
.booking-card input[type="date"],
.booking-card input[type="time"],
.booking-card input[type="tel"],
.booking-card input[type="email"],
.booking-card select,
.booking-card--home .field input,
.booking-card--home .field select,
html:not(.dark-mode) .booking-card input,
html:not(.dark-mode) .booking-card select,
html:not(.dark-mode) .booking-card--home .field input,
html:not(.dark-mode) .booking-card--home .field select,
html.dark-mode .booking-card input,
html.dark-mode .booking-card select {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(45,212,191, 0.4) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  height: auto !important;
  padding: 0.65rem 0.85rem !important;
}

/* Input Placeholders & Picker Icons */
.booking-card input::placeholder,
.booking-card--home input::placeholder,
html:not(.dark-mode) .booking-card input::placeholder {
  color: rgba(206,241,236, 0.7) !important;
}

.booking-card input[type="date"]::-webkit-calendar-picker-indicator,
.booking-card input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) sepia(1) saturate(5) hue-rotate(220deg) !important;
  cursor: pointer !important;
  opacity: 0.9 !important;
}

/* Input Hover & Focus States */
.booking-card .field input:focus,
.booking-card .field select:focus,
.booking-card--home .field input:focus,
.booking-card--home .field select:focus,
html:not(.dark-mode) .booking-card input:focus,
html:not(.dark-mode) .booking-card select:focus {
  outline: none !important;
  border-color: #fb7185 !important;
  box-shadow: 0 0 22px rgba(251,113,133, 0.5), inset 0 0 12px rgba(45,212,191, 0.25) !important;
  background: rgba(8,29,25, 0.98) !important;
  color: #ffffff !important;
}

/* 5. Phone Input Wrapper & Country Trigger */
.phone-input-wrapper,
.phone-input-wrapper--country,
.booking-card--home .phone-input-wrapper,
html:not(.dark-mode) .phone-input-wrapper,
html:not(.dark-mode) .booking-card--home .phone-input-wrapper,
html.dark-mode .phone-input-wrapper {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(45,212,191, 0.4) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.phone-input-wrapper:focus-within,
html:not(.dark-mode) .phone-input-wrapper:focus-within,
html.dark-mode .phone-input-wrapper:focus-within {
  border-color: #fb7185 !important;
  box-shadow: 0 0 22px rgba(251,113,133, 0.5), inset 0 0 10px rgba(45,212,191, 0.25) !important;
  background: rgba(8,29,25, 0.98) !important;
}

.country-code-trigger,
.phone-input-wrapper .country-code-trigger,
html:not(.dark-mode) .phone-input-wrapper .country-code-trigger,
html:not(.dark-mode) .booking-card--home .phone-input-wrapper .country-code-trigger,
html.dark-mode .phone-input-wrapper .country-code-trigger {
  background: rgba(45,212,191, 0.25) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-right: 1px solid rgba(45,212,191, 0.35) !important;
  padding: 0.55rem 0.75rem !important;
  height: 100% !important;
}

.phone-national-input,
.phone-input-wrapper .phone-national-input,
html:not(.dark-mode) .phone-input-wrapper .phone-national-input,
html:not(.dark-mode) .booking-card--home .phone-input-wrapper .phone-national-input,
html.dark-mode .phone-input-wrapper .phone-national-input {
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.55rem 0.85rem !important;
  width: 100% !important;
}

/* 6. Trip Type Switcher & Subtypes Container */
.trip-type-options,
.fare-toggle__switch,
.oneway-subtypes,
.booking-card--home .trip-type-options,
.booking-card--home .oneway-subtypes,
html:not(.dark-mode) .trip-type-options,
html:not(.dark-mode) .booking-card--home .trip-type-options,
html:not(.dark-mode) .booking-card--home .oneway-subtypes {
  background: rgba(5,18,16, 0.95) !important;
  border: 1.5px solid rgba(45,212,191, 0.4) !important;
  border-radius: 14px !important;
  padding: 5px !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  margin-bottom: 1.1rem !important;
}

.trip-type-option,
.oneway-subtypes label,
html:not(.dark-mode) .trip-type-option,
html:not(.dark-mode) .booking-card--home .trip-type-options .trip-type-option,
html:not(.dark-mode) .booking-card--home .oneway-subtypes label {
  color: #a7ece4 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  background: transparent !important;
  transition: all 0.25s ease !important;
}

.trip-type-option:hover,
.oneway-subtypes label:hover {
  background: rgba(45,212,191, 0.25) !important;
  color: #ffffff !important;
}

.trip-type-option--active,
.trip-type-option.active,
.fare-toggle__switch input:checked + label,
.oneway-subtypes input:checked + label,
html:not(.dark-mode) .trip-type-option.active,
html:not(.dark-mode) .booking-card--home .trip-type-options .trip-type-option.active,
html:not(.dark-mode) .booking-card--home .oneway-subtypes input:checked + label {
  background: linear-gradient(135deg, #2dd4bf 0%, #0ea5a4 50%, #fb7185 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 20px rgba(45,212,191, 0.55) !important;
}

/* ══════════════════════════════════════════════════════════════
   AUTHENTIC INDIAN HIGHWAY GREEN ARROW SIGNBOARD BUTTONS
   (Based on User Sketch: Trichy, Madurai, Chennai Highway Boards)
   ══════════════════════════════════════════════════════════════ */

/* City Buttons, City Cards, Route Cards & City Chips */
.city-card,
.route-card,
.city-tab,
.city-pill,
.city-chip,
.city-route-link,
.popular-route-card,
.routes-list-grid .route-card,
.city-routes-inner a,
.routes-grid a,
.highway-signboard {
  position: relative !important;
  background: linear-gradient(135deg, #046a38 0%, #004d25 100%) !important;
  color: #ffffff !important;
  font-family: "Outfit", sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.02rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 0.85rem 2.4rem 0.85rem 1.4rem !important;
  border: 2px solid #ffffff !important;
  border-radius: 6px 0 0 6px !important;
  /* Pointed Right Arrow Signboard Shape matching hand drawing */
  clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%) !important;
  box-shadow: 0 6px 20px rgba(4, 106, 56, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.6rem !important;
  min-height: 48px !important;
  margin: 0.4rem !important;
}

/* Child text elements inside highway signboard */
.city-card a,
.city-card span,
.city-card h3,
.city-card h4,
.route-card span,
.route-card a,
.route-card .route-title,
.route-card__text {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.route-card small,
.route-card__text small,
.route-meta {
  color: #a7f3d0 !important;
  font-weight: 600 !important;
}

/* Arrow Icon Color Force Pure Luminous White */
.route-card__arrow,
.route-arrow,
.route-card svg,
.route-card svg path,
.route-card svg line,
.route-card svg polyline,
.route-card i,
.city-card svg,
.city-card svg path,
.city-card i,
.city-chip svg,
.popular-route-card svg,
.popular-route-card svg path,
.highway-signboard svg,
.highway-signboard svg path,
html:not(.dark-mode) .route-card__arrow,
html:not(.dark-mode) .route-card svg path,
html.dark-mode .route-card__arrow,
html.dark-mode .route-card svg path {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  font-weight: 900 !important;
  font-size: 1.2rem !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)) !important;
}

/* Hover Motion & Highway Illumination Effect */
.city-card:hover,
.route-card:hover,
.city-tab:hover,
.city-pill:hover,
.city-chip:hover,
.city-route-link:hover,
.popular-route-card:hover,
.routes-list-grid .route-card:hover,
.city-routes-inner a:hover,
.routes-grid a:hover,
.district-card:hover,
.popular-cities-grid a:hover,
.routes-flex a:hover,
.destinations-grid a:hover,
.highway-signboard:hover {
  background: linear-gradient(135deg, #059669 0%, #046a38 100%) !important;
  transform: translateX(6px) scale(1.04) !important;
  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.route-card:hover .route-card__arrow,
.route-card:hover .route-arrow,
.route-card:hover svg,
.route-card:hover svg path {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  transform: translateX(6px) scale(1.2) !important;
}


/* Feature Icons with Highway Signboard Accent Glow */
.feature-card:hover .feature-card__icon {
  transform: scale(1.1) rotate(-3deg) !important;
  box-shadow: 0 10px 25px rgba(251,113,133, 0.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   ULTRACLEAN HIGH-CONTRAST BOOKING FORM OVERRIDES
   (Direct fix for Tab Bar, Phone Input, Date/Time Text & Vehicle Cards)
   ══════════════════════════════════════════════════════════════ */

/* 1. Trip Type & Subtype Switcher Containers (Eliminates White Backgrounds) */
.booking-card .trip-type-options,
.booking-card .fare-toggle__switch,
.booking-card .oneway-subtypes,
.trip-type-block .trip-type-options,
.trip-type-block .oneway-subtypes,
.fare-toggle__switch,
.trip-type-options,
.oneway-subtypes,
html:not(.dark-mode) .trip-type-options,
html:not(.dark-mode) .fare-toggle__switch,
html:not(.dark-mode) .oneway-subtypes,
html:not(.dark-mode) .booking-card--home .trip-type-options,
html:not(.dark-mode) .booking-card--home .oneway-subtypes {
  background: rgba(8,27,24, 0.95) !important;
  border: 1.5px solid rgba(45,212,191, 0.45) !important;
  border-radius: 16px !important;
  padding: 6px !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6) !important;
  margin-bottom: 1.1rem !important;
  display: flex !important;
}

/* 2. Inactive Trip Type & Subtype Tab Buttons/Labels */
.booking-card .trip-type-option,
.booking-card .oneway-subtypes label,
.trip-type-option,
.oneway-subtypes label,
.fare-toggle__switch label,
html:not(.dark-mode) .trip-type-option,
html:not(.dark-mode) .oneway-subtypes label,
html:not(.dark-mode) .booking-card--home .trip-type-options .trip-type-option,
html:not(.dark-mode) .booking-card--home .oneway-subtypes label {
  color: #def6f2 !important;
  font-family: "Outfit", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: none !important;
  padding: 0.6rem 1rem !important;
  transition: all 0.25s ease !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

/* Hover State for Inactive Tabs */
.trip-type-option:hover,
.oneway-subtypes label:hover,
html:not(.dark-mode) .trip-type-option:hover,
html:not(.dark-mode) .oneway-subtypes label:hover {
  background: rgba(45,212,191, 0.25) !important;
  color: #ffffff !important;
}

/* 3. Active Selected Tab Chips (One-Way & OUTSTATION) */
.trip-type-option--active,
.trip-type-option.active,
.fare-toggle__switch input:checked + label,
.oneway-subtypes input:checked + label,
.oneway-subtypes label.active,
html:not(.dark-mode) .trip-type-option.active,
html:not(.dark-mode) .trip-type-option.trip-type-option--active,
html:not(.dark-mode) .booking-card--home .trip-type-options .trip-type-option.active,
html:not(.dark-mode) .booking-card--home .oneway-subtypes input:checked + label {
  background: linear-gradient(135deg, #2dd4bf 0%, #0ea5a4 50%, #fb7185 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 22px rgba(45,212,191, 0.65) !important;
  border: none !important;
}

/* 4. Phone Input Container & Inner Input (Eliminates White Box) */
.phone-input-wrapper,
.phone-input-wrapper--country,
.booking-card .phone-input-wrapper,
.booking-card--home .phone-input-wrapper,
html:not(.dark-mode) .phone-input-wrapper,
html:not(.dark-mode) .booking-card--home .phone-input-wrapper {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(45,212,191, 0.4) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.country-code-trigger,
.phone-input-wrapper .country-code-trigger,
html:not(.dark-mode) .phone-input-wrapper .country-code-trigger {
  background: rgba(45,212,191, 0.28) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-right: 1.5px solid rgba(45,212,191, 0.4) !important;
  padding: 0.65rem 0.85rem !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.phone-national-input,
#contact-phone,
#whatsapp-phone,
.phone-input-wrapper input,
.phone-input-wrapper .phone-national-input,
html:not(.dark-mode) .phone-national-input,
html:not(.dark-mode) #contact-phone,
html:not(.dark-mode) .phone-input-wrapper input {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.65rem 0.85rem !important;
  width: 100% !important;
}

/* 5. Date & Time Input Text Contrast Fix */
.booking-card input[type="date"],
.booking-card input[type="time"],
.booking-card input[type="datetime-local"],
#end-date-input,
#drop-time-input,
html:not(.dark-mode) .booking-card input[type="date"],
html:not(.dark-mode) .booking-card input[type="time"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  color-scheme: dark !important; /* Forces native browser calendar & time text to dark mode white! */
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(45,212,191, 0.4) !important;
}

/* 6. Vehicle Selector Cards Styling */
.vehicle-selector-grid .vehicle-selector-card,
.vehicle-selector-card,
html:not(.dark-mode) .vehicle-selector-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(45,212,191, 0.35) !important;
  border-radius: 16px !important;
  padding: 0.85rem 0.5rem !important;
  color: #ffffff !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.vehicle-selector-card__name {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

.vehicle-selector-card__price {
  color: #fb7185 !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
}

/* ══════════════════════════════════════════════════════════════
   MASTER INDIAN HIGHWAY ROAD THEME SYSTEM
   (Whole Page Highway Styling, Emerald Green Theme & Dynamic Animations)
   ══════════════════════════════════════════════════════════════ */

/* 1. Global Page Background - Midnight Highway Dark Emerald Pavement Canvas */
body,
main,
.site-main,
section,
.hero,
.trust-section,
.vehicle-section,
.faq-section,
.seo-content-section,
.about-section,
.features-section,
html:not(.dark-mode) body,
html:not(.dark-mode) section,
html.dark-mode body,
html.dark-mode section {
  background-color: #021a14 !important;
  color: #e2f8f3 !important;
}

/* Subtle Animated Road Lane Mesh Grid Overlay */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    linear-gradient(to right, rgba(4, 106, 56, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(4, 106, 56, 0.09) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

/* 2. Section Separators - Reflective Highway Dashed Yellow Dividers */
section {
  position: relative !important;
}

section::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    #f59e0b 0px,
    #f59e0b 35px,
    transparent 35px,
    transparent 65px
  ) !important;
  opacity: 0.85 !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.5) !important;
  margin-top: 2rem !important;
}

/* 3. Section Titles - Overhead Highway Direction Signboards */
.section-title,
.hero__title,
.section-header h2,
.seo-title,
html:not(.dark-mode) .section-title {
  font-family: "Outfit", sans-serif !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 25px rgba(5, 150, 105, 0.4) !important;
  position: relative !important;
}

.section-title::after {
  content: "";
  display: block !important;
  height: 4px !important;
  width: 90px !important;
  background: linear-gradient(90deg, #046a38, #059669, #10b981) !important;
  border-radius: 2px !important;
  margin-top: 0.6rem !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.7) !important;
}

.section-subtitle,
.hero__subtitle,
p.lead {
  color: #a7f3d0 !important;
  font-weight: 500 !important;
  font-size: 1.05rem !important;
}

/* 4. Booking Form - Indian Highway Glassmorphism */
.booking-card,
.booking-card--home,
.city-hero .booking-card,
.route-hero .booking-card,
html:not(.dark-mode) .booking-card,
html:not(.dark-mode) .booking-card--home {
  background: linear-gradient(145deg, rgba(4, 38, 28, 0.98) 0%, rgba(2, 20, 15, 0.99) 100%) !important;
  border: 2px solid #ffffff !important;
  border-top: 6px solid #046a38 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(5, 150, 105, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border-radius: 20px !important;
}

/* Booking Form Primary Button */
.booking-card .btn-primary,
#calculate-fare-btn,
#confirm-booking-btn,
.btn-primary,
.cta .btn-primary {
  background: linear-gradient(135deg, #046a38 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-family: "Outfit", sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border: 2px solid #ffffff !important;
  border-radius: 12px !important;
  padding: 0.9rem 1.8rem !important;
  box-shadow: 0 8px 25px rgba(4, 106, 56, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.booking-card .btn-primary:hover,
#calculate-fare-btn:hover,
#confirm-booking-btn:hover,
.btn-primary:hover,
.cta .btn-primary:hover {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  box-shadow: 0 14px 35px rgba(16, 185, 129, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-3px) scale(1.02) !important;
  color: #ffffff !important;
}

/* 5. All Content & Feature Cards - Highway Glass Cards */
.trust-card,
.stat-card,
.feature-card,
.service-card,
.review-card,
.faq-item,
.seo-card,
.about-card,
html:not(.dark-mode) .trust-card,
html:not(.dark-mode) .feature-card,
html:not(.dark-mode) .review-card,
html:not(.dark-mode) .faq-item {
  background: rgba(4, 34, 26, 0.88) !important;
  border: 1.5px solid rgba(5, 150, 105, 0.4) !important;
  border-radius: 18px !important;
  color: #ffffff !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(14px) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.trust-card:hover,
.feature-card:hover,
.service-card:hover,
.review-card:hover,
.faq-item[open] {
  background: rgba(5, 48, 36, 0.96) !important;
  border-color: #10b981 !important;
  box-shadow: 0 16px 45px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-5px) !important;
}

.trust-card h3,
.feature-card h3,
.service-card h3,
.review-card h4,
.faq-item summary {
  color: #ffffff !important;
  font-family: "Outfit", sans-serif !important;
  font-weight: 700 !important;
}

.trust-card p,
.feature-card p,
.service-card p,
.review-card p,
.faq-body,
.faq-item p {
  color: #d1fae5 !important;
}

/* 6. Vehicle Cards - Highway Fleet Showcase */
.vehicle-selector-grid .vehicle-selector-card,
.vehicle-selector-card,
.vehicle-card:not(.vehicle-card--fare-option),
html:not(.dark-mode) .vehicle-card {
  background: rgba(4, 34, 26, 0.88) !important;
  border: 1.5px solid rgba(5, 150, 105, 0.4) !important;
  border-radius: 18px !important;
  color: #ffffff !important;
}

.vehicle-selector-card.active,
.vehicle-selector-card.vehicle-selector-card--active,
.vehicle-selector-card:hover,
.vehicle-card:not(.vehicle-card--fare-option):hover {
  background: rgba(5, 48, 36, 0.96) !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.5) !important;
}

.vehicle-selector-card__price,
.vehicle-card__price {
  color: #34d399 !important;
  font-weight: 800 !important;
}

/* 7. Header Navbar & Footer Styling */
.site-header {
  background: rgba(2, 18, 14, 0.96) !important;
  border-bottom: 2px solid rgba(5, 150, 105, 0.4) !important;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.7) !important;
}

.site-header a,
.site-header .nav-link,
.site-header .nav__link {
  color: #d1fae5 !important;
}

.site-header a:hover,
.site-header .nav-link:hover {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(16, 185, 129, 0.7) !important;
}

.site-footer {
  background: #01120e !important;
  border-top: 4px solid #046a38 !important;
  color: #d1fae5 !important;
}

.site-footer a {
  color: #a7f3d0 !important;
}

.site-footer a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(16, 185, 129, 0.7) !important;
}

/* 8. Highway Dynamic Shine Sweep Animation */
@keyframes highwayGlint {
  0% { transform: translateX(-100%) rotate(25deg); }
  100% { transform: translateX(220%) rotate(25deg); }
}

.city-card::before,
.route-card::before,
.highway-signboard::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: rotate(25deg);
  pointer-events: none;
}

.city-card:hover::before,
.route-card:hover::before,
.highway-signboard:hover::before {
  animation: highwayGlint 0.85s ease;
}







/* ================================================================
   BOOKING FORM – DARK HIGHWAY THEME NUCLEAR OVERRIDE
   Defeats booking-form.css, tct-redesign.css, light-theme.css
   Uses max specificity to enforce dark emerald on all form elements
   ================================================================ */

/* --- Booking Card Container --- */
.booking-card,
html:not(.dark-mode) .booking-card,
html:not(.dark-mode) .booking-card--home,
html .booking-card,
body .booking-card {
  background: linear-gradient(160deg, rgba(2, 26, 20, 0.98) 0%, rgba(4, 38, 28, 0.98) 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(16, 185, 129, 0.15) !important;
  color: #e2fdf0 !important;
}

/* --- Trip Type Tab Bar Row --- */
html:not(.dark-mode) .trip-type-options,
html:not(.dark-mode) .oneway-subtypes,
html:not(.dark-mode) .fare-toggle__switch,
html .trip-type-options,
html .oneway-subtypes,
html .fare-toggle__switch,
.booking-card .trip-type-options,
.booking-card .oneway-subtypes,
.booking-card .fare-toggle__switch,
.booking-card--home .trip-type-options,
.booking-card--home .oneway-subtypes,
.booking-card--home .fare-toggle__switch {
  background: rgba(2, 20, 14, 0.95) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  border-radius: 6px !important;
}

/* --- Active Tab Chip --- */
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,
html:not(.dark-mode) .fare-toggle__switch input:checked + label,
html:not(.dark-mode) .fare-toggle__switch .trip-type-option--active,
html .trip-type-options .trip-type-option.trip-type-option--active,
html .trip-type-options .trip-type-option.active,
.booking-card .trip-type-options .trip-type-option.trip-type-option--active,
.booking-card .trip-type-options .trip-type-option.active,
.booking-card .oneway-subtypes label.active,
.booking-card .fare-toggle__switch .trip-type-option--active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
}

/* --- Inactive Tab Chips --- */
.trip-type-options .trip-type-option,
.oneway-subtypes label,
.fare-toggle__switch label {
  color: #a7f3d0 !important;
  background: transparent !important;
}

.trip-type-options .trip-type-option:hover,
.oneway-subtypes label:hover,
.fare-toggle__switch label:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #ffffff !important;
}

/* --- Phone Input Wrapper --- */
html:not(.dark-mode) .phone-input-wrapper,
html:not(.dark-mode) .booking-card--home .phone-input-wrapper,
html .phone-input-wrapper,
.booking-card .phone-input-wrapper,
.booking-card--home .phone-input-wrapper,
body .phone-input-wrapper {
  background: rgba(4, 38, 28, 0.95) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  border-radius: 8px !important;
}

html:not(.dark-mode) .phone-input-wrapper:focus-within,
.phone-input-wrapper:focus-within,
.booking-card .phone-input-wrapper:focus-within {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
  background: rgba(4, 38, 28, 0.98) !important;
}

/* --- Country Code Trigger (+91) --- */
html:not(.dark-mode) .phone-input-wrapper .country-code-trigger,
html:not(.dark-mode) .booking-card--home .phone-input-wrapper .country-code-trigger,
.booking-card .phone-input-wrapper .country-code-trigger,
.phone-input-wrapper .country-code-trigger {
  background: rgba(16, 185, 129, 0.12) !important;
  border-right: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: #10b981 !important;
  font-weight: 700 !important;
}

html:not(.dark-mode) .phone-input-wrapper .country-code-trigger:hover,
.phone-input-wrapper .country-code-trigger:hover {
  background: rgba(16, 185, 129, 0.22) !important;
  color: #ffffff !important;
}

/* --- Phone National Input --- */
.phone-input-wrapper .phone-national-input,
.phone-input-wrapper--country .phone-national-input,
.booking-card--home .phone-input-wrapper .phone-national-input,
.booking-card .phone-input-wrapper .phone-national-input {
  background: transparent !important;
  color: #e2fdf0 !important;
}

.phone-input-wrapper .phone-national-input::placeholder {
  color: rgba(167, 243, 208, 0.5) !important;
}

/* --- All Form Inputs (fields) --- */
html:not(.dark-mode) .booking-card .field > input,
html:not(.dark-mode) .booking-card .field > select,
html:not(.dark-mode) .booking-card--home .field > input,
html:not(.dark-mode) .booking-card--home .field > select,
.booking-card .field > input,
.booking-card .field > select,
.booking-card--home .field > input,
.booking-card--home .field > select {
  background: rgba(4, 38, 28, 0.9) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
  color: #e2fdf0 !important;
  caret-color: #10b981 !important;
}

.booking-card .field > input::placeholder,
.booking-card--home .field > input::placeholder {
  color: rgba(167, 243, 208, 0.5) !important;
}

.booking-card .field > input:focus,
.booking-card .field > select:focus,
.booking-card--home .field > input:focus,
.booking-card--home .field > select:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
  background: rgba(2, 26, 20, 0.98) !important;
  outline: none !important;
}

/* --- Field Labels --- */
.booking-card .field,
.booking-card--home .field,
html:not(.dark-mode) .booking-card .field,
html:not(.dark-mode) .booking-card--home .field {
  color: #a7f3d0 !important;
}

/* --- Form Submit / CTA Button --- */
.booking-card .btn,
.booking-card .booking-cta,
.booking-card .btn-primary,
.booking-card--home .btn,
.booking-card--home .booking-cta {
  background: linear-gradient(135deg, #10b981 0%, #059669 60%, #047857 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.45) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

.booking-card .btn:hover,
.booking-card .booking-cta:hover,
.booking-card--home .btn:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
  box-shadow: 0 6px 28px rgba(16, 185, 129, 0.65) !important;
  transform: translateY(-1px) !important;
}

/* --- Booking Card Header Text --- */
.booking-card .booking-card__header h2,
.booking-card--home .booking-card__header h2 {
  color: #ffffff !important;
}

.booking-card .booking-card__eyebrow,
.booking-card--home .booking-card__eyebrow {
  color: #10b981 !important;
}

/* --- Hero Section inputs (city/route pages) --- */
html:not(.dark-mode) .city-hero .booking-card .trip-type-options,
html:not(.dark-mode) .route-hero .booking-card .trip-type-options,
html:not(.dark-mode) .city-hero .booking-card .fare-toggle__switch,
html:not(.dark-mode) .route-hero .booking-card .fare-toggle__switch,
html:not(.dark-mode) .city-hero .booking-card .oneway-subtypes,
html:not(.dark-mode) .route-hero .booking-card .oneway-subtypes {
  background: rgba(2, 20, 14, 0.95) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

/* --- Vehicle Selector Cards (dark override) --- */
html:not(.dark-mode) .vehicle-selector-card,
.booking-card .vehicle-selector-card {
  background: rgba(4, 38, 28, 0.85) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.25) !important;
  color: #e2fdf0 !important;
}

.vehicle-selector-card:hover,
.booking-card .vehicle-selector-card:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: #10b981 !important;
}

.vehicle-selector-card--selected,
.vehicle-selector-card.selected,
.booking-card .vehicle-selector-card--selected {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35) !important;
}

/* --- Date/Time webkit color-scheme dark --- */
.booking-card .field input[type="date"],
.booking-card .field input[type="time"],
.booking-card--home .field input[type="date"],
.booking-card--home .field input[type="time"] {
  color-scheme: dark !important;
}

/* ================================================================
   END BOOKING FORM DARK HIGHWAY THEME OVERRIDE
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   HOW IT WORKS — PREMIUM 3-STEP GLASSMORPHISM SECTION
   Placed immediately below the booking form on every page.
   ══════════════════════════════════════════════════════════════ */

/* ── Section wrapper ── */
.d1t-steps {
  position: relative;
  padding: 4.5rem 0 5rem;
  background: linear-gradient(180deg, #051210 0%, #081d19 40%, #071614 100%);
  overflow: hidden;
}

/* Ambient glow blobs */
.d1t-steps::before,
.d1t-steps::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.25;
}
.d1t-steps::before {
  width: 520px; height: 520px;
  background: radial-gradient(circle, #0d9488 0%, transparent 70%);
  top: -100px; left: -120px;
}
.d1t-steps::after {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #fb7185 0%, transparent 70%);
  bottom: -80px; right: -80px;
}

/* ── Section heading ── */
.d1t-steps .section-title-center {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}
.d1t-steps .eyebrow {
  display: inline-block;
  background: linear-gradient(90deg, #2dd4bf, #fb7185);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.d1t-steps h2 {
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}
.d1t-steps .section-sub {
  color: #a7ece4;
  font-size: 1rem;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ── Slider shell ── */
.d1t-steps-slider {
  position: relative;
  z-index: 1;
}

/* ── Cards track ── */
.d1t-steps-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  position: relative;
  padding: 0.5rem 0.25rem 1.5rem;
}

/* Horizontal connector line between cards (desktop only) */
.d1t-steps-track::before {
  content: "";
  position: absolute;
  top: 48px;
  left: calc(16.67% + 28px);
  right: calc(16.67% + 28px);
  height: 2px;
  background: linear-gradient(90deg, #2dd4bf 0%, #0ea5a4 50%, #fb7185 100%);
  border-radius: 2px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* ── Individual step card ── */
.d1t-step {
  position: relative;
  background: linear-gradient(145deg, rgba(17,59,52, 0.85) 0%, rgba(8,29,25, 0.92) 100%);
  border: 1px solid rgba(45,212,191, 0.3);
  border-radius: 24px;
  padding: 2.2rem 1.75rem 1.9rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 10px 40px rgba(4,26,25, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 30px rgba(45,212,191, 0.08);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
  cursor: default;
  z-index: 1;
  overflow: visible;
}

.d1t-step::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(45,212,191, 0.06) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.d1t-step:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 28px 70px rgba(4,26,25, 0.75),
    0 0 0 1px rgba(45,212,191, 0.5) inset,
    0 0 60px rgba(45,212,191, 0.25);
  border-color: rgba(45,212,191, 0.6);
}
.d1t-step:hover::before {
  opacity: 1;
}

/* ── Step badge (number) ── */
.d1t-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2dd4bf 0%, #0ea5a4 50%, #fb7185 100%);
  color: #ffffff;
  font-size: 1.55rem;
  font-weight: 900;
  font-family: "Outfit", sans-serif;
  box-shadow:
    0 8px 24px rgba(45,212,191, 0.55),
    0 0 0 6px rgba(45,212,191, 0.15);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease;
  letter-spacing: -0.03em;
}
.d1t-step:hover .d1t-step__num {
  transform: scale(1.12) rotate(-3deg);
  box-shadow:
    0 14px 36px rgba(45,212,191, 0.75),
    0 0 0 8px rgba(45,212,191, 0.2);
}

/* ── Step SVG icon ── */
.d1t-step__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(45,212,191, 0.12);
  border: 1.5px solid rgba(45,212,191, 0.3);
  border-radius: 16px;
  padding: 0.75rem;
  transition: background 0.3s, border-color 0.3s;
}
.d1t-step__icon svg {
  width: 28px;
  height: 28px;
  stroke: #5eead4;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s;
}
.d1t-step:hover .d1t-step__icon {
  background: rgba(45,212,191, 0.22);
  border-color: rgba(45,212,191, 0.55);
}
.d1t-step:hover .d1t-step__icon svg {
  stroke: #def6f2;
}

/* ── Step text ── */
.d1t-step h3 {
  color: #edfaf8 !important;
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.d1t-step p {
  color: #99f6e4 !important;
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.7;
  max-width: 220px;
}

/* ── Feature tags ── */
.d1t-step__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(45,212,191, 0.15);
  border: 1px solid rgba(45,212,191, 0.35);
  color: #5eead4;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.75rem;
  border-radius: 50px;
  margin-top: 0.25rem;
  transition: background 0.3s, border-color 0.3s;
}
.d1t-step:hover .d1t-step__tag {
  background: rgba(45,212,191, 0.28);
  border-color: rgba(45,212,191, 0.6);
}

/* ── Nav arrows ── */
.d1t-steps-arrow {
  display: none; /* shown only on mobile via JS */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(45,212,191, 0.18);
  border: 1.5px solid rgba(45,212,191, 0.4);
  color: #5eead4;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
  flex-shrink: 0;
}
.d1t-steps-arrow svg { width: 20px; height: 20px; }
.d1t-steps-arrow:hover:not(:disabled) {
  background: rgba(45,212,191, 0.4);
  border-color: #5eead4;
  color: #ffffff;
}
.d1t-steps-arrow:disabled { opacity: 0.3; cursor: default; }
.d1t-steps-arrow--prev { left: -14px; }
.d1t-steps-arrow--next { right: -14px; }

/* ── Responsive: tablet ── */
@media (max-width: 960px) {
  .d1t-steps-track {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .d1t-steps-track::before {
    display: none;
  }
  .d1t-step {
    padding: 1.75rem 1.25rem;
  }
  .d1t-step h3 { font-size: 1rem; }
}

/* ── Responsive: mobile ── */
@media (max-width: 680px) {
  .d1t-steps {
    padding: 3rem 0 3.5rem;
  }
  .d1t-steps-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding: 0.5rem 1rem 1.5rem;
    scrollbar-width: none;
  }
  .d1t-steps-track::-webkit-scrollbar { display: none; }
  .d1t-steps-track::before { display: none; }
  .d1t-step {
    flex: 0 0 82%;
    min-width: 0;
    scroll-snap-align: center;
    padding: 1.75rem 1.25rem;
  }
  .d1t-steps-arrow--prev { left: 2px; }
  .d1t-steps-arrow--next { right: 2px; }
  .d1t-step p { max-width: none; }
}

/* ── Reduced-motion: skip lift animation ── */
@media (prefers-reduced-motion: reduce) {
  .d1t-step,
  .d1t-step__num { transition: none; }
  .d1t-step:hover { transform: none; }
}

/* ── Dark mode adjustments (already dark section — minimal tweaks) ── */
html.dark-mode .d1t-steps {
  background: linear-gradient(180deg, #040d0c 0%, #071614 100%);
}

/* ══════════════════════════════════════════════════════════════
   WHY CHOOSE US — FEATURE CARDS SECTION ENHANCED
   ══════════════════════════════════════════════════════════════ */
.features-grid-section {
  position: relative;
  padding: 5rem 0;
  background: linear-gradient(160deg, #05110f 0%, #0c2823 50%, #061311 100%);
  overflow: hidden;
}
.features-grid-section::before {
  content: "";
  position: absolute;
  width: 600px; height: 400px;
  top: -80px; right: -100px;
  background: radial-gradient(ellipse, rgba(45,212,191, 0.15) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(60px);
}

.features-grid-section .section-title-center h2 {
  color: #ffffff !important;
}
.features-grid-section .section-title-center .eyebrow {
  color: #2dd4bf !important;
  -webkit-text-fill-color: #2dd4bf !important;
}
.features-grid-section .section-sub {
  color: #99f6e4 !important;
}

.premium-features-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.feature-card {
  background: linear-gradient(145deg, rgba(17,59,52, 0.85) 0%, rgba(8,29,25, 0.9) 100%) !important;
  border: 1px solid rgba(45,212,191, 0.25) !important;
  border-radius: 20px !important;
  padding: 1.75rem 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 10px 35px rgba(4,26,25, 0.5), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.feature-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 55px rgba(4,26,25, 0.75), 0 0 45px rgba(45,212,191, 0.2) !important;
  border-color: rgba(45,212,191, 0.5) !important;
}
.feature-card__icon {
  font-size: 2rem !important;
  line-height: 1 !important;
  margin-bottom: 0.25rem !important;
}
.feature-card__content h3 {
  color: #edfaf8 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  margin: 0 0 0.35rem !important;
}
.feature-card__content p {
  color: #99f6e4 !important;
  font-size: 0.86rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   CITY SECTION CARDS ENHANCED
   ══════════════════════════════════════════════════════════════ */
.city-section {
  background: linear-gradient(160deg, #071614 0%, #081d19 100%);
  padding: 4rem 0;
}
.city-section .eyebrow {
  color: #2dd4bf !important;
}
.city-section h2 {
  color: #ffffff !important;
}
.city-card {
  background: linear-gradient(145deg, rgba(17,59,52,0.85), rgba(8,29,25,0.9)) !important;
  border: 1px solid rgba(45,212,191,0.25) !important;
  color: #a7ece4 !important;
  border-radius: 14px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.city-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(45,212,191,0.6) !important;
  box-shadow: 0 16px 40px rgba(4,26,25,0.65), 0 0 28px rgba(45,212,191,0.2) !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS SECTION ENHANCED
   ══════════════════════════════════════════════════════════════ */
.testimonials-section {
  background: linear-gradient(160deg, #05110f 0%, #051a19 100%);
  padding: 5rem 0;
}
.testimonials-section .eyebrow { color: #2dd4bf !important; }
.testimonials-section h2 { color: #ffffff !important; }
.testimonials-section .section-sub { color: #99f6e4 !important; }
.testimonial-card {
  background: linear-gradient(145deg, rgba(17,59,52,0.88), rgba(8,29,25,0.92)) !important;
  border: 1px solid rgba(45,212,191,0.2) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 35px rgba(4,26,25,0.5) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.testimonial-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(45,212,191,0.5) !important;
  box-shadow: 0 22px 55px rgba(4,26,25,0.7), 0 0 35px rgba(45,212,191,0.18) !important;
}

/* ══════════════════════════════════════════════════════════════
   ABOUT SECTION ENHANCED
   ══════════════════════════════════════════════════════════════ */
.about-section {
  background: linear-gradient(160deg, #071614 0%, #0c2823 100%);
  padding: 5rem 0;
}
.about-section .eyebrow { color: #2dd4bf !important; }
.about-section h2 { color: #ffffff !important; }
.about-section p {
  color: #99f6e4 !important;
  font-size: 1.02rem;
  line-height: 1.75;
}

/* ══════════════════════════════════════════════════════════════
   TRUST STRIP ENHANCED
   ══════════════════════════════════════════════════════════════ */
.d1t-trust-strip {
  background: linear-gradient(90deg, #051a19 0%, #0e3532 50%, #051a19 100%) !important;
  border-top: 1px solid rgba(45,212,191,0.25) !important;
  border-bottom: 1px solid rgba(45,212,191,0.25) !important;
  padding: 2.5rem 0 !important;
}
.d1t-trust-strip__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 1.5rem !important;
}
.d1t-trust-card {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  background: rgba(45,212,191,0.08) !important;
  border: 1px solid rgba(45,212,191,0.2) !important;
  border-radius: 14px !important;
  padding: 1rem 1.25rem !important;
  transition: background 0.3s ease, border-color 0.3s ease !important;
}
.d1t-trust-card:hover {
  background: rgba(45,212,191,0.18) !important;
  border-color: rgba(45,212,191,0.45) !important;
}
.d1t-trust-card h4 {
  color: #edfaf8 !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  margin: 0 0 0.15rem !important;
}
.d1t-trust-card p {
  color: #99f6e4 !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ══════════════════════════════════════════════════════════════
   FAQ SECTION ENHANCED
   ══════════════════════════════════════════════════════════════ */
.faq-section,
.faq {
  background: linear-gradient(160deg, #051210 0%, #051a19 100%) !important;
  padding: 5rem 0 !important;
}
.faq-section .eyebrow,
.faq .eyebrow { color: #2dd4bf !important; }
.faq-section h2,
.faq h2 { color: #ffffff !important; }

/* ══════════════════════════════════════════════════════════════
   ROUTES SECTION ENHANCED
   ══════════════════════════════════════════════════════════════ */
.routes-section {
  background: linear-gradient(160deg, #071614 0%, #081d19 100%) !important;
  padding: 4rem 0 !important;
}
.routes-section .eyebrow { color: #2dd4bf !important; }
.routes-section h2 { color: #ffffff !important; }
.city-tab {
  background: rgba(45,212,191,0.1) !important;
  border: 1px solid rgba(45,212,191,0.25) !important;
  color: #99f6e4 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: background 0.25s, border-color 0.25s, color 0.25s !important;
}
.city-tab:hover,
.city-tab.active {
  background: linear-gradient(135deg, #2dd4bf, #0ea5a4) !important;
  border-color: #2dd4bf !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(45,212,191,0.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   PARTNER / CTA SECTION ENHANCED
   ══════════════════════════════════════════════════════════════ */
.cta-banner,
.d1t-cta-section {
  background: linear-gradient(135deg, #113b34 0%, #09211d 100%) !important;
  border: 1px solid rgba(45,212,191,0.3) !important;
  border-radius: 24px !important;
  padding: 3rem 2rem !important;
  box-shadow: 0 20px 60px rgba(4,26,25,0.6), 0 0 40px rgba(45,212,191,0.15) !important;
}


/* ===== contrast / overlap fixes (formerly sdt-fixes.css) ===== */
/*
 * Southern Drop Taxi — contrast / overlap fixes on top of the existing violet + gold theme
 * (colours are NOT changed; these only repair places where text became unreadable).
 * Loaded after tct-theme.css. Verified at 375 / 768 / 1280 px.
 */
:root {
  --sdt-ink: #0b2523;
  --sdt-surface: #0e3532;
  --sdt-accent: #14b8a6;
  --sdt-gold: #fbbf24;
  --sdt-on-dark: #ffffff;
  --sdt-field-bg: rgba(255, 255, 255, 0.07);
  --sdt-field-line: rgba(153,246,228, 0.45);
}

/* 1. Call button under the hero: was dark teal on dark violet (invisible) */
.hero-call-cta,
.hero-call-cta:visited {
  color: var(--sdt-on-dark) !important;
  font-weight: 800;
}
.hero-call-cta { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }

/* 2. Phone number box: white box + white text = typed digits invisible */
#booking-form .phone-input-wrapper,
#booking-form .phone-input-wrapper--country {
  background: var(--sdt-field-bg) !important;
  border: 1px solid var(--sdt-field-line) !important;
}
#booking-form .phone-national-input,
#booking-form #contact-phone,
#booking-form #whatsapp-phone {
  color: var(--sdt-on-dark) !important;
  -webkit-text-fill-color: var(--sdt-on-dark) !important;
  background: transparent !important;
}
#booking-form .phone-national-input::placeholder { color: rgba(232,248,246, .75); opacity: 1; }

/* 3. Native date / time controls: values were almost invisible on the dark card */
#booking-form input[type="date"],
#booking-form input[type="time"] {
  color: var(--sdt-on-dark) !important;
  -webkit-text-fill-color: var(--sdt-on-dark) !important;
  opacity: 1 !important;
  color-scheme: dark;
}
#booking-form input[type="date"]::-webkit-datetime-edit,
#booking-form input[type="date"]::-webkit-datetime-edit-fields-wrapper,
#booking-form input[type="date"]::-webkit-datetime-edit-text,
#booking-form input[type="date"]::-webkit-datetime-edit-day-field,
#booking-form input[type="date"]::-webkit-datetime-edit-month-field,
#booking-form input[type="date"]::-webkit-datetime-edit-year-field,
#booking-form input[type="time"]::-webkit-datetime-edit,
#booking-form input[type="time"]::-webkit-datetime-edit-fields-wrapper,
#booking-form input[type="time"]::-webkit-datetime-edit-text,
#booking-form input[type="time"]::-webkit-datetime-edit-hour-field,
#booking-form input[type="time"]::-webkit-datetime-edit-minute-field,
#booking-form input[type="time"]::-webkit-datetime-edit-ampm-field {
  color: var(--sdt-on-dark) !important;
  opacity: 1 !important;
}
#booking-form input[type="date"]::-webkit-calendar-picker-indicator,
#booking-form input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .9; }

/* 4. "Phone number *" label collided with the WhatsApp tick */
#booking-form .field__label-row { flex-wrap: wrap; row-gap: .25rem; }

/* 5. Vehicle cards: white label on pale grey -> dark translucent card, readable name + visible car image */
#booking-form .vehicle-selector-card {
  background: rgba(14,53,50, .78) !important;
  border: 1px solid var(--sdt-field-line) !important;
  color: var(--sdt-on-dark) !important;
}
#booking-form .vehicle-selector-card .vehicle-selector-card__name,
#booking-form .vehicle-selector-card .vehicle-selector-card__price { color: var(--sdt-on-dark) !important; }
#booking-form .vehicle-selector-card.vehicle-selector-card--active,
#booking-form .vehicle-selector-card.active {
  border-color: var(--sdt-gold) !important;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, .55);
}
#booking-form .vehicle-selector-card img { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }

/* 6. Email placeholder was cut off ("name@email.cor") */
#booking-form input[type="email"]::placeholder { font-size: .9em; }
#booking-form input[type="email"] { text-overflow: ellipsis; }

/* keyboard focus must always be visible */
#booking-form input:focus-visible, #booking-form select:focus-visible, #booking-form button:focus-visible,
a:focus-visible { outline: 3px solid var(--sdt-gold); outline-offset: 2px; }


/* route.php inline styles still refer to these token names */
:root { --d1t-amber: #2dd4bf; --d1t-amber-dark: #14b8a6; }

/* ===== header theme dropdown (ported from the Drop1Taxi sheet) ===== */
.header__theme-dd {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}
.header__theme-dd-wrap {
  position: relative;
}
.header__theme-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.02em;
  color: #0b2523;
  background: var(--accent);
  border: 1px solid var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, box-shadow .2s ease;
}
.header__theme-dd-btn:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  box-shadow: 0 2px 12px var(--accent-glow);
}
.header__theme-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 180px;
  background: rgba(20,20,20,0.98);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 300;
}
.header__theme-dd-wrap.is-open .header__theme-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.header__theme-dd-link {
  display: block;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  transition: background .15s ease, color .15s ease;
}
.header__theme-dd-link:hover {
  background: rgba(255,255,255,0.08);
  color: var(--accent);
  text-decoration: none;
}
.header__theme-dd-link.active {
  background: var(--accent);
  color: #0b2523;
}
@media (max-width: 768px) {
  .header__theme-dd-btn { padding: 5px 12px; font-size: 0.72rem; }
  .header__theme-dd-menu { min-width: 160px; }
}


/* ===== SDT repair layer (2026-10-16) =====================================================================================
   The highway theme paints every page on a dark canvas and forces light text on section/main. Light cards that sit on it
   (legal cards, contact cards, price cards, tables) and the footer need their own text colours. Checked with a contrast audit
   (WCAG AA: 4.5:1 normal text, 3:1 large text) on every public page. */

/* light surfaces: dark text */
.legal-card, .contact-card, .info-tile, .info-step, .info-contact__item, .info-table-wrap, .info-faq,
.pricing-card, .calc-box-luxury, .formula-card, .permit-card, .faq-card, .policy-box, .calc-section .calc-wrapper > div,
.review-card, .partner-card, .benefit-card, .form-card, .auth-card {
  color: #0f172a;
}
.legal-card p, .legal-card li, .legal-card td, .legal-card th, .legal-card strong, .legal-card span, .legal-card small,
.contact-card p, .contact-card a, .contact-card h3, .contact-card h2,
.pricing-card li, .pricing-card p, .pricing-card span, .pricing-card .currency, .pricing-card .per, .pricing-card h3,
.info-tile p, .info-step p, .info-table td, .info-table strong, .info-table small, .info-faq p, .info-faq summary {
  color: inherit;
}
.legal-card p, .legal-card li { color: #334155; }
.legal-card h2, .legal-card h3, .legal-card strong { color: #0f172a; }
.legal-card a, .contact-card a { color: #0f766e; }
.pricing-card .currency, .pricing-card .per, .pricing-card li { color: #334155; }
.pricing-card .amount, .calc-res-price { color: #0f766e; }
.calc-res-info, .calc-res-info div { color: #334155; }
.policy-badge, .info-page .policy-badge { color: #115e59; background: #ccfbf1; }

/* headings that sit directly on the dark canvas */
.legal-hero h1, .contact-hero h1, .contact-hero p, .hero-title, .hero-subtitle, .tariff-hero h1, .partner-hero h1, .partner-hero p,
.eyebrow, .calc-info-title, .calc-info-text, .reviews-hero h1, .reviews-hero p, .page-hero h1, .page-hero p,
main > .container > h1, main > .container > .section-header h1, .section-header h2, .section-header p {
  color: #f0fdfa;
}
.legal-hero p, .eyebrow, .reviews-hero p { color: rgba(226, 248, 243, 0.85); }
.info-page .legal-hero h1 { color: #f0fdfa; }
.info-page .legal-hero p { color: rgba(226, 248, 243, 0.88); }
.info-crumbs, .info-crumbs span { color: rgba(226, 248, 243, 0.8); }
.info-crumbs a { color: #5eead4; }
.info-page .legal-card, .info-page .legal-card p, .info-page .legal-card li, .info-page .legal-card td, .info-page .legal-card strong { color: #0f172a; }
.info-page .info-tile p, .info-page .info-step p, .info-page .info-note, .info-page .info-table small, .info-page .info-faq__item p { color: #475569; }
.info-page .info-step__n { background: #0f766e; }

/* footer: dark background, light text */
.site-footer, .footer { color: rgba(226, 248, 243, 0.86); }
.footer__col-title, .footer__brand-text, .footer__logo, .site-footer h3, .site-footer h4 { color: #ffffff; }
.footer__description, .footer__coverage, .footer__copyright, .site-footer li, .site-footer p, .site-footer .icon { color: rgba(226, 248, 243, 0.82); }
.site-footer a, .footer a { color: #99f6e4; }
.site-footer a:hover, .footer a:hover { color: #ffffff; }
.footer__dest-link { color: #99f6e4; }

/* partner / driver pages on the canvas */
.partner-page p, .partner-page h1, .partner-page h4, .partner-page li { color: #e2f8f3; }
.benefit-card h4, .benefit-card p { color: #0f172a; }

/* ---- audit round 2 ---- */
.footer__col-title, .site-footer .footer__col-title, .footer__brand-text { color: #ffffff !important; }
.footer__description, .footer__coverage, .footer__copyright, .site-footer .footer__col li, .site-footer .footer__col p, .site-footer .icon,
.site-footer .footer__contact li, .site-footer .footer__contact span { color: rgba(226, 248, 243, 0.86) !important; }
.site-footer a, .site-footer .footer__col a, .site-footer .footer__contact a { color: #99f6e4 !important; }
.site-footer a:hover { color: #ffffff !important; }
.info-page .info-step__n { color: #ffffff !important; }

.seo-section__header h2 { color: #f0fdfa !important; }
.seo-section__header p, .seo-section__header .eyebrow { color: rgba(226, 248, 243, 0.86) !important; }
.seo-card__content h3 { color: #ffffff !important; }
.seo-card__content p { color: rgba(226, 248, 243, 0.86) !important; }
.faq__items p, .faq__items li, .seasons-box p, .seasons-box li { color: #334155 !important; }
.faq__items h3, .seasons-box h3, .seasons-box h4 { color: #0f172a !important; }
p.eyebrow, .eyebrow { color: #5eead4 !important; }
.contact-page__header h1, .contact-page__header p { color: #f0fdfa !important; }
.container > h2:not([class]), .container > h3:not([class]) { color: #f0fdfa; }
.calc-res-info div { color: #334155 !important; }
.formula-code { color: #99f6e4 !important; }
.tariff-v2 .container > p, .tariff-v2 .container > strong { color: rgba(226, 248, 243, 0.86); }
.benefit-icon { color: #9f1239; }

/* ---- audit round 3 ---- */
body p.eyebrow, body .eyebrow { color: #5eead4 !important; }
.rate-us-sub { color: #0f766e !important; }
.star-btn { color: #b45309; }
.cities-hub-title, .cities-page .container > h2, .cities-page .container > p { color: #f0fdfa !important; }
.permit-desc, .permit-note, .policy-single { color: rgba(226, 248, 243, 0.86) !important; }
p[style*="var(--text-muted)"]:not(.policy-box *):not(.permit-card *), p[style*="var(--text-muted)"]:not(.policy-box *):not(.permit-card *) strong { color: rgba(226, 248, 243, 0.86) !important; }
body > main .container > h2:not([class]), body > main .container > h2:not([class]) + p { color: #f0fdfa; }

/* ---- audit round 4: footer (needs the specificity of the rules it competes with) ---- */
html body .site-footer .footer__col-title, html body .site-footer .footer__brand-text, html body .site-footer h3, html body .site-footer h4 { color: #ffffff !important; }
html body .site-footer .footer__description, html body .site-footer .footer__coverage, html body .site-footer .footer__copyright,
html body .site-footer .footer__contact-details li, html body .site-footer .footer__contact-details span, html body .site-footer .icon,
html body .site-footer li, html body .site-footer p { color: rgba(226, 248, 243, 0.86) !important; }
html body .site-footer a, html body .site-footer .footer__contact-details a { color: #99f6e4 !important; }
html body .site-footer a:hover { color: #ffffff !important; }
html body .cities-page h2, html body .cities-page .container > p, html body .cities-hub-title { color: #f0fdfa !important; }
html body p.eyebrow { color: #5eead4 !important; }

/* ---- audit round 5 ---- */
html body .site-footer .footer__copyright span, html body .site-footer .footer__attribution { color: rgba(226, 248, 243, 0.78) !important; }
html body .site-footer .footer__attribution a { color: #99f6e4 !important; }
html:not(.dark-mode) body .eyebrow, html.dark-mode body .eyebrow, html body main .eyebrow { color: #5eead4 !important; }
html body .cities-page main .container > h2, html body .cities-page main .container > p { color: #f0fdfa !important; }

/* ---- audit round 6 ---- */
html body button.star-btn { color: #b45309 !important; }
html body h1.outfit { color: #f0fdfa !important; }

/* ---- audit round 7: thank-you / track pages (glass-block is a WHITE card there) ---- */
html body .glass-block { color: #0f172a; }
html body .glass-block strong, html body .glass-block h3, html body .glass-block h4, html body .trip-meta strong { color: #0f172a !important; }
html body .glass-block p, html body .glass-block .step-desc, html body .glass-block span:not([class]) { color: #475569 !important; }
html body .block-label { color: #0f766e !important; }
html body .ty-hero h1 { background: linear-gradient(135deg, #f0fdfa, #5eead4) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
html body .ty-hero p, html body .status-header p { color: rgba(226, 248, 243, 0.88) !important; }
html body .glass-block [class*=check], html body .glass-block .step-icon { color: #047857; }

/* ---- audit round 8 ---- */
html body .track-grid-split .glass-block strong, html body .track-grid-split .glass-block h3, html body .track-grid-split .glass-block h4 { color: #f0fdfa !important; }
html body .track-grid-split .glass-block p, html body .track-grid-split .glass-block span:not([class]), html body .track-grid-split .glass-block div { color: rgba(226, 248, 243, 0.88) !important; }
html body .track-grid-split .block-label { color: #5eead4 !important; }
html body .glass-block div[style*="rgba(16, 185, 129"] { color: #047857 !important; }
html body .btn-green-outline { color: #0b6b5e !important; border-color: #0b6b5e !important; }
html body .policy-list h5 { color: #0f766e !important; }
html body .trip-route-arrow { color: #b45309 !important; }

/* ---- audit round 9 ---- */
html body .track-grid-split .glass-block:has(.form-track) .block-label { color: #0f766e !important; }
html body .track-grid-split .glass-block:has(.form-track) strong, html body .track-grid-split .glass-block:has(.form-track) h3, html body .track-grid-split .glass-block:has(.form-track) h4 { color: #0f172a !important; }
html body .track-grid-split .glass-block:has(.form-track) p, html body .track-grid-split .glass-block:has(.form-track) div { color: #475569 !important; }
html body .btn-blue-deluxe, html body .btn-full-blue, html body .step-num { background: #0f766e !important; color: #ffffff !important; }
html body main.container-sm a.btn-link-solid, html body .ty-login-cta a { background: #0f766e !important; color: #ffffff !important; }

/* ---- audit round 10 ---- */
html body .glass-block[style*="rgba(13,148,136, 0.04)"] { background: #f0fdfa !important; }
html body a[style*="var(--brand-blue)"] { background: #0f766e !important; color: #ffffff !important; }
html body main.container-sm > p { color: rgba(226, 248, 243, 0.88) !important; }

/* ---- audit round 11: service / guide cards must be dark cards with light text (route pages painted them near-white) ---- */
html body .service-card, html body .seo-card { background: rgba(6, 45, 40, 0.94) !important; border: 1px solid rgba(94, 234, 212, 0.22) !important; color: #e2f8f3 !important; }
html body .service-card h3, html body .seo-card h3, html body .seo-card__content h3 { color: #ffffff !important; }
html body .service-card p, html body .seo-card p, html body .seo-card__content p { color: rgba(226, 248, 243, 0.88) !important; }

/* round 11b: beat light-theme.css (html:not(.dark-mode) ...) on specificity */
html:not(.dark-mode) body main .service-card, html:not(.dark-mode) body main .seo-card, html.dark-mode body main .service-card, html.dark-mode body main .seo-card,
html:not(.dark-mode) body section .service-card, html:not(.dark-mode) body section .seo-card { background: rgba(6, 45, 40, 0.94) !important; border: 1px solid rgba(94, 234, 212, 0.22) !important; color: #e2f8f3 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important; }
html:not(.dark-mode) body main .service-card h3, html:not(.dark-mode) body main .seo-card h3, html:not(.dark-mode) body main .seo-card__content h3 { color: #ffffff !important; }
html:not(.dark-mode) body main .service-card p, html:not(.dark-mode) body main .seo-card p, html:not(.dark-mode) body main .seo-card__content p { color: rgba(226, 248, 243, 0.88) !important; }
html:not(.dark-mode) body main.container-sm > p { color: rgba(226, 248, 243, 0.88) !important; }

/* ---- audit round 12 ---- */
html body main.container-sm > div:not([class]) > p[style*="var(--muted-text)"] { color: rgba(226, 248, 243, 0.88) !important; }
html body .glass-block p[style*="var(--muted-text)"] { color: #475569 !important; }
html body p[style*="var(--gray-400)"] { color: #475569 !important; }
html body .route-details h2, html body .route-details h3 { color: #f0fdfa !important; }
html body .route-stats-summary span { color: #0f766e !important; }

/* ---- audit round 13 ---- */
html body .trust-card p, html body .seo-section__header p { color: rgba(226, 248, 243, 0.88) !important; }
html body section > .container > h2:not([class]), html body section > .container > h2:not([class]) + p { color: #f0fdfa !important; }
html body section.trust h2, html body section.trust > .container > div > h2 { color: #f0fdfa !important; }
html body section.trust > .container > div > p { color: rgba(226, 248, 243, 0.88) !important; }

/* ===== booking card tabs, proportions taken from the Drop Cars form (owner 2026-10-16):
   MAIN tabs One-Way / Round Trip / Hourly = large CAPS; sub tabs Outstation / Airport / Multi City = small, normal case, below them ===== */
html body .trip-type-block { gap: 6px !important; }
html:not(.zz) body .booking-card .trip-type-options.trip-type-options { padding: 4px !important; gap: 6px !important; border-radius: 12px !important; background: rgba(4, 26, 24, 0.92) !important; }
html:not(.zz) body .booking-card .trip-type-options.trip-type-options .trip-type-option {
  font-size: clamp(0.9rem, 4vw, 1.05rem) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.03em !important;
  padding: 0.62rem 0.25rem !important; border-radius: 9px !important; min-height: 46px; white-space: nowrap; line-height: 1.1;
}
html:not(.zz) body .booking-card .trip-type-options.trip-type-options .trip-type-option.trip-type-option--active, html:not(.zz) body .booking-card .trip-type-options.trip-type-options .trip-type-option.active {
  background: linear-gradient(135deg, #0f766e 0%, #115e59 100%) !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(15, 118, 110, 0.45) !important;
}
html:not(.zz) body .booking-card .oneway-subtypes.oneway-subtypes { padding: 3px !important; gap: 4px !important; border-radius: 9px !important; background: rgba(4, 26, 24, 0.92) !important; margin-top: 2px !important; }
html:not(.zz) body .booking-card .oneway-subtypes.oneway-subtypes label {
  font-size: 0.76rem !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important;
  padding: 0.32rem 0.3rem !important; border-radius: 6px !important; min-height: 28px; white-space: nowrap; line-height: 1.2;
}
html:not(.zz) body .booking-card .oneway-subtypes.oneway-subtypes input:checked + label, html:not(.zz) body .booking-card .oneway-subtypes.oneway-subtypes label.active {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important; color: #ffffff !important; box-shadow: none !important;
}
html:not(.zz) body .booking-card .trip-type-options.trip-type-options .trip-type-option,
html:not(.zz) body .booking-card .oneway-subtypes.oneway-subtypes label { flex: 1 1 0 !important; min-width: 0 !important; text-align: center !important; display: flex !important; align-items: center; justify-content: center; }
html:not(.zz) body .booking-card .oneway-subtypes.oneway-subtypes { width: 100% !important; }
/* tabs attached: main row sits directly on the sub row (owner 2026-10-16) */
html:not(.zz) body .booking-card .trip-type-field, html:not(.zz) body .booking-card .trip-type-block .field { margin-bottom: 0 !important; padding-bottom: 0 !important; }
html:not(.zz) body .booking-card .trip-type-options.trip-type-options { margin-bottom: 0 !important; border-bottom-left-radius: 4px !important; border-bottom-right-radius: 4px !important; }
html:not(.zz) body .booking-card .oneway-subtypes.oneway-subtypes { margin-top: 3px !important; border-top-left-radius: 4px !important; border-top-right-radius: 4px !important; margin-bottom: 14px !important; }
html:not(.zz) body .booking-card .trip-type-block { gap: 0 !important; }

/* ===== owner 2026-10-16: visible menu button, dark brand-coloured mobile menu, invisible scrollbars, no foreign "Drop Taxi" pill ===== */
html, body, * { scrollbar-width: none !important; -ms-overflow-style: none !important; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; }
html:not(.zz) body .header__theme-dd { display: none !important; }

html:not(.zz) body .site-header .menu-button { color: #2dd4bf !important; background: rgba(45, 212, 191, 0.12) !important; border: 1px solid rgba(45, 212, 191, 0.5) !important; border-radius: 10px !important; }
html:not(.zz) body .site-header .menu-button:hover { background: rgba(45, 212, 191, 0.22) !important; }
html:not(.zz) body .site-header .menu-button svg { stroke: #2dd4bf !important; stroke-width: 2.4 !important; }

html:not(.zz) body .menu-panel { background: linear-gradient(180deg, #08211e 0%, #041512 100%) !important; border: 1px solid rgba(45, 212, 191, 0.28) !important; color: #e2fdf0 !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important; }
html:not(.zz) body .menu-panel a, html:not(.zz) body .menu-panel summary { color: #e2fdf0 !important; }
html:not(.zz) body .menu-panel summary { background: rgba(45, 212, 191, 0.1) !important; border: 1px solid rgba(45, 212, 191, 0.3) !important; border-radius: 12px !important; }
html:not(.zz) body .menu-panel details a, html:not(.zz) body .menu-panel .menu-panel__section--accordion a { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(45, 212, 191, 0.2) !important; color: #e2fdf0 !important; }
html:not(.zz) body .menu-panel details a:hover, html:not(.zz) body .menu-panel .menu-panel__section--accordion a:hover { background: rgba(45, 212, 191, 0.18) !important; border-color: #2dd4bf !important; }
html:not(.zz) body .menu-panel .menu-panel__section > ul > li > a { color: #2dd4bf !important; font-weight: 700 !important; }
html:not(.zz) body .menu-panel .menu-panel__cta-btn--primary { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%) !important; color: #ffffff !important; box-shadow: 0 6px 18px rgba(20, 184, 166, 0.35) !important; border: 1px solid rgba(45, 212, 191, 0.5) !important; }
html:not(.zz) body .menu-panel .menu-panel__cta-btn:not(.menu-panel__cta-btn--primary) { background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important; color: #ffffff !important; }
html:not(.zz) body .menu-panel .admin-nav-link, html:not(.zz) body .menu-panel .admin-nav-link span { color: #7dd3c8 !important; opacity: 0.85; }
html:not(.zz) body .menu-panel .menu-panel__close { background: rgba(45, 212, 191, 0.14) !important; color: #e2fdf0 !important; border: 1px solid rgba(45, 212, 191, 0.4) !important; border-radius: 12px !important; }
html:not(.zz) body .menu-panel .menu-panel__dropdown { background: rgba(45, 212, 191, 0.07) !important; border: 1px solid rgba(45, 212, 191, 0.3) !important; border-radius: 12px !important; }
html:not(.zz) body .menu-panel .menu-panel__dropdown summary { background: transparent !important; border: 0 !important; color: #e2fdf0 !important; font-weight: 700 !important; }
html:not(.zz) body .menu-panel .menu-panel__dropdown summary::after, html:not(.zz) body .menu-panel .menu-panel__dropdown summary::marker { color: #2dd4bf !important; }
html:not(.zz) body .menu-panel .menu-panel__dropdown[open] > summary { border-bottom: 1px solid rgba(45, 212, 191, 0.2) !important; }

/* ======================================================================
   2026-10-16 dark-everywhere sweep (owner: white cards "contrast" everywhere) + routes/cities/airports hub + highway sign boards
   Surface = deep teal glass, text = mint white, accents = teal / coral / road-yellow
   ====================================================================== */
:root { --sdt-card: linear-gradient(160deg, rgba(10, 46, 42, 0.94) 0%, rgba(5, 24, 22, 0.97) 100%); --sdt-edge: rgba(45, 212, 191, 0.24); --sdt-ink-hi: #f0fdfa; --sdt-ink: #d3efe9; --sdt-ink-lo: #9ccfc5; }
html:not(.zz) body { --sdt-ink: #d3efe9; --sdt-muted: #9ccfc5; --sdt-line: rgba(45, 212, 191, 0.24); --sdt-tint: rgba(45, 212, 191, 0.08); --sdt-brand-dark: #5eead4; }

/* header on every page (legal/info pages had a white one) */
html:not(.zz) body .site-header { background: rgba(4, 21, 19, 0.94) !important; border-bottom: 1px solid rgba(45, 212, 191, 0.22) !important; backdrop-filter: blur(10px); }

/* generic dark card surface */
html:not(.zz) body :is(.legal-card, .info-step, .info-tile, .info-contact__item, .contact-card, .info-faq, .pricing-card, .calc-box-luxury, .permit-card, .faq-card, .seasons-box, .rate-us-box, .stats-bar, .fleet-showcase__card, .faq__item, .calc-res-item, .inc-item, .info-table-wrap) {
  background: var(--sdt-card) !important; border: 1px solid var(--sdt-edge) !important; color: var(--sdt-ink) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important; backdrop-filter: none !important;
}
html:not(.zz) body :is(.legal-card, .info-step, .info-tile, .info-contact__item, .contact-card, .info-faq, .pricing-card, .calc-box-luxury, .permit-card, .faq-card, .seasons-box, .rate-us-box, .stats-bar, .fleet-showcase__card, .faq__item, .calc-res-item, .inc-item) :is(h1, h2, h3, h4, h5, strong, b, summary, th, dt) { color: var(--sdt-ink-hi) !important; }
html:not(.zz) body :is(.legal-card, .info-step, .info-tile, .info-contact__item, .contact-card, .info-faq, .pricing-card, .calc-box-luxury, .permit-card, .faq-card, .seasons-box, .rate-us-box, .faq__item, .calc-res-item, .inc-item) :is(p, li, span, small, td, dd, label, div, em) { color: var(--sdt-ink) !important; }
html:not(.zz) body :is(.legal-card, .info-faq, .seasons-box, .faq__item, .faq-card, .rate-us-box) a:not(.btn-primary):not(.btn-secondary) { color: #5eead4 !important; }
html:not(.zz) body .legal-card::before { background: linear-gradient(90deg, #14b8a6 0%, #facc15 55%, #fb7185 100%) !important; }
html:not(.zz) body .policy-badge { background: rgba(45, 212, 191, 0.14) !important; color: #5eead4 !important; border: 1px solid rgba(45, 212, 191, 0.4) !important; }
html:not(.zz) body th { background: rgba(45, 212, 191, 0.14) !important; color: #5eead4 !important; border-color: var(--sdt-edge) !important; }
html:not(.zz) body td { border-color: var(--sdt-edge) !important; }
html:not(.zz) body .info-step__n { background: linear-gradient(135deg, #14b8a6, #0f766e) !important; color: #fff !important; }
html:not(.zz) body .info-contact__item strong { color: #5eead4 !important; }
html:not(.zz) body .info-contact__item span { color: #ffffff !important; }
html:not(.zz) body .info-page .btn-secondary, html:not(.zz) body a.btn-white { background: transparent !important; color: #5eead4 !important; border: 2px solid #2dd4bf !important; }
html:not(.zz) body .info-page .btn-secondary:hover, html:not(.zz) body a.btn-white:hover { background: rgba(45, 212, 191, 0.16) !important; color: #ffffff !important; }
html:not(.zz) body .info-page .btn-primary { background: linear-gradient(135deg, #0f766e, #14b8a6) !important; color: #fff !important; border-color: #2dd4bf !important; }
html:not(.zz) body .info-faq__item summary { color: var(--sdt-ink-hi) !important; }
html:not(.zz) body .info-faq__item { border-color: var(--sdt-edge) !important; }

/* inputs inside cards on public pages */
html:not(.zz) body :is(.rate-us-box, .calc-box-luxury) :is(input, textarea, select) { background: #061f1c !important; color: #f0fdfa !important; border: 1px solid rgba(45, 212, 191, 0.35) !important; }
html:not(.zz) body :is(input, textarea)::placeholder { color: #7fb8ae !important; opacity: 1; }
html:not(.zz) body .star-btn { color: #facc15 !important; background: transparent !important; }

/* location suggestions dropdown */
html:not(.zz) body .dropcars-autocomplete-dropdown { background: #062321 !important; border: 1px solid rgba(45, 212, 191, 0.4) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important; }
html:not(.zz) body .dropcars-autocomplete-item { color: #e6fbf6 !important; border-bottom: 1px solid rgba(45, 212, 191, 0.14) !important; }
html:not(.zz) body .dropcars-autocomplete-item:hover { background-color: rgba(45, 212, 191, 0.16) !important; }
html:not(.zz) body .dropcars-autocomplete-item.is-gps { background-color: rgba(251, 113, 133, 0.14) !important; border-bottom: 1px solid rgba(251, 113, 133, 0.35) !important; }
html:not(.zz) body .dropcars-autocomplete-item.is-gps:hover { background-color: rgba(251, 113, 133, 0.24) !important; }

/* name / phone row: aligned labels, WhatsApp tick on one line, single column on phones */
html:not(.zz) body .field-pair--contact-primary { align-items: start !important; }
html:not(.zz) body .field-pair--contact-primary > .field > span, html:not(.zz) body .field__label-row { min-height: 30px; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin-bottom: 4px !important; }
html:not(.zz) body .wa-check-label { flex-direction: row !important; flex-wrap: nowrap !important; white-space: nowrap !important; flex-shrink: 0 !important; }
html:not(.zz) body .wa-check-label .wa-label-icon { display: inline-flex !important; line-height: 0; }
html:not(.zz) body .wa-check-label input[type=checkbox] { flex-shrink: 0; }

/* home: feature icons, fleet, service chips, reviews controls */
html:not(.zz) body .feature-card__icon { background: rgba(45, 212, 191, 0.12) !important; border: 1px solid var(--sdt-edge) !important; box-shadow: none !important; }
html:not(.zz) body .fleet-filter__btn { background: rgba(8, 38, 35, 0.9) !important; color: #cdeee6 !important; border: 1px solid var(--sdt-edge) !important; }
html:not(.zz) body .fleet-filter__btn:hover { border-color: #2dd4bf !important; color: #ffffff !important; }
html:not(.zz) body .fleet-filter__btn--active { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%) !important; color: #ffffff !important; border-color: #2dd4bf !important; }
html:not(.zz) body .fleet-showcase__img { background: radial-gradient(ellipse at 50% 70%, rgba(45, 212, 191, 0.28) 0%, rgba(45, 212, 191, 0.06) 55%, transparent 75%), rgba(3, 18, 16, 0.6) !important; }
html:not(.zz) body .fleet-showcase__head h3 { color: #ffffff !important; }
html:not(.zz) body .fleet-showcase__head span { color: #fb7185 !important; font-weight: 800 !important; }
html:not(.zz) body .fleet-showcase__category { color: #7de3d3 !important; }
html:not(.zz) body .fleet-showcase__features li { color: #d3efe9 !important; }
html:not(.zz) body .fleet-showcase__features li .feature-icon { color: #2dd4bf !important; }
html:not(.zz) body .service-card__highlight { background: rgba(250, 204, 21, 0.14) !important; color: #fde047 !important; border: 1px solid rgba(250, 204, 21, 0.45) !important; }
html:not(.zz) body .d1t-slider-btn { background: rgba(45, 212, 191, 0.14) !important; color: #5eead4 !important; border: 1px solid rgba(45, 212, 191, 0.45) !important; border-radius: 50% !important; width: 40px; height: 40px; font-size: 1.4rem; line-height: 1; cursor: pointer; }
html:not(.zz) body .seo-card__image { background: #0a2a27 !important; }
html:not(.zz) body .stats-bar * { color: #e6fbf6 !important; }

/* tariff */
html:not(.zz) body .tab-btn { background: rgba(8, 38, 35, 0.9) !important; color: #cdeee6 !important; border: 1px solid var(--sdt-edge) !important; }
html:not(.zz) body .tab-btn.active, html:not(.zz) body .tab-btn[aria-selected="true"] { background: linear-gradient(135deg, #0f766e, #14b8a6) !important; color: #ffffff !important; }
html:not(.zz) body .inc-item.excluded { border-color: rgba(251, 113, 133, 0.45) !important; }

/* ---- hub: Routes / Cities / Airports tabs ---- */
html:not(.zz) body .hub-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 5px; margin: 0 auto 1.6rem; width: fit-content; max-width: 100%; background: rgba(4, 26, 24, 0.92); border: 1px solid var(--sdt-edge); border-radius: 14px; }
html:not(.zz) body .hub-tab { display: inline-flex; align-items: center; gap: 8px; padding: 0.6rem 1.05rem; border: 0; border-radius: 10px; background: transparent; color: #b8e6dd; font: 700 0.95rem/1.1 "Outfit", "Inter", sans-serif; cursor: pointer; transition: background 0.2s, color 0.2s; }
html:not(.zz) body .hub-tab:hover { color: #ffffff; background: rgba(45, 212, 191, 0.12); }
html:not(.zz) body .hub-tab--active { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%) !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(20, 184, 166, 0.4); }
html:not(.zz) body .hub-tab__ico { display: inline-flex; width: 18px; height: 18px; }
html:not(.zz) body .hub-tab__ico svg { width: 18px; height: 18px; }
html:not(.zz) body .hub-pane[hidden] { display: none !important; }
html:not(.zz) body .hub-pane { animation: hubIn 0.3s ease; }
@keyframes hubIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html:not(.zz) body .hub-more { display: flex; justify-content: center; margin-top: 1.4rem; }
@media (max-width: 560px) { html:not(.zz) body .hub-tabs { width: 100%; } html:not(.zz) body .hub-tab { flex: 1 1 auto; justify-content: center; padding: 0.55rem 0.5rem; font-size: 0.82rem; } html:not(.zz) body .hub-tab__ico { display: none; } }

/* ---- highway sign boards (routes, cities, airports) ---- */
html:not(.zz) body .board-grid, html:not(.zz) body .routes-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.1rem; margin-top: 1.4rem; }
html:not(.zz) body a.sb { position: relative; display: flex !important; flex-direction: column; gap: 0.45rem; min-height: 9.6rem; padding: 0.7rem 0.95rem 0.8rem; text-decoration: none !important; color: #ffffff !important; border-radius: 12px !important; overflow: hidden;
  background: linear-gradient(165deg, #0b7a4b 0%, #075f3c 55%, #064a31 100%) !important; border: 3px solid #f8fafc !important; outline: 2px solid #064a31; outline-offset: -7px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 12px 26px rgba(0, 0, 0, 0.45) !important; transition: transform 0.25s ease, box-shadow 0.25s ease; clip-path: none; }
html:not(.zz) body a.sb::before, html:not(.zz) body a.sb::after { content: ""; position: absolute; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #f1f5f9, #94a3b8); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.4); z-index: 2; }
html:not(.zz) body a.sb::before { left: 8px; }
html:not(.zz) body a.sb::after { right: 8px; }
html:not(.zz) body a.sb:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px #facc15, 0 18px 34px rgba(0, 0, 0, 0.55) !important; }
html:not(.zz) body a.sb--city { background: linear-gradient(165deg, #0f6aa6 0%, #0b4f86 55%, #083d6b 100%) !important; outline-color: #083d6b; }
html:not(.zz) body a.sb--airport { background: linear-gradient(165deg, #1f2f46 0%, #14213a 60%, #0d1829 100%) !important; outline-color: #2dd4bf; }
html:not(.zz) body .sb__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0 12px 0.4rem; border-bottom: 1px dashed rgba(255, 255, 255, 0.4); margin: 0 -2px; }
html:not(.zz) body .sb__badge { background: #facc15; color: #0f172a; font: 800 0.62rem/1 "Outfit", "Inter", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.22rem 0.45rem; border-radius: 3px; }
html:not(.zz) body .sb__code { color: rgba(255, 255, 255, 0.92); font: 700 0.7rem/1 "Inter", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not(.zz) body .sb__route { color: #ffffff !important; font: 800 1.1rem/1.2 "Outfit", "Inter", sans-serif; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); padding: 0 6px; overflow-wrap: anywhere; }
html:not(.zz) body .sb__route i { font-style: normal; color: #facc15; font-size: 0.78em; letter-spacing: 0.1em; }
html:not(.zz) body .sb__sub { color: rgba(255, 255, 255, 0.86) !important; font: 600 0.72rem/1.2 "Inter", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; padding: 0 6px; }
html:not(.zz) body .sb__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
html:not(.zz) body .sb__km { display: inline-flex; align-items: baseline; gap: 4px; background: rgba(4, 26, 25, 0.85); color: #facc15; font: 800 0.68rem/1 "Inter", sans-serif; letter-spacing: 0.06em; padding: 0.28rem 0.5rem; border-radius: 4px; border: 1.5px solid rgba(250, 204, 21, 0.6); }
html:not(.zz) body .sb__km em { font: 900 0.95rem/1 "Outfit", "Inter", sans-serif; font-style: normal; }
html:not(.zz) body .sb--city .sb__km, html:not(.zz) body .sb--airport .sb__km { background: transparent; color: #e2e8f0; border: 0; padding: 0; text-transform: none; letter-spacing: 0.02em; font-weight: 600; font-size: 0.72rem; }
html:not(.zz) body .sb__cta { color: #fde047 !important; font: 800 0.72rem/1 "Inter", sans-serif; letter-spacing: 0.04em; white-space: nowrap; }
html:not(.zz) body a.sb:hover .sb__cta { color: #ffffff !important; }

/* sign boards: beat the older ".routes-grid a" arrow-shape rule */
html:not(.zz) body a.sb, html:not(.zz) body .routes-grid a.sb, html:not(.zz) body .board-grid a.sb { clip-path: none !important; padding: 0.7rem 0.95rem 0.8rem !important; font-size: 1rem !important; letter-spacing: normal !important; text-transform: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; text-align: center; min-height: 9.6rem !important; }
html:not(.zz) body a.sb:hover { clip-path: none !important; }
html:not(.zz) body a.sb .sb__route { font-size: 1.1rem !important; }

/* inline-styled white blocks in city / route / account templates (they use var(--white) etc. inline) */
html:not(.zz) body :is([style*="background: var(--white)"], [style*="background:var(--white)"], [style*="background: var(--gray-50)"], [style*="background:var(--gray-50)"], [style*="background: var(--gray-100"], [style*="background:var(--gray-100"], [style*="background: white"], [style*="background:white"], [style*="background: #fff"], [style*="background:#fff"], [style*="background: #ffffff"], [style*="background-color: #fff"], [style*="background-color: white"]) {
  background: var(--sdt-card) !important; border-color: var(--sdt-edge) !important; color: var(--sdt-ink) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}
html:not(.zz) body :is([style*="background: var(--white)"], [style*="background:var(--white)"], [style*="background: var(--gray-50)"], [style*="background:var(--gray-50)"], [style*="background: var(--gray-100"], [style*="background: white"], [style*="background: #fff"]) :is(h1, h2, h3, h4, h5, strong, b) { color: var(--sdt-ink-hi) !important; }
html:not(.zz) body :is([style*="background: var(--white)"], [style*="background:var(--white)"], [style*="background: var(--gray-50)"], [style*="background:var(--gray-50)"], [style*="background: var(--gray-100"], [style*="background: white"], [style*="background: #fff"]) :is(p, li, span, small, div, td, em) { color: var(--sdt-ink) !important; }
html:not(.zz) body :is([style*="background: var(--white)"], [style*="background: var(--gray-50)"], [style*="background: white"]) a:not([class*="btn"]) { color: #5eead4 !important; }

/* route page: map frame, stats strip, related-route list, other cards */
html:not(.zz) body :is(.route-map-container, .route-stats-summary, .route-map-section p) { background: rgba(8, 38, 35, 0.92) !important; border-color: var(--sdt-edge) !important; color: var(--sdt-ink) !important; }
html:not(.zz) body .route-stats-summary * { color: var(--sdt-ink) !important; }
html:not(.zz) body .route-map-container a, html:not(.zz) body .route-map-section a { color: #5eead4 !important; }
html:not(.zz) body a.route-card:not(.sb), html:not(.zz) body .routes-list-grid a:not(.sb), html:not(.zz) body .city-routes-inner a:not(.sb) { background: var(--sdt-card) !important; border: 1px solid var(--sdt-edge) !important; color: var(--sdt-ink-hi) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important; clip-path: none !important; border-radius: 12px !important; }
html:not(.zz) body a.route-card:not(.sb) *, html:not(.zz) body .routes-list-grid a:not(.sb) * { color: inherit !important; }
html:not(.zz) body a.route-card:not(.sb):hover { border-color: #2dd4bf !important; background: rgba(20, 184, 166, 0.16) !important; }
html:not(.zz) body :is(article, .seo-card, .service-card, .trust-card, .feature-card, .why-card) { border-color: var(--sdt-edge); }
html:not(.zz) body :is(.seo-card, .service-card, .trust-card, .feature-card, .why-card) { background: var(--sdt-card) !important; color: var(--sdt-ink) !important; }
html:not(.zz) body :is(.seo-card, .service-card, .trust-card, .feature-card, .why-card) :is(h2, h3, h4) { color: var(--sdt-ink-hi) !important; }
html:not(.zz) body :is(.seo-card, .service-card, .trust-card, .feature-card, .why-card) :is(p, li) { color: var(--sdt-ink) !important; }

/* more inline light backgrounds + account / track / login / cities-accordion cards */
html:not(.zz) body :is([style*="background: #f8fafc"], [style*="background:#f8fafc"], [style*="background: #f1f5f9"], [style*="background: #f9fafb"], [style*="background: #f0fdfa"], [style*="background: #ecfeff"], [style*="background: #eff6ff"]) {
  background: var(--sdt-card) !important; border-color: var(--sdt-edge) !important; color: var(--sdt-ink) !important;
}
html:not(.zz) body :is([style*="background: #f8fafc"], [style*="background:#f8fafc"], [style*="background: #f1f5f9"], [style*="background: #f9fafb"], [style*="background: #f0fdfa"], [style*="background: #ecfeff"], [style*="background: #eff6ff"]) :is(h1, h2, h3, h4, h5, strong, b) { color: var(--sdt-ink-hi) !important; }
html:not(.zz) body :is([style*="background: #f8fafc"], [style*="background:#f8fafc"], [style*="background: #f1f5f9"], [style*="background: #f9fafb"], [style*="background: #f0fdfa"], [style*="background: #ecfeff"], [style*="background: #eff6ff"]) :is(p, li, span, small, div, td) { color: var(--sdt-ink) !important; }

html:not(.zz) body :is(.city-accordion-card, .city-accordion-header, .city-accordion-body, .city-accordion-content, .glass-block, .login-card, .track-card, .dash-card, .dashboard-card, .booking-lookup, .customer-card, .vendor-card, .partner-form, .partner-card) {
  background: var(--sdt-card) !important; border: 1px solid var(--sdt-edge) !important; color: var(--sdt-ink) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
html:not(.zz) body :is(.city-accordion-header, .city-accordion-body, .city-accordion-content) { box-shadow: none !important; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; }
html:not(.zz) body :is(.city-accordion-card, .glass-block, .login-card, .track-card, .dash-card, .dashboard-card, .booking-lookup, .customer-card, .vendor-card, .partner-form, .partner-card) :is(h1, h2, h3, h4, h5, strong, b, legend) { color: var(--sdt-ink-hi) !important; }
html:not(.zz) body :is(.city-accordion-card, .glass-block, .login-card, .track-card, .dash-card, .dashboard-card, .booking-lookup, .customer-card, .vendor-card, .partner-form, .partner-card) :is(p, li, span, small, label, div, td, th) { color: var(--sdt-ink) !important; }
html:not(.zz) body :is(.city-accordion-card, .glass-block, .login-card, .track-card, .partner-form, .partner-card) a:not([class*="btn"]):not(.btn-primary) { color: #5eead4 !important; }
html:not(.zz) body :is(.glass-block, .login-card, .track-card, .partner-form, .partner-card, .dash-card, .dashboard-card, .booking-lookup, .customer-card, .vendor-card) :is(input, textarea, select, .form-control, .track-input) { background: #061f1c !important; color: #f0fdfa !important; border: 1px solid rgba(45, 212, 191, 0.35) !important; }
html:not(.zz) body :is(input.form-control, input.track-input, .login-card input, .glass-block input) { background: #061f1c !important; color: #f0fdfa !important; border: 1px solid rgba(45, 212, 191, 0.35) !important; }
html:not(.zz) body :is(.login-card, .glass-block) :is(button:not([class*="btn"]):not(.tab), .btn-primary, .btn-login) { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%) !important; color: #ffffff !important; border: 1px solid #2dd4bf !important; box-shadow: 0 8px 22px rgba(20, 184, 166, 0.35) !important; }
html:not(.zz) body .login-card::before, html:not(.zz) body .login-card::after { background: linear-gradient(90deg, #14b8a6 0%, #facc15 55%, #fb7185 100%) !important; }
html:not(.zz) body :is(.login-card, .glass-block) a { color: #fb923c !important; }
html:not(.zz) body :is(.login-card, .glass-block) a:hover { color: #fdba74 !important; }

html:not(.zz) body :is(.partner-form-card, .partner-card, .partner-info-card, .partner-benefit, .benefit-card, .form-card, .register-card) { background: var(--sdt-card) !important; border: 1px solid var(--sdt-edge) !important; color: var(--sdt-ink) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important; }
html:not(.zz) body :is(.partner-form-card, .partner-info-card, .partner-benefit, .benefit-card, .form-card, .register-card) :is(h1, h2, h3, h4, h5, strong, b, legend) { color: var(--sdt-ink-hi) !important; }
html:not(.zz) body :is(.partner-form-card, .partner-info-card, .partner-benefit, .benefit-card, .form-card, .register-card) :is(p, li, span, small, label, div) { color: var(--sdt-ink) !important; }
html:not(.zz) body :is(.partner-form-card, .form-card, .register-card) :is(input, textarea, select) { background: #061f1c !important; color: #f0fdfa !important; border: 1px solid rgba(45, 212, 191, 0.35) !important; }
html:not(.zz) body :is(.partner-form-card, .form-card, .register-card) :is(button[type=submit], .btn-primary) { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%) !important; color: #ffffff !important; border: 1px solid #2dd4bf !important; }
html:not(.zz) body :is(.glass-block, .login-card, .track-card) a[style*="background"], html:not(.zz) body :is(.glass-block, .login-card, .track-card) a[class*="coupon"] { color: #ffffff !important; }
html:not(.zz) body .glass-block a:not([class*="btn"]) { color: #ccfbf1 !important; }
html:not(.zz) body .glass-block.glass-block a[href]:not([class*="btn"]):not(.btn-primary):not(.zzz) { color: #ccfbf1 !important; }

html:not(.zz) body .glass-block a[class*="btn"], html:not(.zz) body .login-card a[class*="btn"], html:not(.zz) body .track-card a[class*="btn"] { color: #ffffff !important; }

/* developer credit page */
html:not(.zz) body .dev-page { background: #04120f !important; color: var(--sdt-ink) !important; }
html:not(.zz) body .dev-page section { background: transparent !important; }
html:not(.zz) body .dev-page :is(.dev-contact-card, .dev-project-card, [class*="__card"], [class*="-card"]) { background: var(--sdt-card) !important; border: 1px solid var(--sdt-edge) !important; color: var(--sdt-ink) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important; }
html:not(.zz) body .dev-page :is(h1, h2, h3, h4, h5, strong) { color: var(--sdt-ink-hi) !important; }
html:not(.zz) body .dev-page :is(p, li, span, small, div, a) { color: var(--sdt-ink); }
html:not(.zz) body .dev-page :is(.dev-contact-card__label, .eyebrow, .dev-contact-card__arrow) { color: #5eead4 !important; }
html:not(.zz) body .dev-page :is(.dev-contact-card__icon, [class*="__icon"]) { background: rgba(45, 212, 191, 0.14) !important; border: 1px solid var(--sdt-edge) !important; }
html:not(.zz) body .dev-page .dev-project-card__status { background: rgba(34, 197, 94, 0.18) !important; color: #86efac !important; border: 1px solid rgba(34, 197, 94, 0.5) !important; }

html:not(.zz) body a.btn-green-deluxe { background: linear-gradient(135deg, #0b6b5f, #0f766e) !important; color: #ffffff !important; }
html:not(.zz) body .dev-page .dev-hero__role { color: #fb7185 !important; }
html:not(.zz) body .dev-page .dev-tag { background: rgba(45, 212, 191, 0.14) !important; color: #99f6e4 !important; border: 1px solid var(--sdt-edge) !important; }

html:not(.zz) body .fleet-showcase__img::after { background: linear-gradient(to top, rgba(6, 26, 24, 1), rgba(6, 26, 24, 0)) !important; }
html:not(.zz) body .fleet-showcase__img img { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55)) !important; }

/* FAQ: question and answer sit inside real padding */
html:not(.zz) body .faq__items, html:not(.zz) body .faq__accordion { display: grid; gap: 0.85rem; }
html:not(.zz) body .faq__item { padding: 1.1rem 1.3rem !important; border-radius: 16px !important; }
html:not(.zz) body .faq__item :is(h3, h4, .faq__summary, summary) { margin: 0 0 0.5rem !important; padding: 0 !important; font-size: 1.05rem !important; font-weight: 700 !important; color: #f0fdfa !important; }
html:not(.zz) body .faq__item summary, html:not(.zz) body .faq__item .faq__summary { margin: 0 !important; padding: 0.15rem 0 !important; }
html:not(.zz) body .faq__item p { margin: 0 !important; padding: 0 !important; font-size: 1rem !important; line-height: 1.65 !important; color: #cfeae3 !important; }
html:not(.zz) body .faq__item[open] { border-color: #2dd4bf !important; }

/* road-strip dividers: white edge lines, asphalt, yellow centre dashes (replaces the plain amber dashes) */
html:not(.zz) body section::after {
  height: 10px !important; margin-top: 2rem !important; opacity: 1 !important; box-shadow: none !important;
  background:
    repeating-linear-gradient(90deg, #facc15 0 30px, transparent 30px 56px) center / 100% 2px no-repeat,
    linear-gradient(#e2e8f0, #e2e8f0) top / 100% 1px no-repeat,
    linear-gradient(#e2e8f0, #e2e8f0) bottom / 100% 1px no-repeat,
    linear-gradient(90deg, #0b3d2e, #14532d 50%, #0b3d2e) !important;
}
html:not(.zz) body .site-header { position: relative; }
html:not(.zz) body .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: repeating-linear-gradient(90deg, #facc15 0 22px, #0d8a53 22px 44px); opacity: 0.9; pointer-events: none; }
html:not(.zz) body .site-footer { position: relative; }
html:not(.zz) body .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(90deg, #facc15 0 34px, #0d8a53 34px 68px); }
html:not(.zz) body .hub-tabs { box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.18), 0 8px 24px rgba(0, 0, 0, 0.35); }
html:not(.zz) body .legal-card::after, html:not(.zz) body .rate-us-box::before { content: none; }

/* Name (left) | Phone (right) always side by side, like the Drop Cars form */
html:not(.zz) body .booking-card .field-pair--contact-primary { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 10px !important; align-items: start !important; }
html:not(.zz) body .booking-card .field-pair--contact-primary > * { min-width: 0; width: 100%; }
html:not(.zz) body .booking-card .field-pair--contact-primary .field__label-row > span, html:not(.zz) body .booking-card .field-pair--contact-primary > .field > span { white-space: nowrap; font-size: 0.74rem !important; min-width: 0; flex-shrink: 1; }
html:not(.zz) body .booking-card .field-pair--contact-primary .wa-check-label { gap: 0.25rem !important; }
html:not(.zz) body .booking-card .field-pair--contact-primary .phone-input-wrapper { width: 100%; min-width: 0; }
html:not(.zz) body .booking-card .field-pair--contact-primary .field__label-row { flex-wrap: nowrap !important; gap: 4px !important; }
html:not(.zz) body .booking-card .field-pair--contact-primary .field__label-row > span, html:not(.zz) body .booking-card .field-pair--contact-primary > .field > span { font-size: 0.68rem !important; letter-spacing: 0 !important; }
html:not(.zz) body .booking-card .field-pair--contact-primary .field__label-row, html:not(.zz) body .booking-card .field-pair--contact-primary > .field > span { height: 26px !important; min-height: 26px !important; max-height: 26px; margin: 0 0 4px !important; padding: 0 !important; align-items: center !important; box-sizing: border-box; }
html:not(.zz) body .booking-card .field-pair--contact-primary .field__label-row > span { margin: 0 !important; line-height: 1 !important; }
html:not(.zz) body .booking-card .field-pair--contact-primary .phone-input-wrapper, html:not(.zz) body .booking-card .field-pair--contact-primary input[name=customerName] { margin: 0 !important; height: 42px; box-sizing: border-box; }
html:not(.zz) body .booking-card .field-pair--contact-primary > .field { gap: 0 !important; }
html:not(.zz) body .booking-card .field-pair--contact-primary .phone-national-input { font-size: 0.82rem !important; padding-left: 0.45rem !important; padding-right: 0.3rem !important; min-width: 0 !important; }
html:not(.zz) body .booking-card .field-pair--contact-primary .country-code-trigger { padding-left: 0.4rem !important; padding-right: 0.4rem !important; min-width: 0 !important; }

/* ===== batch 2026-10-16 (late): heroes, boards, country popover, tabs, Track button ===== */

/* hero: no divider line through the headline; the road line sits on the booking card's bottom edge instead */
html:not(.zz) body :is(.hero, .city-hero, .route-hero, .cities-hero)::after { display: none !important; }
html:not(.zz) body .booking-card { position: relative; }
html:not(.zz) body .booking-card::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(90deg, #facc15 0 26px, #0d8a53 26px 52px); opacity: 0.95; pointer-events: none; }

/* city / route / cities hero: dark brand surface, white headline (was yellow-green with black text) */
html:not(.zz) body :is(.city-hero, .route-hero, .cities-hero) { background: radial-gradient(ellipse at 82% 0%, rgba(20, 184, 166, 0.28) 0%, transparent 55%), linear-gradient(165deg, #052321 0%, #04201e 55%, #031512 100%) !important; color: #e6fbf6 !important; }
html:not(.zz) body :is(.city-hero, .route-hero, .cities-hero)::before { display: none !important; }
html:not(.zz) body :is(.city-hero, .route-hero, .cities-hero) h1 { color: #ffffff !important; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45) !important; }
html:not(.zz) body :is(.city-hero, .route-hero, .cities-hero) .hero__copy p { color: #cfeee7 !important; opacity: 1 !important; }
html:not(.zz) body :is(.city-hero, .route-hero, .cities-hero) .breadcrumbs, html:not(.zz) body :is(.city-hero, .route-hero) .breadcrumb { color: #7fb8ae !important; }
html:not(.zz) body :is(.city-hero, .route-hero, .cities-hero) .breadcrumbs a, html:not(.zz) body :is(.city-hero, .route-hero) .breadcrumb a { color: #9ee7dc !important; }
html:not(.zz) body :is(.city-hero, .route-hero, .cities-hero) .breadcrumbs span { color: #7fb8ae !important; }
html:not(.zz) body :is(.city-hero, .route-hero, .cities-hero) .breadcrumbs span[style] { color: #5eead4 !important; }
html:not(.zz) body .city-stat { background: rgba(45, 212, 191, 0.1) !important; border: 1px solid rgba(45, 212, 191, 0.3) !important; color: #ffffff !important; }
html:not(.zz) body .city-stat span { color: #ffffff !important; }
html:not(.zz) body .city-stat small { color: #9ccfc5 !important; }
html:not(.zz) body .trust-line span { background: rgba(45, 212, 191, 0.12) !important; border: 1px solid rgba(45, 212, 191, 0.3) !important; color: #d8f6f0 !important; padding: 0.25rem 0.6rem; border-radius: 999px; }

/* Track button: road-yellow instead of red */
html:not(.zz) body .header-login-btn { background: linear-gradient(135deg, #facc15 0%, #f59e0b 100%) !important; color: #1a1300 !important; box-shadow: 0 2px 10px rgba(250, 204, 21, 0.35) !important; }
html:not(.zz) body .header-login-btn:hover { background: linear-gradient(135deg, #fde047 0%, #facc15 100%) !important; box-shadow: 0 5px 16px rgba(250, 204, 21, 0.5) !important; }

/* booking tabs: even padding, slightly larger sub-tab type, pill fills the tab */
html:not(.zz) body .booking-card .oneway-subtypes.oneway-subtypes { padding: 3px !important; margin-bottom: 14px !important; }
html:not(.zz) body .booking-card .oneway-subtypes.oneway-subtypes label { font-size: 0.86rem !important; font-weight: 700 !important; min-height: 38px !important; padding: 0 0.4rem !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 7px !important; }
html:not(.zz) body .booking-card .trip-type-options.trip-type-options { padding: 3px !important; }
html:not(.zz) body .booking-card .trip-type-options.trip-type-options .trip-type-option { min-height: 46px !important; padding: 0 0.25rem !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; }

/* country code popover (was white/pink/tiny) */
html:not(.zz) body .booking-card .country-code-trigger { background: rgba(45, 212, 191, 0.14) !important; color: #5eead4 !important; border-right: 1px solid rgba(45, 212, 191, 0.35) !important; font-weight: 700 !important; }
html:not(.zz) body .country-code-popover { background: #062321 !important; border: 1px solid rgba(45, 212, 191, 0.45) !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6) !important; width: 104px !important; min-width: 104px !important; max-width: 104px !important; padding: 6px !important; gap: 6px !important; border-radius: 10px !important; }
html:not(.zz) body .country-code-option { background: rgba(45, 212, 191, 0.14) !important; color: #e6fbf6 !important; border: 1px solid rgba(45, 212, 191, 0.35) !important; font-size: 0.85rem !important; font-weight: 700 !important; padding: 6px 4px !important; }
html:not(.zz) body .country-code-option:hover { background: rgba(45, 212, 191, 0.28) !important; border-color: #2dd4bf !important; }
html:not(.zz) body .country-code-manual-inline, html:not(.zz) body .field .country-code-manual-inline { background: #04201d !important; color: #f0fdfa !important; border: 1px dashed rgba(45, 212, 191, 0.6) !important; font-size: 0.78rem !important; min-height: 34px !important; padding: 6px 6px !important; box-shadow: none !important; }
html:not(.zz) body .country-code-manual-inline:focus { border-color: #2dd4bf !important; box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.25) !important; }
html:not(.zz) body .country-code-manual-inline::placeholder { color: #7fb8ae !important; }

/* sign boards: ONE colour family everywhere, 2 per row on phones */
html:not(.zz) body a.sb, html:not(.zz) body a.sb--city, html:not(.zz) body a.sb--airport, html:not(.zz) body a.sb--route { background: linear-gradient(165deg, #0b7a4b 0%, #075f3c 55%, #064a31 100%) !important; outline-color: #064a31 !important; }
html:not(.zz) body a.sb--city .sb__badge, html:not(.zz) body a.sb--airport .sb__badge { background: #fde047; }
html:not(.zz) body a.sb--city .sb__km, html:not(.zz) body a.sb--airport .sb__km { color: #fef9c3 !important; }
@media (max-width: 700px) {
  html:not(.zz) body .board-grid, html:not(.zz) body .routes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.6rem !important; margin-top: 1rem !important; }
  html:not(.zz) body a.sb { min-height: 7.4rem !important; padding: 0.5rem 0.55rem 0.55rem !important; gap: 0.3rem !important; border-width: 2px !important; outline-offset: -5px; border-radius: 10px !important; }
  html:not(.zz) body a.sb::before, html:not(.zz) body a.sb::after { top: 5px; width: 5px; height: 5px; }
  html:not(.zz) body .sb__top { padding: 0 8px 0.3rem !important; gap: 0.3rem !important; }
  html:not(.zz) body .sb__badge { font-size: 0.5rem !important; padding: 0.16rem 0.32rem !important; }
  html:not(.zz) body .sb__code { font-size: 0.56rem !important; }
  html:not(.zz) body a.sb .sb__route { font-size: 0.8rem !important; line-height: 1.15 !important; padding: 0 2px !important; }
  html:not(.zz) body .sb__sub { font-size: 0.5rem !important; letter-spacing: 0.06em !important; padding: 0 2px !important; }
  html:not(.zz) body .sb__foot { padding: 0.35rem 2px 0 !important; gap: 0.25rem !important; flex-wrap: wrap; justify-content: center; }
  html:not(.zz) body .sb__km { font-size: 0.5rem !important; padding: 0.18rem 0.3rem !important; }
  html:not(.zz) body .sb__km em { font-size: 0.72rem !important; }
  html:not(.zz) body .sb__cta { font-size: 0.56rem !important; }
}

/* airport taxi guide block */
html:not(.zz) body .airport-guide { padding: 2.6rem 0 2.2rem; background: linear-gradient(160deg, rgba(7, 34, 31, 0.96), rgba(4, 21, 19, 0.98)); }
html:not(.zz) body .airport-guide h2 { color: #ffffff !important; margin: 0.2rem 0 0.8rem; text-align: left; }
html:not(.zz) body .airport-guide .eyebrow { text-align: left; }
html:not(.zz) body .airport-guide__lead { color: #cfeee7; max-width: 52rem; line-height: 1.7; margin: 0 0 1.4rem; }
html:not(.zz) body .airport-guide__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; }
html:not(.zz) body .airport-step { background: var(--sdt-card); border: 1px solid var(--sdt-edge); border-radius: 14px; padding: 1rem 1.1rem; }
html:not(.zz) body .airport-step__n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #facc15; color: #1a1300; font: 800 0.9rem/1 "Outfit", sans-serif; margin-bottom: 0.5rem; }
html:not(.zz) body .airport-step h3 { color: #f0fdfa !important; font-size: 1.02rem; margin: 0 0 0.3rem; }
html:not(.zz) body .airport-step p { color: #cfeee7 !important; margin: 0; font-size: 0.92rem; line-height: 1.55; }
html:not(.zz) body .airport-guide__sub { color: #f0fdfa !important; margin: 1.8rem 0 0.7rem; font-size: 1.15rem; }
html:not(.zz) body .airport-guide__drops { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
html:not(.zz) body .airport-guide__drops li { background: rgba(45, 212, 191, 0.1); border: 1px solid var(--sdt-edge); border-radius: 999px; padding: 0.35rem 0.8rem; color: #cfeee7; font-size: 0.88rem; }
html:not(.zz) body .airport-guide__drops a { color: #5eead4; font-weight: 700; text-decoration: none; }
html:not(.zz) body .airport-guide__drops span { color: #fde047; margin-left: 0.35rem; font-weight: 700; }
html:not(.zz) body .airport-guide__faq { display: grid; gap: 0.6rem; }
html:not(.zz) body .airport-guide__faq details { padding: 0.8rem 1rem !important; }
html:not(.zz) body .airport-guide__faq summary { cursor: pointer; font-weight: 700; color: #f0fdfa !important; }
html:not(.zz) body .airport-guide__faq details p { margin: 0.5rem 0 0 !important; }
@media (max-width: 700px) { html:not(.zz) body .airport-guide__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } html:not(.zz) body .airport-step { padding: 0.7rem 0.75rem; } html:not(.zz) body .airport-step p { font-size: 0.8rem; } html:not(.zz) body .airport-step h3 { font-size: 0.9rem; } }
html:not(.zz) body .city-stats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.5rem !important; max-width: 560px; margin-left: auto; margin-right: auto; }
html:not(.zz) body .city-stat { padding: 0.55rem 0.4rem !important; min-width: 0 !important; width: auto !important; }
html:not(.zz) body .city-stat span { font-size: 1.15rem !important; }
html:not(.zz) body .city-stat small { font-size: 0.6rem !important; letter-spacing: 0.04em !important; }

/* ===== places / destinations, fare examples, guides, route guide, city cloud ===== */
html:not(.zz) body :is(.places-section, .fare-examples, .seo-guide, .route-guide, .city-cloud) { padding: 2.6rem 0; background: transparent; }
html:not(.zz) body :is(.places-section, .fare-examples, .seo-guide, .route-guide) h2 { color: #ffffff !important; margin: 0.2rem 0 0.7rem; text-align: left; }
html:not(.zz) body :is(.places-section, .fare-examples, .seo-guide, .route-guide) .eyebrow { text-align: left; }
html:not(.zz) body .places__lead { color: #cfeee7; max-width: 52rem; line-height: 1.7; margin: 0 0 1.3rem; }
html:not(.zz) body .places-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
html:not(.zz) body .place-link { display: block; text-decoration: none !important; color: inherit; min-width: 0; }
html:not(.zz) body .place-card { margin: 0; background: var(--sdt-card); border: 1px solid var(--sdt-edge); border-radius: 14px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform 0.25s ease, border-color 0.25s ease; }
html:not(.zz) body .place-link:hover .place-card, html:not(.zz) body .place-card:hover { transform: translateY(-3px); border-color: #2dd4bf; }
html:not(.zz) body .place-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: #0a2a27; }
html:not(.zz) body .place-card figcaption { padding: 0.75rem 0.9rem 0.9rem; }
html:not(.zz) body .place-card h3 { color: #f0fdfa !important; font-size: 1rem; margin: 0 0 0.25rem; line-height: 1.25; }
html:not(.zz) body .place-card p { color: #b9e2da !important; font-size: 0.84rem; line-height: 1.5; margin: 0; }
html:not(.zz) body .place-link:first-child, html:not(.zz) body .places-grid > .place-card--lead { grid-column: span 2; }
html:not(.zz) body .place-card--lead h3 { font-size: 1.2rem; }
html:not(.zz) body .place-card--lead p { font-size: 0.92rem; }
html:not(.zz) body .place-card--lead img { aspect-ratio: 16 / 8; }
@media (max-width: 700px) {
  html:not(.zz) body .places-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
  html:not(.zz) body .place-card figcaption { padding: 0.5rem 0.6rem 0.65rem; }
  html:not(.zz) body .place-card h3 { font-size: 0.82rem; }
  html:not(.zz) body .place-card p { font-size: 0.7rem; line-height: 1.4; }
  html:not(.zz) body .place-card--lead h3 { font-size: 1rem; }
  html:not(.zz) body .place-card--lead p { font-size: 0.78rem; }
}

html:not(.zz) body .fare-table-wrap { overflow-x: auto; border: 1px solid var(--sdt-edge); border-radius: 14px; background: var(--sdt-card); }
html:not(.zz) body .fare-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 460px; }
html:not(.zz) body .fare-table th, html:not(.zz) body .fare-table td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--sdt-edge); color: #d3efe9; }
html:not(.zz) body .fare-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
html:not(.zz) body .fare-table tr:last-child td { border-bottom: 0; }
html:not(.zz) body .fare-table a { color: #5eead4; font-weight: 700; text-decoration: none; }
html:not(.zz) body .fare-table td:last-child { color: #fde047; font-weight: 800; }

html:not(.zz) body .seo-guide__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
html:not(.zz) body .seo-guide__grid article { background: var(--sdt-card); border: 1px solid var(--sdt-edge); border-radius: 14px; padding: 1rem 1.1rem; }
html:not(.zz) body .seo-guide__grid h3 { color: #f0fdfa !important; font-size: 1.05rem; margin: 0 0 0.4rem; }
html:not(.zz) body .seo-guide__grid p { color: #cfeee7 !important; font-size: 0.92rem; line-height: 1.6; margin: 0; }
html:not(.zz) body .seo-guide__links, html:not(.zz) body .route-guide__links { margin-top: 1.1rem; color: #cfeee7; display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
html:not(.zz) body :is(.seo-guide__links, .route-guide__links) a, html:not(.zz) body .route-guide p a { color: #5eead4; font-weight: 700; }
@media (max-width: 700px) { html:not(.zz) body .seo-guide__grid { grid-template-columns: 1fr; } }

html:not(.zz) body .route-guide p { color: #cfeee7; line-height: 1.7; max-width: 56rem; }
html:not(.zz) body .route-guide__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0 0 1.1rem; }
html:not(.zz) body .route-guide__facts div { background: var(--sdt-card); border: 1px solid var(--sdt-edge); border-radius: 12px; padding: 0.75rem 0.6rem; text-align: center; }
html:not(.zz) body .route-guide__facts strong { display: block; color: #ffffff; font: 800 1.2rem/1.1 "Outfit", sans-serif; }
html:not(.zz) body .route-guide__facts span { color: #9ccfc5; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }

html:not(.zz) body .city-cloud details { border: 1px solid var(--sdt-edge); border-radius: 12px; background: var(--sdt-card); padding: 0.8rem 1rem; }
html:not(.zz) body .city-cloud summary { cursor: pointer; font-weight: 700; color: #f0fdfa; }
html:not(.zz) body .city-cloud ul { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.35rem 1rem; }
html:not(.zz) body .city-cloud a { color: #5eead4; text-decoration: none; font-size: 0.9rem; }

/* trust chips in the route hero */
html:not(.zz) body .trust-line { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 0.4rem !important; }
html:not(.zz) body .trust-line span { border-radius: 10px !important; font-size: 0.74rem !important; padding: 0.3rem 0.55rem !important; line-height: 1.2 !important; white-space: nowrap; }
html:not(.zz) body .routes-grid--collapsed > a.sb:nth-child(n+13) { display: none !important; }

/* local (offline) location suggestions: same dark look as the main dropdown, normal case, no heading shadow */
html:not(.zz) body .local-autocomplete-dropdown, html:not(.zz) body .local-autocomplete-dropdown * { text-transform: none !important; text-shadow: none !important; letter-spacing: normal !important; font-style: normal !important; }
html:not(.zz) body .local-autocomplete-dropdown { background: #062321 !important; border: 1px solid rgba(45, 212, 191, 0.4) !important; border-radius: 12px !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important; overflow: hidden; }
html:not(.zz) body .local-autocomplete-item { color: #e6fbf6 !important; background: transparent !important; border-bottom: 1px solid rgba(45, 212, 191, 0.14) !important; font-size: 0.9rem !important; font-weight: 500 !important; }
html:not(.zz) body .local-autocomplete-item:hover, html:not(.zz) body .local-autocomplete-item.active { background: rgba(45, 212, 191, 0.16) !important; }
html:not(.zz) body .local-autocomplete-city { color: #ffffff !important; font-weight: 700 !important; }
html:not(.zz) body .local-autocomplete-state { color: #8fc7bc !important; }
html:not(.zz) body .local-autocomplete-icon { color: #fb7185 !important; }
html:not(.zz) body .local-autocomplete-attribution { background: rgba(45, 212, 191, 0.08) !important; color: #9ccfc5 !important; border-top: 1px solid rgba(45, 212, 191, 0.2) !important; font-size: 0.74rem !important; line-height: 1.4 !important; justify-content: flex-start !important; padding: 8px 12px !important; }
html:not(.zz) body .local-autocomplete-attribution * { color: inherit !important; }
html:not(.zz) body .local-autocomplete-dropdown div[style], html:not(.zz) body .local-autocomplete-attribution { background: rgba(45, 212, 191, 0.08) !important; color: #9ccfc5 !important; }
html:not(.zz) body .local-autocomplete-item { flex-wrap: wrap; }
html:not(.zz) body .local-autocomplete-state { display: block; flex-basis: 100%; padding-left: 26px; margin-top: -4px; font-size: 0.78rem !important; }
html:not(.zz) body .phone-input-wrapper { position: relative !important; }
html:not(.zz) body .phone-input-wrapper .country-code-field { position: static !important; }
html:not(.zz) body .phone-input-wrapper .country-code-popover { top: calc(100% + 6px) !important; left: 0 !important; z-index: 80 !important; }
html:not(.zz) body .phone-input-wrapper { position: static !important; }
html:not(.zz) body .field-pair--contact-primary > .field { position: relative !important; }
html:not(.zz) body .field-pair--contact-primary .country-code-popover { top: calc(100% + 4px) !important; left: auto !important; right: 0 !important; }
html:not(.zz) body a.sb .sb__badge { color: #0f172a !important; }
html:not(.zz) body a.sb--route .sb__km, html:not(.zz) body a.sb--route .sb__km em { color: #facc15 !important; }


/* Header nav dropdown contrast on desktop */
.nav .nav-dropdown__btn,
.nav-dropdown__btn,
.site-header .nav-dropdown__btn {
  color: #ccfbf1 !important;
}
.nav .nav-dropdown__btn:hover,
.nav-dropdown__btn:hover,
.site-header .nav-dropdown__btn:hover {
  color: #ffffff !important;
}


/* Header nav dropdown contrast on desktop */
.nav .nav-dropdown__btn,
.nav-dropdown__btn,
.site-header .nav-dropdown__btn {
  color: #ccfbf1 !important;
}
.nav .nav-dropdown__btn:hover,
.nav-dropdown__btn:hover,
.site-header .nav-dropdown__btn:hover {
  color: #ffffff !important;
}

/* Eyebrow contrast across all themes/pages */
html body .testimonials-section p.eyebrow,
html body .testimonials-section .eyebrow,
html body p.eyebrow,
html body .eyebrow,
html:not(.dark-mode) p.eyebrow,
html:not(.dark-mode) .eyebrow {
  color: #5eead4 !important;
}


/* Header nav dropdown contrast on desktop */
.nav .nav-dropdown__btn,
.nav-dropdown__btn,
.site-header .nav-dropdown__btn {
  color: #ccfbf1 !important;
}
.nav .nav-dropdown__btn:hover,
.nav-dropdown__btn:hover,
.site-header .nav-dropdown__btn:hover {
  color: #ffffff !important;
}

/* Eyebrow contrast across all themes/pages - beat html:not(.dark-mode) .section-title-center .eyebrow */
html:not(.dark-mode) .section-title-center .eyebrow,
html:not(.dark-mode) .section-title-center p.eyebrow,
html body .section-title-center .eyebrow,
html body .section-title-center p.eyebrow,
html body .testimonials-section p.eyebrow,
html body .testimonials-section .eyebrow,
html body p.eyebrow,
html body .eyebrow,
html:not(.dark-mode) p.eyebrow,
html:not(.dark-mode) .eyebrow {
  color: #2dd4bf !important;
}


/* Header nav dropdown contrast on desktop */
.nav .nav-dropdown__btn,
.nav-dropdown__btn,
.site-header .nav-dropdown__btn {
  color: #ccfbf1 !important;
}
.nav .nav-dropdown__btn:hover,
.nav-dropdown__btn:hover,
.site-header .nav-dropdown__btn:hover {
  color: #ffffff !important;
}

/* Eyebrow contrast across all themes/pages - beat html:not(.dark-mode) .section-title-center .eyebrow */
html:not(.dark-mode) .section-title-center .eyebrow,
html:not(.dark-mode) .section-title-center p.eyebrow,
html body .section-title-center .eyebrow,
html body .section-title-center p.eyebrow,
html body .testimonials-section p.eyebrow,
html body .testimonials-section .eyebrow,
html body p.eyebrow,
html body .eyebrow,
html:not(.dark-mode) p.eyebrow,
html:not(.dark-mode) .eyebrow {
  color: #2dd4bf !important;
}

/* Page fade-in flash-dim fix (Item H: protects crawlers & eliminates CLS) */
@keyframes tct-page-in {
  from { opacity: 0.95; }
  to   { opacity: 1; }
}
main {
  opacity: 1 !important;
  animation: tct-page-in 0.12s ease-out !important;
}
@media (prefers-reduced-motion: reduce) {
  main {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* Accessibility: High contrast keyboard focus rings (Item I) */
:focus-visible {
  outline: 2px solid #2dd4bf !important;
  outline-offset: 2px !important;
}
.trip-type-options button:focus-visible,
.oneway-subtypes label:focus-visible,
.sb:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible,
a:focus-visible {
  outline: 2px solid #facc15 !important;
  outline-offset: 3px !important;
}

/* ==========================================================================
   SOUTHERN DROP TAXI - UX & CONTRAST FIXES
   ========================================================================== */

/* 1. Autocomplete Location Dropdown: High Contrast & Clean Formatting */
html:not(.zz) body .dropcars-autocomplete-dropdown {
  background: #062321 !important;
  border: 1.5px solid rgba(45, 212, 191, 0.45) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75) !important;
  padding: 6px 0 !important;
}
html:not(.zz) body .dropcars-autocomplete-item {
  color: #ffffff !important;
  border-bottom: 1px solid rgba(45, 212, 191, 0.12) !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
html:not(.zz) body .dropcars-autocomplete-item strong {
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
}
html:not(.zz) body .dropcars-autocomplete-item span {
  color: #99f6e4 !important;
  font-size: 11.5px !important;
}
html:not(.zz) body .dropcars-autocomplete-item:hover {
  background-color: rgba(45, 212, 191, 0.18) !important;
}
html:not(.zz) body .dropcars-autocomplete-item.is-gps {
  background-color: rgba(251, 113, 133, 0.12) !important;
  border-bottom: 1.5px solid rgba(251, 113, 133, 0.3) !important;
}
html:not(.zz) body .dropcars-autocomplete-item.is-gps strong {
  color: #fda4af !important;
}
html:not(.zz) body .dropcars-autocomplete-item.is-gps span {
  color: #fecdd3 !important;
}

/* 2. Hide redundant #hourly-pickup-field on all devices & viewport sizes */
#hourly-pickup-field,
.booking-form #hourly-pickup-field,
label#hourly-pickup-field {
  display: none !important;
}

/* 3. Floating Contact Buttons: Pulse, Glow & Responsive Floating Dock */
@keyframes sdtPulseRing {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
  70% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@keyframes sdtCallPulse {
  0% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.55); }
  70% { box-shadow: 0 0 0 12px rgba(45, 212, 191, 0); }
  100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); }
}
.wa-widget-container {
  bottom: 24px !important;
  right: 20px !important;
  z-index: 999999 !important;
}
.wa-btn-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: flex-end !important;
}
.wa-floating-btn {
  animation: sdtPulseRing 2.4s infinite ease-in-out !important;
  background: #25d366 !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.25s ease !important;
}
.wa-floating-btn:hover {
  transform: scale(1.1) !important;
}
.wa-call-btn {
  animation: sdtCallPulse 2.4s infinite ease-in-out 1.2s !important;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
  border: 2px solid #ffffff !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 20px rgba(13, 148, 136, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: #ffffff !important;
  transition: transform 0.25s ease !important;
}
.wa-call-btn:hover {
  transform: scale(1.1) !important;
  color: #ffffff !important;
}