/*
 * Front-end van Rellicon Bookables: het capaciteitslabel en de datumkeuze.
 *
 * Alle kleuren en maten lopen via custom properties met een neutrale terugval,
 * zodat een theme ze kan overschrijven zonder de plugin aan te passen. Bewust
 * geen actie-kleur op het label: het is informatie, geen knop.
 *
 * Toegankelijkheid: tekst vanaf 17px, contrast ruim boven AA, raakvlakken van
 * minimaal 44px op de keuzeopties en geen enkele animatie.
 */

:root {
    --rlc-bookables-text: #23291f;
    --rlc-bookables-muted: #4a5245;
    --rlc-bookables-surface: #eef1ea;
    --rlc-bookables-border: #b9c2b0;
    --rlc-bookables-focus: #23291f;
    --rlc-bookables-radius: 4px;
    --rlc-bookables-font-size: 1.0625rem; /* 17px */
    --rlc-bookables-tap-target: 44px;
}

.rlc-bookables-status {
    display: inline-block;
    max-width: 100%;
    margin: 0 0 0.75em;
    padding: 0.25em 0.75em;
    border: 1px solid var(--rlc-bookables-border);
    border-radius: var(--rlc-bookables-radius);
    background: var(--rlc-bookables-surface);
    color: var(--rlc-bookables-text);
    font-size: var(--rlc-bookables-font-size);
    font-weight: 600;
    line-height: 1.4;
}

.rlc-bookables-status--full {
    /* Uitverkocht is rustiger dan bijna vol: geen rand, alleen tekst. */
    border-color: transparent;
    background: transparent;
    color: var(--rlc-bookables-muted);
    padding-left: 0;
    padding-right: 0;
}

.rlc-bookables-list {
    max-width: 100%;
    margin: 0 0 1.5em;
    padding: 0;
    border: 0;
}

.rlc-bookables-list__legend {
    padding: 0;
    margin: 0 0 0.5em;
    color: var(--rlc-bookables-text);
    font-size: var(--rlc-bookables-font-size);
    font-weight: 600;
}

.rlc-bookables-list__option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
    min-height: var(--rlc-bookables-tap-target);
    max-width: 100%;
    padding: 0.25em 0;
    color: var(--rlc-bookables-text);
    font-size: var(--rlc-bookables-font-size);
    line-height: 1.4;
    cursor: pointer;
}

.rlc-bookables-list__option input[type="radio"] {
    width: 1.25em;
    height: 1.25em;
    margin: 0;
    flex: 0 0 auto;
}

.rlc-bookables-list__option:focus-within {
    outline: 2px solid var(--rlc-bookables-focus);
    outline-offset: 2px;
}

.rlc-bookables-list__label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.rlc-bookables-list__note {
    color: var(--rlc-bookables-muted);
    font-size: 1rem;
}

/*
 * De kaart met de eerstvolgende editie.
 *
 * De opmaak komt uit de brandguide: het vlak, de badge en de tekstrollen staan
 * als klassen in de HTML. Hier staat alleen wat de brandguide niet levert. Dat
 * is in de praktijk de vulbalk, plus het wegnemen van de inspringing die een
 * browser standaard aan een dd geeft.
 *
 * Alle waarden lopen via een token van de brandguide met een neutrale terugval,
 * zodat een site zonder brandguide een leesbare maar kale kaart houdt en een
 * site met brandguide vanzelf de eigen maten en kleuren krijgt.
 */

:root {
    --rlc-bookables-balk-hoogte: var(--space-3xs, 4px);
    --rlc-bookables-balk-radius: var(--radius-pill, 999px);
    --rlc-bookables-balk-spoor: var(--surface-sunken, #eef1ea);
    --rlc-bookables-balk-vulling: var(--brand, #4a5245);
    --rlc-bookables-editie-ruimte: var(--space-xs, 0.75rem);
}

.rlc-bookables-editie {
    /* Het oppervlak is een keuze (zie Types\Surface) en rlc-content zet zelf
       geen tekstmaat, terwijl de vlakkenladder dat wel deed. De kaart leest
       daarom hier op haar eigen maat, welk oppervlak er ook onder ligt. */
    font-size: var(--rlc-bookables-font-size);
}

.rlc-bookables-editie__rijen {
    margin: 0;
}

.rlc-bookables-editie__rij dd {
    /* Een browser springt een dd standaard in; in een rij hoort dat niet. */
    margin-left: 0;
}

.rlc-bookables-editie__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rlc-bookables-editie-ruimte);
    margin-top: var(--rlc-bookables-editie-ruimte);
}

.rlc-bookables-editie__staat {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rlc-bookables-editie-ruimte);
}

