/* ============================================================
   forgot-password.css  —  Forgot Password Page (Ikot-When?)
   Companion to forgot-password.php, extends login.css
   ============================================================ */

/* ── Page layout ── */
body { display: flex; flex-direction: column; min-height: 100vh; }

/* ── Background panel ── */
.fp-main {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  overflow: hidden;
  background: #0f2b1a;
}

/* Blurred campus photo background */
.fp-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/loginbg.jpg') center/cover no-repeat;
  filter: blur(5px) brightness(.45) saturate(.6);
  transform: scale(1.06);
  z-index: 0;
}

/* Subtle green gradient overlay for depth */
.fp-main::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(46,125,82,.25) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(26,77,46,.3) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

/* Decorative floating orbs */
.fp-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.fp-orb-1 {
  width: 340px; height: 340px;
  top: -80px; left: -80px;
  background: radial-gradient(circle, rgba(46,125,82,.18) 0%, transparent 70%);
}
.fp-orb-2 {
  width: 260px; height: 260px;
  bottom: -60px; right: -40px;
  background: radial-gradient(circle, rgba(26,77,46,.22) 0%, transparent 70%);
}
.fp-orb-3 {
  width: 180px; height: 180px;
  top: 30%; right: 12%;
  background: radial-gradient(circle, rgba(111,207,151,.1) 0%, transparent 70%);
}

/* ── Step cards ── */
.fp-step {
  display: none;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 460px;
  animation: fpFadeUp .4s cubic-bezier(.22,1,.36,1) both;
}
.fp-step.active { display: block; }
@keyframes fpFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fp-card {
  background: #fff;
  border-radius: 28px;
  padding: 44px 40px;
  box-shadow: 0 32px 80px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.12);
  position: relative;
  overflow: hidden;
}
/* Top green accent line — matches login card */
.fp-card::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%; height: 3px;
  background: linear-gradient(90deg, transparent, #2e7d52, transparent);
  border-radius: 0 0 4px 4px;
}

