/* RB Driver: elegant black (default) and a warm light theme. js/theme.js sets data-bs-theme on <html>; everything below reads the variables.
   One gold accent; green means online/accept. Large touch targets for use in the car. */
:root, [data-bs-theme="dark"] {
  --page: #07070a; --surface: #121216; --surface-2: #1a1a20; --ink: #f2efe9; --muted: #9b978f; --line: #26262d;
  --gold: #d4af37; --gold-text: #d4af37; --gold-soft: rgba(212, 175, 55, .14); --gold-hover: #e3c04f;
  --green: #2fbf71; --green-text: #2fbf71; --on-green: #05140c; --on-gold: #111;
  --btn-line: #3a3a44; --track: #2b2b33; --thumb: #d9d6cf; --placeholder: #6a675f;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45); --nav-glass: rgba(10, 10, 13, .96); --nav-solid: #0a0a0d; --nav-shadow: 0 -10px 30px rgba(0, 0, 0, .6);
  --badge-bg: #2b2b33; --warn-bg: #2a2210; --warn-ink: #f0d58a; --warn-line: #5a4a1a; --danger-bg: #2c1214; --danger-ink: #ffb3b3; --danger-line: #6a2327;
  --danger-text: #ff7b7b; --danger-btn-line: #5a2a2a; --danger-hover: #3a1717;
  --radius: 1.1rem;
}
[data-bs-theme="light"] {
  --page: #f4f1ea; --surface: #ffffff; --surface-2: #f7f4ed; --ink: #1b1a17; --muted: #6f6a5f; --line: #e4ded1;
  --gold: #d4af37; --gold-text: #8f6b0a; --gold-soft: rgba(212, 175, 55, .18); --gold-hover: #c79f2a;
  --green: #2fbf71; --green-text: #1b8a50; --on-green: #05140c; --on-gold: #111;
  --btn-line: #cfc8b8; --track: #d9d3c6; --thumb: #ffffff; --placeholder: #a29c8e;
  --shadow: 0 8px 24px rgba(60, 50, 20, .10); --nav-glass: rgba(255, 255, 255, .96); --nav-solid: #ffffff; --nav-shadow: 0 -8px 24px rgba(60, 50, 20, .12);
  --badge-bg: #ebe6da; --warn-bg: #fff6df; --warn-ink: #6b4f00; --warn-line: #ecd9a0; --danger-bg: #fdecec; --danger-ink: #8a1f1f; --danger-line: #f1c0c0;
  --danger-text: #b42323; --danger-btn-line: #e8b4b4; --danger-hover: #fbe3e3;
}

:root {
  --bs-body-bg: var(--page);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-secondary-color: var(--muted);
  --bs-primary: var(--gold);
  --bs-primary-rgb: 212, 175, 55;
  --bs-link-color: var(--gold-text);
  --bs-link-hover-color: var(--gold-hover);
}

/* Layout (same pattern as Vintro, which fits this iPhone): the PAGE scrolls; header and menu are position:fixed.
   Safe areas (notch, status bar, home bar) are handled with env(safe-area-inset-*). */
html { background: var(--page); }
body { display: flex; flex-direction: column; min-height: 100vh; padding-top: calc(52px + env(safe-area-inset-top, 0px)); background: var(--page); color: var(--ink); -webkit-font-smoothing: antialiased; }
body > .page-scroll { flex: 1 1 auto; width: 100%; }
.container { padding-left: max(.75rem, env(safe-area-inset-left)); padding-right: max(.75rem, env(safe-area-inset-right)); }
.text-muted, .text-secondary { color: var(--muted) !important; }
hr { border-color: var(--line); opacity: 1; }

