<div id="forgot_password" style="display:none;">
<style>
#forgot_password { animation: fpFade 0.3s ease; }
@keyframes fpFade {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
}

.fp-logo { text-align:center; margin-bottom:4px; }
.fp-logo img { height:60px; object-fit:contain; }

.fp-title { text-align:center; margin-bottom:18px; }
.fp-title h4 {
    font-size:18px; font-weight:900;
    color:#1a7a3a; letter-spacing:2px;
    text-transform:uppercase; margin-bottom:5px;
}
.fp-title .fp-dots {
    display:flex; align-items:center;
    justify-content:center; gap:5px;
}
.fp-title .fp-dots span {
    width:24px; height:2.5px;
    background:#1a7a3a; border-radius:3px;
}
.fp-title .fp-dots i {
    width:6px; height:6px;
    background:#d4af37; border-radius:50%;
    display:inline-block;
}

.fp-info {
    display:flex; align-items:flex-start;
    gap:10px; padding:12px 14px;
    background:#f0fff5;
    border:1px solid #c8e6c9;
    border-radius:12px;
    margin-bottom:16px;
}
.fp-info i { color:#1a7a3a; font-size:16px; margin-top:1px; }
.fp-info span { font-size:12px; color:#555; line-height:1.5; }

.fp-field { position:relative; margin-bottom:14px; }
.fp-field .fp-ico {
    position:absolute; left:16px; top:50%;
    transform:translateY(-50%);
    color:#bbb; font-size:14px; pointer-events:none;
}
.fp-field input {
    width:100%;
    padding:13px 16px 13px 44px;
    border:1.5px solid #e8e8e8;
    border-radius:12px;
    font-size:13.5px; color:#333;
    background:#fafbfc; outline:none;
    transition:all 0.25s;
    font-family:'Nunito',sans-serif;
}
.fp-field input:focus {
    border-color:#1a7a3a;
    background:#fff;
    box-shadow:0 0 0 3px rgba(26,122,58,0.10);
}
.fp-field input::placeholder { color:#ccc; font-size:13px; }

.fp-btn {
    width:100%; padding:13px;
    background:linear-gradient(90deg, #1a7a3a, #145e2d);
    color:#fff; font-size:14px; font-weight:900;
    letter-spacing:3px; border:none;
    border-radius:12px; cursor:pointer;
    transition:all 0.3s;
    display:flex; align-items:center;
    justify-content:center; gap:9px;
    font-family:'Nunito',sans-serif;
    text-transform:uppercase; margin-bottom:14px;
}
.fp-btn:hover {
    background:linear-gradient(90deg, #145e2d, #0d3d1c);
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(26,122,58,0.40);
}

.fp-back {
    text-align:center; font-size:12.5px; color:#aaa;
    display:flex; align-items:center;
    justify-content:center; gap:10px;
    margin-bottom:8px;
}
.fp-back::before, .fp-back::after {
    content:''; flex:1; height:1px; background:#eee;
}
.fp-back a {
    color:#1a7a3a; font-weight:800;
    text-decoration:none; white-space:nowrap;
}
.fp-back a:hover { text-decoration:underline; }

.fp-privacy {
    text-align:center; font-size:12px;
}
.fp-privacy a { color:#aaa; text-decoration:none; }
.fp-privacy a:hover { text-decoration:underline; color:#1a7a3a; }
</style>

<form name="fp" id="fp" method="post" action="forgot_password.php" onsubmit="return false;">

    <!-- Logo -->
    <div class="fp-logo">
        <img src="img/<?=$res_site[0]['logo'];?>" alt="logo" />
    </div>

    <!-- Title -->
    <div class="fp-title">
        <h4>Forgot Password</h4>
        <div class="fp-dots">
            <span></span><i></i><i></i><i></i><span></span>
        </div>
    </div>

    <!-- Info Box -->
    <div class="fp-info">
        <i class="fas fa-info-circle"></i>
        <span>Enter your registered email address. We will send you a password reset link.</span>
    </div>

    <!-- Email -->
    <div class="fp-field">
        <i class="fas fa-envelope fp-ico"></i>
        <input type="text" id="forgot_email" name="forgot_email"
               placeholder="Enter Email Address" required="required" />
    </div>

    <!-- Hidden -->
    <input type="hidden" name="updte1" id="updte1" value="1" />

    <!-- Reset Button -->
    <button type="submit" name="forgot_submit" id="forgot_submit" class="fp-btn">
        <i class="fas fa-paper-plane"></i> Send Reset Link
    </button>

    <!-- Back to Login -->
    <div class="fp-back">
        <a href="#" onclick="show_login('1')">
            <i class="fas fa-arrow-left"></i> Back to Login
        </a>
    </div>

    <!-- Privacy Policy -->
    <div class="fp-privacy">
        <a href="privacy.php">Privacy Policy</a>
    </div>

</form>
</div>