/* Icon circle at top */
.fp-icon-wrap {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a4d2e, #2e7d52);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px rgba(46,125,82,.35);
}
.fp-icon-wrap i { color: #fff; font-size: 24px; }
.fp-icon-wrap.success-wrap {
  background: linear-gradient(135deg, #15803d, #16a34a);
}

.fp-card h2 {
  font-family: 'Syne', sans-serif;
  font-size: 26px; font-weight: 800;
  color: #1a2e1f;
  margin-bottom: 8px;
  text-align: center;
}
.fp-desc {
  font-size: 13.5px;
  color: #6b8f74;
  line-height: 1.65;
  text-align: center;
  margin-bottom: 28px;
}
.fp-desc strong { color: #2e7d52; }

/* ── Error box ── */
.fp-err {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #dc2626;
  display: none;
  text-align: left;
}
.fp-err.show { display: block; }

/* ── Form fields ── */
.fp-field { margin-bottom: 20px; }
.fp-field label {
  display: block;
  font-size: 13px; font-weight: 600;
  color: #1a4d2e;
  margin-bottom: 7px;
}
.fp-field input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #c8dece;
  border-radius: 10px;
  background: #f8fbf9;
  color: #1a2e1f;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border .25s, background .25s, box-shadow .25s;
}
.fp-field input::placeholder { color: #6b8f74; }
.fp-field input:focus {
  border-color: #2e7d52;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(46,125,82,.1);
}
.fp-field input.err { border-color: #fca5a5 !important; }

/* Password field wrapper */
.fp-pw-wrap { position: relative; }
.fp-pw-wrap input { padding-right: 44px; }
.fp-pw-toggle {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  cursor: pointer; color: #6b8f74; font-size: 15px;
  transition: color .2s;
}
.fp-pw-toggle:hover { color: #1a4d2e; }

/* ── Submit button ── */
.fp-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #2e7d52 0%, #1a4d2e 100%);
  color: #fff;
  border: 1px solid rgba(111,207,151,.25);
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Syne', sans-serif;
  font-size: 15px; font-weight: 700;
  letter-spacing: .5px;
  transition: all .25s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  position: relative; overflow: hidden;
  text-decoration: none;
}
.fp-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(111,207,151,.15), transparent);
  opacity: 0; transition: opacity .25s;
}
.fp-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(46,125,82,.45), 0 0 0 1px rgba(111,207,151,.3);
}
.fp-btn:hover:not(:disabled)::after { opacity: 1; }
.fp-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.fp-spin { display: inline-block; animation: fpSpin .7s linear infinite; }
@keyframes fpSpin { to { transform: rotate(360deg); } }

/* ── Back link ── */
.fp-back-link {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 16px;
  font-size: 13px; color: #6b8f74;
  text-decoration: none;
  transition: color .2s;
}
.fp-back-link:hover { color: #1a4d2e; }

/* ── OTP boxes (5 chars) ── */
.fp-otp-row {
  display: flex; gap: 10px;
  justify-content: center;
  margin-bottom: 14px;
}
.fp-otp-box {
  width: 52px; height: 58px;
  border: 2px solid #c8dece;
  border-radius: 12px;
  background: #f8fbf9;
  font-family: 'Syne', sans-serif;
  font-size: 22px; font-weight: 800;
  color: #1a2e1f;
  text-align: center;
  outline: none;
  transition: border .2s, box-shadow .2s;
  text-transform: uppercase;
}
.fp-otp-box:focus {
  border-color: #2e7d52;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(46,125,82,.1);
}
.fp-otp-box.err {
  border-color: #fca5a5 !important;
  background: #fef2f2 !important;
}

/* ── Timer row ── */
.fp-timer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 13px;
}
.fp-timer-label { color: #6b8f74; }
.fp-timer-val { font-family: 'DM Sans', monospace; font-weight: 700; color: #1a4d2e; }
.fp-resend-btn {
  background: none; border: none;
  color: #2e7d52; font-size: 13px; font-weight: 700;
  cursor: pointer; text-decoration: underline;
  display: none; transition: color .2s;
}
.fp-resend-btn.show { display: inline; }
.fp-resend-btn:hover { color: #1a4d2e; }

/* ── Password rules ── */
.fp-pw-rules { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.fp-rule {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: #a0c4af; transition: color .25s;
}
.fp-rule i { font-size: 11px; width: 14px; text-align: center; transition: color .25s; }
.fp-rule.met { color: #2e7d52; font-weight: 600; }
.fp-rule.met i { color: #2e7d52; }
.fp-match { font-size: 12px; margin-top: 5px; font-weight: 500; display: none; }
.fp-match.ok  { color: #2e7d52; display: block; }
.fp-match.err { color: #dc2626; display: block; }

/* ── Expiry popup overlay ── */
.fp-expiry-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.fp-expiry-overlay.show { opacity: 1; pointer-events: all; }
.fp-expiry-modal {
  background: #fff;
  border-radius: 24px;
  padding: 38px 32px;
  width: 100%; max-width: 380px;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,.4);
  animation: popIn .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes popIn { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fp-expiry-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff8e1; border: 2px solid #fde68a;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; font-size: 26px; color: #d97706;
}
.fp-expiry-modal h3 {
  font-family: 'Syne', sans-serif;
  font-size: 21px; font-weight: 800; color: #1a2e1f; margin-bottom: 10px;
}
.fp-expiry-modal p { font-size: 13.5px; color: #6b8f74; line-height: 1.6; margin-bottom: 24px; }
.fp-expiry-btns { display: flex; flex-direction: column; gap: 10px; }
.fp-expiry-resend {
  width: 100%; padding: 13px;
  background: linear-gradient(135deg, #2e7d52, #1a4d2e);
  color: #fff; border: none; border-radius: 10px;
  font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: opacity .2s;
}
.fp-expiry-resend:hover { opacity: .9; }
.fp-expiry-login {
  display: block; padding: 11px;
  border: 1.5px solid #c8dece; border-radius: 10px;
  background: #fff; font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 600; color: #6b8f74;
  text-decoration: none; transition: background .2s;
  text-align: center;
}
.fp-expiry-login:hover { background: #f4f6f4; }

/* ── Responsive ── */
@media(max-width:480px) {
  .fp-otp-box { width: 42px; height: 50px; font-size: 18px; }
  .fp-card { padding: 36px 24px; }
}