:root{
  --bg:#07080c; --surface:#12141c; --surface-2:#191c26; --surface-3:#232838; --ink:#f4f5f9; --muted:#9298a8;
  --line:rgba(255,255,255,.1); --accent:#9c8bff; --accent-2:#6bc5ff; --danger:#ff5a79; --warning:#ffb43c;
  --radius-lg:20px; --radius-md:14px;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -18px rgba(156,139,255,.35);
}
*{box-sizing:border-box}
html{ overflow-x:hidden; background:var(--bg); }
body{
  margin:0; min-height:100vh; color:var(--ink);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
  background:
    radial-gradient(640px circle at 12% 0%, rgba(156,139,255,.18), transparent 62%),
    radial-gradient(560px circle at 100% 18%, rgba(107,197,255,.14), transparent 60%),
    radial-gradient(900px circle at 50% 100%, rgba(156,139,255,.08), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
h1,h2,h3{ font-family:"Fraunces",Georgia,serif; font-weight:600; margin:0; }
a{ color:inherit }
p{ color:var(--muted); line-height:1.55; margin:0 }
input,select,textarea,button{ font:inherit; color:inherit }
input,select,textarea{
  background:var(--surface-3); border:1px solid rgba(255,255,255,.18); border-radius:10px;
  padding:10px 12px; width:100%; outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
input:hover,select:hover,textarea:hover{ border-color:rgba(255,255,255,.3); }
input:focus,select:focus,textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(156,139,255,.18); }
label{ font-size:.85rem; color:var(--muted); display:block; margin-bottom:5px }
.field{ margin-bottom:14px; position:relative; }
button{ cursor:pointer; border:none; border-radius:999px; padding:11px 22px; font-weight:600; }
/* .btn-primary/.btn-ghost se používají i na <a> (odkazy stylované jako tlačítko) — tag selektor
   "button" výše na ně nepůsobí, takže by bez téhle duplicity zůstaly bez paddingu/zaoblení
   (jen barevný obdélník s podtrženým textem). Vlastnosti proto i tady, ne jen na "button". */
.btn-primary, .btn-ghost{
  display:inline-block; cursor:pointer; border:none; border-radius:999px; padding:11px 22px;
  font-weight:600; text-decoration:none; text-align:center;
}
.btn-primary{ background:var(--accent); color:#0c0920; }
.btn-primary:hover{ filter:brightness(1.08) }
.btn-ghost{ background:var(--surface-2); color:var(--ink); border:1px solid var(--line); }
.error{ color:var(--danger); font-size:.88rem; margin-top:10px; }
.error:empty{ display:none }
.hint{ color:var(--muted); font-size:.82rem; margin-top:8px; }
.accent-text{
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative;
}
/* ručně kreslené podtržení pod zvýrazněným slovem v nadpisu — hravý detail místo rovné čáry.
   Nativní text-decoration (ne ::after s SVG pozadím) záměrně — ::after na víceřádkovém
   inline elementu se u zalomeného textu vykresluje jen pod poslední fragment (nebo vůbec),
   kdežto wavy podtržení sleduje každý řádek správně samo. */
.accent-text.squiggle{
  text-decoration-line:underline; text-decoration-style:wavy; text-decoration-color:var(--accent);
  text-decoration-thickness:2.5px; text-underline-offset:5px;
}

/* hravost — plovoucí bloby na pozadí, maskot a mikro-interakce při hoveru/vstupu prvků */
@keyframes float-blob{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(12px,-18px) scale(1.06); } }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-1.5deg); } 50%{ transform:translateY(-8px) rotate(1.5deg); } }
@keyframes pop-in{ 0%{ transform:scale(.4) rotate(-15deg); opacity:0; } 60%{ transform:scale(1.15) rotate(4deg); opacity:1; } 100%{ transform:scale(1) rotate(0); } }
@keyframes wheel-spin{ to{ transform:rotate(360deg); } }
@keyframes wiggle-in{ 0%{ transform:translateY(10px) rotate(-2deg); opacity:0; } 100%{ transform:translateY(0) rotate(0); opacity:1; } }

.blob-deco{ position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; z-index:0; opacity:.5; animation:float-blob 9s ease-in-out infinite; }

.mascot{ display:inline-block; animation:bob 3.4s ease-in-out infinite; transform-origin:center; }
.mascot .wheel{ transform-box:fill-box; transform-origin:center; animation:wheel-spin 2.6s linear infinite; }
.mascot.mascot-sm{ width:64px; }
.mascot.mascot-lg{ width:150px; }

