/* =========================================================
   VODDKA AUTH
   Reference-style single mobile-app login UI
========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #668074;
    --bg-dark: #17483e;

    --cream: #f4f0df;
    --cream-light: #faf7e9;

    --green: #103d34;
    --green-2: #164c41;
    --green-3: #24584c;

    --text: #173d35;
    --muted: #708078;

    --border: #234d43;
    --white: #fffef7;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    min-height: 100vh;

    font-family:
        Inter,
        Arial,
        sans-serif;

    background: var(--bg);

    color: var(--text);

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

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
}


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

.auth-page {
    width: 100%;
    min-height: 100vh;

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

    padding: 30px 20px;

    background-color: #191a1a;

    background-image:
        linear-gradient(
            0deg,
            transparent 24%,
            rgba(102, 128, 116, 0.18) 25%,
            rgba(102, 128, 116, 0.18) 26%,
            transparent 27%,
            transparent 74%,
            rgba(102, 128, 116, 0.18) 75%,
            rgba(102, 128, 116, 0.18) 76%,
            transparent 77%,
            transparent
        ),
        linear-gradient(
            90deg,
            transparent 24%,
            rgba(102, 128, 116, 0.18) 25%,
            rgba(102, 128, 116, 0.18) 26%,
            transparent 27%,
            transparent 74%,
            rgba(102, 128, 116, 0.18) 75%,
            rgba(102, 128, 116, 0.18) 76%,
            transparent 77%,
            transparent
        );

    background-size: 55px 55px;
}

/* =========================================================
   HIDE OLD LEFT BRAND
========================================================= */

.auth-brand {
    display: none !important;
}


/* =========================================================
   AUTH PANEL
========================================================= */

.auth-panel {
    width: 100%;

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

    padding: 0;
}


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

.auth-card {
    width: 100%;
    max-width: 390px;

    padding: 34px 28px 30px;

    background: var(--cream);

    border:
        3px solid
        rgba(16,61,52,.28);

    border-radius: 22px;

    box-shadow:
        0 25px 60px
        rgba(8,39,33,.28);

    position: relative;

    overflow: hidden;
}


/* =========================================================
   TOP DECORATION
========================================================= */

.auth-card::before {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    top: -135px;
    right: -100px;

    border-radius: 50%;

    background:
        rgba(23,76,65,.08);

    pointer-events: none;
}


/* =========================================================
   AUTH VIEW
========================================================= */

.auth-view {
    display: none;
}

.auth-view.active {
    display: block;

    animation:
        fadeIn .25s ease;
}

@keyframes fadeIn {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   HEADER
========================================================= */

.auth-header {
    margin-bottom: 25px;

    position: relative;

    z-index: 2;
}

.eyebrow {
    margin-bottom: 8px;

    color: var(--green);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .2px;

    text-transform: none;
}

.eyebrow::before {
    display: none;
}

.auth-header h2 {
    color: var(--green);

    font-size: 27px;

    line-height: 1.1;

    letter-spacing: -.7px;

    font-weight: 800;
}

.auth-header p:last-child {
    margin-top: 7px;

    color: #66736d;

    font-size: 11px;

    line-height: 1.45;
}


/* =========================================================
   FIELDS
========================================================= */

.field {
    margin-bottom: 13px;
}

.field label {
    display: none;
}


/* =========================================================
   INPUT
========================================================= */

.input-wrap {
    height: 45px;

    display: flex;
    align-items: center;

    border:
        1.5px solid
        rgba(23,61,53,.5);

    border-radius: 13px;

    background:
        rgba(255,254,247,.8);

    transition: .2s ease;
}

.input-wrap:focus-within {
    border-color: var(--green);

    background: #fffef7;

    box-shadow:
        0 0 0 3px
        rgba(23,76,65,.08);
}

.input-icon {
    width: 37px;
    min-width: 37px;

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

    color: var(--green);

    font-size: 13px;

    font-weight: 700;
}

.input-wrap input {
    width: 100%;
    height: 100%;

    min-width: 0;

    border: none;
    outline: none;

    background: transparent;

    color: var(--green);

    font-size: 11px;

    padding-right: 8px;
}

.input-wrap input::placeholder {
    color: #7b8781;

    opacity: 1;
}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.password-toggle {
    width: 35px;
    height: 100%;

    border: 0;

    background: transparent;

    color: #62716b;

    cursor: pointer;

    font-size: 13px;
}

.password-toggle:hover {
    color: var(--green);
}


/* =========================================================
   OPTIONS
========================================================= */

.form-options {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    margin:
        4px
        1px
        15px;
}

.remember {
    display: none;
}

.text-button {
    border: 0;

    background: transparent;

    color: var(--green);

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;

    padding: 0;
}

.text-button:hover {
    text-decoration: underline;
}


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

.primary-button {
    width: 100%;

    height: 43px;

    border:
        1.5px solid
        var(--green);

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--green-2),
            var(--green)
        );

    color: #f8f5e7;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 7px 14px
        rgba(16,61,52,.16);

    transition: .2s ease;
}

