/* =========================================================
   GATRAD KRUPA
   PROFESSIONAL AUTHENTICATION DESIGN
   ========================================================= */


:root {

    --green:
        #536442;

    --green-dark:
        #354329;

    --cream:
        #f7f5ef;

    --cream-dark:
        #ebe7dc;

    --text:
        #20241d;

    --muted:
        #777a70;

    --border:
        #ddd9cf;

    --white:
        #ffffff;

    --error:
        #a84c43;

    --success:
        #4f7047;

}


* {

    box-sizing:
        border-box;

    margin: 0;

    padding: 0;

}


html {

    scroll-behavior:
        smooth;

}


body {

    min-height:
        100vh;

    font-family:
        "DM Sans",
        sans-serif;

    color:
        var(--text);

    background:
        var(--cream);

    overflow-x:
        hidden;

}


/* =========================================================
   LOADER
   ========================================================= */

.page-loader {

    position: fixed;

    inset: 0;

    z-index: 9999;

    background:
        var(--cream);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 20px;

    transition:
        opacity .5s ease,
        visibility .5s ease;

}


.page-loader.hidden {

    opacity: 0;

    visibility: hidden;

}


.loader-logo {

    width: 55px;

    height: 55px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background:
        var(--green);

    color:
        white;

    font-weight: 700;

    letter-spacing: 1px;

}


.loader-ring {

    width: 30px;

    height: 30px;

    border-radius: 50%;

    border:
        2px solid
        rgba(83, 100, 66, .15);

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

    animation:
        loaderRotate .8s linear infinite;

}


@keyframes loaderRotate {

    to {

        transform:
            rotate(360deg);

    }

}


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

.background-decoration {

    position: fixed;

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

    filter:
        blur(2px);

}


.decoration-one {

    width: 420px;

    height: 420px;

    background:
        rgba(83, 100, 66, .06);

    top: -180px;

    right: -100px;

}


.decoration-two {

    width: 320px;

    height: 320px;

    background:
        rgba(188, 157, 91, .08);

    bottom: -160px;

    left: -100px;

}


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

.login-header {

    position: relative;

    z-index: 10;

    height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 5vw;

    border-bottom:
        1px solid
        rgba(0,0,0,.05);

    background:
        rgba(247,245,239,.88);

    backdrop-filter:
        blur(15px);

}


.brand {

    display: flex;

    align-items: center;

    gap: 11px;

    text-decoration: none;

    color:
        var(--text);

}


.brand-mark {

    width: 39px;

    height: 39px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background:
        var(--green);

    color: white;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

}


.brand-name {

    display: flex;

    flex-direction: column;

    line-height: 1;

}


.brand-name strong {

    font-size: 15px;

    letter-spacing: 2px;

}


.brand-name span {

    font-size: 8px;

    letter-spacing: 4px;

    margin-top: 5px;

    color:
        var(--green);

}


.back-home {

    text-decoration: none;

    color:
        var(--muted);

    font-size: 11px;

    transition:
        color .2s ease;

}


.back-home:hover {

    color:
        var(--green);

}


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

.auth-page {

    position: relative;

    z-index: 1;

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

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        55px 20px;

}


.auth-container {

    width: 100%;

    max-width: 1040px;

    min-height: 620px;

    display: grid;

    grid-template-columns:
        .95fr 1.05fr;

    background:
        var(--white);

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

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 25px 70px
        rgba(32,36,29,.10);

    animation:
        authAppear .7s ease both;

}


