/* ============================================================
   ZAPRIDE — Design system: "Printed transit cardstock"
   ------------------------------------------------------------
   Concept: everything in this app reads as an official Mumbai
   transit document — a suburban rail ticket, a conductor's ink
   stamp, the yellow/black hazard tape of a kaali-peeli taxi or
   a street barricade. Thick die-cut borders + hard offset
   shadows (not soft SaaS blur) simulate printed card stock with
   real depth. One coherent system, three expressions:
     1. Ticket-stub cards (route + fare, perforated tear-line)
     2. Ink-stamp badges (circular, double-ring, rotated)
     3. Hazard-stripe dividers (diagonal yellow/black repeat)
   ============================================================ */

:root{
  --ink:        #0E0F10;
  --ink-soft:   #26282C;
  --paper:      #F5EFDE;
  --paper-dim:  #EAE1C7;
  --zip-yellow: #FFC400;
  --zip-yellow-dark: #E0AC00;
  --signal-green: #16A34A;
  --signal-green-dim: #DFF5E6;
  --rust:       #E03A2F;
  --rust-dim:   #FBE2DF;
  --grey:       #83807A;
  --grey-line:  #D9CFB4;

  --font-display: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --radius: 3px;
  --border: 2px solid var(--ink);
  --shadow-hard: 5px 5px 0 var(--ink);
  --shadow-hard-sm: 3px 3px 0 var(--ink);
  --shadow-card: var(--shadow-hard-sm);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle, rgba(14,15,16,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:3px solid var(--zip-yellow); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

h1,h2,h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:-0.02em;
  line-height:.98;
  margin:0 0 .4em;
}
h1{ font-size:clamp(2.3rem,6vw,4.2rem); }
h2{ font-size:clamp(1.5rem,3.4vw,2.3rem); }
h3{ font-size:1.15rem; letter-spacing:-0.01em; }
p{ margin:0 0 1em; color:var(--ink-soft); }
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grey);
  font-weight:700;
}

/* ---------- Layout ---------- */
.container{ max-width:1080px; margin:0 auto; padding:0 20px; }
@media (min-width:1400px){ .container{ max-width:1280px; } }

/* ---------- Native app shell (Capacitor-wrapped Android/iOS build) ----------
   Only applied when html.native-app is present (added by native-bridge.js
   when actually running inside the wrapped app) — regular mobile browser
   visitors get none of this. Removes the specific things that make a
   wrapped website feel like "just a browser": the pull-to-refresh bounce,
   text-selection callouts on tap-and-hold, and pinch-zoom. */
html.native-app, html.native-app body {
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-x pan-y;
}
/* Still needs to work normally inside actual text fields — only the chrome
   around them (buttons, cards, nav) should lose the browser-y selection
   and callout behavior. */
html.native-app input,
html.native-app textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.container-narrow{ max-width:520px; margin:0 auto; padding:0 20px; }
.section{ padding:56px 0; }
.stack{ display:flex; flex-direction:column; gap:16px; }
/* Admin list pages (users, drivers, rides) — on a wide desktop monitor a
   single-column stack wastes most of the screen; this gives those pages a
   real 2-column layout on desktop while staying single-column on mobile,
   without touching .stack itself (used far too widely elsewhere — forms,
   button groups — to safely make responsive). */
.admin-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:900px){ .admin-grid{ grid-template-columns:1fr 1fr; align-items:start; } }
.row{ display:flex; align-items:center; gap:12px; }
.row.between{ justify-content:space-between; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:720px){ .grid-2{ grid-template-columns:1fr; } }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:720px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .grid-3{ grid-template-columns:1fr; } }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:720px){ .grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .grid-4{ grid-template-columns:1fr; } }

/* ---------- Hazard-stripe divider (signature element #3) ----------
   Diagonal yellow/black repeat, pulled from kaali-peeli taxi livery
   and street barricade tape. Used sparingly as a section accent. */
.hazard-divider{
  height:10px;
  background: repeating-linear-gradient(135deg,
    var(--zip-yellow), var(--zip-yellow) 14px,
    var(--ink) 14px, var(--ink) 28px);
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--ink); color:var(--paper);
  border-bottom:4px solid var(--zip-yellow);
}
.nav-inner{
  max-width:1080px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
}
.brand{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:1.2rem; letter-spacing:-.02em; text-decoration:none; color:var(--paper);
  display:flex; align-items:center; gap:8px;
}
.brand .dot{ width:10px; height:10px; background:var(--zip-yellow); border-radius:50%; display:inline-block; }
.nav-links{ display:flex; gap:22px; font-size:.92rem; flex-wrap:wrap; row-gap:8px; }
.nav-links a{ text-decoration:none; color:var(--paper); opacity:.82; }
.nav-links a:hover{ opacity:1; }
@media (max-width:420px){
  .nav-links{ gap:14px; }
}
.nav-cta{
  background:var(--zip-yellow); color:var(--ink); padding:9px 16px; border-radius:var(--radius);
  font-weight:800; text-decoration:none; font-size:.9rem; border:2px solid var(--ink);
}

