.boekingsformulier{
    position: relative;
    color: var(--zwart);
    min-inline-size: 0;
}

.boekingsformulier [hidden]{
    display: none !important;
}

.boekingsformulier .boeking_uitklappen,
.boekingsformulier .boeking_zoeken_mobiel{
    display: none;
}

.boekingsformulier :is(button, input){
    /* Native controls otherwise choose normal/400, which selects Halyard Medium. */
    font-weight: inherit;
}

.boekingsformulier .boeking_balk{
    display: flex;
    align-items: center;
    gap: calc(var(--spacing_3) / 2);
    padding: calc(var(--spacing_3) * 2 / 3);
    border-radius: calc(var(--spacing_3) * 2 / 3);
    background: var(--wit);
    height: 100%;
}

.boekingsformulier .boeking_titel{
    flex: 0 0 5.5em;
    font-weight: 400;
}

.boekingsformulier_breed .boeking_titel{
    /* Figma: title occupies 212px of the 1250px inner booking bar. */
    flex-basis: 17%;
}

.boekingsformulier .boeking_keuzes{
    display: flex;
    align-items: stretch;
    flex: 1;
    min-inline-size: 0;
    border: 0.1rem solid color-mix(in srgb, var(--zwart) 20%, transparent);
    border-radius: var(--spacing_3);
}

.boekingsformulier .boeking_trigger{
    display: flex;
    align-items: center;
    gap: calc(var(--spacing_3) / 3);
    flex: 1;
    min-inline-size: 0;
    padding: calc(var(--spacing_3) / 2);
    background: transparent;
    border: 0;
    text-align: left;
    color: color-mix(in srgb, var(--zwart) 75%, var(--wit));
    hyphens: auto;
}

.boekingsformulier .boeking_trigger + .boeking_trigger{
    border-left: 0.1rem solid color-mix(in srgb, var(--zwart) 20%, transparent);
}

.boekingsformulier .boeking_trigger i{
    color: var(--bruin);
}

.boekingsformulier .boeking_trigger[aria-expanded="true"]{
    color: var(--groen);
}

.boekingsformulier .boeking_venster{
    /* Figma panels are 1040/960px, capped by the viewport; intrinsic calendars stay fluid. */
    inline-size: min(104rem, calc(100vw - var(--spacing_3) * 2));
    max-block-size: calc(100svh - var(--spacing_3) * 2);
    position: fixed;
    inset: auto;
    margin: 0;
    padding: var(--spacing_3);
    overflow: auto;
    overscroll-behavior: contain;
    z-index: 1050;
}

.boekingsformulier .boeking_venster.boeking_personen{
    inline-size: min(96rem, calc(100vw - var(--spacing_3) * 2));
    border-radius: var(--spacing_3);
}

.boekingsformulier[data_maanden="2"] .boeking_datum{
    /* Two 300px calendars plus the same padding/gap as the three-month design. */
    inline-size: min(72rem, calc(100vw - var(--spacing_3) * 2));
}

@supports (top: anchor(bottom)){
    .boekingsformulier .boeking_venster:not([data_fallback]){
        top: anchor(bottom);
        left: clamp(var(--spacing_3), anchor(left), calc(100vw - 104rem - var(--spacing_3)));
        margin-block: calc(var(--spacing_3) / 3);
        position-try-fallbacks: flip-block, --boeking_in_viewport;
    }

    .boekingsformulier .boeking_personen:not([data_fallback]){
        left: clamp(var(--spacing_3), anchor(left), calc(100vw - 96rem - var(--spacing_3)));
    }

    .boekingsformulier[data_maanden="2"] .boeking_datum:not([data_fallback]){
        left: clamp(var(--spacing_3), anchor(left), calc(100vw - 72rem - var(--spacing_3)));
    }
}

@position-try --boeking_in_viewport{
    top: calc(var(--spacing_3) / 2);
    bottom: auto;
    margin-block: 0;
}

.boekingsformulier .boeking_navigatie{
    display: flex;
    justify-content: space-between;
    position: absolute;
    inset-inline: var(--spacing_3);
    pointer-events: none;
}

.boekingsformulier .boeking_pijl{
    display: grid;
    place-items: center;
    padding: calc(var(--spacing_3) * 4 / 15);
    background: transparent;
    border: 0;
    border-radius: 50%;
    pointer-events: auto;
}

.boekingsformulier [data_vorige] img{
    transform: rotate(180deg);
}

.boekingsformulier .boeking_maanden{
    display: grid;
    grid-template-columns: repeat(var(--boeking_maanden, 3), minmax(0, 1fr));
    gap: calc(var(--spacing_3) * 4 / 3);
}

.boekingsformulier .boeking_maand_titel{
    display: block;
    padding-inline: calc(var(--spacing_3) * 4 / 3);
    margin-bottom: var(--spacing_3);
    text-align: center;
}

.boekingsformulier .boeking_week,
.boekingsformulier .boeking_dagen{
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.2rem; /* Figma day-cell separation. */
    text-align: center;
}

.boekingsformulier .boeking_week{
    margin-bottom: calc(var(--spacing_3) / 2);
}

