/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║   OSJEČKI TAXI — PREMIUM REDESIGN  v2026-04-15              ║
 * ║   Čisti vizualni override. Logika koda nije dirnuta.        ║
 * ║   Učitava se zadnji — nadjačava sve prethodne stilove.      ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800;9..40,900&display=swap');

/* ─── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --t: 'DM Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --b50:  #EFF6FF; --b100: #DBEAFE; --b200: #BFDBFE; --b300: #93C5FD;
  --b400: #60A5FA; --b500: #3B82F6; --b600: #2563EB; --b700: #1D4ED8;
  --b800: #1E40AF; --b900: #1E3A8A;

  --n0: #FFFFFF; --n50: #F8FAFC; --n100: #F1F5F9; --n200: #E2E8F0;
  --n300: #CBD5E1; --n400: #94A3B8; --n500: #64748B; --n600: #475569;
  --n700: #334155; --n800: #1E293B; --n900: #0F172A;

  --red50: #FEF2F2; --red400: #F87171; --red500: #EF4444;
  --red600: #DC2626; --red700: #B91C1C;

  --bg:      var(--n50);
  --surface: var(--n0);
  --border:  var(--n200);
  --ink:     var(--n900);
  --muted:   var(--n500);
  --primary: var(--b600);
  --primary-h: var(--b700);
  --primary-g: rgba(37,99,235,.2);

  --dbg:  #070D1A; --dsurf: #0C1525; --dcard: #101E35;
  --dcard2: #152340; --dborder: rgba(99,152,255,.16);
  --dink: #E8F1FF; --dmuted: #8AABD4;

  --r2:8px; --r3:12px; --r4:16px; --r5:20px;
  --r6:24px; --r7:28px; --r8:32px;

  --e1: 0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --e2: 0 4px 12px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04);
  --e3: 0 10px 28px rgba(15,23,42,.10),0 4px 10px rgba(15,23,42,.05);
  --e4: 0 20px 50px rgba(15,23,42,.12),0 8px 18px rgba(15,23,42,.06);
  --ep: 0 6px 20px rgba(37,99,235,.22),0 2px 6px rgba(37,99,235,.12);
  --eph: 0 10px 30px rgba(37,99,235,.30),0 4px 10px rgba(37,99,235,.16);

  --ease-s: cubic-bezier(.22,1,.36,1);
  --ease-b: cubic-bezier(.22,.68,0,1.2);
  --d1: 120ms; --d2: 200ms; --d3: 300ms; --d4: 420ms;
}

/* ─── GLOBAL ─────────────────────────────────────────────────── */
*, *::before, *::after { font-family: var(--t) !important }
html { -webkit-text-size-adjust: 100% !important }

body {
  font-family: var(--t) !important;
  background: var(--bg) !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
body.dark { background: var(--dbg) !important; color: var(--dink) !important }

::-webkit-scrollbar { width: 5px; height: 5px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--n300); border-radius: 999px }
body.dark ::-webkit-scrollbar-thumb { background: rgba(99,152,255,.22) }

:focus-visible { outline: 2.5px solid var(--b400) !important; outline-offset: 2px !important }

/* ─── HEADER ─────────────────────────────────────────────────── */
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid rgba(226,232,240,.7) !important;
  backdrop-filter: saturate(200%) blur(24px) !important;
  -webkit-backdrop-filter: saturate(200%) blur(24px) !important;
  box-shadow: 0 1px 0 rgba(226,232,240,.5),0 2px 16px rgba(15,23,42,.04) !important;
  padding: .7rem 1.25rem !important;
}
body.dark header {
  background: rgba(7,13,26,.98) !important;
  border-bottom-color: rgba(99,152,255,.12) !important;
  box-shadow: 0 1px 0 rgba(99,152,255,.08),0 4px 20px rgba(0,0,0,.28) !important;
}

.brand {
  gap: .65rem !important; font-size: 1.08rem !important; font-weight: 800 !important;
  letter-spacing: -.025em !important; color: var(--n800) !important; text-shadow: none !important;
}
body.dark .brand { color: var(--dink) !important; text-shadow: none !important }
.brand .logo {
  width: 38px !important; height: 38px !important; border-radius: var(--r3) !important;
  background: var(--n0) !important; box-shadow: var(--e1),0 0 0 1px rgba(37,99,235,.08) !important;
  overflow: hidden !important; padding: 0 !important;
}

.lang {
  height: 42px !important; padding: 0 .9rem !important; font-size: .9rem !important;
  font-weight: 600 !important; border: 1.5px solid var(--n200) !important;
  border-radius: var(--r4) !important; background: var(--n0) !important;
  color: var(--n700) !important; box-shadow: var(--e1) !important; cursor: pointer !important;
  transition: border-color var(--d2) ease,box-shadow var(--d2) ease !important;
  appearance: auto !important; text-shadow: none !important;
}
.lang:hover { border-color: var(--b300) !important }
.lang:focus { border-color: var(--b600) !important; box-shadow: 0 0 0 3px var(--primary-g) !important }
body.dark .lang {
  background: var(--dcard) !important; color: var(--dink) !important;
  border-color: var(--dborder) !important; box-shadow: none !important;
}

.toggle {
  width: 42px !important; height: 42px !important; min-width: 42px !important;
  min-height: 42px !important; padding: 0 !important; display: grid !important;
  place-items: center !important; font-size: 1.1rem !important;
  border-radius: var(--r4) !important; cursor: pointer !important;
  transition: all var(--d2) ease !important; border: 1.5px solid var(--n200) !important;
  background: var(--n0) !important; color: var(--n700) !important;
  box-shadow: var(--e1) !important; text-shadow: none !important;
}
.toggle:hover { border-color: var(--b300) !important; background: var(--b50) !important }
.toggle.theme-toggle--light {
  background: var(--n0) !important; border-color: var(--n200) !important;
  color: var(--n700) !important; box-shadow: var(--e1) !important; text-shadow: none !important;
}
.toggle.theme-toggle--dark {
  background: var(--dcard) !important; border-color: var(--dborder) !important;
  color: var(--dink) !important; box-shadow: none !important; text-shadow: none !important;
}

@media (max-width:760px) {
  header {
    display: flex !important; align-items: center !important; gap: 10px !important;
    flex-wrap: nowrap !important; padding: .68rem .9rem !important;
  }
  .brand { flex: 0 0 auto !important }
  .brand span { display: none !important }
  .brand .logo { width: 32px !important; height: 32px !important }
  .actions, .track-actions {
    flex: 1 !important; min-width: 0 !important; display: grid !important;
    grid-template-columns: minmax(0,1fr) 42px minmax(0,1.1fr) !important;
    gap: 8px !important; align-items: center !important;
  }
  .lang, .toggle,
  .actions .auth-entry-btn, .track-actions .auth-entry-btn {
    height: 46px !important; min-height: 46px !important; width: 100% !important;
  }
  .actions .auth-entry-btn__meta,
  .track-actions .auth-entry-btn__meta { display: none !important }
  .actions .auth-entry-btn .auth-rank-badge.compact .auth-rank-badge__media,
  .track-actions .auth-entry-btn .auth-rank-badge.compact .auth-rank-badge__media {
    width: 34px !important; height: 34px !important;
  }
}
@media (max-width:390px) {
  .actions, .track-actions {
    grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr) !important; gap: 6px !important;
  }
  .lang, .toggle,
  .actions .auth-entry-btn, .track-actions .auth-entry-btn {
    height: 44px !important; min-height: 44px !important;
  }
}

