/* Demo Travels "Tamil Nadu highway" layer: green signboard, yellow milestone, asphalt. Pages opt in with <html class="hw">. */
html.hw {
  --hw-green: #0F6B45;
  --hw-green-dk: #0A4F33;
  --hw-yellow: #F2C200;
  --hw-asphalt: #2B2F33;
  --hw-concrete: #F3F1EA;
  --hw-line: #D9D5C9;
  --hw-ink: #1C1F22;
  --hw-muted: #5C6166;
}

html.hw body,
html.hw button,
html.hw input,
html.hw select,
html.hw textarea {
  font-family: "Overpass", "Noto Sans Tamil", system-ui, sans-serif !important;
}
html.hw body { font-variant-numeric: tabular-nums; }

/* Sentence case: no shouting labels */
html.hw .uppercase { text-transform: none !important; }
html.hw .tracking-widest,
html.hw .tracking-wider,
html.hw .tracking-wide { letter-spacing: 0 !important; }

/* Calmer corners — road signs are rectangles, not pills */
html.hw .rounded-3xl { border-radius: 14px !important; }
html.hw .rounded-2xl { border-radius: 12px !important; }

/* ---------- Light mode (default) ---------- */
html.hw body.light-mode { background-color: var(--hw-concrete) !important; color: var(--hw-ink) !important; }

/* Signboard header: green board, white lettering, thin white rule inside the bottom edge */
html.hw body.light-mode nav,
html.hw body nav {
  background: var(--hw-green) !important;
  border-bottom: 0 !important;
  box-shadow: inset 0 -5px 0 var(--hw-green), inset 0 -6.5px 0 rgba(255,255,255,.85) !important;
  color: #fff !important;
}
html.hw body[class] nav h1,
html.hw body[class] nav .text-white,
html.hw body[class] nav .text-slate-100,
html.hw body[class] nav .text-slate-200,
html.hw body[class] nav .text-slate-300 { color: #fff !important; }
html.hw body[class] nav .text-slate-400,
html.hw body[class] nav .text-slate-500,
html.hw body[class] nav p { color: rgba(255,255,255,.78) !important; }
html.hw body[class] nav a[class*="bg-slate-8"],
html.hw body[class] nav button[class*="bg-slate-8"] {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  color: #fff !important;
  box-shadow: none !important;
}
html.hw body[class] nav a[class*="bg-slate-8"]:hover,
html.hw body[class] nav button[class*="bg-slate-8"]:hover { background: rgba(255,255,255,.1) !important; }
html.hw body[class] nav .text-amber-400,
html.hw body[class] nav .text-amber-500,
html.hw body[class] nav .text-indigo-400 { color: #fff !important; }
html.hw body[class] nav .gold-gradient {
  background: var(--hw-yellow) !important;
  color: var(--hw-asphalt) !important;
  box-shadow: none !important;
}
html.hw body[class] nav .lang-dropdown,
html.hw body[class] nav .lang-dropdown button { background: #fff !important; color: var(--hw-ink) !important; }

/* Primary actions: signboard green with the white inner rule */
html.hw .gold-gradient {
  background: var(--hw-green) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 2px var(--hw-green), inset 0 0 0 3.5px rgba(255,255,255,.8) !important;
}
html.hw .gold-gradient .text-slate-950,
html.hw .gold-gradient.text-slate-950,
html.hw .gold-gradient i { color: #fff !important; }
html.hw span.gold-gradient,
html.hw div.gold-gradient:not([onclick]) {
  background: var(--hw-yellow) !important;
  color: var(--hw-asphalt) !important;
  box-shadow: none !important;
}
html.hw span.gold-gradient i,
html.hw div.gold-gradient:not([onclick]) i { color: var(--hw-asphalt) !important; }
html.hw .gold-gradient:hover { filter: brightness(1.08); }

html.hw body.light-mode .text-amber-400,
html.hw body.light-mode .text-amber-500,
html.hw body.light-mode .text-amber-300,
html.hw body.light-mode .text-amber-600 { color: var(--hw-green) !important; }
html.hw body.light-mode .border-amber-500,
html.hw body.light-mode [class*="border-amber-500"] { border-color: var(--hw-yellow) !important; }
html.hw body.light-mode .bg-amber-500 { background-color: var(--hw-yellow) !important; color: var(--hw-asphalt) !important; }
html.hw body.light-mode [class*="bg-amber-500\/"] { background-color: #FFF6CC !important; }

html.hw body.light-mode .dark-card,
html.hw body.light-mode [class*="bg-slate-900"],
html.hw body.light-mode [class*="bg-slate-950"],
html.hw body.light-mode [class*="bg-slate-800"] {
  border-color: var(--hw-line) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04) !important;
}
html.hw body.light-mode nav [class*="bg-slate-800"] { border-color: rgba(255,255,255,.55) !important; }
html.hw body.light-mode input,
html.hw body.light-mode select,
html.hw body.light-mode textarea {
  background-color: #fff !important;
  border-color: #C9C4B6 !important;
}
html.hw input:focus,
html.hw select:focus,
html.hw textarea:focus { border-color: var(--hw-green) !important; outline: 2px solid rgba(15,107,69,.25); outline-offset: 0; }
html.hw :focus-visible { outline: 2px solid var(--hw-green); outline-offset: 2px; }

html.hw body.light-mode .text-slate-400,
html.hw body.light-mode .text-slate-500 { color: var(--hw-muted) !important; }

/* Vehicle cards: chosen one gets the milestone — white stone, yellow cap */
html.hw .vehicle-card { position: relative; overflow: hidden; }
html.hw .vehicle-card.active,
html.hw body.light-mode .vehicle-card.active {
  background: #fff !important;
  border-color: var(--hw-asphalt) !important;
  box-shadow: inset 0 6px 0 var(--hw-yellow) !important;
}
html.hw [id^="fare-"] { color: var(--hw-ink) !important; }
html.hw .vehicle-card.active [id^="fare-"] { color: var(--hw-green) !important; }

html.hw body.light-mode footer { background-color: #E9E6DC !important; border-top: 4px solid var(--hw-green) !important; }

/* One floating button: WhatsApp. Install-app and call badges and the spinning ring text are hidden. */
html.hw #float-circ-app-item,
html.hw #float-circ-call-item,
html.hw #pwa-install-btn-stack,
html.hw #float-call-btn-stack,
html.hw #circular-float-widget svg { display: none !important; }
html.hw #float-circ-wa-item { width: 52px; height: 52px; }
html.hw #float-wa-btn,
html.hw #float-wa-btn-stack {
  position: static !important;
  width: 52px !important;
  height: 52px !important;
  background: var(--hw-green) !important;
  box-shadow: inset 0 0 0 2px var(--hw-green), inset 0 0 0 3.5px rgba(255,255,255,.85), 0 6px 16px rgba(0,0,0,.18) !important;
  border: 0 !important;
}
html.hw #float-wa-btn:hover,
html.hw #float-wa-btn-stack:hover { transform: none !important; filter: brightness(1.08); }
html.hw .animate-pulse { animation: none !important; }

/* Placeholder drawn when a vehicle photo fails to load */
html.hw img.hw-vehicle-fallback { object-fit: contain !important; background: transparent !important; }

/* ---------- Dark mode (user choice) ---------- */
html.hw body:not(.light-mode) { background-color: #16191B !important; }
html.hw body:not(.light-mode) .text-amber-400,
html.hw body:not(.light-mode) .text-amber-500 { color: var(--hw-yellow) !important; }

@media (prefers-reduced-motion: reduce) {
  html.hw *, html.hw *::before, html.hw *::after { animation: none !important; transition: none !important; }
}