/* Login e registrazione come nell'app (Figma NIVA - V02.01, sezione Login): valori presi da app_colors.dart,
   button_styles.dart, input_styles.dart e text_styles.dart di niva-app. Su desktop la foto dell'ingresso
   dell'app sta a sinistra del form; sotto i 992 px resta solo il form, come nell'app. */

.niva-auth {
    --niva-auth-bg: #EEEFF1;
    --niva-auth-text: #000000;
    --niva-auth-hint: #666666;
    --niva-auth-btn-bg: #F2F2F2;
    --niva-auth-social-border: #747775;
    display: flex;
    /* .content ha 1.1rem in alto e l'header fisso è alto 3.5rem: la pagina parte sotto l'header e arriva al footer
       (alto 70) */
    min-height: calc(100vh - 70px);
    margin-top: -1.1rem;
    padding-top: 3.5rem;
    /* compensa il margin-top: 20px di .page-wrap::after (climby.css): il footer segue la pagina */
    margin-bottom: -20px;
    background: var(--niva-auth-bg);
    color: var(--niva-auth-text);
    font-family: "Red Hat Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
}

.niva-auth-photo {
    display: none;
    flex: 1 1 50%;
    /* ritaglio di login_background.jpg con la roccia al centro: nell'originale (verticale) la roccia sta in basso
       e con cover restava attaccata al fondo dello schermo */
    background: #3a3d42 url("../media/login_background_centrata.jpg") center / cover no-repeat;
}

.niva-auth-main {
    flex: 1 1 50%;
    display: flex;
    justify-content: center;
    padding: 40px 33px 40px;
}

.niva-auth-col {
    width: 100%;
    max-width: 327px;
}

@media (min-width: 992px) {
    .niva-auth-photo {
        display: block;
    }

    .niva-auth-main {
        padding-top: 64px;
    }

    .niva-auth-col {
        max-width: 360px;
    }
}

.niva-auth-mark {
    display: block;
    width: 38px;
    height: 38px;
    margin: 0 auto 10px;
}

.niva-auth h1.niva-auth-title {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.3;
    color: var(--niva-auth-text);
}

.niva-auth-text {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

.niva-auth-bold,
.niva-auth-link {
    font-weight: 700;
    color: var(--niva-auth-text);
}

.niva-auth-link {
    cursor: pointer;
    text-decoration: none;
}

    .niva-auth-link:hover {
        text-decoration: underline;
    }

.niva-auth-notice {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--niva-auth-text);
}

/* social: Google (bottone ufficiale "icon", 40 px fisso) e Apple (logo-only dell'app, ridotto a 40) */
.niva-auth-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    min-height: 40px;
}

    /* bordo come il bottone di Apple: Google disegna il suo bordo grigio chiaro (#dadce0), nel bottone in pagina
       o in un iframe; il bordo nostro sta sul contenitore e il contenuto, spostato di 1px, nasconde quello di Google */
    .niva-auth-social #googleDiv {
        box-sizing: border-box;
        width: 40px;
        height: 40px;
        border: 1px solid var(--niva-auth-social-border);
        border-radius: 4px;
        overflow: hidden;
        background: #ffffff;
    }

        .niva-auth-social #googleDiv > div {
            margin: -1px;
        }

.niva-auth-apple {
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--niva-auth-social-border);
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
    cursor: pointer;
}

    .niva-auth-apple img {
        display: block;
        width: 100%;
        height: 100%;
    }

.niva-auth-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 8px;
    font-size: 14px;
}

    .niva-auth-sep::before,
    .niva-auth-sep::after {
        content: "";
        flex: 1;
        border-top: 1px solid var(--niva-auth-text);
    }

/* errori sopra i campi, come nell'app */
.niva-auth-error {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: #dc3545;
}

    .niva-auth-error p {
        margin: 0;
    }

