/* ==========================================================================
   boeker.css — het aanvraagformulier van De IJsfee
   --------------------------------------------------------------------------
   Hoort bij assets/boeker.js en api/boeking.php.

   WAAROM DIT EEN APART BESTAND IS EN NIET IN assets/tr.css STAAT
   Contract paragraaf 2 zegt: een stylesheet. Dat geldt voor de PAGINA'S, en
   daar houdt dit zich aan: het boekformulier voegt niets toe aan de opmaak van
   een pagina. Dit bestand hoort bij een los onderdeel dat maar op een deel van
   de pagina's staat, heeft zijn eigen eigenaar (contract paragraaf 8:
   "Boekformulier: assets/boeker.*"), en wordt alleen geladen waar het
   formulier staat. Zou het in tr.css staan, dan betaalde elke plaatspagina
   zonder formulier de 11 kB mee, en zou elke wijziging hieraan een bestand
   raken waar vier mensen tegelijk in werken.

   WAT HET NIET DOET: eigen kleuren, eigen lettergroottes, eigen knopvormen.
   Alles hieronder gebruikt de tokens uit tr.css (--merk, --accent, --veld,
   --rand-sterk, --s1..--s9, --r, --duur-1, --soepel). Er staat geen enkele
   hexwaarde in dit bestand die niet uit het contract komt, met een uitzondering
   die hieronder bij .ijs-bk-sluit staat uitgelegd.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. de kaart
   -------------------------------------------------------------------------- */

.ijs-bk{
  background:var(--vlak);color:var(--inkt);
  border:1px solid var(--rand);border-radius:var(--r-groot);
  padding:clamp(18px,2.2vw,26px);
  box-shadow:0 22px 60px rgba(4,12,28,.5);
  display:flex;flex-direction:column;gap:var(--s4);
  font-family:var(--font-tekst);font-size:var(--tekst-fs);
  container-type:inline-size;
  min-width:0;max-width:100%;
}
/* Buiten een donkere hero hoort een lichtere schaduw: de zware schaduw is er
   om de kaart van een foto los te trekken, en op wit ziet die er vies uit. */
.ijs-bk:not(.ijs-hero .ijs-bk):not(.ijs-bk-venster .ijs-bk){box-shadow:var(--schaduw-op)}

.ijs-bk *,.ijs-bk *::before,.ijs-bk *::after{box-sizing:border-box}
.ijs-bk p{margin:0}

/* --------------------------------------------------------------------------
   1. kop: titel links, stappen rechts, sluitknop uiterst rechts
   -------------------------------------------------------------------------- */

.ijs-bk-kop{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  justify-content:space-between}
.ijs-bk-titel{font-family:var(--font-kop);font-weight:800;
  font-size:var(--h4-fs);line-height:var(--h4-lh);color:var(--merk);margin:0}

/* de stappenbalk */
.ijs-bk-stappen{display:flex;align-items:center;gap:var(--s1);flex-wrap:wrap;
  list-style:none;margin:0;padding:0}
.ijs-bk-stap{display:inline-flex;align-items:center;gap:var(--s2);
  min-height:34px;padding:0 var(--s2) 0 var(--s1);border-radius:var(--r-pil);
  font-family:var(--font-kop);font-weight:700;font-size:.8125rem;line-height:1.2;
  color:var(--gedempt);background:transparent;border:0;
  white-space:nowrap;max-width:100%}
.ijs-bk-stap-nr{display:grid;place-items:center;width:26px;height:26px;flex:none;
  border-radius:50%;background:var(--zacht);color:var(--merk);
  font-family:var(--font-kop);font-weight:800;font-size:.8125rem;line-height:1}
.ijs-bk-stap-naam{overflow:hidden;text-overflow:ellipsis}

/* de huidige stap: donkerblauwe pil met een geel rondje, zoals in het ontwerp */
.ijs-bk-stap.is-nu{background:var(--merk-diep);color:#fff;padding-right:var(--s4)}
.ijs-bk-stap.is-nu .ijs-bk-stap-nr{background:var(--accent);color:var(--donker)}

/* een afgeronde stap: blijft klikbaar om terug te gaan */
button.ijs-bk-stap{cursor:pointer}
button.ijs-bk-stap:hover .ijs-bk-stap-nr{background:var(--accent-zacht)}
.ijs-bk-stap.is-klaar{color:var(--merk)}
.ijs-bk-stap.is-klaar .ijs-bk-stap-nr{background:var(--merk);color:#fff}
/* een overgeslagen stap wordt niet verborgen maar doorgestreept weergegeven:
   wie de volgorde kent, moet zien dat hij er nog is en waarom hij wegviel */
.ijs-bk-stap.is-over{opacity:.55}
.ijs-bk-stap.is-over .ijs-bk-stap-nr{background:var(--rand)}
.ijs-bk-stap-over{font-weight:400;font-size:.75rem}

/* --------------------------------------------------------------------------
   2. "Ik heb nu een taxi nodig"
   --------------------------------------------------------------------------
   Staat met opzet BOVEN het eerste veld. Wie binnen het uur weg moet, kan
   online niet boeken; die ontdekte dat eerder pas na stap 1. Nu is het de
   eerste regel die hij leest.
   -------------------------------------------------------------------------- */

.ijs-bk-spoed{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) var(--s4);border-radius:var(--r);
  background:var(--accent-zacht);border:1.5px solid var(--accent-rand);
  color:var(--donker)}
.ijs-bk-spoed-tekst{flex:1 1 220px;min-width:0}
.ijs-bk-spoed-titel{display:block;font-family:var(--font-kop);font-weight:800;
  font-size:.9375rem;line-height:1.3}
.ijs-bk-spoed p{font-size:var(--bijschrift-fs);line-height:1.45;margin-top:2px;
  color:var(--donker)}
.ijs-bk-spoed .ijs-bk-knop{flex:none}

/* --------------------------------------------------------------------------
   3. velden
   -------------------------------------------------------------------------- */

.ijs-bk-stapvlak{display:flex;flex-direction:column;gap:var(--s3)}
.ijs-bk-stapkop{font-family:var(--font-kop);font-weight:800;font-size:var(--h5-fs);
  line-height:var(--h5-lh);color:var(--inkt);margin:0}

.ijs-bk-rij{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--s3) var(--s3);align-items:start}
.ijs-bk-vak{grid-column:span 12;min-width:0}
.ijs-bk-vak[data-breedte="half"]{grid-column:span 6}
.ijs-bk-vak[data-breedte="derde"]{grid-column:span 4}
@container (max-width:460px){
  .ijs-bk-vak[data-breedte="half"],.ijs-bk-vak[data-breedte="derde"]{grid-column:span 12}
}

