/* 1. تعريف الحركة */
@keyframes marquee-train {
  0% { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* 2. الحاوية الرئيسية */
salla-advertisement {
  background-color: #FF0D00 !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  display: block !important;
  height: 40px !important;
  line-height: 40px !important;
  z-index: 9999 !important;
}

/* 3. تنسيق النصوص */
.s-advertisement {
  display: inline-block !important;
  background-color: transparent !important;
  color: #FFFFFF !important;
  padding-right: 80px !important; /* المسافة الفاصلة بين النصوص */
  
  /* تقليل الوقت لـ 10 ثواني لجعل المسافة أقرب */
  animation: marquee-train 10s linear infinite !important;
  will-change: transform;
}

/* 4. توزيع النصوص (تقريب المسافات) */
/* النص الأول */
.s-advertisement:nth-child(1) {
  animation-delay: 0s !important;
}

/* النص الثاني: جعلناه يبدأ بعد 5 ثواني فقط (نصف وقت الحركة الجديد) */
.s-advertisement:nth-child(2) {
  animation-delay: -5s !important;
}

/* إذا كان هناك نص ثالث، استخدم: -3.3s و -6.6s */

/* 5. ضبط اتجاه الحركة للعربية */
html[lang="ar"] .s-advertisement {
  animation-direction: reverse !important;
}

/* 6. تنسيق المحتوى الداخلي */
.s-advertisement-content {
  display: inline-flex !important;
  align-items: center !important;
}

.s-advertisement-content-icon {
  margin-inline-end: 8px !important;
  color: #FFFFFF !important;
}

.s-advertisement-content-main a {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* إخفاء زر الإغلاق */
.s-advertisement-action {
  display: none !important;
}

/* منع أي تداخل جانبي */
body, html {
  overflow-x: hidden !important;
}