/*
 * Storebox boekingsinterface.
 *
 * De opmaak komt uit het thema (.ui-input-*, .ui-button, Tailwind-utilities).
 * Hier staat alleen wat het thema niet levert: de eigen keuzeknoppen, de
 * particulier/zakelijk-schakelaar, de aantalvelden en de foutmelding.
 */

.storebox-booking [hidden] {
    display: none !important;
}

/*
 * Blokweergave komt uit het thema; hier staat alleen de ruimte tussen het label
 * en het veld eronder, want die is eigen aan dit formulier.
 */

.storebox-booking .text-label-sm {
    margin-bottom: 0.25rem;
}

/*
 * In de stappenbalk niet: daar staat het label náást het rondje en niet boven
 * een veld, dus die ondermarge duwt het scheef.
 */

.storebox-booking .storebox-stappen [data-step-label] {
    margin: 0;
}

.storebox-booking legend.text-label-sm {
    margin-bottom: 0.5rem;
}

/*
 * De stapkop krijgt focus bij het wisselen, zodat schermlezers de nieuwe stap
 * aankondigen. Zichtbaar hoeft die focusrand niet: het is geen bedienbaar element.
 */

.storebox-booking h2[tabindex="-1"]:focus {
    outline: none;
}

/* Locatie is geen invoerveld maar een weergave; niet selecteerbaar of focusbaar. */

/*
 * Een waarde die de bezoeker niet kan wijzigen — de vestiging, het verzekerde
 * bedrag. Die stond in het kader van een invoerveld en zag er dus uit als iets
 * waar je in kon typen.
 *
 * Geen rand meer, maar wel een vlak: de lichte vulling houdt de vorm van het
 * veld ernaast vast zonder de rand die om invoer vraagt. De zijvulling blijft
 * daarom staan, anders loopt de tekst tegen de rand van dat vlak.
 *
 * De hoogte blijft gelijk aan een invoerveld, want er staat er een naast in
 * hetzelfde rooster; anders lopen de twee kolommen uit de pas.
 */

.storebox-booking .storebox-static {
    border: 0;
    background: #fbfbfb;
    color: #797979;
    min-height: calc(1.5em + 1.5rem + 2px);
}

/* Particulier / zakelijk */

.storebox-toggle label input {
    position: absolute;
    opacity: 0;
}

/*
 * Een groep keuzeknoppen staat in een eigen grijs vlak. Los van elkaar zagen
 * twee pillen eruit als twee losse knoppen; in een vlak lees je meteen dat het
 * één keuze is met twee mogelijkheden. Dezelfde vorm wordt in het thema
 * gebruikt voor de vestigingsschakelaar boven het ruimte-overzicht.
 */
.storebox-keuzegroep {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.35rem;
    border-radius: 32px;
    background: #f3f4f6;
}