.boekingsformulier .boeking_dagen [data_in_range]{
    background: color-mix(in srgb, var(--groen) 15%, var(--wit));
    border-color: color-mix(in srgb, var(--groen) 30%, var(--wit));
}

.boekingsformulier button:disabled:not(.boeking_uitklappen){
    opacity: 0.4;
    cursor: default;
}

.boekingsformulier :is(button, input):focus-visible{
    outline: 0.2rem solid var(--groen);
    outline-offset: 0.2rem;
}

.boekingsformulier .boeking_voet{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: calc(var(--spacing_3) / 3);
    margin-top: var(--spacing_3);
}

.boekingsformulier .boeking_kamer{
    display: grid;
    grid-template-columns: minmax(0, 180fr) minmax(0, 676fr);
    gap: var(--default-margin-bottom);
    align-items: end;
    position: relative;
    margin: 0;
    padding: 0 0 var(--spacing_3);
    border: 0;
}

.boekingsformulier .boeking_kamer_naam{
    /* Legend retains fieldset semantics; its visual label aligns with the counters. */
    display: flex;
    align-items: center;
    gap: calc(var(--spacing_3) / 6);
    position: absolute;
    inset-inline-start: 0;
    bottom: var(--spacing_3);
    margin: 0;
    font-size: 1em;
    line-height: 2;
    width: auto;
}

.boekingsformulier .boeking_kamer_velden{
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--default-margin-bottom);
}

.boekingsformulier .boeking_gast label{
    display: grid;
    text-align: center;
    margin-bottom: var(--spacing_3);
}

.boekingsformulier .boeking_gast small{
    font-size: 1.4rem;
}

.boekingsformulier .boeking_teller{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing_3) * 8 / 15);
}

.boekingsformulier .boeking_teller button{
    /* 36px circles and 48px inputs are the Figma stepper's intrinsic control sizes. */
    flex: 0 0 3.6rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0.1rem solid var(--bruin);
    border-radius: 50%;
    background: var(--wit);
}

.boekingsformulier .boeking_teller input{
    inline-size: 4.8rem;
    min-inline-size: 0;
    block-size: 3.6rem;
    padding: 0;
    text-align: center;
    border: 0.15rem solid #ccc;
    border-radius: 0.4rem;
    appearance: textfield;
    -moz-appearance: textfield;
}

.boekingsformulier .boeking_teller input::-webkit-inner-spin-button,
.boekingsformulier .boeking_teller input::-webkit-outer-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

.boekingsformulier .boeking_verwijderen{
    display: inline-flex;
    background: none;
    border: 0;
    padding: calc(var(--spacing_3) / 6);
    color: var(--groen);
    line-height: 1;
}

.boekingsformulier .boeking_scheiding{
    display: block;
    max-width: 100%;
    /* Preserve the original SVG's one-pixel stroke when its width is constrained. */
    height: 0.1rem;
}

.boekingsformulier .boeking_kamer_acties{
    justify-content: flex-end;
}

@media (max-width:767px){
    .boekingsformulier .boeking_balk{
        flex-direction: column;
        align-items: stretch;
    }

    .boekingsformulier .boeking_titel{
        flex-basis: auto;
    }

    .boekingsformulier .boeking_keuzes{
        flex-wrap: wrap;
        border: 0;
        gap: calc(var(--spacing_3) / 2);
    }

    .boekingsformulier .boeking_trigger{
        border: 0.1rem solid color-mix(in srgb, var(--zwart) 20%, transparent);
        border-radius: var(--spacing_3);
        flex-basis: calc(50% - var(--spacing_3) / 4);
    }

    .boekingsformulier .boeking_keuzes > .button{
        flex-basis: 100%;
    }

    .boekingsformulier .boeking_venster,
    .boekingsformulier .boeking_venster.boeking_personen,
    .boekingsformulier[data_maanden="2"] .boeking_datum{
        inline-size: calc(100vw - var(--spacing_3));
        max-block-size: calc(100svh - var(--spacing_3));
        padding: var(--spacing_3);
    }

    .boekingsformulier .boeking_venster:not([data_fallback]),
    .boekingsformulier[data_maanden="2"] .boeking_datum:not([data_fallback]){
        left: calc(var(--spacing_3) / 2);
    }

    .boekingsformulier .boeking_kamer{
        display: block;
    }

    .boekingsformulier .boeking_kamer .boeking_kamer_naam{
        position: static;
        margin-bottom: calc(var(--spacing_3) / 2);
    }

    .boekingsformulier .boeking_kamer_velden{
        grid-template-columns: minmax(0, 1fr);
        gap: calc(var(--spacing_3) / 2);
    }

    .boekingsformulier .boeking_gast{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: calc(var(--spacing_3) / 3);
    }

    .boekingsformulier .boeking_gast label{
        text-align: left;
        margin-bottom: 0;
    }

    .boekingsformulier .boeking_teller{
        gap: calc(var(--spacing_3) / 3);
    }

}

@media (min-width:768px) and (max-width:991px){
    .boekingsformulier .boeking_kamer{
        grid-template-columns: minmax(0, 1fr) minmax(0, 6fr);
    }

    .boekingsformulier .boeking_teller{
        gap: calc(var(--spacing_3) / 4);
    }
}