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

:root {
    --auth-bg: #f6f6f4;
    --auth-surface: #ffffff;
    --auth-surface-soft: #fafafa;

    --auth-text: #171717;
    --auth-text-soft: #5f5f5f;
    --auth-muted: #8a8a8a;

    --auth-border: #e8e8e5;
    --auth-border-dark: #d8d8d3;

    --auth-gold: #d4ad2c;
    --auth-gold-dark: #9b7605;
    --auth-gold-soft: #fff8df;

    --auth-success: #18864b;
    --auth-success-soft: #eaf8f0;

    --auth-danger: #c64141;
    --auth-danger-soft: #fff0f0;

    --auth-radius-sm: 10px;
    --auth-radius-md: 14px;
    --auth-radius-lg: 18px;
    --auth-radius-xl: 24px;

    --auth-transition: 0.2s ease;
}


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

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


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

    background: var(--auth-bg);

    color: var(--auth-text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 14px;

    overflow-x: hidden;
}


button,
input {
    font: inherit;
}


button {
    border: none;

    cursor: pointer;
}


a {
    color: inherit;

    text-decoration: none;
}


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

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

    padding: 42px 24px;

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


/* ============================================================
   CONTAINER
============================================================ */

.forgot-container {
    width: 100%;
    max-width: 470px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 24px;
}


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

.forgot-brand {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: var(--auth-text);

    font-size: 17px;
    font-weight: 700;

    transition: opacity var(--auth-transition);
}


.forgot-brand:hover {
    opacity: 0.8;
}


.forgot-brand-icon {
    width: 38px;
    height: 38px;

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

    border-radius: 10px;

    background: var(--auth-gold-soft);

    color: var(--auth-gold-dark);

    border: 1px solid rgba(212, 173, 44, 0.25);

    font-size: 15px;
}


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

.forgot-card {
    width: 100%;

    padding: 42px 38px;

    background: var(--auth-surface);

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

    border-radius: var(--auth-radius-xl);
}


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

.forgot-icon {
    width: 66px;
    height: 66px;

    margin: 0 auto 24px;

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

    border-radius: 50%;

    background: var(--auth-gold-soft);

    color: var(--auth-gold-dark);

    border: 1px solid rgba(212, 173, 44, 0.25);

    font-size: 24px;
}


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

.forgot-header {
    margin-bottom: 30px;

    text-align: center;
}


.forgot-header h1 {
    margin-bottom: 12px;

    color: var(--auth-text);

    font-size: 28px;
    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -0.6px;
}


.forgot-header p {
    max-width: 360px;

    margin: 0 auto;

    color: var(--auth-text-soft);

    font-size: 14px;

    line-height: 1.65;
}


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

.forgot-form {
    width: 100%;
}


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

.forgot-field {
    width: 100%;

    margin-bottom: 18px;
}


.forgot-field label {
    display: block;

    margin-bottom: 8px;

    color: var(--auth-text);

    font-size: 13px;
    font-weight: 600;
}


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

.forgot-input-wrapper {
    position: relative;

    width: 100%;
}


.forgot-input-wrapper > i {
    position: absolute;

    top: 50%;
    left: 15px;

    transform: translateY(-50%);

    color: var(--auth-muted);

    font-size: 14px;

    pointer-events: none;

    transition: color var(--auth-transition);
}


.forgot-input-wrapper input {
    width: 100%;
    height: 48px;

    padding: 0 15px 0 43px;

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

    border-radius: var(--auth-radius-sm);

    outline: none;

    background: var(--auth-surface);

    color: var(--auth-text);

    font-size: 14px;

    transition:
        border-color var(--auth-transition),
        background var(--auth-transition);
}


.forgot-input-wrapper input::placeholder {
    color: #a3a3a3;
}


.forgot-input-wrapper input:hover {
    border-color: #c9c9c4;
}


.forgot-input-wrapper input:focus {
    border-color: var(--auth-gold);

    background: #fffef9;
}


