/* RRevX Ride — shared styles for /ride, /ride/driver, /ride/admin (sits on top of /brand.css) */
:root{
  --bg:#F5F6F1; --ink:#14213D; --ink2:#2F3A52; --muted:#4F586C; --line:#DEE2D9; --card:#FFFFFF;
  --ev:#0E7C94; --ev-soft:#E3F3F6; --ok:#1B7F4B; --ok-soft:#E3F3EA; --warn:#B45309; --warn-soft:#FCEBD5; --bad:#B42318; --bad-soft:#FBE4E1;
  --accent:linear-gradient(92deg,#22D3EE,#A3E635); --accent-ink:#0A1020;
  --r:14px; --shadow:0 10px 30px rgba(20,33,61,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Kanit',system-ui,sans-serif; font-weight:400; line-height:1.5; -webkit-font-smoothing:antialiased;}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3{margin:0; font-weight:500; line-height:1.25}
h2{font-size:19px} h3{font-size:16px}
p{margin:0}
.hint{font-size:13.5px; color:var(--muted)}
.muted{color:var(--muted)}
.b{font-weight:500}
.hidden,[hidden]{display:none !important}

/* header */
.ride-hdr{padding:0}
.ride-hdr .topbar{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; max-width:1200px; margin:0 auto}
.ride-hdr .topbar{flex-wrap:wrap} .ride-hdr .brand{flex-shrink:0}
.ride-nav{display:flex; gap:6px}
.ride-nav a{text-decoration:none; font-size:13.5px; padding:6px 12px; border-radius:9px}
.hdr-dark .ride-nav a.on{background:var(--accent) !important; color:var(--accent-ink) !important; border-color:transparent !important; font-weight:500}
@media(max-width:520px){ .ride-nav a{padding:6px 9px; font-size:12.5px} .brand-sub.brand-hash{display:none} }

/* app layout: map + sheet */
.app{position:relative; height:calc(100dvh - var(--hdr-h, calc(66px + var(--beta-h, 0px)))); min-height:520px; overflow:hidden}
.map{position:absolute; inset:0; z-index:0; background:#f2efe9}
/* standard OSM colours, a touch more contrast so street names read clearly (pins / routes not affected) */
.map .leaflet-tile, .admin-map .leaflet-tile{filter:contrast(1.15)}
.leaflet-container{font-family:inherit}
.sheet{position:absolute; left:0; right:0; bottom:0; z-index:5; background:var(--card); border-radius:18px 18px 0 0; box-shadow:0 -8px 30px rgba(20,33,61,.18); max-height:78%; overflow:auto; padding:14px 16px calc(16px + env(safe-area-inset-bottom)); display:grid; gap:12px}
.sheet::before{content:""; display:block; width:44px; height:5px; border-radius:99px; background:#C9D2DE; margin:-6px auto 4px; cursor:grab}
.sheet{transition:height .25s ease; overscroll-behavior:contain; align-content:start; grid-auto-rows:max-content}
.sheet>.tabs{position:sticky; top:-14px; z-index:4; background:var(--card); margin-top:-4px}
.sheet.dragging{transition:none; user-select:none}
/* map buttons in Google Maps style: round white, soft two-layer shadow, grey icons, blue "my location" */
.fab{position:absolute; z-index:4; right:12px; width:48px; height:48px; border-radius:50%; border:0; background:#fff; color:#3c4043;
  box-shadow:0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15); display:grid; place-items:center; cursor:pointer; transition:background .15s, box-shadow .15s}
.fab:hover{background:#f8f9fa}
.fab:active{background:#f1f3f4; box-shadow:0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15)}
.fab:focus-visible{outline:2px solid #1a73e8; outline-offset:2px}
.fab.locate{color:#1a73e8}
.fab.locate svg{width:22px; height:22px}
.fab.locate{top:12px}
@media(min-width:900px){
  .app{display:grid; grid-template-columns:440px 1fr}
  .map{position:relative; inset:auto; height:100%}
  .sheet{position:relative; inset:auto; max-height:none; height:100%; border-radius:0; box-shadow:none; border-right:1px solid var(--line); padding:18px 18px 24px; align-content:start; order:-1}
  .sheet::before{display:none}
  .fab.locate{top:12px; right:12px}
}

/* cards & buttons */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:grid; gap:10px}
.card.soft{background:var(--bg)}
.btn{appearance:none; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:11px; padding:10px 14px; font-size:15px; font-weight:400; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; transition:transform .05s, filter .15s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:500}
.btn.dark{background:#0A1020; color:#F2F6FC; border-color:#0A1020}
.btn.ok{background:var(--ok); color:#fff; border-color:var(--ok)}
.btn.danger{background:#fff; color:var(--bad); border-color:#F2B8B0}
.btn.ghost{background:transparent}
.btn.full{width:100%}
.btn.big{padding:14px 18px; font-size:17px; border-radius:14px}
.btn.sm{padding:6px 10px; font-size:13px; border-radius:9px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}
.actions{display:flex; gap:8px; flex-wrap:wrap}
.spread{display:flex; justify-content:space-between; align-items:center; gap:10px}

/* forms */
.f{display:grid; gap:10px}
.f label{display:grid; gap:4px; font-size:13.5px; color:var(--ink2)}
.f input,.f select,.f textarea,.input{font-size:15px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); width:100%}
.f input:focus,.f select:focus,.f textarea:focus,.input:focus{outline:2px solid #22D3EE; outline-offset:1px; border-color:transparent}
.f textarea{min-height:64px; resize:vertical}
.check{display:flex; align-items:center; gap:8px; font-size:14px}
.check input{width:18px; height:18px}
.or{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12.5px}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--line)}
.msg{font-size:13px; color:var(--bad); min-height:1em}
.login h2{font-size:20px}

/* place inputs */
.where{display:grid; gap:8px}
.where .line{display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:8px}
.where .dot{width:12px; height:12px; border-radius:50%; margin-left:4px}
.where .dot.a{background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft)}
.where .dot.b{background:#E8590C; box-shadow:0 0 0 3px #FCE3D2}
.where input{font-size:15px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); width:100%}
.where input:focus{outline:2px solid #22D3EE; outline-offset:1px; background:#fff}
.sugg{display:grid; max-height:min(55dvh,440px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; border:1px solid var(--line); border-radius:14px; background:#fff; padding:0 8px}
.center-pin{position:absolute; left:50%; top:50%; z-index:3; width:26px; height:38px; margin:-38px 0 0 -13px; pointer-events:none}
.center-pin::before{content:""; position:absolute; left:3px; top:0; width:20px; height:20px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#E8590C; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.3)}
.center-pin::after{content:""; position:absolute; left:11px; top:24px; width:4px; height:14px; background:rgba(0,0,0,.25); border-radius:2px}
.center-pin.a::before{background:var(--ok)}

/* fare card */
.fare{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:12px; border:2px solid var(--ev); border-radius:14px; background:var(--ev-soft)}
.fare .ic{font-size:30px; line-height:1}
.fare .price{font-size:24px; font-weight:500; color:var(--ink)}
.fare .sub{font-size:12.5px; color:var(--muted)}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:11px; padding:3px; background:#fff; gap:3px}
.seg button{border:0; background:transparent; padding:7px 12px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--ink2)}
.seg button.on{background:#0A1020; color:#fff}
.kv{display:grid; grid-template-columns:1fr auto; gap:4px 12px; font-size:14px}
.kv dt{color:var(--muted)} .kv dd{margin:0; text-align:right}

/* status */
.pill{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; padding:3px 9px; border-radius:99px; background:var(--bg); color:var(--ink2); border:1px solid var(--line); white-space:nowrap}
.pill.ok{background:var(--ok-soft); color:var(--ok); border-color:transparent}
.pill.info{background:var(--ev-soft); color:var(--ev); border-color:transparent}
.pill.warn{background:var(--warn-soft); color:var(--warn); border-color:transparent}
.pill.bad{background:var(--bad-soft); color:var(--bad); border-color:transparent}
.pill.muted{color:var(--muted)}
.pulse{position:relative; width:64px; height:64px; margin:0 auto}
.pulse::before,.pulse::after{content:""; position:absolute; inset:0; border-radius:50%; background:#22D3EE; opacity:.35; animation:pulse 1.6s ease-out infinite}
.pulse::after{animation-delay:.8s}
.pulse i{position:absolute; inset:18px; border-radius:50%; background:var(--accent)}
@keyframes pulse{0%{transform:scale(.4); opacity:.6} 100%{transform:scale(1.6); opacity:0}}
.spinner{width:22px; height:22px; border:3px solid var(--line); border-top-color:var(--ev); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.countdown{font-variant-numeric:tabular-nums; font-weight:500}
.bar{height:6px; border-radius:99px; background:var(--line); overflow:hidden}
.bar i{display:block; height:100%; background:var(--accent); transition:width 1s linear}

/* driver card / people */
.person{display:grid; grid-template-columns:48px 1fr auto; gap:12px; align-items:center}
.avatar{width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#0A1020,#12304A); color:#fff; display:grid; place-items:center; font-weight:500; font-size:18px}
.stars{color:#F59E0B; letter-spacing:1px; font-size:14px} .stars i{color:var(--line); font-style:normal}
.plate{display:inline-block; font-family:'Orbitron','Kanit',sans-serif; font-weight:500; letter-spacing:1px; font-size:13px; padding:2px 8px; border:1.5px solid var(--ink); border-radius:6px; background:#fff}

/* offers */
.offer{border:2px solid #22D3EE; border-radius:16px; padding:14px; background:#fff; display:grid; gap:10px; box-shadow:var(--shadow); animation:pop .25s ease-out}
@keyframes pop{from{transform:translateY(8px); opacity:0} to{transform:none; opacity:1}}
.offer .big-price{font-size:28px; font-weight:500}
.online-toggle{display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:#fff}
.online-toggle.on{border-color:transparent; background:linear-gradient(120deg,#0A1020,#12304A 60%,#1C4A2E); color:#F2F6FC}
.online-toggle.on .hint{color:#AFC0D6}
.switch{position:relative; width:52px; height:30px; border-radius:99px; background:#CBD2C8; border:0; cursor:pointer; transition:background .2s}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 1px 4px rgba(0,0,0,.3)}
.switch.on{background:#A3E635} .switch.on::after{left:25px}

/* QR */
.qr{display:grid; place-items:center; gap:8px; padding:12px; background:#fff; border:1px solid var(--line); border-radius:14px}
.qr svg{width:220px; height:220px; max-width:70vw}
.qr .amt{font-size:26px; font-weight:500}
.qr .qr-save{padding:7px 14px; font-size:14px; min-height:0}
.pp-logo{font-family:'Orbitron',sans-serif; font-size:12px; letter-spacing:1px; color:#1D3A8A}

/* markers */
.mk{background:transparent; border:0}
.mk-dot{display:block; width:18px; height:18px; border-radius:50%; border:3px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.35)}
.mk-pickup{background:var(--ok)} .mk-driver{background:var(--ev); width:14px; height:14px}
.mk-pin{display:block; width:22px; height:22px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#E8590C; border:2.5px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35); margin-top:2px}
.mk-me{display:block; width:18px; height:18px; border-radius:50%; background:#2563EB; border:3px solid #fff; box-shadow:0 0 0 6px rgba(37,99,235,.2)}
.mk-car{display:block; width:30px; height:52px; transition:transform .5s linear; filter:drop-shadow(0 3px 5px rgba(0,0,0,.4))}

/* lists & tables */
.list{display:grid; gap:8px}
.item{display:grid; gap:4px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff}
.item .top{display:flex; justify-content:space-between; gap:8px; align-items:center}
.tbl{width:100%; border-collapse:collapse; font-size:13.5px; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.tbl th,.tbl td{padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.tbl th{font-weight:500; color:var(--ink2); background:var(--bg); font-size:12.5px}
.tbl tr:last-child td{border-bottom:0}
.tbl-wrap{overflow:auto; border-radius:12px}
.tabs{display:flex; flex-wrap:nowrap; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto; overflow-y:hidden; flex:none; min-height:max-content; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1 1 0; min-width:max-content; border:0; background:transparent; padding:12px 10px 10px; line-height:1.5; font:inherit; font-size:15px; cursor:pointer; color:var(--muted); border-bottom:3px solid transparent; white-space:nowrap; text-align:center}
.tabs button.on{color:var(--ink); border-bottom-color:var(--ev); font-weight:500}

/* admin */
.admin{max-width:1200px; margin:0 auto; padding:16px; display:grid; gap:14px}
.stats{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.stat{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:grid; gap:2px}
.stat small{color:var(--muted); font-size:12px}
.stat b{font-weight:500; font-size:22px; font-variant-numeric:tabular-nums}
.dstats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:#fff; border:1px solid var(--line); border-radius:12px}
.dstats>div{padding:7px 10px; display:grid; gap:0; min-width:0; text-align:center}
.dstats>div+div{border-left:1px solid var(--line)}
.dstats small{color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dstats b{font-weight:500; font-size:17px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dstats b.neg{color:var(--bad, #c62828)}
.chart{display:grid; gap:6px}
.chart .bars{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; align-items:end; height:120px; padding:0 2px; border-bottom:1px solid var(--line)}
.chart .bars i{display:block; background:var(--ev); border-radius:4px 4px 0 0; min-height:2px; position:relative; cursor:default}
.chart .bars i:hover{filter:brightness(1.2)}
.chart .bars i span{position:absolute; bottom:100%; left:50%; transform:translateX(-50%); font-size:11px; color:var(--ink2); white-space:nowrap; margin-bottom:3px; opacity:0; pointer-events:none}
.chart .bars i:hover span{opacity:1}
.chart .lbl{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; font-size:10.5px; color:var(--muted); text-align:center}
.admin-map{height:520px; border-radius:14px; overflow:hidden; border:1px solid var(--line)}

/* misc */
#toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); z-index:50; background:#0A1020; color:#F2F6FC; padding:10px 16px; border-radius:12px; font-size:14px; opacity:0; pointer-events:none; transition:.2s; max-width:92vw}
#toast.show{opacity:1; transform:translate(-50%,0)}
#toast.bad{background:var(--bad)} #toast.ok{background:var(--ok)}
.center{text-align:center}
.page{max-width:560px; margin:0 auto; padding:16px; display:grid; gap:14px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media(max-width:520px){ .grid2{grid-template-columns:1fr} .row3{grid-template-columns:1fr} }
footer.ride-foot{text-align:center; font-size:12px; color:var(--muted); padding:10px 16px 20px}
/* driver's own PromptPay QR upload */
.qr-up{display:grid; gap:8px}
.qr-up h3{margin:0}
.qr-prev{display:grid; justify-items:center; gap:6px}
.qr-prev:empty{display:none}
.qr-prev img{width:180px; max-width:60vw; border-radius:12px; border:1px solid var(--line); background:#fff}
.qr-pick{cursor:pointer; text-align:center}
/* commission wallet */
.wallet .wal-bal{font-size:22px}
.wallet.blocked{border-color:var(--bad)}
.warn-card{border:1.5px solid var(--bad); background:#FFF5F5}
.warn-card p{margin:0 0 6px}
#tuAmt{display:flex; flex-wrap:wrap}
.slip-thumb{max-width:160px; max-height:220px; border-radius:10px; border:1px solid var(--line); display:block; margin:6px 0}
/* ── Grab/Bolt-style extras ── */
.nowrap{white-space:nowrap; display:inline-flex; gap:2px}
.where .dot.s{width:18px; height:18px; border-radius:50%; background:#6D28D9; color:#fff; font-size:11px; display:grid; place-items:center; margin-left:1px; font-weight:500}
.mk-stop{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#6D28D9; color:#fff; font-size:12px; font-weight:500; border:2px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.35)}
.mk-home{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#fff; border:2px solid #0E7C94; font-size:14px; box-shadow:0 1px 6px rgba(0,0,0,.3)}
.opts{display:grid; gap:8px}
.opt{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; text-align:left; padding:10px 12px; border:1.5px solid var(--line); border-radius:13px; background:#fff; cursor:pointer; font:inherit; color:inherit}
.opt.on{border-color:var(--ev); background:var(--ev-soft); box-shadow:0 0 0 1px var(--ev) inset}
.opt .ic{font-size:24px; line-height:1; display:grid; place-items:center; width:50px}
.opt-b{display:grid; gap:1px} .opt-b b{font-weight:500} .opt-b small{font-size:12.5px; color:var(--muted)}
.opt .price{font-size:19px; font-weight:500}
.seg.full{display:flex} .seg.full button{flex:1}
.up-item{justify-content:space-between; margin-top:6px}
.badge{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--bad); color:#fff; font-size:11px; font-weight:500}
.ref-code{font-family:'Orbitron','Kanit',sans-serif; font-size:24px; letter-spacing:3px}
.perks{gap:8px}
/* chat panel */
.talk{position:fixed; z-index:40; right:16px; bottom:16px; width:min(380px,calc(100vw - 32px)); height:min(560px,calc(100dvh - 100px)); background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); display:grid; grid-template-rows:auto 1fr auto auto; overflow:hidden}
@media(max-width:600px){ .talk{inset:0; width:auto; height:auto; border-radius:0} }
.talk-head{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--bg)}
.talk-list{overflow:auto; padding:12px; display:flex; flex-direction:column; gap:6px}
.bubble{max-width:80%; align-self:flex-start; background:var(--bg); border:1px solid var(--line); border-radius:14px 14px 14px 4px; padding:7px 10px; display:grid; gap:2px}
.bubble.me{align-self:flex-end; background:var(--ev-soft); border-color:transparent; border-radius:14px 14px 4px 14px}
.bubble span{white-space:pre-wrap; word-break:break-word; font-size:14.5px} .bubble small{font-size:10.5px; color:var(--muted); justify-self:end}
.talk-quick{display:flex; gap:6px; overflow:auto; padding:6px 10px; border-top:1px solid var(--line)}
.talk-quick .btn{white-space:nowrap}
.talk-form{display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line)}
.talk-form input{font-size:15px; padding:9px 11px; border:1px solid var(--line); border-radius:10px}
/* call screen */
.callui{position:fixed; inset:0; z-index:60; background:linear-gradient(160deg,#0A1020,#12304A 60%,#1C4A2E); color:#F2F6FC; display:grid; place-content:center; justify-items:center; gap:12px; padding:24px; text-align:center}
.callui .hint{color:#AFC0D6}
.avatar.big{width:96px; height:96px; font-size:38px}
.callui .row2{width:min(340px,80vw)}
/* modal */
.rmodal{position:fixed; inset:0; z-index:45; background:rgba(10,16,32,.55); display:grid; place-items:center; padding:16px}
.rmodal-box{width:min(420px,100%); max-height:90dvh; overflow:auto}
/* public live-trip page */
.track-app .sheet{max-height:55%}

/* driver: incoming request pops up at the top of the screen */
.offer-pop{position:fixed; z-index:35; left:10px; right:10px; top:calc(8px + env(safe-area-inset-top)); max-height:72dvh; overflow:auto; display:grid; gap:8px; animation:drop .25s ease-out}
.offer-pop .offer{box-shadow:0 14px 40px rgba(10,16,32,.35); border-width:2.5px}
@media(min-width:900px){ .offer-pop{left:auto; right:16px; top:78px; width:420px} }
@keyframes drop{from{transform:translateY(-16px); opacity:0} to{transform:none; opacity:1}}

/* rider: the book button sits at the top of the fare panel and stays visible while scrolling the options */
.book-top{position:sticky; top:-14px; z-index:3; background:var(--card); padding:6px 0 4px; display:grid; gap:4px}
.book-top .msg:empty{display:none}
#quoteBox{display:grid; gap:12px}
@media(min-width:900px){ .book-top{top:-18px} }

/* test-phase notice under the header */
:root:has(.beta-bar){--beta-h:26px}
.beta-bar{height:26px; line-height:26px; padding:0 12px; text-align:center; font-size:12.5px; font-weight:600; color:#3B2F00; background:linear-gradient(90deg,#FDE68A,#FCD34D); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.beta-fb{background:none; border:0; padding:0; font:inherit; color:#1E3A8A; text-decoration:underline; cursor:pointer}
.ap-list{display:grid; gap:10px; margin:6px 0 10px}
.ap-row{display:flex; flex-wrap:wrap; gap:8px; padding:10px; align-items:flex-end}
.ap-row label{min-width:120px; display:grid; gap:2px}
.ap-row label span{font-size:12px; color:var(--muted, #64748B)}
.ap-act{display:flex; gap:12px; align-items:center; justify-content:space-between; width:100%}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:1px solid var(--line); background:#fff; border-radius:999px; padding:5px 12px; font:inherit; font-size:14px; cursor:pointer}
.chip:active{background:#E0F7FB}
#exForm .kv dt{display:flex; align-items:center; gap:6px}
.qr-alt{margin-top:8px; text-align:center}
.qr-alt summary{cursor:pointer; color:#0E7490; text-decoration:underline; font-size:14px}
.dc-card{border:2px solid #22D3EE}
.dc-card.in{border-color:#F59E0B; background:#FFFBEB; animation:drop .25s ease-out}
.doc-row{display:grid; gap:6px; margin:8px 0}
.doc-prev img{max-width:100%; max-height:160px; border-radius:10px; display:block; margin-bottom:4px}
.talk-form{grid-template-columns:auto 1fr auto !important}
.talk-photo{padding:0 12px; display:grid; place-items:center; font-size:18px; cursor:pointer}
.chat-img{display:block; max-width:220px; max-height:260px; border-radius:12px; margin:2px 0; cursor:zoom-in; background:#e5e7eb; min-width:120px; min-height:90px; object-fit:cover}
.tr-btn{display:block; background:none; border:0; padding:2px 0 0; font:inherit; font-size:12px; color:#0E7490; text-decoration:underline; cursor:pointer}
.tr-out{display:block; font-size:13px; opacity:.85; margin-top:3px; border-top:1px dashed rgba(0,0,0,.15); padding-top:3px}
.tr-auto{font-size:12px; color:var(--muted, #64748B); margin-right:4px; white-space:nowrap}
.foot-links{flex-wrap:wrap; gap:6px 14px}
.mk-pin-new{background:#F59E0B}
.dc-tip{background:#FFFBEB; border:1px solid #F59E0B; color:#78350F; font-weight:600; font-family:inherit}
.fab.menu{top:12px; left:12px; right:auto; font-size:20px; font-weight:500; color:#3c4043}
.menu-list{display:grid; gap:6px; margin:6px 0 10px}
.menu-item{display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:8px; width:100%; text-align:left; border:1px solid var(--line); background:#fff; border-radius:12px; padding:12px; font:inherit; font-size:16px; cursor:pointer}
.menu-item:active{background:#E0F7FB}
.mi-ic{font-size:22px; text-align:center} .mi-go{color:var(--muted, #64748B); font-size:20px}
.st-ic{font-size:16px; margin-right:2px}
.mode-seg{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px}
.mode-seg button{white-space:normal; line-height:1.35; padding:10px 8px}
.mode-seg button small{font-size:12px; opacity:.8}
.tabs.wrap{flex-wrap:wrap}
@media(max-width:520px){ .tabs:not(.wrap) button{min-width:0; white-space:normal; font-size:13.5px; padding:9px 2px 8px; line-height:1.3} }
.comm-box{display:grid; gap:6px; background:#ECFDF5; border:1px solid #A7F3D0; border-radius:12px; padding:10px 12px}
.comm-tbl td{padding:4px 8px} .comm-tbl tr.on{background:#D1FAE5}
.tier-list{display:grid; gap:6px; margin:6px 0}
.tier-row{display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:end}
.tier-row label{display:grid; gap:2px} .tier-row label span{font-size:12px; color:var(--muted, #64748B)}
/* contact admin */
a.menu-item{text-decoration:none; color:inherit}
.menu-item small{font-size:12.5px}
.mi-ic.ca-line{font-size:11px; font-weight:700; color:#fff; background:#06C755; border-radius:8px; padding:5px 4px; line-height:1}
.item.ca-open{border-left:4px solid #F59E0B; background:#FFFBEB}
.ca-set{border:1px solid var(--line); border-radius:12px; padding:10px 12px 12px; display:grid; gap:8px; margin:0}
.ca-set legend{padding:0 6px; font-weight:500}
.row-btns{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end}
/* notification opt-in card (common.js pushOffer) */
.push-card{position:fixed; z-index:31; left:10px; right:10px; top:calc(10px + env(safe-area-inset-top)); max-width:440px; margin:0 auto; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; align-items:center; padding:12px 14px; border-radius:16px; background:linear-gradient(180deg,#0F1A2F,#0A1020); color:#E6EDF7; border:1px solid rgba(255,255,255,.12); box-shadow:0 12px 32px rgba(10,16,32,.35); animation:drop .25s ease-out}
.push-card .pc-ic{font-size:26px; grid-row:span 2}
.push-card .pc-tx{display:grid; gap:2px; line-height:1.35}
.push-card .pc-tx b{font-weight:500; color:#F2F6FC}
.push-card .pc-tx span{font-size:13px; color:#9FB0C8}
.push-card .pc-act{display:flex; gap:8px; justify-content:flex-end}
.push-card .pc-act .btn:not(.primary){background:rgba(255,255,255,.08); color:#E6EDF7; border-color:rgba(255,255,255,.14)}
/* country flag in the header + country picker / welcome overlay (common.js welcome) */
.ctry-chip{border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); border-radius:10px; font-size:18px; line-height:1; padding:5px 7px; cursor:pointer; margin-left:6px}
.wel{position:fixed; inset:0; z-index:70; overflow:auto; display:grid; place-items:center; padding:calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
  background:radial-gradient(120% 80% at 50% 0%,#12304A 0%,#0A1020 60%); color:#E6EDF7; animation:welIn .3s ease-out}
@keyframes welIn{from{opacity:0} to{opacity:1}}
.wel-box{width:min(440px,100%); display:grid; gap:14px; text-align:center}
.wel h1{margin:0; font-size:24px; font-weight:500; color:#F2F6FC; line-height:1.3}
.wel-logo{font-family:'Orbitron',sans-serif; font-weight:800; letter-spacing:.06em; font-size:15px; background:linear-gradient(92deg,#22D3EE,#A3E635); -webkit-background-clip:text; background-clip:text; color:transparent}
.wel-sub,.wel-hint{margin:0; color:#9FB0C8; font-size:14px}
.wel-ctry{display:grid; gap:12px; margin-top:6px}
.wel-ctry button{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center; text-align:left; padding:16px 18px; border-radius:18px; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#F2F6FC; font:inherit; transition:transform .15s, border-color .15s}
.wel-ctry button:hover,.wel-ctry button:focus-visible{border-color:#22D3EE; transform:translateY(-1px)}
.wel-ctry button.on{border-color:#A3E635}
.wel-ctry .fl{grid-row:span 2; font-size:44px; line-height:1}
.wel-ctry b{font-size:19px; font-weight:500}
.wel-ctry small{color:#9FB0C8; font-size:13px}
.wel-flag{font-size:72px; line-height:1}
.wel-hello{margin:0; font-size:20px; color:#A3E635}
.wel-list{list-style:none; margin:4px 0; padding:0; display:grid; gap:8px; text-align:left}
.wel-list li{display:grid; grid-template-columns:28px 1fr; gap:8px; align-items:start; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.06); font-size:15px; line-height:1.45}
.wel .btn.wel-back{background:transparent; color:#9FB0C8; border-color:rgba(255,255,255,.14)}
@media (prefers-reduced-motion: reduce){ .wel{animation:none} .wel-ctry button{transition:none} }

.au-box{display:block; background:#EFF6FF; border:1px solid #BFDBFE; border-radius:12px; padding:10px 12px; line-height:1.6; color:var(--ink)}

.gh-steps{margin:6px 0 8px; padding-left:20px; display:grid; gap:6px; line-height:1.5}

.gh-steps{margin:6px 0 8px; padding-left:20px; display:grid; gap:6px; line-height:1.5}
/* destination picker (common.js pickPlace): map with centre pin */
.pp-box{gap:10px}
.pp-wrap{position:relative; height:min(300px,38dvh); border-radius:12px; overflow:hidden; border:1px solid var(--line)}
.pp-map{position:absolute; inset:0; background:#f2efe9}
.pp-map .leaflet-tile{filter:contrast(1.15)}
.pp-wrap .center-pin{z-index:500}
.pp-addr{min-height:2.6em; margin:0; color:var(--ink2)}
/* route change editor (common.js destChangePropose) */
.rc-list{display:grid; gap:8px}
.rc-row{display:grid; grid-template-columns:28px 1fr auto auto; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:#fff}
.rc-row.rc-dest{grid-template-columns:28px 1fr auto}
.rc-ic{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:#EEF2FF; font-size:13px; font-weight:500}
.rc-txt{line-height:1.35; min-width:0; overflow-wrap:anywhere}
.rc-txt small{color:var(--muted)}
/* driver: step-by-step route with stops (driver.js routeSteps) */
.route-steps{display:grid; gap:0; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:#fff}
.route-steps h3{margin:0 0 10px; font-size:16px}
.rs{display:grid; grid-template-columns:34px 1fr; gap:10px; position:relative; padding-bottom:14px}
.rs:last-child{padding-bottom:0}
.rs:not(:last-child)::before{content:""; position:absolute; left:16px; top:34px; bottom:0; width:2px; background:var(--line)}
.rs-n{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:15px; background:#EDE9FE; color:#6D28D9; border:2px solid #fff; box-shadow:0 0 0 1px #DDD6FE; position:relative; z-index:1}
.rs-b{display:grid; gap:6px; min-width:0}
.rs-b b{font-size:15.5px; line-height:1.3}
.rs-addr{font-size:14px; color:var(--ink2); overflow-wrap:anywhere}
.rs.cur .rs-n{background:#6D28D9; color:#fff; box-shadow:0 0 0 4px rgba(109,40,217,.18)}
.rs.cur .rs-b b{font-size:17px}
.rs.done{opacity:.55}
.rs.done .rs-n{background:#DCFCE7; color:#15803D; box-shadow:0 0 0 1px #BBF7D0}
.rs.next .rs-addr{color:var(--muted)}
.rs-undo{justify-self:start}
/* ETA line (driver on the way / arriving at the drop-off) */
.eta-box{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; background:#ECFDF5; border:1px solid #A7F3D0; color:#065F46}
.eta-box[hidden]{display:none}
.eta-box .eta-ic{font-size:24px}
.eta-box b{font-size:16px; font-weight:600}
.eta-box small{color:#047857}
/* rider: driver facts under the driver's name */
.d-info{display:flex; flex-wrap:wrap; gap:4px 10px; margin:2px 0 0; font-size:13.5px; color:var(--ink2)}
.d-info:empty{display:none}
.d-info span{white-space:nowrap}
/* rider's live position on the driver's map */
.mk-rider{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#2563EB; border:3px solid #fff; box-shadow:0 0 0 6px rgba(37,99,235,.22), 0 2px 8px rgba(0,0,0,.35); animation:riderPulse 2s ease-out infinite}
@keyframes riderPulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.45), 0 2px 8px rgba(0,0,0,.35)} 100%{box-shadow:0 0 0 16px rgba(37,99,235,0), 0 2px 8px rgba(0,0,0,.35)}}
.leaflet-tooltip.rider-tip{background:#2563EB; color:#fff; border:0; font-weight:500; padding:2px 8px; border-radius:8px}
.leaflet-tooltip.rider-tip::before{border-top-color:#2563EB}
.loc-toggle{justify-self:start; display:inline-flex; align-items:center; gap:8px; padding:5px 6px 5px 6px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); font:inherit; font-size:13.5px; cursor:pointer}
.loc-toggle .lt-ic{position:relative; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:#EEF0F3; color:#8A93A3}
.loc-toggle .lt-sw{width:34px; height:20px; border-radius:999px; background:#CBD2DC; position:relative; transition:background .2s}
.loc-toggle .lt-sw i{position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:left .2s}
.loc-toggle.on{color:#1D4ED8; border-color:#BFDBFE; background:#EFF6FF}
.loc-toggle.on .lt-ic{background:#2563EB; color:#fff}
.loc-toggle.on .lt-ic::after{content:''; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,99,235,.5); animation:ltPing 2s ease-out infinite}
.loc-toggle.on .lt-sw{background:#2563EB}
.loc-toggle.on .lt-sw i{left:16px}
@keyframes ltPing{0%{box-shadow:0 0 0 0 rgba(37,99,235,.5)}80%,100%{box-shadow:0 0 0 8px rgba(37,99,235,0)}}
@media (prefers-reduced-motion: reduce){.loc-toggle.on .lt-ic::after{animation:none}}
@media (prefers-reduced-motion: reduce){ .mk-rider{animation:none} }
.mk-rider.mk-self.mk-wait{background:var(--ok); box-shadow:0 0 0 7px rgba(27,127,75,.2), 0 2px 6px rgba(0,0,0,.3)}
.mk-rider.mk-self{width:30px; height:30px; animation:none; box-shadow:0 0 0 7px rgba(37,99,235,.2), 0 2px 6px rgba(0,0,0,.3)}
.ct-chips{display:flex; flex-wrap:wrap; gap:6px}
.rr-search{display:flex; gap:8px; margin:0 0 10px}
.rr-search input{flex:1; min-width:0}
.rr-out:not(:empty), #rrOut:not(:empty){margin-top:8px}
.rr-list{display:grid; gap:8px}
.rr{border:1px solid var(--line); border-radius:10px; padding:8px 10px; display:grid; gap:3px; background:#fff}
.rr p{margin:0}
.rr.rr-last{border-color:var(--ev); background:var(--ev-soft)}
.rr .top{display:flex; justify-content:space-between; gap:8px; align-items:center}
.pc-box{border:1.5px solid var(--warn); background:var(--warn-soft); border-radius:12px; padding:10px 12px; display:grid; gap:6px}
.pc-box p{margin:0}
.pc-list{margin:0; padding-left:18px; display:grid; gap:2px; font-size:14px}
.pc-list span{color:var(--muted)}
.pc-list s{color:var(--muted)}
.beta-fb.sup-new{margin-left:8px; color:#B45309; font-weight:600}
/* admin: ticket queue (markup from /support.js) */
.sp-adm{display:grid; gap:8px; margin-top:8px}
.sp-adm .tabs{display:flex; gap:6px; flex-wrap:wrap; border:0}
.sp-adm .tab{font:inherit; font-size:13.5px; padding:6px 12px; border-radius:20px; border:1px solid var(--line); background:#fff; color:var(--ink2); cursor:pointer}
.sp-adm .tab.active{background:var(--ink); color:#fff; border-color:var(--ink)}
.sp-adm .bk{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:grid; gap:4px}
.sp-adm .bk:hover{border-color:var(--ev)}
.sp-adm .bk p{margin:0}
.sp-adm .model{font-weight:500; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.sp-adm .meta{font-size:13px; color:var(--muted)}
.sp-adm .status{font-size:12px; font-weight:500; padding:1px 8px; border-radius:20px; border:1px solid var(--line); color:var(--muted)}
.sp-adm .status.pending{color:var(--warn); border-color:var(--warn); background:var(--warn-soft)}
.sp-adm .status.confirmed{color:var(--ok); border-color:var(--ok); background:var(--ok-soft)}
.sp-adm .badge{font-size:12px; padding:1px 8px; border-radius:20px; background:#E8590C; color:#fff}
.sp-adm .empty{color:var(--muted); text-align:center; padding:16px}
.sp-adm .bk .btn{justify-self:start}
.sp-tab-badge{display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:#E8590C; color:#fff; font-size:11.5px; line-height:18px; text-align:center}
.pay-phone{display:grid; gap:6px; justify-items:center}
.pay-phone p{margin:0}
.pay-num{font-size:26px; font-weight:600; letter-spacing:1px; font-variant-numeric:tabular-nums}
.pay-phone .amt{font-size:22px; font-weight:500}

/* rider / driver phone sheets: bigger fields, buttons and text (easier to read and tap) */
.sheet{font-size:17px}
.sheet .hint{font-size:15.5px}
.sheet .btn{font-size:17.5px; padding:12px 16px; border-radius:12px}
.sheet .btn.sm{font-size:16.5px; padding:10px 14px; border-radius:11px}
.sheet .btn.big{font-size:20px; padding:16px 20px; border-radius:15px}
.where{gap:10px}
.where .line{grid-template-columns:22px 1fr auto; gap:10px}
.where .dot{width:14px; height:14px}
.where input{font-size:21px; padding:14px; border-radius:13px; min-height:58px}
.where .line .btn.sm{min-width:54px; min-height:54px; font-size:21px; padding:6px}
.where .dot.s{width:22px; height:22px; font-size:13px}
.foot-links{font-size:17px; gap:10px 18px}
/* place rows (search results, recent places): icon · name / address · distance */
.pl-go{display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); background:transparent; padding:13px 4px; font:inherit; color:inherit; cursor:pointer}
.pl-go:last-child{border-bottom:0}
.pl-go:hover{background:var(--bg)}
.pl-ic{color:#5f6368; display:grid; place-items:center}
.pl-ic svg{width:28px; height:28px}
.pl-t{display:grid; gap:2px; min-width:0}
.pl-t b{font-weight:500; font-size:20px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pl-t small{color:var(--muted); font-size:18px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pl-d{color:var(--muted); font-size:18px; white-space:nowrap; font-variant-numeric:tabular-nums}
.rp-list{display:grid; margin:2px 0 4px}
.rp-h{margin:2px 0 0; font-size:16px; color:var(--muted); font-weight:500}
.rp-row{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; border-bottom:1px solid var(--line)}
.rp-row:last-child{border-bottom:0}
.rp-row .pl-go{border-bottom:0}
.rp-x{width:44px; height:44px; border:0; background:none; color:var(--muted); font-size:24px; line-height:1; border-radius:50%; cursor:pointer}
.rp-x:hover{background:var(--bg)}

/* quote screen: payment row, folded promo / note rows */
.q-pay{display:grid; gap:6px}
.q-more{border:1px solid var(--line); border-radius:12px; background:#fff; padding:0 14px}
.q-more>summary{cursor:pointer; padding:13px 0; font-weight:500; list-style:none; display:flex; align-items:center; gap:8px}
.q-more>summary::-webkit-details-marker{display:none}
.q-more>summary::after{content:'›'; margin-left:auto; color:var(--muted); font-size:22px; line-height:1; transition:transform .2s}
.q-more[open]>summary::after{transform:rotate(90deg)}
.q-more>.f, .q-more>p{margin:0 0 12px}
/* job offer: what the driver keeps, rider note, big accept */
.take-home{margin:0; font-size:17px}
.take-home b{font-size:21px; color:var(--ok)}
.offer-note{margin:0; padding:10px 12px; border-radius:10px; background:var(--warn-soft); color:#7A3E06}
.offer-act{grid-template-columns:1fr 2fr}
.offer .kv dt, .kv dt{white-space:nowrap}
/* how-to guide (/ride/guide) */
.guide-page{background:var(--bg)}
.g-brand{display:flex; align-items:baseline; gap:6px; text-decoration:none}
.g-logo{font-family:'Orbitron',sans-serif; font-weight:800; font-size:22px; color:#fff; letter-spacing:.5px}
.g-logo b{background:linear-gradient(92deg,#22D3EE,#A3E635); -webkit-background-clip:text; background-clip:text; color:transparent}
.g-sub{font-size:16px; color:#cbd5e1}
.g-main{max-width:760px; margin:0 auto; padding:16px 16px 56px; display:grid; gap:14px; font-size:17px}
.g-main h1{font-size:26px; margin:6px 0 0; line-height:1.3}
.g-lead{color:var(--ink2); margin:0}
.g-tabs{position:sticky; top:0; z-index:5; background:var(--bg); padding:8px 0}
.g-tabs .seg button{font-size:17px; padding:12px 8px}
.g-toc{display:flex; flex-wrap:wrap; gap:8px}
.g-toc a{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:20px; border:1px solid var(--line); background:#fff; color:var(--ink); text-decoration:none; font-size:15px}
.g-why{background:linear-gradient(135deg,#0A1020,#12324A); color:#fff; border-radius:16px; padding:16px; display:grid; gap:10px}
.g-why h2{margin:0; font-size:20px}
.g-why ul{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.g-why li{display:grid; grid-template-columns:28px 1fr; gap:8px; align-items:start; line-height:1.45}
.g-why li small{display:block; color:#B7C3D9; font-size:14.5px}
.g-sec{background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; display:grid; gap:10px; scroll-margin-top:72px}
.g-sec h2{font-size:20px; margin:0; display:flex; gap:10px; align-items:center; line-height:1.3}
.g-steps{margin:0; padding-left:24px; display:grid; gap:9px; line-height:1.5}
.g-steps li::marker{font-weight:600; color:var(--ev)}
.g-steps b{font-weight:500}
.g-tip{margin:0; padding:10px 12px; border-radius:12px; background:var(--ev-soft); color:#0B4F5C; font-size:15.5px; line-height:1.5}
.g-tip.warn{background:var(--warn-soft); color:#7A3E06}
.g-cta{display:grid; gap:10px}
.g-foot{color:var(--muted); font-size:14px; text-align:center}
/* driver / rider cards: let the facts wrap (no sideways overflow); plate easy to read */
.person{grid-template-columns:48px minmax(0,1fr) auto}
.d-info span{white-space:normal}
.plate-row{margin:4px 0}
.sheet .plate-row .plate{font-size:19px; padding:4px 12px; letter-spacing:1.5px}
.rp-row.rp-row3{grid-template-columns:minmax(0,1fr) auto auto}
.rp-x.rp-star{font-size:22px; color:#D99A00}
.tip-ask{border:1.5px solid var(--ok); background:var(--ok-soft); display:grid; gap:10px}
.tip-ask p{margin:0}

/* driver: big on / off button */
.online-toggle{grid-template-columns:1fr; gap:10px; padding:14px}
.go-btn{width:100%; min-height:64px; border:0; border-radius:16px; font:inherit; font-size:22px; font-weight:600; letter-spacing:.3px; cursor:pointer;
  color:#0A1020; background:linear-gradient(92deg,#22D3EE,#A3E635); box-shadow:0 8px 22px rgba(34,197,94,.35); animation:goPulse 2s ease-in-out infinite}
.go-btn.on{animation:none; color:#fff; background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.55); box-shadow:none; font-size:20px}
.go-btn:disabled{opacity:.6}
@keyframes goPulse{0%,100%{box-shadow:0 8px 22px rgba(34,197,94,.30)} 50%{box-shadow:0 8px 30px rgba(34,197,94,.65)}}
.online-toggle.on .plate{color:#0A1020}

/* DLT permit data */
.cx-card h4.cx-h{margin:14px 0 4px; font-size:15px; color:var(--muted); border-top:1px solid var(--line, rgba(0,0,0,.08)); padding-top:10px}
.cx-prog{display:flex; gap:6px; flex-wrap:wrap; margin:6px 0}
.f input.bad, .f select.bad{border-color:var(--bad, #DC2626); box-shadow:0 0 0 3px rgba(220,38,38,.15)}
.cx-adm{margin:8px 0; padding:10px; border-radius:12px; background:rgba(14,124,148,.06)}
.cx-adm summary{cursor:pointer; display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.cx-adm dl{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:8px 0; font-size:14px}
.cx-adm dt{color:var(--muted)} .cx-adm dd{margin:0; word-break:break-word}
.cx-adm dd.exp{color:var(--bad, #DC2626); font-weight:600} .cx-adm dd.soon{color:#B45309; font-weight:600}

/* earnings summary (day / week / month) */
.sum-head{flex-wrap:wrap; gap:8px} .sum-head h3{margin:0}
.sum-now{margin-top:10px}
.sum-now > p.hint{margin:0}
.sum-big{font-size:34px; font-weight:700; margin:4px 0 0; line-height:1.1}
.sum-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:10px 0 4px}
.sum-grid > div{background:var(--bg); border-radius:10px; padding:7px 9px; min-width:0}
.sum-grid small{display:block; color:var(--muted); font-size:12.5px; line-height:1.25}
.sum-grid b{font-size:16px; overflow-wrap:anywhere}
.sum-past-h{margin:14px 0 4px; font-weight:600; color:var(--muted)}
.sum-list{display:grid; gap:6px}
.sum-row{border:1px solid var(--line); border-radius:12px; padding:9px 12px; background:#fff}
.sum-row summary{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; cursor:pointer; list-style:none}
.sum-row summary::-webkit-details-marker{display:none}
.sr-l{display:grid; line-height:1.3} .sr-l small{color:var(--muted); font-size:13px}
.sr-v{text-align:right; font-size:17px}
.sum-row[open]{background:var(--card)}
/* admin → GPS รถ (fleet.js) + /ride/beacon */
.fl-map{height:340px; margin:8px 0 12px}
.fl-box{width:min(480px,100%)}
.fl-copy{display:grid; gap:4px; font-size:13px; color:var(--ink2)}
.fl-copy-row{display:flex; gap:6px}
.fl-copy-row input{flex:1; min-width:0; font:13px ui-monospace,Menlo,monospace; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink)}
.fl-qr svg{max-width:200px; height:auto; background:#fff; padding:6px; border-radius:10px}
.fl-note{background:var(--warn-soft); color:var(--ink); padding:10px 12px; border-radius:10px}
.fl-play{display:grid; grid-template-columns:1fr; gap:4px; margin:10px 0}
.fl-play input{width:100%}
.fl-stop{text-align:left; cursor:pointer; font:inherit; color:inherit; width:100%}
.beacon{max-width:480px; margin:0 auto; padding:16px; display:grid; gap:12px}
.beacon-btn{font-size:22px; padding:22px; border-radius:18px}
.beacon .stat b{font-size:18px}
.admin-map{position:relative; z-index:0}   /* keep Leaflet panes under .rmodal */
.fl-range{display:grid; grid-template-columns:1fr auto; gap:6px; margin:10px 0}
.fl-range input,.fl-range select{font:inherit; font-size:15px; padding:7px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); min-width:0}

/* named pins: labels on the map + naming box in pin mode */
.mk-pl{position:relative; display:block; width:10px; height:10px}
.mk-pl i{position:absolute; inset:0; border-radius:50%; background:#7C3AED; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.35)}
.mk-pl b{position:absolute; left:13px; top:50%; transform:translateY(-50%); white-space:nowrap; font:600 12.5px/1.2 Kanit, system-ui, sans-serif; color:#4C1D95;
  text-shadow:0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; max-width:160px; overflow:hidden; text-overflow:ellipsis}
.pn-box{margin-top:2px}
.pn-form{display:grid; gap:6px; text-align:left}
.pn-form .hint{margin:0}
.pn-row{display:grid; grid-template-columns:1fr auto; gap:8px}
.linkish{background:none; border:0; padding:6px 2px; font:inherit; font-weight:500; color:var(--ev); text-decoration:underline; text-underline-offset:3px; cursor:pointer}

/* places nearby (pin mode) */
.nc-box{min-height:64px; text-align:left}
.nc-h{margin:2px 0 6px; font-size:13px; color:var(--muted)}
.nc-row{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; -webkit-overflow-scrolling:touch}
.nc-chip{flex:0 0 auto; display:grid; gap:1px; max-width:220px; padding:7px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; text-align:left; cursor:pointer; font:inherit; color:var(--ink)}
.nc-chip b{font-size:14.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nc-chip small{font-size:12px; color:var(--muted)}
.nc-chip.pin{border-color:#C4B5FD; background:#F5F3FF}
.nc-chip.on{border-color:var(--ev); box-shadow:0 0 0 2px var(--ev-soft)}
.pa-n{display:inline-block; max-width:100%; padding:5px 14px; border:1.5px solid #9FD3DD; border-radius:12px; background:var(--ev-soft); color:var(--ev); font-size:18px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; box-shadow:0 1px 3px rgba(14,124,148,.15)}
.pa-a{display:block; margin-top:5px; font-size:13.5px; font-weight:400; color:var(--muted)}
.nc-load{display:grid; gap:4px; margin:2px 0 6px}
.nc-load small{font-size:12.5px; color:var(--muted)}
.nc-bar{position:relative; display:block; height:3px; border-radius:2px; background:var(--line); overflow:hidden}
.nc-bar::after{content:''; position:absolute; top:0; bottom:0; left:-40%; width:40%; border-radius:2px; background:var(--ev); animation:ncBar 1.1s ease-in-out infinite}
@keyframes ncBar{to{left:100%}}
.nc-box.loading .nc-h{display:none}
.nc-box.loading .nc-row{opacity:.45; pointer-events:none}

.pn-links{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px}
.pn-rep{color:var(--warn)}
.pr-reasons{display:grid; gap:6px}
.mk-rep{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.35); font-size:13px}
.pr-card{border-color:var(--warn)}
.item.flash{box-shadow:0 0 0 3px var(--ev); transition:box-shadow .3s}
.pr-reasons label.check{display:flex; align-items:center; gap:10px; margin:0}
.pr-reasons label.check input{width:20px; height:20px; margin:0; flex:0 0 auto}
/* never wider than the screen: the sheet's single column can't grow to fit wide content (e.g. the nearby-places chip row) */
.sheet{grid-template-columns:minmax(0, 1fr)}
.sheet > *, .nc-box, .nc-row{min-width:0; max-width:100%}
.sum-grid small + small{margin-top:1px}
#jhBack, #afBack{justify-self:start}

/* rider credit */
#paySeg button{display:grid; justify-items:center; line-height:1.2}
.pay-bal{font-size:12px; opacity:.8}
.w-tiers{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px}
.w-tiers > div{display:grid; gap:1px; padding:10px 12px; border-radius:12px; background:var(--ok-soft)}
.w-tiers span{font-weight:700; color:var(--ok); font-size:18px}
.w-tiers small{color:var(--muted)}
.w-get{margin:4px 0 10px}
.wallet-low{display:flex; align-items:center; justify-content:space-between; gap:10px}
.wallet-low p{margin:0}
.rw-pct{display:grid; grid-template-columns:1fr auto; gap:6px}
#whoSeg{margin-bottom:8px}
.w-packs{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin:6px 0 10px}
.w-pack{display:grid; gap:2px; padding:12px; border:2px solid var(--line); border-radius:14px; background:#fff; text-align:left; cursor:pointer; font:inherit; color:var(--ink)}
.w-pack b{font-size:22px} .wp-pay{font-size:13px; color:var(--muted)} .wp-off{font-size:12.5px; color:var(--ok); font-weight:600}
.w-pack.on{border-color:var(--ev); background:var(--ev-soft)} .w-pack:disabled{opacity:.45; cursor:not-allowed}
.w-terms ol{margin:8px 0 0; padding-left:20px; display:grid; gap:6px; font-size:14px; color:var(--ink2)}
.w-agree{display:flex; align-items:flex-start; gap:10px; margin:10px 0; font-weight:500}
.w-agree input{width:22px; height:22px; flex:0 0 auto; margin-top:2px}
.w-paybtns{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0}
.w-paybtns .btn{font-size:17px; padding:14px 8px}
/* coupon-pack terms: a short scrollable box so the pay buttons stay close */
.w-terms ol{max-height:190px; overflow-y:auto; overscroll-behavior:contain; padding-right:8px; -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(to bottom, #000 85%, transparent); -webkit-mask-image:linear-gradient(to bottom, #000 85%, transparent)}
.w-terms ol::-webkit-scrollbar{width:6px} .w-terms ol::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}
.w-terms .hint{margin:6px 0 0}
/* driver face scan (face.js): mirrored front camera, oval guide, arrow for the head-turn step */
.face-modal{z-index:60}
.face-terms{max-height:180px; overflow-y:auto; overscroll-behavior:contain; font-size:13px; line-height:1.55; color:var(--ink2); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.face-cam{position:relative; width:100%; aspect-ratio:3/4; max-height:52dvh; border-radius:14px; overflow:hidden; background:#0A1020; margin:0 auto}
.face-cam video{width:100%; height:100%; object-fit:cover; transform:scaleX(-1)}
.face-ring{position:absolute; left:50%; top:46%; width:62%; aspect-ratio:3/4; transform:translate(-50%,-50%); border:3px dashed rgba(255,255,255,.75); border-radius:50%; transition:border-color .2s}
.face-ring.ok{border:3px solid #3BD38A}
.face-arrow{position:absolute; left:0; right:0; bottom:10px; text-align:center; font-size:44px; line-height:1; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6)}
.face-steps{display:flex; gap:6px; justify-content:center}
.face-steps i{width:34px; height:6px; border-radius:3px; background:var(--line)}
.face-steps i.on{background:var(--ok)}
.face-say{text-align:center; font-size:17px; font-weight:500; margin:0; min-height:1.5em}
.face-say.bad{color:var(--bad)} .face-say.ok{color:var(--ok)}
.face-state{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.face-state img{width:64px; height:64px; object-fit:cover; border-radius:50%; border:2px solid var(--line)}
.face-adm-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px}
.face-adm-grid figure{margin:0; display:grid; gap:2px; font-size:12px; text-align:center}
.face-adm-grid img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:8px; border:2px solid var(--line)}
.face-adm-grid .bad img{border-color:var(--bad)}
.face-adm-grid .face-gone{aspect-ratio:3/4; display:grid; place-items:center; text-align:center; padding:6px; border-radius:8px; border:2px dashed var(--line); color:var(--muted); font-size:12px}
/* admin: country picker + where each setting comes from (this country / shared / one value for all) */
.cc-seg{margin:6px 0 10px}
.cc-h{margin:14px 0 6px}
.cc-badge{display:inline-block; font-style:normal; font-size:.72rem; font-weight:600; padding:1px 7px; border-radius:999px; margin-left:4px; vertical-align:middle; border:1px solid transparent}
.cc-badge.own{background:var(--ev-soft); color:var(--ev)}
.cc-badge.shared{background:none; border-color:var(--line); color:var(--muted); text-decoration:none; padding:1px 7px}
.cc-badge.glob{background:var(--bg); color:var(--muted)}
/* suggested pickup points (ride_map_places kind 'pickup') */
.pk-box:empty{min-height:0}
.pk-box .nc-h{color:var(--ev); font-weight:600}
.nc-chip.pk{border-color:var(--ev); background:var(--ev-soft)}
.mk-pl.pk i{background:#fff; border-color:var(--ev); width:18px; height:18px; inset:-4px; display:grid; place-items:center; font-size:10px; font-style:normal; line-height:1}
.mk-pl.pk b{color:var(--ev); left:17px}
/* "driver has arrived" banner (rider + driver): green, gently pulsing, waiting timer */
.arr-banner{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px; color:#fff;
  background:linear-gradient(135deg, #12804A, #22A35F); box-shadow:0 0 0 0 rgba(34,163,95,.55); animation:arrPulse 1.8s ease-out infinite}
.arr-ic{flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-items:center; font-size:24px; animation:arrBounce 1.8s ease-in-out infinite}
.arr-tx{flex:1; min-width:0; display:grid; gap:3px}
.arr-tx b{font-size:19px; font-weight:600; line-height:1.25}
.arr-tx span{font-size:14px; opacity:.95; line-height:1.4}
.arr-tx .plate{color:var(--ink); font-size:13px; padding:1px 6px; white-space:nowrap}
.arr-tx .arr-wait{justify-self:start; margin-top:3px; opacity:1; font-size:12.5px; font-weight:600; background:rgba(0,0,0,.18); padding:3px 9px; border-radius:999px; white-space:nowrap; font-variant-numeric:tabular-nums}
@keyframes arrPulse{0%{box-shadow:0 0 0 0 rgba(34,163,95,.55)}70%{box-shadow:0 0 0 14px rgba(34,163,95,0)}100%{box-shadow:0 0 0 0 rgba(34,163,95,0)}}
@keyframes arrBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion: reduce){.arr-banner,.arr-ic{animation:none}}
/* driver: my cars (several per driver) */
.veh-box{max-height:88vh; overflow:auto}
.veh-list{display:flex; flex-direction:column; gap:8px; margin:8px 0}
.veh-row{display:grid; grid-template-columns:36px 1fr auto; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff}
.veh-row.on{border-color:var(--ev); box-shadow:0 0 0 2px color-mix(in srgb,var(--ev) 25%,transparent)}
.veh-ic{font-size:24px; text-align:center}
.veh-tx{display:flex; flex-direction:column; gap:2px; min-width:0}
.veh-tx b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.veh-tx small{color:var(--muted)}
.veh-tx .plate{align-self:flex-start; margin-top:2px}
.veh-act{display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.veh-add{margin:8px 0}
.veh-add summary{cursor:pointer; font-weight:600; padding:8px 0}
.online-toggle .veh-sw{font-size:13px; padding:2px 4px}
.online-toggle.on .veh-sw{color:#9FE3B8}
.sheet .veh-row .btn.sm{font-size:14px; padding:6px 10px}
/* admin: car classes as tick boxes (a car can be XL + Premium) */
.vt-checks{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:6px 0}
.vt-checks .vt-chk{display:inline-flex; align-items:center; gap:5px; font-size:14px; white-space:nowrap; cursor:pointer}
.vt-checks .vt-chk input{width:18px; height:18px; accent-color:var(--ev)}
.vt-checks small{flex-basis:100%}
/* call screen: mic · speaker · hang up */
.callui .row3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:min(380px,90vw)}
.callui .row3 .btn{padding:12px 6px; font-size:15px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:64px}
.callui .call-spk.on{background:var(--ev); border-color:var(--ev); color:#fff}
.mem-search{gap:8px; margin:6px 0}
.mem-search input{flex:1; min-width:0}
.sugg-none{padding:12px 14px; display:grid; gap:8px; justify-items:start}
/* place search results: kind icon (emoji), ⚠ report, Overture credit */
.pl-emo{font-size:22px; line-height:1}
.rp-row .rp-x[data-rep]{font-size:17px; color:#b06000; width:38px}
.sr-credit{margin:0; padding:6px 4px 8px; font-size:11px; color:var(--muted); line-height:1.35}
#ppRes .pl-go, #ppRes .rp-row{text-align:left}
/* searching: a spinning row on top, earlier results dimmed */
.sr-load{display:flex; align-items:center; gap:10px; padding:12px 6px; color:var(--muted); font-size:17px}
.sr-load .spinner{width:20px; height:20px; margin:0; flex:none}
.busy > :not(.sr-load){opacity:.45; transition:opacity .15s}
/* × inside a place field (shown only when it has text) */
.where .inx{position:relative; display:block; min-width:0}
.where .inx input{padding-right:46px}
.inx-x{position:absolute; right:4px; top:50%; transform:translateY(-50%); width:40px; height:40px; border:0; border-radius:50%; background:none; color:var(--muted); font-size:26px; line-height:1; cursor:pointer; display:grid; place-items:center}
.inx-x:hover{background:var(--line)}
.inx input:placeholder-shown + .inx-x{display:none}