/* ============================================================
   Ride Platform — clickable prototype design system
   Monochrome · light-only · Linear/Raycast craft · RTL Hebrew
   Tenant theming: override --accent (and --accent-ink if needed).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800;900&display=swap');

:root {
  --accent:#18181b; --accent-ink:#fff;
  --bg:#fafafb; --surface:#fff;
  --line:#ebebee; --line-2:#e2e2e6; --line-3:#f1f1f3;
  --ink:#18181b; --ink-2:#52525b; --ink-3:#8b8b94; --ink-4:#a8a8b0; --ink-5:#c4c4cc;
  --chip:#f4f4f5; --chip-ink:#52525b;
  --good:#15774a; --bad:#b42318;
  --r:15px; --r-sm:11px; --r-btn:12px;
  --shadow-card:0 1px 2px rgba(16,16,20,.04), 0 5px 16px rgba(16,16,20,.045);
  --shadow-dock:0 10px 28px rgba(16,16,20,.14), 0 2px 6px rgba(16,16,20,.06);
  --font:'Heebo', system-ui, -apple-system, sans-serif;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  direction:rtl; font-family:var(--font);
  background:#e5e5e9; color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
a { color:inherit; text-decoration:none; }

/* ── App shell: a centered mobile column that behaves like the app ── */
.app {
  max-width:440px; margin:0 auto; height:100dvh;
  background:var(--bg); display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  box-shadow:0 0 70px rgba(0,0,0,.10);
}
.main { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.pad { padding:16px; display:flex; flex-direction:column; gap:13px; }
.has-dock .main { padding-bottom:84px; }
.center-col { display:flex; flex-direction:column; min-height:100%; }

/* ── App bars ── */
.appbar {
  flex-shrink:0; background:var(--surface); border-bottom:1px solid #ededf0;
  padding:max(8px, env(safe-area-inset-top)) 16px 12px;
  display:flex; align-items:center; gap:10px;
}
.logo { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; color:var(--accent-ink); background:var(--accent); flex-shrink:0; }
.appbar h1 { margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em; }
.appbar .sub { font-size:11px; color:var(--ink-4); font-weight:500; margin-top:1px; }
.appbar .sp { flex:1; }
.iconbtn { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--chip); color:var(--ink); border:none; cursor:pointer; }
.appbar.nav h1 { flex:1; font-size:17px; letter-spacing:-.015em; }
.back { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--chip); }

/* ── Type ── */
.title-xl { font-size:24px; font-weight:900; letter-spacing:-.03em; margin:4px 0 0; }
.sub { font-size:13.5px; color:var(--ink-2); font-weight:500; line-height:1.5; }
.muted { font-size:12.5px; color:var(--ink-3); font-weight:500; }
.label { font-size:11.5px; font-weight:700; color:var(--ink-2); letter-spacing:.01em; }
.lane-head { font-size:11.5px; font-weight:800; color:var(--ink-3); margin:4px 2px 0;
  display:flex; align-items:center; gap:6px; }
.lane-head .n { background:var(--accent); color:var(--accent-ink); border-radius:6px; font-size:10px; padding:1px 6px; }

