/* =========================================================
   MinicabXX — Design tokens
   Palette: antique gold + warm paper (light) / deep charcoal (dark)
   Display: Fraunces | Body: Inter | Utility/Data: IBM Plex Mono
   ========================================================= */

:root{
  --gold:        #C9973E;
  --gold-dark:   #A97F2F;
  --gold-soft:   #E9C98A;

  --ink:         #1B1710;
  --mist:        #6E6455;
  --paper:       #FAF6EF;
  --paper-2:     #F1EAD9;
  --line:        rgba(27,23,16,0.10);

  --card:        #FFFFFF;
  --shadow:      0 20px 45px -20px rgba(27,23,16,0.25);

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

.dark{
  --ink:         #F3EEE2;
  --mist:        #A79C88;
  --paper:       #100D09;
  --paper-2:     #1A1510;
  --line:        rgba(243,238,226,0.10);

  --card:        #1A1510;
  --shadow:      0 20px 45px -20px rgba(0,0,0,0.6);
}

html{scroll-behavior:smooth;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  transition:background .35s ease, color .35s ease;
}

.font-display{font-family:var(--font-display);}
.font-mono{font-family:var(--font-mono);}

.text-mist{color:var(--mist);}
.bg-paper{background:var(--paper);}
.bg-paper-2{background:var(--paper-2);}
.bg-card{background:var(--card);}
.border-line{border-color:var(--line);}
.text-gold{color:var(--gold);}
.bg-gold{background:var(--gold);}

/* ---------- Buttons ---------- */
.btn-gold{
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  color:#1B1710;
  font-weight:600;
  border-radius:999px;
  padding:.85rem 1.6rem;
  box-shadow:0 10px 25px -10px rgba(201,151,62,.65);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-gold:hover{ transform:translateY(-1px); filter:brightness(1.04); box-shadow:0 14px 30px -10px rgba(201,151,62,.75);}
.btn-gold:active{ transform:translateY(0); }

.btn-ghost{
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:999px;
  padding:.85rem 1.6rem;
  font-weight:600;
  transition:background .2s ease,border-color .2s ease;
}
.btn-ghost:hover{ background:var(--paper-2); border-color:var(--gold); }

/* ---------- Nav ---------- */
#site-nav{
  backdrop-filter:blur(14px) saturate(1.2);
  background:color-mix(in srgb, var(--paper) 78%, transparent);
  border-bottom:1px solid var(--line);
  transition:background .35s ease,border-color .35s ease;
}

.nav-link{
  position:relative;
  color:var(--mist);
  font-weight:500;
  transition:color .2s ease;
}
.nav-link:hover{ color:var(--ink); }
.nav-link::after{
  content:'';
  position:absolute; left:0; bottom:-4px;
  width:0; height:1.5px; background:var(--gold);
  transition:width .25s ease;
}
.nav-link:hover::after{ width:100%; }

/* ---------- Theme toggle ---------- */
.theme-toggle{
  width:52px; height:30px; border-radius:999px;
  background:var(--paper-2); border:1px solid var(--line);
  position:relative; cursor:pointer; flex-shrink:0;
}
.theme-toggle .knob{
  position:absolute; top:2px; left:2px;
  width:24px; height:24px; border-radius:50%;
  background:var(--gold);
  display:flex; align-items:center; justify-content:center;
  transition:left .3s cubic-bezier(.65,.05,.36,1);
  font-size:13px;
}
.dark .theme-toggle .knob{ left:24px; }

/* ---------- Route ticker (signature element) ---------- */
.route-ticker{ position:relative; }
.route-ticker svg{ width:100%; height:auto; overflow:visible; }
.route-path{
  stroke-dasharray:6 10;
  stroke-linecap:round;
  animation:dash-flow 22s linear infinite;
}
@keyframes dash-flow{ to{ stroke-dashoffset:-1000; } }

.route-car{
  offset-rotate:0deg;
  animation:drive 7s ease-in-out infinite;
}
@keyframes drive{
  0%{ offset-distance:0%; }
  50%{ offset-distance:100%; }
  50.001%{ offset-distance:100%; }
  100%{ offset-distance:0%; }
}

.odometer{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}

/* ---------- Stepper ---------- */
.step-dot{
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.8rem; font-weight:600;
  border:1.5px solid var(--line); color:var(--mist);
  background:var(--card);
  transition:all .3s ease;
}
.step-dot.active{ border-color:var(--gold); color:#1B1710; background:var(--gold); }
.step-dot.done{ border-color:var(--gold); color:var(--gold); }
.step-track{
  flex:1; height:1.5px; background:var(--line); position:relative; margin:0 6px;
}
.step-track::after{
  content:''; position:absolute; inset:0; background:var(--gold);
  width:var(--fill,0%); transition:width .4s ease;
}

.form-field{
  width:100%;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:.8rem 1rem;
  color:var(--ink);
  font-size:.925rem;
  transition:border-color .2s ease, background .2s ease;
}
.form-field:focus{ outline:none; border-color:var(--gold); background:var(--card); }
.form-field::placeholder{ color:var(--mist); }

.form-label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--mist); font-weight:600; margin-bottom:.35rem; display:block;
}

.step-panel{ display:none; }
.step-panel.active{ display:block; animation:fade-up .35s ease; }
@keyframes fade-up{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

.vehicle-card{
  border:1.5px solid var(--line);
  border-radius:16px;
  background:var(--card);
  cursor:pointer;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.vehicle-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.vehicle-card.selected{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,151,62,.18); }

/* ---------- Misc ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dark);
}
.dark .eyebrow{ color:var(--gold-soft); }

.divider-line{ height:1px; background:var(--line); }

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------------- Address autocomplete dropdown (LocationIQ) ---------------- */
.geo-suggestions{
  position:absolute;
  top:calc(100% + 4px);
  left:0; right:0;
  z-index:60;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
  max-height:220px;
  overflow-y:auto;
}
.geo-suggestion{
  display:block;
  width:100%;
  text-align:left;
  padding:.6rem .9rem;
  font-size:.85rem;
  color:var(--ink);
  border-top:1px solid var(--line);
  background:transparent;
}
.geo-suggestion:first-child{ border-top:none; }
.geo-suggestion:hover{ background:var(--paper-2); }

/* Leaflet needs an explicit height on its container to render */
#route-map{ z-index:0; }
#route-map .leaflet-container{ background:var(--paper-2); font-family:var(--font-body); border-radius:12px; }


::selection{ background:var(--gold-soft); color:#1B1710; }


@media (prefers-reduced-motion: reduce){
  .route-path, .route-car, .reveal{ animation:none !important; transition:none !important; }
}