:root {
  --color-bg: #f3f4f6;
  --color-surface: #ffffff;
  --color-border: #e5e7eb;
  --color-text: #1f2937;
  --color-muted: #6b7280;
  --color-primary: #0f7a4d;
  --color-primary-dark: #0b5c3a;
  --color-accent: #c9a227;
  --color-accent-dark: #a3821c;
  --color-danger: #dc2626;
  --color-danger-dark: #b91c1c;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  background: #111827;
  color: #e5e7eb;
  padding: 1.5rem 1rem;
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .25rem;
}

.sidebar-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 22%;
}

.sidebar h1 {
  font-size: 1rem;
  color: #fff;
  margin: 0;
}

.sidebar .tagline {
  font-size: .75rem;
  color: #9ca3af;
  margin: 0 0 1.5rem;
}

.sidebar nav a {
  display: block;
  padding: .55rem .75rem;
  border-radius: var(--radius);
  color: #d1d5db;
  font-size: .9rem;
  margin-bottom: .25rem;
}

.sidebar nav a:hover { background: #1f2937; text-decoration: none; }
.sidebar nav a.active { background: var(--color-primary); color: #fff; }

.main { flex: 1; padding: 1.5rem 2rem; max-width: 1200px; margin: 0 auto; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.topbar h2 { margin: 0; font-size: 1.4rem; }
.topbar .user-info { font-size: .85rem; color: var(--color-muted); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.card h3 { margin-top: 0; }

/* Accordion sections (owner_view.php, owner_portal.php) — a <details class="card">
   wrapping a <summary class="accordion-toggle"> header + a <div class="accordion-body">,
   replacing a single-select "view section" dropdown so every section title stays visible
   at once and each expands independently on click, with a chevron instead of the
   browser's default disclosure marker. */
.accordion-toggle {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.accordion-toggle::-webkit-details-marker { display: none; }
.accordion-toggle h3 { margin: 0; }
.accordion-toggle::after {
  content: '';
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
details[open] > .accordion-toggle::after { transform: rotate(-135deg); }
.accordion-body { margin-top: 1rem; }

/* A small inline "Details" toggle (e.g. under a dashboard balance figure) -- deliberately NOT
   .accordion-toggle, which draws its own chevron-arrow indicator via ::after; that's meant for
   a full-width section header and just looks like a stray line or two next to a small inline
   word like "Details". */
.details-toggle-sm { display: inline-block; cursor: pointer; color: var(--color-primary); font-size: .85rem; list-style: none; }
.details-toggle-sm::-webkit-details-marker { display: none; }
.details-toggle-sm::marker { content: ''; }

/* The currently-owing/deficit breakdown (item 63) -- a .deficit-breakdown <details> dropped
   inline next to a money figure, often inside a table cell, so its open body needs to read as
   a small floating note rather than stretching the row/column to its content width. */
.deficit-breakdown { display: inline-block; text-align: left; font-weight: normal; }
.deficit-breakdown-body {
  margin-top: .4rem;
  padding: .6rem .75rem;
  background: var(--color-surface-alt, #f8f9fa);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 6px;
  font-size: .82rem;
  font-weight: normal;
  color: var(--color-text, #333);
  min-width: 260px;
  max-width: 380px;
}
.deficit-breakdown-body p { margin: 0 0 .5rem; }
.deficit-breakdown-title { font-weight: 600; }

/* The line-by-line list -- only the unpaid/short weeks and days, each a left label + right
   amount row, so the reader can scan straight down the right-hand column and see every item
   that contributed to the final number. Fully-paid weeks are left out entirely rather than
   listed, so there's nothing to visually "net out" against the total below. */
.deficit-breakdown-lines { list-style: none; margin: 0; padding: 0; }
.deficit-breakdown-lines li { display: flex; justify-content: space-between; gap: .75rem; padding: .15rem 0; }
.deficit-breakdown-lines li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.deficit-breakdown-total { font-weight: 700; border-top: 1px solid var(--color-border, #e2e8f0); margin-top: .3rem; padding-top: .3rem; }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.summary-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
}

.summary-card .label, .summary-card .summary-label { font-size: .8rem; color: var(--color-muted); margin: 0 0 .35rem; overflow-wrap: break-word; }
.summary-card .value, .summary-card .summary-value { font-size: 1.4rem; font-weight: 600; margin: 0; overflow-wrap: break-word; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--color-border); }
th { color: var(--color-muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; }
tr:last-child td { border-bottom: none; }
.table-empty { color: var(--color-muted); padding: 1.5rem 0; text-align: center; }

.badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
}

.badge-active { background: #dbeafe; color: #1e40af; }
.badge-inactive { background: #f3f4f6; color: #6b7280; }
.badge-completed { background: #dcfce7; color: #166534; }
.badge-behind { background: #fee2e2; color: #991b1b; }
.badge-termination-warning { background: #991b1b; color: #fff; font-weight: 700; }
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-approved { background: #dcfce7; color: #166534; }
.badge-rejected { background: #fee2e2; color: #991b1b; }
.badge-paid { background: #dcfce7; color: #166534; }
.badge-confirmed { background: #dcfce7; color: #166534; }
.badge-open { background: #fee2e2; color: #991b1b; }
.badge-resolved { background: #dcfce7; color: #166534; }

.badge-count {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: #fee2e2;
  color: #991b1b;
  font-size: .7rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4rem;
}

.btn {
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .85rem;
  cursor: pointer;
}

.btn:hover { background: var(--color-bg); text-decoration: none; }
.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn-danger:hover { background: var(--color-danger-dark); }
.btn-sm { padding: .3rem .6rem; font-size: .8rem; }

.actions { display: flex; gap: .5rem; flex-wrap: wrap; }

form.inline { display: inline; }

.filters {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  align-items: end;
}
.filters .field { flex: 1 1 180px; min-width: 160px; }

.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: .9rem;
  font-family: inherit;
}
.field .error { color: var(--color-danger); font-size: .8rem; margin-top: .25rem; }

.password-field { position: relative; }
.password-field input { padding-right: 2.4rem; }
.password-toggle {
  position: absolute;
  right: .3rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
}
.password-toggle:hover { color: var(--color-primary); background: rgba(0, 0, 0, .04); }
.password-toggle svg { width: 18px; height: 18px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }

.progress-bar { background: var(--color-border); border-radius: 999px; height: 30px; overflow: hidden; position: relative; }
.progress-bar > div { background: var(--color-primary); height: 100%; position: relative; transition: width .3s ease; }
/* The label sits fixed at the bar's horizontal center — before the fill reaches halfway,
   that center point is still on the plain track background, where white text (designed for
   sitting on the green fill) was nearly invisible. Green text there instead, matching the
   fill's own color so it reads clearly against the light track; once the fill passes the
   midpoint the label is sitting on solid green, where white is what actually shows up. */
.progress-bar-label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: .8rem; font-weight: 700; white-space: nowrap;
  color: var(--color-primary);
  text-shadow: 0 1px 2px rgba(255, 255, 255, .7);
}
.progress-bar-label.on-fill {
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

.week-progress { display: flex; gap: 2px; margin-top: .3rem; }
.week-seg {
  width: 14px; height: 14px; border-radius: 2px; background: var(--color-border);
  border: 1px solid var(--color-success, #16a34a);
  display: flex; align-items: center; justify-content: center;
  font-size: .5rem; line-height: 1; color: var(--color-text-muted, #666);
}
.week-seg.filled { background: var(--color-success, #16a34a); color: #fff; }

.week-note { font-size: .7rem; color: var(--color-danger, #991b1b); margin-top: .2rem; max-width: 130px; white-space: normal; line-height: 1.25; cursor: help; }

/* Compact two-row day strip under a "Wk N" label/cell — one small chip per calendar day in
   that week (e.g. "Su12"), 3 then 4 per row so the block reads wide rather than stretching
   into one long line, filling from white to green as real time passes (see
   week_day_number_strip() in Helpers.php). The vehicle's actual payment day (always the
   first chip, since a week always starts on the same weekday as contractStartDate) gets a
   black outline on top of whichever fill color it already has, so it stands out regardless
   of whether it's been reached yet. */
.week-day-strip { display: flex; flex-direction: column; gap: 2px; margin-top: .2rem; }
.week-day-row { display: flex; gap: 3px; }
.week-day-num {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 4px; border-radius: 3px; font-size: .65rem; font-weight: 600; white-space: nowrap;
  background: #fff; color: var(--color-muted); border: 1px solid var(--color-border);
}
.week-day-num.reached { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.week-day-num.payment-day { box-shadow: inset 0 0 0 2px #000; }
/* The weekday letters (e.g. "Su" in "25Su9") in a distinct color from the day-of-month/month
   numbers on either side, so a chip doesn't read as one indistinct blob of text -- readable
   against both the unreached (white) and reached (green) chip backgrounds. */
.week-day-num .week-day-weekday { color: #d4a017; font-weight: 700; }

/* Per-vehicle week number shown inside its own cell on the admin fleet tracker (see
   dashboard.php), since the row itself is now a real calendar week shared across vehicles
   that each have their own week count. The badge is the weekday that vehicle's own cycle
   resets on -- same concept as the payment-day outline above, just next to a plain number
   instead of on a date chip, since there's no per-vehicle date chip here to attach it to. */
.fleet-week-label { font-size: .75rem; font-weight: 700; margin-bottom: .15rem; }
.payment-day-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 3px; margin-left: 2px; border: 1px solid #000; border-radius: 3px;
  font-size: .65rem; font-weight: 600; background: #fff;
}
/* Turns green once this row's own remit day for this vehicle has actually arrived (today
   inclusive) -- same "reached" convention as .week-day-num.reached in the Calendar week
   column, just applied to the single day a given vehicle cares about instead of all 7. */
.payment-day-badge.reached { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Marks the payment cycle currently in progress on the tracker — inset box-shadow rather
   than a real border so it never shifts row height/alignment under border-collapse. */
.current-week-cell { box-shadow: inset 0 0 0 2px var(--color-primary); }

/* The "Currently owing" summary row pinned as the first row of every weekly tracker's <tbody>
   (dashboard/driver/owner) -- a distinct background so it reads as a fixed summary, not just
   another calendar-week row, and stays visually anchored at the top regardless of how far the
   table scrolls. */
.tracker-owing-row { background: var(--color-surface-alt, #f8f9fa); border-bottom: 2px solid var(--color-border, #e2e8f0); }
.tracker-owing-row td { padding-top: .6rem; padding-bottom: .6rem; }

/* The per-cell "Owing: X" / "Short by: X" line inside a tracker week cell -- so a specific
   unpaid/short calendar week is identifiable at a glance while scanning the table, not only
   from the fleet-wide total row above it. */
.cell-owing { color: var(--color-danger); font-weight: 600; font-size: .85em; }

/* A week that hasn't started yet for a given vehicle (per-vehicle week-indexed trackers) --
   grey, empty, visually distinct from an unpaid-but-already-due week (.text-warning/.muted). */
.week-future-cell { background: var(--color-surface-alt, #f1f1f1); color: var(--color-text-muted, #888); }

/* The per-cell date calendar is rendered for every week but hidden by default for weeks that
   aren't week 1/current/owing -- the "Show calendar on every week" button toggles
   .tracker-calendar-on on the table-scroll wrapper to reveal them all, for investigating a
   specific payment without the clutter of every week showing it by default. */
.date-strip-optional { display: none; }
.tracker-calendar-on .date-strip-optional { display: block; }
.tracker-calendar-toggle { margin-bottom: .75rem; }

.alert { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .9rem; }
.alert-success { background: #dcfce7; color: #166534; }
.alert-error { background: #fee2e2; color: #991b1b; }
.alert-warning { background: #fef3c7; color: #92400e; }

.pagination { display: flex; gap: .4rem; margin-top: 1rem; }
.pagination a, .pagination span { padding: .3rem .65rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: .85rem; }
.pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { width: 100%; max-width: 360px; }
.login-card h1 { text-align: center; margin-bottom: .25rem; }
.login-card .tagline { text-align: center; color: var(--color-muted); font-size: .85rem; margin-bottom: 1.5rem; }

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

.login-logo {
  width: 72px;
  height: 72px;
  border-radius: 22%;
  box-shadow: 0 8px 20px rgba(15, 122, 77, .25);
}

.muted { color: var(--color-muted); }
.text-right { text-align: right; }
.text-success { color: #166534; font-weight: 600; }
.text-warning { color: var(--color-warning); font-weight: 600; }

.thumb {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  display: block;
}

.thumb-sm {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  vertical-align: middle;
  margin-right: .4rem;
}
.section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; flex-wrap: wrap; gap: .5rem; }

.table-scroll { overflow-x: auto; }

.sidebar-toggle { display: none; }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  z-index: 25;
}
.sidebar-backdrop.visible { display: block; }

/* --- Modal (native <dialog>, holds an iframe pointed at the existing form pages) --- */
dialog#form-modal {
  width: min(720px, 92vw);
  max-width: 92vw;
  max-height: 88vh;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
  overflow: hidden;
}
dialog#form-modal[open] {
  display: flex;
  flex-direction: column;
}
dialog#form-modal::backdrop { background: rgba(15, 23, 42, .55); }

/* --- Vehicle purchase request modal (plain native <dialog>, inline form — no iframe needed) --- */
dialog#vehicle-purchase-modal {
  width: min(420px, 92vw);
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
  padding: 1.25rem;
}
dialog#vehicle-purchase-modal::backdrop { background: rgba(15, 23, 42, .55); }

/* --- Delete-password-confirmation modal (plain native <dialog>, same shape as vehicle-purchase-modal) --- */
dialog#password-confirm-modal {
  width: min(420px, 92vw);
  padding: 0;
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
  overflow: hidden;
}
dialog#password-confirm-modal::backdrop { background: rgba(15, 23, 42, .55); }
#password-confirm-message { margin-top: 0; }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.modal-header h3 { margin: 0; font-size: 1.05rem; }
.modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-muted);
  padding: .1rem .4rem;
}
.modal-close:hover { color: var(--color-text); }

#form-modal-iframe {
  display: block;
  width: 100%;
  height: 200px;
  border: none;
  flex: 1 1 auto;
  overflow: auto;
}

.modal-frame-body { margin: 0; }
.modal-frame-content { padding: 1.1rem; }

/* --- Responsive --- */
@media (max-width: 860px) {
  .sidebar-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: .75rem 1rem;
    background: #111827;
    color: #fff;
    border: none;
    font-size: .95rem;
    text-align: left;
    cursor: pointer;
  }
  .app-shell { flex-direction: column; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 240px;
    max-width: 80vw;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 30;
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); }
  .main { padding: 1rem; max-width: none; }
  .topbar { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .filters { flex-direction: column; align-items: stretch; }
  .filters .field { flex: 0 0 auto; width: 100%; margin-bottom: 0; }
  .filters > .btn, .filters > button { width: 100%; }
  .card { padding: 1rem; }
  dialog#form-modal { width: 96vw; max-height: 92vh; }
}

@media (max-width: 480px) {
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .actions { width: 100%; }
  .actions .btn, .actions form, .actions button { flex: 1 1 auto; }
}

/* ---- Public home page (index.php, anonymous visitors) ---- */

html:has(.home-page) { scroll-behavior: smooth; }

.home-page { min-height: 100vh; display: flex; flex-direction: column; }

.home-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.home-nav-brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; }
.home-nav-brand img { width: 30px; height: 30px; border-radius: 22%; }
.home-nav-links { display: flex; align-items: center; gap: 1.5rem; }
.home-nav-links a:not(.btn) { color: var(--color-text); font-size: .9rem; font-weight: 500; }
.home-nav-links a:not(.btn):hover { color: var(--color-primary); text-decoration: none; }
.home-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text);
}

.home-hero {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  text-align: center;
  padding: 4.5rem 1.5rem 4rem;
}

.home-hero-logo { width: 84px; height: 84px; margin-bottom: 1rem; border-radius: 22%; box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
.home-hero h1 { margin: 0 0 .35rem; font-size: 2.5rem; }
.home-hero-tagline {
  margin: 0 0 1.25rem;
  font-size: .8rem;
  color: rgba(255, 255, 255, .8);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.home-hero-sub { margin: 0 auto; max-width: 640px; font-size: 1.15rem; color: rgba(255, 255, 255, .92); line-height: 1.6; }

.home-hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.home-hero-actions .btn { padding: .75rem 1.5rem; font-size: .95rem; font-weight: 600; border-radius: 999px; }
.home-hero-actions .btn-primary { background: #fff; color: var(--color-primary-dark); border-color: #fff; }
.home-hero-actions .btn-primary:hover { background: #f0fdf4; }
.home-hero-actions .btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .7); }
.home-hero-actions .btn-outline:hover { background: rgba(255, 255, 255, .12); }

.home-hero-login-links { margin: 1.25rem 0 0; font-size: .9rem; color: rgba(255, 255, 255, .85); }
.home-hero-login-links a { color: #fff; font-weight: 600; text-decoration: underline; }
.home-hero-login-links a:hover { color: #f0fdf4; }

.home-image-band { line-height: 0; }
.home-image-band img { width: 100%; max-height: 420px; object-fit: cover; display: block; }

.home-slideshow { position: relative; height: 420px; overflow: hidden; background: #111; }
.home-slideshow-track { display: flex; height: 100%; transition: transform .7s ease; }
.home-slideshow-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; }
.home-slideshow-dots {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
  display: flex; justify-content: center;
}
.home-slideshow-dot {
  /* 24x24 tap target (comfortable on touch) drawn with a small 9px visual dot via ::before */
  width: 24px; height: 24px; padding: 0; border: none; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.home-slideshow-dot::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  transition: background .2s ease, transform .2s ease;
}
.home-slideshow-dot.active::before { background: #fff; transform: scale(1.3); }

.whatsapp-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 999;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.whatsapp-float svg { width: 30px; height: 30px; fill: #fff; }
@media (max-width: 600px) {
  .whatsapp-float { right: 14px; bottom: 14px; width: 50px; height: 50px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
}

.home-section { max-width: 960px; width: 100%; margin: 0 auto; padding: 4.5rem 1.5rem; }
.home-section h2 { text-align: center; font-size: 1.75rem; margin: 0 0 .6rem; }
.home-section-lead { text-align: center; color: var(--color-muted); max-width: 640px; margin: 0 auto 2.75rem; font-size: 1rem; line-height: 1.6; }
.home-steps-track-title { text-align: center; font-size: 1.3rem; margin: 0 0 1.5rem; }

.home-about p { max-width: 760px; margin: 0 auto; text-align: center; font-size: 1.15rem; line-height: 1.7; color: var(--color-text); }

.home-steps-layout { max-width: 640px; margin: 0 auto; }
.home-steps { display: flex; flex-direction: column; gap: 2rem; }
.home-step { display: flex; gap: 1.25rem; }
.home-step-number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}
.home-step h3 { margin: .1rem 0 .4rem; font-size: 1.1rem; }
.home-step p { margin: 0; color: var(--color-muted); font-size: .92rem; line-height: 1.6; }
.home-step ul { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--color-muted); font-size: .9rem; line-height: 1.7; }

.home-why { background: var(--color-bg); }
.home-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.home-why-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}
.home-why-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eaf6ef;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-why-icon svg { width: 18px; height: 18px; }
.home-why-item p { margin: 0; font-weight: 600; font-size: .95rem; padding-top: .4rem; }

.home-tagline-banner {
  background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent));
  color: #fff;
  text-align: center;
  padding: 2.5rem 1.5rem;
}
.home-tagline-banner p { margin: 0; font-size: 1.4rem; font-weight: 700; letter-spacing: .01em; }

.home-cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }

.home-cta-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2.25rem 1.75rem;
  text-align: center;
  box-shadow: 0 12px 30px rgba(17, 24, 39, .1);
}

.home-cta-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf6ef;
  color: var(--color-primary);
}
.home-cta-icon svg { width: 28px; height: 28px; }

.home-cta-card h2 { margin: 0 0 .5rem; font-size: 1.3rem; }
.home-cta-card p { margin: 0 0 1.5rem; color: var(--color-muted); font-size: .92rem; line-height: 1.55; }
.home-cta-card .btn-primary { display: block; width: 100%; padding: .7rem 1rem; font-size: .95rem; font-weight: 600; }
.home-cta-link { display: block; margin-top: .9rem; font-size: .85rem; }

.home-footer { text-align: center; padding: 1.5rem; color: var(--color-muted); font-size: .8rem; }
.home-footer-legal { margin: 0 0 .6rem; }
.home-footer-legal a { color: var(--color-muted); margin: 0 .5rem; }
.home-footer-legal a:hover { color: var(--color-primary); text-decoration: underline; }

/* Legal/policy pages (driver agreement, privacy policy, disclaimer, terms of
   service) — reuses .home-page/.home-nav/.home-hero/.home-section/.home-footer
   as-is; this just makes long-form body text readable, left-aligned instead
   of .home-section h2's centered marketing style. */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-content .legal-meta { color: var(--color-muted); font-size: .85rem; margin: 0 0 2rem; }
.legal-content h2 { text-align: left; font-size: 1.3rem; margin: 2.25rem 0 .75rem; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 { text-align: left; font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.legal-content p { margin: 0 0 1rem; line-height: 1.7; color: var(--color-text); }
.legal-content ol, .legal-content ul { margin: 0 0 1rem; padding-left: 1.3rem; line-height: 1.7; }
.legal-content li { margin-bottom: .5rem; }
.legal-content li > ol, .legal-content li > ul { margin-top: .5rem; }

@media (max-width: 768px) {
  .home-nav { position: relative; }
  .home-nav-toggle { display: flex; }
  .home-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: .75rem 1.5rem 1rem;
    box-shadow: 0 8px 16px rgba(15, 23, 42, .08);
  }
  .home-nav-links.open { display: flex; }
  .home-nav-links a:not(.btn) { padding: .5rem 0; }
  .home-nav-links a.btn { text-align: center; }
}

@media (max-width: 600px) {
  .home-hero { padding: 3rem 1rem 3.5rem; }
  .home-hero h1 { font-size: 1.75rem; }
  .home-hero-sub { font-size: 1rem; }
  .home-section { padding: 3rem 1.25rem; }
  .home-tagline-banner p { font-size: 1.15rem; }
  .home-slideshow { height: 240px; }
}

/* ---- Tom Select overrides ---- */

/* Match the app's existing input look */
.ts-wrapper .ts-control {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  padding: .45rem .6rem !important;
  min-height: unset !important;
  box-shadow: none !important;
  background: var(--color-surface) !important;
  cursor: pointer;
  font-family: inherit;
}

/* Bold the selected value */
.ts-wrapper .ts-control .item {
  font-weight: 700 !important;
  color: var(--color-text) !important;
  font-size: .9rem;
}

/* Prominent focus state — blue ring + light tint + "🔍" search icon via padding */
.ts-wrapper.focus .ts-control,
.ts-wrapper.input-active .ts-control {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(15, 122, 77, .18) !important;
  background: #eef8f2 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f7a4d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .6rem center !important;
  padding-right: 2rem !important;
}

/* Search text input inside the control */
.ts-wrapper .ts-control input {
  font-size: .88rem !important;
  font-family: inherit !important;
  color: var(--color-text) !important;
  background: transparent !important;
}
.ts-wrapper .ts-control input::placeholder {
  color: var(--color-primary) !important;
  font-style: italic;
  opacity: .8;
}

/* Dropdown panel */
.ts-dropdown {
  border: 1px solid var(--color-primary) !important;
  border-top: none !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12) !important;
  font-size: .9rem;
  font-family: inherit;
}

/* Options */
.ts-dropdown .option {
  padding: .5rem .75rem !important;
  color: var(--color-text) !important;
}
.ts-dropdown .option.active {
  background: var(--color-primary) !important;
  color: #fff !important;
}
.ts-dropdown .option:hover:not(.active) {
  background: #eff6ff !important;
  color: var(--color-primary-dark) !important;
}