@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  --bg: #f7f2e8;
  --surface: #ffffff;
  --ink: #1e2420;
  --ink-soft: #6b6a5e;
  --line: #e6dfce;
  --primary: #2b4a3a;
  --primary-soft: #dce7de;
  --primary-btn: #3d6350;
  --amber: #c1622d;
  --amber-soft: #f3e1cc;
  --amber-btn: #d97c48;
  --bad: #c15b6b;
  --bad-soft: #f5e0e3;
  --ok: #2f7d5c;
  --ok-soft: #dcece5;
  --bad-btn: #c67c89;
  --font-display: 'Onest', system-ui, sans-serif;
  --font-body: 'Onest', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --shadow: 0 1px 2px rgba(30,36,32,0.06);
  --shadow-lg: 0 20px 50px rgba(30,36,32,0.14);
  --radius: 16px;
  --container: 1180px;
}

/* iOS Safari (and some Android browsers) zoom the whole page in the moment
   you focus a text field whose computed font-size is under 16px, then never
   zoom back out on their own — "when you press to enter something it zooms
   and doesn't return to normal screen". Below the desktop breakpoint most
   inputs here are 13-15.5px (inline styles per page), so a single rule here
   guarantees no field can trigger it, without hunting down every inline
   style on every page. Scoped to below the desktop breakpoint so it doesn't
   touch the deliberate 16.5-17.5px desktop sizing below. Doesn't affect
   layout: inputs size by padding and an explicit height, not by font-size.
*/
@media (max-width: 1023px) {
  input:not(.otp-box):not(#profile-name-input), select, textarea {
    font-size: 16px !important;
  }
}

/* Desktop scale-up: the type scale and container width below were tuned for
   the mobile-width phone-frame prototype and read small/empty once stretched
   across a real desktop window. Bump both above a tablet breakpoint. */
@media (min-width: 1024px) {
  /* min(1560, 92vw), not a flat 1320: the mockup is 1440 wide with 60px
     margins, i.e. the content takes ~92% of the window. A fixed 1320 honours
     that at exactly 1440 and then leaves a growing dead band on anything
     wider -- on a 1760px window it was ~220px of empty on each side, which
     is the "space on two sides, doesn't fill the screen" report. This keeps
     the mockup's proportion at every size and still stops at 1560 so text
     lines never get uncomfortably long. */
  :root { --container: min(1560px, 92vw); }
  body { font-size: 16.5px; }
  .section-title { font-size: 32px; }
  h1 { font-size: 30px; }
  .search-card { padding: 38px; max-width: 620px; margin: 0 auto; }
  .search-card .field { height: 68px; }
  .search-card .field input, .search-card .field-label { font-size: 17.5px; }
  .search-card .btn-lg { padding: 27px 32px; font-size: 21px; }
  .auth-card { max-width: 480px; padding: 44px 40px; }
  .btn-lg { padding: 18px 30px; font-size: 17px; }
  .card { padding: 26px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c231f;
    --surface: #242c26;
    --ink: #f3eee2;
    --ink-soft: #a9a499;
    --line: #333c34;
    --primary: #7fae93;
    --primary-soft: #24352c;
    --primary-btn: #4a8f6b;
    --amber: #dd9463;
    --amber-soft: #3a2a1e;
    --amber-btn: #c97a45;
    --bad: #d98b98;
    --bad-soft: #362328;
    --ok: #6fbd9b;
    --ok-soft: #17302a;
    --bad-btn: #e0a3ac;
    --shadow: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-lg: 0 20px 50px rgba(0,0,0,0.45);
  }
}
:root[data-theme="dark"] {
  --bg: #1c231f;
  --surface: #242c26;
  --ink: #f3eee2;
  --ink-soft: #a9a499;
  --line: #333c34;
  --primary: #7fae93;
  --primary-soft: #24352c;
  --primary-btn: #4a8f6b;
  --amber: #dd9463;
  --amber-soft: #3a2a1e;
  --amber-btn: #c97a45;
  --bad: #d98b98;
  --bad-soft: #362328;
  --bad-btn: #e0a3ac;
  --shadow: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ---------- Top nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 32px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; flex-shrink: 0; }
.brand svg { flex-shrink: 0; }
.site-header .brand { gap: 11px; font-size: 22px; }
.main-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.main-nav a {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
  transition: background .15s, color .15s;
}
.main-nav a:hover { background: var(--bg); color: var(--ink); }
.main-nav a.active { background: var(--primary-soft); color: var(--primary); }
.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.header-actions .notif-btn { position: relative; }
.badge-dot {
  position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--amber); border: 2px solid var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; color: #fff;
}
/* Digit-less variant of .badge-dot (DESIGN_SPEC_SEND_TO_ALL.md §4) — a plain
   filled dot pinned to a passenger-row avatar's top-right corner, ~9-10px,
   no min-width/padding since there's no digit inside. */
