/* ==========================================================================
   kalender.css — de datumkiezer, in de huisstijl van BEXX.
   Hoort bij js/kalender.js. Voorvoegsel .kal-, raakt niets anders aan.
   Kleuren staan hier als eigen waarden, want de pagina's zetten hun tokens
   elk in hun eigen <style> en dit bestand mag daar niet van afhangen.
   ========================================================================== */
.kal-bak{ position:relative; min-width:0; }

/* ---------- de knop die het laatje opent ---------- */
.kal-knop{
  width:100%; display:flex; align-items:center; gap:11px; min-height:52px;
  padding:0 13px; border:1px solid #E3E0DB; border-radius:11px; background:#fff;
  color:#14161A; cursor:pointer; text-align:left;
  font:400 15px/1.25 'Inter',system-ui,sans-serif;
}
.kal-knop:hover{ border-color:#C9C4BC; }
.kal-knop:focus-visible{ outline:2px solid #FF7D38; outline-offset:1px; }
.kal-knop>svg:first-child{ color:#FF7D38; flex:0 0 auto; }
.kal-knop-tekst{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.kal-knop-tekst i{
  font-style:normal; font:700 10.5px/1 'Inter',system-ui,sans-serif;
  letter-spacing:.09em; text-transform:uppercase; color:#6E7883;
}
.kal-knop-tekst b{
  font:600 15px/1.25 'Inter',system-ui,sans-serif; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.kal-knop-punt{ color:#6E7883; flex:0 0 auto; transition:transform .16s ease; }
.kal-aan .kal-knop-punt{ transform:rotate(180deg); }
.kal-aan .kal-knop{ border-color:#FF7D38; }

/* ---------- het laatje ---------- */
/* ⚠️ VAST aan het scherm, niet aan de pagina. js/kalender.js rekent left en
   top zelf uit. Een absoluut geplaatst laatje wordt afgeknipt door de hero,
   die overflow:hidden heeft, en valt achter het blok eronder. */
/* Het losse paneel hangt rechtstreeks in <body>, buiten elke stapelcontext
   van de pagina. 9500 ligt boven de chatbel (9400) en de vaste onderbalk (95). */
.kal-los{ position:relative; z-index:9500; }
.kal-paneel{
  position:fixed; z-index:9500; top:0; left:0; min-width:302px;
  max-width:calc(100vw - 16px); background:#fff; border:1px solid #E3E0DB;
  border-radius:14px; box-shadow:0 20px 48px rgba(20,22,26,.24); padding:16px;
  animation:kal-op .14s ease-out;
}
@keyframes kal-op{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:none; } }
/* vaste vorm: geen knop, het paneel staat gewoon in de pagina */
.kal-bak.kal-vast .kal-paneel{
  position:static; box-shadow:none; border:0; padding:0; animation:none;
  min-width:0; max-width:none;
}

.kal-maanden{ display:flex; gap:22px; }
.kal-maand{ flex:1 1 0; min-width:0; }

.kal-kop{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.kal-kop b{
  flex:1 1 auto; text-align:center; font:700 14.5px/1 'Inter',system-ui,sans-serif;
  color:#14161A; text-transform:capitalize;
}
.kal-pijl{
  width:34px; height:34px; flex:0 0 34px; display:flex; align-items:center;
  justify-content:center; border:1px solid #E3E0DB; border-radius:9px;
  background:#fff; color:#14161A; cursor:pointer;
}
.kal-pijl:hover:not(:disabled){ background:#FFF3EB; border-color:#F6D9C4; color:#E86420; }
.kal-pijl:disabled{ opacity:.3; cursor:default; }
.kal-pijl.kal-leeg{ border:0; background:none; cursor:default; }

.kal-week{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:3px; }
.kal-week b{
  text-align:center; font:700 10.5px/1 'Inter',system-ui,sans-serif;
  letter-spacing:.06em; text-transform:uppercase; color:#6E7883; padding:6px 0;
}
.kal-dagen{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }

.kal-dag{
  position:relative; border:0; background:none; padding:0; cursor:pointer;
  aspect-ratio:1/1; min-height:38px; display:flex; align-items:center;
  justify-content:center; color:#14161A;
  font:500 14px/1 'Inter',system-ui,sans-serif;
}
.kal-dag>span{
  position:relative; z-index:2; width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
}
.kal-dag:hover:not(:disabled)>span{ background:#FFF3EB; }
.kal-dag:focus-visible{ outline:2px solid #FF7D38; outline-offset:-2px; border-radius:9px; }
/* een lege plaats voor een dag uit een andere maand */
.kal-leegdag{ pointer-events:none; }
.kal-uit{ color:#C9C4BC; cursor:default; }
.kal-uit:hover>span{ background:none; }
.kal-nu>span{ box-shadow:inset 0 0 0 1px #C9C4BC; }

/* het gekozen bereik: een doorlopende band met een blokje aan elk uiteinde */
.kal-tussen::before, .kal-proef::before, .kal-van::before, .kal-tot::before{
  content:""; position:absolute; z-index:1; top:2px; bottom:2px; left:-1px; right:-1px;
  background:#FFF3EB;
}
.kal-van::before{ left:50%; border-radius:9px 0 0 9px; }
.kal-tot::before{ right:50%; border-radius:0 9px 9px 0; }
.kal-van.kal-tot::before{ display:none; }
.kal-proef::before{ background:#FDF1E9; }
.kal-van>span, .kal-tot>span{
  background:#FF7D38; color:#241000; font-weight:700;
}
.kal-van:hover>span, .kal-tot:hover>span{ background:#E86420; color:#fff; }
.kal-tussen>span{ background:none; color:#8A4A20; font-weight:600; }

/* de eerste en laatste kolom mogen niet buiten het paneel lopen */
.kal-dagen>.kal-dag:nth-child(7n+1)::before{ left:0; }
.kal-dagen>.kal-dag:nth-child(7n)::before{ right:0; }

/* ---------- de uitleg en de uren ---------- */
.kal-melding{
  margin:13px 0 0; padding:10px 12px; border-radius:9px; background:#F5F3F0;
  color:#3E464F; font:400 13.5px/1.5 'Inter',system-ui,sans-serif;
}
.kal-melding b{ color:#14161A; }
.kal-uren{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:11px; }
.kal-uur{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.kal-uur span{
  font:700 10.5px/1 'Inter',system-ui,sans-serif; letter-spacing:.09em;
  text-transform:uppercase; color:#6E7883;
}
.kal-uur select{
  min-height:46px; border:1px solid #E3E0DB; border-radius:10px; background:#fff;
  padding:0 11px; color:#14161A; font:600 15px/1 'Inter',system-ui,sans-serif;
  width:100%; cursor:pointer;
}
.kal-uur select:disabled{ background:#F5F3F0; color:#B3ADA4; cursor:default; }
.kal-uur select:focus{ outline:2px solid #FF7D38; outline-offset:1px; }

.kal-nb{ margin:10px 0 0; font:400 12.5px/1.5 'Inter',system-ui,sans-serif; color:#6E7883; }

.kal-voet{ display:flex; gap:9px; margin-top:13px; }
.kal-ok{
  flex:1 1 auto; min-height:48px; padding:0 20px; border:0; border-radius:11px;
  background:#FF7D38; color:#241000; cursor:pointer;
  font:700 15px/1 'Inter',system-ui,sans-serif;
}
.kal-ok:hover:not(:disabled){ background:#E86420; color:#fff; }
.kal-ok:disabled{ background:#E3E0DB; color:#8E8880; cursor:default; }
.kal-weg{
  min-height:48px; padding:0 18px; border:1px solid #E3E0DB; border-radius:11px;
  background:#fff; color:#3E464F; cursor:pointer;
  font:600 15px/1 'Inter',system-ui,sans-serif;
}
.kal-weg:hover{ border-color:#C9C4BC; }

/* ---------- smal ---------- */
@media(max-width:619px){
  .kal-maanden{ gap:0; }
  .kal-paneel{ min-width:0; padding:14px; }
  .kal-dag{ min-height:42px; }
  .kal-dag>span{ width:38px; height:38px; }
  .kal-pijl{ width:40px; height:40px; flex-basis:40px; }
  .kal-uur select{ min-height:48px; }
}

/* het blad tegen de onderkant, op een telefoon */
/* Het blad ligt over de vaste onderbalk van de site heen. Erboven passen
   betekende de helft van de kalender opeten. */
.kal-paneel.kal-blad{
  left:8px; right:8px; width:auto; bottom:calc(8px + env(safe-area-inset-bottom));
  top:auto; max-height:82vh; overflow-y:auto; padding:14px 14px 0;
  border-radius:16px;
}
.kal-blad .kal-voet{
  position:sticky; bottom:0; background:#fff; padding:12px 0 14px; margin-top:12px;
  box-shadow:0 -10px 14px rgba(255,255,255,.96);
}
.kal-blad .kal-nb{ margin-bottom:2px; }
.kal-bak.kal-vast .kal-paneel.kal-blad{ position:static; max-height:none; overflow:visible; }

/* een waas achter het blad, zodat duidelijk is dat de rest even wacht */
body.kal-open::after{ content:none; }
@media(max-width:619px){
  body.kal-open::after{
    content:""; position:fixed; inset:0; z-index:9400;
    background:rgba(20,22,26,.5); animation:kal-op .14s ease-out;
  }
}