/* ─── MAIN CONTAINER ─────────────────────────────────────────── */
.container {
  width: min(calc(100% - 1.5rem), 800px) !important;
  margin: 1.5rem auto calc(108px + env(safe-area-inset-bottom)) !important;
  padding: 2rem !important;
  padding-bottom: calc(2rem + 110px + env(safe-area-inset-bottom)) !important;
  background: var(--n0) !important;
  border: 1px solid var(--n200) !important;
  border-radius: var(--r7) !important;
  box-shadow: var(--e3) !important;
}
body.dark .container {
  background: var(--dsurf) !important; border-color: var(--dborder) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.35) !important;
}
@media (max-width:900px) {
  .container {
    width: min(calc(100% - 1rem),800px) !important; margin-top: 1rem !important;
    padding: 1.5rem !important;
    padding-bottom: calc(1.5rem + 114px + env(safe-area-inset-bottom)) !important;
  }
}
@media (max-width:640px) {
  .container {
    width: 100% !important; margin: 0 auto calc(108px + env(safe-area-inset-bottom)) !important;
    padding: 1.25rem 1rem !important;
    padding-bottom: calc(1.25rem + 122px + env(safe-area-inset-bottom)) !important;
    border-radius: 0 !important; border-left: none !important; border-right: none !important;
    box-shadow: none !important;
  }
}

/* ─── TOOLBAR ────────────────────────────────────────────────── */
.toolbar {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important; gap: .75rem !important;
  margin-bottom: 1.5rem !important; padding-bottom: 1.25rem !important;
  border-bottom: 1px solid var(--n100) !important; flex-wrap: wrap !important;
}
body.dark .toolbar { border-bottom-color: var(--dborder) !important }

.counter {
  font-size: .85rem !important; font-weight: 700 !important; color: var(--n500) !important;
  background: var(--n100) !important; padding: .3rem .7rem !important;
  border-radius: 999px !important; letter-spacing: .02em !important;
}
body.dark .counter { background: var(--dcard) !important; color: var(--dmuted) !important }

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn {
  font-family: var(--t) !important; font-size: .92rem !important; font-weight: 700 !important;
  letter-spacing: -.01em !important; border-radius: var(--r4) !important;
  padding: .7rem 1.2rem !important; min-height: 44px !important; cursor: pointer !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: .45rem !important; white-space: nowrap !important;
  transition: transform var(--d1) var(--ease-b),box-shadow var(--d2) ease,
    background var(--d2) ease,border-color var(--d2) ease,opacity var(--d2) ease !important;
  position: relative !important; overflow: hidden !important;
}
.btn:active { transform: scale(.97) !important }

.btn.secondary {
  background: var(--n0) !important; color: var(--n700) !important;
  border: 1.5px solid var(--n200) !important; box-shadow: var(--e1) !important;
}
.btn.secondary:hover {
  background: var(--n50) !important; border-color: var(--n300) !important;
  box-shadow: var(--e2) !important; transform: translateY(-1px) !important;
}
body.dark .btn.secondary {
  background: var(--dcard) !important; color: var(--dink) !important;
  border-color: var(--dborder) !important; box-shadow: none !important;
}
body.dark .btn.secondary:hover {
  border-color: rgba(99,152,255,.3) !important; background: var(--dcard2) !important;
}

.btn.primary {
  background: var(--b600) !important; color: #fff !important;
  border: none !important; box-shadow: var(--ep) !important; text-shadow: none !important;
}
.btn.primary:hover {
  background: var(--b700) !important; box-shadow: var(--eph) !important;
  transform: translateY(-1px) !important;
}
body.dark .btn.primary {
  background: var(--b600) !important; box-shadow: 0 6px 22px rgba(37,99,235,.35) !important;
  text-shadow: none !important;
}

.btn[disabled] {
  opacity: .42 !important; cursor: not-allowed !important;
  transform: none !important; box-shadow: none !important; pointer-events: none !important;
}

#submitBtn {
  min-height: 60px !important; min-width: 240px !important;
  font-size: 1.08rem !important; font-weight: 800 !important; letter-spacing: -.025em !important;
  border-radius: var(--r5) !important; padding: 0 2.25rem !important;
  box-shadow: 0 8px 28px rgba(37,99,235,.28),0 2px 8px rgba(37,99,235,.14) !important;
}
#submitBtn:hover {
  box-shadow: 0 14px 38px rgba(37,99,235,.36),0 4px 14px rgba(37,99,235,.18) !important;
  transform: translateY(-2px) !important;
}

.submit {
  margin-top: 1.75rem !important; margin-bottom: .5rem !important;
  display: flex !important; gap: 1rem !important;
  align-items: center !important; justify-content: center !important;
  flex-wrap: wrap !important; scroll-margin-bottom: 130px !important;
}

@media (max-width:480px) {
  #submitBtn { min-width: 100% !important; min-height: 56px !important }
}

/* ─── RIDE CARDS ─────────────────────────────────────────────── */
.rides { display: grid !important; gap: 1.25rem !important }

.card {
  position: relative !important;
  background: var(--n0) !important; border: 1.5px solid var(--n200) !important;
  border-radius: var(--r7) !important; padding: 1.75rem !important;
  box-shadow: var(--e2) !important;
  transition: box-shadow var(--d3) ease !important;
  animation: cardIn var(--d4) var(--ease-s) both !important;
}
.card:hover { box-shadow: var(--e3) !important }

/* Accent stripe */
.card::before {
  content: '' !important; position: absolute !important;
  top: 0 !important; left: 1.5rem !important; right: 1.5rem !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--b600), var(--b400)) !important;
  border-radius: 0 0 var(--r2) var(--r2) !important;
}

body.dark .card {
  background: var(--dcard) !important; border-color: var(--dborder) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.25) !important;
}

.card h3 {
  font-size: 1.08rem !important; font-weight: 800 !important; color: var(--n800) !important;
  letter-spacing: -.025em !important; margin: .25rem 0 1.35rem !important; text-shadow: none !important;
}
body.dark .card h3 { color: var(--dink) !important; text-shadow: none !important }

.remove {
  position: absolute !important; top: .85rem !important; right: .85rem !important;
  width: 60px !important; height: 60px !important; min-width: 60px !important;
  min-height: 60px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  text-align: center !important; white-space: nowrap !important; overflow: hidden !important;
  box-sizing: border-box !important;
  border-radius: 14px !important; border: 1.5px solid var(--n200) !important;
  background: var(--n0) !important; color: var(--n400) !important; font-size: .80rem !important;
  font-weight: 700 !important; letter-spacing: -.02em !important; line-height: 1 !important;
  cursor: pointer !important; transition: all var(--d1) ease !important;
}
.remove:hover {
  background: var(--red50) !important; border-color: #FECACA !important;
  color: var(--red600) !important; transform: scale(1.05) !important;
}
body.dark .remove {
  background: var(--dcard2) !important; border-color: var(--dborder) !important;
  color: var(--dmuted) !important;
}
body.dark .remove:hover {
  background: rgba(220,38,38,.18) !important; border-color: rgba(248,113,113,.4) !important;
  color: #FCA5A5 !important;
}

@media (max-width: 640px) {
  .remove {
    font-size: .76rem !important;
  }
}

@keyframes cardIn {
  from { opacity:0; transform:translateY(16px) }
  to   { opacity:1; transform:translateY(0) }
}
.card:nth-child(2) { animation-delay:.06s !important }
.card:nth-child(3) { animation-delay:.12s !important }
.card:nth-child(4) { animation-delay:.18s !important }
.card:nth-child(5) { animation-delay:.24s !important }

@media (max-width:640px) {
  .card { padding: 1.35rem 1rem !important; border-radius: var(--r6) !important }
}

/* ─── FORM FIELDS ─────────────────────────────────────────────── */
.field { display: flex !important; flex-direction: column !important; gap: .4rem !important }

.field label {
  font-size: .76rem !important; font-weight: 800 !important; letter-spacing: .055em !important;
  text-transform: uppercase !important; color: var(--n500) !important; text-shadow: none !important;
}
body.dark .field label { color: var(--dmuted) !important; text-shadow: none !important }

.card .field + .field, .card .row + .field,
.card .field + .row, .card .row + .row { margin-top: 1.05rem !important }