.rlc-bookables-editie__balk {
    /* Versiering naast de tekst, geen enkele beweging: wat de balk laat zien
       staat hierboven ook gewoon in woorden. */
    overflow: hidden;
    margin-top: var(--rlc-bookables-editie-ruimte);
    height: var(--rlc-bookables-balk-hoogte);
    border-radius: var(--rlc-bookables-balk-radius);
    background: var(--rlc-bookables-balk-spoor);
}

.rlc-bookables-editie__balk-vulling {
    height: 100%;
    border-radius: inherit;
    background: var(--rlc-bookables-balk-vulling);
}

/*
 * De agenda: alle komende datums onder elkaar.
 *
 * De opmaak komt uit de brandguide: de pil, de knop en de tekstrollen staan als
 * klassen in de HTML. Hier staat alleen wat de brandguide niet levert, en dat
 * is de verdeling van de regel plus het inklappen op een smal scherm.
 *
 * Toegankelijkheid, overgenomen uit de agenda van het theme: de lijst leest op
 * 17px, elke knop is minstens 44px hoog en de pil houdt het contrast van de
 * brandguide. Alle waarden lopen via een token met een neutrale terugval.
 */

:root {
    --rlc-bookables-agenda-ruimte: var(--space-sm, 1rem);
    --rlc-bookables-agenda-regel-ruimte: var(--space-xs, 1.25rem);
    --rlc-bookables-agenda-lijn: var(--border-subtle, #b9c2b0);
}

.rlc-bookables-agenda__lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--rlc-bookables-font-size);
}

/*
 * De CTA boven de lijst: een agenda-item zonder datum. Dezelfde tekstrollen
 * als een regel, alleen zonder lijn eronder en met wat lucht naar de lijst.
 */
.rlc-bookables-agenda__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rlc-bookables-agenda-ruimte);
    margin-bottom: var(--rlc-bookables-agenda-regel-ruimte);
    font-size: var(--rlc-bookables-font-size);
}

.rlc-bookables-agenda__cta-tekst {
    flex: 1 1 auto;
    min-width: 0;
}

.rlc-bookables-agenda__cta-tekst > p {
    margin: 0;
}

.rlc-bookables-agenda__cta-titel {
    font-weight: 600;
}

.rlc-bookables-agenda__regel {
    justify-content: space-between;
    gap: var(--rlc-bookables-agenda-ruimte);
    padding: var(--rlc-bookables-agenda-regel-ruimte) 0;
    border-bottom: 1px solid var(--rlc-bookables-agenda-lijn);
}

.rlc-bookables-agenda__regel:first-child {
    border-top: 1px solid var(--rlc-bookables-agenda-lijn);
}

.rlc-bookables-agenda__info {
    flex: 1 1 auto;
    min-width: 0;
}

.rlc-bookables-agenda__datum {
    margin: 0 0 0.25em;
}

.rlc-bookables-agenda__sub {
    margin-left: 0.35em;
}

.rlc-bookables-agenda__titel {
    margin: 0;
}

.rlc-bookables-agenda__staat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    flex: 0 0 auto;
}

.rlc-bookables-agenda__actie {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Raakvlak van minstens 44px, ook als een theme de knop kleiner maakt. */
    min-height: var(--rlc-bookables-tap-target);
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .rlc-bookables-agenda__regel {
        flex-direction: column;
        align-items: flex-start;
    }

    .rlc-bookables-agenda__actie {
        width: 100%;
        justify-content: flex-start;
    }
}

/*
 * De editietegel in het raster van rlc-wc-filter.
 *
 * De rasterbroer van de agenda-regel: dezelfde pil, dezelfde knop, dezelfde
 * tekstrollen uit de brandguide. Hier staat alleen wat de brandguide niet
 * levert, en dat is de indeling van de tegel plus het maandkopje erboven. Het
 * raster zelf komt van de filter; die zet de kolommen.
 *
 * Toegankelijkheid gelijk aan de agenda: de tegel leest op 17px, elke knop is
 * minstens 44px hoog en de pil houdt het contrast van de brandguide.
 */

:root {
    --rlc-bookables-tegel-ruimte: var(--space-sm, 1rem);
    /* Boven een maandkop hoort de rust van een nieuw hoofdstuk en eronder de
       kleinere stap naar de tegels die erbij horen. Twee tokens dus, want een
       kop die even ver van de vorige maand als van zijn eigen tegels staat,
       hoort bij geen van beide. */
    --rlc-bookables-tegel-maand-ruimte: var(--space-xl, 3rem);
    --rlc-bookables-tegel-maand-ruimte-onder: var(--space-xs, 0.75rem);
}