/* Alleen .ijs-bk-label, NIET ".ijs-bk label". Dat laatste is specifieker dan
   .ijs-bk-vink en zette het vinkjelabel terug op display:block, waardoor het
   hokje tegen de tekst aan plakte. Gemeten op de proefopstelling, 24-10-2026. */
.ijs-bk-label{display:block;font-family:var(--font-tekst);
  font-weight:700;font-size:.84375rem;line-height:1.35;color:var(--inkt);
  margin:0 0 var(--s1)}
.ijs-bk-ster{color:var(--fout);font-weight:700}

/* het veld zelf. 50px hoog zoals de knoppen in het contract; op een telefoon
   16px lettergrootte, want onder de 16px zoomt iOS bij het focussen in. */
.ijs-bk-in{width:100%;min-width:0;min-height:50px;padding:0 var(--s3);
  border:1.5px solid var(--rand-sterk);border-radius:var(--r);
  background:var(--veld);color:var(--inkt);
  font-family:inherit;font-size:1rem;line-height:1.4;
  transition:border-color var(--duur-1) var(--soepel),
             background-color var(--duur-1) var(--soepel)}
textarea.ijs-bk-in{min-height:96px;padding:var(--s3);line-height:1.55;resize:vertical}
select.ijs-bk-in{appearance:none;padding-right:var(--s6);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355657A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s3) center;
  background-size:18px 18px}
.ijs-bk-in::placeholder{color:var(--gedempt);opacity:1}
.ijs-bk-in:hover{border-color:var(--merk)}

/* FOCUS — het aandachtspunt uit de toegankelijkheidsanalyse.
   Op de live site was de focusring geel-op-wit: 1,51:1, en daarmee onzichtbaar
   voor wie weinig contrast ziet. Geel blijft hier staan als herkenbaar accent,
   maar het DRAGENDE deel van de indicator is de donkere buitenring:
   #241E1A op #FFFFFF is 17,85:1 en op het gele vlak eronder 12,1:1. Daarmee
   voldoet de indicator aan WCAG 1.4.11 ongeacht waar de kaart staat.
   De volgorde van binnen naar buiten is: gele veldrand, witte scheiding,
   donkere ring. Zo valt de indicator niet weg op een geel of een wit vlak. */
.ijs-bk-in:focus-visible,
.ijs-bk :is(button,a,summary,[tabindex]):focus-visible,
.ijs-bk input[type="checkbox"]:focus-visible+*{
  outline:3px solid var(--ring-donker);outline-offset:2px;
  box-shadow:0 0 0 2px var(--ring-binnen),0 0 0 7px var(--accent)}
.ijs-bk-in:focus-visible{border-color:var(--accent-rand);background:var(--vlak)}
/* Safari en oudere Firefox kennen :focus-visible op een tekstveld niet altijd;
   :focus is daar het vangnet en levert dezelfde indicator op. */
.ijs-bk-in:focus{border-color:var(--accent-rand);background:var(--vlak)}

.ijs-bk-hulp{display:block;font-size:var(--bijschrift-fs);line-height:1.45;
  color:var(--gedempt);margin-top:var(--s1)}
.ijs-bk-hulp a{color:var(--merk)}

/* een fout: rode rand, een zin eronder, en een pictogram zodat kleur niet het
   enige verschil is (WCAG 1.4.1) */
.ijs-bk-in[aria-invalid="true"]{border-color:var(--fout);border-width:2px;
  background:var(--vlak)}
.ijs-bk-fout{display:flex;align-items:flex-start;gap:6px;margin-top:var(--s1);
  font-size:var(--bijschrift-fs);line-height:1.45;font-weight:700;color:var(--fout)}
