/* 🔹 أزرار سلة الأساسية كلها باللون الأخضر */
button.s-button-element,
.s-button-element {
    background-color: #0f9d58 !important;   /* خلفية أخضر */
    border: 2px solid #0f9d58 !important;  /* حدود أخضر */
    color: #fff !important;                /* نص أبيض */
    border-radius: 8px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

/* 🔹 نص داخل الزر */
button.s-button-element .s-button-text,
.s-button-element .s-button-text {
    color: #fff !important;
}

/* 🔹 عند المرور بالماوس */
button.s-button-element:hover,
.s-button-element:hover {
    background-color: #0c7a43 !important; /* أخضر أغمق */
    border-color: #0c7a43 !important;
    color: #fff !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; /* ظل مخصص */
}

/* 🔹 عند الضغط أو التحديد */
button.s-button-element:focus,
button.s-button-element:active,
.s-button-element:focus,
.s-button-element:active {
    outline: none !important;
    background-color: #0c7a43 !important;
    border-color: #0c7a43 !important;
    color: #fff !important;
    box-shadow: none !important; /* إلغاء الظل الأزرق الافتراضي */
}

/* 🔹 تخصيص زر أضف للسلة تحديدًا */
button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center {
    background-color: #0f9d58 !important;
    border-color: #0f9d58 !important;
    color: #fff !important;
}


  /* شريط العروض */
.offers-bar {
  background: #0f9d58; /* أخضر ثابت */
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px; /* متناسق مع النص */
  line-height: 48px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  padding: 0 15px;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
}

/* النص */
.offers-bar span {
  white-space: nowrap;
  margin-right: 12px;
  animation: marquee 18s linear infinite;
}

/* حركة النص */
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* الرابط */
.offers-bar a {
  background: #fff;
  color: #0f9d58;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s;
}

.offers-bar a:hover {
  background: #0c7c43;
  color: #fff;
}

div.product-description a,
.product-description p a,
.product-description span a {
  color: green !important;
}








/* خلفية popup */
.national-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
  z-index: 9999;
}

/* إظهار */
.national-popup.show {
  opacity: 1;
  pointer-events: auto;
}

/* صندوق المحتوى */
.popup-content {
  background: linear-gradient(135deg, #1dbf73, #ffffff);
  padding: 30px 40px;
  border-radius: 20px;
  text-align: center;
  color: #004d1a;
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
  animation: scaleUp 1s ease;
  font-family: "Cairo", sans-serif;
}

.popup-content h1 {
  margin-bottom: 15px;
  font-size: 2rem;
  text-shadow: 0 0 10px rgba(255,255,255,0.9);
}

.popup-content p {
  font-size: 1.2rem;
}

/* حركة ظهور */
@keyframes scaleUp {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
















.notifications-container {
  position: fixed;
  bottom: 90px; /* 👈 فوق شريط واتساب */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 9999;
}

.fake-notification {
  background: rgba(255, 255, 255, 0.85); /* أبيض شبه شفاف */
  backdrop-filter: blur(6px); /* يعطي مظهر زجاجي */
  color: #111;
  padding: 10px 18px;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  font-size: 14px;
  font-family: var(--font-main, sans-serif);
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
  border: 1px solid rgba(0,0,0,0.05);
}

.fake-notification.show {
  opacity: 1;
  transform: translateY(0);
}








// --- بداية كود السلايدر ---

// روابط الصور المباشرة
const images = [
  'https://drive.google.com/uc?export=view&id=1W95fEDFa8hi_sSk5QCfmyPR0Fli0N7cN',
  'https://drive.google.com/uc?export=view&id=1OcuwMGKvwrqY1023ZLV56rAXvwuZqsnl'
];

// --- لا تقم بتعديل أي شيء بعد هذا الخط ---

// انتظر حتى يتم تحميل كامل الصفحة لضمان وجود جميع العناصر
document.addEventListener('DOMContentLoaded', function( ) {
    // التأكد من عدم إضافة السلايدر أكثر من مرة
    if (!document.querySelector('.custom-slider-container')) {
        // إنشاء حاوية السلايدر
        const sliderContainer = document.createElement('div');
        sliderContainer.className = 'custom-slider-container';

        // إنشاء حاوية الصور
        const slides = document.createElement('div');
        slides.className = 'custom-slides';

        // إضافة الصور إلى السلايدر
        images.forEach(src => {
          const slide = document.createElement('div');
          slide.className = 'custom-slide';
          const img = document.createElement('img');
          img.src = src;
          slide.appendChild(img);
          slides.appendChild(slide);
        });

        sliderContainer.appendChild(slides);

        // --- تحديد المكان الجديد لوضع السلايدر ---
        // سنبحث عن قسم البانر الرئيسي ونضيف السلايدر بعده
        const mainBanner = document.querySelector('.main-slider');
        
        if (mainBanner) {
          // إذا وجدنا البانر، نضع السلايدر الجديد بعده مباشرة
          mainBanner.after(sliderContainer);
        } else {
          // إذا لم نجده (كخطة بديلة)، سنضعه في أعلى الصفحة
          const targetElement = document.querySelector('.main-content') || document.querySelector('#main-content');
          if (targetElement) {
            targetElement.prepend(sliderContainer);
          }
        }

        // --- التحكم في حركة السلايدر ---
        let currentSlide = 0;
        const slideElements = sliderContainer.querySelectorAll('.custom-slide');
        const totalSlides = slideElements.length;

        function showSlide(index) {
          if (slides) {
            slides.style.transform = `translateX(-${index * 100}%)`;
          }
        }

        function nextSlide() {
          currentSlide = (currentSlide + 1) % totalSlides;
          showSlide(currentSlide);
        }

        // تشغيل السلايدر تلقائياً كل 4 ثواني
        if (totalSlides > 1) {
          setInterval(nextSlide, 4000);
        }
    }
});
// --- نهاية كود السلايدر ---