.s1bcd-radio {
    & input[type="radio"] {
        display: none;
    }

    & label {
        display: inline-block;
        padding: 1em 3em;
        margin: 1em .5em 1em 0;
        gap: 2em;

        border: .5px solid var(--color-text-two);
        border-radius: 8px;

        color: var(--color-text-one);

        &:hover {
            background-color: var(--color-opacity-one);
        }

        &:has(input:checked) {
            border: 3px solid var(--color-accent-one);
        }

        &:has(input:not(:checked)) {
            color: var(--color-text-two);
        }
    }
} 


/* MARK: Openklappen vragen (progressive disclosure)
/* ---------- Progressive disclosure 1b ---------- */
.extra-1b1, .extra-1b2 {
    display: none;
}

/* Vraag aan ChatGPT: hoe kan ik een element dat na de fieldset komt in de HTML aanspreken? */
/* >> met "~ .extra-1b1" pak je alle elementen die op hetzelfde niveau staan en na fieldset komen */
fieldset.deceased-partner:has(.checked-1b1:checked) ~ .extra-1b1 {
    display: block;
}

/* Voorwaarde: als zowel ja bij de eerste vraag, als bij de tweede vraag is geselecteerd. */
fieldset.deceased-partner:has(.checked-1b1:checked) ~ fieldset.extra-1b1:has(.checked-1b2:checked) ~ .extra-1b2 {
    display: block;
}

/* ---------- Progressive disclosure 1c ---------- */
.extra-1c1, .extra-1c2 {
    display: none;
}

fieldset.deceased-family:has(.checked-1c1:checked) ~ .extra-1c1 {
    display: block;
}

fieldset.deceased-family:has(.checked-1c1:checked) ~ fieldset.extra-1c1:has(.checked-1c2:checked) ~ .extra-1c2 {
    display: block;
}

/* ---------- Progressive disclosure 1d ---------- */
.extra-1d1 {
    display: none;
}

fieldset.deceased-notary:has(.checked-1d1:checked) ~ .extra-1d1 {
    display: block;
}





/* MARK: BIGGER SCREEN
/* ------ groot scherm media query ----- */
@media screen and (min-width: 48em) {
    form {
        width: clamp(50em, 60vw, 55em);
    }
}