/* =========================================================
   CarScrapy - Password Reset Request
   Matching Login Page Design System
========================================================= */


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

:root {
    --primary: #128254;
    --primary-dark: #0d7048;
    --primary-soft: #edf8f3;

    --dark: #17242d;
    --text: #344149;
    --muted: #6b7280;

    --border: #d9e0e3;
    --input-bg: #fbfcfc;

    --danger: #b42318;
    --danger-bg: #fff5f4;
    --danger-border: #efc9c5;

    --success: #128254;
    --success-bg: #edf8f3;
}


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

* {
    box-sizing: border-box;
}

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

    margin: 0;
}

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;
}


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

.auth-page {

    background:
        linear-gradient(
            rgba(10, 28, 38, 0.52),
            rgba(10, 28, 38, 0.68)
        ),
        url("1786565180080.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* =========================================================
   BOTTOM GRADIENT
========================================================= */

.auth-page::after {
    content: "";

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    height: 120px;

    background:
        linear-gradient(
            to top,
            rgba(15, 27, 45, 0.78),
            rgba(15, 27, 45, 0)
        );

    pointer-events: none;

    z-index: 1;
}


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

.auth-container {
    position: relative;

    z-index: 2;

    width: 100%;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;
}


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

.reset-section {
    width: 100%;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding:
        40px 20px;
}


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

.reset-card {
    width: 100%;

    max-width: 430px;

    padding:
        38px 40px 30px;

    background:
        rgba(255, 255, 255, 0.985);

    border:
        1px solid rgba(255, 255, 255, 0.95);

    border-radius: 20px;

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.30),
        0 10px 25px rgba(0, 0, 0, 0.12);
}


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

.brand {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin-bottom: 24px;
}


/* Gear */

.brand-icon {
    width: 56px;
    height: 56px;

    padding: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    color:
        var(--primary);

    background:
        var(--primary-soft);

    border:
        1px solid #d4eee2;

    border-radius: 50%;
}


.brand-icon svg {
    width: 100%;
    height: 100%;
}


/* CarScrapy */

.brand-name {
    color:
        var(--dark);

    font-size: 30px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -1.2px;
}


.brand-name span {
    color:
        var(--primary);
}


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

.heading {
    text-align: center;

    margin-bottom: 25px;
}


.heading h1 {
    margin: 0 0 9px;

    color:
        var(--dark);

    font-size: 25px;

    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -0.55px;
}


.heading p {
    max-width: 330px;

    margin: 0 auto;

    color:
        var(--muted);

    font-size: 13px;

    font-weight: 400;

    line-height: 1.55;
}


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

.form-group {
    margin-bottom: 20px;
}


.form-group label {
    display: block;

    margin-bottom: 9px;

    color:
        #35434b;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.2;
}


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

.form-group input {
    width: 100%;

    height: 54px;

    display: block;

    padding:
        12px 16px;

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

    border-radius: 9px;

    outline: none;

    background:
        var(--input-bg);

    color:
        var(--dark);

    font-family: inherit;

    font-size: 14px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.form-group input::placeholder {
    color:
        #9aa3a8;
}


.form-group input:hover {
    border-color:
        #c3cdd1;
}


.form-group input:focus {
    background:
        #ffffff;

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px rgba(18, 130, 84, 0.22);
}


/* =========================================================
   SEND OTP
========================================================= */

.reset-btn {
    width: 100%;

    height: 52px;

    margin-top: 5px;

    padding:
        0 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    border: none;

    border-radius: 9px;

    background:
        var(--primary);

    color:
        #ffffff;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.35px;

    cursor: pointer;

    box-shadow:
        0 6px 16px rgba(18, 130, 84, 0.20);

    transition:
        background 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}


.reset-btn:hover {
    background:
        var(--primary-dark);

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 20px rgba(18, 130, 84, 0.26);
}


.reset-btn:active {
    transform:
        translateY(0);
}


.reset-btn:disabled {
    background:
        #aeb7b3;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;
}


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

.spinner {
    width: 16px;
    height: 16px;

    flex-shrink: 0;

    border:
        2px solid rgba(255, 255, 255, 0.35);

    border-top-color:
        #ffffff;

    border-radius: 50%;

    animation:
        spin 0.7s linear infinite;
}


@keyframes spin {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}

.d-none {
    display: none !important;
}


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

.message {
    min-height: 0;

    margin-top: 16px;

    text-align: center;

    font-size: 12px;

    font-weight: 500;
}


.success {
    display: inline-block;

    padding:
        9px 12px;

    color:
        var(--success);

    background:
        var(--success-bg);

    border:
        1px solid #ccebdd;

    border-radius: 7px;
}


.error {
    display: inline-block;

    padding:
        9px 12px;

    color:
        var(--danger);

    background:
        var(--danger-bg);

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

    border-radius: 7px;
}


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

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

    padding-top: 19px;

    border-top:
        1px solid #e7ebed;

    text-align: center;

    color:
        var(--muted);

    font-size: 13px;

    line-height: 1.5;
}


.login-link {
    margin-left: 3px;

    color:
        var(--primary);

    font-weight: 700;

    text-decoration: none;

    transition:
        color 0.18s ease;
}


.login-link:hover {
    color:
        var(--primary-dark);

    text-decoration:
        underline;

    text-underline-offset:
        3px;
}


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

.reset-section footer {
    margin-top: 28px;

    text-align: center;

    color:
        rgba(255, 255, 255, 0.88);

    font-size: 10px;

    line-height: 1.65;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.8);
}


.reset-section footer a {
    color:
        inherit;

    text-decoration:
        none;
}


.reset-section footer a:hover {
    text-decoration:
        underline;
}


.reset-section footer span {
    margin:
        0 5px;

    opacity:
        0.75;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.reset-btn:focus-visible,
.login-link:focus-visible {
    outline:
        3px solid rgba(18, 130, 84, 0.25);

    outline-offset:
        3px;
}


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

@media (max-width: 576px) {

    .auth-page {
        overflow-y: auto;

        background-position:
            center center;
    }


    .reset-section {
        padding:
            20px 14px;
    }


    .reset-card {
        max-width: 440px;

        padding:
            32px 27px 26px;

        border-radius:
            18px;
    }


    .brand {
        margin-bottom:
            25px;
    }


    .brand-icon {
        width: 58px;
        height: 58px;

        padding: 7px;
    }


    .brand-name {
        font-size:
            30px;
    }


    .heading {
        margin-bottom:
            26px;
    }


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


    .heading p {
        font-size:
            12px;
    }


    .form-group {
        margin-bottom:
            18px;
    }


    .form-group input {
        height:
            50px;
    }


    .reset-btn {
        height:
            50px;
    }


    .login-back {
        margin-top:
            21px;

        padding-top:
            17px;
    }


    .reset-section footer {
        margin-top:
            21px;

        font-size:
            9px;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .reset-section {
        padding:
            12px 10px;
    }


    .reset-card {
        max-width:
            350px;

        padding:
            27px 20px 21px;

        border-radius:
            16px;
    }


    .brand-icon {
        width:
            46px;

        height:
            46px;
    }


    .brand-name {
        font-size:
            24px;
    }


    .heading {
        margin-bottom:
            22px;
    }


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


    .heading p {
        font-size:
            11px;
    }


    .form-group input {
        height:
            46px;

        padding:
            11px 16px;
    }


    .reset-btn {
        height:
            46px;
    }


    .login-back {
        margin-top:
            18px;

        padding-top:
            14px;
    }
}