.rlc-bookables-tegel {
    display: flex;
    flex-direction: column;
    gap: var(--rlc-bookables-tegel-ruimte);
    height: 100%;
    font-size: var(--rlc-bookables-font-size);
}

/* Staat de tegel op een content-oppervlak, dan zet dat component ook zijn
   flow-ruimte tussen de kinderen. Die telt hier bij de gap op en maakt het beeld
   los van de tekst; de verdeling van de tegel doen wij zelf. */
.rlc-bookables-tegel > * + * {
    margin-block-start: 0;
}

.rlc-bookables-tegel__inhoud {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    /* De knop zakt naar de onderkant, zodat de knoppen van tegels naast
       elkaar op een lijn staan ook als de titels verschillend lang zijn. */
    flex: 1 1 auto;
}

.rlc-bookables-tegel__datum,
.rlc-bookables-tegel__sub,
.rlc-bookables-tegel__titel {
    margin: 0;
}

.rlc-bookables-tegel__staat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
}

.rlc-bookables-tegel__actie {
    display: flex;
    align-items: flex-end;
    /* Raakvlak van minstens 44px, ook als een theme de knop kleiner maakt. */
    min-height: var(--rlc-bookables-tap-target);
    margin-top: auto;
}

.rlc-bookables-tegel-maand {
    margin: var(--rlc-bookables-tegel-maand-ruimte) 0
        var(--rlc-bookables-tegel-maand-ruimte-onder);
}

.rlc-bookables-tegel-maand:first-child {
    margin-top: 0;
}

/*
 * Het overzicht "Volgende edities" met het inschrijfvenster.
 *
 * De opmaak komt uit de brandguide: de knop en de tekstrollen staan als klassen
 * in de HTML. Hier staat alleen wat de brandguide niet levert, en dat is de
 * verdeling over vier kolommen, de statusstip, het venster en het inklappen op
 * een smal scherm.
 *
 * Toegankelijkheid gelijk aan de agenda: het overzicht leest op 17px, elke knop
 * is minstens 44px hoog en er zit geen enkele animatie in. Alle waarden lopen
 * via een token met een neutrale terugval.
 */

:root {
    --rlc-bookables-reserveren-lijn: var(--border-subtle, #b9c2b0);
    --rlc-bookables-reserveren-ruimte: var(--space-sm, 1rem);
    --rlc-bookables-reserveren-regel-ruimte: var(--space-xs, 1.25rem);
    --rlc-bookables-reserveren-stip: var(--space-2xs, 8px);
    /* De kleuren van de stip volgen die van de pil in de brandguide. */
    --rlc-bookables-reserveren-success: var(--success, #3d7a4a);
    --rlc-bookables-reserveren-warning: var(--warning, #a3661a);
    --rlc-bookables-reserveren-danger: var(--danger, #a33b2d);
}

/*
 * Een raster voor de hele tabel, en niet een per regel. De laatste kolom staat
 * op auto: die is in de kopregel leeg en in een regel een knop. Rekenden de kop
 * en de regels elk hun eigen breedtes uit, dan zou Status niet onder Status
 * staan. Met subgrid erven ze allemaal dezelfde kolommen, terwijl elke regel
 * zijn eigen doos houdt en dus zijn eigen scheidingslijn en achtergrond kan
 * dragen.
 */
.rlc-bookables-reserveren__tabel {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) auto;
}

.rlc-bookables-reserveren__lijst {
    display: contents;
}

.rlc-bookables-reserveren__kop,
.rlc-bookables-reserveren__regel {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    gap: var(--rlc-bookables-reserveren-ruimte);
}

/*
 * Zonder subgrid valt alles terug op wat het was: twee rasters die er goed
 * genoeg uitzien, in plaats van vier kolommen die op elkaar stapelen.
 */
@supports not (grid-template-columns: subgrid) {
    .rlc-bookables-reserveren__tabel,
    .rlc-bookables-reserveren__lijst {
        display: block;
    }

    .rlc-bookables-reserveren__kop,
    .rlc-bookables-reserveren__regel {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) auto;
    }
}

.rlc-bookables-reserveren__kop {
    padding-top: var(--space-2xs, 0.5rem);
    padding-bottom: var(--space-2xs, 0.5rem);
    color: var(--text-secondary, inherit);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
}

.rlc-bookables-reserveren__lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--rlc-bookables-font-size);
}

.rlc-bookables-reserveren__regel {
    padding: var(--rlc-bookables-reserveren-regel-ruimte) 0;
    border-bottom: 1px solid var(--rlc-bookables-reserveren-lijn);
}

.rlc-bookables-reserveren__regel:first-child {
    border-top: 1px solid var(--rlc-bookables-reserveren-lijn);
}

.rlc-bookables-reserveren__datum {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-weight: 600;
}

