/* Divi geeft elke ul binnen een Theme Builder-lay-out een opsommingsteken en
   inspringing (`.et-l--body ul`, 0-1-1). Onze lijstregel heeft één klasse en
   verliest dat, dus staat de klasse dubbel: 0-2-0 wint. Om dezelfde reden
   mikken de regels voor velden en knoppen op een eigen klasse en niet op
   `input` of `button` — daar heeft Divi eigen regels voor. */

.vai-aanvraag__lijst.vai-aanvraag__lijst {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    border-top: 1px solid var(--vai-lijn);
}

.vai-aanvraag__regel {
    display: grid;
    grid-template-columns: 64px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--vai-lijn);
}

.vai-aanvraag__regel .vai-aanvraag__foto {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
}

.vai-aanvraag__titel { font-weight: 600; }
.vai-aanvraag__nr { color: var(--vai-grijs); font-size: 13px; }

.vai-aanvraag__weg {
    color: var(--vai-grijs);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    padding: 4px 8px;
}

.vai-aanvraag__weg:hover { color: var(--vai-oranje); }

.vai-aanvraag__melding {
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--vai-vlak);
    border-left: 3px solid var(--vai-oranje);
}

.vai-formulier__rij { margin: 0 0 16px; }

.vai-formulier__label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
}

.vai-formulier__optioneel {
    color: var(--vai-grijs);
    font-weight: 400;
}

.vai-formulier .vai-formulier__veld {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--vai-lijn);
    border-radius: 4px;
    background: #fff;
    color: var(--vai-tekst);
    font-size: 15px;
}

.vai-formulier .vai-formulier__veld[aria-invalid="true"] { border-color: #b3261e; }

.vai-formulier .vai-formulier__tekstvak { resize: vertical; }

.vai-formulier__fout {
    display: block;
    margin-top: 4px;
    color: #b3261e;
    font-size: 13px;
}

/* Buiten beeld in plaats van display:none, zodat invulhulpen die onzichtbare
   velden overslaan hem ook echt overslaan. aria-hidden houdt hem uit
   screenreaders. */
.vai-formulier__vangnet {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 640px) {
    .vai-aanvraag__regel {
        grid-template-columns: 48px 1fr auto;
    }
    .vai-aanvraag__nr { grid-column: 2; }
}

/* Terugval voor browsers die <dialog> niet kennen (of het element wel kennen
   maar het [open]-attribuut niet begrijpen): zonder deze regel valt de hele
   dialooginhoud open uit op de productpagina. De knop werkt daar nog gewoon
   als link naar de aanvraagpagina, dus functioneel is er niets stuk — het
   ziet er alleen uit alsof er iets kapot is. Op de klasse gemikt en niet op
   de kale elementnaam: deze stylesheet laadt ook op de winkelpagina en
   categoriepagina's, en een <dialog> van het thema of een andere plugin zou
   anders zomaar platgelegd worden. */
.vai-dialoog:not([open]) {
    display: none;
}

.vai-dialoog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    padding: 28px;
    border: 0;
    border-radius: 6px;
    background: #fff;
    color: var(--vai-tekst);
    overflow: auto;
}

.vai-dialoog::backdrop { background: rgba(0, 0, 0, .6); }

.vai-dialoog__kop { margin: 0 0 18px; font-size: 20px; }

.vai-dialoog .vai-dialoog__sluiten {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--vai-grijs);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.vai-dialoog .vai-dialoog__sluiten:hover { color: var(--vai-oranje); }

.vai-teller {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.vai-teller[hidden] { display: none; }

.vai-teller__aantal {
    display: inline-block;
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 11px;
    background: var(--vai-oranje);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.vai-lijstknop.is-actief {
    border-color: var(--vai-oranje);
    color: var(--vai-oranje);
}