/* ════════════════════════════════════════════════════════════
   BOEKINGSPAGINA

   Eén stap tegelijk in een paneel, met een samenvatting ernaast die
   meegroeit. Dezelfde opzet als de zustersite, maar in het palet van
   deze praktijk — de kleuren en lettertypes komen uit style.css.
   ════════════════════════════════════════════════════════════ */

.boek-main {
  padding-top: clamp(10rem, 18vh, 13rem);
  padding-bottom: clamp(4rem, 8vh, 6rem);
  background:
    radial-gradient(32rem 26rem at 86% 4%, rgba(243, 234, 225, .8), rgba(250, 246, 240, 0) 68%),
    radial-gradient(26rem 22rem at 6% 46%, rgba(237, 227, 212, .5), rgba(250, 246, 240, 0) 70%);
}

.boek-kop {
  max-width: 40rem;
  margin: 0 auto clamp(2.5rem, 5vh, 3.5rem);
  text-align: center;
}
.boek-kop h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); margin-bottom: 1.1rem; }
.boek-kop p { max-width: 34rem; margin-inline: auto; }

/* ── Voortgang ─────────────────────────────────────────────── */

.stappen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.6rem, 2.5vw, 1.8rem);
  list-style: none;
  counter-reset: stap;
  margin-bottom: clamp(2rem, 4vh, 3rem);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.stappen li {
  counter-increment: stap;
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--body-c);
  opacity: .4;
  transition: opacity .3s var(--ease-out);
}
.stappen li::before {
  content: counter(stap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  flex: none;
  border: 1px solid var(--hairline-goud);
  border-radius: 50%;
  font-size: .78rem;
  letter-spacing: 0;
  color: var(--goud-text);
}
.stappen li[aria-current="step"] { opacity: 1; }
.stappen li[aria-current="step"]::before {
  background: var(--goud-deep);
  border-color: var(--goud-deep);
  color: var(--paper);
}
.stappen li.gedaan { opacity: .85; }
.stappen li.gedaan::before { background: var(--sand); content: "✓"; }

/* ── Raster: samenvatting naast het paneel ─────────────────── */

.boek-grid {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.boek-samenvatting {
  position: sticky;
  top: 7.5rem;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--hairline-goud);
  border-radius: var(--radius);
  background: var(--paper-soft);
}
.boek-samenvatting h2 {
  font-size: .72rem;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--goud-text);
  margin-bottom: 1.1rem;
}
.samenvatting-rij {
  display: grid;
  gap: .1rem;
  padding: .7rem 0;
  border-top: 1px solid var(--hairline);
}
.samenvatting-rij:first-of-type { border-top: 0; padding-top: 0; }
.samenvatting-rij dt {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--goud-text);
}
.samenvatting-rij dd {
  font-size: .95rem;
  color: var(--ink);
  line-height: 1.5;
}
.samenvatting-rij dd.leeg { color: var(--body-c); opacity: .5; font-style: italic; }

.boek-paneel {
  min-height: 22rem;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid rgba(82, 75, 65, .08);
  border-radius: var(--radius);
  background: var(--paper);
}
.paneel-titel {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  margin-bottom: .5rem;
}
.paneel-uitleg { font-size: .95rem; margin-bottom: 1.6rem; }

/* ── Stap 1: sessiekeuze ───────────────────────────────────── */

.sessie-lijst { display: grid; gap: .8rem; }
.sessie-keuze {
  display: grid;
  gap: .3rem;
  text-align: left;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--hairline-goud);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--body-c);
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out);
}
.sessie-keuze:hover { border-color: var(--goud); background: var(--paper-soft); }
.sessie-keuze[aria-pressed="true"] { border-color: var(--goud-deep); background: var(--sand); }
.sessie-keuze strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--ink);
}
.sessie-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--goud-text);
}

/* ── Stap 2: kalender ──────────────────────────────────────── */

.kalender-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.kalender-maand {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink);
  text-transform: capitalize;
}
.kalender-nav { display: flex; gap: .4rem; flex: none; }
.kalender-nav button {
  /* flex:none is hier geen opsmuk: zonder dit krimpen de knoppen mee
     zodra de maandnaam breed is, en dan schuiven ze over elkaar.
     De inhoud is een SVG die met flexbox exact in het midden komt —
     de tekentekens die hier eerst stonden hingen aan de metrics van
     het lettertype en stonden daardoor te hoog. */
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border: 1px solid var(--hairline-goud);
  border-radius: 50%;
  background: var(--paper);
  color: var(--goud-text);
  cursor: pointer;
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out),
              opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.kalender-nav button svg { width: 1.05rem; height: 1.05rem; }