.badge-dot-sm {
  position: absolute; top: -2px; right: -2px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--amber); border: 1.5px solid var(--surface);
}
.avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--primary-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: var(--primary); font-size: 14px;
  flex-shrink: 0; cursor: pointer;
}
.icon-btn {
  width: 40px; height: 40px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
/* Keyboard-focus ring for icon-only buttons -- added 2026-10-02, these are
   plain divs with role="button" (see app.js's delegated keydown handler),
   so they need an explicit focus style the browser won't supply for free. */
.icon-btn:focus-visible, [role="button"]:focus-visible, [role="switch"]:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.nav-toggle { display: none; }
#mobile-nav { max-height: calc(100vh - 72px); overflow-y: auto; -webkit-overflow-scrolling: touch; }

.lang-switch { position: relative; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; gap: 6px; cursor: pointer; flex-shrink: 0; }
.lang-switch svg { flex-shrink: 0; }
.lang-switch .lang-code { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.lang-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 180px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 50; overflow: hidden; display: none; }
.lang-dropdown.open { display: block; }
.lang-row { display: block; padding: 11px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.lang-row:last-child { border-bottom: none; }
.lang-row:hover { background: var(--bg); }
.lang-row.active { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.mobile-lang-row { display: block; padding: 10px 0; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.mobile-lang-row.active { color: var(--primary); font-weight: 700; }
@media (max-width: 900px) {
  .lang-switch { width: 40px; padding: 0; justify-content: center; }
  .lang-switch .lang-code { display: none; }
  .lang-switch.lang-switch-collapsible { display: none; }
}

.notif-switch { position: relative; flex-shrink: 0; }
.notif-dropdown {
  position: absolute; top: calc(100% + 8px); right: -8px; width: 320px; max-width: calc(100vw - 32px); max-height: 70vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
  z-index: 50; display: none; padding: 8px;
}
.notif-dropdown.open { display: block; }
.notif-dropdown-head { padding: 8px 10px 10px; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; }
.notif-section-label { margin: 8px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.notif-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: inherit; }
.notif-row:hover { background: var(--bg); }
.notif-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-row .notif-body { flex: 1; min-width: 0; }
.notif-row .notif-body p.t { margin: 0; font-size: 13px; font-weight: 700; }
.notif-row .notif-body p.s { margin: 2px 0 0; font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.notif-row .notif-time { font-size: 10.5px; color: var(--ink-soft); white-space: nowrap; flex-shrink: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  border-radius: 12px; padding: 13px 22px; border: none; cursor: pointer;
  transition: transform .1s ease, filter .1s ease, opacity .1s ease;
}
.btn:active { transform: scale(0.97); }
/* Same change as design/style.css, 2026-09-16: a soft colored glow under
   the main CTA button, matching its own color via color-mix so it stays
   correct in both themes automatically. */
.btn-primary { background: var(--primary-btn); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-btn) 40%, transparent); }
.btn-primary:hover { filter: brightness(0.95); }
.btn-amber { background: var(--amber-btn); color: #fff; }
.btn-amber:hover { filter: brightness(0.95); }
.btn-secondary { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); }
.btn-secondary:hover { background: var(--bg); }
.btn-bad { background: var(--bad-btn); color: #fff; }
.btn-bad:hover { filter: brightness(0.95); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 16px; font-size: 13.5px; border-radius: 10px; }
.btn-lg { padding: 16px 28px; font-size: 16px; }

/* ---------- Cards / surfaces ---------- */
/* Same change as design/style.css, 2026-09-16 ("make it look more premium").
   Every .card was flat -- border only, no depth. One shared soft ambient
   shadow now applies everywhere .card is used. */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 3px 14px rgba(0,0,0,0.14); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 20px;
  background: var(--primary-soft); color: var(--primary);
}
.pill.amber { background: var(--amber-soft); color: var(--amber); }
.pill.ok  { background: var(--ok-soft); color: var(--ok); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.stars { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--ink-soft); font-weight: 600; }

h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
.section-title { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.section-sub { color: var(--ink-soft); font-size: 15.5px; margin: 0 0 32px; max-width: 60ch; }

/* ---------- Form controls ---------- */
.field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.field {
  display: flex; align-items: center; gap: 10px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; height: 54px;
  cursor: pointer; position: relative; flex: 1; min-width: 160px;
  transition: border-color .12s, box-shadow .12s;
}
.field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.field input {
  border: none; background: transparent; font-size: 14.5px; font-weight: 600; color: var(--ink);
  font-family: inherit; outline: none; width: 100%; min-width: 0;
}
.field input::placeholder { color: var(--ink-soft); font-weight: 500; }
/* Chrome/Safari autofill paints its own white/yellow background over any
   input, ignoring `.field input`'s transparent background above — this
   forces it back to match the surrounding pill instead of flashing white. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset;
  box-shadow: 0 0 0px 1000px var(--bg) inset;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--ink);
}
.field-label { font-size: 14px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.field-label.filled { color: var(--ink); }
.dropdown-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto; padding: 6px;
  z-index: 30; display: none; max-width: calc(100vw - 48px);
}
.dropdown-list.time-grid, .dropdown-list.cal-wrap { padding: 12px; }
/* The bounded 30-day calendar never needs more than one month's grid at a
   time, so it always fits — no internal scroll/clipping like the generic
   long-list dropdowns (city pickers, time grid) still need. */
.dropdown-list.cal-wrap { max-height: none; overflow: visible; }
.dropdown-list div.option { padding: 10px 12px; font-size: 13.5px; font-weight: 600; border-radius: 8px; cursor: pointer; }
.dropdown-list div.option:hover { background: var(--bg); }

.time-grid-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.time-cell { display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; border-radius: 8px; padding: 10px 4px; cursor: pointer; color: var(--ink); background: var(--bg); border: 1px solid var(--line); }
.time-cell.selected { background: var(--primary); color: #fff; border-color: var(--primary); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; border-radius: 8px; color: var(--ink); cursor: pointer; }
.cal-day.muted { color: var(--ink-soft); font-weight: 500; font-size: 10.5px; cursor: default; }
.cal-day.today { border: 1.5px solid var(--primary); }
.cal-day.selected { background: var(--primary); color: #fff; }
.cal-day.empty { visibility: hidden; cursor: default; }
.cal-day.past { color: var(--ink-soft); opacity: .35; cursor: not-allowed; pointer-events: none; }
.cal-nav-btn { width: 28px; height: 28px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }

/* ---------- Hero ---------- */
.hero { padding: 92px 0 116px; position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.hero h1 { font-size: 58px; font-weight: 800; line-height: 1.07; margin-bottom: 24px; }
.hero h1 .accent { color: var(--primary); }
.hero p.lead { font-size: 19px; color: var(--ink-soft); margin: 0 0 38px; max-width: 48ch; line-height: 1.55; }
.hero-stats { display: flex; gap: 40px; margin-top: 42px; }
.hero-stat b { display: block; font-family: var(--font-display); font-size: 29px; font-weight: 800; }
.hero-stat span { font-size: 13.5px; color: var(--ink-soft); }
.search-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 30px; box-shadow: var(--shadow-lg); }
.search-tabs { display: flex; background: var(--bg); border-radius: 13px; padding: 5px; gap: 5px; margin-bottom: 22px; }
.search-tabs .tab { flex: 1; text-align: center; padding: 13px 4px; border-radius: 10px; font-size: 14.5px; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.search-tabs .tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.search-card .field { height: 64px; padding: 0 18px; gap: 12px; border-radius: 14px; }
.search-card .field svg { width: 18px; height: 18px; }
.search-card .field input, .search-card .field-label { font-size: 16.5px; }
.search-card .btn-lg { padding: 24px 30px; font-size: 19px; border-radius: 14px; }

.hero-art { position: absolute; right: -80px; top: -40px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--primary-soft), transparent 70%); z-index: -1; }

/* ---------- Generic layout helpers ---------- */
.grid-3 { display: grid; grid-template-columns: 0.7fr 1.15fr 1.15fr; gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
section.band { padding: 48px 0; }
section.band.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { section.band { padding: 40px 0; } }
@media (max-width: 560px) { section.band { padding: 32px 0; } }



.driver-card { padding: 20px; display: flex; align-items: center; gap: 16px; }
.driver-card .info { flex: 1; min-width: 0; }
.driver-card .name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.driver-card .name-row p { margin: 0; font-size: 15.5px; font-weight: 700; }
.driver-card .meta { margin: 0; font-size: 13px; color: var(--ink-soft); }
.driver-card .price { text-align: right; flex-shrink: 0; }
.driver-card .price b { font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.driver-card .price span { display: block; font-size: 11.5px; color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 48px 0 32px; margin-top: 40px; }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 32px; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 12px; }
.footer-col a { display: block; font-size: 14px; color: var(--ink); margin-bottom: 9px; }
.footer-col a:hover { color: var(--primary); }
.footer-bottom { max-width: var(--container); margin: 32px auto 0; padding: 20px 24px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); }

/* ---------- Modal (used on trips page for edit flows) ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,20,19,0.55); z-index: 100;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal { background: var(--surface); border-radius: 20px; width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); scrollbar-width: none; -ms-overflow-style: none; }
.modal::-webkit-scrollbar { display: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 17px; font-weight: 700; }
.modal-body { padding: 22px; }
.modal-close { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; }

.notice { border-radius: 12px; padding: 14px 16px; font-size: 12.5px; font-weight: 600; line-height: 1.5; border: 1px solid; }
.notice.amber { color: var(--amber); background: var(--amber-soft); border-color: var(--amber); }
.notice.bad { color: var(--bad); background: var(--bad-soft); border-color: var(--bad); }
.notice.primary { color: var(--primary); background: var(--primary-soft); border-color: var(--primary); }

.toggle-switch { width: 44px; height: 26px; border-radius: 20px; background: var(--line); position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; }
.toggle-switch .knob { width: 20px; height: 20px; border-radius: 50%; background: #fff; position: absolute; top: 3px; left: 3px; transition: left .2s; }
.toggle-switch[data-on="true"] { background: var(--primary); }
.toggle-switch[data-on="true"] .knob { left: 21px; }

.row-list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.row-list > .row { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s; }
.row-list > .row:last-child { border-bottom: none; }
.row-list > .row:hover { background: var(--bg); }
.row-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.row-icon.amber { background: var(--amber-soft); }
.row-icon.bad { background: var(--bad-soft); }

/* ---------- Auth (sign in / create account / verification) ---------- */
.auth-header { padding: 22px 0; }
.auth-header .wrap { display: flex; align-items: center; }
.auth-shell { min-height: calc(100vh - 76px); display: flex; align-items: center; justify-content: center; padding: 24px 24px 64px; }
/* Previously just a bare text column floating on the page background — no
   edge, no depth, so it read as unfinished. Give it the same elevated-card
   treatment every other surface on the site already uses. */
.auth-card {
  width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 36px 32px;
}
.auth-card .eyebrow { display: block; margin-bottom: 14px; }
.auth-card h1 { font-size: 27px; font-weight: 800; margin-bottom: 10px; }
.auth-card .section-sub { font-size: 14.5px; margin-bottom: 28px; max-width: none; }
@media (max-width: 480px) { .auth-card { padding: 28px 22px; } }
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  font-family: var(--font-body); font-weight: 700; font-size: 15px; color: #fff;
  border: none; border-radius: 12px; padding: 14px 20px; cursor: pointer; margin-bottom: 12px;
  transition: filter .1s ease, transform .1s ease;
}
.oauth-btn:active { transform: scale(0.98); }
.oauth-btn:hover { filter: brightness(1.1); }
.oauth-btn.apple { background: #000; }
.oauth-btn.facebook { background: #1877F2; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; }
.auth-divider .line { flex: 1; height: 1px; background: var(--line); }
.auth-divider span { font-size: 12px; color: var(--ink-soft); }
.auth-legal { font-size: 11.5px; color: var(--ink-soft); text-align: center; margin-top: 22px; line-height: 1.6; }
.auth-legal a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.auth-switch { text-align: center; font-size: 13.5px; color: var(--ink-soft); margin-top: 24px; }
.auth-switch a { color: var(--primary); font-weight: 700; }

.otp-row { display: flex; gap: 12px; margin: 26px 0 10px; justify-content: center; }
.otp-box {
  width: 56px; height: 66px; border-radius: 14px; background: var(--bg); border: 1.5px solid var(--line);
  text-align: center; font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--ink);
  outline: none; transition: border-color .15s, background .15s;
}
.otp-box.filled { border-color: var(--primary); background: var(--surface); }
.otp-box:focus { border-color: var(--primary); }
.resend-row { text-align: center; font-size: 13px; color: var(--ink-soft); margin-bottom: 24px; }
.resend-row a { color: var(--primary); font-weight: 700; }
.resend-row a[data-disabled="true"] { color: var(--ink-soft); pointer-events: none; font-weight: 600; }
.trust-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px; margin-bottom: 24px; }
.trust-note .icon { width: 34px; height: 34px; border-radius: 10px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trust-note p { font-size: 12.5px; color: var(--ink-soft); margin: 0; line-height: 1.55; }
.phone-input-row { display: flex; gap: 8px; }
.phone-code { display: flex; align-items: center; gap: 6px; padding: 0 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; height: 54px; font-weight: 700; font-size: 14.5px; flex-shrink: 0; }
@media (max-width: 420px) {
  .otp-box { width: 46px; height: 58px; font-size: 22px; }
  .otp-row { gap: 8px; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--bg); padding: 14px 22px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-lg); z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  display: flex; align-items: center; gap: 10px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* ---------- Docked trip CTA bar (trip.html) ---------- */
/* Reachable without scrolling the whole page — see CLAUDE.md, the owner's
   "confirm booking is weird and not in right place" report. */
.trip-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom));
}
.trip-cta-bar .wrap { padding: 0; }

/* ---------- Top-anchored booking success banner ---------- */
.booking-success-banner {
  position: fixed; left: 0; right: 0; z-index: 95;
  background: var(--ok); color: #fff;
  padding: 12px 24px; display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 700; font-family: var(--font-body);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.booking-success-banner.show { opacity: 1; transform: translateY(0); }
.booking-success-banner svg { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .booking-success-banner { transition: none; } }

/* ---------- Responsive ---------- */
/* Tablet: two-up grids read better than a single narrow column while there's still width to spare. */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .hero { padding: 56px 0 72px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: 40px; }
  .hero p.lead { font-size: 17px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .footer-cols { gap: 32px; }
  .wrap { padding: 0 20px; }
}
/* Phone: single column everywhere, tighter spacing, no cramped multi-field rows. */
@media (max-width: 560px) {
  .field-row { flex-direction: column; }
  .field { width: 100%; }
  .hero { padding: 36px 0 48px; }
  .hero h1 { font-size: 32px; }
  .hero-stats { flex-wrap: wrap; gap: 18px 28px; margin-top: 30px; }
  .search-card { padding: 20px; }
  .driver-card { flex-wrap: wrap; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section-title { font-size: 24px; }
}
/* Small phones: the bigger wordmark/logo needs room to breathe without overflowing. */
@media (max-width: 420px) {
  .wrap { padding: 0 16px; }
  .site-header .brand { font-size: 17px; gap: 8px; }
  .site-header .brand svg { width: 24px; height: 24px; }
  .site-header .wrap { gap: 10px; }
  .header-actions { gap: 8px; }
  .avatar { width: 34px; height: 34px; font-size: 13px; }
  .icon-btn { width: 36px; height: 36px; }
}

/* ---------- Field labels (small caption above each input) ---------- */
.field-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 160px; }
.field-group .field { flex: none; min-width: 0; }
.field-tag { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); padding-left: 2px; }

/* ---------- Checkbox row (terms acceptance) ---------- */
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 4px 0 18px; }
/* appearance:none + hand-drawn check — native checkboxes render their box
   background from the OS theme (usually white) no matter what accent-color
   says, which reads as a stray white square on a dark page. */
.checkbox-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; margin-top: 1px; flex-shrink: 0; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg);
  position: relative; transition: background .12s, border-color .12s;
}
.checkbox-row input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
.checkbox-row input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 10px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.checkbox-row span { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.checkbox-row a { color: var(--primary); font-weight: 600; }

/* ---------- Garage (My vehicles, profile.html) ---------- */
.vehicle-row { display: flex; align-items: center; gap: 14px; padding: 16px; }
.vehicle-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vehicle-row .info { flex: 1; min-width: 0; }
.vehicle-row .info p.name { margin: 0; font-size: 14.5px; font-weight: 700; }
.vehicle-row .info p.meta { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }
.vehicle-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vehicle-actions button { background: none; border: none; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; padding: 9px 10px; border-radius: 8px; min-height: 36px; }
.vehicle-actions button:hover { background: var(--bg); color: var(--ink); }
.vehicle-actions button.danger:hover { color: var(--bad); }

/* ---------- Search results filter bar ---------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 20px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.filter-bar select { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.filter-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; padding: 6px 4px; margin: -6px -4px; border-radius: 8px; min-height: 32px; }
.filter-check input { width: 19px; height: 19px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
/* Homepage amenity filters (AC/Pets/Smoking/Baggage) — same bare-checkbox
   white-square problem as the auth pages, just a different layout. */
.amenity-filter { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 0; font-size: 16px; font-weight: 600; cursor: pointer; }
.amenity-filter input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 30px; height: 30px; flex-shrink: 0; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg);
  position: relative; transition: background .12s, border-color .12s;
}
.amenity-filter input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
.amenity-filter input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 10px; top: 5px; width: 7.5px; height: 13.5px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.amenity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.amenity-grid .filter-check { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .amenity-grid { grid-template-columns: 1fr; } }
/* Home-screen filter switches: 2 x 2, switch on the right of each column so
   the two columns line up -- the same geometry the checkboxes had. Only the
   control changed (checkbox -> toggle switch); do NOT move the switch next to
   its label to "fix" the distance from the label. That was tried on
   2026-09-11 and rejected: it makes the two columns ragged, because the
   labels are different lengths. A switch shows on/off by knob position and
   colour on its own, which is what the checkbox failed to do. */
