/* Afspraak maken: stappen, kalender en tijden */

.boeking { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; align-items: start; }

/* Stappenbalk */
.stapbalk { display: flex; gap: 0; margin-bottom: 3rem; border-bottom: 1px solid var(--rand); }
.stapbalk li {
    list-style: none; flex: 1; padding: 0 0 1.1rem; position: relative;
    font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #bcaf9f;
    display: flex; align-items: center; gap: .7rem;
}
.stapbalk li::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: transparent; transition: background .3s;
}
.stapbalk li.nu { color: var(--espresso); }
.stapbalk li.nu::after { background: var(--goud); }
.stapbalk li.klaar { color: var(--salie); }
.stapbalk li.klaar::after { background: var(--salie); }
.stapbalk .bol {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    border: 1px solid currentColor; display: grid; place-items: center;
    font-size: .74rem; letter-spacing: 0;
}
.stapbalk li.nu .bol { background: var(--goud); border-color: var(--goud); color: #fff; }
.stapbalk li.klaar .bol { background: var(--salie); border-color: var(--salie); color: #fff; }

/* Keuzeblokken */
.keuzes { display: grid; gap: 1rem; }
.keuze {
    display: flex; gap: 1.2rem; align-items: center;
    background: var(--wit); border: 1px solid var(--rand); border-radius: var(--rond);
    padding: 1.15rem; cursor: pointer; transition: all .22s; text-align: left; width: 100%;
    font-family: inherit; font-size: inherit; color: inherit;
}
.keuze:hover { border-color: var(--goud-zacht); box-shadow: var(--schaduw); }
.keuze.gekozen { border-color: var(--goud); background: #fdfaf4; box-shadow: 0 0 0 1px var(--goud); }
.keuze-beeld { width: 84px; height: 84px; border-radius: var(--rond); object-fit: cover; flex: none; background: var(--zand); }
.keuze-in { flex: 1; min-width: 0; }
.keuze-in strong { display: block; font-family: var(--serif); font-size: 1.28rem; font-weight: 500; color: var(--espresso); line-height: 1.2; margin-bottom: .25rem; }
.keuze-in p { margin: 0; font-size: .92rem; color: var(--taupe); line-height: 1.55; }
.keuze-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .5rem; font-size: .78rem; color: var(--taupe); }
.keuze-meta span { display: inline-flex; align-items: center; gap: .35em; }
.keuze-prijs { font-family: var(--serif); font-size: 1.45rem; color: var(--espresso); white-space: nowrap; flex: none; padding-left: .5rem; }

.merkje {
    display: inline-block; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
    padding: .25em .7em; border-radius: 100px; background: var(--zand); color: var(--taupe);
}
.merkje-goud { background: #f6ecda; color: #8a6a34; }
.merkje-salie { background: #eaf0e8; color: #4f6647; }
.merkje-klei { background: #fbeae4; color: #8f4b30; }

/* Kalender */
.agenda { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--rond); padding: 1.7rem; }
.agenda-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.agenda-maand { font-family: var(--serif); font-size: 1.5rem; color: var(--espresso); text-transform: capitalize; }
.agenda-nav { display: flex; gap: .5rem; }
.agenda-nav button {
    width: 38px; height: 38px; border: 1px solid var(--rand); background: var(--wit);
    border-radius: var(--rond); cursor: pointer; display: grid; place-items: center;
    color: var(--espresso); transition: all .2s;
}
.agenda-nav button:hover:not(:disabled) { border-color: var(--goud); color: var(--goud); }
.agenda-nav button:disabled { opacity: .3; cursor: not-allowed; }

.agenda-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.agenda-dagnaam {
    text-align: center; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--taupe); padding-bottom: .6rem;
}
.agenda-dag {
    aspect-ratio: 1; border: 1px solid transparent; background: var(--zand-licht);
    border-radius: var(--rond); cursor: pointer; font-family: var(--sans); font-size: .95rem;
    color: var(--espresso); display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; transition: all .18s; position: relative; padding: 0;
}
.agenda-dag:hover:not(:disabled) { border-color: var(--goud); background: #fdf8f0; }
.agenda-dag .punt { width: 4px; height: 4px; border-radius: 50%; background: var(--salie); }
.agenda-dag:disabled { background: transparent; color: #cabfb2; cursor: not-allowed; }
.agenda-dag.leeg { background: transparent; cursor: default; pointer-events: none; }
.agenda-dag.vol { background: transparent; color: #cabfb2; text-decoration: line-through; }
.agenda-dag.gekozen,
.agenda-dag.gekozen:hover:not(:disabled) { background: var(--espresso); border-color: var(--espresso); color: #fff; }
.agenda-dag.gekozen .punt { background: var(--goud-zacht); }
.agenda-dag.vandaag:not(.gekozen) { box-shadow: inset 0 0 0 1px var(--goud-zacht); }

.agenda-uitleg { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--rand); font-size: .78rem; color: var(--taupe); }
.agenda-uitleg span { display: inline-flex; align-items: center; gap: .45em; }
.blokje { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.blokje.vrij { background: var(--zand-licht); border: 1px solid var(--rand); }
.blokje.geen { background: transparent; border: 1px dashed var(--rand); }
.blokje.nu { background: var(--espresso); }

/* Tijden */
.tijdvak { margin-top: 2rem; }
.tijdvak h4 { margin-bottom: 1rem; }
.tijden-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: .6rem; }
.tijdknop {
    padding: .85em .6em; border: 1px solid var(--rand); background: var(--wit);
    border-radius: var(--rond); cursor: pointer; font-family: var(--sans);
    font-size: .95rem; color: var(--espresso); transition: all .2s;
}
.tijdknop:hover { border-color: var(--goud); background: #fdf8f0; }
.tijdknop.gekozen { background: var(--espresso); border-color: var(--espresso); color: #fff; }

.leegmelding {
    text-align: center; padding: 2.5rem 1.5rem; color: var(--taupe);
    background: var(--zand-licht); border-radius: var(--rond); font-size: .96rem;
}
.laden { text-align: center; padding: 2rem; color: var(--taupe); font-size: .92rem; }

/* Samenvatting naast het formulier */
.samenvatting {
    background: var(--wit); border: 1px solid var(--rand); border-radius: var(--rond);
    box-shadow: var(--schaduw); position: sticky; top: 96px; overflow: hidden;
}
.samenvatting-kop { background: var(--espresso); color: #fff; padding: 1.4rem 1.7rem; }
.samenvatting-kop h3 { color: #fff; font-family: var(--sans); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; margin: 0; font-weight: 400; }
.samenvatting-in { padding: 1.7rem; }
.sam-regel { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--rand); font-size: .94rem; }
.sam-regel:last-of-type { border-bottom: 0; }
.sam-regel .sleutel { color: var(--taupe); flex: none; }
.sam-regel .waarde { text-align: right; color: var(--espresso); }
.sam-regel .waarde.leeg { color: #c5b8a9; font-style: italic; }
.sam-totaal {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--goud-zacht);
}
.sam-totaal .sleutel { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); }
.sam-totaal .waarde { font-family: var(--serif); font-size: 2rem; color: var(--espresso); }
.samenvatting .knop { width: 100%; margin-top: 1.5rem; }
.sam-hulp { font-size: .82rem; color: var(--taupe); margin: 1rem 0 0; text-align: center; }

/* Bevestiging */
.bevestiging { max-width: 640px; margin-inline: auto; text-align: center; }
.vinkbol {
    width: 88px; height: 88px; border-radius: 50%; background: #eef4ec;
    display: grid; place-items: center; margin: 0 auto 2rem; color: var(--salie);
}
.bon {
    background: var(--wit); border: 1px solid var(--rand); border-radius: var(--rond);
    box-shadow: var(--schaduw); padding: 2.2rem; text-align: left; margin: 2.5rem 0;
}
.bon-nr {
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--taupe); text-align: center; padding-bottom: 1.3rem;
    margin-bottom: 1.3rem; border-bottom: 1px dashed var(--rand);
}
.bon-nr strong { display: block; font-family: var(--serif); font-size: 1.5rem; color: var(--espresso); letter-spacing: .06em; margin-top: .3rem; }

@media (max-width: 980px) {
    .boeking { grid-template-columns: 1fr; }
    .samenvatting { position: static; }
}

@media (max-width: 760px) {
    .stapbalk li span.naam { display: none; }
    .stapbalk li { justify-content: center; padding-bottom: .9rem; }
    .keuze { flex-wrap: wrap; }
    .keuze-beeld { width: 62px; height: 62px; }
    .keuze-prijs { font-size: 1.25rem; }
    .agenda { padding: 1.1rem; }
    .agenda-dag { font-size: .86rem; }
    .tijden-raster { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}