.kalender-nav button:active:not(:disabled) { transform: scale(.92); }
.kalender-nav button:hover:not(:disabled) { border-color: var(--goud); background: var(--paper-soft); }
.kalender-nav button:disabled { opacity: .3; cursor: default; }

.kalender-raster {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .3rem;
  /* Bovengrens: in de eenkolomsopmaak zou het raster anders de volle
     paneelbreedte pakken, met dagcellen van 70 px als gevolg. */
  max-width: 22rem;
}
.kalender-dagnaam {
  text-align: center;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--goud-text);
  padding-bottom: .3rem;
}
.kalender-dag {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--body-c);
  cursor: default;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
/* Dagen zonder momenten blijven staan: weglaten zou het raster laten
   verspringen en de weekkolommen breken. */
.kalender-dag:disabled { opacity: .26; }
.kalender-dag.beschikbaar {
  border-color: var(--hairline-goud);
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
}
.kalender-dag.beschikbaar:hover { background: var(--sand); border-color: var(--goud); }
.kalender-dag[aria-pressed="true"],
.kalender-dag[aria-pressed="true"]:hover {
  background: var(--goud-deep);
  border-color: var(--goud-deep);
  color: var(--paper);
}
.kalender-dag.vandaag:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1px var(--goud); }
.kalender-dag.leeg { border: 0; }

/* Een vaste band voor de kalender. Met `auto` kromp die kolom tot de
   breedte van de dagcijfers zelf, en dan werden de cellen zo klein dat
   je ze op een telefoon niet meer kon aantikken. */
.kalender-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}
/* Zonder dit houdt elke kolom haar min-content aan. De maandknoppen
   naast een lange maandnaam zijn dan breder dan het scherm, en de hele
   pagina rekt mee op. */
.kalender-layout > * { min-width: 0; }
.kalender-gerust {
  font-size: .88rem;
  line-height: 1.7;
  color: var(--body-c);
  padding-left: clamp(0rem, 1vw, 1rem);
  border-left: 1px solid var(--hairline);
  padding-block: .2rem;
}
.kalender-gerust p + p { margin-top: .8rem; }
.kalender-legende {
  margin-top: 1rem;
  font-size: .76rem;
  color: var(--body-c);
}
.kalender-legende b {
  display: inline-block;
  width: .85rem;
  height: .85rem;
  border: 1px solid var(--hairline-goud);
  border-radius: 50%;
  vertical-align: -1px;
  margin-right: .3rem;
}

/* ── Stap 3: tijdsloten ────────────────────────────────────── */

.dagdeel-kop {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--goud-text);
  margin: 1.4rem 0 .7rem;
}
.dagdeel-kop:first-child { margin-top: 0; }
.slot-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
  gap: .5rem;
}
.slot {
  padding: .7rem .4rem;
  border: 1px solid var(--hairline-goud);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out), color .2s var(--ease-out);
}
.slot:hover { border-color: var(--goud); background: var(--paper-soft); }
.slot[aria-pressed="true"] { background: var(--goud-deep); border-color: var(--goud-deep); color: var(--paper); }

/* ── Stap 4: formulier ─────────────────────────────────────── */

.boek-formulier { display: grid; gap: 1.1rem; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.privacy-noot {
  font-size: .82rem;
  line-height: 1.65;
  color: var(--body-c);
}

/* ── Navigatie tussen de stappen ───────────────────────────── */

.paneel-voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
}
.terug-link {
  background: none;
  border: 0;
  padding: .4rem 0;
  font-family: var(--font-body);
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--goud-text);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-out);
}
.terug-link:hover { border-color: var(--goud); }
.btn[disabled] { opacity: .45; cursor: default; }

/* ── Beweging tussen de stappen ────────────────────────────── */

/* Een stapwissel verving de inhoud in één frame, wat hard aanvoelt bij
   een pagina die verder rustig is. De wikkel schuift nu kort omhoog
   terwijl ze verschijnt; de kop en de uitleg lopen er een tikje op
   vooruit zodat het oog weet waar het moet beginnen. */
@keyframes stap-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.stap-inhoud { animation: stap-in .4s var(--ease-out) both; }
.stap-inhoud > .paneel-titel { animation: stap-in .45s var(--ease-out) .04s both; }
.stap-inhoud > .paneel-uitleg { animation: stap-in .45s var(--ease-out) .08s both; }

/* De keuzeknoppen komen er net iets later achteraan, in volgorde. Meer
   dan een handvol zou het traag maken, dus na de zesde stopt het. */
.sessie-keuze { animation: stap-in .45s var(--ease-out) both; }
.sessie-keuze:nth-child(1) { animation-delay: .10s; }
.sessie-keuze:nth-child(2) { animation-delay: .16s; }
.sessie-keuze:nth-child(3) { animation-delay: .22s; }
.sessie-keuze:nth-child(n+4) { animation-delay: .26s; }