.filter-switch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.filter-switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; font-size: 15px; font-weight: 600; color: var(--ink); min-width: 0;
}
.filter-switch-row span { min-width: 0; line-height: 1.25; overflow-wrap: anywhere; } /* wraps to 2 lines instead of truncating ("Домашни любимци") */
.filter-switch-row .toggle-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 420px) { .filter-switch-grid { gap: 4px 16px; } }

.filter-toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; width: 100%; }
.filter-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; font-size: 13.5px; font-weight: 600; color: var(--ink); min-width: 0; }
.filter-toggle-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) { .filter-toggle-grid { grid-template-columns: 1fr; } }

/* ---------- Onboarding tour (post-signup modal) ---------- */
.onboarding-modal .modal { max-width: 380px; }
.onboarding-art { height: 120px; border-radius: 14px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.onboarding-dots { display: flex; justify-content: center; gap: 7px; margin: 18px 0 20px; }
.onboarding-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .2s, width .2s; }
.onboarding-dots span.active { background: var(--primary); width: 20px; border-radius: 4px; }
.onboarding-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onboarding-skip { background: none; border: none; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; padding: 10px 4px; }

/* ---------- Legal pages (terms / privacy / contact) ---------- */
.legal-body h2 { font-size: 18px; font-weight: 700; margin: 32px 0 10px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 12px; }
.legal-body ul { padding-left: 20px; margin: 0 0 12px; }
.legal-body strong { color: var(--ink); }
.legal-updated { font-size: 13px; color: var(--ink-soft); margin-bottom: 36px; }
.legal-note { margin-top: 40px; padding: 16px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; font-size: 13px; color: var(--ink-soft); line-height: 1.6; }

