/* =========================================
   AUTH PAGES — forgot.php & reset.php
   Simple centered card layout
   ========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background-color: #f6f3f0;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.auth-card {
    background: white;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    width: 100%;
    max-width: 400px;
    text-align: center;
}
.auth-card h2 { color: #0f172a; margin: 0 0 10px; font-size: 1.8rem; font-weight: 700; }
.auth-card p  { color: #64748b; margin: 0 0 30px; font-size: 0.95rem; }

.form-group { text-align: left; margin-bottom: 20px; }
.form-group label {
    display: block; margin-bottom: 8px;
    font-size: 0.85rem; font-weight: 600;
    color: #475569; text-transform: uppercase;
}
.form-group input {
    width: 100%; padding: 14px 16px;
    border: 1px solid #cbd5e1; border-radius: 10px;
    font-size: 1rem; background: #f8fafc;
    transition: all 0.3s; font-family: 'Poppins', sans-serif;
}
.form-group input:focus {
    border-color: #178973; outline: none;
    background: white; box-shadow: 0 0 0 4px rgba(23,137,115,0.15);
}

/* forgot.php uses blue accent, reset.php uses green — both share this file */
.btn-submit-blue { background: #3b82f6; }
.btn-submit-blue:hover { background: #2563eb; box-shadow: 0 5px 15px rgba(59,130,246,0.3); }
.btn-submit-green { background: #10b981; }
.btn-submit-green:hover { background: #059669; box-shadow: 0 5px 15px rgba(16,185,129,0.3); }

.btn-submit {
    color: white; width: 100%; padding: 15px;
    border: none; border-radius: 10px;
    font-size: 1.05rem; font-weight: 600; cursor: pointer;
    transition: all 0.3s; margin-top: 10px;
    font-family: 'Poppins', sans-serif;
}
.btn-submit:hover { transform: translateY(-2px); }

.links { margin-top: 20px; text-align: center; font-size: 0.95rem; }
.links a { color: #64748b; text-decoration: none; font-weight: 500; }
.links a:hover { color: #0f172a; }

.alert-success {
    background: #ecfdf5; color: #10b981; padding: 15px; border-radius: 10px;
    margin-bottom: 20px; font-size: 0.9rem; border: 1px solid #a7f3d0;
}
.alert-error {
    background: #fef2f2; color: #ef4444; padding: 15px; border-radius: 10px;
    margin-bottom: 20px; font-size: 0.9rem; border: 1px solid #fca5a5;
}

/* =========================================
   PASSWORD STRENGTH CHECKLIST (reset.php)
   ========================================= */
.pw-checklist {
    text-align: left; padding: 12px 14px;
    background: #ffffff; border: 1px solid #e2e8f0;
    border-radius: 10px; margin: 0 0 18px;
}
.pw-criteria {
    display: flex; align-items: center; gap: 9px;
    font-size: 0.78rem; font-weight: 500; color: #475569;
    margin: 5px 0; transition: color 0.2s ease;
}
.pw-criteria .pw-icon {
    flex-shrink: 0; width: 17px; height: 17px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;   /* thin hollow radio */
    background: transparent;
    color: transparent;              /* hide mark until pass */
    font-size: 0.58rem; font-weight: 600; line-height: 1;
    transition: all 0.25s ease;
}
.pw-criteria.valid { color: #0f766e; }
.pw-criteria.valid .pw-icon {
    border-color: #178973;
    background: #178973;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(23, 137, 115, 0.3);
}
#submit-btn:disabled {
    background: #a7a7a7; cursor: not-allowed; transform: none;
    box-shadow: none;
}

/* =========================================
   RESET PAGE — Onboarding style (reset.php)
   ========================================= */
body.reset-body {
    background: linear-gradient(160deg, #178973 0%, #0f766e 100%);
}
.reset-card {
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 22px 60px rgba(2, 44, 34, 0.35);
    max-width: 400px;
    padding: 0 38px 34px;
    position: relative;
    overflow: hidden;
}
.reset-header {
    height: 0;
}
.reset-header .h-btn {
    position: absolute;
    top: 14px;
    right: 14px;
}
.h-btn {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #e8f5f0; color: #178973;
    text-decoration: none; transition: all 0.25s;
}
.h-btn:hover { background: #178973; color: #ffffff; }
.reset-step {
    font-size: 0.78rem; font-weight: 600; letter-spacing: 1.5px;
    color: #0f766e; text-transform: uppercase; background: #d1fae5;
    padding: 6px 14px; border-radius: 999px;
}
.reset-logo { text-align: center; margin: 8px 0 6px; }
.reset-logo img { max-height: 70px; width: auto; }
.reset-card h2 {
    color: #0f172a; font-size: 1.5rem; font-weight: 700; margin: 0 0 6px;
}
.reset-card .sub {
    color: #5b6b7a; font-size: 0.88rem; margin: 0 0 18px;
}
.reset-card .form-group { margin-bottom: 14px; }
.reset-card .form-group:last-of-type { margin-bottom: 4px; }
.reset-card .form-group input {
    border-radius: 12px; border: 1.5px solid #cdddd6;
    background: #f8fcfb; font-size: 0.95rem; padding: 13px 15px;
}
.reset-card .form-group input:focus {
    border-color: #178973; background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 137, 115, 0.15);
}
.reset-card .pw-checklist {
    background: #ffffff; border: 1px solid #e2e8f0;
    border-radius: 10px; padding: 12px 14px; margin: 0 0 14px;
}
.reset-card .links a { color: #178973; }
.btn-next {
    border-radius: 999px; padding: 15px;
    background: linear-gradient(135deg, #178973, #0f766e);
    font-size: 1.05rem; letter-spacing: 0.3px;
    box-shadow: 0 8px 20px rgba(23, 137, 115, 0.35);
}
.btn-next:hover {
    background: linear-gradient(135deg, #0f766e, #115e59);
    box-shadow: 0 10px 26px rgba(23, 137, 115, 0.45);
}
.btn-next:disabled {
    background: #d4d8d6; box-shadow: none; cursor: not-allowed;
    color: #ffffff;
}