.primary-button:hover {
    transform: translateY(-1px);

    background:
        var(--green);
}

.primary-button:active {
    transform: translateY(0);
}

.primary-button:disabled {
    opacity: .6;

    cursor: not-allowed;
}


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

.divider {
    display: flex;

    align-items: center;

    gap: 12px;

    margin:
        18px
        0
        14px;
}

.divider::before,
.divider::after {
    content: "";

    flex: 1;

    height: 1px;

    background:
        rgba(23,61,53,.22);
}

.divider span {
    color: #64716b;

    font-size: 9px;

    font-weight: 700;

    text-transform: lowercase;
}


/* =========================================================
   GOOGLE
========================================================= */

.google-button {
    width: 100%;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    border:
        1.5px solid
        rgba(23,61,53,.35);

    border-radius: 12px;

    background:
        rgba(255,254,247,.65);

    color: var(--green);

    font-size: 10.5px;

    font-weight: 700;

    cursor: pointer;

    transition: .2s ease;
}

.google-button:hover {
    background: var(--white);

    border-color:
        var(--green);

    transform: translateY(-1px);
}

.google-button svg {
    width: 16px;
    height: 16px;
}

.google-letter {
    color: #4285f4;

    font-size: 17px;

    font-weight: 800;
}


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

.switch-text {
    margin-top: 18px;

    text-align: center;

    color: #68746e;

    font-size: 10px;
}

.switch-text .text-button {
    margin-left: 3px;

    font-size: 10px;
}


/* =========================================================
   BACK BUTTON
========================================================= */

.back-button {
    display: block;

    margin:
        16px
        auto
        0;

    border: 0;

    background: transparent;

    color: var(--green);

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;
}

.back-button:hover {
    text-decoration: underline;
}


/* =========================================================
   MESSAGE
========================================================= */

.auth-message {
    display: none;

    margin-top: 13px;

    padding: 10px;

    border-radius: 10px;

    font-size: 10px;

    line-height: 1.4;
}

.auth-message.show {
    display: block;
}

.auth-message.success {
    color: var(--green);

    background: #e2eadc;

    border: 1px solid #bfd0c0;
}

.auth-message.error {
    color: #803d32;

    background: #f2e0da;

    border: 1px solid #dfbbb2;
}


/* =========================================================
   TOAST
========================================================= */

.toast {
    position: fixed;

    top: 18px;
    left: 50%;

    z-index: 99999;

    width:
        min(
            350px,
            calc(100vw - 30px)
        );

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 13px;

    border-radius: 12px;

    background:
        var(--green);

    color: white;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.25);

    opacity: 0;

    transform:
        translate(-50%, -25px);

    pointer-events: none;

    transition: .3s ease;
}

.toast.show {
    opacity: 1;

    transform:
        translate(-50%, 0);

    pointer-events: auto;
}

.toast-icon {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #c7d4b9;

    color: var(--green);

    font-weight: 800;
}

.toast-content {
    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 2px;
}

.toast-content strong {
    font-size: 10px;
}

.toast-content span {
    color: #dbe5df;

    font-size: 9px;

    line-height: 1.4;
}

.toast-close {
    border: 0;

    background: transparent;

    color: #b9c9c2;

    font-size: 18px;

    cursor: pointer;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    body {
        align-items: flex-start;
    }

    .auth-page {
        min-height: 100svh;

        padding:
            28px
            18px;

        align-items: center;
    }

    .auth-card {
        max-width: 360px;

        padding:
            29px
            23px
            26px;

        border-radius: 20px;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 380px) {

    .auth-page {
        padding:
            20px
            13px;
    }

    .auth-card {
        padding:
            25px
            20px
            23px;
    }

    .auth-header {
        margin-bottom: 21px;
    }

    .auth-header h2 {
        font-size: 25px;
    }

    .input-wrap,
    .primary-button,
    .google-button {
        height: 42px;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 901px) {

    .auth-card {
        max-width: 390px;

        padding:
            36px
            30px
            30px;
    }

}