/* Figma's narrow 520px panel; native plugin still bounds it by the viewport. */
body .slideout-info-container.snel_reserveren{
    max-width: 52rem;
}

.snel_reserveren .slideout-info-top{
    padding-inline: calc(var(--spacing_3) * 1.2);
}

.snel_reserveren .slideout-info-title{
    font-size: clamp(2.5rem, 2rem + 1vw, 3rem);
}

.snel_reserveren .snel_reserveren_keuzes{
    display: flex;
    flex-direction: column;
    gap: var(--spacing_3);
    /* Design: first card at 100px, 36px left / 30px right, 30px row gaps. */
    padding: calc(var(--spacing_3) * 1.3) var(--spacing_3) var(--spacing_3) calc(var(--spacing_3) * 1.2);
}

.snel_reserveren_keuze{
    display: flex;
    background: var(--wit);
    text-decoration: none;
}

.snel_reserveren_keuze,
.snel_reserveren_keuze:hover,
.snel_reserveren_keuze:focus{
    color: var(--zwart);
}

.snel_reserveren_afbeelding{
    /* Figma's 92px square, scaling down with the available card width. */
    flex: 0 0 20.264%;
    align-self: flex-start;
    aspect-ratio: 1;
}

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

.snel_reserveren_inhoud{
    display: flex;
    align-items: center;
    gap: calc(var(--spacing_3) / 3);
    padding: calc(var(--spacing_3) * 2 / 3);
    flex: 1;
    min-width: 0;
}

.snel_reserveren_tekst{
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing_3) / 3);
    flex: 1;
    min-width: 0;
    hyphens: auto;
}

.snel_reserveren_titel{
    font-family: var(--heading-font);
    font-size: 2.2rem;
    line-height: 1;
}

.snel_reserveren_ondertitel{
    color: color-mix(in srgb, var(--zwart) 75%, var(--wit));
}

.snel_reserveren_pijl{
    /* Original 50px Figma circle, keeping its asset geometry. */
    flex: 0 0 5rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: url('../images/snel_reserveren_cirkel.svg') center no-repeat;
    color: var(--bruin);
    font-size: 2.2rem;
}

.snel_reserveren_pijl:after{
    margin-left: 0;
}

.snel_reserveren_keuze:hover .snel_reserveren_pijl:after{
    transform: translateX(0.5rem);
}

.snel_reserveren_keuze:focus-visible{
    outline: 0.2rem solid var(--bruin);
    outline-offset: 0.2rem;
}

/* Keep the previous native panel in place while the next one slides over it. */
.slideout-info-container.snel_reserveren_onderliggend{
    transform: translateX(0);
    pointer-events: none;
}