/* CityConnector responsive visual system, shared by rider, driver and admin. */
.google-route-preview{height:220px;min-width:240px;width:100%;margin-top:12px;border:1px solid #dce7e1;border-radius:12px;overflow:hidden;background:#edf3ef;padding:0}.google-route-attribution{font:400 13px Arial,sans-serif;color:#5e5e5e;white-space:nowrap;margin:8px 0}.row:has([data-google-route])>div{width:calc(100% - 30px)}
:root{--accent:#087d70;--accent-dark:#056457;--teal:#123f38;--bg:#f5f8f6;--border:#dce7e1;--text:#193a33;--muted:#62766e;--soft:#e6f2ec;--soft-2:#edf3ef;--danger:#a52d35}
body{line-height:1.55;background:var(--bg)}
#app{max-width:1120px;background:transparent;min-height:100dvh;padding-bottom:24px}
.content{padding:28px 32px 40px;overflow:visible;width:100%;max-width:820px;align-self:center}
.topbar{padding:24px 32px;background:white;border-bottom:1px solid var(--border);gap:12px;flex-wrap:wrap}
.wordmark{font-size:23px;letter-spacing:-1px}.brand-symbol{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--accent);color:white;font-size:27px;font-weight:700}
.mode-switch{padding:10px 32px;background:#e5eee8;color:#37554a}.mode-switch .btn{min-height:36px}
.nav-tabs{background:white;padding:0 32px;gap:24px}.nav-tab{padding:15px 20px}.nav-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.h1{font-size:32px;letter-spacing:-1px;margin-bottom:24px}.h2{font-size:22px}.h3{font-size:16px}.muted{font-weight:500;font-size:13px;overflow-wrap:anywhere}
.card{border-radius:20px;padding:22px;box-shadow:0 5px 20px #163d2b05}.card[data-click]{transition:box-shadow .18s,border-color .18s}.card[data-click]:hover{border-color:#8fb7a7;box-shadow:0 9px 26px #163d2b0d}
.btn{border-radius:12px;min-height:46px;font-weight:700;transition:background .15s,transform .15s}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--accent);box-shadow:none}.btn-primary:hover{background:var(--accent-dark)}.btn-outline{border-color:#b9cfc3;background:white;color:var(--teal)}.btn:disabled{opacity:.55;cursor:wait}.btn-small{min-height:38px}
.text-input,input.text-input,select.text-input{background:white;border:1px solid #cbdad2;border-radius:12px;padding:14px;font-size:16px;min-height:48px;max-width:100%}.text-input:focus,input.text-input:focus,select.text-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #087d701a;outline:none}.block-label{font-size:11px;letter-spacing:1.1px;color:#526b60;margin-bottom:8px}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #219b85;outline-offset:3px}input[type=radio],input[type=checkbox]{accent-color:var(--accent)}
.row>div{min-width:0}.row{flex-wrap:wrap}.row.gap:has(input[name=from]){flex-wrap:nowrap}
.badge,.pill{border-radius:8px;font-size:11px;letter-spacing:.2px}.badge.confirmed{background:#e0f2e9;color:#246346}.hint-banner{background:#eaf3ee;color:#345847;border:1px solid #cbded3;border-radius:12px;padding:14px}.empty-state{padding:40px 24px;background:#edf3ef;border:1px dashed #bdcec3}.empty-state .title{font-size:17px;color:var(--teal)}
.route-chip{border:1px solid #ccdcd2;background:white;color:var(--teal);border-radius:30px;padding:10px 16px}.route-chip-row{gap:8px;margin-bottom:24px}.stepper{border-radius:12px;background:var(--soft)}
.welcome-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:30px 32px}.welcome-layout{display:grid;grid-template-columns:1.25fr 1fr;margin:12px 32px 0;background:white;border:1px solid var(--border);border-radius:28px;overflow:hidden}.welcome-story{background:#e6f0e8;padding:46px 40px 0;overflow:hidden}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--accent)}.welcome-story h1{font-size:clamp(34px,4.2vw,53px);line-height:1.12;letter-spacing:-2px;margin:20px 0}.welcome-story p{max-width:340px;color:#536b5e;font-size:16px}.journey-art{width:calc(100% + 80px);margin:12px -40px -8px;display:block}.welcome-login{padding:48px 38px;align-self:center}.welcome-login h2{font-size:28px;line-height:1.2;letter-spacing:-1px;margin:16px 0}.intro-copy{color:var(--muted);margin-bottom:28px}.welcome-login form{margin:24px 0}.welcome-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:40px 48px}.welcome-benefits span{font-size:11px;letter-spacing:1.5px;color:var(--accent);font-weight:800}.welcome-benefits h3{font-size:17px;margin:10px 0}.welcome-benefits p{font-size:14px;color:var(--muted);margin:0}
.auth-hero.compact{margin:0 0 28px;padding:26px;background:var(--teal);border-radius:20px}.auth-hero-deco{opacity:.2}#app[data-screen=authOtp] .content,#app[data-screen=authProfile] .content{max-width:620px;padding-top:32px!important}.driver-documents{margin:0;min-width:0;border:1px solid #7fbc9b;border-radius:16px;background:#edf7f0;padding:20px}.driver-documents summary{font-size:17px;color:#146c4c}.driver-documents input{display:block;margin-top:8px;font-size:13px}.driver-documents[hidden]{display:none!important}label.card:has(input[type=radio]:checked){background:#eaf5ee;border-color:#16846e;box-shadow:0 0 0 1px #16846e}label.card:has(input[type=radio]){align-items:center}
.search-hero{padding:26px 32px;background:#e3eee6;border-radius:24px;margin-bottom:28px}.search-hero h1{font-size:40px;line-height:1.12;letter-spacing:-1.5px;margin:14px 0}.search-hero p{color:#567363;margin:0}.content form[data-form=submitSearch]{background:white;border:1px solid var(--border);border-radius:22px;padding:26px}.map-box{border:1px solid var(--border);border-radius:20px}.watermark{display:none}
details{padding:12px 0}summary{color:var(--teal)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#bbcec3;border-radius:8px}
#admin-app{max-width:1280px}.admin-topbar{padding:20px 0}.admin-stat{border-radius:18px;padding:22px;border-top:3px solid var(--accent)}.admin-stat .num{font-size:32px}.admin-tabs{gap:4px;overflow-x:auto}.admin-tab{min-height:48px}.admin-table-wrap{border-radius:18px;margin-top:20px}table.admin-table th{background:#edf4ef;padding:16px}table.admin-table td{padding:16px}.admin-login-wrap{background:white;border:1px solid var(--border);border-radius:24px;padding:28px}
@media(min-width:900px){#app[data-screen=riderSearch] .content{max-width:960px}#app[data-screen=riderSearch] .search-hero{padding:38px 42px}#app[data-screen=driverHome] .content{max-width:960px}}
@media(max-width:600px){#app{padding-bottom:12px}.content{padding:22px 18px 30px}.topbar{padding:18px;gap:8px}.wordmark{font-size:20px}.mode-switch{padding:8px 18px}.nav-tabs{padding:0 18px}.h1{font-size:28px}.card{padding:17px;border-radius:16px}.welcome-nav{padding:22px 20px}.welcome-nav>.pill{display:none}.welcome-layout{display:flex;flex-direction:column;margin:0 14px;border-radius:22px}.welcome-story{padding:28px 26px 0}.welcome-story h1{font-size:36px;margin:14px 0}.welcome-story p{font-size:14px}.journey-art{height:150px;width:calc(100% + 52px);margin:0 -26px -6px}.welcome-login{padding:28px 24px;width:100%}.welcome-login h2{font-size:25px}.welcome-benefits{grid-template-columns:1fr;padding:28px;gap:24px}.search-hero{padding:24px}.search-hero h1{font-size:33px}.content form[data-form=submitSearch]{padding:18px}.text-input{padding:12px}#admin-app{padding:18px 14px 40px}.admin-topbar{flex-wrap:wrap;gap:12px}.driver-documents{padding:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Feature request (2026-09-20): move the search-results filter/sort panel
   to the right on wide screens. .results-filters comes FIRST in the DOM
   (so mobile, which never matches the media query below, keeps the exact
   markup order and collapsed <details> behaviour it always had -- filter
   panel above the results list, closed until tapped); flex-direction:
   row-reverse on wide screens visually swaps that to "results on the
   left, filters on the right" without touching the DOM or any JS state. */
.results-layout{display:flex;flex-direction:column;gap:16px}
.results-main{min-width:0}
@media(min-width:900px){
  #app[data-screen=riderResults] .content{max-width:1080px}
  .results-layout{flex-direction:row-reverse;align-items:flex-start;gap:28px}
  .results-main{flex:1}
  .results-filters{flex:0 0 300px;position:sticky;top:20px}
  .results-filters details{background:white;border:1px solid var(--border);border-radius:16px;padding:18px;margin:0}
  /* app.js renders <details open> itself on a wide screen (see
     riderFilters() -- a CSS-only "force this open" rule doesn't reliably
     beat Chromium's own closed-<details> content hiding). The <summary>
     just becomes a plain, non-clickable heading here (no disclosure
     triangle) instead of a toggle, so nothing on this screen can flip it
     back closed while it's meant to stay put. */
  .results-filters summary{pointer-events:none;cursor:default;list-style:none;font-weight:700;margin-bottom:12px}
  .results-filters summary::-webkit-details-marker{display:none}
}
/* Manual OTP entry, with an explicitly labelled test code when enabled. */
.otp-screen { background: #f8fbff; }
.otp-recipient, .otp-label, .otp-expiry { color: #617695; font-size: 14px; }
.otp-recipient { margin-top: 4px; }
.otp-demo { margin-top: 26px; padding: 16px 12px 12px; border: 1px dashed #4267ff; border-radius: 12px; background: #f0f4f9; text-align: center; }
.otp-demo-label { color: #617695; font-size: 11px; letter-spacing: 1.3px; }
.otp-demo-code { display: block; margin-top: 8px; color: #315de0; font-size: 32px; line-height: 1.2; letter-spacing: 2px; }
.otp-label { display: block; margin-bottom: 8px; }
.otp-screen .otp-entry { height: 64px; border: 1px solid #455b87; border-radius: 9px; background: white; font-size: 24px; letter-spacing: 5px; }
.otp-screen .otp-verify { min-height: 48px; border-radius: 8px; background: #315bd2; color: white; font-weight: 700; }
.otp-screen .otp-verify:disabled { opacity: .55; }
.otp-expiry { margin-top: 15px; text-align: center; font-size: 13px; }
.otp-test-note { margin: 10px 0 0; color: #617695; text-align: center; font-size: 12px; }