/* Top bar: black in both themes */
html, body { overscroll-behavior-y: none; }
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1040; height: calc(52px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 0 0; display: flex; align-items: center;
  background: linear-gradient(180deg, #2d2a22 0%, #24211b 100%) !important; border-bottom: 1px solid rgba(212, 175, 55, .35); }
.navbar-brand { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 1.05rem; color: #f2efe9 !important; }
.navbar-brand .rb { color: var(--gold); }
.navbar .btn-outline-secondary { color: #f2efe9; border-color: #3a3a44; }

/* Cards */
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow) !important; overflow: hidden; color: var(--ink); }
.card-header { border-bottom: 0; padding: .85rem 1.1rem; font-size: 1.05rem; letter-spacing: .01em; }
.card-footer { border-top: 1px solid var(--line); background: transparent !important; }
.card-body { padding: 1.15rem; }
h1, h2, .h5, .h6 { letter-spacing: .01em; }

/* Forms */
.form-control, .form-select { background-color: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: .75rem; padding: .7rem .85rem; }
.form-control::placeholder { color: var(--placeholder); }
.form-control:focus, .form-select:focus { background-color: var(--surface-2); color: var(--ink); border-color: var(--gold); box-shadow: 0 0 0 .2rem var(--gold-soft); }
.form-label { font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.form-text { color: var(--muted); }

/* Buttons */
.btn { border-radius: .85rem; font-weight: 600; letter-spacing: .01em; }
.btn-lg, #btnStep, #btnAccept, #btnReject { min-height: 58px; font-size: 1.12rem; }
.btn-dark, .btn-primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.btn-dark:hover, .btn-dark:focus, .btn-primary:hover, .btn-primary:focus { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--on-gold); }
.btn-outline-dark, .btn-outline-secondary, .btn-outline-primary { color: var(--ink); border-color: var(--btn-line); background: transparent; }
.btn-outline-dark:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover { background: var(--surface-2); color: var(--gold-text); border-color: var(--gold); }
.btn-outline-danger { color: var(--danger-text); border-color: var(--danger-btn-line); }
.btn-outline-danger:hover { background: var(--danger-hover); color: var(--danger-text); border-color: var(--danger-text); }
.btn-success { background: var(--green); border-color: var(--green); color: var(--on-green); }
.btn-success:hover { background: #3fd382; border-color: #3fd382; color: var(--on-green); }
.btn-link { color: var(--gold-text); }
#btnStep { box-shadow: 0 .5rem 1.2rem rgba(212, 175, 55, .28); }
#btnAccept { box-shadow: 0 .5rem 1.2rem rgba(47, 191, 113, .3); }

/* An offer must be impossible to miss */
#offerCard { border: 2px solid var(--green); animation: pulse 1.3s ease-in-out infinite; }
#offerCard .card-header { background: var(--green) !important; color: var(--on-green) !important; font-size: 1.15rem; font-weight: 700; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 191, 113, .5); } 50% { box-shadow: 0 0 0 12px rgba(47, 191, 113, 0); } }

/* Active ride in gold */
#rideCard { border: 2px solid var(--gold); }
#rideCard .card-header { background: var(--gold) !important; color: var(--on-gold) !important; font-weight: 700; }
#doneCard { border: 2px solid var(--green); }

/* Misc components */
.badge.text-bg-secondary { background: var(--badge-bg) !important; color: var(--ink) !important; }
.badge.text-bg-success { background: var(--green) !important; color: var(--on-green) !important; }
.badge.text-bg-primary { background: var(--gold) !important; color: var(--on-gold) !important; }
.badge.text-bg-warning { background: #e0a526 !important; color: #111 !important; }
.badge.text-bg-danger { color: #fff !important; }
.badge.text-bg-light { background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.alert-light { background: var(--surface-2); color: var(--ink); border-color: var(--line) !important; }
.alert-warning { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.alert-danger { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-line); }
.text-success { color: var(--green-text) !important; }
.text-danger { color: var(--danger-text) !important; }
.list-group-item { background: transparent; color: var(--ink); border-color: var(--line); }
.border, .border-top, .border-bottom { border-color: var(--line) !important; }
#earnCard .fw-bold { font-size: 1.15rem; }
#eBalance { border-radius: .75rem; }
details > summary { cursor: pointer; }

@media (prefers-reduced-motion: reduce) { #offerCard { animation: none; } * { transition: none !important; } }

/* Bottom menu */
.tab-off { display: none !important; }
main { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
main.with-nav { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }   /* room under the last card: the fixed bottom menu never covers the buttons */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; background: var(--nav-solid); border-top: 1px solid var(--line);
  border-radius: 1.3rem 1.3rem 0 0; box-shadow: var(--nav-shadow); padding: .3rem max(.5rem, env(safe-area-inset-right)) calc(.3rem + env(safe-area-inset-bottom, 0px) * .6) max(.5rem, env(safe-area-inset-left)); }
.bottom-nav.d-none { display: none !important; }
.bottom-nav button { flex: 1; border: 0; background: transparent; color: var(--muted); padding: .25rem 0; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .03em; border-radius: .85rem; min-height: 50px; }
.bottom-nav svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav button.active { color: var(--gold-text); background: var(--gold-soft); }
.bottom-nav button:active { transform: scale(.96); }

/* Online / Offline switch */
.online-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; margin: 0; padding: .25rem 0; user-select: none; -webkit-tap-highlight-color: transparent; }
.online-text { font-weight: 600; color: var(--muted); font-size: 1rem; }
.online-text.on { color: var(--green-text); }
.online-toggle .track { position: relative; flex: 0 0 auto; width: 78px; height: 44px; border-radius: 22px; background: var(--track); border: 1px solid var(--btn-line); transition: background .2s; }
.online-toggle .thumb { position: absolute; top: 3px; left: 3px; width: 36px; height: 36px; border-radius: 50%; background: var(--thumb); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .2s, background .2s; }
.online-toggle input:checked + .track { background: var(--green); border-color: var(--green); }
.online-toggle input:checked + .track .thumb { transform: translateX(34px); background: #fff; }
.online-toggle input:focus-visible + .track { outline: 3px solid var(--gold-soft); outline-offset: 2px; }
.online-toggle input:disabled + .track { opacity: .5; }

/* Floating menu: a rounded bar that hangs free above the bottom edge. */
html.float-nav .bottom-nav {
  left: 12px; right: 12px; bottom: calc(4px + env(safe-area-inset-bottom, 0px) * .5);
  border: 1px solid var(--line); border-radius: 26px; padding: .25rem .5rem; box-shadow: var(--shadow);
}
html.float-nav .bottom-nav button { border-radius: 22px; }
html.float-nav main.with-nav { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

/* iOS zooms into every field whose text is smaller than 16px when you tap it. Keep all fields at 16px, so the screen never zooms. */
input, select, textarea, .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 16px !important; }
#authTop { font-weight: 600; }

/* Sign-up wizard progress */
.step-dot { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.step-dot.on { background: var(--gold); }

/* Bootstrap's py-3 on <main> is !important and was cancelling the bottom room above: this one wins. The last card can always be scrolled above the bottom menu. */
main.with-nav, html.float-nav main.with-nav { padding-bottom: calc(220px + env(safe-area-inset-bottom, 0px)) !important; }