/* ══════════════════════════════════════════════════════════════════
   TaxiVast — de boekingspagina (/boeken/) en het zoekblok op de
   homepage. Gebruikt dezelfde tokens als site.css; laad dat eerst.
   ══════════════════════════════════════════════════════════════════ */

/* ── adresveld met suggesties ────────────────────────────────────── */
.adresveld{ position:relative; }
.adresveld input.bezig{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 109 9' fill='none' stroke='%23A8762E' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.adreslijst{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 6px);
  list-style:none; margin:0; padding:6px;
  background:var(--paper); border:1px solid var(--line-strong);
  border-radius:var(--r-m); box-shadow:var(--sh-3);
  max-height:288px; overflow-y:auto;
}
.adreslijst li{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:11px 13px; border-radius:9px; cursor:pointer;
  font-size:.95rem; line-height:1.35;
}
.adreslijst li.aan, .adreslijst li:hover{ background:var(--cream); }
.adreslijst li.is-plek .adres-naam::before{
  content:""; display:inline-block; width:14px; height:14px; margin-right:8px;
  vertical-align:-2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 10-14 0c0 5.5 7 11 7 11z' fill='none' stroke='%23A8762E' stroke-width='2'/%3E%3C/svg%3E") center/14px no-repeat;
}
.adres-naam{ font-weight:500; }
.adres-bij{ font-size:.82rem; color:var(--ink-mute); }

