/* =====================================================================
   LimoSclass — design system derived from the LSC badge.

   Colours sampled directly from the logo file rather than guessed:
     highlight #fdf07a · core #f7c600 · shadow #e08f00
   The badge is a metallic gradient on pure black, so the site uses a
   true black field (not the old #0b0b0c grey) and reserves the gradient
   for the few elements that should read as metal — the primary button
   and the price figure. Everything else uses flat gold, or the whole
   page turns into costume jewellery.

   Motifs borrowed from the mark: the circle, the thin outer ring, and
   the three-way radial split.
   ===================================================================== */
:root{
  --gold:#f7c600;
  --gold-hi:#fdf07a;
  --gold-deep:#e08f00;
  --gold-metal:linear-gradient(155deg,#fdf07a 0%,#f7c600 44%,#e08f00 100%);
  --gold-line:rgba(247,198,0,.28);
  --gold-faint:rgba(247,198,0,.10);

  --bg:#050506;
  --panel:#0e0e11;
  --panel-2:#16161a;
  --line:#232329;
  --text:#f6f6f4;
  --muted:#93939a;

  --radius:14px;
  --wrap:1140px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.62 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{letter-spacing:-.02em;line-height:1.16;margin:0 0 .5em;font-weight:650}
h1{font-size:clamp(32px,5.2vw,54px)}
h2{font-size:clamp(24px,3vw,34px)}
h3{font-size:18px}
p{margin:0 0 1em}
.muted{color:var(--muted)}
.small{font-size:13.5px}
.lede{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:60ch;margin-bottom:1.5em}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--gold);color:#000;padding:10px 16px;border-radius:8px;z-index:99}

/* Section heads carry a small ring — the badge's outer circle, reduced. */
.block>h2::before,.page-head h1::before{content:none}
.eyebrow{
  display:flex;align-items:center;gap:9px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin-bottom:14px;font-weight:600;
}
.eyebrow::before{
  content:"";width:9px;height:9px;border-radius:50%;
  border:2px solid var(--gold);flex:none;
}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(5,5,6,.86);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.bar{max-width:var(--wrap);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:28px}

/* Badge + wordmark lockup */
.logo{flex:none;display:flex;align-items:center;gap:12px}
.logo .mark{width:42px;height:42px;flex:none}
.logo .wordmark{display:flex;flex-direction:column;line-height:1}
.logo .wm-name{font-size:19px;font-weight:650;letter-spacing:.005em}
.logo .wm-name em{font-style:normal;color:var(--gold)}
.logo .wm-sub{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-top:4px}
@media(max-width:420px){.logo .wm-sub{display:none}}

.main-nav{display:flex;gap:26px;font-size:14.5px;flex:1}
.main-nav a{color:var(--muted);transition:color .15s;position:relative;padding:4px 0}
.main-nav a:hover,.main-nav a[aria-current]{color:var(--text)}
.main-nav a[aria-current]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold);
}
.head-right{display:flex;align-items:center;gap:18px;margin-inline-start:auto}
.head-right .btn{white-space:nowrap}
/* The header's WhatsApp button only where the bar has room for it. Below that width the hero,
   the footer and the mobile menu still carry the link. */
@media(max-width:1180px){.head-right .head-wa{display:none}}
/* Language menu: a native <details> disclosure, so it opens with a click,
   Enter or Space even with JavaScript off; app.js only adds Escape and
   click-outside. The flag is decoration — the language name is the label. */
.lang{position:relative;font-size:13.5px;font-weight:600}
.lang summary{
  display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;user-select:none;
  padding:7px 11px;border:1px solid var(--line);border-radius:9px;color:var(--text);
  transition:border-color .15s;
}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{
  content:"";width:6px;height:6px;flex:none;margin:-3px 2px 0 1px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg);transition:transform .15s;
}
.lang[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.lang summary:hover,.lang[open] summary{border-color:var(--gold-line)}
.lang summary:focus-visible,.lang-menu a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lang .flag{width:21px;height:14px;object-fit:cover;border-radius:2px;flex:none}
.lang-code{display:none;font-size:12px;letter-spacing:.08em}
.lang-menu{
  position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:60;
  min-width:180px;margin:0;padding:6px;list-style:none;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
}
.lang-menu a,.lang-menu [aria-current]{
  display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;
  border-radius:8px;color:var(--muted);font-size:14.5px;font-weight:500;
}
.lang-menu a:hover{background:var(--panel-2);color:var(--text)}
.lang-menu [aria-current]{color:var(--gold)}
.burger{display:none;background:none;border:0;flex-direction:column;gap:4px;cursor:pointer;padding:8px;margin-inline-start:auto}
.burger span{width:21px;height:2px;background:var(--text);display:block;transition:.2s}
.site-head.open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-head.open .burger span:nth-child(2){opacity:0}
.site-head.open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-nav{display:none;flex-direction:column;padding:4px 20px 20px;border-top:1px solid var(--line)}
.mobile-nav a{padding:13px 0;color:var(--muted);border-bottom:1px solid var(--line)}
.mobile-nav .btn{margin-top:16px;text-align:center;border-bottom:0}
.site-head.open .mobile-nav{display:flex}
@media(max-width:940px){
  .main-nav{display:none}
  .head-right .btn{display:none}
  .burger{display:flex}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--gold-metal);color:#0a0a0b;font-weight:650;
  padding:12px 22px;border-radius:10px;font-size:15px;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 1px 14px rgba(247,198,0,.12);
  transition:transform .12s,box-shadow .18s;
}
.btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 22px rgba(247,198,0,.24)}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-lg{padding:15px 30px;font-size:16px}
.btn-ghost{
  background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none;
}
.btn-ghost:hover{border-color:var(--gold-line);background:var(--panel-2);box-shadow:none}

