/* Stijl van de boekingsmodule. Elke site zet de --bk-variabelen op zijn eigen kleuren en letters. */
.bk{
  --_vlak:var(--bk-vlak,#fff);
  --_inkt:var(--bk-inkt,#1c1b1f);
  --_zacht:var(--bk-zacht,#5c5a60);
  --_accent:var(--bk-accent,#1c1b1f);
  --_op-accent:var(--bk-op-accent,#fff);
  --_bereik:var(--bk-bereik,rgba(0,0,0,.08));
  --_lijn:var(--bk-lijn,rgba(0,0,0,.12));
  --_fout:var(--bk-fout,#b3261e);
  --_radius:var(--bk-radius,14px);
  --_kop:var(--bk-kop,inherit);
  color:var(--_inkt);
}
.bk *{box-sizing:border-box}
.bk-banner{margin:0 0 14px;padding:12px 16px;border:1px dashed var(--_lijn);border-radius:var(--_radius);font-size:.92rem;color:var(--_zacht)}
.bk-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(14px,2vw,22px);align-items:start}
.bk-kaart{background:var(--_vlak);border:1px solid var(--_lijn);border-radius:var(--_radius);padding:clamp(16px,2.4vw,26px);min-width:0}
.bk-agenda{position:relative}
.bk-nav{position:absolute;inset-inline:clamp(10px,1.8vw,18px);top:clamp(12px,2vw,20px);display:flex;justify-content:space-between;pointer-events:none}
.bk-pijl{pointer-events:auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--_lijn);background:var(--_vlak);color:var(--_inkt);font:inherit;font-size:1rem;cursor:pointer}
.bk-pijl:disabled{opacity:.3;cursor:default}
.bk-maanden{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px)}
.bk-maand h4{margin:4px 0 14px;text-align:center;font-family:var(--_kop);font-size:1.05rem;font-weight:600;text-transform:capitalize;line-height:28px}
.bk-rooster{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.bk-wd{text-align:center;font-size:.72rem;color:var(--_zacht);padding-bottom:6px;text-transform:uppercase;letter-spacing:.06em}
.bk-dag{aspect-ratio:1;min-width:0;border:0;background:none;color:var(--_inkt);font:inherit;font-size:.9rem;font-variant-numeric:tabular-nums;border-radius:999px;cursor:pointer;position:relative}
.bk-dag:hover:not(:disabled){background:var(--_bereik)}
.bk-dag:disabled{cursor:default;color:var(--_zacht);opacity:.45}
.bk-dag.is-bezet{text-decoration:line-through;color:var(--_zacht)}
.bk-dag.is-bezet:not(:disabled){opacity:.8}
.bk-dag.in{background:var(--_bereik);border-radius:0}
.bk-dag.start,.bk-dag.eind{background:var(--_accent);color:var(--_op-accent);opacity:1;text-decoration:none}
.bk-dag:focus-visible{outline:2px solid var(--_accent);outline-offset:1px}
.bk-legenda{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-size:.84rem;color:var(--_zacht)}
.bk-legenda span{display:inline-flex;gap:8px;align-items:center}
.bk-legenda i{width:12px;height:12px;border-radius:50%;display:inline-block}
.l-vrij{border:1px solid var(--_lijn)}
.l-bezet{background:repeating-linear-gradient(135deg,var(--_zacht) 0 1px,transparent 1px 4px);opacity:.6}
.l-keuze{background:var(--_accent)}
.bk-form{display:grid;gap:14px}
.bk-samenvatting{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--_lijn);min-height:2.4em}
.bk-samenvatting b{font-family:var(--_kop);font-size:1.15rem}
.bk-samenvatting span{color:var(--_zacht)}
.bk-hint{width:100%}
.bk-vanaf{width:100%;font-family:var(--_kop);font-size:1.05rem;color:var(--_inkt)!important}
.bk-prijs{display:grid;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--_lijn);font-size:.95rem}
.bk-prijsregel{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.bk-prijsregel span:first-child{color:var(--_zacht)}
.bk-totaal{margin-top:4px;padding-top:8px;border-top:1px solid var(--_lijn);font-weight:600;font-size:1.05rem}
.bk-totaal span:first-child{color:var(--_inkt)}
.bk-prijs small{font-size:.82rem;color:var(--_zacht)}
.bk-besparing{margin:6px 0 0;display:grid;gap:2px;padding:10px 12px;border-radius:calc(var(--_radius) * .6);background:var(--_bereik)}
.bk-besparing small{font-size:.8rem}
.bk-link{background:none;border:0;padding:0;color:var(--_inkt);font:inherit;font-size:.88rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-left:auto}
.bk-rij{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
.bk-veld{display:grid;gap:5px;min-width:0}
.bk-veld label{font-size:.88rem;font-weight:600}
.bk-veld input,.bk-veld select,.bk-veld textarea{width:100%;font:inherit;font-size:.97rem;color:var(--_inkt);background:transparent;border:1px solid var(--_lijn);border-radius:calc(var(--_radius) * .6);padding:.65em .8em}
.bk-veld textarea{resize:vertical;min-height:4.5em}
.bk-veld input:focus,.bk-veld select:focus,.bk-veld textarea:focus{outline:2px solid var(--_accent);outline-offset:0;border-color:transparent}
.bk-veld small,.bk-klein{font-size:.82rem;color:var(--_zacht);line-height:1.45;margin:0}
.bk-veld.fout input,.bk-veld.fout select{border-color:var(--_fout)}
.bk-foutmelding{color:var(--_fout)!important;font-size:.82rem}
.bk-akkoord{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.45;cursor:pointer}
.bk-akkoord input{margin-top:.2em;width:17px;height:17px;flex:none;accent-color:var(--_accent)}
.bk-akkoord.fout span{color:var(--_fout)}
.bk-fout{margin:0;color:var(--_fout);font-size:.92rem}
.bk-knop{justify-self:start;border:0;border-radius:999px;background:var(--_accent);color:var(--_op-accent);font:600 .97rem/1 inherit;font-family:inherit;padding:1em 1.6em;cursor:pointer}
.bk-knop:disabled{opacity:.6;cursor:progress}
.bk-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.bk-klaar{display:grid;gap:12px;align-content:start}
.bk-klaar h4{margin:0;font-family:var(--_kop);font-size:1.5rem}
.bk-klaar p{margin:0}
@media (max-width:900px){.bk-grid{grid-template-columns:1fr}}
@media (max-width:560px){.bk-maanden{grid-template-columns:1fr}.bk-maand+.bk-maand{display:none}.bk-rij{grid-template-columns:1fr}}