.rlc-bookables-reserveren__programma {
    font-weight: 400;
}

.rlc-bookables-reserveren__staat,
.rlc-bookables-reserveren__locatie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    min-width: 0;
}

/* De stip is versiering naast het woord ernaast; ze staat er nooit alleen. */
.rlc-bookables-reserveren__stip {
    flex: 0 0 auto;
    inline-size: var(--rlc-bookables-reserveren-stip);
    block-size: var(--rlc-bookables-reserveren-stip);
    border-radius: var(--radius-full, 50%);
    background: currentColor;
}

.rlc-bookables-reserveren__stip--success {
    color: var(--rlc-bookables-reserveren-success);
}

.rlc-bookables-reserveren__stip--warning {
    color: var(--rlc-bookables-reserveren-warning);
}

.rlc-bookables-reserveren__stip--danger {
    color: var(--rlc-bookables-reserveren-danger);
}

.rlc-bookables-reserveren__pin {
    flex: 0 0 auto;
}

.rlc-bookables-reserveren__actie {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Raakvlak van minstens 44px, ook als een theme de knop kleiner maakt. */
    min-height: var(--rlc-bookables-tap-target);
}

@media (max-width: 640px) {
    .rlc-bookables-reserveren__kop {
        display: none;
    }

    /* Op een smal scherm is er niets uit te lijnen: elke regel wordt een
       blokje onder elkaar, dus het gedeelde raster mag weg. */
    .rlc-bookables-reserveren__tabel {
        display: block;
    }

    .rlc-bookables-reserveren__regel {
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr);
    }

    .rlc-bookables-reserveren__actie {
        justify-content: flex-start;
    }
}

/*
 * Het compacte overzicht met tijdslots: een stappenflow.
 *
 * Vier rustige stappen onder elkaar in de pagina: waar het gesprek over gaat,
 * welke dienst, welke dag en tijd, en de gegevens. De server rendert ze alle
 * vier; het script laat er een zien. Zonder JavaScript zet de noscript-regel in
 * het blok de stapknoppen en de kalender weg en blijven de formulieren staan,
 * dus hier staat geen enkele regel die iets onbereikbaar maakt.
 *
 * Alles via een token met een neutrale terugval, en geen regel op een kale
 * .rlc-btn: die klasse is van de brandguide en een site die er een heeft hoort
 * hem niet overschreven te krijgen.
 */
.rlc-bookables-reserveren__slots {
    display: flex;
    flex-direction: column;
    gap: var(--space-s, 1rem);
    font-size: var(--rlc-bookables-font-size);
}

.rlc-bookables-reserveren__stap {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs, 0.5rem);
}

/* Wat niet aan de beurt is. Het script zet deze klassen; de server niet. */
.rlc-bookables-reserveren__stap--verborgen,
.rlc-bookables-reserveren__dag--verborgen,
.rlc-bookables-reserveren__maand--verborgen {
    display: none;
}

/* De regel met "Terug" links en "Doorgaan" of "Overslaan" rechts. */
.rlc-bookables-reserveren__stapkop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs, 0.5rem);
    flex-wrap: wrap;
}

.rlc-bookables-reserveren__stapkop .rlc-bookables-reserveren__stapterug,
.rlc-bookables-reserveren__stapkop .rlc-bookables-reserveren__doorgaan,
.rlc-bookables-reserveren__stapkop .rlc-bookables-reserveren__overslaan {
    min-height: var(--rlc-bookables-tap-target);
}

.rlc-bookables-reserveren__kop {
    margin: 0;
    font-size: var(--text-lg, 1.125rem);
    font-weight: 700;
}

/*
 * De dienstkaarten van de eerste twee stappen: een vlak per keuze, met de duur
 * linksonder en de knop rechts. Dezelfde opbouw als de kaart in de referentie.
 */
.rlc-bookables-reserveren__dienstkaart {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs, 0.5rem);
    padding: var(--space-sm, 1rem);
    border: 1px solid var(--rlc-bookables-reserveren-lijn);
    border-radius: var(--radius-lg, 8px);
    background: var(--surface-panel, transparent);
}

.rlc-bookables-reserveren__dienstnaam {
    margin: 0;
    font-size: var(--text-md, 1rem);
    font-weight: 700;
}

.rlc-bookables-reserveren__dienstuitleg {
    margin: 0;
    color: var(--text-secondary, inherit);
}

.rlc-bookables-reserveren__dienstvoet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs, 0.5rem);
    flex-wrap: wrap;
}

.rlc-bookables-reserveren__dienstduur {
    color: var(--text-secondary, inherit);
}

.rlc-bookables-reserveren__dienstvoet .rlc-bookables-reserveren__selecteer {
    min-height: var(--rlc-bookables-tap-target);
}