@keyframes authAppear {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

.auth-brand-panel {

    position: relative;

    display: flex;

    align-items: center;

    padding:
        65px;

    background:
        var(--green);

    color:
        white;

    overflow: hidden;

}


.auth-brand-panel::before {

    content: "";

    position: absolute;

    width: 360px;

    height: 360px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 50%;

    right: -160px;

    top: -100px;

}


.auth-brand-panel::after {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 50%;

    left: -130px;

    bottom: -100px;

}


.brand-panel-content {

    position: relative;

    z-index: 2;

    animation:
        panelContentAppear .8s .15s ease both;

}


@keyframes panelContentAppear {

    from {

        opacity: 0;

        transform:
            translateX(-20px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


.eyebrow {

    font-size: 9px;

    letter-spacing: 3px;

    font-weight: 700;

    opacity: .72;

    margin-bottom: 20px;

}


.auth-brand-panel h1 {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(42px, 4vw, 58px);

    line-height:
        1.05;

    font-weight: 500;

    margin-bottom: 25px;

}


.brand-description {

    max-width: 390px;

    font-size: 13px;

    line-height: 1.8;

    opacity: .75;

}


.benefit-list {

    margin-top: 35px;

    display: flex;

    flex-direction: column;

    gap: 14px;

}


.benefit-item {

    display: flex;

    align-items: center;

    gap: 11px;

    font-size: 11px;

}


.benefit-icon {

    width: 22px;

    height: 22px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.25);

    font-size: 9px;

}


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

.auth-panel {

    padding:
        65px 70px;

    display: flex;

    align-items: center;

    position: relative;

}


.auth-view {

    display: none;

    width: 100%;

}


.auth-view.active {

    display: block;

    animation:
        viewAppear .35s ease both;

}


@keyframes viewAppear {

    from {

        opacity: 0;

        transform:
            translateX(12px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


.auth-heading {

    margin-bottom: 30px;

}


.auth-heading h2 {

    font-family:
        "Playfair Display",
        serif;

    font-size: 40px;

    font-weight: 600;

    line-height: 1.1;

    margin-bottom: 9px;

}


.auth-heading p {

    color:
        var(--muted);

    font-size: 12px;

    line-height: 1.6;

}


.mobile-eyebrow {

    display: none;

}


/* =========================================================
   MESSAGES
   ========================================================= */

.message-box {

    display: none;

    align-items: center;

    gap: 10px;

    padding:
        12px 13px;

    border-radius: 7px;

    margin-bottom: 18px;

    font-size: 11px;

    line-height: 1.5;

}


.message-box.show {

    display: flex;

    animation:
        messageAppear .25s ease both;

}


@keyframes messageAppear {

    from {

        opacity: 0;

        transform:
            translateY(-5px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


.error-message {

    color:
        var(--error);

    background:
        rgba(168,76,67,.08);

    border:
        1px solid
        rgba(168,76,67,.15);

}


.success-message {

    color:
        var(--success);

    background:
        rgba(79,112,71,.08);

    border:
        1px solid
        rgba(79,112,71,.15);

}


.message-icon {

    width: 20px;

    height: 20px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 50%;

    font-size: 10px;

    font-weight: 700;

}


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

.field {

    margin-bottom: 20px;

}


.field label {

    display: block;

    font-size: 10px;

    font-weight: 700;

    margin-bottom: 7px;

}


.field-label-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.input-wrapper {

    position: relative;

}


.input-icon {

    position: absolute;

    left: 14px;

    top: 50%;

    transform:
        translateY(-50%);

    color:
        #a5a69e;

    font-size: 13px;

    z-index: 1;

}


.input-wrapper input {

    width: 100%;

    height: 49px;

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

    border-radius: 7px;

    background:
        #fcfbf8;

    outline: none;

    padding:
        0 45px 0 39px;

    font-family:
        inherit;

    font-size: 12px;

    color:
        var(--text);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.input-wrapper input:focus {

    background:
        white;

    border-color:
        var(--green);

    box-shadow:
        0 0 0 3px
        rgba(83,100,66,.08);

}


.password-toggle {

    position: absolute;

    right: 12px;

    top: 50%;

    transform:
        translateY(-50%);

    border: 0;

    background: transparent;

    color:
        var(--green);

    font-size: 9px;

    font-weight: 700;

    cursor: pointer;

}


.text-button,
.switch-button {

    border: 0;

    background: transparent;

    color:
        var(--green);

    font-family:
        inherit;

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;

}


.text-button:hover,
.switch-button:hover {

    text-decoration:
        underline;

}


.field-error {

    display: block;

    color:
        var(--error);

    font-size: 9px;

    margin-top: 5px;

    min-height: 0;

}


/* =========================================================
   AUTH BUTTON
   ========================================================= */

.auth-button {

    width: 100%;

    height: 52px;

    border: 0;

    border-radius: 7px;

    background:
        var(--green);

    color:
        white;

    font-family:
        inherit;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;

    cursor: pointer;

    position: relative;

    overflow: hidden;

    transition:
        background .25s ease,
        transform .25s ease;

}


.auth-button::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.13),
            transparent
        );

    transition:
        left .6s ease;

}


.auth-button:hover::before {

    left: 100%;

}


.auth-button:hover {

    background:
        var(--green-dark);

    transform:
        translateY(-1px);

}


.auth-button:disabled {

    opacity: .7;

    cursor:
        not-allowed;

    transform:
        none;

}


.button-loader {

    display: none;

    width: 17px;

    height: 17px;

    border:
        2px solid
        rgba(255,255,255,.35);

    border-top-color:
        white;

    border-radius: 50%;

    animation:
        loaderRotate .7s linear infinite;

    margin:
        auto;

}


.auth-button.loading .button-text {

    display: none;

}


.auth-button.loading .button-loader {

    display: block;

}


/* =========================================================
   SWITCH
   ========================================================= */

.switch-auth {

    text-align: center;

    margin-top: 25px;

    font-size: 10px;

    color:
        var(--muted);

}


.switch-button {

    margin-left: 4px;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 850px) {

    .auth-container {

        grid-template-columns:
            1fr;

        max-width: 520px;

        min-height: auto;

    }


    .auth-brand-panel {

        display: none;

    }


    .auth-panel {

        padding:
            45px 35px;

    }


    .mobile-eyebrow {

        display: block;

        font-size: 9px;

        letter-spacing: 3px;

        color:
            var(--green);

        font-weight: 700;

        margin-bottom: 14px;

    }

}


@media (max-width: 550px) {

    .login-header {

        height: 70px;

        padding:
            0 18px;

    }


    .back-home {

        font-size: 9px;

    }


    .auth-page {

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

        padding:
            20px 13px 40px;

        align-items:
            flex-start;

    }


    .auth-container {

        border-radius:
            16px;

    }


    .auth-panel {

        padding:
            35px 22px;

    }


    .auth-heading h2 {

        font-size:
            34px;

    }

}