/* Figma 14366:4112: cards use 15px padding/gaps, 16px corners and 20px radios.
   Images preserve the design's 233:144 crop and 233:736 content fraction. */
.boekingsformulier.arrangement_boeking .boeking_titel{
    font: inherit;
    font-weight: 500;
    padding-bottom: 1rem;
}

.arrangement_boeking .arrangement_kamers{
    display: grid;
    gap: 1.5rem;
    min-inline-size: 0;
    margin-top: var(--spacing_3);
}

.arrangement_boeking .arrangement_kamers legend{
    float: none;
    margin-bottom: 1rem;
    font-size: inherit;
    font-weight: 500;
}

.arrangement_boeking .arrangement_kamer{
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    border: 0.1rem solid color-mix(in srgb, var(--zwart) 50%, var(--wit));
    border-radius: 1.6rem;
    background: var(--wit);
    cursor: pointer;
}

.arrangement_boeking .arrangement_kamer:has(input:checked){
    border-color: var(--bruin);
    box-shadow: inset 0 0 0 0.1rem var(--bruin);
}

.arrangement_boeking .arrangement_kamer:has(input:focus-visible){
    outline: 0.2rem solid var(--groen);
    outline-offset: 0.2rem;
}

.arrangement_boeking .arrangement_kamer_kop{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.2rem;
}

.arrangement_boeking .arrangement_kamer_kop strong{
    font-weight: 500;
}

.arrangement_boeking .arrangement_kamer_kop input{
    appearance: none;
    margin: 0;
    width: 2rem;
    height: 2rem;
    border: 0.2rem solid color-mix(in srgb, var(--zwart) 50%, var(--wit));
    border-radius: 50%;
    cursor: pointer;
}

.arrangement_boeking .arrangement_kamer_kop input:checked{
    border: 0;
    background: url('../images/arrangement_boeking/radio_geselecteerd.svg') center no-repeat;
}

.arrangement_boeking .arrangement_kamer_inhoud{
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.arrangement_boeking .arrangement_kamer_afbeelding{
    flex: 0 0 calc(100% * 233 / 736);
    aspect-ratio: 233 / 144;
    overflow: hidden;
}

.arrangement_boeking .arrangement_kamer_afbeelding :is(picture, img){
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.arrangement_boeking .arrangement_kamer_tekst{
    display: grid;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.arrangement_boeking .arrangement_kamer_voorzieningen{
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 0.5rem;
    color: color-mix(in srgb, var(--zwart) 75%, var(--wit));
}

.arrangement_boeking .arrangement_kamer_voorzieningen i{
    color: var(--zwart);
}

.arrangement_boeking .arrangement_boeking_actie{
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-top: var(--spacing_3);
    padding-block: calc(var(--spacing_3) * 2 / 3);
    background: var(--beige);
}

.arrangement_boeking .arrangement_boeking_actie .button{
    padding-block: 1.8rem;
}

@media (max-width:767px){
    .arrangement_boeking .arrangement_kamer_kop{
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 0.5rem;
    }

    .arrangement_boeking .arrangement_kamer_prijs{
        grid-column: 2;
    }

    .arrangement_boeking .arrangement_kamer_inhoud{
        flex-direction: column;
        gap: 1rem;
    }

    .arrangement_boeking .arrangement_kamer_afbeelding{
        flex-basis: auto;
        width: 100%;
    }
}