/* ---- from legacy forgot-password.php, lines 78-172 ---- */
.page-title { display: none !important; }

.fp-section {
    min-height: calc(100vh - 78px);
    background: linear-gradient(135deg, #135402 0%, #135402 50%, #197003 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 40px 16px; position: relative; overflow: hidden;
}
.fp-section .bg-c1 {
    position:absolute; top:-100px; right:-100px; width:380px; height:380px;
    border-radius:50%; background:rgba(255,255,255,0.05); pointer-events:none;
}
.fp-section .bg-c2 {
    position:absolute; bottom:-70px; left:-70px; width:260px; height:260px;
    border-radius:50%; background:rgba(255,255,255,0.04); pointer-events:none;
}
.fp-card {
    background: #fff; border-radius: 24px; width: 100%; max-width: 440px;
    padding: 44px 40px 36px; box-shadow: 0 28px 70px rgba(0,0,0,0.45);
    animation: fpFadeUp 0.5s ease both; position: relative; z-index: 1;
}
@keyframes fpFadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.fp-logo { text-align: center; margin-bottom: 22px; }
.fp-logo img { width: 72px; }
.fp-card h3 { font-size: 22px; font-weight: 800; color: #1a2c4e; margin-bottom: 4px; text-align: center; }
.fp-subtitle { font-size: 13.5px; color: #888; text-align: center; margin-bottom: 26px; line-height: 1.6; }
.fp-alert-err {
    background:#fff1f3; border:1.5px solid #ffbcc6; color:#c0003c;
    border-radius:10px; padding:10px 14px; font-size:13px; font-weight:600;
    margin-bottom:18px; display:flex; align-items:center; gap:8px;
}
.fp-alert-suc {
    background:#E6F4E6; border:1.5px solid #197003; color:#197003;
    border-radius:10px; padding:12px 14px; font-size:13px; font-weight:600;
    margin-bottom:18px; display:flex; align-items:center; gap:8px;
}
.fp-alert-warn {
    background:#fffbeb; border:1.5px solid #fde68a; color:#92400e;
    border-radius:10px; padding:10px 14px; font-size:13px; font-weight:600;
    margin-bottom:18px; display:flex; align-items:center; gap:8px;
}
/* Input field */
.fp-field { position: relative; margin-bottom: 20px; }
.fp-field input {
    width: 100% !important; height: 62px !important;
    border: 1.5px solid #d1d5db !important; border-radius: 12px !important;
    padding: 30px 50px 10px 52px !important;
    font-size: 14px !important; font-weight: 500 !important; color: #1a2c4e !important;
    background: #f9fafb !important; box-shadow: none !important; outline: none !important;
    box-sizing: border-box !important; line-height: 1 !important;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
    appearance: none !important;
}
.fp-field input:focus {
    border-color: #C89A3C !important; background: #fff !important;
    box-shadow: 0 0 0 3px rgba(224, 149, 95,0.15) !important;
}
.fp-field label {
    position: absolute; left: 52px; top: 50%; transform: translateY(-50%);
    font-size: 14px; color: #9ca3af; pointer-events: none;
    transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease, transform 0.18s ease;
    white-space: nowrap; line-height: 1;
}
.fp-field input:focus ~ label,
.fp-field input:not(:placeholder-shown) ~ label {
    top: 9px !important; transform: none !important;
    font-size: 10px !important; font-weight: 700 !important;
    color: #C89A3C !important; letter-spacing: 0.4px !important;
}
.fp-field .fp-icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: #d1d5db; font-size: 15px; pointer-events: none; transition: color 0.2s;
}
.fp-field input:focus ~ label ~ .fp-icon { color: #C89A3C; }
/* Submit button */
.fp-submit {
    width: 100%; height: 50px;
    background: linear-gradient(135deg, #197003 0%, #135402 100%);
    color: #fff; border: none; border-radius: 12px;
    font-size: 15px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.3s ease; letter-spacing: 0.4px; position: relative; overflow: hidden;
}
.fp-submit:hover {
    background: linear-gradient(135deg, #135402 0%, #135402 100%);
    transform: translateY(-2px); box-shadow:none;
}
.fp-back { text-align: center; margin-top: 18px; font-size: 13px; color: #888; }
.fp-back a { color: #197003; font-weight: 700; text-decoration: none; }
.fp-back a:hover { text-decoration: underline; }
@media (max-width: 480px) {
    .fp-card { padding: 32px 20px 28px; }
}