/* Inloggen met een code of wachtwoord (Views/Partials/Login.cshtml, component-login.js) */

/* De twee blokken op de inlogpagina: inloggen en registreren, naast elkaar en even hoog. */
.logincard {
    height: 100%;
    padding: 2.4rem;
    border-radius: 1.6rem;
}

@media (min-width: 768px) {
    .logincard {
        padding: 4rem;
    }
}

.logincard--filled {
    background-color: var(--blue-light);
}

.logincard--outline {
    border: .1rem solid var(--blue-light);
    background-color: var(--white);
}

/* De knoppenrijen zetten display, en dat zou het hidden-attribuut overrulen. */
.login [hidden] {
    display: none !important;
}

.login__form {
    margin-top: 2.4rem;
}

    .login__form label.fixed-label {
        margin-bottom: 1.2rem;
    }

/* Naast elkaar zolang het past; op een smal scherm schuift de tweede knop eronder. */
.login__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.6rem;
}

    /* .form--styled .button geeft elke knop 3rem boven zich; onder een veld is dat te veel. */
    .login__buttons .button {
        justify-content: center;
        margin-top: 0;
    }

        .login__buttons .button:disabled {
            background-color: var(--grey-light);
            color: var(--black);
            cursor: not-allowed;
        }

            /* Pijltje in de tekstkleur (zelfde svg als .button--white), en het schuift niet mee bij hover. */
            .login__buttons .button:disabled span:after {
                right: -2rem;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='12' viewBox='0 0 8 14'%3E%3Cpolyline points='1 13 7 7 1 1' fill='none' stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/svg%3E");
            }

.login .form--styled .form-group.login__buttons {
    margin-top: 2.2rem;
}

.login__or {
    font-size: 1.4rem;
}

/* Compacter, omdat de twee knoppen met "of" anders niet naast elkaar in een half blok passen.
   Tussen 992 en 1200px past dat ook zo niet: daar schuift de tweede knop eronder. */
@media (min-width: 1200px) {
    .login__start {
        gap: .8rem;
    }

        .login__start .button {
            padding-left: 2rem;
            padding-right: 4rem;
            font-size: 1.4rem;
        }
}

/* .button zet de focusring overal uit; hier moet je hem met het toetsenbord wel zien. */
.login .button:focus-visible,
.login__link:focus-visible {
    outline: .2rem solid var(--black) !important;
    outline-offset: .2rem;
}

/* Op een eigen wit vlak: --red-text haalt alleen op wit genoeg contrast. */
.login__message {
    margin: 1.6rem 0 0;
    padding: .8rem 1.6rem;
    border-radius: 1rem;
    background-color: var(--white);
    font-weight: 600;
}

.login__message--error {
    color: var(--red-text);
}

.login .field-validation-error {
    margin-top: .8rem;
    padding: .8rem 1.6rem;
    border-radius: 1rem;
    background-color: var(--white);
    color: var(--red-text);
}

/* Wijkt bewust af van .form--styled: een wit vlak op het gekleurde blok, met de hoogte en hoeken van .button.
   Het label staat erboven (label.fixed-label). */
.login .form--styled input.form-control.login__input {
    height: 5rem;
    padding: 0 2rem;
    border: 0;
    border-radius: 2.5rem;
    background-color: var(--white);
    /* Kleiner dan 1.6rem laat iOS bij het focussen inzoomen. */
    font-size: 1.6rem;
}

    .login .form--styled input.form-control.login__input:focus {
        box-shadow: 0 0 0 .2rem var(--blue);
    }

    /* Een browser die het veld vooraf invult, zet er zijn eigen lichtblauw op en laat dat niet overschrijven.
       Een binnenschaduw schildert er wel overheen. */
    .login .form--styled input.form-control.login__input:autofill {
        box-shadow: inset 0 0 0 5rem var(--white);
        -webkit-text-fill-color: var(--black);
    }

    .login .form--styled input.form-control.login__input:autofill:focus {
        box-shadow: inset 0 0 0 5rem var(--white), 0 0 0 .2rem var(--blue);
    }

    /* Zolang een vooraf ingevuld veld niet is aangeraakt, zet Chrome er ook zijn eigen lettertype op (klein Arial);
       alleen via ::first-line is dat te overschrijven. */
    .login .form--styled input.form-control.login__input:autofill::first-line {
        font-family: Inter, sans-serif;
        font-size: 1.6rem;
    }

.login__password {
    margin-top: 2.4rem;
}

.login__code {
    position: relative;
    max-width: 36rem;
    margin-bottom: 1.6rem;
}

/* Onzichtbaar over de vakjes heen, zodat een klik of tik altijd in het veld terechtkomt. */
.login__codeinput {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    /* Kleiner dan 1.6rem laat iOS bij het focussen inzoomen. */
    font-size: 1.6rem;
    opacity: 0;
    cursor: text;
}

.login__codeboxes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.login__codebox {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 1rem;
    background-color: var(--white);
    color: var(--black);
    font-size: 2.4rem;
    font-weight: 600;
}

/* Het vakje dat aan de beurt is; alleen zichtbaar zolang het veld de focus heeft. */
.login__codeinput:focus + .login__codeboxes .login__codebox--active {
    box-shadow: 0 0 0 .2rem var(--blue);
}

.login__hint {
    margin-bottom: 2.4rem;
    color: var(--black);
    font-size: 1.4rem;
}

.login__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 2.4rem;
    margin: 2.4rem 0 0;
}

/* --blue haalt op --blue-light geen 4,5:1 (WCAG AA). */
.login__link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--blue-hover);
    font-size: 1.4rem;
    text-decoration: underline;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .login__link:hover {
        color: var(--black);
    }
}