/* ---------- layout ---------- */
main{max-width:var(--wrap);margin:0 auto;padding:0 20px 88px}
.block{margin:72px 0}
.page-head{padding:60px 0 8px;max-width:70ch}
.crumbs{padding-top:26px;font-size:13.5px;color:var(--muted)}
.crumbs a:hover{color:var(--gold)}

/* ---------- hero ---------- */
.hero{
  position:relative;margin:30px 0 0;border-radius:22px;overflow:hidden;
  border:1px solid var(--line);background:#0a0a0c;
}
.hero-media{position:relative;aspect-ratio:16/7.4}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.66}
/* Two overlays, not one: a horizontal ramp that darkens only the side the
   copy sits on, plus a light vertical ramp. A single flat scrim was hiding
   the car — the point of the photograph. */
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,5,6,.92) 0%,rgba(5,5,6,.72) 34%,rgba(5,5,6,.18) 62%,rgba(5,5,6,.05) 100%),
    linear-gradient(180deg,rgba(5,5,6,.30) 0%,rgba(5,5,6,.10) 45%,rgba(5,5,6,.72) 100%);
}
/* The badge, oversized and faint, as the hero's own watermark. */
/* Kept, but small and faint. At the old size it sat straight on top of
   the car and both lost. */
.hero-badge{
  position:absolute;right:2.5%;top:8%;
  width:min(17%,132px);opacity:.5;z-index:1;pointer-events:none;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.6));
}
/* Decorative background clip, laid exactly over hero.jpg so the photo is the
   fallback whenever the video is hidden. The ::after scrim above paints over
   both, so the copy stays readable. */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Opaque + brightness, not opacity: opacity would ghost hero.jpg through the clip. */
  filter:brightness(.66);pointer-events:none;background:#0a0a0c;
}
/* Pause/play for the background clip (WCAG 2.2.2). Revealed by app.js. */
.hero-video-toggle{
  position:absolute;left:14px;top:14px;z-index:3;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(5,5,6,.62);border:1px solid rgba(255,255,255,.28);color:#fff;
}
.hero-video-toggle[hidden]{display:none}
.hero-video-toggle:hover{border-color:var(--gold-line)}
.hero-video-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* Two bars = playing (press to pause); a triangle = paused (press to play). */
.hero-video-toggle .ico{width:12px;height:14px;border-left:4px solid currentColor;border-right:4px solid currentColor;box-sizing:border-box}
.hero-video-toggle.is-paused .ico{
  width:0;height:0;border-right:0;margin-left:3px;
  border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid currentColor;
}
@media(prefers-reduced-motion:reduce){
  .hero-video,.hero-video-toggle{display:none}
}
.hero-text{position:absolute;left:0;right:0;bottom:0;padding:clamp(26px,4.4vw,56px);z-index:2}
.hero-text h1{max-width:15ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
/* One-line AI disclosure directly under the hero; the long note stays in the footer. In the flow
   rather than over the picture, so it cannot sit on the video button or the eyebrow, needs no
   scrim, and being in the first paint it moves nothing when it appears. 12.5px, 6.6:1 on the page. */
.hero-note{margin:10px 4px 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
@media(max-width:640px){
  .hero-media::after{
    background:linear-gradient(180deg,rgba(5,5,6,.28) 0%,rgba(5,5,6,.30) 38%,rgba(5,5,6,.90) 78%,rgba(5,5,6,.97) 100%);
  }
  .hero-media{aspect-ratio:4/5}
  .hero-badge{width:22%;right:5%;top:4%;opacity:.45}
}

/* ---------- cards ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px}

/* ---------- quote widget ---------- */
.quote{
  margin:36px 0;position:relative;overflow:hidden;
  background:
    radial-gradient(90% 140% at 100% 0%,rgba(247,198,0,.06),transparent 60%),
    var(--panel);
  border-color:var(--gold-line);
}
.quote h2{font-size:20px;margin-bottom:18px}
.quote-grid{display:grid;gap:14px;grid-template-columns:2fr 1fr 1fr .7fr}
@media(max-width:860px){.quote-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.quote-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field>span{font-size:11.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.field select,.field input{
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:12px;font:inherit;font-size:15px;width:100%;
}
.field select:focus,.field input:focus{outline:none;border-color:var(--gold-line);box-shadow:0 0 0 3px var(--gold-faint)}
.quote-out{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.quote-price{font-size:44px;font-weight:650;letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline}
/* metallic numerals, matching the badge */
.quote-price #q-min,.quote-price .cur{
  background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.quote-price .cur{font-size:24px;margin-inline-end:3px}
.q-tag{
  font-size:10.5px;background:var(--gold-faint);color:var(--gold);padding:5px 10px;border-radius:20px;
  margin-inline-start:14px;letter-spacing:.1em;text-transform:uppercase;align-self:center;font-weight:600;
  border:1px solid var(--gold-line);
}
.quote-meta{flex:1;min-width:210px;margin:0;font-size:14px}
.quote-out .btn{margin-inline-start:auto}
.quote-fail{margin:12px 0 0;font-size:13px}

/* ---------- points ---------- */
.points{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:72px 0}
.point{padding-top:20px;position:relative}
.point::before{
  content:"";position:absolute;top:0;inset-inline-start:0;width:34px;height:2px;background:var(--gold-metal);
}
.point h3{margin-bottom:.45em}
.point p{font-size:14.5px;margin:0}

/* ---------- fleet ---------- */
.fleet{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.car{padding:0;overflow:hidden;transition:border-color .18s}
.car:hover{border-color:var(--gold-line)}
.car-img{aspect-ratio:16/9;background:var(--panel-2)}
.car-img img{width:100%;height:100%;object-fit:cover}
.car h3{margin:22px 26px 4px}
.car>p{margin:0 26px 18px;font-size:14px}
.rates{display:flex;gap:30px;margin:0;padding:18px 26px 24px;border-top:1px solid var(--line)}
.rates dt{font-size:10.5px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.rates dd{margin:3px 0 0;font-size:20px;font-weight:650;color:var(--gold)}

/* ---------- routes ---------- */
.route-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));margin-top:26px}
.route-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;display:flex;flex-direction:column;gap:6px;transition:.16s;position:relative;overflow:hidden;
}
.route-card::after{
  content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;
  border:1px solid var(--gold-faint);transition:.16s;
}
.route-card:hover{border-color:var(--gold-line);transform:translateY(-2px)}
.route-card:hover::after{border-color:var(--gold-line)}
.route-name{font-weight:500}
.route-price{color:var(--gold);font-size:20px;font-weight:650}
.route-km{font-size:12.5px}

/* ---------- price badge ---------- */
.price-badge{
  display:inline-flex;align-items:baseline;gap:11px;background:var(--panel);
  border:1px solid var(--gold-line);border-radius:12px;padding:13px 20px;margin:0 0 24px;
}
.price-badge strong{
  font-size:32px;font-weight:650;letter-spacing:-.02em;
  background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table.tariff{width:100%;border-collapse:collapse;font-size:14.5px;min-width:540px}
.tariff th,.tariff td{padding:14px 16px;text-align:start;border-bottom:1px solid var(--line)}
.tariff th{background:var(--panel-2);color:var(--muted);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.tariff td:first-child{font-weight:500}
.tariff tr:last-child td{border-bottom:0}
.num{text-align:end;font-variant-numeric:tabular-nums}

/* ---------- misc blocks ---------- */
.two-col{display:grid;gap:44px;grid-template-columns:1fr 1fr}
@media(max-width:860px){.two-col{grid-template-columns:1fr}}
/* A grid item will not shrink below its content, and the tariff table inside carries min-width:540px, so
   without this the single column grew to 542px and every route page scrolled sideways on a phone. The table
   scrolls inside its own .table-wrap instead. */
.two-col>*{min-width:0}
.prose-grid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cta-band{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:22px;
  padding:52px 44px;text-align:center;margin:72px 0;
  background:radial-gradient(80% 130% at 50% 0%,rgba(247,198,0,.07),transparent 62%),var(--panel);
}
.cta-band::before,.cta-band::after{
  content:"";position:absolute;border-radius:50%;border:1px solid var(--gold-faint);pointer-events:none;
}
.cta-band::before{width:340px;height:340px;left:-140px;bottom:-190px}
.cta-band::after{width:340px;height:340px;right:-140px;top:-190px}
.cta-band h2{max-width:22ch;margin-inline:auto;position:relative}
.cta-band p{max-width:56ch;margin-inline:auto;position:relative}
.cta-band .btn{position:relative}
.contact-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.contact-card{transition:.16s}
.contact-card:hover{border-color:var(--gold-line);transform:translateY(-2px)}
.contact-card h3{margin-bottom:.35em}
.contact-card p{margin:0;color:var(--gold);font-weight:500}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--panel);margin-top:48px}
.foot-grid{max-width:var(--wrap);margin:0 auto;padding:52px 20px;display:grid;gap:38px;grid-template-columns:1.4fr 1fr 1fr}
@media(max-width:780px){.foot-grid{grid-template-columns:1fr}}
.foot-lockup{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.foot-lockup img{width:44px;height:44px}
.foot-lockup .n{font-size:18px;font-weight:650}
.foot-lockup .n em{font-style:normal;color:var(--gold)}
.site-foot h3{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.foot-links{display:flex;flex-direction:column;gap:10px;font-size:14px}
.foot-links a{color:var(--muted)}
.foot-links a:hover{color:var(--gold)}
.foot-base{max-width:var(--wrap);margin:0 auto;padding:0 20px 40px;font-size:13px;border-top:1px solid var(--line);padding-top:22px}
.site-foot a{color:var(--muted)}
.site-foot a:hover{color:var(--gold)}
.foot-base p{margin:0}
.foot-base .ai-note{margin-top:8px;font-size:12px;max-width:90ch}
.foot-base .powered-by{margin-top:8px;font-size:12px}
.foot-base .powered-by a{color:inherit;text-decoration:underline}

/* Comfortable tap targets on touch screens (44px is the common guideline;
   WCAG 2.2 AA minimum is 24px). Only heights grow — widths are left alone so
   the header row (logo + language + menu) still fits a 390px screen. */
@media(max-width:940px){
  .burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .lang summary{min-height:44px;padding:0 9px;gap:7px}
  .lang-name{display:none}
  .lang-code{display:inline}
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .foot-links{gap:0}
  .foot-links a{display:flex;align-items:center;min-height:44px}
  .site-foot p a{display:inline-block;padding:10px 0}
}

/* Phones: the language button is a little wider than the old three codes,
   so the header row gives the space back from its gaps. */
@media(max-width:480px){.bar{gap:14px}}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Very narrow phones (≤360px). Headless Chrome clamps its viewport at 485px
   so this path can't be screenshot-tested here — kept defensive on purpose. */
@media(max-width:360px){
  .bar{gap:12px;padding:10px 14px}
  .logo .mark{width:36px;height:36px}
  .logo .wm-name{font-size:16px}
  .lang summary{padding:0 7px;gap:6px}
  main{padding-left:14px;padding-right:14px}
  .hero-text{padding:20px}
  .card{padding:20px}
}

/* Full-width photograph block (hotel partner page). */
.wide-shot{margin:34px 0 0;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.wide-shot img{width:100%;height:auto;display:block}
/* Fleet page lead image and the Larnaca meet-and-greet clip. */
.fleet-shot{margin:28px 0 26px}
.fleet-shot img{max-height:420px;object-fit:cover}
.fleet-note{margin:16px 0 0}
.city-video{margin:30px 0 0;background:#000}
.city-video video{width:100%;height:auto;max-height:480px;display:block;background:#000}
.city-video figcaption{padding:10px 16px;background:var(--panel)}

/* =====================================================================
   Booking wizard, calculator, FAQ, tracking, answer blocks
   ===================================================================== */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- answer block ----------
   Deliberately plain and high-contrast. This is the passage a generative
   engine is most likely to lift, so it must read as a standalone fact,
   not as decoration. */
.answer{
  margin:44px 0;padding:26px 28px;border-inline-start:3px solid var(--gold);
  background:linear-gradient(90deg,rgba(247,198,0,.05),transparent 70%);
  border-radius:0 var(--radius) var(--radius) 0;
}
.answer p{margin:0;font-size:16.5px;line-height:1.68;max-width:78ch}

/* ---------- wizard ---------- */
.wiz{margin:32px 0;padding:0;overflow:visible;scroll-margin-top:88px}
.wiz-steps{
  display:flex;list-style:none;margin:0;padding:20px 26px;gap:8px;
  border-bottom:1px solid var(--line);font-size:13px;color:var(--muted);flex-wrap:wrap;
}
.wiz-steps li{display:flex;align-items:center;gap:8px;flex:1;min-width:120px}
.wiz-steps li span{
  width:24px;height:24px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-size:12px;flex:none;
}
.wiz-steps li.is-current{color:var(--text)}
.wiz-steps li.is-current span{border-color:var(--gold);color:var(--gold)}
.wiz-steps li.is-done span{background:var(--gold);border-color:var(--gold);color:#0a0a0b}
.wiz-body{padding:26px}
.wiz-grid{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-bottom:14px}
@media(max-width:640px){.wiz-grid{grid-template-columns:1fr}}
.wiz-body textarea{
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:12px;font:inherit;font-size:15px;width:100%;resize:vertical;
}
.wiz-body textarea:focus{outline:none;border-color:var(--gold-line)}
.field.check{flex-direction:row;align-items:center;gap:10px;padding-top:22px}
.field.check input{width:18px;height:18px;accent-color:var(--gold);flex:none}
.field.check span{font-size:14.5px;color:var(--text);text-transform:none;letter-spacing:0}
.wiz-nav{display:flex;gap:12px;padding:0 26px 26px;align-items:center}
.wiz-nav .btn:last-child{margin-inline-start:auto}
.wiz-err{margin:0 26px 14px;color:#ff8f85;font-size:14px}
.notice{
  margin:4px 0 16px;padding:12px 14px;border-radius:10px;font-size:14px;
  background:rgba(210,153,34,.08);border:1px solid rgba(210,153,34,.3);color:#e5cf9a;
}
/* Online confirmation unavailable: booking.js fills the empty role="alert" #wiz-offline region and
   adds .is-offline when the anonymous sign-in is refused. The notice sits at the top of the form;
   at step 3 the WhatsApp link becomes the primary button (Confirm is hidden). */
.wiz-offline .notice{margin:20px 26px 0}
.wiz-offline .notice a{color:var(--gold);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.wiz.is-offline #b-wa{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:22px}
.wiz-cars .car{cursor:pointer;border-width:1px}
.wiz-cars .car.is-sel{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-faint)}
.wiz-cars .rates dd{font-size:22px}
.summary{margin:0;display:grid;gap:0}
.summary>div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line)}
.summary dt{color:var(--muted);font-size:13.5px}
.summary dd{margin:0;text-align:end;font-weight:500}
.summary-total dd{font-size:26px;font-weight:650;color:var(--gold)}
.wiz-done{padding:36px 26px 40px;text-align:center;scroll-margin-top:88px}
.wiz-done h2{font-size:42px;color:var(--gold);margin-bottom:.2em}
.wiz-done .hero-cta{justify-content:center;margin-top:22px}

/* ---------- address autocomplete ---------- */
.ac-wrap{position:relative}
.ac-list{
  position:absolute;top:100%;left:0;right:0;z-index:30;margin-top:6px;
  background:var(--panel-2);border:1px solid var(--gold-line);border-radius:10px;
  overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.6);
}
.ac-item{
  display:block;width:100%;text-align:start;background:none;border:0;color:var(--text);
  padding:11px 14px;cursor:pointer;font:inherit;border-bottom:1px solid var(--line);
}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item:focus{background:rgba(247,198,0,.08);outline:none}
.ac-item strong{display:block;font-size:14.5px;font-weight:500}
.ac-item span{display:block;font-size:12.5px;color:var(--muted)}
.is-disabled{opacity:.45;pointer-events:none}

/* ---------- calculator ---------- */
.calc{margin:32px 0}
.calc-out{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);min-height:60px}
.calc-route{font-size:17px;margin-bottom:16px}
.calc .tariff td:nth-child(3){color:var(--gold);font-weight:650;font-size:17px}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  cursor:pointer;padding:20px 0;padding-inline-end:40px;position:relative;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h2{font-size:17.5px;margin:0;font-weight:500;display:inline}
.faq-item summary::after{
  content:"";position:absolute;inset-inline-end:6px;top:26px;width:9px;height:9px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .18s;
}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-item[open] summary h2{color:var(--gold)}
.faq-item p{margin:0 0 22px;color:var(--muted);max-width:76ch;font-size:15.5px}

/* ---------- tracking ---------- */
.track-out{margin-top:22px}
.track-card h2{font-size:22px;margin-bottom:.3em}
.track-driver{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:20px;padding-top:20px;border-top:1px solid var(--line);
}
.track-driver .btn{margin-inline-start:auto}