/* ---------- Buttons ----------
   Hard offset shadow that collapses on press, like stamping a
   ticket — the button visibly "hits the paper". */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:800; font-size:.95rem;
  padding:13px 20px; border-radius:var(--radius); border:2px solid var(--ink);
  cursor:pointer; text-decoration:none;
  transition:transform .08s ease, box-shadow .08s ease;
  width:100%;
  box-shadow:var(--shadow-hard-sm);
}
.btn:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.btn:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--ink); }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--ink-soft); }
.btn-accent{ background:var(--zip-yellow); color:var(--ink); }
.btn-accent:hover{ background:var(--zip-yellow-dark); }
.btn-outline{ background:var(--paper); border-color:var(--ink); color:var(--ink); }
.btn-danger{ background:var(--paper); border-color:var(--rust); color:var(--rust); box-shadow:3px 3px 0 var(--rust); }
.btn-danger:hover{ background:var(--rust-dim); box-shadow:4px 4px 0 var(--rust); }
.btn-danger:active{ box-shadow:0 0 0 var(--rust); }
.btn[disabled]{ opacity:.4; cursor:not-allowed; box-shadow:none; transform:none; }
.btn-sm{ padding:9px 14px; font-size:.82rem; width:auto; box-shadow:2px 2px 0 var(--ink); }
.btn-sm:hover{ box-shadow:3px 3px 0 var(--ink); }
.btn-sm:active{ box-shadow:0 0 0 var(--ink); }

/* ---------- Forms ---------- */
label{ display:block; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:6px; }
input, select, textarea{
  width:100%; padding:13px 14px; border:2px solid var(--ink); border-radius:var(--radius);
  font-size:1rem; font-family:var(--font-body); background:#fff; color:var(--ink);
}
input:focus, select:focus, textarea:focus{ outline:none; box-shadow:3px 3px 0 var(--zip-yellow); }
.field{ margin-bottom:16px; }
.hint{ font-size:.8rem; color:var(--grey); margin-top:6px; }
.error-text{ font-size:.82rem; color:var(--rust); margin-top:6px; }
.otp-inputs{ display:flex; gap:10px; }
.otp-inputs input{ text-align:center; font-family:var(--font-mono); font-size:1.4rem; letter-spacing:.1em; padding:12px 0; }

/* ---------- Card ---------- */
.card{
  background:#fff; border:2px solid var(--ink); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow-hard-sm);
}

/* ---------- Badge / status ---------- */
.badge{
  display:inline-block; font-family:var(--font-mono); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; padding:4px 10px; border-radius:20px;
  border:1.5px solid currentColor;
}
.badge-green{ background:var(--signal-green-dim); color:var(--signal-green); }
.badge-yellow{ background:#FFF3D0; color:#8A6300; }
.badge-rust{ background:var(--rust-dim); color:var(--rust); }
.badge-grey{ background:var(--paper-dim); color:var(--grey); border-color:var(--grey-line); }

/* ============================================================
   SIGNATURE ELEMENT #2 — Ink-stamp badge
   Circular, double-ring, slightly rotated — like a conductor's
   verification stamp on a ticket. Used for status/verification:
   KYC approved, ratings, active zones.
   ============================================================ */
.stamp{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:84px; height:84px; border-radius:50%; flex:none;
  border:2.5px solid currentColor; outline:2px solid currentColor; outline-offset:3px;
  font-family:var(--font-mono); font-weight:800; text-transform:uppercase;
  font-size:.64rem; letter-spacing:.03em; text-align:center; line-height:1.2;
  transform:rotate(-8deg);
  padding:4px;
}
.stamp .stamp-big{ font-size:1.15rem; letter-spacing:0; }
.stamp-yellow{ color:var(--ink); background:var(--zip-yellow); }
.stamp-green{ color:var(--signal-green); background:var(--signal-green-dim); }
.stamp-red{ color:var(--rust); background:var(--rust-dim); }
.stamp-sm{ width:56px; height:56px; font-size:.52rem; outline-offset:2px; }
.stamp-sm .stamp-big{ font-size:.85rem; }

/* ============================================================
   SIGNATURE ELEMENT #1 — Ticket stub ride card
   Two blocks (route / fare) separated by a perforated tear-line,
   punched corners like a physical rail ticket, printed on hard
   cardstock (thick border + offset shadow).
   ============================================================ */
.ticket{
  position:relative;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow-hard-sm);
  display:grid;
  grid-template-columns:1fr auto;
  overflow:visible;
}
.ticket-tossed{ transform:rotate(-1.4deg); box-shadow:var(--shadow-hard); }
.ticket::before,.ticket::after{
  content:"";
  position:absolute; top:50%; transform:translateY(-50%);
  width:18px; height:18px; background:var(--paper); border-radius:50%;
  border:2px solid var(--ink);
}
.ticket::before{ left:calc(72% - 9px); }
.ticket::after{ left:calc(72% - 9px); }
.ticket .tear{
  position:absolute; left:72%; top:0; bottom:0; width:0;
  border-left:2.5px dashed var(--ink);
  opacity:.35;
}
.ticket-main{ padding:20px 24px; grid-column:1; }
.ticket-code{
  grid-column:2; width:126px; padding:20px 16px;
  background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center;
}
.ticket-code .code{ font-family:var(--font-mono); font-weight:700; font-size:1.05rem; letter-spacing:.05em; color:var(--zip-yellow); }
.ticket-code .label{ font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; color:var(--paper); opacity:.6; }
.route-point{ display:flex; gap:10px; align-items:flex-start; margin-bottom:4px; }
.route-dot{ width:10px; height:10px; border-radius:50%; margin-top:6px; flex:none; border:1.5px solid var(--ink); }
.route-dot.pickup{ background:var(--signal-green); }
.route-dot.drop{ background:var(--rust); }
.route-line{ width:2px; background:var(--grey-line); margin-left:4px; height:18px; }
@media (max-width:560px){
  .ticket{ grid-template-columns:1fr; }
  .ticket::before,.ticket::after,.ticket .tear{ display:none; }
  .ticket-code{ grid-column:1; width:100%; flex-direction:row; justify-content:space-between; padding:14px 24px; }
}