/*
 * De maandkalender. Een tabel met zeven gelijke kolommen; de cellen blijven
 * vierkant zodat het raster een kalender blijft en geen lijst wordt.
 */
/* Het blok volgt de breedte van zijn kolom, de kalender zelf niet: op een
   brede pagina worden de cellen anders schermvullend en leest het raster niet
   meer als een kalender. */
.rlc-bookables-reserveren__maand {
    max-inline-size: 40rem;
}

/* De kop van een stap krijgt na een klik de focus zodat een schermlezer weet
   waar hij is; een focusrand om een kop is daarbij alleen maar lawaai. */
.rlc-bookables-reserveren__kop:focus,
.rlc-bookables-reserveren__dagkop:focus {
    outline: none;
}

.rlc-bookables-reserveren__maandkop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs, 0.5rem);
}

.rlc-bookables-reserveren__maandtitel {
    font-weight: 700;
}

.rlc-bookables-reserveren__maandknop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--rlc-bookables-tap-target);
    min-block-size: var(--rlc-bookables-tap-target);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: var(--text-lg, 1.125rem);
    cursor: pointer;
}

/* Houdt de maandtitel in het midden wanneer er aan een kant geen pijl staat. */
.rlc-bookables-reserveren__maandknop-leeg {
    display: inline-block;
    inline-size: var(--rlc-bookables-tap-target);
}

