:root .info__contactform {
    border: 1px solid var(--ejk-hairline);
    border-radius: var(--at-radius--xs);
    padding: var(--at-space--l);
    background: var(--ejk-red-grey-l-3);

    & form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--at-space--s);

        & :nth-last-child(-n+2) {
            grid-column: span 2;
        }

        & .form-group {

            & select {
                font-weight: 600;
                cursor: pointer;

                /* GEEN outline. De focusindicator is de achtergrond- en
                   randwissel die Bricks al zet via
                   --at-form-input-background-color--focus. Dat voldoet aan
                   WCAG 2.4.7 — er moet iets zichtbaar veranderen, en dat
                   hoeft geen ring te zijn. */
                &:focus,
                &:focus-visible {
                    outline: none;
                }

                /* Fallback-paneel: Firefox tekent het paneel zelf.
                   color-scheme: dark op :root maakt het donker; deze twee
                   regels pakken in Firefox en in Chrome op Windows/Linux,
                   en worden op macOS door het OS genegeerd. */
                & option {
                    background-color: var(--ejk-surface-2);
                    color: var(--ejk-text);
                }

                /* Volledig gestyled paneel — Chrome/Edge 135+, Safari 27+.
                   Firefox slaat dit blok over en houdt de fallback hierboven.
                   Dit MOET binnen & select staan: de fallback hierboven heeft
                   door de nesting specificiteit (0,3,3), en een @supports op
                   bestandsniveau haalt maar (0,2,2) — dan wint de fallback
                   en gebeurt er bij hover niets. */
                @supports (appearance: base-select) {

                    &,
                    &::picker(select) {
                        appearance: base-select;
                    }

                    /* Bricks tekent zelf een pijl met twee linear-gradients.
                       Die moet weg, anders staan er twee. */
                    background-image: none;

                    &::picker-icon {
                        color: var(--ejk-text-muted);
                        transition: rotate var(--at-duration--fast) ease-in-out;
                    }

                    &:open::picker-icon {
                        rotate: 180deg;
                    }

                    &::picker(select) {
                        background-color: var(--ejk-surface-2);
                        border: 1px solid var(--ejk-hairline);
                        border-radius: var(--at-form-input-border-radius);
                        padding: var(--at-space--3xs);
                        box-shadow: var(--at-shadow--l);
                    }

                    & option {
                        background-color: transparent;
                        color: var(--ejk-text);
                        padding: var(--at-space--2xs) var(--at-space--s);
                        border-radius: var(--at-radius--2xs);
                        font-weight: 500;
                        outline: none;

                        &::checkmark {
                            display: none;
                        }

                        /* Volgorde is hier de truc: gelijke specificiteit,
                           dus de laatste wint. Toetsenbordfocus krijgt
                           dezelfde kleur als hover — zo is er ook zonder
                           ring altijd zichtbaar waar je staat. */
                        &:checked {
                            background-color: var(--ejk-surface-band-brand);
                            color: var(--ejk-on-band);
                            font-weight: 600;
                        }

                        &:hover,
                        &:focus-visible {
                            background-color: var(--ejk-surface-3);
                            color: var(--ejk-text);
                        }

                        &:checked:hover,
                        &:checked:focus-visible {
                            background-color: var(--ejk-primary-l-2);
                            color: var(--ejk-on-band);
                        }
                    }
                }
            }

            & input,
            & textarea {
                font-weight: 600;

                &::placeholder {
                    font-weight: 400;
                }

                &:focus::placeholder {
                    color: var(--ejk-grey-l-6);
                }

                /* Zie de toelichting bij select: geen ring, wel een
                   zichtbare achtergrondwissel. */
                &:focus,
                &:focus-visible {
                    outline: none;
                }
            }

            & .form-group-error-message {
                font-size: var(--at-text--xs);
                background-color: var(--ejk-primary-l-4);
                color: var(--ejk-secondary-d-1);
                display: none;
                padding: 5px;
                width: 100%;

                &.show {
                    display: block;
                }
            }
        }
    }

    & .submit-button-wrapper {
    }
}