/* ====================================================================
   فایل: notify.css
   توضیح: سیستم واحد نمایش پیام‌های بازخورد (Toast Notification)

   نکته‌ی آموزشی مهم:
   این فایل هیچ رنگ یا فونت جدیدی «اختراع» نمی‌کنه؛ همه‌چیز از روی
   متغیرهای CSS که توی style.css توی :root تعریف شدن ساخته میشه
   (مثل --bg-card، --brand-pink، --brand-blue، --radius-md و ...).
   به همین خاطر اگه یه روز پالت رنگی برند عوض بشه، این جعبه‌های پیام
   هم خودکار هماهنگ باقی می‌مونن، بدون اینکه لازم باشه این فایل رو
   دستکاری کنی.

   ساختار HTML که به‌صورت خودکار توسط js/notify.js ساخته میشه:
   <div id="fa-toast-container" class="fa-toast-container">
     <div class="fa-toast fa-toast--success">
       <div class="fa-toast-icon">...svg...</div>
       <div class="fa-toast-body">
         <strong class="fa-toast-title">موفقیت</strong>
         <p class="fa-toast-message">متن پیام</p>
       </div>
       <button class="fa-toast-close">×</button>
       <span class="fa-toast-progress"></span>
     </div>
   </div>
   ==================================================================== */


/* ====================================================================
   1. کانتینر نگه‌دارنده‌ی پیام‌ها
   نکته: این المان با position: fixed همیشه بالای صفحه ثابت می‌مونه
   و پیام‌های جدید از بالا به پایین روی هم چیده میشن (stack).
   z-index بالا داریم تا همیشه روی مودال‌ها و هدر هم دیده بشه.
   ==================================================================== */
.fa-toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 380px;
  padding: 0 16px;
  pointer-events: none; /* خود کانتینر کلیک‌ها رو نمی‌گیره، فقط جعبه‌های داخلش */
}


/* ====================================================================
   2. جعبه‌ی پیام (Toast) - حالت پایه، مشترک بین همه‌ی انواع
   ==================================================================== */
.fa-toast {
  --fa-toast-play: running;
  --fa-toast-accent: var(--brand-cyan);

  pointer-events: auto;
  direction: rtl;
  font-family: 'Vazirmatn', Tahoma, sans-serif;

  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 16px 16px 40px; /* فضای بیشتر سمت چپ برای دکمه‌ی بستن (RTL) */
  overflow: hidden;

  background: rgba(6, 16, 30, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 3px solid var(--fa-toast-accent);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);

  /* حالت اولیه: نامرئی و کمی جابه‌جا شده، آماده‌ی انیمیشن ورود */
  opacity: 0;
  transform: translateY(-14px) scale(0.97);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* حالت نمایش (ورود نرم) - این کلاس با جاوااسکریپت یه فریم بعد اضافه میشه */
.fa-toast.fa-toast--in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* حالت خروج (بسته شدن نرم) */
.fa-toast.fa-toast--out {
  opacity: 0;
  transform: translateY(-10px) scale(0.96);
}


/* ====================================================================
   3. آیکون هر پیام
   ==================================================================== */
.fa-toast-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--fa-toast-accent) 16%, transparent);
  color: var(--fa-toast-accent);
}

.fa-toast-icon svg {
  width: 16px;
  height: 16px;
}


/* ====================================================================
   4. متن پیام
   ==================================================================== */
.fa-toast-body {
  flex: 1;
  min-width: 0; /* برای اینکه متن طولانی درست wrap بشه */
}

.fa-toast-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--fa-toast-accent);
  margin-bottom: 2px;
}

.fa-toast-message {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text-primary);
  word-break: break-word;
}


/* ====================================================================
   5. دکمه‌ی بستن دستی
   ==================================================================== */
.fa-toast-close {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  transition: var(--transition-fast);
}

.fa-toast-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}


/* ====================================================================
   6. نوار پیشرفت (نشون میده چقدر مونده تا پیام خودکار بسته بشه)
   ==================================================================== */
.fa-toast-progress {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--fa-toast-accent);
  transform-origin: right; /* چون RTLـه، از راست شروع به کوچیک شدن می‌کنه */
  animation-name: fa-toast-shrink;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-play-state: var(--fa-toast-play);
  opacity: 0.55;
}

@keyframes fa-toast-shrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}


/* ====================================================================
   7. رنگ‌بندی اختصاصی برای هر حالت (success / error / warning / info)
   نکته: فقط متغیر --fa-toast-accent عوض میشه و بقیه‌ی استایل‌ها
   (که بالاتر تعریف شدن) خودکار از همین متغیر رنگشون رو می‌گیرن.
   ==================================================================== */
.fa-toast--success { --fa-toast-accent: #4ade80; }
.fa-toast--error   { --fa-toast-accent: #f87171; }
.fa-toast--warning { --fa-toast-accent: #fbbf24; }
.fa-toast--info     { --fa-toast-accent: var(--brand-cyan); }


/* ====================================================================
   8. حالت ریسپانسیو (موبایل)
   ==================================================================== */
@media (max-width: 480px) {
  .fa-toast-container {
    top: 12px;
    max-width: 100%;
    padding: 0 10px;
  }

  .fa-toast {
    padding: 12px 14px 14px 36px;
    border-radius: var(--radius-sm);
  }

  .fa-toast-message {
    font-size: 13px;
  }
}


/* ====================================================================
   9. احترام به تنظیم کاهش انیمیشن سیستم‌عامل کاربر (دسترس‌پذیری)
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fa-toast {
    transition: opacity 0.15s linear;
    transform: none !important;
  }
  .fa-toast-progress {
    animation: none;
  }
}