/* campo sottolineato con icona e floating label */
.niva-auth-field {
    position: relative;
    margin: 1px 0;
    padding-top: 14px;
    text-align: start;
}

    .niva-auth-field input,
    .niva-auth-field select {
        display: block;
        width: 100%;
        padding: 8px 40px 10px 28px;
        border: 0;
        border-bottom: 1px solid var(--niva-auth-text);
        border-radius: 0;
        background: transparent;
        font-size: 14px;
        font-weight: 700;
        color: var(--niva-auth-text);
        outline: none;
    }

    .niva-auth-field select {
        padding-right: 8px;
    }

    .niva-auth-field input:focus,
    .niva-auth-field select:focus {
        border-bottom-width: 2px;
        padding-bottom: 9px;
    }

    .niva-auth-field > .bi:first-child {
        position: absolute;
        left: 10px;
        top: 26px;
        font-size: 14px;
        line-height: 1;
        pointer-events: none;
    }

    .niva-auth-field label {
        position: absolute;
        left: 28px;
        top: 23px;
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        color: var(--niva-auth-hint);
        pointer-events: none;
        transition: top .15s, font-size .15s;
    }

    /* il nome del campo sale sul bordo quando c'è testo o il campo ha il focus */
    .niva-auth-field input:focus + label,
    .niva-auth-field input:not(:placeholder-shown) + label,
    .niva-auth-field.niva-auth-field-filled label {
        top: 0;
        font-size: 12px;
    }

    .niva-auth-field .validation-message {
        margin-top: 4px;
        font-size: 13px;
        font-weight: 700;
        color: #dc3545;
    }

.niva-auth-eye {
    position: absolute;
    right: 3px;
    top: 16px;
    width: 40px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--niva-auth-text);
    font-size: 16px;
}

/* palestra (solo da QR gara): il typeahead ha bordo e campo suoi, qui diventa una riga come gli altri */
.niva-auth .niva-auth-field .blazored-typeahead {
    border: 0 !important;
    border-bottom: 1px solid var(--niva-auth-text) !important;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding-left: 20px;
}

    .niva-auth .niva-auth-field .blazored-typeahead input {
        border: 0;
        padding: 8px;
    }

    .niva-auth .niva-auth-field .blazored-typeahead__input-mask {
        font-size: 14px;
        font-weight: 700;
    }

/* checkbox da 24 come nell'app */
.niva-auth input[type=checkbox] {
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: #000000;
    cursor: pointer;
}

.niva-auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 16px;
    font-size: 14px;
}

.niva-auth-remember {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-weight: 700;
    cursor: pointer;
}

.niva-auth-forgot {
    margin-right: 15px;
    color: var(--niva-auth-text);
    text-decoration: underline;
    cursor: pointer;
}

/* bottone "auth" dell'app: pillola, fondo #F2F2F2, bordo nero */
.niva-auth-btn {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--niva-auth-text);
    border-radius: 999px;
    background: var(--niva-auth-btn-bg);
    color: var(--niva-auth-text);
    font-size: 14px;
    font-weight: 700;
}

    .niva-auth-btn:hover:not(:disabled) {
        background: #e4e4e4;
    }

    .niva-auth-btn:disabled {
        border-color: #cccccc;
        color: #999999;
    }

.niva-auth-footer {
    margin-top: 28px;
}

    .niva-auth-footer .niva-auth-text + .niva-auth-text {
        margin-top: 15px;
    }

/* policy della registrazione dentro la colonna del form */
.niva-auth .niva-auth-policies {
    margin: 12px 0 16px;
    text-align: start;
    font-size: 14px;
}

    .niva-auth .niva-auth-policies .consent-policy-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .niva-auth .niva-auth-policies label,
    .niva-auth .niva-auth-policies a,
    .niva-auth .niva-auth-policies a span {
        color: var(--niva-auth-text);
        font-weight: 400;
    }

    .niva-auth .niva-auth-policies a {
        text-decoration: underline;
    }

    .niva-auth .niva-auth-policies hr {
        display: none;
    }

    .niva-auth .niva-auth-policies .msg-alert p {
        margin: 4px 0 8px 36px;
        font-size: 13px;
        font-weight: 700;
    }