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

@import url(
    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
);


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {
    --forest: #063d2b;
    --deep: #03281c;
    --green: #0ba46d;
    --mint: #eaf8f1;
    --text: #12352a;
    --muted: #71847d;
    --line: #dce8e2;
    --danger: #d94252;
    --shadow: 0 24px 70px rgba(7, 52, 37, 0.15);
}


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

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;

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

    color: var(--text);
    background: #f3faf6;
}

button,
input {
    font: inherit;
}


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

.login-page {
    position: relative;
    isolation: isolate;

    min-height: 100vh;

    display: grid;
    place-items: center;

    padding: 34px 18px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 10%,
            #d9f6e8,
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 92%,
            #d9f3e6,
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #f8fcfa,
            #eef8f3
        );
}

.login-page::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            #0a8d6009 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            #0a8d6009 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    z-index: -2;
}


/* =========================================================
   BACKGROUND SHAPES
========================================================= */

.shape {
    position: absolute;

    border-radius: 50%;

    z-index: -1;
}

.shape-a {
    width: 360px;
    height: 360px;

    border: 65px solid #18b4780a;

    top: -190px;
    right: -90px;
}

.shape-b {
    width: 280px;
    height: 280px;

    border: 45px solid #18b4780a;

    bottom: -160px;
    left: -80px;
}


/* =========================================================
   LOGIN SHELL
========================================================= */

.login-shell {
    width: min(450px, 100%);
}


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

.brand {
    width: max-content;
    max-width: 100%;

    margin: 0 auto 15px;
    padding: 7px 17px;

    background: var(--forest);

    border-radius: 16px;

    box-shadow: 0 12px 30px #063d2b1f;
}

.brand img {
    display: block;

    width: 205px;
    height: 52px;

    object-fit: contain;
}


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