.ijs-bk-fout::before{content:"!";display:grid;place-items:center;flex:none;
  width:16px;height:16px;margin-top:1px;border-radius:50%;
  background:var(--fout);color:#fff;font-size:11px;font-weight:800;line-height:1}
.ijs-bk-fout:empty{display:none}

/* --------------------------------------------------------------------------
   4. het routelijntje langs ophaaladres en bestemming
   --------------------------------------------------------------------------
   Puur decoratief, en daarom aria-hidden in de HTML. Het is wel het element dat
   in een oogopslag zegt: dit is een rit van A naar B.
   -------------------------------------------------------------------------- */

.ijs-bk-route{position:relative;padding-left:22px}
.ijs-bk-route::before{content:"";position:absolute;left:5px;top:34px;bottom:34px;
  width:2px;background:var(--merk);opacity:.35;border-radius:2px}
.ijs-bk-stip{position:absolute;left:0;width:12px;height:12px;border-radius:50%;
  box-sizing:border-box}
.ijs-bk-stip-start{top:40px;background:var(--accent);border:3px solid var(--merk)}
.ijs-bk-stip-eind{bottom:12px;background:var(--merk);border:3px solid var(--merk)}
@container (max-width:380px){
  .ijs-bk-route{padding-left:0}
  .ijs-bk-route::before,.ijs-bk-stip{display:none}
}

/* de tekstlink "+ Tussenstop" */
.ijs-bk-tekstknop{display:inline-flex;align-items:center;min-height:44px;
  padding:0 2px;background:none;border:0;cursor:pointer;
  font-family:var(--font-tekst);font-weight:700;font-size:.875rem;
  color:var(--merk);text-decoration:underline;text-underline-offset:3px}
.ijs-bk-tekstknop:hover{color:var(--merk-diep)}
.ijs-bk-tekstknop-weg{color:var(--fout)}

.ijs-bk-lijstregel{display:flex;gap:var(--s2);align-items:center}
.ijs-bk-lijstregel .ijs-bk-in{flex:1 1 auto}
.ijs-bk-weg{flex:none;width:44px;height:44px;display:grid;place-items:center;
  border:1.5px solid var(--rand-sterk);border-radius:var(--r);background:var(--vlak);
  color:var(--fout);cursor:pointer;font-size:18px;line-height:1}
.ijs-bk-weg:hover{border-color:var(--fout);background:var(--veld)}

/* --------------------------------------------------------------------------
   5. snelkeuzepillen onder de bestemming
   --------------------------------------------------------------------------
   Conversietechnisch het sterkste element van het formulier: een klik vervangt
   twintig aanslagen op een telefoontoetsenbord. Ze scrollen zijwaarts in plaats
   van af te breken, zodat ze op een smal scherm niet vier regels hoog worden.
   -------------------------------------------------------------------------- */

.ijs-bk-chips{display:flex;gap:var(--s2);margin-top:var(--s2);
  overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch}
.ijs-bk-chip{flex:none;display:inline-flex;align-items:center;min-height:44px;
  padding:0 var(--s4);border-radius:var(--r-pil);
  background:var(--vlak);border:1.5px solid var(--rand-sterk);
  color:var(--merk);font-family:var(--font-tekst);font-weight:600;
  font-size:.875rem;line-height:1.2;white-space:nowrap;cursor:pointer;
  transition:background-color var(--duur-1) var(--soepel),
             border-color var(--duur-1) var(--soepel),color var(--duur-1) var(--soepel)}
.ijs-bk-chip:hover{background:var(--accent-zacht);border-color:#8A6D00;color:var(--donker)}
.ijs-bk-chip[aria-pressed="true"]{background:var(--merk);border-color:var(--merk);
  color:#fff;font-weight:700}

/* --------------------------------------------------------------------------
   6. de teller (passagiers, koffers)
   -------------------------------------------------------------------------- */

.ijs-bk-teller{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);min-height:50px;padding:0 var(--s2);
  border:1.5px solid var(--rand-sterk);border-radius:var(--r);background:var(--veld)}
.ijs-bk-teller-knop{width:44px;height:44px;flex:none;display:grid;place-items:center;
  border:0;border-radius:var(--r);background:transparent;color:var(--merk);
  font-size:22px;line-height:1;cursor:pointer}
.ijs-bk-teller-knop:hover:not(:disabled){background:var(--zacht)}
.ijs-bk-teller-knop:disabled{color:var(--rand-sterk);cursor:not-allowed}
.ijs-bk-teller-waarde{flex:1 1 auto;text-align:center;font-family:var(--font-kop);
  font-weight:800;font-size:1.0625rem;line-height:1;color:var(--inkt);
  /* het getal is een <output>; een leesprogramma leest het voor zodra het
     verandert, dankzij aria-live in de HTML */
  font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   7. de voertuigkaarten
   -------------------------------------------------------------------------- */

.ijs-bk-voertuigen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s3)}
@container (max-width:460px){.ijs-bk-voertuigen{grid-template-columns:minmax(0,1fr)}}

.ijs-bk-voertuig{position:relative;display:block;min-width:0;
  border:1.5px solid var(--rand);border-radius:var(--r);background:var(--veld);
  padding:var(--s3) var(--s4) var(--s3) var(--s3);cursor:pointer;
  transition:border-color var(--duur-1) var(--soepel),
             background-color var(--duur-1) var(--soepel),
             box-shadow var(--duur-2) var(--soepel)}
.ijs-bk-voertuig:hover{border-color:var(--merk)}
/* De radio zelf blijft bestaan en bedienbaar; hij wordt alleen visueel
   weggezet. Hem met display:none verbergen zou hem uit de tabvolgorde en uit
   de pijltjesbediening halen, en dat is precies het stuk dat werkt. */
.ijs-bk-voertuig input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ijs-bk-voertuig:has(input:checked){border-color:var(--accent-rand);border-width:2px;
  background:var(--vlak);padding:calc(var(--s3) - 1px) calc(var(--s4) - 1px)
  calc(var(--s3) - 1px) calc(var(--s3) - 1px);
  box-shadow:inset 0 0 0 1px var(--merk-diep)}
.ijs-bk-voertuig:has(input:focus-visible){
  outline:3px solid var(--ring-donker);outline-offset:2px;
  box-shadow:0 0 0 2px var(--ring-binnen),0 0 0 7px var(--accent)}

.ijs-bk-voertuig-kop{display:flex;align-items:baseline;gap:var(--s2);
  padding-right:28px}
.ijs-bk-voertuig-naam{font-family:var(--font-kop);font-weight:800;font-size:1rem;
  line-height:1.2;color:var(--inkt)}
.ijs-bk-voertuig-sub{font-size:var(--bijschrift-fs);color:var(--gedempt)}
.ijs-bk-voertuig-vink{position:absolute;top:var(--s3);right:var(--s3);
  width:22px;height:22px;border-radius:50%;display:none;place-items:center;
  background:var(--accent);color:var(--donker);font-size:13px;font-weight:800;
  line-height:1}
.ijs-bk-voertuig:has(input:checked) .ijs-bk-voertuig-vink{display:grid}

.ijs-bk-tarieven{display:flex;flex-wrap:wrap;gap:4px var(--s3);
  margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--rand)}