input, textarea {
  font-family: var(--t) !important; font-size: 1rem !important; font-weight: 500 !important;
  padding: .82rem 1rem !important; border: 1.5px solid var(--n200) !important;
  border-radius: var(--r4) !important; background: var(--n50) !important;
  color: var(--n900) !important; outline: none !important; width: 100% !important;
  transition: border-color var(--d1) ease,box-shadow var(--d1) ease,background var(--d1) ease !important;
  -webkit-appearance: none !important;
}
input::placeholder, textarea::placeholder {
  color: var(--n400) !important; font-weight: 400 !important;
}
input:hover, textarea:hover { border-color: var(--n300) !important; background: var(--n0) !important }
input:focus, textarea:focus {
  border-color: var(--b600) !important; background: var(--n0) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.14) !important;
}
textarea { min-height: 84px !important; resize: vertical !important }
input[type="number"] { appearance: textfield !important }
input[type="date"], input[type="time"] { cursor: pointer !important }

body.dark input, body.dark textarea {
  background: var(--dcard2) !important; border-color: var(--dborder) !important;
  color: var(--dink) !important;
}
body.dark input::placeholder, body.dark textarea::placeholder {
  color: rgba(138,171,212,.5) !important; opacity: 1 !important;
}
body.dark input:hover, body.dark textarea:hover {
  border-color: rgba(99,152,255,.28) !important; background: rgba(21,35,64,.8) !important;
}
body.dark input:focus, body.dark textarea:focus {
  border-color: var(--b500) !important; background: rgba(21,35,64,.9) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important;
}

.sugg-wrap textarea.pickup, .sugg-wrap textarea.destination {
  padding-right: 118px !important;
}

/* ─── ROW GRID ───────────────────────────────────────────────── */
.row { display: grid !important; gap: .85rem !important; grid-template-columns: 1fr !important }
@media (min-width:560px) { .row { grid-template-columns: 1fr 1fr !important } }

/* ─── SERVICE TYPE CARDS ─────────────────────────────────────── */
.service-choices {
  display: grid !important; grid-template-columns: 1fr 1fr !important;
  gap: .75rem !important; max-width: 580px !important;
}

