/* =====================================================
   SWARFIT: 3 Bars CSS — STACKED (Bar1 + Bar2 + Bar3)
   - Rose + Gold Theme
   - Bar1: Timer (top:0)
   - Bar2: Marquee (top: var(--sf-timer-h))
   - Bar3: Marquee (top: timer + bar)
   - Timer: الرقم يمين والكلمة يسار
   ===================================================== */

:root{
  --sf-timer-h: 46px;
  --sf-bar-h: 42px;

  /* ✅ Rose + Gold */
  --sf-gold: #D4AF37;
  --sf-gold-rgb: 212,175,55;
  --sf-rose: #dca99e;
  --sf-rose-dark: #1b0610;

  /* ✅ الهوية */
  --sf-accent: var(--sf-gold);
  --sf-white: #dca99e;

  /* ✅ الشريط الأول */
  --sf-bar1-bg: var(--sf-rose-dark);
  --sf-bar1-msg: var(--sf-gold);
  --sf-bar1-num: var(--sf-white);
  --sf-bar1-label: var(--sf-gold);
  --sf-bar1-colon: var(--sf-gold);

  /* ✅ باقي الأشرطة */
  --sf-bg-2: #12070c;       /* غامق روز */
  --sf-bg-3: var(--sf-rose); /* روز واضح */
  --sf-text: #ffffff;

  /* ✅ تقارب عناصر الشريط الأول (Desktop) */
  --sf-bar1-gap: 14px;
  --sf-timer-gap: 4px;
  --sf-unit-gap: 5px;

  /* marquee */
  --sf-gap: 10px;
  --sf-pad-x: 18px;
  --sf-maxw: 1200px;
}

@media (max-width: 768px){
  :root{
    --sf-timer-h: 44px;
    --sf-bar-h: 40px;

    /* ✅ تقارب (Mobile) */
    --sf-bar1-gap: 10px;
    --sf-timer-gap: 3px;
    --sf-unit-gap: 4px;

    --sf-gap: 8px;
    --sf-pad-x: 14px;
  }
}

/* نزّل الصفحة تحت 3 أشرطة */
body.sf-bars-on{
  padding-top: calc(var(--sf-timer-h) + (var(--sf-bar-h) * 2));
}

/* لو عندك هيدر ثابت */
body.sf-bars-on header{
  top: calc(var(--sf-timer-h) + (var(--sf-bar-h) * 2)) !important;
}

/* ======================
   1) BAR 1: Timer
   ====================== */
#sf-timer-bar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--sf-timer-h);
  background: var(--sf-bar1-bg);
  z-index: 999999;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(var(--sf-gold-rgb), .25);
}

#sf-timer-bar *{ text-shadow: none; }

#sf-timer-bar .sf-inner{
  width: min(var(--sf-maxw), calc(100% - 24px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sf-bar1-gap);
  direction: rtl;
  white-space: nowrap;
}

#sf-timer-bar .sf-msg{
  font-weight: 900;
  font-size: 16px;
  color: var(--sf-bar1-msg);
  white-space: nowrap;
}

/* التايمر */
#sf-timer-bar .sf-timer{
  display: inline-flex;
  align-items: center;
  gap: var(--sf-timer-gap);
  direction: ltr; /* 00:00:00 */
  font-weight: 900;
  white-space: nowrap;
}

#sf-timer-bar .sf-unit{
  display: inline-flex;
  align-items: baseline;
  gap: var(--sf-unit-gap);

  /* ✅ الرقم يمين والكلمة يسار */
  flex-direction: row-reverse;
}

#sf-timer-bar .sf-unit b{
  font-size: 16px;
  letter-spacing: .4px;
  color: var(--sf-bar1-num);
}

#sf-timer-bar .sf-unit small{
  font-size: 13px;
  font-weight: 800;
  color: var(--sf-bar1-label);
  opacity: .98;
}

#sf-timer-bar .sf-colon{
  font-weight: 900;
  color: var(--sf-bar1-colon);
  opacity: .98;
  transform: translateY(-1px);
}

/* ======================
   2) BAR 2
   ====================== */
#sf-marquee-bar{
  position: fixed;
  top: var(--sf-timer-h);
  left: 0; right: 0;
  height: var(--sf-bar-h);
  background: var(--sf-bg-2);
  color: var(--sf-text);
  z-index: 999998;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(var(--sf-gold-rgb), .18);
}

/* ======================
   3) BAR 3
   ====================== */
#sf-marquee-3{
  position: fixed;
  top: calc(var(--sf-timer-h) + var(--sf-bar-h));
  left: 0; right: 0;
  height: var(--sf-bar-h);
  background: var(--sf-bg-3);
  color: var(--sf-text);
  z-index: 999997;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.18);
}

/* ======================
   Marquee shared
   ====================== */
.sf-marquee{
  width: 100%;
  overflow: hidden;
  direction: ltr;
}

.sf-track{
  display: inline-flex;
  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.sf-item{
  display: inline-flex;
  align-items: center;
  gap: var(--sf-gap);
  padding-inline: var(--sf-pad-x);
  font-weight: 900;
  font-size: 14px;
  direction: rtl;
  color: var(--sf-text);
  white-space: nowrap;
}

.sf-sep{
  color: var(--sf-accent);
  font-weight: 900;
  opacity: .95;
}

@media (max-width: 768px){
  #sf-timer-bar .sf-msg{ font-size: 15px; }
  #sf-timer-bar .sf-unit b{ font-size: 15px; }
  #sf-timer-bar .sf-unit small{ font-size: 12px; }
  .sf-item{ font-size: 13px; }
}

@media (prefers-reduced-motion: reduce){
  .sf-track{ transform: none !important; }
}