.ico { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.ico-sm { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── Buttons ── */
.btn, .btn-2, .btn-sm {
  font-family:inherit; cursor:pointer; border:none; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn { border-radius:var(--r-btn); padding:15px; font-weight:800; font-size:15px; letter-spacing:-.01em;
  color:var(--accent-ink); background:var(--accent); box-shadow:0 3px 10px rgba(24,24,27,.2);
  transition:transform .12s ease, filter .12s ease; }
.btn:active { transform:translateY(1px); filter:brightness(1.15); }
.btn-2 { border-radius:var(--r-btn); padding:15px; font-weight:700; font-size:14.5px;
  color:#27272a; background:var(--surface); border:1px solid var(--line-2); }
.btn-2:active { background:var(--chip); }
.btn-sm { border-radius:9px; padding:10px 16px; font-weight:800; font-size:12.5px; color:var(--accent-ink); background:var(--accent); }
.btn-sm.ghost { background:var(--chip); color:#27272a; }
.btn-block { width:100%; }
.btn-line { display:block; text-align:center; color:var(--ink-3); font-weight:700; font-size:13.5px; padding:11px; cursor:pointer; }
.btn-danger-line { display:block; text-align:center; color:var(--bad); font-weight:700; font-size:13.5px; padding:11px; cursor:pointer; }

/* ── Fields ── */
.field { display:flex; flex-direction:column; gap:6px; }
.inp { background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:13px 14px; font-size:15px; font-weight:500; color:var(--ink); font-family:inherit;
  display:flex; align-items:center; gap:9px; width:100%; }
.inp .ph { color:var(--ink-4); }
.inp:focus, .inp.foc { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(24,24,27,.08); }
.inp.ltr { direction:ltr; justify-content:flex-start; }
.inp.big { font-size:18px; font-weight:800; }
.row2 { display:flex; gap:9px; } .row2 > * { flex:1; }

/* segmented */
.seg { background:var(--line-3); border-radius:var(--r-sm); padding:3px; display:flex; gap:3px; }
.seg a, .seg .s { flex:1; text-align:center; padding:9px 4px; border-radius:8px; font-size:13px; font-weight:700; color:var(--ink-3); cursor:pointer; }
.seg .on { background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(16,16,20,.12); }

/* chips select */
.chips { display:flex; gap:7px; }
.chips a, .chips .c { flex:1; text-align:center; padding:12px 0; border:1px solid var(--line-2); border-radius:10px; font-weight:800; font-size:15px; color:var(--ink-2); background:var(--surface); cursor:pointer; }
.chips .on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

/* otp */
.otp { display:flex; gap:9px; direction:ltr; justify-content:center; }
.otp .d { width:46px; height:56px; border:1px solid var(--line-2); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; background:var(--surface); }
.otp .d.f { border-color:var(--accent); box-shadow:0 0 0 3px rgba(24,24,27,.08); }
.otp .d.e { color:var(--ink-5); }

/* toggle */
.tgrow { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:14px; font-size:14px; font-weight:700; }
.tg { width:44px; height:26px; border-radius:999px; background:#d4d4d8; position:relative; flex-shrink:0; cursor:pointer; }
.tg.on { background:var(--accent); }
.tg::after { content:''; width:20px; height:20px; border-radius:50%; background:#fff; position:absolute; top:3px; right:3px; transition:.15s; }
.tg.on::after { right:auto; left:3px; }

/* ── Cards & ledger rows ── */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; box-shadow:var(--shadow-card); position:relative; }
.card.flat { box-shadow:none; }
.route { font-size:16.5px; font-weight:800; letter-spacing:-.015em; display:flex; align-items:center; gap:7px; }
.route .arr { color:var(--ink-5); }
.meta { display:flex; gap:7px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.metatxt { font-size:11.5px; font-weight:500; color:var(--ink-3); }
.chip { background:var(--chip); color:var(--chip-ink); border-radius:7px; padding:3px 9px; font-size:11px; font-weight:700; }
.chip.sched { background:var(--accent); color:var(--accent-ink); }
.payrow { display:flex; align-items:flex-end; justify-content:space-between; margin-top:14px; padding-top:13px; border-top:1px solid var(--line-3); }
.paylbl { font-size:10.5px; font-weight:700; color:var(--ink-3); letter-spacing:.03em; }
.pay { font-size:26px; font-weight:900; letter-spacing:-.025em; line-height:1; margin-top:3px; font-variant-numeric:tabular-nums; }
.subpay { font-size:10.5px; font-weight:500; color:var(--ink-4); margin-top:5px; }
.display { font-size:46px; font-weight:900; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.take { border:none; border-radius:11px; padding:12px 20px; font-weight:800; font-size:13.5px; font-family:inherit;
  color:var(--accent-ink); background:var(--accent); cursor:pointer; }
.newtag { position:absolute; top:14px; left:16px; background:var(--accent); color:var(--accent-ink);
  font-size:9.5px; font-weight:800; padding:2px 8px; border-radius:6px; letter-spacing:.03em; }
.card.new { border-color:#cfcfd6; box-shadow:0 0 0 3px rgba(24,24,27,.07), 0 6px 18px rgba(16,16,20,.06); }
@keyframes flash { from { background:#f0f0f1; } to { background:var(--surface); } }
.card.flash { animation:flash 700ms ease-out 1; }

.badge { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:3px 11px; font-size:11px; font-weight:800; }
.badge.ink { background:var(--accent); color:var(--accent-ink); }
.badge.soft { background:var(--chip); color:var(--chip-ink); }
.badge.dot::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge.good { color:var(--good); } .badge.bad { color:var(--bad); }

.mrow { background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:13px;
  box-shadow:0 1px 2px rgba(16,16,20,.04); display:flex; align-items:center; gap:11px; }
.mrow:active { background:#fcfcfd; }
.mrow .m1 { flex:1; min-width:0; }
.mrow .r2 { font-size:15px; font-weight:800; letter-spacing:-.01em; }
.mrow .mt { font-size:11.5px; color:var(--ink-3); font-weight:600; margin-top:3px; }
.amt { font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.amt small { font-size:10px; color:var(--ink-3); font-weight:600; }

.av { width:40px; height:40px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex-shrink:0; }
.callbtn { width:46px; height:46px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 3px 10px rgba(24,24,27,.22); }
.drv { display:flex; align-items:center; gap:12px; }

.summ { background:var(--surface); border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.srow { display:flex; justify-content:space-between; align-items:center; padding:12px 15px; font-size:13.5px; font-weight:600; color:var(--ink-2); }
.srow + .srow { border-top:1px solid var(--line-3); }
.srow.tot { font-weight:800; color:var(--ink); font-size:14.5px; }
.srow .v { font-variant-numeric:tabular-nums; }
.srow.hi { background:var(--bg); }
.srow.hi span { font-weight:800; color:var(--ink); }

/* ── Wizard / upload / docs ── */
.steps { display:flex; gap:5px; }
.steps .b { flex:1; height:4px; border-radius:2px; background:#e4e4e8; }
.steps .b.on { background:var(--accent); }
.up { border:1.5px dashed #d4d4d8; border-radius:13px; padding:22px 14px; display:flex; flex-direction:column;
  align-items:center; gap:8px; color:var(--ink-3); font-size:12.5px; font-weight:700; background:var(--surface); text-align:center; cursor:pointer; }
.up .ic { width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:1.8; }
.up.done { border-style:solid; border-color:var(--accent); color:var(--ink); }
.up.done .ck { width:24px; height:24px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; }
.up3 { display:flex; gap:8px; } .up3 .up { flex:1; padding:16px 6px; gap:6px; font-size:11px; } .up3 .up .ic { width:22px; height:22px; }
.docs { display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; }
.doc { aspect-ratio:1; border-radius:12px; background:#ededf0; border:1px solid var(--line-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--ink-3); font-size:10px; font-weight:700; text-align:center; cursor:pointer; }
.doc .ic { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; }
.big-ic { width:68px; height:68px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; margin:0 auto; }
.big-ic .ico { width:32px; height:32px; stroke-width:2.2; }
.sws { display:flex; gap:10px; flex-wrap:wrap; }
.swt { width:38px; height:38px; border-radius:10px; border:2px solid transparent; cursor:pointer; }
.swt.on { border-color:var(--accent); box-shadow:0 0 0 2px var(--surface) inset; }
.logo-up { width:78px; height:78px; border-radius:18px; border:1.5px dashed #d4d4d8; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; color:var(--ink-3); font-size:10px; font-weight:700; background:var(--surface); cursor:pointer; flex-shrink:0; }
.spin { width:36px; height:36px; border-radius:50%; border:3px solid #ededf0; border-top-color:var(--accent); animation:sp 1s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }

/* ── Timeline ── */
.tl { list-style:none; padding:0 23px 0 0; margin:6px 0 0; position:relative; }
.tl::before { content:''; position:absolute; right:6px; top:9px; bottom:16px; width:2px; background:#e7e7ea; }
.tl li { position:relative; padding:9px 0; font-size:14px; color:var(--ink-4); font-weight:600; display:flex; justify-content:space-between; }
.tl li::before { content:''; position:absolute; right:-23px; top:14px; width:11px; height:11px; border-radius:50%; background:var(--surface); border:2px solid #e0e0e4; }
.tl li.done { color:var(--ink-2); } .tl li.done::before { background:var(--accent); border-color:var(--accent); }
.tl li.cur { color:var(--ink); font-weight:800; } .tl li.cur::before { background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px rgba(24,24,27,.12); }
.tl .t { font-size:11.5px; font-weight:600; color:var(--ink-4); font-variant-numeric:tabular-nums; }

/* ── Floating capsule dock ── */
.dock { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:4px;
  background:rgba(255,255,255,.93); backdrop-filter:blur(14px); border:1px solid #e6e6ea;
  border-radius:999px; padding:5px; box-shadow:var(--shadow-dock); z-index:5; max-width:calc(100% - 24px); }
.dock a { display:flex; align-items:center; gap:6px; padding:10px; border-radius:999px; color:var(--ink-3); font-size:12.5px; font-weight:700; }
.dock a.on { background:var(--accent); color:var(--accent-ink); padding:10px 16px; }
.dock a .lbl { display:none; }
.dock a.on .lbl { display:inline; }

/* ── Bottom action bar (sticky footer actions) ── */
.actionbar { flex-shrink:0; padding:12px 16px max(12px, env(safe-area-inset-bottom)); background:var(--surface);
  border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px; }

/* ── Bottom sheet overlay ── */
.sheet-scrim { position:absolute; inset:0; background:rgba(16,16,20,.42); z-index:10; display:flex; align-items:flex-end; }
.sheet { background:var(--bg); width:100%; border-radius:22px 22px 0 0; padding:16px 16px max(16px, env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px; max-height:94%; overflow-y:auto;
  box-shadow:0 -8px 40px rgba(0,0,0,.2); }
.sheet h2 { margin:0; font-size:19px; font-weight:800; letter-spacing:-.02em; }
.grip { width:40px; height:4px; border-radius:2px; background:#d4d4d8; margin:0 auto 2px; }
.dim { pointer-events:none; }

/* ── Demo: "back to all flows" tab (injected by proto.js) ── */
.proto-home {
  position: fixed; z-index: 9999; top: 50%; left: 0; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 52px;
  background: rgba(10,10,11,.82); color: #fff;
  border-radius: 0 13px 13px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.proto-home svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linejoin: round; }
.proto-home:active { background: rgba(10,10,11,.96); }

/* ── iPhone device frame (demo only) ──
   On desktop, wrap each app screen in an iPhone shell. On real phones
   (< 480px) the app stays full-screen — the bezel never shows. */
@media (min-width: 480px) {
  body:has(.app) {
    min-height: 100dvh; margin: 0;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 80% at 50% 0%, #17171b 0%, #0a0a0b 60%);
    padding: 28px;
  }
  .app {
    width: 393px; height: 852px;               /* iPhone 15/16 logical points */
    max-height: calc(100dvh - 40px);
    border-radius: 56px;
    border: 13px solid #060607;
    box-shadow: 0 0 0 2.5px #2a2a30, 0 50px 100px -20px rgba(0,0,0,.65);
    overflow: hidden;
  }
  /* dynamic island */
  .app::before {
    content: ''; position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
    width: 108px; height: 31px; background: #060607; border-radius: 16px; z-index: 60;
  }
  /* home indicator */
  .app::after {
    content: ''; position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%);
    width: 130px; height: 5px; border-radius: 3px; background: rgba(20,20,22,.32); z-index: 60;
  }
  /* leave room for the island and the home indicator */
  .appbar { padding-top: 48px; }
  .has-dock .main { padding-bottom: 98px; }
  .dock { bottom: 24px; }
  .actionbar { padding-bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }