/**
 * AVG-toestemmingsveld voor Gravity Forms.
 *
 * Op de voorkant doet het thema-framework van Gravity Forms het werk: het veld
 * meldt zich als keuzeveld aan en erft daardoor de standaard vinkje-naast-label
 * opmaak. Hieronder staat alleen wat Gravity Forms zelf niet regelt.
 */

/* Vangnet voor plekken waar het thema-framework niet meekomt, zoals de
   blokeditor en de formulierbouwer. Bewust met lage gewichten geschreven en met
   dezelfde waarden als Gravity Forms, zodat de opmaak van Gravity Forms zelf
   wint zodra die er wel is. */
.rellicon-consent .gfield_checkbox {
    display: flex;
    flex-direction: column;
    gap: var(--gf-field-choice-gap, 0.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rellicon-consent .gchoice {
    display: grid;
    grid-template-columns: minmax(var(--gf-ctrl-choice-size, 1rem), max-content) auto;
    column-gap: var(--gf-field-choice-meta-space, 0.5rem);
    align-items: start;
}

.rellicon-consent .gchoice > label {
    margin: 0;
}

/* Gravity Forms markeert bij een validatiefout het hele veld, inclusief elk
   vinkje erin. Alleen het toestemmingsvinkje is verplicht, dus het
   nieuwsbrief-vinkje krijgt zijn gewone kleuren terug. Een optionele keuze mag
   niet als afgekeurd overkomen, anders lijkt de nieuwsbrief verplicht. */
.gfield_error .rellicon-consent__choice--newsletter input[type="checkbox"],
.gfield_error .rellicon-consent .rellicon-consent__choice--newsletter input[type="checkbox"] {
    --gf-local-bg-color: var(--gf-ctrl-bg-color);
    --gf-local-border-color: var(--gf-ctrl-border-color);
    border-color: var(--gf-ctrl-border-color, currentColor);
}

.gfield_error .rellicon-consent__choice--newsletter .gform-field-label {
    --gf-local-color: var(--gf-ctrl-label-color-secondary);
}