/* ═══ نوار اطلاعیه‌ی بالای سایت (D-646) — از روی RIQX AI ═══
   مشترکِ لندینگ و `base.html`؛ پس رنگ‌ها صریح‌اند، نه از متغیرهای یکی از
   دو پوسته. رنگ = نوعِ اطلاعیه‌ی فعال (data-kind روی نوار):
     promo  کمپین / تخفیف       بنفش + نشانِ کهربایی
     info   اطلاع‌رسانی          آبیِ نیلی + نشانِ فیروزه‌ای
     warn   هشدار / تعمیرات     کهرباییِ تیره + نشانِ روشن
     good   قابلیتِ تازه         بنفش + نشانِ فیروزه‌ای با هاله
     soon   به‌زودی              آبیِ نیلی + نشانِ کهربایی با هاله
   پهنای درون همان پهنای سرصفحه است (max-w-7xl و px-4/6/8) تا متنِ نوار
   با لوگوی زیرش در یک خط بنشیند. */

.notice-bar { position: relative; z-index: 45; color: #fff;
  font-family: Vazirmatn, Tahoma, sans-serif; font-size: 13.5px; line-height: 1.6;
  background: linear-gradient(90deg, #2b2470, #4a3ac0 55%, #3a2f9a);
  border-bottom: 1px solid rgba(255,255,255,.12); transition: background .5s ease; }
.notice-bar[data-kind="info"], .notice-bar[data-kind="soon"] { background: linear-gradient(90deg, #17307a, #2451c7 55%, #1c3d9c); }
.notice-bar[data-kind="warn"] { background: linear-gradient(90deg, #6d3a0c, #a3591a 55%, #7d4410); }
.notice-bar[hidden] { display: none; }

.notice-inner { display: flex; align-items: center; gap: 16px; min-height: 42px; padding: 4px 16px;
  max-width: 1280px; margin: 0 auto; box-sizing: border-box; }
@media (min-width: 640px) { .notice-inner { padding-inline: 24px; } }
@media (min-width: 1024px) { .notice-inner { padding-inline: 32px; } }

.notice-track { position: relative; flex: 1; min-width: 0; min-height: 34px; overflow: hidden; display: flex; align-items: center; }
.notice-item { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px 12px; min-height: 34px; }
.notice-text { flex: 0 1 auto; min-width: 0; font-weight: 600; color: #fff; }
/* بی جاوااسکریپت فقط اولی دیده می‌شود */
.notice-item:not(.is-on) { display: none; }
/* چرخش: همه در DOM، فقط فعال در جریان؛ بقیه absolute و نامرئی تا گذار */
.notice-track.is-rotating .notice-item { display: flex; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: transform .55s cubic-bezier(.4,0,.2,1), opacity .45s ease; }
.notice-track.is-rotating .notice-item.is-on { position: relative; opacity: 1; pointer-events: auto; transform: none; }
.notice-track[data-transition="up"] .notice-item.is-out { transform: translateY(-110%); }
.notice-track[data-transition="up"] .notice-item.is-in { transform: translateY(110%); }
.notice-track[data-transition="down"] .notice-item.is-out { transform: translateY(110%); }
.notice-track[data-transition="down"] .notice-item.is-in { transform: translateY(-110%); }
.notice-track[data-transition="fade"] .notice-item { transform: none !important; }

.notice-badge { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 2px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 800; color: #2b1f6e; background: #f4b96a; box-shadow: 0 0 0 3px rgba(244,185,106,.18); }
.notice-badge::before { content: "✦"; font-size: 10px; }
.notice-bar[data-kind="info"] .notice-badge { background: #2ce8c1; color: #0a3d33; box-shadow: 0 0 0 3px rgba(44,232,193,.18); }
.notice-bar[data-kind="warn"] .notice-badge { background: #ffe3b3; color: #6d3a0c; box-shadow: 0 0 0 3px rgba(255,227,179,.18); }
.notice-bar[data-kind="good"] .notice-badge { background: #2ce8c1; color: #0a3d33; box-shadow: 0 0 10px #2ce8c1; }
.notice-bar[data-kind="soon"] .notice-badge { background: #f4b96a; color: #2b1f6e; box-shadow: 0 0 10px #f4b96a; }
.notice-bar[data-kind="good"] .notice-badge::before, .notice-bar[data-kind="soon"] .notice-badge::before { content: "●"; font-size: 8px; }

.notice-link { flex: none; color: #fff; font-weight: 800; text-decoration: none; padding: 3px 11px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); transition: background .18s ease, border-color .18s ease; }
.notice-link:hover, .notice-link:focus-visible { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.6); outline: none; color: #fff; }

.notice-side { display: flex; align-items: center; gap: 14px; flex: none; }
.notice-phone { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.88); font-size: 12.5px;
  font-weight: 600; text-decoration: none; white-space: nowrap; }
.notice-phone:hover { color: #fff; }
.notice-dots { display: inline-flex; gap: 5px; }
.notice-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background .3s ease, transform .3s ease; }
.notice-dots i.on { background: #fff; transform: scale(1.25); }
.notice-dots:empty { display: none; }
.notice-close { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: transparent; color: rgba(255,255,255,.7); cursor: pointer; transition: background .18s ease, color .18s ease; }
.notice-close:hover, .notice-close:focus-visible { background: rgba(255,255,255,.14); color: #fff; outline: none; }

@media (max-width: 800px) {
  .notice-bar { font-size: 12.5px; }
  .notice-inner { gap: 10px; }
  .notice-phone { display: none; }       /* جای کم؛ تلفن در فوتر هم هست */
  .notice-close { width: 44px; height: 44px; }
  /* گوشی: نشان و پیوند درون‌خطی با متن تا نوار سه‌چهار ردیف نشود */
  .notice-item.is-on, .notice-track:not(.is-rotating) .notice-item.is-on { display: block; line-height: 1.75; }
  .notice-track.is-rotating .notice-item { display: block; line-height: 1.75; }
  .notice-badge, .notice-link { display: inline-flex; vertical-align: middle; margin: 1px 0; padding-block: 1px; }
  .notice-text { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .notice-track.is-rotating .notice-item { transition: none; } }