/* Taxi Maxx · boekpagina */
.boek-kop { background: var(--nacht); color: var(--wit); padding: 44px 0 34px }
.boek-kop .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap }
.boek-kop h1 { font-size: clamp(34px, 4vw, 52px) }
.voortgang { list-style: none; display: flex; gap: 6px; flex-wrap: wrap }
.voortgang li { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; font-weight: 800; font-size: 14.5px; color: var(--grijs-l); border: 1px solid var(--lijn-d) }
.voortgang span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--nacht-3); font-size: 13px }
.voortgang li.actief { color: var(--nacht); background: var(--geel); border-color: var(--geel) }
.voortgang li.actief span { background: var(--nacht); color: var(--geel) }
.voortgang li.klaar { color: var(--wit) }
.voortgang li.klaar span { background: var(--ok); color: var(--wit) }

.boek-sectie { background: var(--mist); padding: 40px 0 96px }
.boek-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start }
#boekform { background: var(--wit); border-radius: var(--r-l); padding: clamp(22px, 3vw, 40px); border: 1px solid var(--lijn) }
.stap { border: 0; display: grid; gap: 14px }
.stap[hidden] { display: none }
.stap-kop { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 6px }
.stap-kop h2 { font-size: clamp(26px, 2.6vw, 36px) }
.stap h3 { font-size: 19px; margin: 6px 0 2px }
.rij-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px }
.rij-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px }
.stap .veld { background: var(--mist) }
.stap .veld i, .formulier .veld i { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0 }
.stap .veld textarea { width: 100%; border: 0; background: transparent; outline: none; font-weight: 600; resize: vertical; padding-top: 4px }
.hint { font-size: 14.5px; color: var(--grijs); font-weight: 600; min-height: 1px }
.hint:empty { display: none }
.retour-blok { display: grid; gap: 10px; padding: 18px; border: 2px dashed var(--lijn); border-radius: 16px }
.retour-blok[hidden] { display: none }

.richting { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.richting input, .auto input, .betaal input { position: absolute; opacity: 0; pointer-events: none }
.richting span { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border: 2px solid var(--lijn); border-radius: 14px; font-weight: 800; cursor: pointer; transition: border-color .2s, background .2s }
.richting svg { width: 20px; height: 20px }
.richting input:checked + span { border-color: var(--nacht); background: var(--nacht); color: var(--wit) }
.richting input:checked + span svg { color: var(--geel) }
.richting input:focus-visible + span, .auto input:focus-visible + .auto-in, .betaal input:focus-visible + span { outline: 3px solid var(--geel); outline-offset: 2px }

.auto-keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.auto { position: relative; cursor: pointer }
.auto-in { display: flex; flex-direction: column; border: 2px solid var(--lijn); border-radius: 18px; overflow: hidden; transition: border-color .2s, box-shadow .2s; height: 100% }
.auto-in img { aspect-ratio: 16 / 9; object-fit: cover; width: 100% }
.auto-tekst { padding: 16px 18px; display: grid; gap: 6px }
.auto-tekst b { font-family: var(--display); font-stretch: 112%; font-size: 22px }
.specs-k { display: flex; gap: 6px; align-items: center; color: var(--grijs); font-weight: 700; font-size: 14.5px }
.specs-k svg { width: 16px; height: 16px }
.auto-prijs { font-family: var(--display); font-stretch: 110%; font-weight: 800; font-size: 26px }
.auto input:checked + .auto-in { border-color: var(--nacht); box-shadow: 0 0 0 3px var(--geel) }
.auto.uit { opacity: .45; cursor: not-allowed }
.extra { display: grid; gap: 10px; margin-top: 4px }
.vink { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; cursor: pointer }
.vink input { width: 20px; height: 20px; accent-color: var(--nacht); margin-top: 3px; flex: none }
.vink i { font-style: normal; color: var(--ok); font-weight: 800 }

.betaal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.betaal label { position: relative; cursor: pointer }
.betaal span { display: block; padding: 14px 16px; border: 2px solid var(--lijn); border-radius: 14px; height: 100% }
.betaal b { display: block }
.betaal small { color: var(--grijs); font-weight: 600; font-size: 14px }
.betaal input:checked + span { border-color: var(--nacht); box-shadow: 0 0 0 3px var(--geel) }

.stap-knoppen { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--lijn) }
.stap-knoppen .knop.lijn { color: var(--ink) }
.stap-knoppen .knop.lijn:hover { background: var(--mist) }

