/*
 * ============================================================
 * BLOODMOON GRID
 * Portal login page
 * ============================================================
 *
 * Version : 2026-09-08 07:45
 */


.portal-login-page {

    width:
        min(
            var(--container),
            calc(100% - 40px)
        );

    min-height:
        calc(100vh - 104px);

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        38px
        0;

}


.portal-login-card {

    width:
        min(
            440px,
            100%
        );

    padding:
        28px;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    background:
        #ffffff;

    box-shadow:
        0 14px 38px
        rgba(30,40,55,0.09);

}


.portal-login-heading {

    margin-bottom:
        22px;

    text-align:
        center;

}


.portal-login-kicker {

    color:
        var(--bloodmoon);

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;

}


.portal-login-heading h1 {

    margin:
        5px
        0
        5px;

    color:
        #22272d;

    font-size:
        1.75rem;

}


.portal-login-heading p {

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        0.82rem;

    line-height:
        1.5;

}


.portal-login-error {

    margin-bottom:
        16px;

    padding:
        10px
        12px;

    border:
        1px solid
        rgba(196,18,37,0.16);

    border-radius:
        8px;

    background:
        #fff4f5;

    color:
        #9e1525;

    font-size:
        0.75rem;

    line-height:
        1.45;

}


.portal-login-form {

    display:
        grid;

    gap:
        14px;

}


.portal-login-field {

    display:
        grid;

    gap:
        6px;

}


.portal-login-field label {

    color:
        #454c55;

    font-size:
        0.72rem;

    font-weight:
        750;

}


.portal-login-field input {

    width:
        100%;

    min-height:
        42px;

    padding:
        0 12px;

    border:
        1px solid
        var(--border);

    border-radius:
        8px;

    background:
        #ffffff;

    color:
        #22272d;

    font-family:
        inherit;

    font-size:
        0.82rem;

    outline:
        none;

}


.portal-login-field input:focus {

    border-color:
        rgba(196,18,37,0.45);

    box-shadow:
        0 0 0 3px
        rgba(196,18,37,0.08);

}


.portal-login-submit,
.portal-login-logout {

    min-height:
        40px;

    border:
        0;

    border-radius:
        8px;

    background:
        var(--bloodmoon);

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        0.76rem;

    font-weight:
        800;

    cursor:
        pointer;

}


.portal-login-submit:hover,
.portal-login-logout:hover {

    background:
        var(--bloodmoon-dark);

}


.portal-login-links {

    margin-top:
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    color:
        #a5abb2;

    font-size:
        0.72rem;

}


.portal-login-links a {

    color:
        var(--bloodmoon);

    text-decoration:
        none;

    font-weight:
        700;

}


.portal-login-links a:hover {

    text-decoration:
        underline;

}


.portal-login-account {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        10px;

}


.portal-login-account > div {

    padding:
        13px;

    border:
        1px solid
        var(--border);

    border-radius:
        9px;

    background:
        #f8f9fa;

}


.portal-login-account span {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--text-light);

    font-size:
        0.65rem;

    font-weight:
        700;

    text-transform:
        uppercase;

}


.portal-login-account strong {

    color:
        #30363d;

    font-size:
        0.82rem;

}


.portal-login-logout-form {

    margin-top:
        16px;

}


.portal-login-logout {

    width:
        100%;

}


@media (max-width: 520px) {

    .portal-login-page {

        width:
            calc(100% - 20px);

        padding:
            24px
            0;

    }


    .portal-login-card {

        padding:
            22px
            18px;

    }


    .portal-login-account {

        grid-template-columns:
            1fr;

    }

}