.kalender-dag.beschikbaar,
.slot { transition: background .2s var(--ease-out), border-color .2s var(--ease-out),
                    color .2s var(--ease-out), transform .18s var(--ease-out); }
.kalender-dag.beschikbaar:active,
.slot:active { transform: scale(.94); }

/* De samenvatting licht kort op zodra er een waarde bijkomt, zodat de
   bezoeker ziet dát er iets veranderd is zonder dat het schreeuwt. */
@keyframes waarde-in { from { background: rgba(176, 141, 87, .18); } to { background: transparent; } }
.samenvatting-rij dd.net-gezet { animation: waarde-in .9s var(--ease-out); border-radius: .3rem; }

/* ── Meldingen, laden, bevestiging ─────────────────────────── */

.melding {
  border-radius: .7rem;
  padding: .95rem 1.15rem;
  margin-bottom: 1.3rem;
  font-size: .95rem;
  line-height: 1.6;
  background: rgba(176, 141, 87, .12);
  border: 1px solid var(--hairline-goud);
  color: var(--goud-text);
}
.melding.fout {
  background: rgba(166, 84, 60, .09);
  border-color: rgba(166, 84, 60, .38);
  color: #8A4230;
}

.laden { text-align: center; padding: 3rem 0; color: var(--body-c); }
.laden-mark {
  width: 2.2rem;
  height: 2.2rem;
  margin: 0 auto 1rem;
  border: 1px solid var(--hairline-goud);
  border-top-color: var(--goud-deep);
  border-radius: 50%;
  animation: laden-draai 1s linear infinite;
}
@keyframes laden-draai { to { transform: rotate(360deg); } }

.geen-slots { color: var(--body-c); font-style: italic; }

.bevestiging { text-align: center; padding: 1rem 0; }
.bevestiging h2 { margin-bottom: 1rem; }
.bevestiging p { margin-bottom: 1rem; }
.bevestiging .btn { margin-top: .6rem; }

/* ── Responsief ────────────────────────────────────────────── */

@media (max-width: 60rem) {
  /* De samenvatting hoort bovenaan zodra ze niet meer naast het paneel
     past: onderaan zou ze pas ná het formulier verschijnen, en dan is
     ze nutteloos. */
  .boek-grid { grid-template-columns: minmax(0, 1fr); }
  .boek-samenvatting { position: static; }
  .kalender-layout { grid-template-columns: minmax(0, 1fr); }
  .kalender-gerust { border-left: 0; border-top: 1px solid var(--hairline); padding-left: 0; padding-top: 1rem; }
}

/* Onder 23rem (368 px) is er zo weinig ruimte dat de dagcellen onder
   de 30 px zakken en niet meer te mikken zijn. Daar halen we de ruimte
   uit de paneelrand en de tussenruimte van het raster. */
@media (max-width: 23rem) {
  .boek-paneel { padding: 1.2rem 1rem; }
  .kalender-raster { gap: .15rem; }
  .kalender-dagnaam { font-size: .6rem; }
}

@media (max-width: 40rem) {
  .stappen { gap: .5rem; font-size: .62rem; letter-spacing: .1em; }
  .stappen li::before { width: 1.5rem; height: 1.5rem; font-size: .7rem; }
  .paneel-voet { flex-direction: column-reverse; align-items: stretch; }
  .paneel-voet .btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  /* Niet 0.01s maar echt uit: een animatie van bijna niets flikkert. */
  .laden-mark,
  .stap-inhoud,
  .stap-inhoud > .paneel-titel,
  .stap-inhoud > .paneel-uitleg,
  .sessie-keuze,
  .samenvatting-rij dd.net-gezet { animation: none; }
  .kalender-dag.beschikbaar:active,
  .slot:active,
  .kalender-nav button:active:not(:disabled) { transform: none; }
}

/* Zonder JavaScript wordt de wizard nooit opgebouwd en blijft de
   laadmelding voor altijd draaien. De <noscript> in boeken.html neemt
   het dan over met het e-mailadres en het telefoonnummer; deze regel
   haalt de spinner weg zodat die twee elkaar niet tegenspreken.
   De klasse js wordt bovenaan elke pagina door een inline script gezet. */
html:not(.js) .boek-paneel .laden { display: none; }

/* Zelfde reden als de laadmelding hierboven: zonder JavaScript wordt er
   nooit een stap gezet, dus is een voortgangsbalk die op stap 1 blijft
   staan alleen verwarrend. De noscript in boeken.html vertelt wat er
   dan wél kan. */
html:not(.js) .stappen { display: none; }