.ijs-bk-tarief{font-size:var(--bijschrift-fs);line-height:1.3;color:var(--gedempt);
  white-space:nowrap}
.ijs-bk-tarief b{font-family:var(--font-kop);font-weight:800;color:var(--merk);
  font-size:.875rem}
.ijs-bk-voetnoot{font-size:var(--bijschrift-fs);line-height:1.45;
  color:var(--gedempt);margin-top:var(--s2)}

/* --------------------------------------------------------------------------
   8. vinkjes
   -------------------------------------------------------------------------- */

.ijs-bk-vink{display:flex;align-items:flex-start;gap:var(--s3);
  min-height:44px;padding:var(--s2) 0;cursor:pointer}
.ijs-bk-vink.is-kader{padding:var(--s3) var(--s4);border:1.5px solid var(--rand);
  border-radius:var(--r);background:var(--veld)}
.ijs-bk-vink.is-kader:has(input:checked){border-color:var(--merk);background:var(--zacht)}
.ijs-bk-vink input{flex:none;width:24px;height:24px;margin:2px 0 0;
  accent-color:var(--merk);cursor:pointer}
.ijs-bk-vink-tekst{font-weight:700;font-size:.9375rem;line-height:1.4;color:var(--inkt)}
.ijs-bk-vink .ijs-bk-hulp{margin-top:2px;font-weight:400}

/* --------------------------------------------------------------------------
   9. uitklapbare groepen
   -------------------------------------------------------------------------- */

.ijs-bk-groep{border:1.5px solid var(--rand);border-radius:var(--r);
  background:var(--veld);overflow:hidden}
.ijs-bk-groep>summary{display:flex;align-items:center;gap:var(--s3);
  min-height:50px;padding:var(--s2) var(--s4);cursor:pointer;list-style:none;
  font-family:var(--font-kop);font-weight:700;font-size:.9375rem;color:var(--merk)}
.ijs-bk-groep>summary::-webkit-details-marker{display:none}
.ijs-bk-groep>summary::after{content:"";margin-left:auto;flex:none;
  width:10px;height:10px;border-right:2.2px solid currentColor;
  border-bottom:2.2px solid currentColor;transform:rotate(45deg) translateY(-3px);
  transition:transform var(--duur-2) var(--soepel)}
.ijs-bk-groep[open]>summary::after{transform:rotate(225deg) translateY(-3px)}
.ijs-bk-groep-sub{display:block;font-family:var(--font-tekst);font-weight:400;
  font-size:var(--bijschrift-fs);color:var(--gedempt);margin-top:2px}
.ijs-bk-groep-in{padding:0 var(--s4) var(--s4);display:flex;flex-direction:column;
  gap:var(--s3);background:var(--vlak);border-top:1px solid var(--rand);
  padding-top:var(--s4)}
.ijs-bk-groep-vast{border-color:var(--zacht);background:var(--vlak)}
.ijs-bk-groep-vast>.ijs-bk-groep-in{border-top:0;padding-top:0}

/* --------------------------------------------------------------------------
   10. de samenvatting op de laatste stap
   -------------------------------------------------------------------------- */

.ijs-bk-samenvatting{display:grid;gap:0;border:1.5px solid var(--rand);
  border-radius:var(--r);overflow:hidden;background:var(--veld)}
.ijs-bk-sam-rij{display:grid;grid-template-columns:minmax(110px,34%) 1fr auto;
  gap:var(--s2) var(--s3);align-items:baseline;
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--rand)}
.ijs-bk-sam-rij:last-child{border-bottom:0}
.ijs-bk-sam-naam{font-size:var(--bijschrift-fs);font-weight:700;color:var(--gedempt);
  text-transform:uppercase;letter-spacing:.04em}
.ijs-bk-sam-waarde{font-size:.9375rem;line-height:1.45;color:var(--inkt);
  overflow-wrap:anywhere;white-space:pre-line}
.ijs-bk-sam-wijzig{font-size:var(--bijschrift-fs)}
@container (max-width:420px){
  .ijs-bk-sam-rij{grid-template-columns:1fr auto}
  .ijs-bk-sam-naam{grid-column:1/-1}
}