.klaar { text-align: left; display: grid; gap: 16px; padding: 12px 0; outline: none }
.klaar-icoon svg { width: 64px; height: 64px; background: var(--ok); color: var(--wit); border-radius: 50%; padding: 14px }
.klaar h2 { font-size: clamp(30px, 3.4vw, 46px) }
.klaar-acties { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px }
.klaar-acties .knop.lijn { color: var(--ink) }

/* samenvatting */
.samenvatting { position: sticky; top: 112px }
.sv-kaart { background: var(--nacht); color: var(--wit); border-radius: var(--r-l); padding: 26px; display: grid; gap: 20px }
.sv-route { display: grid; grid-template-columns: 14px 1fr; column-gap: 14px; position: relative }
.sv-punt { grid-column: 2; position: relative; padding: 2px 0 }
.sv-punt::before { content: ""; position: absolute; left: -24px; top: 8px; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--geel); background: var(--nacht) }
.sv-punt:last-child::before { background: var(--geel) }
.sv-lijn { grid-column: 2; height: 22px; position: relative }
.sv-lijn::before { content: ""; position: absolute; left: -19px; top: -6px; bottom: -6px; border-left: 2px dashed #3A4D6E }
.sv-punt small { display: block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--grijs-l); font-weight: 800 }
.sv-punt b { font-size: 16.5px; line-height: 1.3; display: block; overflow-wrap: anywhere }
.sv-lijst { display: grid; gap: 0; border-top: 1px solid var(--lijn-d) }
.sv-lijst div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--lijn-d); font-size: 14.5px }
.sv-lijst dt { color: var(--grijs-l); font-weight: 700 }
.sv-lijst dd { font-weight: 700; text-align: right }
.sv-totaal { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px }
.sv-totaal span { font-weight: 800 }
.sv-totaal small { display: block; color: var(--grijs-l); font-weight: 600; font-size: 13px }
.sv-totaal b { font-family: var(--display); font-stretch: 112%; font-weight: 900; font-size: 44px; line-height: 1; color: var(--geel) }
.sv-punten { list-style: none; display: grid; gap: 8px; font-size: 14px; color: #D2D9E4; font-weight: 600 }
.sv-punten li { display: flex; gap: 8px; align-items: center }
.sv-punten svg { width: 16px; height: 16px; color: var(--geel); flex: none }
.sv-bel { text-align: center; margin-top: 14px; font-weight: 600; color: var(--grijs) }
.sv-bel a { color: var(--ink); font-weight: 800 }
body.boek-klaar .samenvatting .sv-punten { display: none }

@media (max-width: 1020px) {
  .boek-grid { grid-template-columns: 1fr }
  .samenvatting { position: static; order: -1 }
  .sv-lijst, .sv-punten { display: none }
  .sv-kaart { gap: 14px; padding: 18px 20px }
}
@media (max-width: 720px) {
  .rij-2, .rij-3, .richting, .auto-keuze, .betaal { grid-template-columns: 1fr }
  .voortgang li { padding: 6px 12px 6px 6px; font-size: 13px }
  .voortgang li:not(.actief) { font-size: 0; padding: 6px; gap: 0 }
  .stap-knoppen { flex-direction: column-reverse }
  .stap-knoppen .knop { width: 100% }
  .sv-totaal b { font-size: 34px }
}