.hero{ animation:wiggle-in .5s ease-out; }
.btn-primary, .btn-ghost{ transition:transform .18s cubic-bezier(.34,1.56,.64,1), filter .18s ease, box-shadow .18s ease; }
.btn-primary:hover{ transform:translateY(-2px) rotate(-1deg) scale(1.03); box-shadow:0 10px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
.btn-primary:active{ transform:translateY(0) scale(.97) rotate(0); }
.btn-ghost:hover{ transform:translateY(-2px) rotate(1deg); border-color:var(--accent); }

.feature-card{ transition:transform .22s cubic-bezier(.34,1.56,.64,1), border-color .22s ease; }
.feature-card:nth-child(odd):hover{ transform:translateY(-5px) rotate(-1.5deg); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.feature-card:nth-child(even):hover{ transform:translateY(-5px) rotate(1.5deg); border-color:color-mix(in srgb, var(--accent-2) 45%, transparent); }
.feature-card .icon{ display:inline-block; transition:transform .25s ease; }
.feature-card:hover .icon{ transform:scale(1.25) rotate(-8deg); }

.order-success .check{ display:inline-block; animation:pop-in .5s cubic-bezier(.34,1.56,.64,1); }

.ride-type-option, .service-option{ transition:transform .16s ease, border-color .16s ease; }
.ride-type-option:hover, .service-option:hover{ transform:translateY(-2px); }

/* header */
.site-header{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  padding:14px 20px; margin:0 0 24px;
  background:rgba(4,5,8,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header-inner{ max-width:900px; margin:0 auto; display:flex; align-items:center; gap:10px; }
.brand{ display:flex; align-items:center; gap:12px; font-family:"Fraunces",serif; font-weight:600; font-size:1.2rem; text-decoration:none; color:var(--ink); }
.brand-logo{ height:28px; width:auto; filter:drop-shadow(0 0 10px rgba(156,139,255,.4)); }
.brand-divider{ width:1px; height:22px; background:var(--line); }

/* hamburger + postranní menu — stejný vzor jako Delivery/Book/Hub */
.menu-toggle{
  display:flex; flex-direction:column; gap:4px; justify-content:center;
  width:36px; height:36px; background:none; border:none; cursor:pointer; border-radius:8px; flex-shrink:0;
}
.menu-toggle:hover{ background:var(--surface-2); }
.menu-toggle span{ width:18px; height:2px; background:var(--ink); border-radius:2px; }

.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:45;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.drawer-overlay.open{ opacity:1; pointer-events:auto; }
.side-drawer{
  position:fixed; top:0; left:0; bottom:0; width:280px; max-width:82vw; z-index:50;
  background:var(--surface); border-right:1px solid var(--line);
  padding:calc(env(safe-area-inset-top,0px) + 18px) 18px 18px;
  overflow-y:auto; transform:translateX(-100%); transition:transform .22s ease;
  display:flex; flex-direction:column; gap:22px;
}
.side-drawer.open{ transform:translateX(0); }
.side-drawer-head{ display:flex; align-items:center; justify-content:space-between; }
.side-drawer-title{ font-family:"Fraunces",serif; font-weight:600; font-size:1.05rem; }
.drawer-close{ background:none; border:none; color:var(--muted); font-size:1.1rem; cursor:pointer; padding:4px; }
.drawer-close:hover{ color:var(--ink); }
.drawer-label{ display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; }

.view-nav{ display:flex; flex-direction:column; gap:6px; }
.view-nav a{
  background:none; border:1px solid var(--line); color:var(--muted); text-align:left;
  padding:10px 14px; border-radius:10px; font-size:.92rem; font-weight:500; width:100%;
  text-decoration:none; display:block; box-sizing:border-box;
}
.view-nav a.active{ background:var(--surface-2); color:var(--ink); border-color:transparent; }
.view-nav a:not(.active):hover{ border-color:var(--accent); color:var(--ink); }

.wrap{ max-width:900px; margin:0 auto; padding:0 16px 60px; }

/* hero */
.hero{ text-align:center; max-width:620px; margin:20px auto 40px; }
.hero h1{ font-size:clamp(1.8rem,4vw,2.5rem); line-height:1.15; margin-bottom:14px; }
.hero p{ font-size:1rem; }

/* panel */
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; box-shadow:var(--shadow);
}
.panel h2{ font-size:1.1rem; margin-bottom:16px; }
.form-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.field-wide{ grid-column:1/-1; }
.form-actions{ margin-top:14px; display:flex; justify-content:flex-end; }

/* teď / naplánovat přepínač */
.ride-type-choice{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 18px; }
.ride-type-option{
  display:flex; flex-direction:column; gap:4px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius-md); padding:14px;
  background:var(--surface-2); margin:0; text-align:center;
}
.ride-type-option input{ position:absolute; opacity:0; width:0; height:0; }
.ride-type-option:has(input:checked){ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.ride-type-name{ font-weight:600; font-size:.98rem; }
.ride-type-desc{ font-size:.8rem; color:var(--muted); }

/* autosuggest */
.autosuggest{ position:relative; }
.suggest-list{
  position:absolute; top:100%; left:0; right:0; z-index:20; margin-top:4px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow); max-height:220px; overflow-y:auto;
}
.suggest-item{ padding:9px 12px; font-size:.88rem; cursor:pointer; }
.suggest-item:hover, .suggest-item.active{ background:var(--surface-3); }

/* way of payment */
.service-choice{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:18px 0; }
.service-option{
  display:flex; flex-direction:column; gap:4px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius-md); padding:14px;
  background:var(--surface-2); margin:0;
}
.service-option input{ position:absolute; opacity:0; width:0; height:0; }
.service-option:has(input:checked){ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.service-name{ font-weight:600; font-size:.98rem; }
.service-desc{ font-size:.8rem; color:var(--muted); }
.service-rate{ font-size:.82rem; color:var(--accent); font-weight:600; margin-top:4px; }

/* quote result + map */
.quote-result{ margin-top:22px; padding-top:22px; border-top:1px solid var(--line); }
.quote-numbers{ display:flex; gap:32px; margin-bottom:16px; flex-wrap:wrap; }
.quote-numbers .k{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:2px; }
.quote-numbers .v{ display:block; font-size:1.4rem; font-family:"Fraunces",serif; font-weight:600; }
#map{ height:320px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); background:var(--surface-2); }
.leaflet-control-attribution{ background:rgba(7,8,12,.75) !important; color:var(--muted) !important; }
.leaflet-control-attribution a{ color:var(--ink) !important; }

/* živý marker auta na mapě sledování */
.car-marker{ font-size:1.6rem; line-height:1; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); transform:translate(-50%,-50%); }
.tracking-live-badge{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--accent); font-weight:600; }
.tracking-live-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* order success */
.order-success{ text-align:center; padding:30px 10px; }
.order-success .check{ font-size:2.4rem; color:var(--accent); margin-bottom:10px; }
.order-success h2{ margin-bottom:8px; }