/* Ported from the app: in-app confirm and the three-dot row menu. */
.cf-wrap { position: fixed; inset: 0; z-index: 200; background: rgba(20,32,31,.55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.cf-wrap[data-open="true"] { opacity: 1; pointer-events: auto; }
.cf-card { width: 100%; max-width: 360px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px; padding: 24px 22px 16px;
  box-shadow: 0 22px 50px rgba(0,0,0,.34); transform: scale(.97); transition: transform .18s ease; }
.cf-wrap[data-open="true"] .cf-card { transform: scale(1); }
.cf-card p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; text-align: center; }
.cf-no { display: block; width: 100%; margin-top: 8px; padding: 11px; background: none; border: 0;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.cf-no:hover { color: var(--ink); }

.row-menu-wrap { position: relative; flex-shrink: 0; }
.row-dots { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; color: var(--ink-soft); }
.row-dots:hover { background: var(--bg); color: var(--ink); }
.row-menu { position: absolute; top: 36px; right: 0; z-index: 60; min-width: 210px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  box-shadow: 0 14px 34px rgba(0,0,0,.28); overflow: hidden; }
.row-menu[hidden] { display: none; }
.row-menu button { display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 12px 14px; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; border-bottom: 1px solid var(--line); }
.row-menu button:last-child { border-bottom: 0; }
.row-menu button:hover { background: var(--bg); }
.row-menu button.danger { color: var(--bad); }

/* Feature banner, shared with the app. */
.hb-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;
  gap: 0;
  margin-bottom: 10px;
}
.hb-track::-webkit-scrollbar { display: none; }

.hb-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;           /* one card per swipe, never skips two */
  box-sizing: border-box;
}

