/* =========================================================
   MinicabXX — Design tokens
   Palette: blue accent + clean white (light) / deep navy (dark)
   Display: Fraunces | Body: Inter | Utility/Data: IBM Plex Mono
   ========================================================= */

:root{
  --gold:        #5B9BD5;
  --gold-dark:   #2E75B6;
  --gold-soft:   #A4C6E6;

  --ink:         #0D1B2A;
  --mist:        #5A6E82;
  --paper:       #F5F8FC;
  --paper-2:     #E8EFF7;
  --line:        rgba(13,27,42,0.10);

  --card:        #FFFFFF;
  --shadow:      0 20px 45px -20px rgba(13,27,42,0.18);

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

.dark{
  --ink:         #E8EAF6;
  --mist:        #9FA8DA;
  --paper:       #000814;
  --paper-2:     #001523;
  --line:        rgba(232,234,246,0.10);

  --card:        #001523;
  --shadow:      0 20px 45px -20px rgba(0,8,20,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:#0D1B2A;
  font-weight:600;
  border-radius:999px;
  padding:.85rem 1.6rem;
  box-shadow:0 10px 25px -10px rgba(46,117,182,.55);
  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(46,117,182,.70);}
.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); }

.btn-call{
  background:linear-gradient(180deg, #FF6B6B, #EE5A52);
  color:#FFFFFF;
  font-weight:600;
  border-radius:999px;
  padding:.85rem 1.6rem;
  box-shadow:0 10px 25px -10px rgba(238,90,82,.65);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.btn-call:hover{ transform:translateY(-1px); filter:brightness(1.04); box-shadow:0 14px 30px -10px rgba(238,90,82,.75); }
.btn-call:active{ transform:translateY(0); }

.btn-whatsapp{
  background:linear-gradient(180deg, #2DD936, #22A725);
  color:#FFFFFF;
  font-weight:600;
  border-radius:999px;
  padding:.85rem 1.6rem;
  box-shadow:0 10px 25px -10px rgba(34,167,37,.65);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.btn-whatsapp:hover{ transform:translateY(-1px); filter:brightness(1.04); box-shadow:0 14px 30px -10px rgba(34,167,37,.75); }
.btn-whatsapp:active{ transform:translateY(0); }

/* ---------- 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:#0D1B2A; 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 cards (2-col grid) ---------- */
.vehicle-card{
  border:1.5px solid var(--line);
  border-radius:16px;
  background:var(--card);
  cursor:pointer;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.vehicle-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.vehicle-card.selected{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(91,155,213,.22);
}

/* Image area */
.vehicle-card-img-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:var(--paper-2);
  overflow:hidden;
}
.vehicle-card-img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
.vehicle-card:hover .vehicle-card-img{ transform:scale(1.04); }

/* Premium badge */
.vehicle-card-badge{
  position:absolute; top:8px; left:8px;
  font-family:var(--font-mono);
  font-size:.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  background:var(--gold); color:var(--paper);
  padding:2px 8px; border-radius:999px;
}

/* Body */
.vehicle-card-body{
  display:flex; flex-direction:column; flex:1;
  padding:.85rem .9rem .8rem;
  gap:.5rem;
}
.vehicle-card-name{
  font-size:.95rem; font-weight:700; line-height:1.2;
  color:var(--ink);
}
.vehicle-card-models{
  font-size:.72rem; color:var(--mist); line-height:1.35;
}

/* Business car full-width override */
.vehicle-card.col-span-2 .vehicle-card-img-wrap{
  aspect-ratio:21/7;
}
.vehicle-card.col-span-2 .vehicle-card-body{
  flex-direction:row; align-items:center; flex-wrap:wrap; gap:.6rem 1.2rem;
}
.vehicle-card.col-span-2 .vehicle-card-name{ font-size:1.05rem; }
.vehicle-card.col-span-2 .vehicle-card-footer{
  border-top:none; padding-top:0; margin-top:0; margin-left:auto;
}

@media(max-width:420px){
  .vehicle-card.col-span-2 .vehicle-card-body{ flex-direction:column; }
  .vehicle-card.col-span-2 .vehicle-card-footer{ margin-left:0; border-top:1px solid var(--line); padding-top:.5rem; width:100%; }
}
.vehicle-card-stats{
  display:flex; gap:.75rem; align-items:center;
}
.vehicle-card-stat{
  display:flex; align-items:center; gap:4px;
  font-family:var(--font-mono); font-size:.75rem;
  color:var(--mist);
}
.vehicle-card-stat svg{ flex-shrink:0; opacity:.75; }

/* Price footer */
.vehicle-card-footer{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-top:auto; padding-top:.5rem;
  border-top:1px solid var(--line);
}
.vehicle-card-trip-label{
  font-size:.65rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--mist);
}
.vehicle-card-price{
  font-family:var(--font-mono); font-size:1.15rem; font-weight:700;
  color:var(--gold);
}

/* ---------- 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; }


/* ---------------- Full-screen map picker (center-pin drag) ---------------- */
.map-picker-overlay{
  position:fixed; inset:0; z-index:3000;
  background:var(--paper);
  display:none;
}
.map-picker-overlay.active{ display:block; }
.map-picker-map{ position:absolute; inset:0; z-index:1; }
.map-picker-map #map-picker-canvas{ width:100%; height:100%; }
.map-picker-center-pin{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-100%);
  z-index:2000; pointer-events:none;
  font-size:36px;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));
}

.map-picker-panel{
  position:absolute; top:16px; left:16px; z-index:2000;
  width:300px; max-width:calc(100vw - 32px);
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:16px;
}
.map-picker-panel-header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.map-picker-close{
  color:var(--mist); font-size:1.1rem; line-height:1; background:none; border:none; cursor:pointer;
}
.map-picker-close:hover{ color:var(--ink); }
.map-picker-field{
  border:1.5px solid var(--line); border-radius:12px; cursor:pointer; transition:border-color .2s ease;
}
.map-picker-field.active{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,151,62,.15); }
.map-picker-field input{
  width:100%; background:transparent; border:none; padding:.65rem .8rem;
  font-size:.85rem; color:var(--ink); cursor:pointer;
}
.map-picker-field input:focus{ outline:none; cursor:text; }
.map-picker-field .form-label{ padding:.5rem .8rem 0; margin-bottom:0; }

.map-picker-save-btn{
  position:absolute; bottom:20px; right:20px; z-index:2000;
  padding:.85rem 1.7rem;
}

::selection{ background:var(--gold-soft); color:#0D1B2A; }


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