.forgot-input-wrapper:focus-within > i {
    color: var(--auth-gold-dark);
}


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

.forgot-message {
    display: none;

    width: 100%;

    margin-bottom: 16px;

    padding: 12px 14px;

    border-radius: var(--auth-radius-sm);

    font-size: 13px;

    line-height: 1.5;
}


.forgot-message.success {
    display: block;

    background: var(--auth-success-soft);

    color: var(--auth-success);

    border: 1px solid rgba(24, 134, 75, 0.18);
}


.forgot-message.error {
    display: block;

    background: var(--auth-danger-soft);

    color: var(--auth-danger);

    border: 1px solid rgba(198, 65, 65, 0.18);
}


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

.forgot-submit {
    width: 100%;
    min-height: 48px;

    padding: 12px 18px;

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

    gap: 9px;

    border-radius: var(--auth-radius-sm);

    background: var(--auth-text);

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    transition:
        background var(--auth-transition),
        transform var(--auth-transition),
        opacity var(--auth-transition);
}


.forgot-submit:hover {
    background: #2a2a2a;
}


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


.forgot-submit:disabled {
    cursor: not-allowed;

    opacity: 0.65;
}


.forgot-submit-loader {
    display: none;
}


.forgot-submit.loading
.forgot-submit-text {
    display: none;
}


.forgot-submit.loading
.forgot-submit-loader {
    display: inline-flex;
}


/* ============================================================
   BACK TO LOGIN
============================================================ */

.forgot-back {
    margin-top: 24px;

    padding-top: 22px;

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

    text-align: center;
}


.forgot-back a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    color: var(--auth-text-soft);

    font-size: 13px;
    font-weight: 500;

    transition:
        color var(--auth-transition),
        gap var(--auth-transition);
}


.forgot-back a:hover {
    color: var(--auth-text);

    gap: 10px;
}


.forgot-back i {
    font-size: 12px;
}


/* ============================================================
   SECURITY NOTE
============================================================ */

.forgot-security {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    color: var(--auth-muted);

    font-size: 12px;

    text-align: center;
}


.forgot-security i {
    color: var(--auth-gold-dark);

    font-size: 12px;
}


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

@media (max-width: 768px) {

    .forgot-page {
        padding: 32px 20px;
    }


    .forgot-card {
        padding: 38px 32px;
    }


    .forgot-header h1 {
        font-size: 26px;
    }

}


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

@media (max-width: 480px) {

    .forgot-page {
        padding: 24px 14px;
    }


    .forgot-container {
        gap: 20px;
    }


    .forgot-brand {
        font-size: 16px;
    }


    .forgot-brand-icon {
        width: 36px;
        height: 36px;

        font-size: 14px;
    }


    .forgot-card {
        padding: 32px 20px;

        border-radius: var(--auth-radius-lg);
    }


    .forgot-icon {
        width: 60px;
        height: 60px;

        margin-bottom: 20px;

        font-size: 21px;
    }


    .forgot-header {
        margin-bottom: 26px;
    }


    .forgot-header h1 {
        margin-bottom: 10px;

        font-size: 24px;
    }


    .forgot-header p {
        font-size: 13.5px;

        line-height: 1.6;
    }


    .forgot-input-wrapper input {
        height: 47px;

        font-size: 13.5px;
    }


    .forgot-submit {
        min-height: 47px;
    }


    .forgot-back {
        margin-top: 22px;

        padding-top: 20px;
    }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 360px) {

    .forgot-page {
        padding: 18px 10px;
    }


    .forgot-card {
        padding: 28px 16px;

        border-radius: var(--auth-radius-md);
    }


    .forgot-header h1 {
        font-size: 22px;
    }


    .forgot-header p {
        font-size: 13px;
    }


    .forgot-input-wrapper input {
        padding-left: 40px;
    }


    .forgot-input-wrapper > i {
        left: 14px;
    }

}