.hb-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
}
.hb-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--primary-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hb-tag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.hb-title { margin: 2px 0 0; font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.hb-body  { margin: 2px 0 0; font-size: 12px; color: var(--ink-soft); line-height: 1.42; }


/* Uniform slides: every card the same height regardless of how long its body
   text is, so the track doesn't jump as you swipe. The body clamps to two
   lines and the rest lives behind "See more". */
.hb-card { align-items: flex-start; min-height: 104px; }
.hb-body {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hb-more {
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
}

/* Same banner, promoted to a full-width spot above the search panel on the
   home page — bigger card, bigger icon, so it reads as the first thing on
   the page rather than a sidebar aside. */
.home-tip { margin-bottom: 22px; width: 100%; }
.home-tip .hb-card { padding: 36px 42px; gap: 26px; min-height: 140px; border-radius: 22px; width: 100%; box-sizing: border-box; }
.home-tip .hb-icon { width: 68px; height: 68px; border-radius: 100px; }
.home-tip .hb-icon svg { width: 32px; height: 32px; }
.home-tip .hb-tag { font-size: 13px; }
.home-tip .hb-title { font-size: 24px; -webkit-line-clamp: 1; }
.home-tip .hb-body { font-size: 16px; -webkit-line-clamp: 2; }
.home-tip .hb-more { font-size: 15px; }
@media (min-width: 1024px) {
  .home-tip .hb-card { padding: 44px 52px; min-height: 160px; }
  .home-tip .hb-icon { width: 76px; height: 76px; }
  .home-tip .hb-icon svg { width: 36px; height: 36px; }
  .home-tip .hb-title { font-size: 27px; }
  .home-tip .hb-body { font-size: 17px; }
}

/* Full explanation, as a sheet that rises from the bottom — keeps the person
   on the screen they were on rather than navigating away to read a paragraph. */
.hb-sheet-wrap {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 32, 31, .45);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.hb-sheet-wrap[data-open="true"] { opacity: 1; pointer-events: auto; }
.hb-sheet {
  width: 100%; max-width: 390px;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  padding: 10px 22px 30px;
  transform: translateY(14px);
  transition: transform .22s ease;
  max-height: 82%;
  overflow-y: auto;
}
.hb-sheet-wrap[data-open="true"] .hb-sheet { transform: translateY(0); }
.hb-grip {
  width: 38px; height: 4px; border-radius: 2px;
  background: var(--line); margin: 0 auto 18px;
}
.hb-sheet h3 {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  margin: 0 0 12px; line-height: 1.22;
}
.hb-sheet p { margin: 0 0 22px; font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .hb-sheet-wrap, .hb-sheet { transition: none; }
}

/* ---- Carousel height fix (2026-09-03) ----
   Every slide was sizing to its own content, so a longer Bulgarian title made
   one card taller than the next and the whole track jumped as you swiped —
   text appeared to slide down the screen. Stretch the slides so every card
   takes the height of the tallest, and clamp the title so one long string
   can't blow that height out. */
.hb-track { align-items: stretch; }

.hb-slide { display: flex; }

.hb-card {
  flex: 1;
  min-height: 0;                 /* replaces the fixed 104px floor */
  align-items: flex-start;
  overflow: hidden;              /* nothing can spill past the rounded corner */
}

/* Text column must be allowed to shrink, or a long unbroken word pushes the
   card wider than the slide and the layout drifts sideways. */
.hb-card > div:last-child { min-width: 0; }

.hb-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.hb-body { overflow-wrap: anywhere; }

/* The "see more" is pinned to the bottom of the card so it sits on the same
   line across every slide, however long the text above it is. */
.hb-card > div:last-child { display: flex; flex-direction: column; height: 100%; }
.hb-more { margin-top: auto; padding-top: 6px; }

/* Sheet header: title left, close X top-right. One affordance instead of two
   stacked footer buttons — the sheet only has to be readable and dismissible. */
.hb-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.hb-sheet-head h3 { margin: 0; flex: 1; min-width: 0; }
.hb-x {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.hb-x:hover { color: var(--ink); }
.hb-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hb-sheet p:last-child { margin-bottom: 6px; }

/* "No rides found" pop-up. The request option used to be a card at the BOTTOM
   of the results list, below the fold — owner: "it is down and it is hard to
   see". Centred and modal so it cannot be missed. A bottom sheet was the wrong
   fix here: it lands in the same place the person already wasn't looking. */
.nm-wrap {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(20, 32, 31, .55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.nm-wrap[data-open="true"] { opacity: 1; pointer-events: auto; }
.nm-card {
  width: 100%; max-width: 330px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 24px 22px 20px; text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
  transform: scale(.96); transition: transform .2s ease;
}
.nm-wrap[data-open="true"] .nm-card { transform: scale(1); }
.nm-card h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  margin: 0 0 18px; line-height: 1.28;
}
.nm-card p.nm-body { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.nm-card p.nm-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-soft); }
.nm-card .btn { margin: 0; }
.nm-dismiss {
  display: block; width: 100%; margin-top: 10px; padding: 11px;
  background: none; border: 0; font-family: inherit; font-size: 13.5px;
  font-weight: 600; color: var(--ink-soft); cursor: pointer;
}
.nm-dismiss:hover { color: var(--ink); }
.nm-dismiss:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .nm-wrap, .nm-card { transition: none; } }

/* Native date/time inputs on the request-edit panel, dressed to match the
   app's other fields. Native is deliberate: it gives the phone's own picker,
   which beats anything hand-rolled here. */
.ro-field {
  width: 100%; box-sizing: border-box; height: 46px;
  background: var(--bg); border: none; border-radius: 10px; padding: 0 12px;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
}
.ro-field:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }


/* Home layout. The page used to be a 720px column with wide empty margins on
   any real screen: search on top, results below at full width, then your
   requests and upcoming trips as two separate, level columns beneath that.
   Collapses back to one column on a phone, where stacking is right. */
.home-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.home-columns { margin-top: 30px; }
.home-main { min-width: 0; }
.home-split { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; margin-top: 26px; }
@media (max-width: 900px) {
  .home-fields { grid-template-columns: 1fr 1fr; }
  .home-split { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 560px) {
  .home-fields { grid-template-columns: 1fr; }
}

/* ── Search bar (version A/B): the action belongs at the END of the row, not
   as a second full-width slab under it. ─────────────────────────────────── */
.searchbar { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 12px; align-items: end; }
.searchbar .btn { margin: 0; height: 46px; padding: 0 26px; white-space: nowrap; }

/* Filters as content-width chips. The old rows used space-between across a
   1120px card, so the label sat at one edge and a checkbox at the other with
   700px of nothing between them. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 20px; cursor: pointer; user-select: none;
  background: var(--bg); border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.chip:hover { color: var(--ink); }
.chip[data-on="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.chip input { display: none; }

/* A quiet link for the secondary action, so "offer a ride" stops competing
   with "search" for the same attention. */
.link-quiet { font-size: 13.5px; font-weight: 700; color: var(--primary); text-decoration: none; }
.link-quiet:hover { text-decoration: underline; }

/* Trip row — denser than a card, for a board of many. */
.trip-row {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; text-decoration: none; color: inherit;
}
.trip-row:hover { border-color: var(--primary); }
.trip-when { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.trip-price { font-family: var(--font-mono); font-size: 17px; font-weight: 700; }
.day-head { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); margin: 22px 0 10px; }
@media (max-width: 780px) {
  .searchbar { grid-template-columns: 1fr 1fr; }
  .searchbar .btn { grid-column: 1 / -1; }
  .trip-row { grid-template-columns: auto 1fr auto; }
}

/* ═══ Home, designed ═══════════════════════════════════════════════════════
   The problem with the previous pass: three nearly identical greys, so cards,
   fields and the page ground all read as one flat surface; no accent colour;
   and no graphic idea belonging to this subject.

   The motif here is the journey itself — two stops and the line between them.
   It appears in the search bar and again in every result, so the page reads as
   routes rather than as rows of text. Blue is the action; amber is the
   destination, used only where a journey ends. ─────────────────────────── */

.home-hero {
  background:
    radial-gradient(900px 300px at 15% -10%, rgba(46,111,158,.16), transparent 70%),
    radial-gradient(700px 260px at 85% 0%, rgba(212,162,74,.09), transparent 70%);
  border-bottom: 1px solid var(--line);
  padding: 44px 0 34px;
}
:root:not([data-theme="light"]) .home-hero { background:
    radial-gradient(900px 300px at 15% -10%, rgba(91,156,201,.16), transparent 70%),
    radial-gradient(700px 260px at 85% 0%, rgba(224,181,104,.08), transparent 70%); }

.home-h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 3.4vw, 42px); line-height: 1.05; letter-spacing: -.025em;
  margin: 0 0 10px; text-wrap: balance;
}
.home-lede { margin: 0 0 26px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); max-width: 46ch; }

