html::before{
  content: " 🎉خصومات أكتوبر 2025  بدأت الآن لفترة محدودة - سارعي بالطلب! 🎉 ";
  position: fixed; top: 0; left: 0; width: 100%;
  background: #ffcc00; color:#000;
  font: 700 16px/1.2 system-ui, -apple-system, Segoe UI, Arial;
  text-align:center; padding:10px 12px; z-index: 999999;
}
@media (max-width:480px){
  html::before{ font-size:14px; padding:8px 10px; }
}
body{ padding-top: 48px !important; }

/* هنا نهاية كود شريط الخصم الخام*/
/* في الاسفل اللمعان والاسقاط */
/* ===== Animations for top discount bar (put at the very end) ===== */

/* لو الشريط عندك هو html::before أو عنصر بآي دي bl-discount-bar */
html::before,
#bl-discount-bar{
  /* جراديانت أخضر فاخر يحافظ على اللمعان */
  background: linear-gradient(
    90deg,
    #0F3D2E 0%,   /* أخضر غامق */
    #1E6B57 20%,  /* أخضر أفتح للّمعان */
    #0F3D2E 40%,
    #0F3D2E 100%
  ) !important;
  background-size: 200% 100% !important;  /* لازم للّمعان */
  color: #ffffff !important;              /* ذهبي للنص */
  
  /* نزول مرة + لمعان مستمر */
  animation: blSlideIn .6s ease-out both, blSheen 6s linear infinite !important;

  /* تحسين السلاسة */
  will-change: transform, background-position;
}

/* حركة النزول مرة واحدة */
@keyframes blSlideIn{
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

/* حركة اللمعان المستمر */
@keyframes blSheen{
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  html::before, #bl-discount-bar { animation: none !important; }
}