/* ---------------------------- Fonts ------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Boogaloo&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');


/* ============================================================
   RESET
============================================================ */

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body,
h1,
p {
    margin: 0;
    padding: 0;
}

button,
input {
    font: inherit;
}

button {
    touch-action: manipulation;
}

a {
    text-decoration: none;
}


/* ============================================================
   COLORS
============================================================ */

:root {
    --blickishhh: #444444;
    --bluishhh: #134287;
    --backgroundishhh: #EEEEEE;

    --login-border: #d7d7d7;
    --login-muted: #6f6f6f;
}


/* ============================================================
   PAGE
============================================================ */

html {
    width: 100%;
    min-height: 100%;

    background-color:
        var(--backgroundishhh);
}


body {
    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    overflow-x: hidden;

    background-color:
        var(--backgroundishhh);

    color: #171717;

    font-family:
        "Google Sans",
        sans-serif;
}


/* ============================================================
   TOP BAR
============================================================ */

.login_topbar {
    width: 100%;

    min-height: 4rem;

    padding:
        0.75rem clamp(1rem, 4vw, 2rem);

    display: flex;

    align-items: center;
}


.login_back_link {
    min-height: 2.75rem;

    display: inline-flex;

    align-items: center;

    gap: 0.55rem;

    padding:
        0.5rem 0.75rem;

    border-radius:
        0.5rem;

    color:
        var(--blickishhh);

    font-size:
        1rem;

    font-weight:
        700;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


@media (hover: hover) and (pointer: fine) {

    .login_back_link:hover {
        background-color:
            rgba(0, 0, 0, 0.06);

        transform:
            translateX(-2px);
    }

}


/* ============================================================
   MAIN
============================================================ */

.login_main {
    width: 100%;

    min-height:
        calc(100vh - 4rem);

    min-height:
        calc(100dvh - 4rem);

    padding:
        clamp(1rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 6vw, 4rem);

    display: flex;

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


/* ============================================================
   LOGIN CARD
============================================================ */

.login_card {
    width:
        min(100%, 29rem);

    padding:
        clamp(1.4rem, 5vw, 2.25rem);

    background-color:
        white;

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

    border-radius:
        0.9rem;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.08);
}


/* ============================================================
   BRAND
============================================================ */

.login_brand {
    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 0.55rem;

    margin-bottom:
        2rem;

    color: black;
}


.login_brand_logo {
    width: 2rem;
    height: 2rem;

    display: block;

    object-fit: contain;
}


.login_brand_name {
    font-size:
        1.35rem;

    font-weight:
        700;

    line-height:
        1;
}


/* ============================================================
   HEADING
============================================================ */

.login_heading {
    margin-bottom:
        1.8rem;
}


.login_eyebrow {
    margin-bottom:
        0.45rem;

    color:
        var(--bluishhh);

    font-size:
        0.75rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


.login_heading h1 {
    margin-bottom:
        0.65rem;

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

    font-size:
        clamp(2.6rem, 8vw, 3.6rem);

    font-weight:
        400;

    line-height:
        1;
}


.login_description {
    color:
        var(--login-muted);

    font-size:
        1rem;

    line-height:
        1.5;
}


/* ============================================================
   FIREBASE AUTH CONTAINER
============================================================ */

.firebase_auth_container {
    width: 100%;
}



/* ============================================================
   AUTH STATUS MESSAGE
============================================================ */

.auth_message {
    width: 100%;

    margin-bottom:
        1.2rem;

    padding:
        0.8rem 0.9rem;

    border:
        1px solid;

    border-radius:
        0.5rem;

    font-size:
        0.9rem;

    font-weight:
        600;

    line-height:
        1.4;
}


.auth_message[hidden] {
    display: none !important;
}


.auth_message_error {
    background-color:
        #fff1f1;

    border-color:
        #d99a9a;

    color:
        #8c2020;
}


.auth_message_success {
    background-color:
        #f0f8f1;

    border-color:
        #92be98;

    color:
        #235c2a;
}


.auth_provider_button:disabled,
.auth_primary_button:disabled {
    opacity: 0.55;

    cursor: wait;

    transform: none;
}





/* ============================================================
   PROVIDER BUTTON
============================================================ */

.auth_provider_button {
    width: 100%;

    min-height:
        3.25rem;

    position: relative;

    display: flex;

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

    padding:
        0.75rem 1rem;

    background-color:
        white;

    color: #171717;

    border:
        2px solid #cfcfcf;

    border-radius:
        0.55rem;

    cursor: pointer;

    font-size:
        1rem;

    font-weight:
        700;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.auth_provider_icon {
    position: absolute;

    left:
        1rem;

    width:
        1.6rem;
    height:
        1.6rem;

    display: flex;

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

    font-size:
        1.15rem;
}


@media (hover: hover) and (pointer: fine) {

    .auth_provider_button:hover {
        background-color:
            #fafafa;

        border-color:
            #9f9f9f;

        transform:
            translateY(-1px);

        box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.07);
    }

}


/* ============================================================
   DIVIDER
============================================================ */

.auth_divider {
    width: 100%;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap:
        0.8rem;

    margin:
        1.4rem 0;
}


.auth_divider span {
    height: 1px;

    background-color:
        var(--login-border);
}


.auth_divider p {
    color:
        #838383;

    font-size:
        0.85rem;

    font-weight:
        600;
}


/* ============================================================
   EMAIL FORM
============================================================ */

.email_login_form {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap:
        1.1rem;
}


.auth_field {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap:
        0.4rem;
}


.auth_field[hidden] {
    display: none !important;
}


.auth_field label {
    color:
        #252525;

    font-size:
        0.9rem;

    font-weight:
        700;
}


.auth_field input {
    width: 100%;

    min-height:
        3.1rem;

    padding:
        0.75rem 0.9rem;

    background-color:
        white;

    border:
        2px solid #cfcfcf;

    border-radius:
        0.5rem;

    color:
        #171717;

    font-size:
        1rem;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.auth_field input::placeholder {
    color:
        #9a9a9a;
}


.auth_field input:focus {
    border-color:
        var(--bluishhh);

    box-shadow:
        0 0 0 3px rgba(19, 66, 135, 0.12);
}


/* ============================================================
   PASSWORD LABEL ROW
============================================================ */

.password_label_row {
    display: flex;

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

    gap:
        1rem;
}


.password_label_row a {
    color:
        var(--bluishhh);

    font-size:
        0.82rem;

    font-weight:
        700;
}


.password_label_row a:hover {
    text-decoration:
        underline;
}


/* ============================================================
   PRIMARY LOGIN BUTTON
============================================================ */

.auth_primary_button {
    width: 100%;

    min-height:
        3.25rem;

    margin-top:
        0.15rem;

    padding:
        0.75rem 1rem;

    background-color:
        var(--bluishhh);

    color: white;

    border:
        2px solid var(--bluishhh);

    border-radius:
        0.55rem;

    cursor: pointer;

    font-size:
        1rem;

    font-weight:
        800;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


@media (hover: hover) and (pointer: fine) {

    .auth_primary_button:hover {
        background-color:
            white;

        color:
            var(--bluishhh);

        transform:
            translateY(-1px);
    }

}


/* ============================================================
   CREATE ACCOUNT
============================================================ */

.create_account_text {
    margin-top:
        1.35rem;

    color:
        var(--login-muted);

    font-size:
        0.9rem;

    line-height:
        1.4;

    text-align:
        center;
}


.create_account_text a {
    color:
        var(--bluishhh);

    font-weight:
        800;
}


.create_account_text a:hover {
    text-decoration:
        underline;
}


/* ============================================================
   GUEST
============================================================ */

.guest_area {
    margin-top:
        1.6rem;

    padding-top:
        1.4rem;

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

    text-align:
        center;
}


.continue_guest_link {
    display: inline-block;

    color:
        var(--blickishhh);

    font-size:
        0.9rem;

    font-weight:
        700;
}


.continue_guest_link:hover {
    color:
        var(--bluishhh);

    text-decoration:
        underline;
}


/* ============================================================
   SMALL PHONES
============================================================ */

@media (max-width: 480px) {

    .login_topbar {
        min-height:
            3.5rem;

        padding:
            0.5rem 0.75rem;
    }


    .login_main {
        min-height:
            calc(100dvh - 3.5rem);

        padding:
            0.5rem 0.75rem 1.5rem;

        align-items:
            flex-start;
    }


    .login_card {
        padding:
            1.25rem;

        border-radius:
            0.75rem;
    }


    .login_brand {
        margin-bottom:
            1.5rem;
    }


    .login_heading {
        margin-bottom:
            1.5rem;
    }

}


/* ============================================================
   VERY SMALL PHONES
============================================================ */

@media (max-width: 340px) {

    .login_card {
        padding:
            1rem;
    }


    .auth_provider_button {
        justify-content:
            flex-start;

        padding-left:
            3.2rem;
    }


    .password_label_row {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            0.25rem;
    }

}


/* ============================================================
   SHORT LANDSCAPE
============================================================ */

@media (max-height: 500px) and (orientation: landscape) {

    .login_main {
        align-items:
            flex-start;
    }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline:
        3px solid var(--bluishhh);

    outline-offset:
        2px;
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}