/* Niklo styles — mobile-first, app-like dark theme matching the Niklo logo
   (near-black + blue/teal/purple gradient). Roman Urdu UI. Comments in English. */
:root {
  --bg: #060a13;          /* page background — matches logo backdrop */
  --card: #101828;        /* cards / sheets */
  --card2: #0b1220;       /* inputs, recessed areas */
  --line: #1e2a44;        /* borders */
  --ink: #f2f6fc;         /* main text */
  --muted: #93a1b8;       /* secondary text */
  --blue: #2f7bff;
  --teal: #22d3ee;
  --purple: #a855f7;
  --green: #22c55e;
  --green-soft: #34d399;
  --danger: #f87171;
  --grad: linear-gradient(135deg, #2f7bff 0%, #22d3ee 65%, #34d399 110%);
  --radius: 16px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--ink);
  min-height: 100vh; touch-action: pan-y;
  -webkit-font-smoothing: antialiased;
}

/* Boot overlay */
.boot { position: fixed; inset: 0; background: var(--bg); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; z-index: 1000; transition: opacity .3s; }
.boot.hide { opacity: 0; pointer-events: none; }
.boot-logo { width: 128px; height: 128px; border-radius: 28px;
  box-shadow: 0 8px 40px rgba(47,123,255,.35); }