/* --------------------------------------------------------------------------
   11. de voet met de knoppen
   -------------------------------------------------------------------------- */

.ijs-bk-voet{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding-top:var(--s4);border-top:1px solid var(--rand)}
.ijs-bk-voet .ijs-bk-rechts{margin-left:auto;display:flex;gap:var(--s3);
  flex-wrap:wrap}

.ijs-bk-knop{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s2);min-height:50px;padding:0 var(--s5);border-radius:var(--r);
  font-family:var(--font-kop);font-weight:700;font-size:1rem;line-height:1.2;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  text-align:center;
  transition:background-color var(--duur-1) var(--soepel),
             border-color var(--duur-1) var(--soepel),
             color var(--duur-1) var(--soepel)}
.ijs-bk-knop-blauw{background:var(--merk-diep);color:#fff;border-color:var(--merk-diep)}
.ijs-bk-knop-blauw:hover{background:var(--merk)}
/* Donkerblauwe tekst op geel, nooit wit (contract paragraaf 3). */
.ijs-bk-knop-geel{background:var(--accent);color:var(--donker);border-color:var(--accent-rand)}
.ijs-bk-knop-geel:hover{background:var(--accent-op)}
.ijs-bk-knop-rand{background:transparent;color:var(--merk);border-color:var(--rand-sterk)}
.ijs-bk-knop-rand:hover{border-color:var(--merk);background:var(--zacht)}
.ijs-bk-knop[disabled]{opacity:.6;cursor:progress}
.ijs-bk-knop svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.ijs-bk-privacy{flex:1 1 200px;min-width:0;font-size:var(--bijschrift-fs);
  line-height:1.45;color:var(--gedempt)}
.ijs-bk-privacy a{color:var(--merk)}

/* --------------------------------------------------------------------------
   12. meldingen
   -------------------------------------------------------------------------- */

.ijs-bk-melding{display:flex;gap:var(--s3);padding:var(--s3) var(--s4);
  border-radius:var(--r);font-size:.9375rem;line-height:1.5}
.ijs-bk-melding:empty{display:none}
.ijs-bk-melding-fout{background:#FDECEC;border:1.5px solid var(--fout);
  color:#7A1414}
.ijs-bk-melding-fout a{color:#7A1414;font-weight:700}
.ijs-bk-melding-goed{background:var(--zacht);border:1.5px solid var(--goed);
  color:var(--inkt)}
.ijs-bk-melding ul{margin:var(--s1) 0 0;padding-left:1.1em}
.ijs-bk-melding li{margin-top:2px}
.ijs-bk-melding button{background:none;border:0;padding:0;cursor:pointer;
  color:inherit;font:inherit;font-weight:700;text-decoration:underline;
  text-underline-offset:3px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ijs-bk-melding-fout{background:#3A1717;color:#FFD9D9}
  :root:not([data-theme="light"]) .ijs-bk-melding-fout a{color:#FFD9D9}
}
:root[data-theme="dark"] .ijs-bk-melding-fout{background:#3A1717;color:#FFD9D9}
:root[data-theme="dark"] .ijs-bk-melding-fout a{color:#FFD9D9}

/* de wachtstand */
.ijs-bk-bezig{display:inline-block;width:16px;height:16px;flex:none;
  border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:ijs-bk-draai .7s linear infinite}
@keyframes ijs-bk-draai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .ijs-bk-bezig{animation-duration:2.4s}
  .ijs-bk *{transition-duration:1ms !important}
}

/* --------------------------------------------------------------------------
   13. het modale venster
   -------------------------------------------------------------------------- */

.ijs-bk-dialoog{padding:0;border:0;background:transparent;max-width:none;
  max-height:none;width:100%;height:100%;overflow:visible}
.ijs-bk-dialoog::backdrop{background:rgba(6,15,34,.72)}
/* Terugval voor browsers zonder ::backdrop-ondersteuning op een <dialog> dat
   met showModal() is geopend. Zonder dit is de pagina erachter gewoon zichtbaar
   en leest het venster als een zwevend kaartje zonder context. */
.ijs-bk-dialoog:not([open]){display:none}
/* Een <dialog> is standaard width:fit-content. Met een formulier erin dat zelf
   in kolommen staat, krimpt hij dan tot de smalst mogelijke inhoud en vouwt
   alles onleesbaar samen. Het venster eronder is position:fixed, dus de dialoog
   zelf mag het hele scherm beslaan en verder onzichtbaar blijven. */
.ijs-bk-dialoog[open]{width:100%;max-width:none;height:100%;max-height:none;
  inset:0;margin:0;border:0;padding:0;background:transparent;overflow:visible}

.ijs-bk-venster{position:fixed;inset:0;display:grid;place-items:center;
  padding:clamp(12px,3vw,32px);overflow-y:auto;overscroll-behavior:contain}
/* De dialoog bouwt venster > houder > formulier. De oude regel mikte op een
   .ijs-bk die geen direct kind is, waardoor de breedte nooit aankwam. */
.ijs-bk-venster>.ijs-bk,.ijs-bk-venster>.ijs-bk-houder{
  width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 24px);
  overflow-y:auto;overscroll-behavior:contain}

/* de sluitknop: rond, met een rood kruisje.
   De rode cirkel is #B42323 (--fout, 6,0:1 op wit) met een wit kruis erin; het
   ontwerp toont een lichtere variant, maar die haalde op wit geen 3:1 en een
   sluitknop die je niet ziet is geen sluitknop. */
.ijs-bk-sluit{flex:none;width:44px;height:44px;display:grid;place-items:center;
  border-radius:50%;border:2px solid var(--fout);background:var(--vlak);
  color:var(--fout);cursor:pointer;
  transition:background-color var(--duur-1) var(--soepel),color var(--duur-1) var(--soepel)}
.ijs-bk-sluit:hover{background:var(--fout);color:#fff}
.ijs-bk-sluit svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:2.6;stroke-linecap:round}

/* --------------------------------------------------------------------------
   14. de plek in de pagina
   --------------------------------------------------------------------------
   OP MOBIEL STOND HET FORMULIER ONDER DE VOUW. In de hero staan de tekst en de
   kaart naast elkaar; op een telefoon vallen die onder elkaar, en daar stond
   het formulier onder vier regels inleiding, vier USP-regels en twee knoppen.
   Hieronder springt de kaart naar boven zodra de kolommen onder elkaar komen,
   en krijgt de hero minder lucht zodat de eerste twee velden nog in beeld
   staan. De tekst blijft gewoon staan; hij komt eronder in plaats van erboven.
   -------------------------------------------------------------------------- */

@media (max-width:1023.98px){
  .ijs-hero-in>.ijs-bk-houder,.ijs-hero-media:has(.ijs-bk){order:-1}
  .ijs-hero:has(.ijs-bk){padding-block:clamp(16px,4vw,32px)}
  .ijs-hero:has(.ijs-bk) .ijs-bk{padding:var(--s4)}
}
/* Onder de 480px wordt de kaart compact: minder lucht tussen de velden en een
   stappenbalk die alleen nog de nummers toont. Zo past "Ophaaladres" plus
   "Bestemming" plus de knop binnen de eerste schermhoogte van een iPhone SE. */
@media (max-width:479.98px){
  .ijs-bk{padding:var(--s4) var(--s3);gap:var(--s3)}
  .ijs-bk-kop{gap:var(--s2)}
  .ijs-bk-stap:not(.is-nu) .ijs-bk-stap-naam{position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ijs-bk-voet{flex-direction:column-reverse;align-items:stretch}
  .ijs-bk-voet .ijs-bk-rechts{margin-left:0;flex-direction:column-reverse}
  .ijs-bk-voet .ijs-bk-knop{width:100%}
  .ijs-bk-venster{padding:0}
  .ijs-bk-venster>.ijs-bk{border-radius:0;max-height:100dvh;min-height:100dvh}
}

/* de houder die een pagina om het formulier zet */
.ijs-bk-houder{min-width:0}
.ijs-bk-houder:empty{display:none}

/* --------------------------------------------------------------------------
   15. zonder JavaScript
   --------------------------------------------------------------------------
   Het formulier wordt door boeker.js opgebouwd. Blijft dat uit (een blokkade,
   een fout, een trage verbinding), dan mag er geen leeg wit vlak overblijven.
   De houder bevat daarom in de HTML al een blok met het telefoonnummer, en dat
   blok wordt pas verwijderd als het formulier er echt staat.
   -------------------------------------------------------------------------- */

.ijs-bk-terugval{display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s5);border-radius:var(--r-groot);background:var(--vlak);
  border:1px solid var(--rand);color:var(--inkt);box-shadow:var(--schaduw)}
.ijs-bk-terugval h2{font-family:var(--font-kop);font-weight:800;
  font-size:var(--h4-fs);color:var(--merk);margin:0}
.ijs-bk-terugval p{font-size:.9375rem;line-height:1.55;color:var(--gedempt);margin:0}
/* Bij contact, koerier en offerte staat er naast de belknop ook een mailadres:
   een offerteaanvraag is zelden zo dringend dat bellen de enige uitweg is, en
   wie buiten kantoortijd op een kapot formulier stuit moet iets kunnen
   achterlaten. Onderstreept en niet alleen gekleurd, want kleur alleen is geen
   aanwijzing voor wie die niet ziet. */
.ijs-bk-terugval-mail{align-self:flex-start;font-weight:700;color:var(--merk);
  text-decoration:underline;text-underline-offset:3px}
.ijs-bk-terugval-mail:focus-visible{outline:3px solid var(--merk);
  outline-offset:3px;border-radius:4px}

/* --------------------------------------------------------------------------
   15b. de vier formulieren
   --------------------------------------------------------------------------
   Taxi, contact, koerier en offerte delen elke regel hierboven: hetzelfde
   raster, dezelfde focusring, dezelfde kaarten. Dat is geen toeval maar het
   doel — vier uitgeschreven formulierstijlen zijn vier plekken waar het
   contrast van de focusring stilletjes uit elkaar gaat lopen.

   Wat hier staat zijn de twee verschillen die er wel toe doen.
   -------------------------------------------------------------------------- */

/* Het contactformulier heeft geen route en geen kaarten; zonder deze regel
   staat de knoppenrij van een formulier met vijf velden even ver van de laatste
   regel af als die van het boekformulier met achtentwintig. */
.ijs-bk[data-profiel="contact"] .ijs-bk-stapvlak,
.ijs-bk[data-profiel="offerte"] .ijs-bk-stapvlak{row-gap:var(--s4)}

/* De zendingkaarten van de koerier dragen twee regels ondertitel ("meubels,
   machineonderdelen, tot 1.000 kg") waar de voertuigkaarten er een hebben.
   Zonder een gelijke minimumhoogte wordt het raster een trapje. */
.ijs-bk[data-profiel="koerier"] .ijs-bk-voertuig{min-height:5.5rem}

/* --------------------------------------------------------------------------
   16. printen
   -------------------------------------------------------------------------- */

@media print{
  .ijs-bk-dialoog,.ijs-bk-spoed,.ijs-bk-voet,.ijs-bk-stappen{display:none !important}
  .ijs-bk{box-shadow:none;border:1px solid #000}
}

/* --------------------------------------------------------------------------
   17. carrouselpijlen (boeker.js voegt ze toe aan elke .ijs-spoor die
   daadwerkelijk overloopt; vegen en toetsenbord doet scroll-snap zelf)
   -------------------------------------------------------------------------- */

.ijs-bk-pijlen{display:flex;gap:var(--s2);justify-content:flex-end;margin-top:var(--s3)}
.ijs-bk-pijl{width:44px;height:44px;display:grid;place-items:center;
  border:1.5px solid var(--rand-sterk);border-radius:50%;background:var(--vlak);
  color:var(--merk);font-size:22px;line-height:1;cursor:pointer;
  transition:background-color var(--duur-1) var(--soepel),border-color var(--duur-1) var(--soepel)}
.ijs-bk-pijl:hover{background:var(--merk);border-color:var(--merk);color:#fff}
.ijs-bk-pijl:focus-visible{outline:3px solid var(--ring-donker);outline-offset:2px;
  box-shadow:0 0 0 2px var(--ring-binnen),0 0 0 7px var(--accent)}
/* op een donkere sectie draaien de kleuren om */
.ijs-v-donker .ijs-bk-pijl,.ijs-v-nacht .ijs-bk-pijl{background:transparent;
  border-color:rgba(255,255,255,.6);color:#fff}
.ijs-v-donker .ijs-bk-pijl:hover,.ijs-v-nacht .ijs-bk-pijl:hover{
  background:var(--accent);border-color:var(--accent);color:var(--donker)}

/* --------------------------------------------------------------------------
   18. de kaart die pas na een klik laadt
   -------------------------------------------------------------------------- */

.ijs-bk-kaartknop{display:grid;place-items:center;gap:var(--s3);width:100%;
  min-height:320px;padding:var(--s5);cursor:pointer;
  border:1.5px dashed var(--rand-sterk);border-radius:var(--r-groot);
  background:var(--zacht);color:var(--merk);
  font-family:var(--font-kop);font-weight:700;font-size:1rem}
.ijs-bk-kaartknop:hover{border-color:var(--merk);background:var(--accent-zacht);
  color:var(--donker)}
.ijs-bk-kaartknop small{display:block;font-family:var(--font-tekst);font-weight:400;
  font-size:var(--bijschrift-fs);color:var(--gedempt);max-width:40ch;text-align:center}
.ijs-bk-kaartknop:hover small{color:var(--donker)}

/* --------------------------------------------------------------------------
   19. de themaschakelaar
   -------------------------------------------------------------------------- */

.ijs-bk-thema{display:inline-flex;align-items:center;gap:var(--s2);
  min-height:44px;padding:0 var(--s3);border-radius:var(--r-pil);
  border:1.5px solid var(--rand-sterk);background:transparent;color:inherit;
  font-family:var(--font-tekst);font-weight:700;font-size:.875rem;cursor:pointer}
.ijs-bk-thema:hover{border-color:var(--merk)}

/* --------------------------------------------------------------------------
   20. de aanvraagcode op de bedankpagina
   Groot, met cijferspatiëring, zodat iemand hem aan de telefoon kan voorlezen.
   -------------------------------------------------------------------------- */

.ijs-bk-code{font-family:var(--font-kop);font-weight:900;
  font-size:clamp(1.5rem,1.2rem+1.4vw,2.125rem);line-height:1.15;
  letter-spacing:.06em;color:var(--merk);
  background:var(--accent-zacht);border:1.5px solid var(--accent-rand);
  border-radius:var(--r);padding:var(--s3) var(--s4);
  text-align:center;overflow-wrap:anywhere;user-select:all}

/* [hidden] moet winnen van elke display-regel hierboven.
   .ijs-bk-terugval zet display:flex, en een klasseselector verslaat de
   display:none die de browser zelf aan [hidden] hangt. Zonder deze regel stond
   het blok "Geen aanvraag gevonden" op de bedankpagina gewoon zichtbaar naast
   het aanvraagnummer. Gemeten op 24-10-2026. */
.ijs-bk [hidden],[hidden].ijs-bk-terugval,[hidden].ijs-bk-vak{display:none !important}

/* ---------------------------------------------------------------------------
   Het venster komt van rechts in beeld.
   Een dialoog die abrupt in het midden verschijnt leest als een foutmelding;
   binnenschuiven laat zien waar hij vandaan komt en waar hij heen gaat. De
   afstand is klein gehouden: grote bewegingen vertragen de bezoeker die juist
   snel wil boeken. Wie beweging heeft uitgezet, krijgt alleen de dekking.
   -------------------------------------------------------------------------- */
@keyframes ijs-bk-in-van-rechts {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ijs-bk-sluier {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ijs-bk-dialoog[open] > .ijs-bk-venster > .ijs-bk-houder {
  animation: ijs-bk-in-van-rechts .26s cubic-bezier(.22, .61, .36, 1) both;
}
.ijs-bk-dialoog[open]::backdrop { animation: ijs-bk-sluier .2s ease both; }
@media (prefers-reduced-motion: reduce) {
  .ijs-bk-dialoog[open] > .ijs-bk-venster > .ijs-bk-houder {
    animation: ijs-bk-sluier .01s both;
  }
}

/* ---------------------------------------------------------------------------
   Het venster past altijd in het scherm.
   Eerder scrollde de hele kaart, waardoor de knop "Verder" onder de vouw
   verdween: de bezoeker vulde het formulier in en zag geen manier om door te
   gaan. Nu staan de kop en de knoppenbalk vast en schuift alleen het
   middenstuk. Dat is ook de reden dat de hoogte op dvh staat en niet op vh:
   op een telefoon telt vh de adresbalk mee en valt de knop er alsnog buiten.
   -------------------------------------------------------------------------- */
.ijs-bk-venster > .ijs-bk-houder {
  max-height: calc(100dvh - 24px);
  display: flex;
  overflow: visible;
}
.ijs-bk-venster > .ijs-bk-houder > .ijs-bk {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  min-height: 0;
  position: relative;
}
.ijs-bk-venster .ijs-bk-kop,
.ijs-bk-venster .ijs-bk-melding,
.ijs-bk-venster .ijs-bk-voet { flex: none; }
.ijs-bk-venster .ijs-bk-stapvlak {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* lucht zodat het laatste veld niet tegen de knoppenbalk plakt */
  padding-bottom: var(--s2);
}
.ijs-bk-venster .ijs-bk-voet {
  position: sticky;
  bottom: 0;
  background: var(--wit, #fff);
}

/* Het kruisje hoort rechtsboven, niet op een eigen regel onder de titel.
   In de kop stond het achter de stappenbalk en brak het daardoor af. */
/* Het kruisje staat absoluut, dus de kop hoeft niet meer op een rij te passen;
   nowrap brak de titel juist over twee regels. Alleen ruimte vrijhouden. */
.ijs-bk-venster .ijs-bk-kop { padding-right: 56px; }
.ijs-bk-venster .ijs-bk-titel { white-space: nowrap; }
.ijs-bk-venster .ijs-bk-sluit {
  position: absolute;
  top: var(--s3, 12px);
  right: var(--s3, 12px);
  z-index: 2;
}

/* Keuzeknoppen breken af in plaats van achter een scrollbalk te verdwijnen:
   een bestemming die je niet ziet, kies je niet. */
.ijs-bk-chips {
  flex-wrap: wrap;
  overflow-x: visible;
  padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Het formulier in de hero is compacter dan het formulier in de modaal.
   Reden: in de hero concurreert het met de kop, de knoppen en de afbeelding,
   en op een laptop van 800 px hoog viel de knop "Verder" onder de vouw. Een
   bezoeker die de knop niet ziet, maakt het formulier niet af.
   Wat hier verdwijnt is nergens de enige plek: de spoedmelding staat ook als
   belknop in de hero zelf, en de uitleg onder de velden staat voluit in de
   modaal die vanaf elke knop opent.
   -------------------------------------------------------------------------- */
.ijs-hero .ijs-bk .ijs-bk-spoed { display: none; }
.ijs-hero .ijs-bk .ijs-bk-hulp { display: none; }
.ijs-hero .ijs-bk .ijs-bk-stapkop { margin-bottom: var(--s2); }
.ijs-hero .ijs-bk .ijs-bk-stapvlak { gap: var(--s2); row-gap: var(--s3); }
.ijs-hero .ijs-bk .ijs-bk-vak { margin-bottom: 0; }
.ijs-hero .ijs-bk .ijs-bk-chips { margin-top: var(--s1); }
.ijs-hero .ijs-bk .ijs-bk-voet { padding-top: var(--s3); }

/* Een hero met formulier erin heeft minder lucht nodig dan een hero met alleen
   tekst: de kaart vult de hoogte al. Zonder deze inperking viel de knop
   "Verder" net onder de vouw op een laptop van 800 px, en dat is precies de
   knop waar de aanvraag van afhangt. */
@media (min-width: 1024px) {
  .ijs-hero:has(.ijs-bk) { padding-block: clamp(20px, 2.4vw, 40px); }
  .ijs-hero .ijs-bk { padding: var(--s5, 1.25rem) var(--s5, 1.25rem) var(--s4, 1rem); }
  .ijs-hero .ijs-bk .ijs-bk-kop { margin-bottom: var(--s3); }
  .ijs-hero .ijs-bk .ijs-bk-stappen { margin-bottom: var(--s3); }
}

/* De hero centreert zijn inhoud binnen een vaste minimumhoogte. Staat er een
   formulier in, dan bepaalt dat formulier de hoogte en werkt die minimumhoogte
   averechts: hij duwt de kaart omlaag en de knop "Verder" uit beeld. */
@media (min-width: 1024px) {
  .ijs-hero:has(.ijs-bk) { min-height: 0; justify-content: flex-start; }
}

/* Verhouding tussen tekst en formulier in de hero.
   Gemeten op 1920: de tekstkolom was 721 breed en 439 hoog, de formulierkaart
   639 breed en 681 hoog. De tekst hing bovenin en liet er 242 pixels leeg
   onder, terwijl de smallere kolom de meeste inhoud droeg. Twee correcties:
   de kolommen krijgen gelijke breedte, en de tekst staat op de hoogte van de
   kaart in plaats van er bovenaan tegenaan. */
@media (min-width: 1024px) {
  .ijs-hero-in:has(.ijs-bk) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
}