/* Add custom Js code below */ 
document.addEventListener("DOMContentLoaded", function () {
  // ✅ إنشاء اللودر
  const loader = document.createElement('div');
  loader.id = 'loaderr';
  loader.style.cssText = `
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    transition: opacity 2s ease; /* ← أبطأ */
  `;

  // ✅ شكل اللوجو + 4 دواير متحركة
  loader.innerHTML = `
    <div style="display: flex; flex-direction: column; align-items: center; gap: 25px;">
      <img src="https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/YgglVo/wpT76oDeerCUfRjQpmmBWZMGloY48xcDSPjiq5yF.png" alt="logo" style="width: 150px; height: 150px; object-fit: contain;" />
      <div style="display: flex; gap: 10px;">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>

      </div>
    </div>
    <style>
      .dot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: black;
        animation: wave 1.5s infinite ease-in-out;
      }
      .dot:nth-child(1) { animation-delay: 0s; }
      .dot:nth-child(2) { animation-delay: 0.2s; }
      .dot:nth-child(3) { animation-delay: 0.4s; }
      .dot:nth-child(4) { animation-delay: 0.6s; }


      @keyframes wave {
        0%, 80%, 100% {
          transform: translateY(0);
        }
        40% {
          transform: translateY(-20px);
        }
      }
    </style>
  `;

  document.body.appendChild(loader);

  // ✅ إزالة اللودر بعد تحميل الصفحة
  window.addEventListener('load', function () {
    const loader = document.getElementById('loaderr');
    if (loader) {
      loader.style.opacity = '0';
      setTimeout(() => loader.remove(), 2000); // ← يتزامن مع transition: 2s
    }
  });
});





document.addEventListener("DOMContentLoaded", function () {
  // اختيار كل أقسام الصفحة
  const sections = document.querySelectorAll("section");

  // ✅ تفعيل الأنيميشن عند ظهور الأقسام أثناء التمرير
  function checkVisibility() {
    sections.forEach(section => {
      const position = section.getBoundingClientRect();
      if (position.top < window.innerHeight && position.bottom >= 0) {
        section.classList.add('visible');
      } else {
        section.classList.remove('visible');
      }
    });
  }

  // إضافة مستمع لحدث التمرير
  window.addEventListener("scroll", checkVisibility);
  checkVisibility(); // تنفيذ التحقق أول مرة عند تحميل الصفحة

  // ✅ تعيين لون الخلفية لكل section إلى 'inherit'
  sections.forEach(function(section) {
    section.style.backgroundColor = '#f9f9f9';
  });

  // ✅ تعديل خلفية عنصر معين عند ظهوره
  const interval = setInterval(() => {
    const el = document.querySelector(".mm-spn.mm-spn--light");
    if (el) {
      el.style.backgroundColor = "#f9f9f9";
      el.style.backgroundImage = "none";
      clearInterval(interval);
    }
  }, 300);
});
/* لون الزرار في سياسة الاستبدال والإسترجاع */
const style = document.createElement('style');
style.textContent = `
  .s-button-primary {
    background: #f9f9f9 !important;
    color: #ffffff !important;
  }
`;
document.head.appendChild(style);

/* أبعاد صفحة المنتجات على الموبايل */
(function () {
  const style = document.createElement('style');
  style.innerHTML = `
    @media screen and (max-width: 768px) {
      .s-products-list-vertical-cards {
        display: inline-grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-width: 83% !important;
        margin: auto !important;
        position: relative !important;
        left: -40px !important;
      }

      button.undefined.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center:hover {
        width: 146px !important;
      }
    }
  `;
  document.head.appendChild(style);
})();


document.addEventListener("DOMContentLoaded", () => {
  const style = document.createElement("style");
  style.innerHTML = `
    @keyframes zoomEffect {
      0%, 100% {
        transform: scale(1) translateY(0);
      }
      50% {
        transform: scale(1.08) translateY(2px);
      }
    }

    .zoom-active {
      animation: zoomEffect 0.6s ease-in-out;
      transform-origin: center;
      position: relative;
      z-index: 10;
    }

    .s-button-primary-outline {
      background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%) !important;
      overflow: visible !important;
    }

    .s-button-primary-outline:hover {
      background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%) !important;
      border-color: var(--color-primary) !important;
    }

    .s-block--tabs-produtcs .tab-trigger.is-active button,
    .s-block--tabs-produtcs .tab-trigger.is-active button:hover {
      background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%) !important;
    }
  `;
  document.head.appendChild(style);

  // تفعيل الزر الفعال
  const activeTabButton = document.querySelector(".s-block--tabs-produtcs .tab-trigger.is-active button");
  if (activeTabButton) {
    activeTabButton.style.backgroundColor = "#ecdcc4";
  }

  // انتظار الزرار لغاية ما يظهر
  function waitForButtons() {
    const buttons = document.querySelectorAll(".s-button-primary-outline");
    if (buttons.length > 0) {
      let current = 0;

      // أول زر يعمل زوم فوري
      buttons[current].classList.add("zoom-active");

      setTimeout(() => {
        buttons[current].classList.remove("zoom-active");

        // اللوب تبدا بين الزرار التانيين
        setInterval(() => {
          current = (current + 1) % buttons.length;
          buttons.forEach(btn => btn.classList.remove("zoom-active"));
          buttons[current].classList.add("zoom-active");
       }, 1400); // سرعة التنقل بين الزرار
      }, 300); // وقت بداية الزرار الأول
    } else {
      setTimeout(waitForButtons, 100);
    }
  }

  waitForButtons();
});



document.addEventListener("DOMContentLoaded", function () {
  // نضيف ستايل تأثير الزوم داخل الصفحة
  const style = document.createElement("style");
  style.innerHTML = `
    .zoom-effect {
      transition: transform 0.3s ease-in-out;
    }
    .zoom-effect:hover {
      transform: scale(1.03);
    }
  `;
  document.head.appendChild(style);

  // نراقب العناصر و نضيف الكلاس المناسب
  const observer = new MutationObserver(() => {
    const cards = document.querySelectorAll('.s-products-list-vertical-cards .s-product-card-entry');

    cards.forEach(card => {
      if (!card.classList.contains("zoom-effect")) {
        card.classList.add("zoom-effect");
      }
    });
  });

  observer.observe(document.body, { childList: true, subtree: true });
});

document.addEventListener("DOMContentLoaded", () => {
  // دالة لإضافة النجوم في أعلى كارت المنتج
  function addStarsToTop() {
    const cards = document.querySelectorAll(".s-product-card-content");

    cards.forEach(card => {
      // لو مفيش نجوم مضافة قبل كده
      if (!card.querySelector(".stars-custom")) {
        const stars = document.createElement("div");
        stars.className = "stars-custom";
        stars.textContent = "★★★★★";
        stars.style.display = "block";
        stars.style.color = "#facc15";
        stars.style.fontSize = "0.75rem";
        stars.style.marginBottom = "0.25rem";
        stars.style.letterSpacing = "1px";
        stars.style.textAlign = "center";

        // نضيف النجوم في أول الكارت
        card.insertBefore(stars, card.firstChild);
      }
    });
  }

  // شغل الدالة فورًا
  addStarsToTop();

  // راقب الصفحة لو في منتجات بتظهر بعدين
  const observer = new MutationObserver(() => {
    addStarsToTop();
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
});