/* =======================================================
   EaseFy — Forgot Password (2100 Digital-Glass)
   Drop this after Bootstrap and before page-specific tweaks
   ======================================================= */

/* ---- Brand tokens ---- */
:root{
  --ef-brown:#663d29;         /* brand base */
  --ef-coral:#da926e;         /* neon accent */
  --ef-amber:#ffd29a;         /* warm glow */
  --ink-1:#3a2a22;            /* headings */
  --ink-2:#6f5549;            /* body */
  --bg:#f8f4f0;               /* canvas */
  --glass-1:rgba(255,255,255,.78);
  --glass-2:rgba(255,255,255,.62);
  --glass-br:rgba(140,120,100,.28);
  --glass-shadow:0 28px 70px rgba(102,61,41,.14), 0 10px 24px rgba(102,61,41,.10);
  --radius:20px;
}

/* ---- Canvas: aurora + soft grid ---- */
body{
  background:
    radial-gradient(1100px 680px at 86% -8%, rgba(218,146,110,.10), transparent 60%),
    radial-gradient(900px 560px at -10% 26%, rgba(181,157,85,.08), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 59px, #00000008 60px 60.5px),
    repeating-linear-gradient(0deg,  transparent 0 59px, #00000008 60px 60.5px),
    var(--bg) !important;
  color:var(--ink-2);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- Glass card ---- */
main.container{
  max-width: clamp(420px, 72vw, 700px);
  margin: clamp(24px, 6vh, 48px) auto;
  padding: clamp(18px, 4.2vw, 34px);
  border-radius: var(--radius);
  border: 1px solid var(--glass-br);
  background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

/* subtle sheen sweep */
@keyframes efSheen { to { transform: translateX(120%);} }
main.container::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(120deg, #fff0 36%, #fff3 50%, #fff0 64%);
  filter: blur(8px); opacity:.45; animation: efSheen 9s linear infinite;
}

/* ---- Title ---- */
h1{
  margin-top: .25rem;
  margin-bottom: 1.25rem;
  font-weight: 900;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  color: transparent;
  background: linear-gradient(180deg,#3d281d 0%, #7b4b37 100%);
  -webkit-background-clip: text; background-clip: text;
  text-align: center;
}
h1 .emoji{ filter: drop-shadow(0 4px 10px rgba(218,146,110,.35)); }

/* ---- Labels & helper text ---- */
label.form-label{
  font-weight: 700;
  color: var(--ink-1);
  letter-spacing:.2px;
}

/* ---- Inputs (glassy) ---- */
input.form-control{
  border-radius: 14px;
  border: 1px solid var(--glass-br);
  background: rgba(255,255,255,.85);
  padding: .75rem 1rem;
  font-size: 1rem;
  color: var(--ink-1);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input.form-control::placeholder{ color:#9f8a7f; }
input.form-control:focus{
  outline: none;
  background: #ffffff;
  border-color: rgba(218,146,110,.55);
  box-shadow:
    0 0 0 3px rgba(218,146,110,.20),
    0 8px 16px rgba(102,61,41,.10);
}

/* ---- CTA button (neon warm) ---- */
button[type="submit"].btn,
button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.45);
  background: linear-gradient(180deg, #7a4a35, #633924);
  color:#fff; font-weight: 900; letter-spacing:.2px;
  padding: .8rem 1rem;
  box-shadow: 0 14px 28px rgba(102,61,41,.22), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(102,61,41,.28), 0 0 0 1px rgba(218,146,110,.35);
}
button[type="submit"]:disabled{
  filter: grayscale(.1) brightness(.95);
  opacity:.75;
}

/* ---- Links (back to login etc.) ---- */
a{
  color:#b97c5d; font-weight:700; text-decoration:none;
}
a:hover{ text-decoration: underline; }

/* ---- Messages (brand-native, no harsh green/red) ---- */
#message{ margin-top: 14px; font-size: .98rem; font-weight:700; }
.text-success, .alert-success{
  color: #8c6a3a !important;   /* warm gold tone */
}
.text-danger, .alert-danger{
  color: #a14e3b !important;   /* warm coral-red */
}

/* ---- Footer (small, subtle) ---- */
footer, .site-footer, .legal{
  color:#7a5a4bcc;
}

/* ---- Mobile polish ---- */
@media (max-width: 480px){
  main.container{ padding: 16px 14px; border-radius: 18px; }
}