/* AUTH RESET */
* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #ffffff;
}

/* AUTH BODY */
body {
    font-family: var(--font-family);
    margin: 0;
    min-height: 100vh;
    padding: 50px 20px 0 !important;
    background: transparent;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    right: -320px;
    top: 50%;
    z-index: 0;
    width: 1300px;
    max-width: 90vw;
    height: 100vh;
    background: url("../images/fern.svg") center / contain no-repeat;
    opacity: 0.09;
    pointer-events: none;
    transform: translateY(-50%);
}

body::after {
    content: "";
    position: fixed;
    left: -4%;
    right: -4%;
    bottom: -165px;
    z-index: 0;
    height: 390px;
    background-image:
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg");
    background-repeat: no-repeat;
    background-position:
        -3% 98%,
        4% 111%,
        11% 101%,
        18% 114%,
        25% 96%,
        32% 110%,
        39% 100%,
        46% 116%,
        53% 98%,
        60% 112%,
        67% 102%,
        74% 115%,
        81% 99%,
        88% 113%,
        95% 101%,
        101% 116%,
        108% 104%,
        114% 112%;
    background-size:
        150px auto,
        215px auto,
        170px auto,
        240px auto,
        155px auto,
        225px auto,
        180px auto,
        250px auto,
        160px auto,
        230px auto,
        175px auto,
        245px auto,
        165px auto,
        220px auto,
        185px auto,
        255px auto,
        170px auto,
        235px auto;
    opacity: 0.14;
    pointer-events: none;
}

html::after {
    content: "";
    position: fixed;
    left: -4%;
    right: -4%;
    bottom: -178px;
    z-index: 0;
    height: 390px;
    background-image:
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg"),
        url("../images/fern.svg");
    background-repeat: no-repeat;
    background-position:
        -6% 112%,
        1% 102%,
        8% 117%,
        15% 106%,
        22% 119%,
        29% 103%,
        36% 116%,
        43% 105%,
        50% 120%,
        57% 104%,
        64% 118%,
        71% 107%,
        78% 119%,
        85% 105%,
        92% 117%,
        100% 108%;
    background-size:
        190px auto,
        140px auto,
        225px auto,
        155px auto,
        235px auto,
        145px auto,
        215px auto,
        160px auto,
        240px auto,
        150px auto,
        230px auto,
        165px auto,
        245px auto,
        150px auto,
        220px auto,
        170px auto;
    opacity: 0.1;
    pointer-events: none;
    transform: scaleX(-1);
    transform-origin: center bottom;
}

/* AUTH CONTAINER */
.auth-container {
    position: relative;
    z-index: 1;
    max-width: 400px;
    margin: 0 auto;
    background: var(--card);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

/* AUTH LOGO */
.auth-logo-wrap {
    text-align: center;
    margin-bottom: 20px;
}

.auth-logo {
    max-width: 180px;
}

/* AUTH HEADINGS */
.auth-heading {
    text-align: center;
    margin-bottom: 20px;
    font-weight: 400;
    font-size: 18px;
}

/* AUTH LABELS */
.auth-label {
    display: block;
    font-size: 14px;
    margin: 8px 0 6px;
}

/* AUTH INPUTS */
.auth-input {
    width: 100%;
    padding: 12px;
    margin: 8px 0 16px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 16px;
}

.auth-input:focus {
    border: 1px solid var(--primary);
    outline: none;
}

/* AUTH BUTTON */
.auth-button {
    width: 100%;
    background: var(--primary);
    color: #ffffff;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

.auth-button:hover {
    background: #677456;
}

/* AUTH ERROR */
.auth-error {
    color: var(--error);
    margin-top: 20px;
    min-height: 24px;
    font-weight: 500;
    text-align: center;
    display: block;
}

/* AUTH FOOTER */
.auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}

.auth-link {
    color: #194a8d;
    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-title {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 8px;
}

.auth-subtitle {
    text-align: center;
    font-size: 16px;
    margin-bottom: 4px;
}

.auth-email {
    text-align: center;
    font-size: 16px;
    font-weight: 700 !important;
}

@media (max-width: 900px) {
    body::before {
        right: -420px;
        width: 950px;
        opacity: 0.06;
    }

    body::after {
        left: -18%;
        right: -18%;
        bottom: -128px;
        height: 280px;
        background-position:
            -10% 104%,
            2% 116%,
            14% 101%,
            26% 118%,
            38% 103%,
            50% 119%,
            62% 102%,
            74% 116%,
            86% 104%,
            98% 119%,
            110% 103%,
            122% 117%,
            134% 105%,
            146% 118%,
            158% 104%,
            170% 119%,
            182% 106%,
            194% 116%;
        background-size:
            120px auto,
            165px auto,
            130px auto,
            180px auto,
            125px auto,
            170px auto,
            135px auto,
            185px auto,
            125px auto,
            175px auto,
            135px auto,
            180px auto,
            130px auto,
            170px auto,
            140px auto,
            185px auto,
            130px auto,
            175px auto;
        opacity: 0.12;
    }

    html::after {
        left: -18%;
        right: -18%;
        bottom: -138px;
        height: 280px;
        opacity: 0.09;
        background-size:
            150px auto,
            110px auto,
            170px auto,
            120px auto,
            175px auto,
            115px auto,
            165px auto,
            125px auto,
            180px auto,
            115px auto,
            170px auto,
            125px auto,
            180px auto,
            115px auto,
            165px auto,
            130px auto;
    }
}