/* The search panel sits ON the hero, lifted off it — a real surface, not
   another grey rectangle. */
.search-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px; box-shadow: 0 18px 44px rgba(0,0,0,.16);
}
.search-panel .field { height: 60px; }
.search-panel .field input, .search-panel .field-label { font-size: 16.5px; }
.search-panel .field-tag { font-size: 12px; }

/* The route motif: two stops joined by a line. Origin blue, destination amber. */
.route-mark { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 3px; padding-top: 4px; }
.route-dot { width: 9px; height: 9px; border-radius: 50%; border: 2.5px solid var(--primary); }
.route-dot.end { border-color: var(--amber); background: var(--amber); }
.route-line { width: 2px; min-height: 16px; background: linear-gradient(var(--primary), var(--amber)); border-radius: 2px; }

/* A result reads as a journey: the mark, the two cities stacked along it, the
   facts in mono, and the price as the largest thing on the row. */
.ride {
  display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 16px; align-items: center;
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 15px; text-decoration: none; color: inherit;
  transition: border-color .14s ease, transform .14s ease;
}
.ride:hover { border-color: var(--primary); transform: translateY(-1px); }
.ride-cities { display: grid; gap: 7px; min-width: 0; }
.ride-city { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ride-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ride-time { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.ride-seats { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); }
.ride-price { font-family: var(--font-display); font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
.ride-per { display: block; font-family: var(--font-body); font-size: 10.5px; font-weight: 500;
  color: var(--ink-soft); text-align: right; margin-top: 1px; }
.ride-driver { display: flex; align-items: center; gap: 9px; }
.ride-driver .avatar { width: 38px; height: 38px; font-size: 14px; }
.ride-name { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }

/* Same "ride" card, reused for the narrower "your upcoming trips" column —
   too tight for the 5-across search-result grid, so it stacks the cities
   over the driver line instead of placing them side by side. */
.ride.ride-mine {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 14px; row-gap: 8px; align-items: center;
}
.ride-mine .route-mark { grid-column: 1; grid-row: 1 / 3; }
.ride-mine .ride-cities { grid-column: 2; grid-row: 1; align-self: end; }
.ride-mine .ride-city { font-size: 14px; }
.ride-mine .ride-driver { grid-column: 2; grid-row: 2; align-self: start; min-width: 0; }
.ride-mine .ride-driver > div { min-width: 0; }
.ride-mine .ride-name { white-space: normal; }
.ride-mine .ride-meta { grid-column: 3; grid-row: 1 / 3; flex-direction: column; align-items: flex-end; justify-content: center; }

/* Day markers anchor the board without shouting. */
.day-rule { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; }
.day-rule span { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.day-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }

@media (max-width: 760px) {
  .ride { grid-template-columns: auto 1fr auto auto; }
  .ride-driver { display: none; }
}

/* From and To are one thing — a route — so the mark joins them into a single
   unit and date/time sit apart as a secondary pair, rather than four equal
   boxes that give a destination the same weight as a time preference. */
.route-search { display: grid; grid-template-columns: minmax(250px, 1.15fr) minmax(230px, 1fr);
  gap: 18px; align-items: end; }
.route-inputs { display: grid; gap: 10px; min-width: 0; position: relative; }
.route-inputs .field-tag { height: 15px; line-height: 15px; padding-left: 32px; }
.route-inputs .route-dot { flex-shrink: 0; }
/* The connector runs between the two dots. Both sit 16px (field padding) plus
   half a dot from the left edge, and each field is 54px tall under a 21px
   label block — so the ends are fixed, not guessed. */
.route-inputs::before {
  content: ""; position: absolute; left: 19.5px; top: 48px; bottom: 27px; width: 2px;
  background: linear-gradient(var(--primary), var(--amber)); border-radius: 2px;
}
.when-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.search-go { grid-column: 1 / -1; margin-top: 4px; width: 100%; height: 64px; padding: 0 26px; font-size: 17px; font-weight: 800; white-space: nowrap; }

.panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.offer-prompt { margin: 0; font-size: 13px; color: var(--ink-soft); }

.home-body { padding: 34px 0 60px; }
.home-body .eyebrow { margin-bottom: 4px; }
#soonest-list { display: flex; flex-direction: column; gap: 10px; }
.scroll-list { max-height: 420px; overflow-y: auto; padding-right: 6px; }
.scroll-list::-webkit-scrollbar { width: 6px; }
.scroll-list::-webkit-scrollbar-track { background: transparent; }
.scroll-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 100px; }
.scroll-list::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }

@media (max-width: 900px) {
  .route-search { grid-template-columns: 1fr; }
  .search-go { width: 100%; }
}