/* ── zoekblok (homepage-hero én stap 01) ─────────────────────────── */
.zoekkaart{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-l); padding:26px; box-shadow:var(--sh-2);
  margin-top:28px;
}
.rit-keuze button{
  flex:1; border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:.92rem; font-weight:700; color:var(--ink-soft);
  padding:11px 8px; border-radius:9px;
  transition:background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.rit-keuze button.aan{ background:var(--paper); color:var(--ink); box-shadow:var(--sh-1); }
@media (max-width:460px){
  .rit-keuze button{ font-size:.82rem; padding:11px 4px; white-space:nowrap; }
}
.rit-keuze button:focus-visible{ outline:3px solid var(--brass-mid); outline-offset:2px; }

.zoekvelden{
  margin-top:18px; display:grid; gap:14px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
.zv-breed{ grid-column:1 / -1; }
.zv label{
  display:block; font-size:.74rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px;
}
.zv input, .zv select{
  width:100%; padding:13px 14px; border-radius:var(--r-s); min-height:48px;
  border:1px solid var(--line-strong); background:#FDFCFA; color:var(--ink);
  font:inherit; font-size:.97rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.zv input:hover, .zv select:hover{ border-color:rgba(20,31,54,.28); }
.zv input:focus, .zv select:focus{
  background:#fff; border-color:var(--brass-mid);
  box-shadow:0 0 0 3px rgba(220,165,66,.18); outline:none;
}
.zv input.gekozen{
  border-color:rgba(168,118,46,.45); background:#FFFDF8;
}
.zv select{
  appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235B6880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}
.zv input::placeholder{ color:#A3ACBC; }
.zv-hint{ margin-top:8px; font-size:.84rem; color:var(--ink-soft); }
.zoekknop{ width:100%; margin-top:18px; border:0; cursor:pointer; font:inherit; text-align:center; }
.zoekknop:disabled{ opacity:.6; cursor:progress; }
@media (max-width:600px){ .zoekvelden{ grid-template-columns:1fr; } }

/* ── de pagina zelf ──────────────────────────────────────────────── */
.boeking{ padding:44px 0 96px; background:var(--cream); }
/* de stapvakken zijn <section>, maar niet de brede secties uit site.css */
.boek-hoofd section{ padding:0; }
.boeking h1{ font-size:clamp(1.8rem,3.1vw,2.5rem); margin-top:4px; }
.boeking .intro{ margin-top:14px; }

/* stappenbalk — vier bollen op een rail die zich vult */
.stappen-balk{
  list-style:none; margin:0 0 44px; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  position:relative;
}
/* de rail loopt achter de bollen door */
.stappen-balk::before,
.stappen-balk::after{
  content:""; position:absolute; top:27px; height:3px; border-radius:3px;
  left:12.5%; right:12.5%;
}
.stappen-balk::before{ background:var(--cream-deep); }
.stappen-balk::after{
  right:auto; width:calc((100% - 25%) * var(--voortgang, 0%) / 100%);
  background:var(--goud);
  transition:width .55s var(--ease);
}
.stappen-balk li{ display:flex; justify-content:center; }
.stappen-balk button{
  position:relative; z-index:2;
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  display:grid; justify-items:center; gap:12px; text-align:center; width:100%;
}
.stappen-balk button:disabled{ cursor:default; }
.sb-bol{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); border:3px solid var(--cream-deep); color:var(--ink-mute);
  box-shadow:0 2px 8px rgba(16,27,49,.05);
  transition:background .35s var(--ease), border-color .35s var(--ease),
             color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.sb-bol svg{ width:22px; height:22px; grid-area:1/1; }
.sb-check{ opacity:0; transform:scale(.6); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.sb-tekst{ display:grid; gap:2px; }
.sb-nr{
  font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); transition:color .35s var(--ease);
}
.sb-naam{
  font-family:'Fraunces',Georgia,serif; font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:1.05rem; font-weight:600; letter-spacing:-.01em; color:var(--ink-soft);
  transition:color .35s var(--ease);
}
/* afgeronde stap */
.stappen-balk button.klaar .sb-bol{
  background:var(--goud); border-color:transparent; color:#20160A;
  box-shadow:0 4px 14px rgba(176,122,34,.30);
}
.stappen-balk button.klaar .sb-ico{ opacity:0; }
.stappen-balk button.klaar .sb-check{ opacity:1; transform:scale(1); }
.stappen-balk button.klaar .sb-naam{ color:var(--ink); }
.stappen-balk button.klaar:hover .sb-bol{ transform:translateY(-2px); }
/* huidige stap */
.stappen-balk button.aan .sb-bol{
  background:var(--night); border-color:rgba(233,192,122,.45); color:#fff;
  box-shadow:0 0 0 6px rgba(220,165,66,.14), 0 8px 22px rgba(11,18,32,.22);
}
.stappen-balk button.aan .sb-nr{ color:var(--brass); }
.stappen-balk button.aan .sb-naam{ color:var(--ink); }
@media (max-width:760px){
  .stappen-balk{ margin-bottom:32px; }
  .stappen-balk::before, .stappen-balk::after{ top:22px; height:2px; }
  .sb-bol{ width:46px; height:46px; border-width:2px; }
  .sb-bol svg{ width:18px; height:18px; }
  .sb-nr{ display:none; }
  .sb-naam{ font-size:.84rem; }
  .stappen-balk button{ gap:9px; }
}

/* twee kolommen: stappen links, overzicht rechts */
.boek-grid{ display:grid; grid-template-columns:minmax(0,1fr) 352px; gap:36px; align-items:start; }
@media (max-width:1040px){ .boek-grid{ grid-template-columns:1fr; } }

/* ── de auto, bovenaan stap 2 ────────────────────────────────────── */
.autohero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 268px;
  grid-template-rows:auto auto;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--sh-2); overflow:hidden; margin-bottom:44px;
}
/* De autofoto staat op zuiver wit; het vlak eronder ook, anders zie je
   een rechthoek om de foto heen. */
.ah-beeld{ grid-column:1 / -1; margin:0; position:relative; background:#fff; height:clamp(220px, 26vw, 320px); }
/* uitgeknipte studiofoto: altijd de hele auto laten zien, niet bijsnijden */
.ah-beeld img{ width:100%; height:100%; object-fit:contain; object-position:center; }
.ah-beeld::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 -1px 0 var(--line);
}
.ah-tekst{ grid-column:1; grid-row:2; padding:26px 28px 28px; }
.ah-tekst h2{ font-size:1.6rem; margin-top:2px; }
.ah-model{ margin-top:4px; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); font-weight:700; }
.ah-cijfers{ margin-top:18px; display:flex; gap:20px; list-style:none; flex-wrap:wrap; }
.ah-cijfers li{ display:flex; align-items:center; gap:8px; font-size:.93rem; font-weight:500; }
.ah-cijfers svg{ width:19px; height:19px; color:var(--ink-mute); flex:none; }
.ah-inbegrepen{ margin-top:18px; display:grid; gap:8px; list-style:none; }
.ah-inbegrepen li{ position:relative; padding-left:25px; font-size:.9rem; color:var(--ink-soft); }
.ah-inbegrepen li::before{
  content:""; position:absolute; left:0; top:4px; width:15px; height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.4 3.4 7.6-8' fill='none' stroke='%23A8762E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
}
.ah-prijs{
  grid-column:2; grid-row:2; padding:26px 24px; border-left:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  background:linear-gradient(180deg,#FFFDF9 0%,#FBF6EC 100%);
}
.ah-prijs-lbl{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); font-weight:700; }
.ah-prijs strong{
  font-family:'Fraunces',Georgia,serif; font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:2.6rem; font-weight:600; letter-spacing:-.03em; line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.ah-btw{ font-size:.79rem; color:var(--ink-soft); line-height:1.4; }
.ah-route{ font-size:.85rem; color:var(--ink-mute); line-height:1.45; }
.ah-wijzig{ margin-top:10px; padding:10px 18px; font-size:.86rem; }
@media (max-width:760px){
  .autohero{ grid-template-columns:1fr; }
  .ah-tekst{ grid-column:1; grid-row:2; }
  .ah-prijs{ grid-column:1; grid-row:3; border-left:0; border-top:1px solid var(--line); }
}

/* ── extra's ─────────────────────────────────────────────────────── */
.extralijst{ margin-top:30px; display:grid; gap:12px; }
.extra-rij{
  display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:16px; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m);
  padding:18px 20px; cursor:pointer; box-shadow:var(--sh-1);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.extra-rij:hover{ border-color:rgba(168,118,46,.30); }
.extra-rij input{ position:absolute; opacity:0; width:0; height:0; }
.extra-vink{
  width:24px; height:24px; border-radius:7px; border:1px solid var(--line-strong);
  background:#FDFCFA; display:block;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.extra-rij input:checked ~ .extra-vink{
  background:var(--night)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.4 3.4 7.6-8' fill='none' stroke='%23E9C07A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  border-color:var(--night);
}
.extra-rij input:focus-visible ~ .extra-vink{ outline:3px solid var(--brass-mid); outline-offset:2px; }
.extra-rij input:checked ~ .extra-tekst b{ color:var(--ink); }
.extra-tekst b{ display:block; font-size:1rem; font-weight:700; }
.extra-tekst span{ display:block; margin-top:3px; font-size:.89rem; color:var(--ink-soft); }
.extra-prijs{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ── rekening ────────────────────────────────────────────────────── */
.rekening{
  margin-top:30px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-m); padding:8px 22px; box-shadow:var(--sh-1);
}
.rk-rij{
  display:flex; justify-content:space-between; gap:18px;
  padding:15px 0; border-bottom:1px solid var(--line); font-size:.97rem;
}
.rk-rij span:last-child{ font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600; }
.rk-extra span:first-child{ color:var(--ink-soft); }
.rk-tussen{ color:var(--ink-soft); font-size:.9rem; }
.rk-tussen span:last-child{ font-weight:500; }
.rk-totaal{
  border-bottom:0; padding:19px 0; font-weight:700;
  font-size:1.05rem; color:var(--ink);
}
.rk-totaal span:last-child{
  font-family:'Fraunces',Georgia,serif; font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:1.65rem; font-weight:600; letter-spacing:-.025em;
}

/* ── betaalkeuze ─────────────────────────────────────────────────── */
.betaal-kop{ margin-top:44px; font-size:1.35rem; }
.betaalkeuze{ margin-top:18px; display:grid; gap:12px; }
.betaalkeuze label{ cursor:pointer; }
.betaalkeuze input{ position:absolute; opacity:0; width:0; height:0; }
.bk-vak{
  display:block; background:var(--paper); border:1px solid var(--line-strong);
  border-radius:var(--r-m); padding:18px 20px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.bk-vak b{ display:block; font-size:1rem; }
.bk-vak span{ display:block; margin-top:4px; font-size:.89rem; color:var(--ink-soft); }
.betaalkeuze input:checked + .bk-vak{
  border-color:var(--brass-mid); background:#FFFDF8; box-shadow:var(--sh-1);
}
.betaalkeuze input:focus-visible + .bk-vak{ outline:3px solid var(--brass-mid); outline-offset:2px; }

/* ── knoppen onder een stap ──────────────────────────────────────── */
.stap-knoppen{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.stap-knoppen .knop-hoofd{ border:0; cursor:pointer; font:inherit; font-weight:700; }
.knop-terug{
  background:transparent; border:1px solid var(--line-strong); color:var(--ink);
  font:inherit; font-weight:600; padding:15px 24px; border-radius:99px; cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.knop-terug:hover{ border-color:var(--ink); background:var(--paper); }
.knop-wa{ margin-top:12px; }
.betaal-voet{ margin-top:22px; font-size:.9rem; color:var(--ink-soft); }
.betaal-voet a{ color:var(--brass); font-weight:700; text-decoration:none; }

/* ── ritoverzicht ────────────────────────────────────────────────── */
.ritoverzicht{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  padding:26px; box-shadow:var(--sh-2); position:sticky; top:100px;
}
.ritoverzicht h2{ font-size:1.3rem; }
.ov-soort{
  display:inline-block; margin-top:10px; padding:5px 13px; border-radius:99px;
  background:var(--amber-soft); color:var(--brass);
  font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.ov-route{ margin-top:22px; list-style:none; display:grid; gap:2px; }
.ov-punt{ display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:start; font-size:.95rem; line-height:1.4; }
.ov-punt + .ov-punt{ margin-top:18px; }
.ov-punt:first-child{ position:relative; }
.ov-punt:first-child::after{
  content:""; position:absolute; left:14px; top:32px; bottom:-20px; width:2px;
  background:repeating-linear-gradient(180deg, var(--brass-mid) 0 4px, transparent 4px 9px);
}
.ov-bol{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--night); color:var(--brass-lite);
  font-size:.82rem; font-weight:700;
}
.ov-bol.ov-klok{ background:var(--amber-soft); color:var(--brass); }
.ov-regels{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); display:grid; gap:11px; }
.ov-regels > div{ display:flex; justify-content:space-between; gap:16px; font-size:.9rem; }
.ov-regels dt{ color:var(--ink-mute); }
.ov-regels dd{ text-align:right; font-weight:500; }
.ov-prijs{
  margin-top:24px; padding:18px 20px; border-radius:var(--r-m);
  background:var(--navy); color:#fff;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.ov-prijs span{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:700; }
.ov-prijs strong{
  font-family:'Fraunces',Georgia,serif; font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:1.9rem; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.ov-btw{ margin-top:14px; font-size:.82rem; color:var(--ink-soft); line-height:1.5; }
@media (max-width:1040px){
  .ritoverzicht{ position:static; margin-top:12px; }
}

/* korte toelichting onder de prijskaart op een plaatspagina */
.kop-noot{ margin-top:20px; font-size:.92rem; color:rgba(255,255,255,.66); max-width:44rem; }

.zoek-voet{ margin-top:14px; font-size:.84rem; color:var(--ink-soft); text-align:center; }

/* ── gidsen (/gids/) ─────────────────────────────────────────────── */
.gids-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.gids-kaart{
  display:block; text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  padding:30px 28px; box-shadow:var(--sh-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.gids-kaart:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:rgba(168,118,46,.3); }
.gids-kaart h2{ font-size:1.3rem; max-width:none; }
.gids-kaart p{ margin-top:10px; font-size:.95rem; color:var(--ink-soft); }
.gids-lees{
  display:inline-block; margin-top:16px; font-size:.82rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brass);
}
.gids-lees::after{ content:" →"; }
@media (max-width:760px){ .gids-grid{ grid-template-columns:1fr; } }

.artikel{ background:var(--cream); padding:64px 0 88px; }
.artikel-body{ max-width:46rem; }
.artikel-body h2{
  font-size:clamp(1.4rem,2.4vw,1.85rem); margin-top:48px; max-width:26ch;
}
.artikel-body p{ margin-top:16px; font-size:1.05rem; line-height:1.75; color:var(--ink-soft); }
.artikel-body strong{ color:var(--ink); font-weight:700; }
.artikel-intro{ font-size:1.15rem !important; color:var(--ink) !important; }
.artikel-body .tabel-scroll{ margin-top:26px; }
.artikel-body .faq{ margin-top:8px; }
.artikel-body .plaatsen.links{ margin-top:18px; }
.artikel-datum{ margin-top:36px; font-size:.85rem !important; color:var(--ink-mute) !important; }
.artikel-cta{
  margin-top:48px; padding:26px 28px; border-radius:var(--r-l);
  background:linear-gradient(160deg,#101B31 0%,#0B1220 100%); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.artikel-cta b{ font-size:1.15rem; }
.artikel-cta p{ margin-top:6px !important; color:rgba(255,255,255,.7) !important; font-size:.95rem !important; }
.artikel-cta .knop-hoofd{ white-space:nowrap; }

/* akkoordregel vlak boven de bestelknop */
.akkoord{
  margin-top:24px; font-size:.85rem; line-height:1.55; color:var(--ink-soft);
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-s);
  padding:14px 16px;
}
.akkoord a{ color:var(--brass); font-weight:700; }

/* taalkiezer in de kopbalk */
.taalkiezer{
  display:flex; gap:2px; margin-left:18px; padding:3px;
  background:rgba(20,31,54,.07); border-radius:99px; flex:none;
}
header.over-hero .taalkiezer, header.gescrolld .taalkiezer{ background:var(--cream-deep); }
.taalkiezer button{
  border:0; background:transparent; cursor:pointer; font:inherit;
  font-size:.76rem; font-weight:700; letter-spacing:.06em;
  padding:6px 11px; border-radius:99px; color:var(--ink-soft);
  transition:background .25s var(--ease), color .25s var(--ease);
}
header.over-hero .taalkiezer button, header.gescrolld .taalkiezer button{ color:var(--ink-soft); }
.taalkiezer button.aan{ background:var(--paper); color:var(--ink); box-shadow:var(--sh-1); }
header.over-hero .taalkiezer button.aan, header.gescrolld .taalkiezer button.aan{ background:var(--paper); color:var(--ink); box-shadow:var(--sh-1); }
.taalkiezer button:focus-visible{ outline:3px solid var(--brass-mid); outline-offset:2px; }
@media (max-width:900px){ .taalkiezer{ margin-left:auto; margin-right:10px; } }

/* secties die maar in één taal bestaan */
.alleen-en{ display:none; }
body.taal-en .alleen-en{ display:block; }
body.taal-en .alleen-nl{ display:none; }
.alleen-en .dienst-grid, .alleen-en .stap-grid{ margin-top:32px; }
.alleen-en .stap-grid article::before{ content:attr(data-nr); }

/* ══════════════════════════════════════════════════════════════════
   Bevestigingspagina

   Eén kaart, één boodschap. De vraag die iemand hier heeft is klein en
   scherp: "is het gelukt, en wat nu?" Daarom staat het boekingsnummer
   groot en apart, en niet weggestopt in een lijst.
   ══════════════════════════════════════════════════════════════════ */
.bevestiging{ padding:56px 0 96px; background:var(--cream); }
.bevestiging .wrap{ max-width:720px; }

/* `hidden` moet het winnen van een display-regel, anders blijft de lader
   staan terwijl de kaart er al is. */
.bevestiging [hidden]{ display:none !important; }
.bev-laden{
  display:flex; align-items:center; justify-content:center; gap:12px;
  min-height:220px; color:var(--ink-soft);
}
.bev-spin{
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--line-strong); border-top-color:var(--brass);
  animation:bev-draai .8s linear infinite;
}
@keyframes bev-draai{ to{ transform:rotate(360deg); } }

.bev-kaart{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--sh-2); overflow:hidden;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.bev-kaart.bev-in{ opacity:1; transform:none; }
html:not(.js) .bev-kaart{ opacity:1; transform:none; }

.bev-kop{
  padding:40px 36px 32px; text-align:center;
  background:linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
  border-bottom:1px solid var(--line);
}
.bev-kop .eyebrow{ justify-content:center; }
.bev-kop h1{ font-size:clamp(1.65rem,3vw,2.2rem); }
.bev-kop .intro{ margin:14px auto 0; max-width:46ch; color:var(--ink-soft); }

.bev-vink{
  display:grid; place-items:center; width:62px; height:62px; margin:0 auto 20px;
  border-radius:50%; background:var(--cream-deep); color:var(--brass);
  transform:scale(.7); opacity:0;
  transition:transform .55s var(--ease) .12s, opacity .35s var(--ease) .12s;
}
.bev-kaart.bev-in .bev-vink{ transform:none; opacity:1; }
.bev-kaart.is-betaald .bev-vink{ background:var(--goud); color:#20160A; box-shadow:var(--sh-1); }
.bev-vink svg{ width:30px; height:30px; }

/* het nummer: het enige dat iemand overschrijft of voorleest */
.bev-nummer{
  padding:26px 36px; text-align:center;
  background:var(--amber-soft); border-bottom:1px solid var(--line);
}
.bev-nummer-label{
  font-size:.73rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass);
}
.bev-nummer-code{
  margin-top:8px;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:clamp(1.2rem,3.4vw,1.55rem); font-weight:700; letter-spacing:.04em;
  color:var(--ink); word-break:break-all;
}
.bev-kopieer{
  margin-top:12px; border:1px solid var(--line-strong); background:var(--paper);
  font:inherit; font-size:.85rem; font-weight:600; color:var(--ink);
  padding:8px 18px; border-radius:99px; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.bev-kopieer:hover{ border-color:var(--ink); }
.bev-kopieer:focus-visible{ outline:3px solid var(--brass-mid); outline-offset:2px; }
.bev-nummer-hint{ margin-top:10px; font-size:.84rem; color:var(--ink-soft); }

.bev-vak{ padding:30px 36px; border-bottom:1px solid var(--line); }
.bev-vak h2{
  font-family:'Archivo',sans-serif;
  font-size:.73rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); margin-bottom:16px;
  /* balance splitst dit korte kopje onnodig over twee regels */
  text-wrap:normal;
}

/* Betaald, maar we konden het niet bij Stripe navragen. Dan niet doen
   alsof — wel zeggen wat de klant nu moet doen. */
.bev-waarschuwing{
  margin:0 36px 26px; padding:14px 16px;
  background:var(--cream); border:1px solid var(--line-strong);
  border-left:3px solid var(--brass); border-radius:var(--r-s);
  font-size:.9rem; line-height:1.6; color:var(--ink-soft);
}
.bev-waarschuwing a{ color:var(--brass); font-weight:700; text-decoration:none; }
@media (max-width:640px){ .bev-waarschuwing{ margin-left:22px; margin-right:22px; } }

.bev-lijst{ display:grid; gap:0; }
.bev-rij{
  display:grid; grid-template-columns:minmax(120px,34%) 1fr; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.bev-rij:last-child{ border-bottom:0; padding-bottom:0; }
.bev-rij dt{ color:var(--ink-soft); font-size:.94rem; }
.bev-rij dd{ font-weight:600; }

.bev-stappen{ list-style:none; display:grid; gap:14px; counter-reset:bev; }
.bev-stappen li{
  counter-increment:bev; position:relative; padding-left:38px; color:var(--ink);
}
.bev-stappen li::before{
  content:counter(bev);
  position:absolute; left:0; top:-1px;
  width:25px; height:25px; display:grid; place-items:center;
  border-radius:50%; background:var(--cream-deep); color:var(--brass);
  font-size:.82rem; font-weight:700;
}

.bev-acties{ padding:30px 36px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.bev-acties .knop-hoofd{ text-decoration:none; text-align:center; }
.bev-acties .knop-terug{ text-decoration:none; display:inline-block; }
.bev-wa{ background:var(--wa); color:#04331A; }
.bev-wa:hover{ filter:brightness(1.05); }

.bev-voet{
  padding:0 36px 32px; font-size:.88rem; line-height:1.6; color:var(--ink-soft);
}
.bev-voet a{ color:var(--brass); font-weight:700; text-decoration:none; }
.bev-voet a:hover{ text-decoration:underline; }

@media (max-width:640px){
  .bevestiging{ padding:32px 0 72px; }
  .bev-kop{ padding:32px 22px 26px; }
  .bev-nummer, .bev-vak, .bev-acties{ padding-left:22px; padding-right:22px; }
  .bev-voet{ padding:0 22px 26px; }
  .bev-rij{ grid-template-columns:1fr; gap:2px; }
  .bev-acties .knop-hoofd, .bev-acties .knop-terug{ width:100%; }
}

/* Uitprinten of als PDF bewaren: dan hoeft er geen menu of knop mee. */
@media print{
  header, footer, .belbalk, .bev-acties, .bev-kopieer{ display:none !important; }
  body{ background:#fff; }
  .bevestiging{ padding:0; }
  .bev-kaart{ box-shadow:none; border-color:#ccc; opacity:1; transform:none; }
}

/* Waarschuwing die echt om actie vraagt, niet alleen om aandacht. */
.bev-waarschuwing.bev-let-op{
  background:var(--amber-soft); border-color:rgba(168,118,46,.30);
  border-left-color:var(--brass); color:var(--ink);
}
.bev-kaart.is-mislukt .bev-vink{ background:var(--amber-soft); color:var(--brass); }
/* Eén pictogram tegelijk: een vinkje als het goed ging, een uitroepteken
   als de rit juist NIET is opgeslagen. Een vinkje boven "nog niet binnen"
   zegt twee dingen tegelijk. */
.bev-vink .bev-attentie{ display:none; }
.bev-kaart.is-mislukt .bev-vink .bev-ok{ display:none; }
.bev-kaart.is-mislukt .bev-vink .bev-attentie{ display:block; }