/* ════════════════════════════════════════
   forgot-password.css  –  Forgot Password
   ════════════════════════════════════════ */
@import url("auth.css");

/* ── Slightly wider card ── */
.auth-card {
  max-width: 460px;
  animation: slideUp .35s ease both;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Icon colour ── */
.form-icon { background: #eff6ff; }

/* ── Subtitle spacing ── */
.form-subtitle {
  margin-bottom: 32px;
  font-size: 1.45rem;
}

/* ── Submit button ── */
#resetBtn {
  font-size: 1.7rem;
  letter-spacing: .02em;
  margin-top: 4px;
}

#resetBtn.sent {
  background: #16a34a !important;
  cursor: default;
}

/* ── Back link container ── */
.back-link-wrapper {
  text-align: center;
  margin-top: 24px;
}

/* ── Back link arrow animation ── */
.back-link svg {
  transition: transform .2s;
}
.back-link:hover svg {
  transform: translateX(4px);
}

/* ── Success state card ── */
.success-msg {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  margin-top: 16px;
  font-size: 1.4rem;
  color: #15803d;
  text-align: center;
}
.success-msg svg { width: 28px; height: 28px; fill: #16a34a; }