.storebox-toggle label span,
.storebox-booking .storebox-choice {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--input-border-color, rgb(197 197 197));
    border-radius: 28px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.storebox-toggle label input:checked + span {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.storebox-toggle label input:focus-visible + span {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Keuzeknoppen voor de betaalmethode */

/*
 * De keuzeknoppen (betaalwijze). De rand staat hier en niet op een
 * Tailwind-klasse in de opmaak: het thema heeft een `button { border-width: 0 }`
 * die buiten een cascade-laag valt, en die wint daardoor van elke utility uit
 * @layer — hoe specifiek die ook is. De knoppen stonden dus zonder rand.
 *
 * Dezelfde vorm als de knoppen van Particulier / Zakelijk, zodat een keuze er
 * overal in het formulier hetzelfde uitziet.
 */

.storebox-booking .storebox-choice.is-selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Aantalveld bij een artikel: smal, niet over de volle breedte. */

.storebox-booking .storebox-quantity {
    width: 4rem;
    padding: 0.4rem;
    text-align: center;
}

/* Foutmelding, in de vorm van de ui-toast maar in het rood. */

.storebox-error {
    background: #fdf3f3;
    color: #7d1d1e;
    font-size: 14px;
}

/* Honeypot: onzichtbaar voor bezoekers, wel invulbaar voor bots. */

/*
 * Het honeypotveld. Met display:none en niet buiten beeld: een veld dat op
 * -9999px staat is voor de browser gewoon een veld en wordt door de invulhulp
 * en wachtwoordbeheerders meegenomen, en dan strandt een echte klant erop.
 *
 * Een bot die de pagina echt rendert slaat het nu over. Dat is het waard: die
 * vangen we met de limiet per IP en zo nodig met Turnstile, terwijl een bot die
 * de velden uit de HTML plukt er nog steeds in loopt.
 */

.storebox-hp {
    display: none;
}

/*
 * Het sterretje bij een verplicht veld. line-height 0 houdt het buiten de
 * regelhoogte: anders wordt elk label met een sterretje een paar pixels hoger
 * dan de labels ernaast, en lopen twee kolommen velden uit de pas.
 */

.storebox-booking sup,
.storebox-notify sup {
    font-size: 0.75em;
    line-height: 0;
    vertical-align: super;
}

/*
 * De foutmelding. Eigen kleuren in plaats van de groene ui-toast van het
 * thema: een melding dat er iets misging hoort niet in de kleur te staan die
 * elders bevestigt dat iets goed ging.
 */

.storebox-error {
    background: #ffebeb;
    color: #a60002;
    font-size: 14px;
}

/* Zijbalk: regels met scheidingslijn en een uitgelicht totaal. */

.storebox-lines .storebox-line {
    padding: 0.55rem 0;
    border-bottom: 1px solid #f0f1f2;
}

.storebox-lines .storebox-line:first-child {
    padding-top: 0;
}

/*
 * De laatste regel vóór een totaal. Die droeg zijn eigen onderlijn terwijl het
 * totaal er al een bovenlijn heeft: twee strepen met een paar pixels ertussen.
 * Eén streep volstaat, en die hoort bij het totaal.
 */

.storebox-line--slot {
    border-bottom: 0 !important;
}

.storebox-lines .storebox-total,
.storebox-summary-block .storebox-total {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid #d1d5db;
    font-size: 1rem;
}

/*
 * Stap 4 zonder zijbalk.
 *
 * Die herhaalde daar de reservatie woord voor woord naast het overzicht. De
 * bedragen staan nu in het overzicht zelf, dus de zijbalk heeft er niets meer
 * te zoeken en de kolom mag de volle breedte nemen.
 */

.storebox-booking[data-stap="4"] .storebox-zijbalk {
    display: none;
}

@media (min-width: 1024px) {
    .storebox-booking[data-stap="4"] .storebox-rooster {
        grid-template-columns: 1fr;
    }

    /* Vanaf hier naast elkaar: links de keuzes, rechts de bedragen. */
    .storebox-booking .storebox-summary {
        flex-direction: row;
    }

    .storebox-booking .storebox-summary-kolom {
        flex: 1 1 0;
        min-width: 0;
    }
}

/*
 * Het overzicht van stap 4: twee kolommen die elk apart stapelen.
 *
 * Bewust flex en geen rooster. In een rooster delen de kolommen hun rijen, dus
 * rekte het hoogste blok van rij 1 de buurkolom mee op en stond er een gat
 * boven het blok eronder. Twee flexkolommen weten niets van elkaars hoogtes.
 *
 * Onder de omslagbreedte staan ze onder elkaar, en dan is de volgorde vanzelf
 * eerst de keuzes en daarna de bedragen.
 */

.storebox-summary,
.storebox-summary-kolom {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/*
 * Het bedrag dat nu betaald wordt, in een eigen kader. Dat is het getal waar
 * de klant op afrekent voor hij bevestigt; de rest is naslag.
 */

.storebox-summary-block--uitgelicht {
    padding: 1.25rem;
    border: 1px solid var(--color-green-front);
    border-radius: var(--radius-md, 12px);
    background: var(--color-green-back);
}

/*
 * Het overzicht in stap 4 krijgt dezelfde fijne lijnen als de zijbalk: elk
 * gegeven een eigen regel in plaats van een blok tekst, zodat je het bij het
 * nalezen makkelijk afloopt.
 *
 * Onder de laatste regel valt de streep weg. De lijnen staan tussen de
 * gegevens; een streep onderaan zou de kop van het volgende blok scheiden van
 * niets.
 */

.storebox-summary-block .storebox-line {
    padding: 0.55rem 0;
    border-bottom: 1px solid #f0f1f2;
}

.storebox-summary-block .storebox-line:first-child {
    padding-top: 0;
}

.storebox-summary-block .storebox-line:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/*
 * De kop van een stap: het label, de titel en de introtekst, boven de velden
 * binnen dezelfde witte kaart. De lijn eronder scheidt de kop van de velden.
 *
 * De stappenbalk zelf staat er niet in: die loopt over de volle breedte boven
 * het rooster, omdat hij in de smallere linkerkolom over twee regels brak.
 */

.storebox-stapkop {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

/*
 * De onderdelen van stap 3 binnen die ene witte kaart. Verpakkingsmateriaal,
 * extra's en het doel kunnen ontbreken, dus de lijn hoort bij het blok eronder
 * en niet erboven: zo staat er nooit een streep onder het laatste blok.
 *
 * De selector leest als "een zichtbaar blok met een zichtbaar blok ervoor", dus
 * het eerste blok dat overblijft krijgt geen lijn, welk blok dat ook is.
 */

.storebox-blok:not([hidden]) ~ .storebox-blok:not([hidden]) {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

/* De balk staat alleen in zijn eigen kaart; die kaart levert de ruimte al. */

.storebox-stappen {
    margin: 0;
}

/*
 * Elke stap is een knop, maar mag er niet als een knop uitzien: de balk blijft
 * een balk. Alleen de aanwijzer verraadt dat je erop kan klikken.
 */

.storebox-stap-knop {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

/* Nog niet te bereiken: geen handje, want er gebeurt niets. */

.storebox-stap-knop:disabled {
    cursor: default;
}

.storebox-stap-knop:focus-visible {
    outline: 2px solid var(--color-primary, #22812a);
    outline-offset: 3px;
    border-radius: 4px;
}

/*
 * Vanaf de breedte waarop de streepjes tussen de stappen verschijnen, mag de
 * balk niet meer afbreken: de streepjes rekken mee en verdelen de ruimte, in
 * plaats van dat de vierde stap op een tweede regel belandt.
 */

@media (min-width: 1024px) {
    /* Met .storebox-booking ervoor, anders wint de flex-wrap-hulpklasse van
       Tailwind op gelijke specificiteit. */
    .storebox-booking .storebox-stappen {
        flex-wrap: nowrap;
    }

    .storebox-booking .storebox-stappen > li[aria-hidden="true"] {
        flex: 1 1 auto;
        width: auto;
        min-width: 1rem;
    }

    .storebox-booking .storebox-stappen [data-step-label] {
        white-space: nowrap;
    }
}

/*
 * Het bericht in stap 1 over een promocode uit de URL. Dezelfde zachte groene
 * tint als de hulpkaart in de zijbalk, zodat het bij de rest hoort.
 */

.storebox-promomelding {
    margin-bottom: 1.5rem;
    background: var(--color-green-back, #f2fced);
    color: var(--color-green-front, #22812a);
}

/* Een code die niet meer geldt is geen fout van de bezoeker — hij klikte een
   link aan. Dus neutraal grijs en geen rood: boeken kan gewoon. */

.storebox-promomelding.is-mislukt {
    background: #f3f4f6;
    color: #4b5563;
}

/*
 * Een veld waar de fout bij hoort. Naast de melding bovenaan ook hier een
 * teken, want die melding staat na het wisselen van stap buiten beeld.
 */

.storebox-booking .is-fout {
    border-color: #b73d1f;
}

.storebox-booking .is-fout:focus {
    border-color: #b73d1f;
    outline: 2px solid #b73d1f;
    outline-offset: 1px;
}

/*
 * De hele regel van een akkoordverklaring is klikbaar — het is een <label> om
 * het vinkje heen — dus hoort de muisaanwijzer dat ook te laten zien. Zonder
 * deze regel lijkt alleen het kleine vierkantje links het doelwit.
 */

.storebox-consent {
    cursor: pointer;
}

/*
 * De link in een akkoordverklaring zit in de zin zelf ("… met de
 * huurvoorwaarden"), dus moet hij zich in de lopende tekst onderscheiden:
 * de huisstijlkleur plus een streep eronder.
 */

.storebox-consent__link {
    color: var(--color-primary, #22812a);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.storebox-consent__link:hover,
.storebox-consent__link:focus-visible {
    text-decoration-thickness: 2px;
}

/*
 * De huurovereenkomst in stap 4.
 *
 * Staat boven de akkoordvinkjes: eerst lezen wat je tekent, dan pas het vinkje.
 * De knop haalt het document op bij de klik, niet bij het openen van de stap.
 */

.storebox-contract {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md, 12px);
    background: #f9fafb;
}

.storebox-contract > div {
    /* Zonder dit duwt een lange zin de knop naar de volgende regel. */
    flex: 1 1 18rem;
    min-width: 0;
}

.storebox-contract__melding.is-fout {
    color: #b73d1f;
}

/* ---- Het venster met de PDF ---- */

.storebox-contractvenster {
    width: min(60rem, calc(100vw - 2rem));
    height: min(48rem, calc(100vh - 2rem));
    max-width: none;
    max-height: none;

    /* Tailwind zet margin:0 op élk element en haalt de centrering van een
       <dialog> daarmee onderuit; vandaar expliciet. */
    margin: auto;

    padding: 0;
    border: 0;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
}

/*
 * De display hoort bij de open toestand. Een gesloten <dialog> verbergt de
 * browser zelf met display:none, maar dat staat in zijn eigen stylesheet en
 * verliest het van élke regel hier — met display:flex op de klasse zelf stond
 * het venster dus onderaan de pagina, ook dicht.
 */

.storebox-contractvenster[open] {
    display: flex;
    flex-direction: column;
}

.storebox-contractvenster::backdrop {
    background: rgba(15, 23, 42, .55);
}

.storebox-contractvenster__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.storebox-contractvenster__kop h2 {
    margin: 0;
}

.storebox-contractvenster__acties {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.storebox-contractvenster__sluit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f3f4f6;
    color: #141414;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.storebox-contractvenster__sluit:hover {
    background: #e5e7eb;
}

.storebox-contractvenster__doc {
    flex: 1;
    width: 100%;
    border: 0;
    background: #f3f4f6;
}

.storebox-contractvenster__voet {
    margin: 0;
    padding: .75rem 1.25rem;
    border-top: 1px solid #e5e7eb;
}

/* Op een telefoon is een PDF in een iframe klein; daar telt elke pixel. */

@media (max-width: 640px) {
    .storebox-contractvenster {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}