/* =========================================================
 * site-notifications.css — FIX-2026-09 بند ۱۱
 * نوار اعلان درون‌سایتی. رفتار در js/site-notifications.js است.
 *
 * دو الزام ساختاری که این فایل را شکل داد:
 *  • اعلان نباید زیر منوی بالایی یا پشت هیچ المانی برود — همان دسته اشتباهی
 *    که در بند ۱۲ برای بنر جشنواره گزارش شد. پس موقعیت fixed است و روی
 *    لایه‌ی مستقل می‌نشیند، نه داخل جریان محتوا.
 *  • اعلان نباید جلوی دکمه‌ی اقدام سایت (نوار سبد در پایین) را بگیرد؛ پس روی
 *    موبایل بالا می‌نشیند و در دسکتاپ پایین‌راست.
 * ========================================================= */

.site-notif__host {
  position: fixed;
  /* در دسکتاپ: پایین‌سمتِ شروع (در RTL = راست). از inset-inline استفاده شده
     تا در LTR خودبه‌خود قرینه شود. */
  inset-block-end: clamp(16px, 3vh, 28px);
  inset-inline-start: clamp(16px, 3vw, 28px);
  z-index: 9000; /* بالاتر از هدر/منو و بنر جشنواره، پایین‌تر از مودال‌های بلاککننده */
  display: flex;
  flex-direction: column;
  gap: 12px;
  inline-size: min(380px, calc(100vw - 32px));
  /* کانتینر خودش کلیک را نمی‌گیرد؛ فقط کارت‌ها. بدون این، فاصله‌ی خالیِ
     بین کارت‌ها کلیک روی محتوای زیر را مسدود می‌کرد. */
  pointer-events: none;
}
.site-notif__host > * { pointer-events: auto; }

.site-notif {
  position: relative;
  display: grid;
  /* آیکن | متن | دکمه‌ی بستن — ستون میانی 1fr است تا متن بلند
     بپیچد و کارت را از عرض خارج نکند (همان اشتباه بند ۱۰). */
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 14px 14px 12px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
  border-radius: var(--radius-lg, 16px);
  background: var(--surface-1, rgba(18, 18, 26, 0.96));
  color: var(--ink-100, #f4f4f8);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
  animation: site-notif-in 0.24s ease both;
}

/* نوار لبه‌ی رنگی بر اساس نوع اعلان — تفکیک بصری سریع بین هدیه، سفارش و هشدار */
.site-notif::before {
  content: '';
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 0;
  inline-size: 3px;
  border-radius: var(--radius-full, 999px);
  background: var(--accent-500, #7c5cff);
}
.site-notif[data-notif-type='coupon_granted']::before { background: #f5c451; }
.site-notif[data-notif-type='payment_rejected']::before { background: #ef5f5f; }
.site-notif[data-notif-type='order_delivered']::before { background: #4fd18b; }

.site-notif__icon {
  font-size: 1.25rem;
  line-height: 1.4;
}

.site-notif__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-inline-size: 0; /* شرط لازم برای شکستن متن درون grid/flex */
}

.site-notif__message {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  /* پیام می‌تواند حاوی کد تخفیف بدون فاصله باشد؛ overflow-wrap جلوی
     سرریز شدن رشته‌ی بلند بدون فاصله را می‌گیرد. */
  overflow-wrap: anywhere;
}

.site-notif__time {
  font-size: 0.75rem;
  color: var(--ink-500, #a0a0b2);
}

.site-notif__action {
  align-self: flex-start;
  margin-block-start: 2px;
  padding: 7px 14px;
  border-radius: var(--radius-full, 999px);
  background: var(--accent-500, #7c5cff);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: filter 0.16s ease, transform 0.16s ease;
}
.site-notif__action:hover { filter: brightness(1.12); }
.site-notif__action:active { transform: translateY(1px); }
.site-notif__action:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.site-notif__close {
  display: grid;
  place-items: center;
  /* ۳۲px حداقل ناحیه‌ی لمس قابل قبول روی موبایل است؛ کوچکتر از این،
     دکمه‌ی بستن عملاً غیرقابل‌استفاده می‌شود. */
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full, 999px);
  background: transparent;
  color: var(--ink-500, #a0a0b2);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.site-notif__close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-100, #f4f4f8);
}
.site-notif__close:focus-visible {
  outline: 2px solid var(--accent-500, #7c5cff);
  outline-offset: 2px;
}
.site-notif__close:disabled {
  opacity: 0.5;
  cursor: default;
}

/* خروج کارت — مدت آن با تأخیر ۱۸۰ms در dismissNotification() هماهنگ است. */
.site-notif--leaving {
  animation: site-notif-out 0.18s ease both;
}

@keyframes site-notif-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes site-notif-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* موبایل: اعلان بالا می‌نشیند تا نوار سبد/اقدام پایین صفحه را نپوشاند.
   عرض کامل منهای حاشیه — هیچ‌گاه از صفحه بیرون نمی‌زند. */
@media (max-width: 767px) {
  .site-notif__host {
    inset-block-start: calc(env(safe-area-inset-top, 0px) + 72px);
    inset-block-end: auto;
    inset-inline: 12px;
    inline-size: auto;
    gap: 10px;
  }
  .site-notif { padding: 12px; }
  .site-notif__message { font-size: 0.9rem; }

  @keyframes site-notif-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to { opacity: 1; transform: none; }
  }
  @keyframes site-notif-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(-8px) scale(0.98); }
  }
}

/* در چاپ، اعلان بی‌معنی است (مخصوصاً روی فاکتور). */
@media print {
  .site-notif__host { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .site-notif,
  .site-notif--leaving { animation: none; }
}