.login-card {
    padding: 31px 33px;

    background: #fff;

    border: 1px solid #dcebe3;
    border-radius: 22px;

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


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

.heading {
    display: flex;
    align-items: center;

    gap: 12px;
}

.heading-icon {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    background: var(--mint);
    color: var(--green);

    border-radius: 13px;

    font-size: 18px;
}

.heading small {
    display: block;

    margin-bottom: 5px;

    color: var(--green);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.heading h1 {
    margin: 0;

    font-size: 23px;
    letter-spacing: -0.6px;
}

.intro {
    margin: 13px 0 21px;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.6;
}


/* =========================================================
   FORM FIELD
========================================================= */

.field {
    margin-bottom: 15px;
}

.field label {
    display: block;

    margin-bottom: 7px;

    font-size: 9px;
    font-weight: 700;
}

.label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.label-row a,
.help a,
.refresh {
    color: var(--green);

    font-size: 8px;
    font-weight: 700;
    text-decoration: none;
}


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

.input-wrap {
    height: 45px;

    display: flex;
    align-items: center;

    background: #fbfdfc;

    border: 1px solid var(--line);
    border-radius: 10px;

    transition: 0.2s;
}

.input-wrap:focus-within,
.captcha-row input:focus {
    background: #fff;

    border-color: #55c99c;

    box-shadow: 0 0 0 4px #1db97c12;

    outline: 0;
}

.input-icon {
    width: 41px;

    color: #8aa096;

    font-size: 11px;
    text-align: center;
}

.lock {
    font-size: 6px;
}

.input-wrap input {
    height: 100%;
    min-width: 0;
    flex: 1;

    color: var(--text);
    background: transparent;

    border: 0;
    outline: 0;

    font-size: 10px;
}

input::placeholder {
    color: #a3b2ac;
}


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

.toggle {
    width: 43px;
    height: 100%;

    color: #789087;
    background: none;

    border: 0;

    cursor: pointer;
}

.toggle svg {
    width: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}


/* =========================================================
   FORM ERROR
========================================================= */

.field.invalid .input-wrap,
.field.invalid .captcha-row input {
    background: #fffafb;

    border-color: #e47d88;
}

.error-text {
    display: none;

    margin: 5px 2px 0;

    color: var(--danger);

    font-size: 8px;
}

.field.invalid .error-text {
    display: block;
}


/* =========================================================
   CAPTCHA
========================================================= */

.refresh {
    padding: 0;

    background: none;

    border: 0;

    cursor: pointer;
}

.captcha-row {
    display: grid;
    grid-template-columns: 1.45fr 0.8fr;

    gap: 9px;
}

.captcha-question {
    height: 45px;

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

    gap: 10px;

    color: #176347;

    background:
        linear-gradient(
            135deg,
            #effaf5,
            #e3f6ec
        );

    border: 1px dashed #91cbb2;
    border-radius: 10px;

    user-select: none;
}

.captcha-question span {
    font-size: 17px;
    font-weight: 800;
}

.captcha-question b {
    color: #5d8b79;

    font-size: 13px;
}

.captcha-question i {
    color: var(--green);

    font-size: 16px;
    font-style: normal;
    font-weight: 800;
}

.captcha-row input {
    width: 100%;

    padding: 0 12px;

    border: 1px solid var(--line);
    border-radius: 10px;

    font-size: 11px;
    text-align: center;
}

.captcha-help {
    display: block;

    margin-top: 5px;

    color: #8b9e96;

    font-size: 7px;
}


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

.options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 3px 0 18px;
}

.options > small {
    color: #99a8a2;

    font-size: 7px;
}


/* =========================================================
   CUSTOM CHECKBOX
========================================================= */

.check {
    display: flex !important;
    align-items: center;

    gap: 7px;

    margin: 0 !important;

    color: #516a60;

    font-size: 8px !important;
    font-weight: 500 !important;
}

.check input {
    position: absolute;

    opacity: 0;
}

.check span {
    width: 16px;
    height: 16px;

    display: grid;
    place-items: center;

    border: 1px solid #bdd0c7;
    border-radius: 5px;
}

.check input:checked + span {
    background: var(--green);

    border-color: var(--green);
}

.check input:checked + span::after {
    content: "✓";

    color: #fff;

    font-size: 10px;
    font-weight: 800;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.submit {
    width: 100%;
    height: 47px;

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

    gap: 10px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #13ad76,
            #06734f
        );

    border: 0;
    border-radius: 10px;

    box-shadow: 0 10px 24px #0795632d;

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;

    transition: 0.2s;
}

.submit:hover {
    transform: translateY(-1px);
}

.arrow {
    font-size: 16px;
}


/* =========================================================
   LOADING SPINNER
========================================================= */

.spinner {
    display: none;

    width: 17px;
    height: 17px;

    border: 2px solid #ffffff55;
    border-top-color: #fff;
    border-radius: 50%;

    animation: spin 0.7s linear infinite;
}

.submit.loading .button-text,
.submit.loading .arrow {
    display: none;
}

.submit.loading .spinner {
    display: block;
}

@keyframes spin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   SECURITY INFORMATION
========================================================= */

.security {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 16px;
    padding: 10px 11px;

    background: #f1faf6;

    border: 1px solid #dff1e8;
    border-radius: 10px;
}

.security svg {
    width: 23px;

    fill: none;
    stroke: var(--green);
    stroke-width: 1.8;
}

.security p {
    margin: 0;

    color: #698078;

    font-size: 7px;
    line-height: 1.5;
}

.security strong {
    color: #315f4e;

    font-size: 8px;
}


/* =========================================================
   HELP INFORMATION
========================================================= */

.help {
    margin: 16px 0 0;

    color: #8b9b95;

    font-size: 8px;
    text-align: center;
}


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

.login-shell > footer {
    margin-top: 15px;

    color: #84978f;

    font-size: 8px;
    text-align: center;
}


/* =========================================================
   ALERT
========================================================= */

.alert {
    display: none;

    margin-bottom: 13px;
    padding: 9px 11px;

    border-radius: 9px;

    font-size: 8px;
    line-height: 1.5;
}

.alert.show {
    display: block;
}

.alert.error {
    color: #b62d3b;
    background: #fff0f1;

    border: 1px solid #f5d1d5;
}

.alert.success {
    color: #08784f;
    background: #ecfaf3;

    border: 1px solid #d0efdf;
}


/* =========================================================
   FORGOT PASSWORD DIALOG
========================================================= */

dialog {
    width: min(420px, calc(100% - 24px));

    background: transparent;

    border: 0;
}

dialog::backdrop {
    background: #052a1eaa;

    backdrop-filter: blur(4px);
}

.dialog-card {
    position: relative;

    padding: 28px;

    background: #fff;

    border-radius: 18px;
}

.dialog-close {
    position: absolute;

    top: 12px;
    right: 13px;

    width: 30px;
    height: 30px;

    background: #f1f5f3;

    border: 0;
    border-radius: 8px;
}

.dialog-icon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    color: var(--green);
    background: var(--mint);

    border-radius: 12px;
}

.dialog-card h2 {
    margin: 13px 0 7px;

    font-size: 18px;
}

.dialog-card p {
    color: var(--muted);

    font-size: 9px;
    line-height: 1.6;
}

.dialog-card label {
    display: block;

    margin: 16px 0 6px;

    font-size: 8px;
    font-weight: 700;
}

.dialog-card input {
    width: 100%;

    margin-bottom: 12px;
    padding: 11px;

    border: 1px solid var(--line);
    border-radius: 9px;

    outline: 0;
}


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

.toast-area {
    position: fixed;

    right: 16px;
    bottom: 16px;
}

.toast {
    padding: 11px 14px;

    color: #fff;
    background: #093b2b;

    border-left: 4px solid #48dda7;
    border-radius: 9px;

    box-shadow: var(--shadow);

    font-size: 8px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 700px) {

    .login-page {
        align-items: start;

        padding-top: 25px;
    }

    .brand img {
        width: 185px;
        height: 46px;
    }

    .login-card {
        padding: 27px;
    }

    .shape-a {
        right: -230px;
    }

    .shape-b {
        left: -190px;
    }

}


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

@media (max-width: 430px) {

    .login-page {
        padding: 17px 11px;
    }

    .brand {
        margin-bottom: 11px;
    }

    .login-card {
        padding: 22px 17px;

        border-radius: 17px;
    }

    .heading h1 {
        font-size: 20px;
    }

    .intro {
        margin-bottom: 18px;
    }

    .captcha-row {
        grid-template-columns: 1.25fr 0.75fr;
    }

    .options > small {
        display: none;
    }

    .login-shell > footer {
        line-height: 1.5;
    }

}