/* ===== extracted from ./forgetpassword.php ===== */
.fp_page{
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(160deg,#FAF5FF 0%,#F3F4FF 50%,#EEF2FF 100%);
    padding:24px;
    font-family:inherit;
}
.fp_card{
    width:100%;max-width:440px;
    background:white;
    border-radius:28px;
    box-shadow:0 20px 60px rgba(75,6,135,.1),0 4px 16px rgba(0,0,0,.06);
    overflow:hidden;
}

/* ── Top banner ── */
.fp_banner{
    background:linear-gradient(135deg,#2B0152,#4B0687,#6A11CB);
    padding:36px 36px 32px;
    position:relative;overflow:hidden;
    text-align:center;
}
.fp_banner_orb1{
    position:absolute;width:200px;height:200px;border-radius:50%;
    background:rgba(255,255,255,.07);top:-60px;right:-50px;
    pointer-events:none;
}
.fp_banner_orb2{
    position:absolute;width:120px;height:120px;border-radius:50%;
    background:rgba(255,255,255,.05);bottom:-40px;left:30px;
    pointer-events:none;
}
.fp_icon_wrap{
    width:72px;height:72px;
    background:rgba(255,255,255,.15);
    border:2px solid rgba(255,255,255,.2);
    border-radius:22px;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 18px;
    backdrop-filter:blur(8px);
    position:relative;z-index:1;
}
.fp_icon_wrap i{font-size:34px;color:white;}
.fp_banner h2{
    font-size:22px;font-weight:800;color:white;
    margin-bottom:8px;position:relative;z-index:1;
}
.fp_banner p{
    font-size:13px;color:rgba(255,255,255,.72);
    line-height:1.6;position:relative;z-index:1;
}

/* ── Steps indicator ── */
.fp_steps{
    display:flex;align-items:center;justify-content:center;
    gap:8px;padding:20px 36px 0;
}
.fp_step{
    display:flex;align-items:center;gap:6px;
    font-size:12px;font-weight:600;color:#D1D5DB;
    transition:.3s;
}
.fp_step.active{color:#4B0687;}
.fp_step_dot{
    width:28px;height:28px;border-radius:50%;
    background:#F3F4F6;border:2px solid #E5E7EB;
    display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;color:#9CA3AF;
    transition:.3s;flex-shrink:0;
}
.fp_step.active .fp_step_dot{
    background:linear-gradient(135deg,#4B0687,#6A11CB);
    border-color:#4B0687;color:white;
}
.fp_step.done .fp_step_dot{
    background:#059669;border-color:#059669;color:white;
}
.fp_step.done{color:#059669;}
.fp_step_line{flex:1;height:2px;background:#E5E7EB;border-radius:2px;}
.fp_step_line.done{background:#059669;}

/* ── Body ── */
.fp_body{padding:28px 36px 36px;}

.fp_label_row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.fp_label{font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.4px;}
.fp_back{font-size:12px;color:#4B0687;font-weight:600;text-decoration:none;transition:.2s;}
.fp_back:hover{color:#6A11CB;}
.fp_back i{vertical-align:-2px;font-size:14px;}

.fp_hint{font-size:13px;color:#6B7280;line-height:1.6;margin-bottom:22px;}

.fp_inp_wrap{position:relative;margin-bottom:24px;}
.fp_inp_ico{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);
    font-size:18px;color:#C4C9D4;pointer-events:none;
    transition:.2s;
}
.fp_inp_wrap:focus-within .fp_inp_ico{color:#4B0687;}
.fp_inp_wrap input{
    width:100%;height:52px;
    border:2px solid #E5E7EB;border-radius:14px;
    padding:0 16px 0 46px;
    font-size:14px;color:#111827;
    background:#FAFAFA;font-family:inherit;
    outline:none;transition:.2s;
}
.fp_inp_wrap input:focus{
    border-color:#4B0687;background:white;
    box-shadow:0 0 0 4px rgba(75,6,135,.08);
}
.fp_inp_wrap input::placeholder{color:#C4C9D4;}

/* ── Button ── */
.fp_btn{
    width:100%;height:54px;
    background:linear-gradient(135deg,#4B0687,#6A11CB);
    border:none;border-radius:14px;
    color:white;font-size:15px;font-weight:700;
    cursor:pointer;font-family:inherit;
    display:flex;align-items:center;justify-content:center;gap:10px;
    transition:.3s;
    box-shadow:0 8px 24px rgba(75,6,135,.28);
    letter-spacing:.2px;
}
.fp_btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 32px rgba(75,6,135,.36);}
.fp_btn:disabled{opacity:.65;cursor:not-allowed;transform:none !important;}
.fp_btn i{font-size:20px;}

/* ── Success state ── */
.fp_success{
    text-align:center;padding:8px 0 4px;
    display:none;
}
.fp_success_icon{
    width:70px;height:70px;border-radius:50%;
    background:linear-gradient(135deg,#059669,#10B981);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 18px;
    box-shadow:0 8px 24px rgba(5,150,105,.28);
    animation:fp_pop .4s ease;
}
@keyframes fp_pop{0%{transform:scale(0.5);opacity:0;}100%{transform:scale(1);opacity:1;}}
.fp_success_icon i{font-size:34px;color:white;}
.fp_success h3{font-size:18px;font-weight:800;color:#111827;margin-bottom:8px;}
.fp_success p{font-size:14px;color:#6B7280;line-height:1.6;margin-bottom:24px;}
.fp_success_email{
    display:inline-block;
    background:#FAF5FF;border:1px solid #E9D5FF;
    border-radius:10px;padding:8px 16px;
    font-size:13px;font-weight:600;color:#4B0687;
    margin-bottom:24px;word-break:break-all;
}

/* ── Footer link ── */
.fp_footer_link{
    text-align:center;margin-top:20px;
    font-size:13px;color:#6B7280;
}
.fp_footer_link a{color:#4B0687;font-weight:600;text-decoration:none;transition:.2s;}
.fp_footer_link a:hover{color:#6A11CB;}

/* ── Shake ── */
@keyframes fp_shake{
    0%,100%{transform:translateX(0);}
    20%{transform:translateX(-7px);}
    40%{transform:translateX(7px);}
    60%{transform:translateX(-5px);}
    80%{transform:translateX(5px);}
}
.fp_shake{animation:fp_shake .5s ease;}

@media(max-width:480px){
    .fp_banner{padding:28px 24px 26px;}
    .fp_body{padding:24px 24px 28px;}
    .fp_steps{padding:18px 24px 0;}
}