.rlc-bookables-reserveren__kalender {
    inline-size: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.rlc-bookables-reserveren__kalender th {
    padding: var(--space-3xs, 0.25rem) 0;
    color: var(--text-secondary, inherit);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 400;
    text-align: center;
}

.rlc-bookables-reserveren__cel {
    padding: 0;
    border: 1px solid var(--rlc-bookables-reserveren-lijn);
    text-align: center;
    vertical-align: middle;
    aspect-ratio: 1;
}

.rlc-bookables-reserveren__dagknop {
    inline-size: 100%;
    min-block-size: var(--rlc-bookables-tap-target);
    border-radius: 0;
}

.rlc-bookables-reserveren__dagknop[aria-pressed='true'] {
    background: var(--color-primary, #1b3a8c);
    border-color: var(--color-primary, #1b3a8c);
    color: var(--color-on-primary, #fff);
}

/* Een dag zonder tijdslots: leesbaar, maar duidelijk niet aan te klikken. */
.rlc-bookables-reserveren__dag-leeg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    min-block-size: var(--rlc-bookables-tap-target);
    color: var(--text-disabled, #98a2b3);
}

/*
 * De tijden van de gekozen dag, per dagdeel. Chips en geen regels: een tijd is
 * een keuze van vier tekens en heeft geen hele regel nodig.
 */
.rlc-bookables-reserveren__dagkop {
    margin: var(--space-2xs, 0.5rem) 0 0;
    font-size: var(--text-md, 1rem);
    font-weight: 600;
}

.rlc-bookables-reserveren__dagdeel {
    margin: var(--space-2xs, 0.5rem) 0 0;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
}

.rlc-bookables-reserveren__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs, 0.5rem);
    list-style: none;
    margin: var(--space-3xs, 0.25rem) 0 0;
    padding: 0;
}

.rlc-bookables-reserveren__chip {
    min-block-size: var(--rlc-bookables-tap-target);
    border-radius: 999px;
}

.rlc-bookables-reserveren__chip[aria-pressed='true'] {
    background: var(--color-primary, #1b3a8c);
    border-color: var(--color-primary, #1b3a8c);
    color: var(--color-on-primary, #fff);
}

/* Een vol tijdslot blijft staan zodat de bezoeker ziet dat die tijd bezet is. */
.rlc-bookables-reserveren__chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/*
 * De gegevensstap. Hetzelfde vlak als het formulier in het venster van de
 * tabelweergave, want het is hetzelfde formulier op een andere plaats.
 */
.rlc-bookables-reserveren__stap--gegevens {
    padding: var(--space-sm, 1rem);
    border-radius: var(--radius-lg, 8px);
    background: var(--surface-panel, transparent);
}

.rlc-bookables-reserveren__samenvatting {
    margin: 0;
    color: var(--text-secondary, inherit);
}

/*
 * De keuzelijst met de dag en de tijd. Met JavaScript kiest de bezoeker zijn
 * tijd als chip in de kalender en zet het script de waarde hier, dus staat de
 * lijst uit het zicht; het noscript-blok van de server brengt hem in beeld en
 * dan is dit de manier om een ander tijdslot te kiezen. Uit het zicht en niet
 * uit het formulier: een select met display: none post zijn waarde gewoon, dus
 * er is een veld in plaats van twee.
 */
.rlc-bookables-reserveren__slotkeuze {
    display: none;
}

/* De adresvelden staan in het gedeelde formulier in een fieldset die aan en
   uit kan, want het ene tijdslot vraagt om een adres en het andere niet. Zelfde
   reset als bij de veldgroep van een deelnemer: de rand en de ruimte die een
   browser een fieldset meegeeft horen hier niet. */
.rlc-bookables-reserveren__adres {
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

/* De verzendknop vult de breedte: het is de laatste stap en de enige weg
   vooruit. De weg terug staat al boven de stap. */
.rlc-bookables-reserveren__knoppen--inline
    .rlc-bookables-reserveren__afronden {
    inline-size: 100%;
}

.rlc-bookables-reserveren__knoppen--inline {
    flex-wrap: wrap;
}

/*
 * Tekst die alleen een schermlezer hoort: "vol" bij een bezette tijd en de
 * maandnaam boven de kalendertabel. WordPress-themes brengen deze klasse
 * meestal zelf mee, maar niet allemaal, en zonder regel zou "vol" ineens in de
 * chip staan.
 */
.rlc-bookables-reserveren__slots .screen-reader-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * De melding na een aanvraag. Kleuren komen uit de brandguide als die er is;
 * zonder brandguide blijft het leesbare tekst met een randje ervoor.
 */
.rlc-bookables-reserveren__melding {
    margin: 0 0 var(--space-s, 1rem);
    padding: var(--space-2xs, 0.5rem) var(--space-xs, 0.75rem);
    border-left: 3px solid currentColor;
}

.rlc-bookables-reserveren__melding--gelukt {
    color: var(--color-success-text, inherit);
    background: var(--color-success-surface, transparent);
}

.rlc-bookables-reserveren__melding--fout {
    color: var(--color-danger-text, inherit);
    background: var(--color-danger-surface, transparent);
}

/* Het venster. Dezelfde maten als het venster van de wachtlijst, want het is
   hetzelfde soort venster op dezelfde site. */
.rlc-bookables-reserveren__dialog {
    /* Een theme dat alle marges nulzet haalt het venster uit het midden; de
       browser centreert een modal juist met margin: auto. */
    margin: auto;
    /* Breder dan het venster van de wachtlijst: hier staan drie naamvelden
       naast elkaar en die hebben ruimte nodig om leesbaar te blijven. */
    max-inline-size: min(46rem, calc(100vw - var(--space-md, 24px) * 2));
    max-block-size: calc(100dvh - var(--space-md, 24px) * 2);
    inline-size: 100%;
    /* De romp scrolt en niet het hele venster: zo blijven de kop met de datum
       en de knop naar de kassa in beeld bij vier of vijf deelnemers. */
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg, 8px);
    background: var(--surface-panel, #fff);
    color: var(--text-primary, inherit);
    font-size: var(--rlc-bookables-font-size);
}

.rlc-bookables-reserveren__dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.rlc-bookables-reserveren__paneel {
    position: relative;
    display: flex;
    flex-direction: column;
    max-block-size: calc(100dvh - var(--space-md, 24px) * 2);
    padding: var(--space-md, 24px);
}

/* Het formulier staat tussen het paneel en de romp in. Zonder eigen
   flex-kolom geeft het de hoogtebegrenzing van het paneel niet door en groeit
   de romp gewoon uit beeld, met de afrondknop erachteraan. */
.rlc-bookables-reserveren__formulier {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
}

/* De deelnemers scrollen; de kop erboven en de afrondknop eronder blijven staan. */
.rlc-bookables-reserveren__romp {
    flex: 1 1 auto;
    overflow-y: auto;
    /* Anders knipt de focusring van het bovenste veld tegen de rand af. */
    padding: 3px;
    margin: -3px;
    min-block-size: 0;
}

/* De drie naamdelen op een rij. Het tussenvoegsel is een kort veld en hoeft
   niet even breed te zijn als de namen ernaast. De velden lijnen op hun
   onderkant: het label "Tussenvoegsel (optioneel)" breekt in de smalle kolom
   over twee regels, en met align-items: start zou dat veld dan lager hangen
   dan zijn buren. */
.rlc-bookables-reserveren__naamrij {
    display: grid;
    grid-template-columns: 1fr minmax(5rem, 0.5fr) 1fr;
    gap: var(--gap-group, 1.5rem);
    align-items: end;
}

@media (max-width: 640px) {
    /* Op een smal scherm zakken ze onder elkaar: drie velden naast elkaar
       worden daar drie te smalle velden. */
    .rlc-bookables-reserveren__naamrij {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* De adresrij volgt dezelfde afspraken als de naamrij. Twee rijen met een
   eigen verdeling: een huisnummer is smal en een postcode staat juist
   vooraan. */
.rlc-bookables-reserveren__adresrij {
    display: grid;
    gap: var(--gap-group, 1.5rem);
    align-items: end;
}

.rlc-bookables-reserveren__adresrij--straat {
    grid-template-columns: 1fr minmax(5rem, 0.4fr);
}

.rlc-bookables-reserveren__adresrij--plaats {
    grid-template-columns: minmax(6rem, 0.5fr) 1fr;
}

@media (max-width: 640px) {
    /* Op een smal scherm zakken ze onder elkaar, net als de naamrij. */
    .rlc-bookables-reserveren__adresrij--straat,
    .rlc-bookables-reserveren__adresrij--plaats {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rlc-bookables-reserveren__hoofdboeker {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0 var(--gap-tight, 0.5rem);
    /* Raakvlak van minstens 44px op het vinkje zelf. */
    min-block-size: var(--rlc-bookables-tap-target);
}

.rlc-bookables-reserveren__hoofdboeker .rlc-hint {
    grid-column: 2;
}

.rlc-bookables-reserveren__hoofdboeker input:disabled + .rlc-label {
    /* Bij een deelnemer valt er niets te kiezen; dat mag je zien. */
    opacity: 0.7;
}

.rlc-bookables-reserveren__titel {
    margin: 0 var(--space-lg, 32px) 0.25em 0;
    font-size: var(--text-lg, 1.25rem);
    line-height: var(--leading-snug, 1.375);
}

.rlc-bookables-reserveren__samenvatting {
    margin: 0 0 var(--space-sm, 1rem);
}

.rlc-bookables-reserveren__sluiten {
    position: absolute;
    inset-block-start: var(--space-2xs, 8px);
    inset-inline-end: var(--space-2xs, 8px);
    display: grid;
    place-items: center;
    min-inline-size: var(--rlc-bookables-tap-target);
    min-block-size: var(--rlc-bookables-tap-target);
    padding: 0;
    border: 0;
    border-radius: var(--radius-md, 4px);
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.rlc-bookables-reserveren__deelnemer {
    margin: 0 0 var(--space-sm, 1rem);
    padding: 0;
    border: 0;
}

.rlc-bookables-reserveren__deelnemer + .rlc-bookables-reserveren__deelnemer {
    padding-top: var(--space-sm, 1rem);
    border-top: 1px solid var(--rlc-bookables-reserveren-lijn);
}

.rlc-bookables-reserveren__deelnemer-kop {
    padding: 0;
    margin: 0 0 0.5em;
    font-weight: 600;
}

/* De velden komen uit de brandguide: rlc-field, rlc-label, rlc-input en
   rlc-hint staan letterlijk in de HTML en leveren de indeling, de rand, de
   achtergrond, de binnenruimte en de focusring. Op .rlc-input staat daarom net
   zo min een eigen regel als op .rlc-btn; alleen het raakvlak van minimaal
   44px belooft de brandguide niet, en dat staat hier. */
.rlc-bookables-reserveren__veld .rlc-input {
    min-block-size: var(--rlc-bookables-tap-target);
    box-sizing: border-box;
}

.rlc-bookables-reserveren__toevoegen,
.rlc-bookables-reserveren__verwijderen {
    min-block-size: var(--rlc-bookables-tap-target);
}

.rlc-bookables-reserveren__verwijderen {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary, inherit);
    font-size: var(--text-sm, 0.875rem);
    text-decoration: underline;
    cursor: pointer;
}

/* Een gedeeld formulier draagt de totaalregel van het gekozen tijdslot. Kiest
   de bezoeker er een zonder bedrag, dan zet het script hidden op de regel, en
   die moet het winnen van de display hieronder. */
.rlc-bookables-reserveren__totaal[hidden] {
    display: none;
}

.rlc-bookables-reserveren__totaal {
    display: flex;
    justify-content: space-between;
    gap: var(--rlc-bookables-reserveren-ruimte);
    margin: var(--space-sm, 1rem) 0;
    padding-top: var(--space-2xs, 8px);
    border-top: 1px solid var(--rlc-bookables-reserveren-lijn);
}

/* Staat de afrondknop alleen onder een formulier, zoals in het kickoff-venster,
   dan vult hij de breedte. In de knoppenrij hieronder wordt dat teruggezet. */
.rlc-bookables-reserveren__afronden {
    inline-size: 100%;
}

/* De voetregel van het inschrijfvenster. De ruimte tussen de twee knoppen komt
   van rlc-row--between uit de brandguide; hier staat alleen wat die niet levert. */
.rlc-bookables-reserveren__knoppen {
    margin-block-start: var(--space-sm, 1rem);
}

.rlc-bookables-reserveren__knoppen .rlc-bookables-reserveren__afronden {
    inline-size: auto;
}

/* In de stappenflow staat de knop alleen onder het formulier en vult hij de
   breedte, zoals in de referentie. Staat na de regel hierboven omdat die
   anders op volgorde wint. */
.rlc-bookables-reserveren__knoppen--inline .rlc-bookables-reserveren__afronden {
    inline-size: 100%;
}

@media (max-width: 640px) {
    /* Onder elkaar en allebei over de volle breedte: naast elkaar worden het op
       een telefoon twee te smalle knoppen. */
    .rlc-bookables-reserveren__knoppen {
        flex-direction: column;
        align-items: stretch;
    }

    .rlc-bookables-reserveren__knoppen .rlc-btn {
        inline-size: 100%;
    }
}

/*
 * De voorvraag van een kickoff-venster. De verbergklasse zet alleen JavaScript
 * erop: zonder JavaScript staan beide takken gestapeld in de pagina en blijft
 * het formulier bereikbaar.
 */
.rlc-bookables-reserveren__kickoff-keuze {
    border: 0;
    margin: 0 0 var(--space-sm, 1rem);
    padding: 0;
}

.rlc-bookables-reserveren__kickoff-optie {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs, 4px);
    margin-right: var(--space-sm, 1rem);
}

.rlc-bookables-reserveren__kickoff-kop {
    margin: var(--space-sm, 1rem) 0 var(--space-2xs, 8px);
    font-size: var(--text-md, 1rem);
}

.rlc-bookables-reserveren__kickoff-hint {
    margin: 0 0 var(--space-2xs, 8px);
}

.rlc-bookables-reserveren__kickoff-tak--verborgen {
    display: none;
}

/* Zonder scroll op de pagina eronder: het venster is waar de bezoeker is. */
.rlc-bookables-reserveren-open,
.rlc-bookables-reserveren-open body {
    overflow: hidden;
}

/*
 * De regelgegevens in de blocks-winkelwagen en -checkout.
 *
 * WooCommerce plakt de regels daar aan elkaar tot een zin, met een schuine
 * streep als voegwoord. Voor een boeking is dat onleesbaar: datum, deelnemer
 * en hoofdboeker zijn losse feiten en horen onder elkaar. De scope op :has()
 * met onze datumregel laat elk ander product met rust.
 */
.wc-block-components-product-details:has(> [class*="__datum"]) > span {
    display: block;
}

.wc-block-components-product-details:has(> [class*="__datum"]) > span > span[aria-hidden] {
    display: none;
}

/*
 * Een omhulsel om de tabel: dan lopen de banden van de kopregel en de rijen van
 * rand tot rand en snijdt de radius ze netjes af. De opvulling die het type
 * meebrengt gaat eraf en verhuist naar de buitenste cellen.
 *
 * Waarom niet gewoon opvulling op de rij: die verschuift met subgrid ook zijn
 * eigen kolommen naar binnen, terwijl de breedte van de laatste kolom door de
 * tabel wordt bepaald. De knop viel dan buiten zijn eigen band.
 */
.rlc-bookables-reserveren__tabel.rlc-bookables-reserveren__tabel--omhuld {
    /* Twee klassen, want de opvulling van het gekozen type komt uit een
       stylesheet die na deze wordt geladen en weegt met een enkele klasse even
       zwaar. Geen !important: dat zou een theme geen ruimte meer laten. */
    padding: 0;
    overflow: hidden;
}

.rlc-bookables-reserveren__tabel--omhuld .rlc-bookables-reserveren__kop > :first-child,
.rlc-bookables-reserveren__tabel--omhuld .rlc-bookables-reserveren__regel > :first-child {
    padding-inline-start: var(--rlc-bookables-reserveren-rand, var(--space-md, 1.5rem));
}

.rlc-bookables-reserveren__tabel--omhuld .rlc-bookables-reserveren__kop > :last-child,
.rlc-bookables-reserveren__tabel--omhuld .rlc-bookables-reserveren__regel > :last-child {
    padding-inline-end: var(--rlc-bookables-reserveren-rand, var(--space-md, 1.5rem));
}

/*
 * Een rij met een eigen kleur krijgt hoogte binnen die kleur, zodat de tekst
 * niet tegen de rand van zijn band plakt. Alleen verticaal: horizontaal doen de
 * buitenste cellen dat, om de reden hierboven. De kopregel zet zijn eigen
 * hoogte al en hoeft hier niets bij.
 */
.rlc-bookables-reserveren__regel--gevuld {
    padding-block: var(--rlc-bookables-reserveren-regel-ruimte);
}