/* =================================================
   FORGOT PASSWORD PAGE
   PART 1
   RESET + LAYOUT + CARD
================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
}

html,
body{

    width:100%;

    min-height:100vh;

}

/* =========================
   BODY
========================= */

body{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    overflow-x:hidden;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eef4ff 100%
        );

    position:relative;

}

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

body::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:#2563eb;

    border-radius:50%;

    top:-120px;

    left:-120px;

    opacity:.15;

    filter:blur(120px);

}

body::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:#1d4ed8;

    border-radius:50%;

    bottom:-140px;

    right:-120px;

    opacity:.12;

    filter:blur(140px);

}

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

.forgot-page{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    position:relative;

    z-index:2;

}

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

.forgot-box{

    width:430px;

    max-width:100%;

    position:relative;

    z-index:2;

    padding:36px;

    border-radius:24px;

    background:
        rgba(255,255,255,.92);

    backdrop-filter:blur(10px);

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

    box-shadow:
        0 25px 60px rgba(37,99,235,.12);

}

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

.forgot-logo{

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    font-size:28px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    box-shadow:
        0 10px 30px rgba(37,99,235,.25);

}

/* =========================
   TITLE
========================= */

.forgot-title{

    font-size:28px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:8px;

    line-height:1.2;

}

/* =========================
   DESCRIPTION
========================= */

.forgot-sub{

    font-size:14px;

    color:#64748b;

    line-height:1.75;

    margin-bottom:24px;

}

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

.forgot-alert{

    display:flex;

    align-items:flex-start;

    gap:10px;

    padding:14px 16px;

    margin-bottom:20px;

    border-radius:14px;

    background:#fff1f2;

    border:1px solid #fecdd3;

    color:#be123c;

    font-size:14px;

    font-weight:600;

    line-height:1.6;

}

/* =================================================
   FORGOT PASSWORD PAGE
   PART 2
   FORM + FOOTER + MOBILE
================================================= */

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

.forgot-form{

    width:100%;

}

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

.forgot-group{

    margin-bottom:18px;

}

/* =========================
   LABEL
========================= */

.forgot-label{

    display:block;

    margin-bottom:8px;

    font-size:13px;

    font-weight:600;

    color:#334155;

}

.forgot-optional{

    color:#94a3b8;

    font-weight:500;

}

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

.forgot-input{

    width:100%;

    height:48px;

    padding:14px 16px;

    border-radius:14px;

    border:1px solid #dbe3f0;

    background:#fff;

    outline:none;

    font-size:14px;

    color:#0f172a;

    transition:.25s;

}

.forgot-input::placeholder{

    color:#94a3b8;

}

.forgot-input:focus{

    border-color:#2563eb;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.12);

}

/* =========================
   TEXTAREA
========================= */

.forgot-textarea{

    width:100%;

    min-height:130px;

    padding:14px 16px;

    border-radius:14px;

    border:1px solid #dbe3f0;

    outline:none;

    resize:vertical;

    background:#fff;

    color:#0f172a;

    font-size:14px;

    line-height:1.7;

    font-family:inherit;

    transition:.25s;

}

.forgot-textarea::placeholder{

    color:#94a3b8;

}

.forgot-textarea:focus{

    border-color:#2563eb;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.12);

}

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

.forgot-btn{

    width:100%;

    height:50px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    color:#fff;

    font-size:15px;

    font-weight:700;

    margin-top:8px;

    transition:.25s;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    box-shadow:
        0 12px 24px rgba(37,99,235,.25);

}

.forgot-btn:hover{

    transform:translateY(-2px);

}

.forgot-btn:active{

    transform:scale(.98);

}

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

.forgot-bottom{

    margin-top:20px;

    padding-top:20px;

    border-top:1px solid #e2e8f0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

}

.forgot-bottom-text{

    font-size:13px;

    color:#64748b;

    font-weight:500;

}

.forgot-back-btn{

    text-decoration:none;

    padding:10px 14px;

    border-radius:12px;

    font-size:13px;

    font-weight:700;

    color:#2563eb;

    background:#eff6ff;

    border:1px solid #bfdbfe;

    transition:.25s;

}

.forgot-back-btn:hover{

    background:#2563eb;

    color:#fff;

}

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

.forgot-footer{

    margin-top:22px;

    text-align:center;

}

.forgot-footer-link{

    color:#64748b;

    text-decoration:none;

    font-size:12px;

    font-weight:500;

    transition:.25s;

}

.forgot-footer-link:hover{

    color:#2563eb;

}

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

@media(max-width:768px){

    html,
    body{

        width:100% !important;

        height:100% !important;

        min-height:100dvh !important;

        margin:0 !important;

        padding:0 !important;

    }

    body{

        display:block !important;

        overflow-x:hidden !important;

    }

    .forgot-page{

        width:100% !important;

        min-height:100dvh !important;

        display:grid !important;

        place-items:center !important;

        padding:16px !important;

    }

    .forgot-box{

        width:calc(100vw - 32px) !important;

        max-width:430px !important;

        margin:0 !important;

        padding:28px 24px !important;

        border-radius:22px !important;

    }

    .forgot-logo{

        width:58px;

        height:58px;

        font-size:26px;

        margin-bottom:16px;

    }

    .forgot-title{

        font-size:26px;

    }

    .forgot-sub{

        font-size:13px;

        line-height:1.7;

        margin-bottom:20px;

    }

    .forgot-alert{

        font-size:13px;

        padding:12px 14px;

    }

    .forgot-group{

        margin-bottom:16px;

    }

    .forgot-label{

        font-size:12px;

    }

    .forgot-input{

        height:46px;

        font-size:14px;

    }

    .forgot-textarea{

        min-height:110px;

        padding:13px 14px;

        font-size:14px;

    }

    .forgot-btn{

        height:48px;

        font-size:14px;

    }

    .forgot-bottom{

        margin-top:18px;

        padding-top:18px;

        flex-direction:column;

        text-align:center;

    }

    .forgot-bottom-text{

        font-size:12px;

    }

    .forgot-back-btn{

        width:100%;

        text-align:center;

        font-size:13px;

        padding:11px 14px;

    }

    .forgot-footer{

        margin-top:18px;

    }

    .forgot-footer-link{

        font-size:11px;

    }

}