.boot-name { font-size: 48px; font-weight: 800; letter-spacing: 2px;
  background: linear-gradient(135deg, #2f7bff 0%, #6366f1 55%, #a855f7 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.boot-tag { opacity: .75; color: var(--muted); }
.boot-bar { width: 160px; height: 6px; background: #1a2440; border-radius: 3px; overflow: hidden; }
/* v307: Loading branding footer — neeche center mein */
.boot-brand { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.boot-made { font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #e5e7eb; }
.boot-powered { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9ca3af; }
.boot-powered img { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; }
/* v308: Sponsored banner — home screens par, version ke neeche */
.sponsor-banner { display: flex; align-items: center; justify-content: center; gap: 10px; background: #141c2e; border: 1px solid #2a3a55; border-radius: 12px; padding: 8px 12px; margin: 8px 12px; color: #fff; text-decoration: none; }
.sponsor-banner img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.sponsor-banner span { display: flex; flex-direction: column; line-height: 1.3; }
.sponsor-banner b { font-size: 13px; }
.sponsor-banner small { font-size: 11px; color: #4da3ff; }
/* v339: Install app strip — white strip, Powered By banner ke upar */
.install-strip { display: flex; align-items: center; gap: 10px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 8px 12px; margin: 8px 12px; color: #0a0f1c; }
.install-strip img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.install-strip span { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.install-strip b { font-size: 14px; }
.install-strip small { font-size: 11px; color: #475569; }
.install-strip button { background: linear-gradient(135deg,#2563eb,#1e40af); color: #fff; border: none; border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: bold; cursor: pointer; flex-shrink: 0; white-space: nowrap; }
/* v312: Boot vehicles row — bara size + wazeh shaklein */
.boot-vehicles { display: flex; gap: 30px; margin-top: 14px; }
.boot-vehicles span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.boot-vehicles svg { width: 56px; height: 56px; }
.boot-vehicles small { font-size: 13px; font-weight: 700; letter-spacing: .5px; color: #fff; }
.boot-bar i { display: block; height: 100%; width: 40%; background: var(--grad); border-radius: 3px;
  animation: slide 1s infinite linear; }
@keyframes slide { from { transform: translateX(-100%);} to { transform: translateX(400%);} }

/* Top bar — app-like */
/* v397d: Topbar ki layer 90 — mascot (60) aur guide-card (70) se upar (taake
   ⋮ menu dropdown un ke upar rahe), lekin scr-ride chat overlay (100) se
   NEECHE: chat khulne par topbar chat ke peeche chhup jaye aur chat full
   screen ho (sirf chat ka apna header — Back + Online — nazar aaye).
   200 rakhne se topbar chat ke header ko dhak raha tha (regression). */
.topbar { position: sticky; top: 0; z-index: 90; background: rgba(6,10,19,.96); color: #fff;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  padding-top: max(10px, env(safe-area-inset-top)); }
.brand { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 9px; flex-shrink: 1; min-width: 0; }
.brand-logo { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; }
.brand .brand-name { background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; white-space: nowrap; }
/* v397: Tagline naam ke NEECHE (side par nahi) — side par likhne se brand
   itna chaura ho gaya tha ke Admin/SOS/menu daayein kinare se bahar dhakel
   diye gaye thay aur phone par nazar hi nahi aate thay. Neeche likhne se
   brand tang rehta hai aur saare buttons dikhte hain. */
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-tag { font-size: 10px; font-weight: 600; letter-spacing: .2px; color: #94a3b8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v254: Version chip Niklo se side par — brand kabhi dabey nahi, Niklo poora nazar aaye */
#appVer { margin-left: 14px; flex-shrink: 0; }
.top-actions { display: flex; gap: 8px; align-items: center; }
.tbtn { background: #16203a; color: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; font-size: 14px; min-height: 40px; }
.user-chip { font-size: 13px; background: #16203a; border: 1px solid var(--line);
  color: var(--teal); padding: 6px 10px; border-radius: 20px; font-weight: 700; }

/* Screens */
.screen { padding-bottom: max(40px, env(safe-area-inset-bottom)); min-height:100vh; display:flex; flex-direction:column; }
.screen[hidden] { display:none !important; }
.screen .wrap.narrow { flex:1; display:flex; flex-direction:column; }
#scr-bot { padding-bottom: 0 !important; }
#scr-bot { display:flex; flex-direction:column; min-height:100dvh; }
#scr-bot .wrap.narrow { flex:1; display:flex; flex-direction:column; padding:0 12px; width:100%; max-width:480px; margin:0 auto; }
#scr-chat { padding-bottom: 0 !important; display:flex; flex-direction:column; min-height:100dvh; }
#scr-chat .wrap.narrow { flex:1; display:flex; flex-direction:column; padding:0 12px; width:100%; max-width:480px; margin:0 auto; border-left:1px solid #1a2332; border-right:1px solid #1a2332; }
#scr-chat .bot-header { flex-shrink:0; display:flex !important; background:#0a0f1c; padding:10px 0; align-items:center; gap:10px; border-bottom:1px solid #223; }
#scr-chat .bot-msgs { flex:1; min-height:200px; margin:8px 0; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; }
#scr-chat .chat-inputrow { flex-shrink:0; display:flex !important; visibility:visible !important; opacity:1 !important; padding:8px 4px; background:#0a0f1c; border-top:1px solid #223; }
#scr-bot .bot-header { flex-shrink:0; display:flex !important; background:#0a0f1c; padding:10px 0; align-items:center; gap:10px; }
#scr-bot .bot-msgs { flex:1; min-height:200px; margin:8px 0; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; }
#scr-bot .chat-inputrow { flex-shrink:0; display:flex !important; visibility:visible !important; opacity:1 !important; padding:8px 4px; background:#0a0f1c; border-top:1px solid #223; }
.wrap { max-width: 640px; margin: 0 auto; padding: 16px; }
.wrap.narrow { max-width: 480px; }
.wrap.wide { max-width: 960px; }
.center { text-align: center; }
h1 { font-size: 24px; margin: 8px 0 12px; }
h2 { font-size: 18px; margin: 22px 0 10px; }
.muted { color: var(--muted); }
.err { color: var(--danger); font-weight: 600; }
.hint { color: var(--muted); font-size: 13px; }

/* Role select cards — big tappable, owner's explicit requirement.
   v466 (br) ISSUE G: BEAUTIFUL BLUE style — Continue button wala blue
   gradient (var(--grad)) card par hi; card tap hi login hai, alag
   Continue button nahi. */
.role-h { font-size: 22px; text-align: center; margin-top: 26px; }
.role-sub { text-align: center; color: var(--muted); }
/* Role select — avatar icons with clear selected state */
.role-pick { display: flex; gap: 20px; margin-top: 24px; }
.role-opt { flex: 1; background: var(--grad); border: 2px solid rgba(255,255,255,.25); border-radius: 20px;
  padding: 26px 10px 22px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #fff; position: relative; min-height: 200px; justify-content: center;
  box-shadow: 0 6px 20px rgba(47,123,255,.30); overflow: hidden; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
/* v467 (bs) ISSUE 1: card kabhi WHITE nahi hota — :active/:focus/.on mein
   bhi blue gradient hi rehta hai (light mode wala white override hataya). */
.role-opt:active, .role-opt:focus, .role-opt.on { background: var(--grad); }
/* v467 (bs) ISSUE 3: press par bubble/ripple — halka safed glow jo
   card ke andar se phailta hai, card NEELA hi rehta hai (white nahi). */
.role-opt::before { content: ""; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1;
  transform: translate(-50%,-50%) scale(0); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.38) 0%, rgba(255,255,255,.14) 45%, rgba(255,255,255,0) 70%);
  opacity: 0; pointer-events: none; transition: transform .38s ease, opacity .38s ease; }
.role-opt:active::before { transform: translate(-50%,-50%) scale(1); opacity: 1; }
.role-opt:active { transform: scale(.96); filter: brightness(.92); }
/* Ripple ke upar text saaf dikhe. */
.role-opt > * { position: relative; z-index: 1; }
.role-av { font-size: 34px; width: 78px; height: 78px; border-radius: 50%;
  background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; }
.role-opt.on { border: 2px solid #fff;
  box-shadow: 0 0 24px rgba(47,123,255,.55); }
.role-opt.on .role-av { background: rgba(255,255,255,.28); }
.role-opt.on::after { content: "✓"; position: absolute; top: 10px; right: 12px;
  width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #2f7bff;
  font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.role-t { font-size: 20px; font-weight: 800; }
.role-d { color: rgba(255,255,255,.85); font-size: 13px; }

/* Buttons & inputs */
.primary { display: block; width: 100%; background: var(--grad); color: #fff; border: 0;
  border-radius: var(--radius); padding: 16px; font-size: 18px; font-weight: 700;
  min-height: 56px; margin-top: 14px;
  box-shadow: 0 6px 20px rgba(47,123,255,.30); }
.primary:active { transform: scale(.99); }
.primary:disabled { background: #2a3550; box-shadow: none; color: #7b8aa5; }
.primary.off { background: #2a3550; box-shadow: none; color: #7b8aa5; }
.danger { display: block; width: 100%; background: transparent; color: var(--danger);
  border: 2px solid var(--danger); border-radius: var(--radius); padding: 14px;
  font-size: 16px; font-weight: 700; min-height: 52px; margin-top: 14px; }
/* External Google Maps button (anchor styled as a button). */
.extbtn { display: block; width: 100%; box-sizing: border-box; text-align: center;
  background: #0d1830; color: var(--teal); border: 2px solid var(--teal);
  border-radius: var(--radius); padding: 13px; font-size: 16px; font-weight: 700;
  min-height: 52px; margin-top: 12px; text-decoration: none; }
.extbtn[hidden] { display: none; }
.linkbtn { background: none; border: 0; color: var(--teal); font-size: 15px;
  padding: 12px; margin-top: 8px; }
.gbtn { display: inline-flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid #dadce0; border-radius: 12px; padding: 14px 22px;
  font-size: 17px; font-weight: 600; min-height: 56px; margin-top: 14px; color: #1f2937; }
.glogo { display: inline-flex; align-items: center; justify-content: center; }
.glogo svg { display: block; }
.big-ico { font-size: 64px; margin-top: 30px; }

.fld { display: block; margin: 14px 0; }
.fld > span:first-child, .flabel { display: block; font-weight: 700; margin-bottom: 6px; font-size: 15px; }
.fld input, .fld select { width: 100%; border: 2px solid var(--line); border-radius: 12px;
  padding: 14px; font-size: 16px; background: var(--card2); color: var(--ink); min-height: 54px;
  transition: border-color .15s ease, box-shadow .15s ease; }
.fld input::placeholder { color: #5b6b8c; }
.fld select option { background: var(--card2); }
.fld input:focus, .fld select:focus { outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
.fld.inline { display: flex; align-items: center; gap: 10px; }
/* Professional joined phone input: +92 box attached to the number field */
.phone-row { display: flex; gap: 0; align-items: stretch; }
.phone-row .cc { background: #16203a; border: 2px solid var(--line); border-right: none;
  border-radius: 12px 0 0 12px; padding: 0 14px; display: flex; align-items: center;
  font-weight: 800; font-size: 16px; white-space: nowrap; color: var(--teal); }
.phone-row input { flex: 1; border-radius: 12px; }
.phone-row input:focus { box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
/* Number-plate photo preview + optional tag */
.plate-prev { display: block; max-width: 100%; border-radius: 12px; margin-top: 10px;
  border: 2px solid var(--line); }
.fld .opt { color: var(--muted); font-weight: 400; font-size: 13px; }
/* City rule note (e.g. no rickshaw in Islamabad) + location-required note */
.city-note { background: rgba(255,180,0,.1); border: 1px solid rgba(255,180,0,.35);
  color: #ffd166; border-radius: 12px; padding: 10px 12px; font-size: 13px; margin: 10px 0 0; }
.loc-note { background: rgba(255,90,90,.08); border: 1px solid rgba(255,90,90,.4);
  color: #ff9d9d; border-radius: 12px; padding: 12px; font-size: 14px; margin: 12px 0; }
.loc-note .linkbtn { margin-top: 6px; }
/* Current point address line */
.pt-addr { background: var(--card2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: 14px; margin-bottom: 8px; }
/* Place search (Nominatim, free) */
.search-inp { width: 100%; border: 2px solid var(--line); border-radius: 12px;
  padding: 13px 14px; font-size: 16px; background: var(--card2); color: var(--ink); }
.search-inp:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
.search-results { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.search-results:empty { display: none; }
.sr-item { background: var(--card2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: 14px; text-align: left; color: var(--ink); }
.sr-item:active { border-color: var(--teal); }
.sr-item small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
/* ===== Mascot guide (uncle) ===== */
.mascot { position: fixed; right: 10px; top: 24%; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; }
.mascot[hidden] { display: none; }
.mascot-body { position: relative; width: 78px; height: 78px; cursor: pointer;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.mascot-body:active { transform: scale(.94); }
.m-face { width: 66px; height: 66px; border-radius: 50%; background: #f0c08a;
  border: 3px solid #fff; position: absolute; left: 4px; top: 6px; overflow: hidden; }
.m-cap { position: absolute; top: -2px; left: 6px; right: 6px; height: 22px;
  background: linear-gradient(135deg, #0d9488, #2f7bff); border-radius: 4px 4px 30px 30px; }
.m-eye { position: absolute; top: 28px; width: 8px; height: 11px; background: #232323; border-radius: 50%; }
.m-eye.left { left: 19px; }
.m-eye.right { right: 19px; }
.m-smile { position: absolute; bottom: 12px; left: 21px; right: 21px; height: 13px;
  border-bottom: 4px solid #7c4a21; border-radius: 0 0 30px 30px; }
.m-hand { position: absolute; right: 0; top: 0; font-size: 30px;
  animation: wave 1.4s ease-in-out infinite; transform-origin: bottom center; }
@keyframes wave { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(22deg); } 75% { transform: rotate(-16deg); } }
.mascot-bubble { background: #fff; color: #14202e; border-radius: 14px; padding: 8px 12px;
  font-size: 13px; line-height: 1.35; max-width: 172px; margin-bottom: 8px; text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.4); position: relative; }
.mascot-bubble:after { content: ""; position: absolute; bottom: -8px; right: 28px;
  border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; }
/* Guide bottom-sheet */
.guide-card { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 16px 16px; box-shadow: 0 10px 34px rgba(0,0,0,.55);
  max-height: 62vh; overflow-y: auto; }
.guide-card[hidden] { display: none; }
.g-close { position: absolute; top: 8px; right: 10px; background: var(--card2);
  border: 1px solid var(--line); color: var(--ink); border-radius: 50%;
  width: 32px; height: 32px; font-size: 15px; }
.guide-card h3 { margin: 0 0 8px; font-size: 18px; }
.guide-card p { margin: 6px 0; font-size: 15px; }
.g-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.micbtn { width: 78px; height: 78px; border-radius: 50%; font-size: 36px; border: none;
  background: var(--grad); margin: 10px auto; display: block; color: #fff; }
.micbtn.listening { animation: micpulse 1s ease-in-out infinite; }
@keyframes micpulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(47,123,255,.5); }
  50% { transform: scale(1.1); box-shadow: 0 0 0 14px rgba(47,123,255,0); } }
.g-heard { background: var(--card2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; min-height: 44px; font-size: 14px; }
/* Moving vehicle on route preview */
.vmove { font-size: 34px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
/* Numbered map pins (Google-Maps style) */
.mpin { width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-size: 14px; font-weight: 800; border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.mpin span { transform: rotate(45deg); }
/* Stop rows */
.stop-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.stop-row .grow { flex: 1; }
.stop-n { width: 30px; height: 30px; border-radius: 50%; background: #f59e0b; color: #fff;
  font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 8px; }
/* Pickup mode toggle (current location vs map pick) */
.pick-toggle { display: flex; gap: 8px; }
.ptab { flex: 1; background: var(--card2); border: 2px solid var(--line); border-radius: 12px;
  padding: 11px 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.ptab:active { transform: scale(.97); }
.ptab.on { border: 2px solid transparent;
  background: linear-gradient(#0d1830, #0d1830) padding-box, var(--grad) border-box;
  color: var(--teal); box-shadow: 0 0 14px rgba(47,123,255,.3); }
/* Driver approval notice (driver panel) */
.appr-note { background: rgba(255,180,0,.1); border: 1px solid rgba(255,180,0,.4);
  color: #ffd166; border-radius: 14px; padding: 14px; font-size: 15px; margin: 12px 0; line-height: 1.6; }

/* Segmented selector — beautiful vehicle tabs with clear selected state */
.seg { display: flex; gap: 10px; }
.seg-btn { flex: 1; background: var(--card2); border: 2px solid var(--line); border-radius: 16px;
  padding: 14px 6px 12px; min-height: 88px; color: var(--ink); position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.seg-btn:active { transform: scale(.97); }
.seg-btn .vico { font-size: 30px; line-height: 1; width: 58px; height: 58px; border-radius: 18px;
  background: rgba(148,163,184,.12); display: flex; align-items: center; justify-content: center; }
.seg-btn small { font-size: 13px; color: var(--muted); font-weight: 700; }
.seg-btn.on .vico { background: var(--grad); }
.seg-btn.on small { color: var(--teal); }
.seg-btn.on { border: 2px solid transparent;
  background: linear-gradient(#0d1830, #0d1830) padding-box, var(--grad) border-box;
  box-shadow: 0 0 20px rgba(47,123,255,.35); }
.seg-btn.on small { color: var(--teal); }
.seg-btn.on::after { content: "✓"; position: absolute; top: 6px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--grad); color: #fff;
  font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* Map + booking sheet */
.map { height: 44vh; min-height: 280px; width: 100%; background: #0b1220; z-index: 1; }
/* Map load fail → retry UI */
.map-fail { height: 100%; min-height: 280px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center;
  background: var(--card); padding: 24px; }
.map-fail p { font-size: 16px; margin: 0; }
.map-fail small { color: var(--muted); font-size: 13px; }
.map-fail .primary { max-width: 300px; }
.map.small { height: 30vh; min-height: 200px; border-radius: var(--radius); }
.sheet { background: var(--card); border-radius: 20px 20px 0 0; margin-top: -18px;
  position: relative; z-index: 2; padding: 8px 16px 30px;
  box-shadow: 0 -4px 24px rgba(0,0,0,.45); border-top: 1px solid var(--line); }
.sheet::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px;
  background: #2a3a5e; margin: 6px auto 10px; }
.farebox { background: var(--card2); border: 2px dashed var(--teal); border-radius: var(--radius);
  padding: 14px; margin: 12px 0; text-align: center; }
.fare-amt { font-size: 34px; font-weight: 800;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.fare-meta { color: var(--muted); margin-top: 4px; }
.fare-note { color: var(--green-soft); font-weight: 700; font-size: 13px; margin-top: 8px; }

/* Cards, stats, tables */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin: 12px 0; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.status-pill { display: inline-block; background: #3a2c12; color: #fcd34d; font-weight: 700;
  padding: 10px 18px; border-radius: 30px; margin: 6px 0 4px; font-size: 16px; }
.status-pill.ok { background: #0d2b1d; color: #4ade80; }
.status-pill.warn { background: #3a2c12; color: #fcd34d; }
.status-pill.bad { background: #3a1414; color: #f87171; }
/* Subscription screen */
.trackid { font-size: 30px; font-weight: 800; letter-spacing: 3px; text-align: center;
  background: var(--card2); border: 2px dashed var(--teal); border-radius: var(--radius);
  padding: 14px; margin-top: 8px; color: var(--teal); }
.acct { display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin: 8px 0; }
.acct b { flex: 0 0 auto; }
.acct-num { flex: 1; font-weight: 700; font-size: 17px; letter-spacing: 1px; }
.copybtn { background: var(--grad); color: #fff; border: 0; border-radius: 10px;
  padding: 8px 12px; font-weight: 700; min-height: 40px; }
.okbtn { background: var(--green); color: #fff; border: 0; border-radius: 10px;
  padding: 8px 12px; font-weight: 700; min-height: 40px; }
.noobtn { background: var(--danger); color: #fff; border: 0; border-radius: 10px;
  padding: 8px 12px; font-weight: 700; min-height: 40px; }
.walink { color: var(--green-soft); font-weight: 700; }
.stat-row { display: flex; gap: 10px; margin: 14px 0; }
.stat { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 6px; text-align: center; }
.stat-v { display: block; font-size: 19px; font-weight: 800; }
.stat-l { font-size: 12px; color: var(--muted); }
.pill { background: var(--grad); color: #fff; border-radius: 20px; padding: 2px 10px; font-size: 13px; }

.req { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin: 10px 0; border-left: 6px solid var(--teal); }
.req .r-route { font-weight: 700; font-size: 16px; }
.req .r-meta { color: var(--muted); font-size: 14px; margin: 4px 0; }
.req .r-fare { font-size: 22px; font-weight: 800; color: var(--teal); }
.req button { margin-top: 10px; }

.stars { font-size: 40px; letter-spacing: 6px; margin: 8px 0; }
.stars span { cursor: pointer; filter: grayscale(1); opacity: .5; }
.stars span.lit { filter: none; opacity: 1; }

.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.tbl th { background: var(--card2); color: var(--muted); }
.tbl input { width: 70px; padding: 8px; font-size: 15px; background: var(--card2);
  border: 2px solid var(--line); border-radius: 8px; color: var(--ink); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #16203a; color: #fff; border: 1px solid var(--line);
  padding: 14px 20px; border-radius: 12px; z-index: 2000;
  max-width: 90vw; font-size: 15px; box-shadow: 0 4px 16px rgba(0,0,0,.5); }

@media (min-width: 700px) {
  .role-opt { min-height: 230px; }
}

/* Install app popup (bottom sheet, ek dafa) */
.install-pop { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 16px; z-index: 1500; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.install-pop[hidden] { display: none; }
.install-x { position: absolute; top: 6px; right: 8px; background: none; border: 0;
  color: var(--muted); font-size: 18px; padding: 10px; min-width: 44px; min-height: 44px; }
.install-logo { width: 56px; height: 56px; border-radius: 14px; float: left; margin: 0 12px 6px 0; }
.install-txt b { display: block; font-size: 17px; margin-bottom: 4px; }
.install-txt span { color: var(--muted); font-size: 13px; }
/* Google-embed map (key-less): iframe + overlay pins/route */
.gmap { position: relative; overflow: hidden; }
.gmap-stage { position: absolute; inset: 0; pointer-events: none; }
.gmap-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.gmap-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gmap-pins { position: absolute; inset: 0; pointer-events: none; }
.gmap-pinwrap { position: absolute; width: 30px; height: 30px; margin-left: -15px; margin-top: -30px; pointer-events: auto; cursor: pointer; }
.gmap-tap { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }
.gmap-zoom { position: absolute; right: 10px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; z-index: 5; }
.gmap-zoom button { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(10,16,28,.85); color: #fff; font-size: 22px; font-weight: 800; line-height: 1; }
.gmap-zoom button:active { background: rgba(13,148,136,.9); }
.gmap-pop { position: absolute; z-index: 6; background: #0f172a; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 10px 12px; color: #fff; text-align: center; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.gmap-pop button { margin-top: 8px; background: #ef4444; color: #fff; border: none; border-radius: 8px; padding: 9px 16px; font-weight: 700; font-size: 14px; }

/* Live tracking compass */
.track-flex{display:flex;gap:14px;align-items:center}
.compass{position:relative;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#16233d,#0a0f1c);border:2px solid #2a3a55;flex:none}
.cdir{position:absolute;font-size:11px;font-weight:800;color:#7ea2d6}
.cdir.n{top:4px;left:50%;transform:translateX(-50%)}
.cdir.s{bottom:4px;left:50%;transform:translateX(-50%)}
.cdir.e{right:6px;top:50%;transform:translateY(-50%)}
.cdir.w{left:6px;top:50%;transform:translateY(-50%)}
#needle{position:absolute;left:50%;top:50%;width:0;height:0;transform-origin:0 0;transition:transform .6s ease}
#needle::before{content:"➤";position:absolute;left:-9px;top:-42px;font-size:22px;color:#ef4444;transform:rotate(-90deg)}
.cdot{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#2f7bff;transform:translate(-50%,-50%);box-shadow:0 0 8px #2f7bff}
.track-dist{font-size:20px;font-weight:800}

/* Taxi stand + chat */
.map.tall{height:52vh;min-height:340px;border-radius:14px;border:1px solid #223;overflow:hidden}
.chat-msgs{display:flex;flex-direction:column;gap:8px;min-height:55vh;max-height:calc(100vh - 320px);overflow-y:auto;padding:10px;background:#0a0f1c;border:1px solid #223;border-radius:12px;margin:10px 0;flex:1}
.cmsg{max-width:80%;padding:8px 12px;border-radius:14px;font-size:14px;line-height:1.4}
.cmsg.me{align-self:flex-end;background:#0d9488;color:#fff;border-bottom-right-radius:4px}
.cmsg.them{align-self:flex-start;background:#1a2438;color:#e8eef7;border-bottom-left-radius:4px}
.cmsg .cts{display:block;font-size:10px;opacity:.6;margin-top:4px}
/* WhatsApp-style bot chat messages */
.msg{max-width:82%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;margin-bottom:6px;word-wrap:break-word;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.msg.me{align-self:flex-end;background:#005c4b;color:#fff;border-bottom-right-radius:4px}
.msg.them{align-self:flex-start;background:#1f2c34;color:#e9edef;border-bottom-left-radius:4px}
.msg.sys{align-self:center;background:#182229;color:#ffd279;border-radius:12px;max-width:92%;text-align:center;font-size:13px;border:1px solid #2a3942}
.msg a{color:#53bdeb;text-decoration:underline}
.msg audio{margin-top:6px;border-radius:8px}
/* Quote action buttons (grey WhatsApp-style) */
.quote-actions{display:flex;gap:10px;justify-content:center;margin:8px 0 12px;align-self:center;max-width:94%}
.quote-actions button{flex:1;background:linear-gradient(135deg,#1a2438,#243447);color:#e9edef;border:1px solid #3a4a5f;border-radius:14px;padding:14px 10px;font-size:15px;cursor:pointer;font-weight:700;box-shadow:0 3px 10px rgba(0,0,0,.3);transition:all .2s}
.quote-actions button:active{transform:scale(.96)}
.quote-actions button[data-c='yes']{background:linear-gradient(135deg,#005c4b,#008069);border-color:#00a884;color:#fff}
.quote-actions button[data-c='no']{background:linear-gradient(135deg,#3d2b2b,#5a2a2a);border-color:#ff6b6b;color:#fff}
.quote-actions button[data-b='book']{background:linear-gradient(135deg,#005c4b,#00a884);border-color:#00a884;color:#fff;font-size:16px;padding:16px 10px}
.quote-actions button[data-b='reject']{background:linear-gradient(135deg,#2a2a2a,#3d3d3d);border-color:#5a5a5a;color:#e9edef}
.quote-actions button[data-v]{background:linear-gradient(135deg,#1a2438,#243447);border:1px solid #3a4a5f}
.quote-actions button[data-act='accept']{background:#005c4b;border-color:#00695c}
.quote-actions button[data-act='reject']{background:#3d2b2b;border-color:#5a3a3a}
/* Professional icon buttons (SVG, WhatsApp-style) */
.iconbtn{background:#1f2c34;border:none;color:#8696a0;border-radius:50%;width:46px;height:46px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .2s;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.iconbtn:active{transform:scale(.92)}
.iconbtn svg{width:24px;height:24px}
.loc-btn{color:#00a884;background:#1f2c34}
.loc-btn.loading{animation:spin 1s linear infinite;color:#00a884}
.voice-btn{color:#8696a0}
.voice-btn.recording{background:#ff3b30;color:#fff;animation:pulse 1.5s infinite}
.chat-inputrow .primary{background:#00a884;border:none;color:#fff;box-shadow:0 2px 8px rgba(0,168,132,.4);border-radius:50%}
.chat-inputrow .primary:active{transform:scale(.92)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.stand-dcard b{font-size:16px}

/* AI chatbot */
.bot-header{display:flex;gap:12px;align-items:center;padding:12px;background:#0f1626;border:1px solid #223;border-radius:14px;margin-bottom:10px}
/* Ride chat back button — WhatsApp style: sirf teer (←) ek gol dairay mein.
   Dairay ki background dono themes mein numayan rahe: dark header par
   halki (safed), light header par gehri (kaali) — teer hamesha dikhe. */
#btnRideBack{flex-shrink:0;width:40px;height:40px;border:none;background:transparent;color:#fff;font-size:26px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
#btnRideBack:active{transform:scale(.92);}
html.light #btnRideBack{color:#111b21;}
.bot-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#2f7bff,#0d9488);display:flex;align-items:center;justify-content:center;font-size:26px;flex:none}
.bot-msgs{min-height:40vh;display:flex;flex-direction:column;gap:4px;padding:12px;background:#0b141a;border-radius:12px;overflow-y:auto;max-height:55vh}
.bmsg{max-width:85%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;margin-bottom:4px;word-wrap:break-word}
.bmsg.bot{align-self:flex-start;background:#1a2438;color:#e8eef7;border-bottom-left-radius:4px;margin-right:auto}
.bmsg.user{align-self:flex-end;background:#0d9488;color:#fff;border-bottom-right-radius:4px;margin-left:auto}
.bmsg.me{align-self:flex-end;background:#005c4b;color:#fff;border-bottom-right-radius:4px;margin-left:auto;max-width:80%;padding:10px 14px;border-radius:12px;margin-bottom:8px;position:relative;word-wrap:break-word}
.bmsg .typing{display:inline-block}
.bmsg .typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7ea2d6;margin:0 2px;animation:tblink 1.2s infinite}
.bmsg .typing span:nth-child(2){animation-delay:.2s}
.bmsg .typing span:nth-child(3){animation-delay:.4s}
/* Chat input row — WhatsApp style */
.chat-inputrow{display:flex;gap:8px;align-items:center;padding:8px;background:#0a0f1c;border-top:1px solid #223;width:100%;box-sizing:border-box}
.chat-inputrow input{flex:1 1 auto;min-width:0;width:auto;max-width:100%;height:56px;min-height:56px;padding:0 20px;border-radius:28px;border:none;background:#ffffff;color:#111;font-size:16px;outline:none;box-sizing:border-box;box-shadow:0 1px 3px rgba(0,0,0,.2);margin:0}
.chat-inputrow input::placeholder{color:#8696a0}
.chat-inputrow input:focus{box-shadow:0 1px 5px rgba(0,0,0,.3)}
.chat-inputrow .iconbtn{flex:0 0 auto;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.chat-inputrow .primary{flex:0 0 auto;width:56px;height:56px;min-width:56px;min-height:56px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#00a884,#008069);border:none;color:#fff;box-shadow:0 3px 12px rgba(0,168,132,.5);border-radius:50%;padding:0;margin:0}
.chat-inputrow .primary svg{width:26px;height:26px;flex-shrink:0}
.chat-inputrow .primary:active{transform:scale(.92)}
/* Mobile: ensure input doesn't collapse */
@media (max-width:600px){
  .chat-inputrow{gap:8px;padding:10px 8px}
  .chat-inputrow input{height:52px;padding:0 18px;font-size:15px}
  .chat-inputrow .iconbtn,.chat-inputrow .primary{width:52px;height:52px}
}
@keyframes tblink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.drv-card{background:#0f1626;border:1px solid #2a3a55;border-radius:12px;padding:10px;margin:8px 0}
.drv-card .dc-head{display:flex;justify-content:space-between;align-items:center}
.drv-card .dc-fare{font-size:18px;font-weight:800;color:#22c55e}

/* Voice messages */
.voicebtn{background:#1a2438;border:1px solid #2a3a55;border-radius:10px;font-size:20px;padding:8px 12px;cursor:pointer;flex:none}
.voicebtn.rec{background:#ef4444;border-color:#ef4444;animation:vpulse 1s infinite}
@keyframes vpulse{0%,100%{opacity:1}50%{opacity:.6}}
.voicemsg{display:flex;align-items:center;gap:8px}
/* Ride chat voice message — WhatsApp style: DP (vehicle) + play + waveform + duration. */
.ride-voicemsg{display:flex;align-items:center;gap:10px;min-width:210px;max-width:100%;}
.ride-vdp{flex:none;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;font-size:20px;}
.bmsg.user .ride-vdp{background:rgba(255,255,255,.22);}
.ride-vplay{flex:none;width:36px;height:36px;border-radius:50%;border:none;background:#00a884;color:#fff;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.ride-vplay:active{transform:scale(.92);}
.ride-vwave{flex:1;display:flex;align-items:center;gap:2px;height:32px;min-width:90px;}
.ride-vbar{flex:1;background:#8696a0;opacity:.55;border-radius:2px;min-height:4px;}
.bmsg.user .ride-vbar{background:#dcf8c6;opacity:.75;}
.ride-vbar.on{background:#00a884;opacity:1;}
.bmsg.user .ride-vbar.on{background:#fff;opacity:1;}
.ride-vdur{flex:none;font-size:12px;opacity:.75;min-width:32px;text-align:right;}
.voicemsg .vplay{background:#0d9488;border:0;border-radius:50%;width:36px;height:36px;font-size:16px;cursor:pointer;color:#fff;flex:none}
.voicemsg .vdur{font-size:12px;opacity:.7}

/* 3-dots menu */
.menu-wrap{position:relative}
.menu-btn{font-size:20px;font-weight:900;padding:6px 12px;letter-spacing:2px}
/* v397b: Menu chaura rakho — 120px par "Dark mode" / "Roman Urdu" do line mein
   toot jaate thay; aur item kabhi wrap na ho. */
/* v434: Menu panel — normal flow (topbar ke neeche, poori chauraai).
   Dropdown overlay (absolute, phir fixed) phone WebView mein baar baar
   kat jata tha — sirf pehla item ("Dark mode") nazar aata tha, baaki
   ghayab. Flow mein koi positioning/overflow nahi, is liye kaatna
   namumkin hai. Koi display nahi likha (div block hota hai; [hidden]
   use chhupata hai). */
.menu-drop{background:#1a2438;border-bottom:1px solid #3a4a5f;box-shadow:0 4px 16px rgba(0,0,0,.35);}
.menu-item{display:block;width:100%;padding:12px 16px;background:none;border:none;color:#e9edef;font-size:14px;text-align:left;cursor:pointer;white-space:nowrap}
.menu-item:active{background:#243447}

/* FIX: Horizontal shake/move band — poori app mobile mein fit */
html, body { overflow-x: hidden; max-width: 100vw; }
.screen { overflow-x: hidden; max-width: 100vw; }
.wrap { max-width: 100vw; overflow-x: hidden; box-sizing: border-box; }
.chat-msgs, .bot-msgs { max-width: 100%; overflow-x: hidden; }
.chat-inputrow { max-width: 100vw; overflow-x: hidden; }
/* Koi bhi element screen se bahar na jaye */
img, svg, video { max-width: 100%; }

/* Message ticks + time — WhatsApp jaisa, bubble ke andar */
.bmsg { position:relative; }
.msg-meta { float:right; font-size:11px; color:#8696a0; margin:8px 0 0 8px; line-height:1; font-weight:400; }
.msg-meta .ticks { font-weight:300; letter-spacing:-2px; color:#8696a0; }
.msg-meta .ticks.read { color:#53bdeb; }
/* Customer bubble — WhatsApp green */
.bmsg.user { background:#005c4b !important; }
/* Assistant ka time blue */
.bmsg.bot .msg-meta { color:#53bdeb; }
/* Button rows mein ticks NAHI */
.quote-actions .msg-meta { display:none !important; }
.bmsg::after { content:""; display:table; clear:both; }

/* v347 TEST: Referral Earn card (sponsor-banner jaisa dark card; sirf test emails ko nazar aata hai) */
.ref-earn { background: #141c2e; border: 1px solid #2a3a55; border-radius: 12px; padding: 12px; margin: 8px 12px; color: #fff; }
.ref-earn[hidden] { display: none; }
.ref-earn.ref-collapsed { background: transparent; border: none; padding: 0; }
.ref-earnbtn { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 7px 14px; font-size: 13px; font-weight: bold; color: #fff; background: linear-gradient(135deg,#16a34a,#065f46); border: 1px solid #22c55e; border-radius: 999px; cursor: pointer; }
.ref-earnbtn .ref-chev { font-size: 11px; }
.ref-earn-panel { margin-top: 10px; }
.ref-earn h3 { margin: 0 0 8px; font-size: 15px; }
.ref-earn .ref-linkrow { display: flex; gap: 8px; align-items: center; }
.ref-earn .ref-link { flex: 1; min-width: 0; word-break: break-all; font-size: 12px; color: #4da3ff; background: #0b1220; border: 1px solid #223; border-radius: 8px; padding: 8px; }
.ref-earn .ref-copy { background: linear-gradient(135deg,#2563eb,#1e40af); color: #fff; border: none; border-radius: 8px; padding: 9px 14px; font-size: 13px; font-weight: bold; cursor: pointer; flex-shrink: 0; }
/* v368: Full-width Copy Link button (panel + success screen) — real button, not link-styled text. */
.ref-copybtn { display: block; width: 100%; background: linear-gradient(135deg,#2563eb,#1e40af); color: #fff; border: none; border-radius: 10px; padding: 12px; font-size: 15px; font-weight: bold; cursor: pointer; margin-bottom: 12px; }
.ref-earn .ref-stats { display: flex; gap: 8px; margin-top: 10px; }
.ref-earn .ref-stat { flex: 1; background: #0b1220; border: 1px solid #223; border-radius: 10px; padding: 8px; text-align: center; }
.ref-earn .ref-stat b { display: block; font-size: 16px; }
.ref-earn .ref-stat small { font-size: 11px; color: #8696a0; }
.ref-earn .ref-log { margin-top: 10px; font-size: 13px; }
.ref-earn .ref-log div { padding: 6px 0; border-top: 1px solid #223; }
.ref-earn .muted { color: #8696a0; }
/* v347 TEST: Earn TAB header (tappable) + Urdu how-it-works + dashboard button */
.ref-earn .ref-urdu { direction: rtl; text-align: right; font-size: 14px; line-height: 1.9; color: #dbeafe; background: #0b1220; border: 1px solid #223; border-radius: 10px; padding: 10px; margin: 10px 0 0; }
.ref-earn .ref-dashbtn { width: 100%; margin-top: 10px; background: linear-gradient(135deg,#2563eb,#1e40af); color: #fff; border: none; border-radius: 10px; padding: 12px; font-size: 14px; font-weight: bold; cursor: pointer; }
.ref-earn .ref-smallbtn { width: 100%; margin-top: 8px; background: #1a2a4a; color: #dbeafe; border: 1px solid #2a3a55; border-radius: 10px; padding: 10px; font-size: 13px; cursor: pointer; }
/* v347 TEST: Earn Dashboard — date groups + rows */
#refDashStats .ref-stat { flex: 1; background: #0b1220; border: 1px solid #223; border-radius: 10px; padding: 8px; text-align: center; }
#refDashStats .ref-stat b { display: block; font-size: 16px; }
#refDashStats .ref-stat small { font-size: 11px; color: #8696a0; }
.ref-dategrp { background: #0f1626; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.ref-datehead { display: flex; justify-content: space-between; font-size: 14px; padding-bottom: 6px; border-bottom: 1px solid #223; }
.ref-datehead span { color: #4ade80; font-weight: bold; }
.ref-dashrow { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid #223; font-size: 14px; }
.ref-dashrow b { color: #4ade80; white-space: nowrap; }

/* v383: Light mode — 3-dot menu se toggle (default Dark rehta hai, pasand phone par save hoti hai) */
html.light{
  --bg:#eef1f6; --card:#ffffff; --card2:#f1f4f9; --line:#d8e0ec;
  --ink:#101828; --muted:#5b6b82;
}
html.light body{background:var(--bg);color:var(--ink)}
html.light .boot{color:#101828}
html.light .boot-bar{background:#d8e0ec}
html.light .boot-made{color:#334155}
html.light .boot-powered{color:#64748b}
html.light .boot-vehicles small{color:#334155}
html.light .topbar{background:rgba(255,255,255,.96);color:#101828;border-bottom:1px solid var(--line)}
html.light .brand-tag{color:#475569}
html.light .tbtn, html.light .user-chip{background:#eef1f6;color:#101828}
html.light .menu-drop{background:#fff;border-color:#d8e0ec;box-shadow:0 4px 16px rgba(15,23,42,.15)}
html.light .menu-item{color:#101828}
html.light .menu-item:active{background:#eef1f6}
html.light #scr-chat .bot-header, html.light #scr-bot .bot-header,
html.light #scr-chat .chat-inputrow, html.light #scr-bot .chat-inputrow{background:#fff;border-color:#d8e0ec}
html.light #scr-chat .wrap.narrow{border-color:#d8e0ec}
html.light .sponsor-banner{background:#fff;color:#101828;border-color:#d8e0ec}
html.light .sponsor-banner small{color:#1d4ed8}
html.light .phone-row .cc{background:#eef1f6}
html.light .extbtn{background:#eef1f6}
html.light .role-opt.on{background:var(--grad)}
html.light .bmsg.bot{background:#e9eef5;color:#101828}
html.light .fld input::placeholder{color:#94a3b8}
/* Generated HTML ke dark navy surfaces (inline background) — sirf background wale, text/link rang alag se */
html.light [style*="background:#1e2a44"], html.light [style*="background: #1e2a44"],
html.light [style*="background:#141c2e"], html.light [style*="background: #141c2e"],
html.light [style*="background:#0f1626"], html.light [style*="background: #0f1626"],
html.light [style*="background:#1a2a4a"], html.light [style*="background: #1a2a4a"],
html.light [style*="background:#2a3a55"], html.light [style*="background: #2a3a55"],
html.light [style*="background:#0f1f3a"], html.light [style*="background: #0f1f3a"],
html.light [style*="background:#1a2332"], html.light [style*="background: #1a2332"],
html.light [style*="background:#22335a"], html.light [style*="background: #22335a"],
html.light [style*="background:#16203a"], html.light [style*="background: #16203a"],
html.light [style*="background-color:#1e2a44"], html.light [style*="background-color:#141c2e"],
html.light [style*="background-color:#0f1626"], html.light [style*="background-color:#1a2a4a"],
html.light [style*="background-color:#2a3a55"], html.light [style*="background-color:#0f1f3a"],
html.light [style*="background-color:#1a2332"], html.light [style*="background-color:#22335a"],
html.light [style*="background-color:#16203a"]{background-color:#e9eef5!important;border-color:#d8e0ec!important;color:#101828!important}
html.light [style*="color:#4da3ff"]{color:#1d4ed8!important}
html.light [style*="color:#a0aec0"]{color:#5b6b82!important}

/* v385: Light mode round 2 — screenshot + inspection defects */
/* Naye dark hex jo pehle list mein nahi the (scr-ride bg, pinned bar, passenger header block, voice UI) */
html.light [style*="background:#060a13"], html.light [style*="background-color:#060a13"],
html.light [style*="background:#0a0f1c"], html.light [style*="background-color:#0a0f1c"],
html.light [style*="background:#0d1830"], html.light [style*="background-color:#0d1830"],
html.light [style*="background:#0b1220"], html.light [style*="background-color:#0b1220"],
html.light [style*="background:#1a1a2e"], html.light [style*="background-color:#1a1a2e"]{background:#e9eef5!important;background-color:#e9eef5!important;color:#101828!important;border-color:#d8e0ec!important;}
/* Dark divider lines (#223) light mode mein halki */
html.light [style*="border-bottom:1px solid #223"], html.light [style*="border-top:1px solid #223"]{border-color:#d8e0ec!important;}
/* Guard: chat card naam + headings (source fix ke saath double safety) */
html.light .ride-chat-row b, html.light #drvRideSysTitle, html.light #drvPinnedName{color:#101828!important;}

/* v386: Ride chat screen light — is ke dark rang CLASS-based the (inline list se nahi pakre gaye) */
html.light #scr-ride{background:#eef1f6!important;}
html.light #scr-ride .bot-header{background:#ffffff!important;border-color:#d8e0ec!important;}
html.light #scr-ride .bot-msgs, html.light #scr-ride .chat-msgs{background:#eef1f6!important;border-color:#d8e0ec!important;}
html.light #scr-ride .chat-inputrow{background:#ffffff!important;border-color:#d8e0ec!important;}
html.light #rideHeaderActions{background:#e9eef5!important;border-color:#d8e0ec!important;}
html.light #scr-ride .bmsg.bot{background:#ffffff!important;color:#101828!important;border-color:#d8e0ec!important;}
/* v475 (ca): rideMatchStrip element hata diya gaya (loading mein sirf ek message) — is ka CSS bhi hata diya. */
html.light #drvSafetyBox{background:#fff7ed!important;border-color:#f59e0b!important;}
html.light #drvSafetyBox div{color:#101828!important;}
html.light #rideVoiceTimer{color:#101828!important;}

/* v387: WhatsApp jaisi light theme — halka gray + safed cards + beige chat + sabz sent bubbles */
html.light{
  --bg:#f0f2f5; --card:#ffffff; --card2:#f0f2f5; --line:#e9edef;
  --ink:#111b21; --muted:#667781;
}
html.light body{background:#f0f2f5!important;color:#111b21!important;}
html.light .topbar{background:#f0f2f5!important;color:#111b21!important;border-bottom:1px solid #e9edef!important;}
html.light .tbtn, html.light .user-chip{background:#ffffff!important;color:#111b21!important;}
html.light .menu-drop{background:#ffffff!important;border-color:#e9edef!important;}
html.light .menu-item{color:#111b21!important;}
html.light .menu-item:active{background:#f0f2f5!important;}
html.light .sponsor-banner{background:#ffffff!important;color:#111b21!important;border-color:#e9edef!important;}
html.light .sponsor-banner small{color:#008069!important;}
html.light .phone-row .cc{background:#f0f2f5!important;}
html.light .extbtn{background:#ffffff!important;color:#111b21!important;}
html.light .boot{color:#111b21!important;}
html.light .boot-bar{background:#e9edef!important;}
html.light #scr-chat .bot-header, html.light #scr-bot .bot-header,
html.light #scr-chat .chat-inputrow, html.light #scr-bot .chat-inputrow{background:#f0f2f5!important;border-color:#e9edef!important;}
html.light #scr-chat .wrap.narrow{border-color:#e9edef!important;}
html.light #scr-chat .bot-msgs, html.light #scr-bot .bot-msgs{background:#efeae2!important;}
html.light #scr-ride{background:#f0f2f5!important;}
html.light #scr-ride .bot-header{background:#f0f2f5!important;border-color:#e9edef!important;}
html.light #scr-ride .bot-msgs, html.light #scr-ride .chat-msgs{background:#efeae2!important;border-color:#e9edef!important;}
html.light #scr-ride .chat-inputrow{background:#f0f2f5!important;border-color:#e9edef!important;}
html.light #rideHeaderActions{background:#f0f2f5!important;border-color:#e9edef!important;}
html.light .bmsg.bot{background:#ffffff!important;color:#111b21!important;border-color:#e9edef!important;}
html.light .bmsg.user, html.light .bmsg.me{background:#d9fdd3!important;color:#111b21!important;}
html.light #drvSafetyBox div{color:#111b21!important;}
html.light #rideVoiceTimer{color:#111b21!important;}
html.light [style*="background:#1e2a44"],
html.light [style*="background: #1e2a44"],
html.light [style*="background-color:#1e2a44"],
html.light [style*="background:#141c2e"],
html.light [style*="background: #141c2e"],
html.light [style*="background-color:#141c2e"],
html.light [style*="background:#0f1626"],
html.light [style*="background: #0f1626"],
html.light [style*="background-color:#0f1626"],
html.light [style*="background:#1a2a4a"],
html.light [style*="background: #1a2a4a"],
html.light [style*="background-color:#1a2a4a"],
html.light [style*="background:#2a3a55"],
html.light [style*="background: #2a3a55"],
html.light [style*="background-color:#2a3a55"],
html.light [style*="background:#0f1f3a"],
html.light [style*="background: #0f1f3a"],
html.light [style*="background-color:#0f1f3a"],
html.light [style*="background:#1a2332"],
html.light [style*="background: #1a2332"],
html.light [style*="background-color:#1a2332"],
html.light [style*="background:#22335a"],
html.light [style*="background: #22335a"],
html.light [style*="background-color:#22335a"],
html.light [style*="background:#16203a"],
html.light [style*="background: #16203a"],
html.light [style*="background-color:#16203a"]{background:#ffffff!important;background-color:#ffffff!important;border-color:#e9edef!important;color:#111b21!important;}
html.light [style*="background:#060a13"],
html.light [style*="background: #060a13"],
html.light [style*="background-color:#060a13"],
html.light [style*="background:#0a0f1c"],
html.light [style*="background: #0a0f1c"],
html.light [style*="background-color:#0a0f1c"],
html.light [style*="background:#0d1830"],
html.light [style*="background: #0d1830"],
html.light [style*="background-color:#0d1830"],
html.light [style*="background:#0b1220"],
html.light [style*="background: #0b1220"],
html.light [style*="background-color:#0b1220"],
html.light [style*="background:#1a1a2e"],
html.light [style*="background: #1a1a2e"],
html.light [style*="background-color:#1a1a2e"]{background:#f0f2f5!important;background-color:#f0f2f5!important;border-color:#e9edef!important;color:#111b21!important;}
html.light [style*="color:#4da3ff"],
html.light [style*="color: #4da3ff"]{color:#008069!important;}
html.light [style*="color:#a0aec0"],
html.light [style*="color: #a0aec0"],
html.light [style*="color:#8696a0"],
html.light [style*="color: #8696a0"]{color:#667781!important;}
html.light [style*="color:#4ade80"],
html.light [style*="color: #4ade80"]{color:#008069!important;}
html.light [style*="color:#f87171"],
html.light [style*="color: #f87171"]{color:#dc2626!important;}

/* Price card text — theme-aware (Fix be): light mode = dark text on light card, dark mode = light text on dark card */
#ridePriceCard .pc-title, #pricePopup .pc-title{color:#fff;}
#ridePriceCard .pc-text, #pricePopup .pc-text{color:#fff;}
#ridePriceCard .pc-head, #pricePopup .pc-head{color:#fff;}
#ridePriceCard .pc-relax, #pricePopup .pc-relax{color:#c8e6c9;}
#ridePriceCard .pc-tip, #pricePopup .pc-tip{color:#ffe082;}
#ridePriceCard .pc-link, #pricePopup .pc-link{color:#4da3ff;}
#ridePriceCard .pc-input, #pricePopup .pc-input{color:#fff;}
#ridePriceCard .pc-note, #pricePopup .pc-note{color:#9aa5b1;}
html.light #ridePriceCard .pc-title, html.light #pricePopup .pc-title{color:#111b21!important;}
html.light #ridePriceCard .pc-text, html.light #pricePopup .pc-text{color:#111b21!important;}
html.light #ridePriceCard .pc-head, html.light #pricePopup .pc-head{color:#111b21!important;}
html.light #ridePriceCard .pc-relax, html.light #pricePopup .pc-relax{color:#1b5e20!important;}
html.light #ridePriceCard .pc-tip, html.light #pricePopup .pc-tip{color:#7c4a03!important;}
html.light #ridePriceCard .pc-link, html.light #pricePopup .pc-link{color:#1d4ed8!important;}
html.light #ridePriceCard .pc-input, html.light #pricePopup .pc-input{color:#111b21!important;}
html.light #ridePriceCard .pc-note, html.light #pricePopup .pc-note{color:#5b6b82!important;}
/* Popup outer becomes light in light mode so the dark text above stays readable */
html.light #pricePopup > div{background:#ffffff!important;}
html.light #pricePopup .pc-input{background:#e9eef5!important;}

/* bg (driver fare + notify): fare input OBVIOUS + ride-request banners.
   Be colour fix preserved: dark text on light card in light mode, light text
   in dark mode (WCAG AA). The prominence comes from the BORDER + GLOW, not
   from changing the text colour. */

/* --- 1) Fare input: thick green border + glow so it cannot be missed --- */
#ridePriceCard .pc-input, #pricePopup .pc-input{
  border:3px solid #10b981 !important;
  box-shadow:0 0 0 3px rgba(16,185,129,.25), 0 0 18px rgba(16,185,129,.35) !important;
  outline:none;
}
#ridePriceCard .pc-input:focus, #pricePopup .pc-input:focus{
  border-color:#00e676 !important;
  animation:pcInputPulse 1.6s ease-in-out infinite;
}
@keyframes pcInputPulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(16,185,129,.25), 0 0 14px rgba(16,185,129,.30); }
  50%{ box-shadow:0 0 0 5px rgba(16,185,129,.45), 0 0 26px rgba(16,185,129,.55); }
}
/* Light mode: same light background for BOTH inputs so the dark text stays
   readable (fixes a latent be gap — ridePriceCard input had no light-mode
   background override, so dark text sat on its dark inline background). */
html.light #ridePriceCard .pc-input, html.light #pricePopup .pc-input{
  background:#e9eef5 !important;
  border:3px solid #059669 !important;
  box-shadow:0 0 0 3px rgba(5,150,105,.18), 0 0 14px rgba(5,150,105,.25) !important;
}
html.light #ridePriceCard .pc-input:focus, html.light #pricePopup .pc-input:focus{
  border-color:#047857 !important;
  animation:pcInputPulseLight 1.6s ease-in-out infinite;
}
@keyframes pcInputPulseLight{
  0%,100%{ box-shadow:0 0 0 3px rgba(5,150,105,.18), 0 0 12px rgba(5,150,105,.22); }
  50%{ box-shadow:0 0 0 5px rgba(5,150,105,.32), 0 0 22px rgba(5,150,105,.40); }
}
/* "Type here" label + blinking caret (WhatsApp-style: a line that keeps moving) */
.pc-typehere{font-size:14px;font-weight:bold;text-align:center;margin-bottom:8px;color:#4ade80;}
html.light .pc-typehere{color:#047857;}
.pc-caret{display:inline-block;width:2px;height:1em;background:currentColor;vertical-align:-0.15em;margin-left:2px;animation:pcCaretBlink 1s step-end infinite;}
@keyframes pcCaretBlink{0%,100%{opacity:1;}50%{opacity:0;}}

/* --- 2) [v457 REMOVED: green home banner drvHomeNotify — user order] --- */

/* --- 3) Top banner (INTERIM fallback for the system notification): fixed
   below the topbar, with Cancel + Confirm. JS sets its `top` to the topbar
   height at show time so it never covers the topbar (topbar z-index 90,
   this banner z-index 89). --- */
#drvTopNotify{
  position:fixed;left:0;right:0;z-index:89;
  background:linear-gradient(135deg,#1e3a8a,#1e40af);color:#fff;
  border-bottom:2px solid #60a5fa;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  padding:10px 12px;box-sizing:border-box;
}
#drvTopNotify .drv-top-title{font-size:15px;font-weight:bold;}
#drvTopNotify .drv-top-sub{font-size:12px;opacity:.92;margin-top:3px;line-height:1.4;}
#drvTopNotify .drv-top-btns{display:flex;gap:10px;margin-top:10px;}
#drvTopNotify .drv-top-btns button{
  flex:1;padding:12px;border:none;border-radius:12px;color:#fff;
  font-size:16px;font-weight:bold;cursor:pointer;
}
#drvTopNotify #drvTopConfirm{background:linear-gradient(135deg,#16a34a,#15803d);}
#drvTopNotify #drvTopCancel{background:linear-gradient(135deg,#dc2626,#991b1b);}
#drvTopNotify .drv-top-x{
  position:absolute;top:6px;right:10px;background:none;border:none;color:#fff;
  font-size:18px;cursor:pointer;opacity:.8;padding:4px 8px;
}
/* v465 (bq): driver popup X — dark card par safed ✕, 44px touch target. */
#rideDrvPopup #rideDrvPopupX:active{ background:rgba(255,255,255,.2); }
html.light #drvTopNotify{
  background:linear-gradient(135deg,#1d4ed8,#1e40af);color:#fff;border-bottom-color:#3b82f6;
}

/* --- v457 TAP SMOOTHNESS: ride/chat flow ke main controls ek halki tap par
   foran react karein — 300ms click delay khatam (touch-action), dabte hi
   halki visual feedback (:active scale + brightness). Sirf behaviour badla
   hai — kisi button ka kaam nahi badla. --- */
button{ touch-action:manipulation; }
#scr-ride button, #scr-chat button, #topbar button,
#drvTopNotify button, #rideDrvPopup button, #ridePriceCard button{
  touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
}
#scr-ride button:active, #scr-chat button:active, #topbar button:active,
#drvTopNotify button:active, #rideDrvPopup button:active,
#ridePriceCard button:active{
  transform:scale(.94);
  filter:brightness(1.25);
}
#btnRideSend, #btnChatSend{ min-width:48px; min-height:48px; }
#btnRideTryAgain{ min-height:48px; padding:14px 32px !important; }

/* --- v463 (bo) ISSUE 2: Netlify-injected "Powered by Netlify" badge iframe
   chhupao — Netlify preview par edge injection se aata hai (source mein
   nahi hai), Free tier par dashboard "Hide" nahi milta. Iframe khud main
   document ka normal element hai (sirf us ka srcdoc unreachable hai),
   is liye display:none kaam karta hai; script isay dobara nahi banata.
   Cloudflare par no-op (wahan badge inject hi nahi hota). Asli fix:
   Netlify dashboard -> Project configuration -> General -> Powered by
   Netlify badge -> Off. --- */
#nl-badge-frame, #nl-hud-frame { display: none !important; }