@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Space+Mono&display=swap');
@import url('https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css');

:root {
  --bg: #0A0A0A; --card: #0F0F0F; --card-2: #141414;
  --border: #2A2A2A; --border-soft: #1A1A1A;
  --text: #FAFAFA; --muted: #888; --muted-2: #666;
  --gold: #D4AF37; --gold-hover: #F3D573;
  --red: #EF4444; --emerald: #10B981;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:'Outfit', system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
body {
  min-height:100vh;
  background-image:
    radial-gradient(1200px 500px at 15% -10%, rgba(212,175,55,0.06), transparent 60%),
    radial-gradient(900px 400px at 85% 110%, rgba(212,175,55,0.04), transparent 70%);
  background-attachment:fixed;
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}
.font-display { font-family:'Playfair Display', serif; }
.font-mono { font-family:'Space Mono', monospace; }
.gold { color:var(--gold); }
.eyebrow { font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; position:relative; z-index:2; }

header.site { position:sticky; top:0; z-index:40; backdrop-filter:blur(20px); background:rgba(0,0,0,0.6); border-bottom:1px solid rgba(255,255,255,0.1); }
header.site .row { display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-logo { width:36px; height:36px; background:var(--gold); border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display', serif; color:#0A0A0A; font-weight:700; }
.brand-title { font-family:'Playfair Display', serif; font-size:18px; line-height:1; }
.brand-sub { font-size:10px; letter-spacing:0.3em; color:rgba(255,255,255,0.4); text-transform:uppercase; margin-top:2px; }

.hero { position:relative; overflow:hidden; }
.hero-bg { position:absolute; inset:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; }
.hero-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.6), #0A0A0A); }
.hero-content { position:relative; z-index:2; padding:80px 0 100px; }
.hero h1 { font-family:'Playfair Display', serif; font-size:clamp(36px, 5vw, 60px); font-weight:300; letter-spacing:-0.02em; margin:16px 0 0; max-width:720px; line-height:1.05; }
.hero p { color:rgba(255,255,255,0.6); max-width:520px; margin-top:16px; line-height:1.6; }

.book-grid { display:grid; grid-template-columns:1fr; gap:32px; padding-bottom:120px; }
@media (min-width:1024px) { .book-grid { grid-template-columns:2fr 1fr; gap:48px; } }
.section { margin-bottom:40px; }
.section-h { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.section-h h2 { font-family:'Playfair Display', serif; font-size:24px; margin:0; }
.section-h svg { color:var(--gold); }
.section-line { width:64px; height:1px; background:linear-gradient(90deg, var(--gold), transparent); margin-bottom:24px; }

.field-label { font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:8px; display:block; }
.input, .textarea, .select {
  width:100%; height:48px; padding:0 14px; border-radius:6px;
  background:var(--card-2); border:1px solid var(--border);
  color:var(--text); font-family:inherit; font-size:14px; outline:none;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.input:focus, .textarea:focus, .select:focus { border-color:var(--gold); box-shadow:0 0 0 2px rgba(212,175,55,0.2); }
.textarea { height:auto; min-height:100px; padding:12px 14px; resize:vertical; }
.input.with-icon { padding-left:38px; }
.input-wrap { position:relative; }
.input-wrap .icon-left { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--gold); pointer-events:none; }

.row-2 { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:640px) { .row-2 { grid-template-columns:1fr 1fr; } }
.row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

.autocomplete { position:relative; }
.suggestions { position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30; background:var(--card-2); border:1px solid var(--border); border-radius:8px; box-shadow:0 20px 40px -10px rgba(0,0,0,0.6); overflow:hidden; max-height:320px; overflow-y:auto; }
.suggestions .group-label { padding:8px 16px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); border-bottom:1px solid var(--border); background:var(--card); }
.suggestions .group-label.addr { color:rgba(255,255,255,0.4); }
.suggestion-item { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 16px; background:transparent; border:none; border-bottom:1px solid #222; color:var(--text); font-family:inherit; font-size:14px; cursor:pointer; transition:background 0.15s; }
.suggestion-item:hover { background:#1E1E1E; }
.suggestion-item:last-child { border-bottom:none; }
.suggestion-icon { flex-shrink:0; width:32px; height:32px; border-radius:6px; background:rgba(212,175,55,0.15); color:var(--gold); display:flex; align-items:center; justify-content:center; }
.suggestion-sub { color:rgba(255,255,255,0.4); font-size:12px; margin-top:2px; }

.btn-ghost { display:inline-flex; align-items:center; gap:8px; background:transparent; border:none; color:var(--gold); font-size:11px; letter-spacing:0.24em; text-transform:uppercase; cursor:pointer; padding:8px 0; transition:color 0.2s; font-family:inherit; }
.btn-ghost:hover { color:var(--gold-hover); }
.btn-icon { height:48px; width:48px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--border); border-radius:6px; color:var(--text); cursor:pointer; transition:border-color 0.2s, color 0.2s; }
.btn-icon:hover { border-color:var(--gold); color:var(--gold); }

.map { width:100%; height:340px; border-radius:8px; border:1px solid var(--border); overflow:hidden; background:#0f0f0f; margin-top:16px; }
.route-info { margin-top:8px; font-size:12px; color:rgba(255,255,255,0.5); display:flex; gap:24px; }
.route-info b { color:var(--text); font-family:'Space Mono', monospace; margin-left:6px; }

.counter { display:flex; align-items:center; border:1px solid var(--border); background:var(--card-2); border-radius:6px; overflow:hidden; height:48px; }
.counter button { width:48px; height:100%; background:transparent; border:none; color:var(--gold); font-size:18px; cursor:pointer; transition:background 0.15s; font-family:inherit; }
.counter button:hover:not(:disabled) { background:#1A1A1A; }
.counter .value { flex:1; text-align:center; font-family:'Playfair Display', serif; font-size:20px; }

.vehicles { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:768px) { .vehicles { grid-template-columns:1fr 1fr 1fr; } }
.vehicle-card { position:relative; overflow:hidden; border-radius:8px; cursor:pointer; border:1px solid var(--border); background:var(--card); transition:border-color 0.2s, transform 0.2s, box-shadow 0.2s; text-align:left; padding:0; font-family:inherit; color:inherit; }
.vehicle-card:hover { transform:translateY(-4px); border-color:rgba(212,175,55,0.6); }
.vehicle-card.selected { border-color:var(--gold); transform:translateY(-4px); box-shadow:0 10px 40px -10px rgba(212,175,55,0.35); }
.vehicle-card.nofit { border-color:rgba(239,68,68,0.3); }
.vehicle-card.nofit:hover { border-color:rgba(239,68,68,0.6); }
.vehicle-photo { position:relative; height:180px; overflow:hidden; }
.vehicle-photo img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.vehicle-card:hover .vehicle-photo img { transform:scale(1.05); }
.vehicle-card.nofit .vehicle-photo img { filter:grayscale(0.4); opacity:0.7; }
.vehicle-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, #000, rgba(0,0,0,0.3) 50%, transparent); }
.vehicle-badge-selected { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; z-index:2; }
.vehicle-badge-nofit { position:absolute; top:12px; left:12px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:4px; background:rgba(239,68,68,0.9); color:#fff; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; font-weight:600; }
.vehicle-title-wrap { position:absolute; bottom:12px; left:12px; right:12px; z-index:2; }
.vehicle-name { font-family:'Playfair Display', serif; font-size:22px; color:#fff; margin-top:4px; }
.vehicle-body { padding:16px; }
.vehicle-tagline { font-size:13px; color:rgba(255,255,255,0.6); line-height:1.5; }
.vehicle-caps { display:flex; align-items:center; gap:16px; font-size:12px; color:rgba(255,255,255,0.5); margin-top:12px; }
.vehicle-cap { display:inline-flex; align-items:center; gap:6px; }
.vehicle-estimate { display:flex; align-items:baseline; justify-content:space-between; border-top:1px solid #222; padding-top:12px; margin-top:12px; }
.vehicle-estimate .val { font-family:'Playfair Display', serif; font-size:20px; color:var(--gold); }

.warn { display:flex; gap:12px; padding:16px; border-radius:8px; border:1px solid rgba(239,68,68,0.4); background:rgba(239,68,68,0.1); margin-bottom:16px; }
.warn .warn-title { color:#FCA5A5; font-weight:600; font-size:14px; }
.warn ul { margin:4px 0 0; padding:0; list-style:none; font-size:12px; color:rgba(252,165,165,0.8); }
.warn ul li { padding:2px 0; }
.warn button.upgrade { margin-top:12px; padding:6px 12px; border-radius:4px; background:var(--gold); color:#0A0A0A; font-size:11px; letter-spacing:0.24em; text-transform:uppercase; font-weight:600; border:none; cursor:pointer; transition:background 0.2s; font-family:inherit; }
.warn button.upgrade:hover { background:var(--gold-hover); }

.summary { position:sticky; top:96px; border:1px solid var(--border); border-radius:8px; background:var(--card); overflow:hidden; }
.summary-head { padding:24px; border-bottom:1px solid #222; }
.summary-head .name { font-family:'Playfair Display', serif; font-size:28px; margin-top:6px; }
.summary-head .meta { font-size:13px; color:rgba(255,255,255,0.5); margin-top:4px; }
.summary-body { padding:20px 24px; font-size:14px; }
.summary-row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; }
.summary-row.muted { color:rgba(255,255,255,0.3); }
.summary-note { font-size:11px; color:rgba(212,175,55,0.8); border:1px solid rgba(212,175,55,0.3); background:rgba(212,175,55,0.05); border-radius:4px; padding:8px 12px; margin-top:8px; }
.summary-total { border-top:1px solid #222; background:#0A0A0A; padding:20px 24px; }
.total-row { display:flex; align-items:baseline; justify-content:space-between; }
.total-val { font-family:'Playfair Display', serif; font-size:36px; color:var(--gold); transition:color 0.3s; }
.total-val.pulse { animation:pulseGold 0.6s ease; }
@keyframes pulseGold { 0% { color:#FAFAFA; } 40% { color:var(--gold); } 100% { color:var(--gold); } }
.btn-primary { margin-top:20px; width:100%; height:48px; border-radius:6px; border:none; background:var(--gold); color:#0A0A0A; font-weight:600; letter-spacing:0.03em; cursor:pointer; transition:background 0.2s; font-family:inherit; font-size:15px; }
.btn-primary:hover { background:var(--gold-hover); }
.btn-primary:disabled { opacity:0.6; }

.modal-backdrop { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,0.75); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:16px; }
.modal-backdrop.open { display:flex; }
.modal { background:var(--card); border:1px solid var(--border); border-radius:12px; max-width:460px; width:100%; overflow:hidden; animation:modalIn 0.3s ease; max-height:90vh; overflow-y:auto; }
@keyframes modalIn { from { transform:scale(0.95); opacity:0; } to { transform:scale(1); opacity:1; } }
.modal-body { padding:32px; }
.modal-title { font-family:'Playfair Display', serif; font-size:26px; margin:8px 0 4px; }

.tip-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:16px; }
.tip-preset { height:64px; border-radius:6px; border:1px solid var(--border); background:var(--card-2); color:var(--text); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:background 0.2s, border-color 0.2s; font-family:inherit; }
.tip-preset:hover { border-color:var(--gold); }
.tip-preset.selected { background:var(--gold); color:#0A0A0A; border-color:var(--gold); }
.tip-preset .pct { font-family:'Playfair Display', serif; font-size:22px; }
.tip-preset .amt { font-size:12px; opacity:0.7; }
.custom-tip-box { border:1px solid var(--border); border-radius:6px; padding:16px; margin-bottom:16px; }
.custom-tip-flex { display:flex; gap:8px; }
.custom-tip-input-wrap { position:relative; flex:1; }
.custom-tip-input-wrap span { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--gold); }
.custom-tip-input-wrap .input { padding-left:26px; }
.btn-outline-gold { padding:0 16px; height:40px; background:transparent; border:1px solid var(--gold); color:var(--gold); border-radius:6px; cursor:pointer; transition:background 0.2s, color 0.2s; font-family:inherit; font-size:14px; }
.btn-outline-gold:hover { background:var(--gold); color:#0A0A0A; }
.btn-outline { width:100%; height:44px; background:transparent; border:1px solid var(--border); color:rgba(255,255,255,0.7); border-radius:6px; cursor:pointer; transition:background 0.2s; font-family:inherit; font-size:14px; }
.btn-outline:hover { background:var(--card-2); }

.validation-list { list-style:none; padding:0; margin:0 0 24px; }
.validation-list li { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--card-2); border:1px solid var(--border); border-radius:6px; margin-bottom:8px; font-size:14px; }
.validation-list li svg { color:var(--red); flex-shrink:0; }

.confirm-content { text-align:center; padding:40px 32px 32px; }
.confirm-check { width:64px; height:64px; border-radius:50%; background:var(--gold); margin:0 auto 24px; display:flex; align-items:center; justify-content:center; }
.confirm-title { font-family:'Playfair Display', serif; font-size:32px; margin:12px 0 8px; }
.confirm-id { color:var(--gold); font-family:'Space Mono', monospace; }
.confirm-details { padding:24px 32px; background:#0A0A0A; border-top:1px solid #222; text-align:left; font-size:14px; }
.confirm-details p { margin:4px 0; }
.terminal-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; background:rgba(212,175,55,0.15); border:1px solid rgba(212,175,55,0.4); color:var(--gold); border-radius:4px; font-size:11px; margin-top:4px; }

.hidden { display:none !important; }
.text-muted { color:rgba(255,255,255,0.5); }
.text-small { font-size:12px; }
.mt-3 { margin-top:12px; }
.mt-4 { margin-top:16px; }
.mt-6 { margin-top:24px; }
.mb-2 { margin-bottom:8px; }
.gap-3 { gap:12px; }
.flex { display:flex; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:#0A0A0A; }
::-webkit-scrollbar-thumb { background:#2A2A2A; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold); }
.mapboxgl-canvas { border-radius:8px; }
.mapboxgl-ctrl-attrib, .mapboxgl-ctrl-logo { opacity:0.4; }