/* ---------- Map picker ---------- */
.mp-overlay{
  position:fixed; inset:0; background:rgba(14,15,16,.65); z-index:200;
  display:flex; align-items:flex-end; justify-content:center;
}
@media (min-width:640px){ .mp-overlay{ align-items:center; } }
.mp-modal{
  background:#fff; width:100%; max-width:440px; max-height:92vh; overflow-y:auto;
  border-radius:12px 12px 0 0; padding:18px; border-top:2px solid var(--ink);
}
@media (min-width:640px){ .mp-modal{ border-radius:var(--radius); border:2px solid var(--ink); box-shadow:var(--shadow-hard); } }
.mp-toolbar{ margin-bottom:10px; }
.mp-search{ font-size:.95rem; }
.mp-canvas-wrap{ position:relative; border:2px solid var(--ink); border-radius:var(--radius); overflow:hidden; }
.mp-svg{ width:100%; height:auto; display:block; cursor:crosshair; touch-action:manipulation; }
.mp-hint{
  position:absolute; bottom:0; left:0; right:0; padding:8px 10px;
  background:rgba(14,15,16,.8); color:#fff; font-size:.72rem; text-align:center;
}
.mp-selected{ margin-top:12px; padding:12px; background:var(--paper-dim); border-radius:var(--radius); font-size:.95rem; border:2px solid var(--ink); }

/* address picker trigger field (on the booking page) */
.addr-field{
  border:2px solid var(--ink); border-radius:var(--radius); padding:12px 14px;
  cursor:pointer; background:#fff;
}
.addr-field:hover{ box-shadow:3px 3px 0 var(--ink); }
.addr-field .addr-name{ font-weight:700; }
.addr-field .addr-placeholder{ color:var(--grey); }
.addr-field .addr-coords{ font-size:.76rem; color:var(--grey); margin-top:2px; }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:var(--paper); padding:40px 0 24px; margin-top:60px; border-top:4px solid var(--zip-yellow); }
.footer a{ color:var(--paper); opacity:.75; text-decoration:none; font-size:.88rem; }
.footer a:hover{ opacity:1; }
.footer-links{ display:flex; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.footer-note{ font-size:.78rem; color:var(--grey); font-family:var(--font-mono); }

/* ---------- Misc ---------- */
.center{ text-align:center; }
.muted{ color:var(--grey); }
.mono{ font-family:var(--font-mono); }
.divider{ height:2px; background:var(--grey-line); margin:20px 0; }
.dev-banner{
  background:#FFF3D0; border:2px dashed var(--ink); color:#5A4600;
  font-family:var(--font-mono); font-size:.8rem; padding:10px 14px; border-radius:var(--radius);
  margin-bottom:16px;
}
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:var(--radius);
  font-size:.9rem; box-shadow:var(--shadow-hard); z-index:100; display:none;
  border:2px solid var(--zip-yellow);
}
.toast.show{ display:block; }
.spinner{
  width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
  border-radius:50%; display:inline-block; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Used wherever a wallet balance changes or a milestone is revealed — the
   money movement should be visibly noticeable, not just a static number
   that silently updates, per the "very transparency... animation style"
   ask for the wallet system. */
@keyframes reveal-slide{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
.wallet-reveal{ animation:reveal-slide .35s ease-out; }
@keyframes pop-in{ 0%{ opacity:0; transform:scale(.7); } 60%{ opacity:1; transform:scale(1.08); } 100%{ transform:scale(1); } }
.milestone-pop{ animation:pop-in .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes count-flash{ 0%{ background:var(--zip-yellow); } 100%{ background:transparent; } }
.wallet-flash{ animation:count-flash 1.2s ease-out; border-radius:6px; }

.tab-toggle{ display:flex; background:var(--paper-dim); border:2px solid var(--ink); border-radius:var(--radius); padding:4px; margin-bottom:20px; }
.tab-toggle button{
  flex:1; border:none; background:transparent; padding:10px; border-radius:calc(var(--radius) - 1px);
  font-weight:800; font-size:.85rem; cursor:pointer; color:var(--grey);
}
.tab-toggle button.active{ background:var(--ink); color:var(--paper); }