.service-choice__card {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; gap: .28rem !important;
  min-height: 126px !important; padding: 1rem .95rem .9rem !important;
  border-radius: var(--r5) !important; border: 1.5px solid var(--n200) !important;
  background: var(--n50) !important; box-shadow: none !important;
  transition: transform var(--d2) var(--ease-b),border-color var(--d2) ease,
    box-shadow var(--d2) ease,background var(--d2) ease !important;
}
.service-choice__card::after {
  top: .9rem !important; right: .9rem !important; width: 17px !important; height: 17px !important;
  border: 2px solid var(--n300) !important; border-radius: 50% !important;
  background: var(--n0) !important; box-shadow: none !important;
}
.service-choice:hover .service-choice__card {
  border-color: var(--b300) !important; background: var(--b50) !important;
  transform: translateY(-2px) !important; box-shadow: var(--e2) !important;
}
.service-choice input:checked + .service-choice__card {
  border-color: var(--b600) !important; border-width: 2px !important;
  background: linear-gradient(145deg,var(--b50),#EEF3FF) !important;
  box-shadow: 0 0 0 1px var(--b600),var(--e2) !important;
}
.service-choice input:checked + .service-choice__card::after {
  background: var(--b600) !important; border-color: var(--b600) !important;
  box-shadow: inset 0 0 0 3px var(--n0) !important;
}

.service-choice__img { width: 42px !important; height: 42px !important; filter: none !important; margin: 0 0 .2rem !important }
.service-choice__title {
  font-size: .96rem !important; font-weight: 800 !important; color: var(--n900) !important;
  letter-spacing: -.02em !important;
}
.service-choice__desc {
  font-size: .78rem !important; color: var(--n500) !important;
  line-height: 1.35 !important; max-width: 22ch !important;
}

body.dark .service-choice__card { background: var(--dcard2) !important; border-color: var(--dborder) !important }
body.dark .service-choice__card::after { background: var(--dcard) !important; border-color: rgba(99,152,255,.35) !important }
body.dark .service-choice:hover .service-choice__card { border-color: rgba(99,152,255,.45) !important; background: rgba(37,99,235,.1) !important }
body.dark .service-choice input:checked + .service-choice__card {
  border-color: var(--b500) !important; background: rgba(37,99,235,.16) !important;
  box-shadow: 0 0 0 1px var(--b500),0 4px 18px rgba(37,99,235,.2) !important;
}
body.dark .service-choice input:checked + .service-choice__card::after {
  background: var(--b500) !important; border-color: var(--b400) !important;
  box-shadow: inset 0 0 0 3px var(--dcard) !important;
}
body.dark .service-choice__title { color: var(--dink) !important }
body.dark .service-choice__desc  { color: var(--dmuted) !important }

@media (max-width:460px) {
  .service-choices { gap: .6rem !important }
  .service-choice__card { min-height: 112px !important; padding: .85rem .75rem !important }
  .service-choice__img { width: 36px !important; height: 36px !important }
  .service-choice__title { font-size: .88rem !important }
  .service-choice__desc { font-size: .72rem !important }
}

/* ─── EXTRAS / SERVICES ──────────────────────────────────────── */
.services {
  display: grid !important;
  grid-template-columns: repeat(auto-fill,minmax(104px,1fr)) !important;
  gap: .65rem !important;
}
.svc {
  position: relative !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  min-height: 108px !important; padding: .85rem .5rem .75rem !important;
  border-radius: var(--r4) !important; border: 1.5px solid var(--n200) !important;
  background: var(--n50) !important; cursor: pointer !important; user-select: none !important;
  transition: transform var(--d2) var(--ease-b),border-color var(--d2) ease,
    box-shadow var(--d2) ease,background var(--d2) ease !important;
}
.svc:hover { border-color: var(--b300) !important; background: var(--b50) !important; transform: translateY(-2px) !important; box-shadow: var(--e2) !important }
.svc:active { transform: scale(.97) !important }
.svc img { width: 46px !important; height: 46px !important; object-fit: contain !important; filter: none !important }
.svc span {
  display: block !important; margin-top: .45rem !important; font-size: .8rem !important;
  font-weight: 700 !important; color: var(--n700) !important;
  text-align: center !important; text-shadow: none !important;
}
.svc.checked {
  border: 2px solid var(--b600) !important;
  background: linear-gradient(145deg,var(--b50),#EEF3FF) !important;
  box-shadow: 0 0 0 1px var(--b600),var(--e1) !important;
}
.svc.checked::after {
  content: '✓' !important; position: absolute !important;
  top: .45rem !important; right: .5rem !important;
  width: 18px !important; height: 18px !important;
  border-radius: 50% !important; background: var(--b600) !important;
  color: #fff !important; font-size: .65rem !important; font-weight: 900 !important;
  display: grid !important; place-items: center !important;
}
.svc.checked span { color: var(--b700) !important; text-shadow: none !important }
body.dark .svc.checked::before { display: none !important }
body.dark .svc { background: var(--dcard2) !important; border-color: var(--dborder) !important }
body.dark .svc:hover { border-color: rgba(99,152,255,.4) !important; background: rgba(37,99,235,.1) !important }
body.dark .svc span { color: var(--dmuted) !important; text-shadow: none !important }
body.dark .svc img { filter: none !important }
body.dark .svc.checked { border-color: var(--b500) !important; background: rgba(37,99,235,.16) !important; box-shadow: 0 0 0 1px var(--b500),0 4px 16px rgba(37,99,235,.2) !important }
body.dark .svc.checked::after { background: var(--b500) !important }
body.dark .svc.checked span { color: var(--b200) !important }

@media (max-width:640px) {
  .services { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: .55rem !important }
  .svc { min-height: 100px !important }
  .svc img { width: 40px !important; height: 40px !important }
}

/* ─── ADDRESS + MIC + MAP ────────────────────────────────────── */
.sugg-wrap { position: relative !important }
.sugg-actions {
  position: absolute !important; right: 10px !important; top: 50% !important;
  transform: translateY(-50%) !important; display: flex !important;
  align-items: center !important; gap: .38rem !important; z-index: 3 !important;
}
.sugg-actions .mic, .sugg-actions .mapBtn {
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  min-height: 40px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: var(--r3) !important; border: 1.5px solid var(--n200) !important;
  background: var(--n0) !important; color: var(--n500) !important;
  box-shadow: var(--e1) !important; cursor: pointer !important;
  transition: all var(--d2) ease !important;
}
.sugg-actions .mic:hover, .sugg-actions .mapBtn:hover {
  border-color: var(--b300) !important; color: var(--b600) !important;
  background: var(--b50) !important; box-shadow: var(--e2) !important;
}
.sugg-actions .mic svg, .sugg-actions .mapBtn svg { width: 19px !important; height: 19px !important }
.sugg-actions .mapBtn { color: var(--b600) !important }

.mic.recording {
  border-color: var(--b500) !important; color: var(--b600) !important;
  background: var(--b50) !important;
  animation: micR 1.2s ease-in-out infinite !important;
}
@keyframes micR {
  0%,100% { box-shadow: 0 0 0 3px rgba(37,99,235,.12) }
  50%      { box-shadow: 0 0 0 7px rgba(37,99,235,.05) }
}

body.dark .sugg-actions .mic, body.dark .sugg-actions .mapBtn {
  background: var(--dcard2) !important; border-color: var(--dborder) !important;
  color: var(--dmuted) !important; box-shadow: none !important;
}
body.dark .sugg-actions .mapBtn { color: var(--b300) !important }
body.dark .sugg-actions .mic:hover, body.dark .sugg-actions .mapBtn:hover {
  border-color: rgba(99,152,255,.4) !important; background: rgba(37,99,235,.1) !important;
}

/* ─── AUTOCOMPLETE ───────────────────────────────────────────── */
.suggestions {
  position: absolute !important; left: 0 !important; right: 0 !important;
  top: calc(100% + 8px) !important; background: linear-gradient(180deg,#ffffff,#fbfdff) !important;
  border: 1px solid #dbe7fb !important; border-radius: 22px !important;
  box-shadow: 0 18px 36px rgba(16,52,120,.14) !important; z-index: 220 !important;
  max-height: 280px !important; overflow: auto !important; display: none; padding: 8px !important;
}
.suggestions.is-open { display: block !important; }
body.dark .suggestions { background: var(--dcard) !important; border-color: var(--dborder) !important }

.sugg-item {
  width: 100% !important; min-height: 56px !important;
  display: grid !important; grid-template-columns: 36px minmax(0,1fr) !important; align-items: center !important; gap: .72rem !important;
  padding: .82rem .92rem !important; font-size: .96rem !important; font-weight: 800 !important;
  color: var(--n700) !important; cursor: pointer !important; border: none !important; text-align: left !important;
  border-radius: 16px !important; background: transparent !important;
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.25 !important;
  transition: background var(--d1) ease, color var(--d1) ease, box-shadow var(--d1) ease !important;
}
.sugg-item::before {
  content: "" !important; width: 36px !important; height: 36px !important; border-radius: 12px !important;
  background: linear-gradient(180deg,#f6faff,#eaf2ff) !important; border: 1px solid #dbe7fb !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important; justify-self: start !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231b5fd6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-4.35 7-11a7 7 0 1 0-14 0c0 6.65 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: 18px 18px !important;
}
.sugg-item:last-child { margin-bottom: 0 !important }
.sugg-item:hover { background: var(--b50) !important; color: var(--b700) !important; box-shadow: inset 0 0 0 1px #d8e8ff !important }
.sugg-item.active { background: var(--b50) !important; color: var(--b700) !important; box-shadow: inset 0 0 0 1px #d8e8ff !important }
body.dark .sugg-item { color: var(--dink) !important }
body.dark .sugg-item:hover, body.dark .sugg-item.active { background: rgba(37,99,235,.12) !important; color: var(--b200) !important; box-shadow: inset 0 0 0 1px rgba(99,152,255,.25) !important }
body.dark .sugg-item::before { background: rgba(37,99,235,.12) !important; border-color: rgba(99,152,255,.25) !important }

/* ─── PRICE BOX ──────────────────────────────────────────────── */
.ride-price {
  margin-top: 1rem !important; border: 1.5px solid var(--n200) !important;
  background: var(--n50) !important; border-radius: var(--r5) !important;
  padding: 1rem 1.15rem !important; box-shadow: none !important;
}
.ride-price__top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: .75rem !important }
.ride-price__label { font-size: .72rem !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--n400) !important }
.ride-price__value { font-size: 1.42rem !important; font-weight: 900 !important; color: var(--b700) !important; letter-spacing: -.04em !important }
.ride-price__meta { margin-top: .3rem !important; font-size: .8rem !important; color: var(--n400) !important; min-height: 1em !important }
.ride-price.is-loading .ride-price__value { color: var(--n300) !important; animation: shimmer 1.4s ease-in-out infinite !important }
@keyframes shimmer { 0%,100%{opacity:.35}50%{opacity:1} }
.ride-price.is-error { border-color: rgba(239,68,68,.22) !important; background: var(--red50) !important }
.ride-price.is-error .ride-price__value { color: var(--red600) !important }

.price-total {
  margin: 1.25rem 0 .25rem !important; padding: 1.1rem 1.25rem !important;
  border-radius: var(--r5) !important;
  background: linear-gradient(135deg,var(--b50),var(--b100)) !important;
  border: 1.5px solid var(--b200) !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 1rem !important; box-shadow: none !important;
}
.price-total__label { font-size: .72rem !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--b600) !important }
.price-total__value { font-size: 1.38rem !important; font-weight: 900 !important; color: var(--b800) !important; letter-spacing: -.04em !important }
.price-total__meta { font-size: .8rem !important; color: var(--b500) !important; margin-top: .15rem !important }
.price-total.is-hidden { display: none !important }

body.dark .ride-price { background: var(--dcard2) !important; border-color: var(--dborder) !important }
body.dark .ride-price__label { color: var(--dmuted) !important }
body.dark .ride-price__value { color: var(--b300) !important }
body.dark .ride-price__meta  { color: var(--dmuted) !important }
body.dark .price-total { background: rgba(37,99,235,.1) !important; border-color: rgba(99,152,255,.22) !important }
body.dark .price-total__label { color: var(--b300) !important }
body.dark .price-total__value { color: var(--b200) !important }
body.dark .price-total__meta  { color: var(--b400) !important }

/* ─── FORM VALIDATION ────────────────────────────────────────── */
.form-notice {
  display: none !important; margin: .75rem 0 0 !important; padding: .95rem 1.1rem !important;
  border-radius: var(--r4) !important; border: 1.5px solid rgba(239,68,68,.2) !important;
  background: var(--red50) !important; color: var(--red700) !important;
  font-weight: 600 !important; font-size: .9rem !important; box-shadow: none !important;
}
.form-notice.show {
  display: block !important; animation: slideUp var(--d2) var(--ease-s) !important;
}
@keyframes slideUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
body.dark .form-notice { background: rgba(127,29,29,.22) !important; border-color: rgba(248,113,113,.25) !important; color: #FCA5A5 !important }

.field-invalid {
  border-color: var(--red500) !important; background: #FFF5F5 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.1) !important;
}
.field-invalid::placeholder { color: var(--red400) !important; opacity: 1 !important }
.field-invalid:focus { border-color: var(--red600) !important; box-shadow: 0 0 0 3px rgba(220,38,38,.15) !important }
body.dark .field-invalid { background: rgba(127,29,29,.18) !important; border-color: rgba(248,113,113,.55) !important; box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important }

/* ─── MAP MODAL ──────────────────────────────────────────────── */
.modal {
  background: rgba(15,23,42,.46) !important; backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important; padding: 1.25rem !important; z-index: 100 !important;
}
.modal-card {
  border-radius: var(--r7) !important; border: 1.5px solid var(--n200) !important;
  background: var(--n0) !important; box-shadow: var(--e4) !important;
  overflow: hidden !important; width: min(100%,980px) !important;
}
body.dark .modal-card::before { display: none !important }
body.dark .modal-card { background: var(--dcard) !important; border-color: var(--dborder) !important; box-shadow: 0 28px 70px rgba(0,0,0,.55) !important }

.modal-head {
  padding: .85rem 1.1rem !important; border-bottom: 1px solid var(--n100) !important;
  background: var(--n50) !important; display: flex !important; align-items: center !important;
  justify-content: space-between !important; gap: .75rem !important;
}
body.dark .modal-head { background: var(--dcard2) !important; border-bottom-color: var(--dborder) !important }
.modal-head strong { font-size: .98rem !important; font-weight: 800 !important; color: var(--n800) !important }
body.dark .modal-head strong { color: var(--dink) !important }

.close {
  height: 36px !important; padding: 0 .8rem !important; border-radius: var(--r2) !important;
  border: 1.5px solid var(--n200) !important; background: var(--n0) !important;
  color: var(--n500) !important; font-size: .88rem !important; font-weight: 700 !important;
  cursor: pointer !important; transition: all var(--d1) ease !important;
}
.close:hover { background: var(--red50) !important; border-color: #FECACA !important; color: var(--red600) !important }
body.dark .close { background: var(--dcard) !important; border-color: var(--dborder) !important; color: var(--dmuted) !important }

.icon-btn {
  height: 38px !important; padding: 0 .85rem !important; border-radius: var(--r2) !important;
  border: 1.5px solid var(--n200) !important; background: var(--n0) !important;
  color: var(--n700) !important; font-size: .84rem !important; font-weight: 700 !important;
  cursor: pointer !important; display: inline-flex !important; align-items: center !important;
  gap: .35rem !important; transition: all var(--d1) ease !important;
}
.icon-btn:hover { border-color: var(--b300) !important; color: var(--b600) !important; background: var(--b50) !important }
body.dark .icon-btn { background: var(--dcard2) !important; border-color: var(--dborder) !important; color: var(--dink) !important }

.map-info {
  padding: .75rem 1.1rem !important; background: var(--n50) !important;
  border-top: 1px solid var(--n100) !important;
  display: flex !important; gap: .65rem !important; align-items: center !important; flex-wrap: wrap !important;
}
body.dark .map-info { background: var(--dcard2) !important; border-top-color: var(--dborder) !important }

.badge {
  padding: .28rem .62rem !important; border-radius: 999px !important;
  border: 1px solid var(--n200) !important; background: var(--n0) !important;
  color: var(--n700) !important; font-weight: 700 !important; font-size: .8rem !important;
  box-shadow: var(--e1) !important;
}
body.dark .badge { background: var(--dcard) !important; border-color: var(--dborder) !important; color: var(--dink) !important }
.addr { font-weight: 700 !important; color: var(--n800) !important; font-size: .9rem !important }
body.dark .addr { color: var(--dink) !important }
.hint { color: var(--n400) !important; font-size: .8rem !important }
body.dark .hint { color: var(--dmuted) !important }

.map-collapsible { background: var(--n0) !important; border-top-color: var(--n200) !important }
body.dark .map-collapsible { background: var(--dcard) !important; border-top-color: var(--dborder) !important }

.map-collapsible .map-help, .map-help {
  border-radius: var(--r4) !important; background: var(--b50) !important;
  border: 1px solid var(--b100) !important; color: var(--b700) !important;
  font-size: .88rem !important; box-shadow: none !important; text-shadow: none !important;
}
body.dark .map-collapsible .map-help, body.dark .map-help {
  background: rgba(37,99,235,.09) !important; border-color: rgba(99,152,255,.18) !important;
  color: var(--b200) !important; text-shadow: none !important;
}

/* ─── OVERLAYS ───────────────────────────────────────────────── */
.entry-overlay, .gps-overlay, .order-loading {
  background: rgba(248,250,252,.88) !important;
  backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important;
}
body.dark .entry-overlay, body.dark .gps-overlay, body.dark .order-loading {
  background: rgba(7,13,26,.88) !important;
}
.entry-overlay__card, .gps-overlay__card, .order-loading__card {
  border-radius: var(--r7) !important; background: var(--n0) !important;
  border: 1.5px solid var(--n200) !important; box-shadow: var(--e4) !important;
  padding: 2.1rem 1.75rem 1.75rem !important; max-width: 420px !important;
  width: 100% !important; text-align: center !important;
}
.entry-overlay__card::before, .gps-overlay__card::before, .order-loading__card::before { display: none !important }
body.dark .entry-overlay__card, body.dark .gps-overlay__card, body.dark .order-loading__card {
  background: var(--dsurf) !important; border-color: var(--dborder) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.55) !important;
}
.entry-overlay__logo, .gps-overlay__logo, .order-loading__badge {
  width: 78px !important; height: 78px !important; border-radius: var(--r5) !important;
  background: var(--b50) !important; border: 1.5px solid var(--b100) !important;
  box-shadow: none !important; margin: 0 auto 1.25rem !important;
}
body.dark .entry-overlay__logo, body.dark .gps-overlay__logo, body.dark .order-loading__badge {
  background: rgba(37,99,235,.1) !important; border-color: rgba(99,152,255,.2) !important;
}
.entry-overlay__title, .gps-overlay__title, .order-loading__title {
  font-size: 1.7rem !important; font-weight: 900 !important; letter-spacing: -.04em !important;
  line-height: 1.1 !important; color: var(--n900) !important;
}
body.dark .entry-overlay__title, body.dark .gps-overlay__title, body.dark .order-loading__title {
  color: var(--dink) !important;
}
.entry-overlay__text, .gps-overlay__text, .order-loading__text {
  color: var(--n500) !important; font-size: .95rem !important; line-height: 1.6 !important;
  max-width: 28ch !important; margin: .65rem auto 0 !important;
}
body.dark .entry-overlay__text, body.dark .gps-overlay__text, body.dark .order-loading__text {
  color: var(--dmuted) !important;
}
.entry-overlay__actions, .gps-overlay__actions { display: grid !important; gap: .7rem !important; margin-top: 1.35rem !important }
.entry-overlay__btn, .gps-overlay__btn {
  width: 100% !important; min-height: 52px !important; border-radius: var(--r4) !important;
  font-weight: 700 !important; font-size: .97rem !important; cursor: pointer !important;
  transition: transform var(--d1) var(--ease-b),box-shadow var(--d2) ease,background var(--d2) ease !important;
}
.entry-overlay__btn:not(.secondary):not(.ghost), .gps-overlay__btn:not(.secondary):not(.ghost) {
  background: var(--b600) !important; color: #fff !important; border: none !important; box-shadow: var(--ep) !important;
}
.entry-overlay__btn:not(.secondary):not(.ghost):hover, .gps-overlay__btn:not(.secondary):not(.ghost):hover {
  background: var(--b700) !important; box-shadow: var(--eph) !important; transform: translateY(-1px) !important;
}
.entry-overlay__btn.secondary, .gps-overlay__btn.secondary {
  background: var(--n100) !important; color: var(--n700) !important;
  border: 1.5px solid var(--n200) !important; box-shadow: none !important;
}
.entry-overlay__btn.ghost, .gps-overlay__btn.ghost {
  background: transparent !important; color: var(--n400) !important;
  border: none !important; box-shadow: none !important; min-height: 40px !important;
}
body.dark .entry-overlay__btn.secondary, body.dark .gps-overlay__btn.secondary {
  background: var(--dcard2) !important; color: var(--dink) !important; border-color: var(--dborder) !important;
}

.order-loading__line {
  background: var(--n100) !important; border-radius: 999px !important;
  height: 6px !important; box-shadow: none !important; margin-top: 1.35rem !important;
}
.order-loading__line > span {
  background: linear-gradient(90deg,var(--b500),var(--b300),var(--b500)) !important;
  box-shadow: none !important;
}

/* ─── BOOT SPLASH ────────────────────────────────────────────── */
.app-boot {
  background: linear-gradient(155deg,#F0F6FF 0%,#EBF3FF 50%,#DDEEFF 100%) !important;
}
.app-boot__panel {
  border-radius: var(--r7) !important; background: rgba(255,255,255,.97) !important;
  border: 1.5px solid rgba(219,234,254,.8) !important;
  box-shadow: 0 20px 60px rgba(37,99,235,.12),var(--e2) !important;
  padding: 2.25rem 1.75rem 1.75rem !important;
}
.app-boot__panel::before {
  height: 3px !important;
  background: linear-gradient(90deg,var(--b600),var(--b400)) !important;
  opacity: 1 !important;
}
.app-boot__glow { display: none !important }
.app-boot__logo-shell { background: var(--b50) !important; box-shadow: var(--e2) !important; border: 1.5px solid var(--b100) !important }
.app-boot__title { font-size: 1.5rem !important; font-weight: 900 !important; color: var(--n900) !important; letter-spacing: -.04em !important }
.app-boot__subtitle { color: var(--n400) !important; font-weight: 500 !important }
.app-boot__line { background: var(--n100) !important; box-shadow: none !important }
.app-boot__line > span { background: linear-gradient(90deg,var(--b400),var(--b600),var(--b400)) !important; box-shadow: none !important }

/* ─── BOTTOM NAV ─────────────────────────────────────────────── */
.ps-bottom-nav {
  border-radius: var(--r7) !important; background: rgba(255,255,255,.97) !important;
  border: 1.5px solid rgba(226,232,240,.85) !important;
  box-shadow: 0 8px 32px rgba(15,23,42,.09),0 2px 6px rgba(15,23,42,.05) !important;
  backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important;
}
body.dark .ps-bottom-nav {
  background: rgba(7,13,26,.98) !important; border-color: var(--dborder) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.42) !important;
}
.ps-nav-btn { border-radius: var(--r4) !important; font-weight: 600 !important; transition: all var(--d2) ease !important; color: var(--n400) !important }
.ps-nav-btn span { font-size: .75rem !important; font-weight: 700 !important }
.ps-nav-btn:hover { background: var(--b50) !important; color: var(--b700) !important }
.ps-nav-btn.active { background: var(--b600) !important; color: #fff !important; box-shadow: var(--ep) !important; text-shadow: none !important }
body.dark .ps-nav-btn { color: var(--dmuted) !important }
body.dark .ps-nav-btn:hover { background: rgba(37,99,235,.1) !important; color: var(--dink) !important }
body.dark .ps-nav-btn.active { background: var(--b600) !important; color: #fff !important; text-shadow: none !important; box-shadow: 0 6px 22px rgba(37,99,235,.35) !important }

@media (max-width:640px) {
  .ps-bottom-nav { border-radius: var(--r6) !important; width: calc(100vw - 12px) !important }
}

/* ─── AUTH PANEL ─────────────────────────────────────────────── */
.auth-panel {
  background: linear-gradient(180deg,#FFFFFF,#F7FAFF) !important;
  box-shadow: -10px 0 44px rgba(15,23,42,.10) !important;
  border-left: 1.5px solid var(--n200) !important;
}
body.dark .auth-panel {
  background: linear-gradient(180deg,var(--dsurf),var(--dcard)) !important;
  box-shadow: -10px 0 44px rgba(0,0,0,.38) !important;
  border-left: 1.5px solid var(--dborder) !important;
}

.auth-btn { border-radius: var(--r4) !important; font-weight: 700 !important; transition: transform var(--d1) var(--ease-b),box-shadow var(--d2) ease !important }
.auth-btn:not(.secondary) { background: linear-gradient(135deg,var(--b600),var(--b700)) !important; box-shadow: var(--ep) !important }
.auth-btn:not(.secondary):hover { transform: translateY(-1px) !important; box-shadow: var(--eph) !important }
body.dark .auth-btn { text-shadow: none !important }
body.dark .auth-btn:not(.secondary) { box-shadow: 0 6px 22px rgba(37,99,235,.3) !important }

.auth-tab.active { background: var(--b600) !important; border-color: var(--b600) !important; box-shadow: 0 4px 12px rgba(37,99,235,.22) !important }

.auth-entry-btn { border-radius: var(--r5) !important; border: 1.5px solid var(--n200) !important; background: var(--n0) !important; box-shadow: var(--e2) !important }
body.dark .auth-entry-btn { background: var(--dcard) !important; border-color: var(--dborder) !important; box-shadow: none !important }
.auth-entry-btn__title { color: var(--n800) !important }
body.dark .auth-entry-btn__title { color: var(--dink) !important }
.auth-entry-btn__meta { color: var(--n500) !important }
body.dark .auth-entry-btn__meta { color: var(--dmuted) !important }

.auth-card { border-radius: var(--r5) !important; border: 1.5px solid var(--n200) !important; background: var(--n0) !important; box-shadow: var(--e1) !important }
body.dark .auth-card { background: var(--dcard) !important; border-color: var(--dborder) !important; box-shadow: none !important }

.auth-paywall-card { border-radius: var(--r7) !important; border: 1.5px solid var(--n200) !important; background: var(--n0) !important; box-shadow: var(--e4) !important }
body.dark .auth-paywall-card { background: var(--dsurf) !important; border-color: var(--dborder) !important }

body.dark .auth-rank-badge__media::after { display: none !important }
body.dark .auth-rank-badge__media img { filter: none !important }

.auth-rank { border-radius: var(--r6) !important; box-shadow: 0 16px 40px rgba(37,99,235,.2) !important }
body.dark .auth-rank { box-shadow: 0 16px 40px rgba(0,0,0,.4) !important }

/* ─── KILL ALL NEON / LED / RGB ANIMATIONS ───────────────────── */
body.dark .svc.checked::before,
body.dark .modal-card::before,
body.dark .track-metric--shine::before,
body.dark .track-metric--shine::after,
body.dark .track-vehicle-badge::before { display: none !important }

/* ─── STATUS PAGE TOKENS ─────────────────────────────────────── */
.track-header {
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: saturate(200%) blur(24px) !important;
  -webkit-backdrop-filter: saturate(200%) blur(24px) !important;
  border-bottom: 1px solid rgba(226,232,240,.7) !important;
  box-shadow: 0 1px 0 rgba(226,232,240,.5),0 4px 18px rgba(15,23,42,.04) !important;
}
body.dark .track-header {
  background: rgba(7,13,26,.98) !important; border-bottom-color: rgba(99,152,255,.12) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.28) !important;
}
.track-logo {
  border-radius: var(--r4) !important; background: var(--n0) !important;
  border-color: var(--n200) !important; box-shadow: var(--e1) !important;
}
.track-card {
  border-radius: var(--r6) !important; border: 1.5px solid var(--n200) !important;
  background: var(--n0) !important; box-shadow: var(--e2) !important;
}
body.dark .track-card { background: var(--dcard) !important; border-color: var(--dborder) !important; box-shadow: 0 6px 24px rgba(0,0,0,.25) !important }
.track-hero { border-radius: var(--r7) !important; border-color: var(--n200) !important; box-shadow: var(--e2) !important }
.track-metric { border-radius: var(--r5) !important; border: 1.5px solid var(--n200) !important; background: var(--n0) !important }
body.dark .track-metric { background: var(--dcard2) !important; border-color: var(--dborder) !important }
.track-step { border-radius: var(--r5) !important; border: 1.5px solid var(--n200) !important; background: var(--n0) !important }
body.dark .track-step { background: var(--dcard2) !important; border-color: var(--dborder) !important }
.track-step.active { border-color: var(--b500) !important; box-shadow: 0 4px 16px rgba(37,99,235,.14) !important }
.track-step.active .track-step__dot { background: linear-gradient(135deg,var(--b500),var(--b700)) !important; box-shadow: 0 0 0 6px rgba(37,99,235,.1) !important }
.track-vehicle-badge { border-radius: var(--r5) !important; background: var(--b50) !important; border: 1.5px solid var(--b100) !important; box-shadow: var(--e1) !important }
body.dark .track-vehicle-badge { background: rgba(37,99,235,.1) !important; border-color: var(--dborder) !important }
.track-btn--primary { background: var(--b600) !important; box-shadow: var(--ep) !important }
.track-order-btn { border-radius: var(--r5) !important; border: 1.5px solid var(--n200) !important; background: var(--n0) !important; box-shadow: var(--e1) !important }
.track-order-btn.active { border-color: var(--b500) !important; background: var(--b50) !important; box-shadow: 0 0 0 1px var(--b500),var(--e2) !important }
body.dark .track-order-btn { background: var(--dcard) !important; border-color: var(--dborder) !important }
body.dark .track-order-btn.active { border-color: var(--b500) !important; background: rgba(37,99,235,.12) !important }
#map { border-radius: var(--r6) !important; border-color: var(--n200) !important; box-shadow: var(--e2) !important }

/* ─── MISC ───────────────────────────────────────────────────── */
.hidden { display: none !important }
.note { color: var(--n400) !important; font-size: .88rem !important }
body.dark .note { color: var(--dmuted) !important }

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


/* 2026 rebuild: shared premium discipline */
:root{--ostx-radius-sm:16px;--ostx-radius-md:22px;--ostx-radius-lg:28px;--ostx-shadow-sm:0 10px 22px rgba(16,52,120,.08);--ostx-shadow-md:0 18px 38px rgba(16,52,120,.10),0 8px 16px rgba(16,52,120,.05)}
body.page-order,body.page-status,body.page-thankyou{color:#10233f}
body.page-order :focus-visible,body.page-status :focus-visible,body.page-thankyou :focus-visible{outline:none;box-shadow:0 0 0 4px rgba(11,114,255,.12)!important}
body.page-order button,body.page-order a,body.page-order input,body.page-order textarea,body.page-order select,body.page-status button,body.page-status a,body.page-status select,body.page-thankyou button,body.page-thankyou a,body.page-thankyou select{transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease}
@media (prefers-reduced-motion: reduce){body.page-order *,body.page-status *,body.page-thankyou *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* STEP FLOW wizard extension */

    body.page-order.wizard-enabled .toolbar--secondary,
    body.page-order.wizard-enabled .ride,
    body.page-order.wizard-enabled .wizard-review,
    body.page-order.wizard-enabled .wizard-nav,
    body.page-order.wizard-enabled .wizard-progress,
    body.page-order.wizard-enabled .wizard-step-intro{max-width:980px;margin-left:auto;margin-right:auto}
    body.page-order.wizard-enabled .wizard-progress{display:grid;gap:.8rem;margin:0 0 1rem}
    body.page-order.wizard-enabled .wizard-progress__rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem}
    body.page-order.wizard-enabled .wizard-progress__step{appearance:none;border:1px solid #dbe7fb;background:linear-gradient(180deg,#fff,#f7fbff);border-radius:18px;padding:.82rem .72rem;text-align:left;cursor:pointer;display:grid;gap:.22rem;min-height:74px;box-shadow:0 10px 24px rgba(16,52,120,.06);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease,opacity .18s ease}
    body.page-order.wizard-enabled .wizard-progress__step[disabled]{cursor:default;opacity:.64}
    body.page-order.wizard-enabled .wizard-progress__step:not([disabled]):hover{transform:translateY(-1px);border-color:#bfd5fb;box-shadow:0 14px 26px rgba(16,52,120,.10)}
    body.page-order.wizard-enabled .wizard-progress__step.is-active{border-color:#8fbaff;background:linear-gradient(180deg,#ffffff,#eef5ff);box-shadow:0 0 0 3px rgba(11,114,255,.10),0 14px 30px rgba(16,52,120,.12)}
    body.page-order.wizard-enabled .wizard-progress__step.is-complete{border-color:#9fd0ff;background:linear-gradient(180deg,#ffffff,#f1f8ff)}
    body.page-order.wizard-enabled .wizard-progress__step.is-complete .wizard-progress__index{background:#0b72ff;color:#fff;border-color:#0b72ff}
    body.page-order.wizard-enabled .wizard-progress__index{width:30px;height:30px;border-radius:999px;border:1px solid #c8daf7;display:grid;place-items:center;font-size:.86rem;font-weight:900;color:#45648f;background:#fff}
    body.page-order.wizard-enabled .wizard-progress__title{font-size:.93rem;font-weight:900;letter-spacing:-.01em;color:#10233f;line-height:1.15}
    body.page-order.wizard-enabled .wizard-progress__meta{font-size:.76rem;color:#6f84a3;line-height:1.2}
    body.page-order.wizard-enabled .wizard-step-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.1rem 1.05rem;border-radius:24px;border:1px solid rgba(12,84,194,.10);background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,255,.96));box-shadow:0 16px 34px rgba(18,58,140,.07);margin-bottom:1rem}
    body.page-order.wizard-enabled .wizard-step-intro__eyebrow{display:block;font-size:.76rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#6f84a3;margin-bottom:.28rem}
    body.page-order.wizard-enabled .wizard-step-intro__title{font-size:1.18rem;font-weight:950;letter-spacing:-.03em;color:#10233f;line-height:1.05;margin:0}
    body.page-order.wizard-enabled .wizard-step-intro__desc{margin:.38rem 0 0;color:#6d82a1;line-height:1.5;font-size:.96rem;max-width:58ch}
    body.page-order.wizard-enabled .wizard-step-intro__pill{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:.55rem .85rem;border-radius:999px;background:#eef5ff;border:1px solid #d9e6fb;color:#0c57d6;font-weight:900;font-size:.8rem;white-space:nowrap}
    body.page-order.wizard-enabled .wizard-step-hidden{display:none !important}
    body.page-order.wizard-enabled .wizard-card-hidden{display:none !important}
    body.page-order.wizard-enabled .wizard-step-active{animation:wizardStepIn .22s ease}
    @keyframes wizardStepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
    body.page-order.wizard-enabled .wizard-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1rem auto 1rem;padding:0}
    body.page-order.wizard-enabled .wizard-nav__meta{font-size:.9rem;color:#7388a7;font-weight:700}
    body.page-order.wizard-enabled .wizard-nav__actions{display:flex;gap:.75rem;align-items:center}
    body.page-order.wizard-enabled .wizard-nav .btn{min-height:52px;padding:.9rem 1.15rem;border-radius:18px;font-weight:900}
    body.page-order.wizard-enabled .wizard-nav .btn.secondary{background:#fff}
    body.page-order.wizard-enabled .wizard-nav .btn[disabled]{opacity:.45}
    body.page-order.wizard-enabled .wizard-next-btn{min-width:156px}
    body.page-order.wizard-enabled .wizard-review{display:grid;gap:1rem;margin-bottom:1rem}
    body.page-order.wizard-enabled .wizard-review[hidden]{display:none !important}
    body.page-order.wizard-enabled .wizard-review__card{padding:1rem 1.05rem;border-radius:24px;border:1px solid #dbe7fb;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 16px 34px rgba(16,52,120,.07)}
    body.page-order.wizard-enabled .wizard-review__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.85rem}
    body.page-order.wizard-enabled .wizard-review__title{font-size:1.08rem;font-weight:950;letter-spacing:-.02em;color:#10233f;margin:0}
    body.page-order.wizard-enabled .wizard-review__subtitle{margin:.18rem 0 0;color:#6d82a1;font-size:.9rem}
    body.page-order.wizard-enabled .wizard-review__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
    body.page-order.wizard-enabled .wizard-review__item{padding:.88rem .95rem;border-radius:18px;background:#fff;border:1px solid #e2ecfb;min-height:84px}
    body.page-order.wizard-enabled .wizard-review__label{display:block;font-size:.73rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#7388a7;margin-bottom:.34rem}
    body.page-order.wizard-enabled .wizard-review__value{display:block;color:#10233f;font-weight:850;line-height:1.42;word-break:break-word}
    body.page-order.wizard-enabled .wizard-review__value.muted{color:#6d82a1;font-weight:700}
    body.page-order.wizard-enabled .wizard-review__actions{display:flex;justify-content:flex-end;gap:.5rem;align-items:center;margin-top:.8rem}
    body.page-order.wizard-enabled .wizard-review__edit{border:none;background:transparent;color:#0b72ff;font-weight:900;cursor:pointer;padding:.45rem .55rem;border-radius:12px}
    body.page-order.wizard-enabled .wizard-review__edit:hover{background:#eef5ff}
    body.page-order.wizard-enabled .map-info{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
    body.page-order.wizard-enabled .map-info__meta{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;min-width:0;flex:1 1 340px}
    body.page-order.wizard-enabled .map-confirm-btn{min-width:170px;min-height:48px;border-radius:16px;box-shadow:0 16px 32px rgba(11,114,255,.16)}
    body.page-order.wizard-enabled .order-sticky-bar__cta[data-step-locked="1"],
    body.page-order.wizard-enabled #submitBtn[data-step-locked="1"]{box-shadow:0 14px 28px rgba(11,114,255,.14)}
    body.page-order.wizard-enabled .toolbar--secondary{margin-bottom:1rem}
    body.page-order.wizard-enabled .ride-card-head{margin-bottom:1rem}
    body.page-order.wizard-enabled .ride-section--route .ride-price{margin-top:.2rem}
    @media (max-width:840px){
      body.page-order.wizard-enabled .wizard-progress__rail{display:flex;overflow:auto;scroll-snap-type:x proximity;padding-bottom:.2rem}
      body.page-order.wizard-enabled .wizard-progress__step{min-width:180px;scroll-snap-align:start}
      body.page-order.wizard-enabled .wizard-step-intro{display:grid}
      body.page-order.wizard-enabled .wizard-step-intro__pill{justify-self:start}
      body.page-order.wizard-enabled .wizard-review__grid{grid-template-columns:1fr}
    }
    @media (max-width:640px){
      body.page-order.wizard-enabled .wizard-progress{gap:.7rem}
      body.page-order.wizard-enabled .wizard-step-intro{padding:.95rem .95rem 1rem;border-radius:22px}
      body.page-order.wizard-enabled .wizard-step-intro__title{font-size:1.05rem}
      body.page-order.wizard-enabled .wizard-step-intro__desc{font-size:.92rem}
      body.page-order.wizard-enabled .wizard-nav{position:sticky;bottom:calc(82px + env(safe-area-inset-bottom));z-index:24;padding:.78rem .82rem;border-radius:22px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(12,84,194,.10);box-shadow:0 18px 32px rgba(14,48,116,.10)}
      body.page-order.wizard-enabled .wizard-nav__meta{display:none}
      body.page-order.wizard-enabled .wizard-nav__actions{width:100%}
      body.page-order.wizard-enabled .wizard-nav .btn{flex:1 1 0}
      body.page-order.wizard-enabled .wizard-next-btn{min-width:0}
      body.page-order.wizard-enabled .wizard-review__card{padding:.95rem .92rem 1rem}
      body.page-order.wizard-enabled .map-info{align-items:stretch}
      body.page-order.wizard-enabled .map-confirm-btn{width:100%;min-width:0}
    }
    body.dark.page-order.wizard-enabled .wizard-progress__step,
    body.dark.page-order.wizard-enabled .wizard-step-intro,
    body.dark.page-order.wizard-enabled .wizard-review__card{background:linear-gradient(180deg,#10203d,#0c1730);border-color:#27406e;box-shadow:0 16px 34px rgba(0,0,0,.28)}
    body.dark.page-order.wizard-enabled .wizard-progress__step.is-active{border-color:#6ba5ff;box-shadow:0 0 0 3px rgba(107,165,255,.14),0 18px 36px rgba(0,0,0,.35)}
    body.dark.page-order.wizard-enabled .wizard-progress__index{background:#0d1b38;border-color:#36527f;color:#dbe9ff}
    body.dark.page-order.wizard-enabled .wizard-progress__step.is-complete .wizard-progress__index{background:#6ba5ff;border-color:#6ba5ff;color:#0d1b38}
    body.dark.page-order.wizard-enabled .wizard-progress__title,
    body.dark.page-order.wizard-enabled .wizard-step-intro__title,
    body.dark.page-order.wizard-enabled .wizard-review__title,
    body.dark.page-order.wizard-enabled .wizard-review__value{color:#eef4ff}
    body.dark.page-order.wizard-enabled .wizard-progress__meta,
    body.dark.page-order.wizard-enabled .wizard-step-intro__eyebrow,
    body.dark.page-order.wizard-enabled .wizard-step-intro__desc,
    body.dark.page-order.wizard-enabled .wizard-nav__meta,
    body.dark.page-order.wizard-enabled .wizard-review__subtitle,
    body.dark.page-order.wizard-enabled .wizard-review__label,
    body.dark.page-order.wizard-enabled .wizard-review__value.muted{color:#aebddb}
    body.dark.page-order.wizard-enabled .wizard-step-intro__pill{background:#0f1f3e;border-color:#29416f;color:#9fc5ff}
    body.dark.page-order.wizard-enabled .wizard-nav{background:rgba(9,18,34,.92);border-color:#27406e;box-shadow:0 18px 32px rgba(0,0,0,.35)}
    body.dark.page-order.wizard-enabled .wizard-review__item{background:#10203d;border-color:#27406e}
    body.dark.page-order.wizard-enabled .wizard-review__edit:hover{background:#16305d}

/* MOBILE-FIRST polish for step flow */
@media (max-width:760px){
  body.page-order .order-sticky-bar{display:none !important}
  body.page-order.wizard-enabled .wizard-step-intro{display:none !important}
  body.page-order.wizard-enabled .wizard-progress{gap:.48rem !important;margin:0 0 .72rem !important}
  body.page-order.wizard-enabled .wizard-progress__rail{display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:6px !important;overflow:visible !important;padding-bottom:0 !important}
  body.page-order.wizard-enabled .wizard-progress__step{min-width:0 !important;min-height:56px !important;padding:.34rem .12rem .3rem !important;border-radius:15px !important;justify-items:center !important;text-align:center !important;gap:.16rem !important}
  body.page-order.wizard-enabled .wizard-progress__index{width:22px !important;height:22px !important;font-size:.66rem !important}
  body.page-order.wizard-enabled .wizard-progress__title{display:none !important}
  body.page-order.wizard-enabled .wizard-progress__meta{display:block !important;font-size:.56rem !important;font-weight:900 !important;line-height:1.05 !important;letter-spacing:.01em !important;white-space:normal !important}
  body.page-order.wizard-enabled .wizard-nav{position:static !important;bottom:auto !important;padding:0 !important;margin:.78rem auto .2rem !important;border:none !important;background:transparent !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
}
@media (max-width:430px){
  body.page-order.wizard-enabled .wizard-progress__step{min-height:52px !important;padding:.3rem .1rem .28rem !important;border-radius:14px !important}
  body.page-order.wizard-enabled .wizard-progress__index{width:20px !important;height:20px !important;font-size:.6rem !important}
  body.page-order.wizard-enabled .wizard-progress__meta{font-size:.5rem !important}
}