/* ═══ Home hero — two columns at desktop (2026-09-21) ═══════════════════════
   Left: heading/sub + role tiles + proof strip. Right: the search card,
   unchanged internally. Named .hero-split (not .home-hero) because that name
   is already used by the unrelated, unlinked index-d.html experiment with a
   completely different (block, gradient-background) meaning -- reusing it
   here would have silently mixed the two rule sets. Below 1024px this is not
   a grid at all, so children fall back to plain block stacking in source
   order -- exactly today's single-column order, just with the two new role
   tiles and the proof strip inserted between the sub and the search card. */
.hero-split-left { display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 26px); min-width: 0; }
/* Fluid, so the question scales with the window instead of jumping between a
   handful of breakpoints: ~28px on a phone up to 56px on a wide desktop. */
.hero-split-left h1 { font-size: clamp(28px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -.02em; }
.hero-split-left #home-sub { font-size: clamp(15px, 1.35vw, 19.5px); max-width: 44ch; }
@media (min-width: 1024px) {
  /* The right column tracks the window rather than sitting at a fixed width:
     it may shrink to 400px on a small laptop and grow to 620px on a wide
     screen, so the two columns stay balanced at every size in between. */
  .hero-split { display: grid; grid-template-columns: minmax(0, 1fr) clamp(400px, 42vw, 620px); gap: clamp(28px, 3.4vw, 56px); align-items: start; }
  .hero-split .search-card { margin: 0; }
  /* The 4-across field row is sized for the full page width; inside the hero's
     narrower right column it overflowed by ~124px and pushed a horizontal
     scrollbar onto the whole document (measured at 1160px, not guessed). Two
     rows of two is what the approved mockup shows anyway: from/to, then
     date/time. Scoped to .hero-split so every other page keeps 4-across. */
  .hero-split .home-fields { grid-template-columns: 1fr 1fr; }
}

/* Role tiles -- real buttons, not divs. Non-active = outlined (--surface,
   --line border, --primary text/icon via currentColor); active = filled
   (--primary bg, white text/icon). Both states are variable-driven so dark
   mode keeps working without any extra rules. */
/* A 2-column grid rather than flex-wrap: the two tiles then stay equal width
   and side by side at every size down to 420px, where one per row is right.
   flex-wrap made them stack the moment 2 x basis + gap exceeded the column,
   which happened at ordinary laptop widths. */
.role-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.1vw, 16px); }
@media (max-width: 420px) { .role-tiles { grid-template-columns: 1fr; } }
.role-tile {
  min-width: 0; display: flex; align-items: center; gap: clamp(9px, 1vw, 14px);
  border: 2px solid var(--line); background: var(--surface); color: var(--primary);
  border-radius: var(--radius); padding: clamp(14px, 1.7vw, 22px); cursor: pointer; text-align: left;
  font-family: var(--font-body); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.role-tile svg { stroke: currentColor; flex-shrink: 0; }
.role-tile span { font-size: clamp(14px, 1.15vw, 17px); font-weight: 700; color: inherit; line-height: 1.25; }
.role-tile svg { width: clamp(20px, 1.8vw, 26px); height: clamp(20px, 1.8vw, 26px); }
.role-tile.active {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 32%, transparent);
}
.role-tile:hover { border-color: var(--primary); }
.role-tile:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (max-width: 560px) {
  .role-tiles { flex-wrap: wrap; }
  .role-tile { flex: 1 1 100%; }
}

.proof-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; }
.proof-strip .proof-fee { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--ok); }
.proof-strip .proof-item { font-size: 14px; color: var(--ink-soft); }
.proof-strip .proof-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line); flex-shrink: 0; }

/* "Why us" band -- reuses the .card/.grid-3 pattern from the "Three steps"
   band below it, plus a named .icon-tile class standing in for that section's
   repeated inline icon-square style, so this band's markup doesn't have to
   re-type it a third time. */
.icon-tile { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.icon-tile.amber { background: var(--amber-soft); }
.icon-tile.ok { background: var(--ok-soft); }

/* ═══ Site footer, full version (index.html only) ═══════════════════════════
   Applied via an extra .site-footer-full modifier alongside the existing
   .site-footer class, so the plain copyright-only footer already shared by
   terms.html/privacy.html/contact.html/offer-ride.html/claim-request.html is
   untouched -- only pages carrying BOTH classes get the --primary band. */
/* Text-on-primary contrast: --primary inverts between themes (dark green in
   light mode, light sage in dark mode) -- so is --bg (cream in light mode,
   near-black in dark mode), in the opposite direction. Pairing them as
   background/foreground keeps ~7-8:1 contrast in light mode and ~6:1 in dark
   mode automatically, with no hardcoded hex and no dark-mode override rule
   needed. The muted/secondary tone below (label eyebrows, tagline, bottom
   bar) blends --bg 85% with --primary 15% for the same reason -- verified at
   ~6.8:1 (light) / ~5:1 (dark), still comfortably AA, rather than reusing the
   mockup's fixed rgba(247,242,232,x) tints, which don't adapt. */
.site-footer.site-footer-full {
  background: var(--primary); color: var(--bg); padding: 52px 0 0; margin-top: 56px; border-top: none;
}
.site-footer-full .footer-soft { color: color-mix(in srgb, var(--bg) 85%, var(--primary) 15%); }
.footer-full-grid { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; padding-bottom: 40px; }
.footer-brand-col { display: flex; flex-direction: column; gap: 16px; max-width: 320px; }
.footer-brand-col .brand-mark { display: flex; align-items: center; gap: 11px; }
.footer-brand-col .brand-mark .brand-badge {
  width: 32px; height: 32px; border-radius: 10px; background: var(--surface);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.footer-brand-col .brand-mark span { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.3px; color: var(--bg); }
.footer-brand-col p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.footer-lang-btn {
  border: 1px solid color-mix(in srgb, var(--bg) 30%, transparent); background: transparent; border-radius: 999px;
  padding: 10px 16px; display: flex; align-items: center; gap: 8px; font-family: var(--font-body);
  font-size: 14px; font-weight: 600; color: var(--bg); cursor: pointer; align-self: flex-start;
}
.footer-lang-btn:hover { background: color-mix(in srgb, var(--bg) 10%, transparent); }
.footer-lang-btn:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }
.site-footer-full .footer-col { display: flex; flex-direction: column; gap: 13px; }
.site-footer-full .footer-col h4 {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; margin: 0;
}
.site-footer-full .footer-col a { font-size: 14.5px; color: var(--bg); text-decoration: none; opacity: .92; }
.site-footer-full .footer-col a:hover { opacity: 1; text-decoration: underline; }
.footer-important { max-width: 300px; }
.footer-important p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.footer-bottom-full {
  /* padding-block, NOT the padding shorthand: this element is also a .wrap,
     whose `padding: 0 24px` a shorthand here would reset to 0 -- which put the
     copyright hard against the left edge of the window and clipped "Направено
     в България" off the right. */
  border-top: 1px solid color-mix(in srgb, var(--bg) 16%, transparent); padding-block: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.footer-bottom-full span { font-size: 12.5px; }
@media (max-width: 900px) {
  .footer-full-grid { flex-direction: column; gap: 32px; }
  .footer-important { max-width: none; }
}


/* ---------------------------------------------------------------------------
   Popups (2026-09-22): first-booking congrats (P1), arrival safety check
   (P4) + driver/passenger rating (P2/P3), docked location-sharing bar (P5),
   and live toasts for accepted requests / new bookings / new messages
   (P6/P7/P8). Built on top of the existing .hb-sheet-wrap / .hb-sheet bottom
   sheet (already used for the feature-info sheet) rather than a new modal
   system -- generic #popup-sheet-wrap reuses those classes with fresh
   content per popup. See app.js's "Popups" section for the JS.
--------------------------------------------------------------------------- */

/* Rating stars as real 44x44 buttons (P2/P3), separate from 10-rate-trip.html's
   existing bare-SVG .rate-star, which keeps working unchanged. */
.rate-star-btn {
  border: none; background: transparent; padding: 4px;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.rate-star-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }

/* Tag pills sized as a deliberate touch-target upsize over the shared .pill --
   a NEW variant class so this never changes any other pill on the site. */
.pill-tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 14px; border-radius: 20px; border: none;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  background: var(--primary-soft); color: var(--primary);
  opacity: .5; cursor: pointer;
}
.pill-tag.on { opacity: 1; }
.pill-tag:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Popup sheet: driver/passenger avatar row, price line, etc. */
.popup-avatar-row { display: flex; align-items: center; gap: 12px; justify-content: center; flex-direction: column; margin-bottom: 4px; }
.popup-eyebrow { display: block; text-align: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; }
.popup-title { margin: 0 0 6px; text-align: center; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2; color: var(--ink); }
.popup-sub { margin: 0 0 14px; text-align: center; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.popup-trip-card {
  box-sizing: border-box; background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 4px;
}
.popup-trip-price { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--ink); }
.popup-star-row { display: flex; justify-content: center; gap: 2px; margin-bottom: 4px; }
.popup-progress { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.popup-progress span { width: 22px; height: 5px; border-radius: 3px; background: var(--line); }
.popup-progress span.done { background: var(--ok); }
.popup-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 6px; }
.popup-safety-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto 4px; }

