/* ===========================================================
   رهیار — مودالِ «فراموشی رمز عبور» (صفحه‌یِ ورود)
   از همون توکن‌ها/کلاس‌هایِ پایه‌یِ style.css (modal, field, btn-submit,
   form__error, modal__footer) استفاده می‌کنه؛ این فایل فقط overlayِ
   پس‌زمینه + دکمه‌ی بستن + جابه‌جاییِ گام‌ها رو اضافه می‌کنه.
   =========================================================== */

.fp-overlay{
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20,22,28,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.fp-overlay.is-open{
  opacity: 1;
  visibility: visible;
}

.fp-modal{
  position: relative;
  width: 100%;
  max-width: 388px;
  max-height: 88vh;
  overflow-y: auto;
  transform: translateY(14px) scale(.98);
  transition: transform .22s ease;

  /* ⭐ برخلافِ مودالِ اصلیِ ورود (که رویِ عکسِ تیره طراحی شده و از شیشه‌یِ
     تیره + متنِ روشن استفاده می‌کنه)، این مودال خودش رویِ یه overlayِ
     تیره‌شده باز می‌شه؛ برایِ همین پس‌زمینه‌ش رو سفیدترِ مات کردیم تا هم
     نوشته‌ها خیلی واضح‌تر دیده بشن، هم حسِ سبک‌تر/جذاب‌تری بگیره. */
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(250,250,252,0.93));
  border-color: rgba(255,255,255,0.65);
  box-shadow: 0 30px 70px -24px rgba(20,22,30,0.35), 0 0 0 1px rgba(255,255,255,0.6) inset;
}
.fp-overlay.is-open .fp-modal{ transform: translateY(0) scale(1); }

/* عنوان/زیرعنوانِ داخلِ همین مودال هم باید با پس‌زمینه‌یِ سفیدِ جدید بخونا
   باشن؛ گرادیانِ روشنِ .modal__title (که برایِ زمینه‌یِ تیره ساخته شده
   بود) این‌جا override می‌شه با یه رنگِ تیره‌یِ ساده. */
.fp-modal .modal__title{
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--text-paper);
  text-shadow: none;
}
.fp-modal .modal__subtitle{ color: var(--text-muted); }
.fp-modal .fp-step__hint{ color: var(--text-muted); }

.fp-close{
  position: absolute;
  top: 14px;
  left: 14px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--ink),0.06);
  border: none;
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.fp-close:hover{ color: var(--text-paper); background: rgba(var(--ink),0.12); }
.fp-close svg{ width: 16px; height: 16px; }

.fp-step__hint{
  margin: -6px 0 2px;
  font-size: 13px;
  color: var(--text-muted);
}

/* دکمه‌ی پشتیبانی به‌عنوانِ لینک، نه <button>، ولی همون ظاهرِ btn-submit رو داره */
.fp-support-link{ cursor: pointer; }

@media (max-width: 480px){
  .fp-modal{ padding: 0; }
}