/*
 * ============================================================
 * BNI ANS EXCELLENCE
 * LOGIN APPLICATION V1
 *
 * Actif uniquement dans la PWA installée.
 * ============================================================
 */

@media (display-mode: standalone) {

    html {
        min-height: 100%;

        background:
            #eef1f4;
    }


    body.bni-login-app {
        min-height: 100vh;
        min-height: 100dvh;

        margin: 0 !important;

        padding:
            max(
                16px,
                env(safe-area-inset-top, 0px)
            )
            14px
            max(
                22px,
                env(safe-area-inset-bottom, 0px)
            ) !important;

        box-sizing: border-box;

        display: flex;

        align-items: center;
        justify-content: center;

        background:
            radial-gradient(
                circle at 85% 8%,
                rgba(255,255,255,.16),
                transparent 28%
            ),
            radial-gradient(
                circle at 10% 92%,
                rgba(255,255,255,.10),
                transparent 32%
            ),
            linear-gradient(
                155deg,
                #7f0f20 0%,
                #a91229 40%,
                #cf2030 100%
            ) !important;

        -webkit-font-smoothing: antialiased;
    }


    /*
     * Conteneur principal.
     */
    body.bni-login-app
    .auth-shell {
        width: 100% !important;
        max-width: 470px !important;

        margin: auto !important;

        padding: 0 !important;

        background: transparent !important;
    }


    /*
     * Bandeau logos.
     */
    body.bni-login-app
    .auth-brand {
        position: relative;

        overflow: hidden;

        margin-bottom: 14px !important;

        padding:
            18px 16px !important;

        border:
            1px solid
            rgba(255,255,255,.18) !important;

        border-radius:
            24px !important;

        background:
            rgba(255,255,255,.97) !important;

        box-shadow:
            0 18px 45px
            rgba(0,0,0,.18) !important;
    }


    body.bni-login-app
    .auth-brand::before {
        content: "";

        position: absolute;

        left: 0;
        right: 0;
        top: 0;

        height: 4px;

        background:
            linear-gradient(
                90deg,
                #8e1023,
                #cf2030,
                #e43a48
            );
    }


    body.bni-login-app
    .auth-brand img {
        max-height: 52px !important;
        max-width: 100% !important;

        object-fit: contain;
    }


    /*
     * Tous les blocs principaux du login.
     * On reste volontairement générique pour ne toucher
     * à aucune logique PHP.
     */
    body.bni-login-app
    .auth-shell > div:not(.auth-brand),
    body.bni-login-app
    .auth-shell > section,
    body.bni-login-app
    .auth-shell > main,
    body.bni-login-app
    form {
        box-sizing: border-box;
    }


    /*
     * Formulaire.
     */
    body.bni-login-app
    form {
        width: 100%;

        border-radius:
            22px !important;
    }


    body.bni-login-app
    label {
        color:
            #303640 !important;

        font-weight:
            700 !important;
    }


    body.bni-login-app
    input[type="email"],
    body.bni-login-app
    input[type="text"],
    body.bni-login-app
    input[type="password"] {
        width: 100%;

        min-height:
            50px !important;

        box-sizing: border-box;

        padding:
            12px 14px !important;

        color:
            #171717 !important;

        background:
            #f7f8fa !important;

        border:
            1px solid
            rgba(15,23,42,.12) !important;

        border-radius:
            14px !important;

        outline: none;

        font-size:
            16px !important;

        transition:
            border-color .15s ease,
            box-shadow .15s ease,
            background-color .15s ease;
    }


    body.bni-login-app
    input:focus {
        background:
            #ffffff !important;

        border-color:
            #cf2030 !important;

        box-shadow:
            0 0 0 4px
            rgba(207,32,48,.10) !important;
    }


    /*
     * Boutons.
     */
    body.bni-login-app
    button,
    body.bni-login-app
    input[type="submit"] {
        width: 100%;

        min-height:
            52px !important;

        border: 0 !important;

        border-radius:
            15px !important;

        color:
            #ffffff !important;

        background:
            linear-gradient(
                135deg,
                #a91027,
                #cf2030
            ) !important;

        box-shadow:
            0 8px 20px
            rgba(181,18,43,.24);

        font-size:
            15px !important;

        font-weight:
            800 !important;

        cursor: pointer;
    }


    body.bni-login-app
    button:active,
    body.bni-login-app
    input[type="submit"]:active {
        transform:
            scale(.985);
    }


    /*
     * Liens.
     */
    body.bni-login-app
    a {
        color:
            #a91229;
    }


    /*
     * Textes sur les cartes claires.
     */
    body.bni-login-app
    .auth-shell {
        color:
            #1f2937;
    }


    body.bni-login-app
    .auth-shell h1,
    body.bni-login-app
    .auth-shell h2,
    body.bni-login-app
    .auth-shell h3 {
        color:
            #171717;
    }


    /*
     * Messages erreur / succès existants.
     */
    body.bni-login-app
    [class*="error"],
    body.bni-login-app
    [class*="danger"] {
        border-radius:
            13px !important;
    }


    body.bni-login-app
    [class*="success"] {
        border-radius:
            13px !important;
    }

}


@media (display-mode: standalone) and (max-width: 390px) {

    body.bni-login-app {
        padding-left:
            10px !important;

        padding-right:
            10px !important;
    }


    body.bni-login-app
    .auth-brand {
        border-radius:
            20px !important;
    }

}


@media (
    display-mode: standalone
)
and (
    prefers-reduced-motion: reduce
) {

    body.bni-login-app
    input,
    body.bni-login-app
    button {
        transition: none !important;
    }

}