/* ---- Live toasts (P6/P7/P8) ---- */
.live-toast {
  position: fixed; left: 12px; right: 12px; top: 70px; z-index: 9500;
  box-sizing: border-box; max-width: 390px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 34px 12px 14px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.28);
  text-align: left; font-family: var(--font-body); cursor: pointer;
  opacity: 0; transform: translateY(-14px); transition: opacity .2s ease, transform .2s ease;
  min-height: 68px;
}
.live-toast.show { opacity: 1; transform: translateY(0); }
.live-toast-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
}
.live-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.live-toast-title { font-size: 14.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-toast-sub { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-toast-action { font-size: 14px; font-weight: 700; color: var(--primary); flex-shrink: 0; }
/* Dismiss reuses the .hb-x 32px circle pattern, pinned top-right so it never
   competes with the tap target the rest of the toast provides. */
.live-toast { position: fixed; }
.live-toast-dismiss.hb-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; }
@media (prefers-reduced-motion: reduce) { .live-toast { transition: none; } }

/* ---- Docked location-sharing bar (P5) ----
   Plain document flow, prepended before everything else -- pushes the rest
   of the screen down by design while it's visible; when not inserted, the
   layout is byte-identical to before (no reserved space). */
.loc-bar {
  box-sizing: border-box; width: 100%; background: var(--ok-soft); border-bottom: 1px solid var(--line);
  padding: 10px 14px; display: flex; align-items: center; gap: 12px;
}
.loc-bar-dotwrap { position: relative; width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.loc-bar-ring { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 25%, transparent); }
.loc-bar-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ok); border: 2px solid var(--ok-soft); }
.loc-bar-dot.pulse { animation: locBarPulse 1.6s ease-in-out infinite; }
@keyframes locBarPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.loc-bar-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.loc-bar-title { font-size: 14px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-bar-sub { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-bar-btn {
  min-height: 44px; border: none; border-radius: 14px; background: var(--primary-btn); padding: 0 14px;
  font-family: var(--font-body); font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; flex-shrink: 0;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-btn) 40%, transparent);
}

/* Sign in / sign up on a phone: the card's 32px side padding left the primary
   button only 281px wide on a 390px screen, which the owner reported as "too
   small". Below 560px the card goes edge to edge (16px gutters), so the button
   is the width of the screen, the way an app's is. Desktop is untouched. */
@media (max-width: 560px) {
  .auth-shell { padding: 16px 0 48px; align-items: flex-start; }
  .auth-card {
    max-width: none; border-radius: 0; border-left: none; border-right: none;
    box-shadow: none; padding: 28px 16px 32px;
  }
}

/* Publish locked until the cost-sharing box is ticked (offer-ride.html).
   A class, not `disabled`, so the click still reaches publishTrip() and can
   explain why. */
.btn-primary.is-locked { opacity: .45; box-shadow: none; cursor: not-allowed; transition: opacity .15s; }
.card.has-error { border: 1.5px solid var(--bad); background: var(--bad-soft); }
.checkbox-row .confirm-text { color: var(--ink); }
@media (min-width: 1024px) { .checkbox-row .confirm-text { font-size: 14px; line-height: 1.55; } }
/* "Use my location" inside the home From field. */
.locate-btn { flex-shrink: 0; width: 34px; height: 34px; margin-right: -8px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 8px; padding: 0; cursor: pointer; transition: opacity .15s; }
.locate-btn:hover { background: var(--primary-soft); }
.locate-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Vehicle body-type cards: a long label ("Микроавтобус") must wrap inside its
   card instead of spilling over the neighbour at ~386px. Mirrored in design/style.css. */
[id$="body-type-grid"] > .card { min-width: 0; overflow-wrap: anywhere; }
[id$="body-type-grid"] > .card p { line-height: 1.2; }
@media (max-width: 480px) {
  [id$="body-type-grid"] { gap: 6px !important; }
  [id$="body-type-grid"] > .card { padding-left: 0 !important; padding-right: 0 !important; }
  [id$="body-type-grid"] > .card p { font-size: 9.5px !important; letter-spacing: -.02em; }
}