/* =====================================================
   SWARFIT: Timer Bar (Top) + Moving Marquee (Below)
   RTL + Mobile Friendly + No HTML required
   ===================================================== */

:root{
  --sf-timer-h: 48px;       /* ارتفاع شريط التوقيت */
  --sf-marquee-h: 48px;     /* ارتفاع الشريط المتحرك */
  --sf-between: 56px;       /* المسافة بين الجملتين في الشريط المتحرك */
  --sf-group-gap: 90px;     /* مسافة بين تكرارات النص */
  --sf-mobile-msg-max: 56%; /* أقصى عرض للنص في الجوال */
}

@media (max-width: 768px){
  :root{
    --sf-timer-h: 44px;
    --sf-marquee-h: 44px;
    --sf-between: 42px;
    --sf-group-gap: 70px;
    --sf-mobile-msg-max: 52%;
  }
}

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

/* لو الهيدر Sticky/Fixed نخليه ينزل تحت الشريطين */
body.sf-bars-on header{
  top: calc(var(--sf-timer-h) + var(--sf-marquee-h)) !important;
}

/* ======================
   1) شريط التوقيت (فوق)
   ====================== */
#sf-timer-bar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--sf-timer-h);
  background: #000;
  color: #fff;
  z-index: 999999;
  display: flex;
  align-items: center;
  overflow: hidden;
}

#sf-timer-bar .sf-inner{
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between; /* ✅ النص يمين / الأرقام يسار */
  gap: 12px;
  direction: rtl;
}

/* النص يمين */
#sf-timer-bar .sf-msg{
  order: 1;
  font-weight: 900;
  font-size: 18px;
  white-space: nowrap;
}

/* الأرقام يسار */
#sf-timer-bar .sf-timer{
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-weight: 900;
  direction: rtl; /* يضمن ترتيب عربي طبيعي */
}

/* كل وحدة (ثانية/دقيقة/ساعة) */
#sf-timer-bar .sf-unit{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  opacity: .98;
}
#sf-timer-bar .sf-unit b{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
}
#sf-timer-bar .sf-unit small{
  font-size: 13px;
  opacity: .82;
}

/* ألوان مشابهة للصورة */
#sf-timer-bar .u-hours b{ color: #B5976A; }
#sf-timer-bar .u-mins  b{ color: #8F6A3E; }
#sf-timer-bar .u-secs  b{ color: #E8D8C3; }

/* موبايل: تصغير + قص النص إذا ضاقت */
@media (max-width: 768px){
  #sf-timer-bar .sf-inner{
    width: calc(100% - 20px);
    gap: 10px;
  }

  #sf-timer-bar .sf-msg{
    font-size: 15px;
    max-width: var(--sf-mobile-msg-max);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #sf-timer-bar .sf-timer{ gap: 8px; }
  #sf-timer-bar .sf-unit{ gap: 4px; }
  #sf-timer-bar .sf-unit b{ font-size: 14px; }
  #sf-timer-bar .sf-unit small{ font-size: 11px; }
}

/* ===========================
   2) الشريط المتحرك (تحت)
   =========================== */
#sf-marquee-bar{
  position: fixed;
  top: var(--sf-timer-h);
  left: 0; right: 0;
  height: var(--sf-marquee-h);
  background: #000;
  color: #fff;
  z-index: 999998;
  overflow: hidden;
  display: flex;
  align-items: center;
}

#sf-marquee-bar .sf-marquee{
  width: 100%;
  overflow: hidden;
  direction: rtl;
}

#sf-marquee-bar .sf-track{
  display: inline-flex;
  align-items: center;
  gap: var(--sf-group-gap);
  white-space: nowrap;
  padding: 0 24px;
  will-change: transform;
}

/* مجموعة النصين */
#sf-marquee-bar .sf-group{
  display: inline-flex;
  align-items: center;
  gap: var(--sf-between); /* ✅ مسافة بين الجملتين */
  white-space: nowrap;
}

#sf-marquee-bar .sf-part{
  font-weight: 900;
  font-size: 16px;
  opacity: .95;
}
@media (max-width: 768px){
  #sf-marquee-bar .sf-part{ font-size: 14px; }
}









/* =========================
   SF: Bring text & timer closer
   ========================= */

/* خلي الاثنين يتجمعوا في النص مع مسافة صغيرة بينهم */
#sf-timer-bar .sf-inner{
  justify-content: center !important; /* بدل space-between */
  gap: 18px !important;               /* ✅ قرب/بعد هنا */
}

/* (اختياري) لو تبغاه أقرب زيادة على الجوال */
@media (max-width: 100px){
  #sf-timer-bar .sf-inner{
    gap: 5px !important;
  }
}