﻿.block__form {
    padding: var(--padding-lg) 0;
}

    .block__form fieldset {
        border: none;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
        min-width: 0;
    }

    .block__form .form {
        max-width: 50rem;
    }

    /* Labels van tekstvelden en keuzelijsten, en de legend van keuzerondjes en selectievakjes */
    .block__form .form__group > label[for],
    .block__form .form__group > legend {
        display: flex;
        font-family: var(--secondfont);
        text-transform: uppercase;
        font-size: 1.6rem;
        font-weight: 700;
        margin-bottom: 1rem;
        padding: 0;
    }

    .block__form .form__indicator {
        margin-left: .3rem;
    }

    .block__form .form__help {
        margin: 0 0 1rem;
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .block__form .form__options {
        display: flex;
        flex-flow: column;
        gap: 1rem;
        font-size: 1.8rem;
        line-height: 2.4rem;
    }

    /* Keuzerondjes en selectievakjes: het echte input blijft focusbaar maar onzichtbaar,
       het vakje en het vinkje worden op de span getekend. */
    .block__form .form__option {
        position: relative;
        display: block;
        padding: 0 0 0 3rem;
        cursor: pointer;
    }

        .block__form .form__option input {
            position: absolute;
            top: 0;
            left: 0;
            width: 1.6rem;
            height: 1.6rem;
            margin: 0;
            opacity: 0;
        }

        .block__form .form__option span:before {
            content: "";
            width: 1.6rem;
            height: 1.6rem;
            background-color: var(--white);
            position: absolute;
            top: .4rem;
            left: 0;
        }

        .block__form .form__option input[type="radio"] + span:before {
            border-radius: 50%;
        }

        .block__form .form__option input:focus-visible + span:before {
            outline: 2px solid var(--black);
            outline-offset: 2px;
        }

        .block__form .form__option input:checked + span:after {
            content: "";
            width: 2rem;
            height: 2rem;
            background-color: transparent;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9 22l-10-10.598 2.798-2.859 7.149 7.473 13.144-14.016 2.909 2.806z'/%3E%3C/svg%3E");
            background-size: 100% auto;
            position: absolute;
            top: 0;
            left: 0;
        }

    .block__form .richtext,
    .block__form .richtext p {
        font-size: 1.8rem;
        line-height: 2.4rem;
    }

    .block__form .button {
        margin-top: 3rem;
    }

    .block__form .form__status:not(:empty) {
        margin-top: 2rem;
        font-weight: 700;
    }

    .block__form .form__success {
        font-size: 1.8rem;
        line-height: 2.4rem;
    }

    .block__form--center .form {
        margin-left: auto;
        margin-right: auto;
    }
