/* =====================================================
   [1.1.1]
   LOGIN PAGE FOUNDATION
===================================================== */

:root {

    --dez-primary:
        #004F71;

    --dez-secondary:
        #D9E5EA;

    --dez-dark:
        #163443;

    --dez-white:
        #FFFFFF;

    --dez-light:
        #F5F7F8;

    --login-shadow:

        0 18px 45px rgba(
            0,
            79,
            113,
            0.15
        );

}

* {

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

}

body {

    font-family:
        "Lato",
        sans-serif;

    min-height:
        100vh;

    background:

        linear-gradient(

            180deg,

            var(--dez-secondary),

            var(--dez-white)

        );

}

/* =====================================================
   [1.1.2]
   LOGIN PAGE LAYOUT
===================================================== */

.login-page {

    min-height:
        100vh;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        40px;

}


/* =====================================================
   [1.1.3]
   LOGIN CARD
===================================================== */

.login-card {

    width:
        min(460px, 100%);

    background:
        var(--dez-white);

    border-radius:
        20px;

    padding:
        50px;

    border:
    1px solid rgba(
        0,
        79,
        113,
        0.08
    );

    box-shadow:
        var(--login-shadow);

    text-align:
        center;

    transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;

}

/* =====================================================
   [1.1.8]
   LOGIN CARD HOVER
===================================================== */

.login-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(
            0,
            79,
            113,
            0.18
        );

    box-shadow:
        var(--login-shadow-lg);

}

/* =====================================================
   [1.1.4]
   LOGIN LOGO
===================================================== */

.login-logo {

    width:
        220px;

    max-width:
        100%;

    height:
        auto;

    margin-bottom:
        30px;

}

/* =====================================================
   [1.1.5]
   LOGIN TYPOGRAPHY
===================================================== */

.login-card h1 {

    color:
        var(--dez-primary);

    font-size:
        2rem;

    font-weight:
        700;

    margin-bottom:
        12px;

}

.login-card p {

    color:
        var(--dez-dark);

    font-size:
        1rem;

    line-height:
        1.6;

    margin-bottom:
        35px;

    opacity:
        0.85;

}

.login-card small {

    display:
        block;

    margin-top:
        30px;

    color:
        var(--dez-dark);

    opacity:
        0.65;

    font-size:
        0.85rem;

}

/* =====================================================
   [1.1.6]
   LOGIN FORM
===================================================== */

#login-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

}

#login-form label {

    text-align:
        left;

    font-weight:
        600;

    color:
        var(--dez-primary);

}

#login-form input {

    padding:
        16px;

    border:
        1px solid #d8e2e8;

    border-radius:
        10px;

    font-size:
        1rem;

    font-family:
        inherit;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;

}

#login-form input:focus {

    outline:
        none;

    border-color:
        var(--dez-primary);

    box-shadow:
        0 0 0 3px rgba(
            0,
            79,
            113,
            0.15
        );

}

/* =====================================================
   [1.1.7]
   LOGIN BUTTON
===================================================== */

#login-form button {

    margin-top:
        10px;

    padding:
        16px;

    border:
        none;

    border-radius:
        10px;

    background:
        var(--dez-primary);

    color:
        white;

    font-size:
        1rem;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;

    box-shadow:
        var(--login-shadow);

}

#login-form button:hover {

    background:
        #0B698F;

    transform:
        translateY(-3px);

}

#login-form button:active {

    transform:
        translateY(0);

}

/* =====================================================
   [1.1.9]
   PREMIUM INPUT FOCUS
===================================================== */

.login-card input:focus {

    outline: none;

    border-color:
        #004f71;

    box-shadow:
        0 0 0 4px rgba(
            0,
            79,
            113,
            0.12
        );

}