.terms-consent{ display:flex; align-items:flex-start; gap:9px; cursor:pointer; margin:16px 0; }
.terms-consent input{ width:auto; margin-top:3px; flex-shrink:0; }
.terms-consent span{ font-size:.84rem; color:var(--muted); line-height:1.45; }
.terms-consent a{ color:var(--accent); }

/* "o službě" sekce */
.about-section{ margin-top:44px; }
.section-title{ font-size:clamp(1.3rem,3vw,1.7rem); text-align:center; margin-bottom:10px; }
.section-lead{ text-align:center; max-width:560px; margin:0 auto 28px; font-size:.96rem; }
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:28px; }
.feature-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:18px; text-align:center;
}
.feature-card .icon{ font-size:1.6rem; margin-bottom:8px; }
.feature-card h3{ font-size:.96rem; margin-bottom:6px; }
.feature-card p{ font-size:.84rem; }

.compare-table{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:8px; overflow-x:auto;
}
.compare-table table{ width:100%; border-collapse:collapse; min-width:480px; }
.compare-table th, .compare-table td{ text-align:left; padding:12px 14px; font-size:.86rem; border-bottom:1px solid var(--line); }
.compare-table th{ color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.compare-table td{ color:var(--muted); }
.compare-table td:first-child{ color:var(--ink); font-weight:600; white-space:nowrap; }
.compare-table td.us{ color:var(--ink); }
.compare-table td.us::before{ content:"✓ "; color:var(--accent); font-weight:700; }
.compare-table tr:last-child td{ border-bottom:none; }

/* status štítky (jízda) */
.status-badge{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:.78rem; font-weight:600; }
.status-badge.requested{ background:color-mix(in srgb, var(--warning) 18%, var(--surface-2)); color:var(--warning); }
.status-badge.accepted,.status-badge.arrived{ background:color-mix(in srgb, var(--accent-2) 18%, var(--surface-2)); color:var(--accent-2); }
.status-badge.in_progress{ background:color-mix(in srgb, var(--accent) 18%, var(--surface-2)); color:var(--accent); }
.status-badge.completed{ background:color-mix(in srgb, #3fd68a 18%, var(--surface-2)); color:#3fd68a; }
.status-badge.cancelled{ background:color-mix(in srgb, var(--danger) 18%, var(--surface-2)); color:var(--danger); }

/* ride card (řidičská appka) */
.ride-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:16px; margin-bottom:12px;
}
.ride-card-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.ride-card-route{ font-size:.92rem; margin-bottom:4px; }
.ride-card-meta{ font-size:.8rem; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.ride-card-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.tabs{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.tab-btn{ background:var(--surface-2); color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:.86rem; }
.tab-btn.active{ background:var(--accent); color:#0c0920; border-color:transparent; }
.empty-state{ text-align:center; color:var(--muted); padding:30px 10px; font-size:.9rem; }

/* footer */
.site-footer{ margin-top:40px; padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); }
.site-footer-inner{ max-width:900px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.site-footer-inner span{ color:var(--muted); font-size:.82rem; }
.footer-links{ display:flex; gap:18px; }
.footer-links a{ color:var(--muted); font-size:.82rem; text-decoration:none; }
.footer-links a:hover{ color:var(--ink); text-decoration:underline; }
.footer-note{ max-width:900px; margin:12px auto 0; text-align:center; font-size:.78rem; color:var(--muted); }
.footer-note a{ color:var(--accent); }

[hidden]{ display:none !important; }