/* Add custom Js styles 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: #f4f4f4;
    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/RAmoPx/R7uG0YaArnqg3TrtZ13qIIBCxAROlXTE11M3GXKa.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: #1c6434;
        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 = '#f4f4f4';
  });

  // ✅ تعديل خلفية عنصر معين عند ظهوره
  const interval = setInterval(() => {
    const el = document.querySelector(".mm-spn.mm-spn--light");
    if (el) {
      el.style.backgroundColor = "#f4f4f4";
      el.style.backgroundImage = "none";
      el.style.color = "#1c6434";
      clearInterval(interval);
    }
  }, 300);
});
/* لون الزرار في سياسة الاستبدال والإسترجاع */
const style = document.createElement('style');
style.textContent = `
  .s-button-primary {
    background-color: #f4f4f4 !important;
    color: #1c6434 !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: 86% !important;
        margin: auto !important;
        position: relative !important;
        left: -20px !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);
})();

/* لون الجزء اللي تحت في المنتجات (موبايل فقط) */
window.addEventListener('load', () => {
  const style = document.createElement('style');
  style.textContent = `
    @media screen and (max-width: 768px) {
      .s-product-card-content {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

      }

      
    }
  `;
  document.head.appendChild(style);
});
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
  });
});

document.addEventListener("DOMContentLoaded", function () {
    // لو تم اغلاق الرسالة سابقاً ما نعرضهاش
    if (localStorage.getItem("wpMessageDismissed") === "true") {
        return;
    }

    // إضافة الاستايل
    const styleWp = document.createElement("style");
    styleWp.textContent = `
        #wp-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); /* أسود شفاف */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}
        #wp-box {
            background: #f4f4f4;
            padding: 20px;
            border-radius: 12px;
            max-width: 420px;
            width: 90%;
            text-align: center;
            position: relative;
            box-shadow: 0 6px 24px #1c6434;
            font-family: Arial, sans-serif;
        }
        #wp-box h2 {
            margin: 0 0 8px;
            font-size: 20px;
        }
        #wp-box p {
            margin: 0 0 16px;
            color:#1c6434;
        }
        .wp-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .wp-btn {
            display: inline-block;
            padding: 10px 16px;
            background: #f4f4f4;
            color: #1c6434;
            border: 2px solid #1c6434;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            cursor: pointer;
        }
        .wp-btn:hover {
            background: #f4f4f4;
            color: #1c6434;
        }
        .wp-close {
            position: absolute;
            top: 8px;
            right: 10px;
            border: none;
            background: transparent;
            font-size: 20px;
            cursor: pointer;
            color: #1c6434;
        }
        @media (min-width: 560px) {
            .wp-buttons { flex-direction: row; justify-content: center }
            .wp-btn { min-width: 120px }
        }
    `;
    document.head.appendChild(styleWp);

    // إنشاء البوب أب
    const overlay = document.createElement("div");
    overlay.id = "wp-overlay";
    overlay.innerHTML = `
        <div id="wp-box">
            <button class="wp-close">&times;</button>
            <img id="wp-logo" src="https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/RAmoPx/R7uG0YaArnqg3TrtZ13qIIBCxAROlXTE11M3GXKa.png">
            <h2>اهلا بك في متجرنا!</h2>
            <p>نتمنى لك رحلة تسوق ممتعة 🤩</p>

            <div class="wp-buttons">
                <a href="http://sba7-aboabdullah.com" class="wp-btn">أبدأ الأن</a>
                
            </div>
        </div>
    `;
    document.body.appendChild(overlay);

    // دالة لإخفاء الرسالة وتخزين الحالة
    function dismissMessage() {
        localStorage.setItem("wpMessageDismissed", "true");
        overlay.remove();
    }

    // زر إغلاق الرسالة
    overlay.querySelector(".wp-close").addEventListener("click", dismissMessage);

    // لكل زرار، لما يضغط، يخزن الحالة ويحول للينك بدون فتح تاب جديد
    overlay.querySelectorAll(".wp-btn").forEach(btn => {
        btn.addEventListener("click", function (e) {
            e.preventDefault(); // منع الانتقال السريع
            dismissMessage();
            window.location.href = this.href; // تحويل في نفس الصفحة
        });
    });
});
document.addEventListener("DOMContentLoaded", function () {
  // 1️⃣ إنشاء زر الأيقونة
  const infoBtn = document.createElement("div");
  infoBtn.innerHTML = `<div style="
      position: fixed;
      bottom: 100px;
      left: 20px;
      text-align: center;
      cursor: pointer;
      z-index: 9999;
    ">
      <div style="font-size:14px; color:#1c6434; font-weight:bold;"> ما يميزنا</div>
      <div style="
        width: 55px; height: 55px;
        background: #f4f4f4;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 8px #1c6434;
        color: #1c6434; font-size: 24px;
      ">🤩</div>
    </div>`;
  document.body.appendChild(infoBtn);

  // 2️⃣ إنشاء البوكس
  const faqBox = document.createElement("div");
  faqBox.style.cssText = `
    position: fixed;
    bottom: 170px;
    left: 20px;
    width: 300px;
    background: #f4f4f4;
    border-radius: 16px;
    box-shadow: 0 6px 16px #1c6434;
    padding: 15px;
    font-family: sans-serif;
    direction: rtl;
    display: none;
    z-index: 9999;
    max-height: 400px;
    overflow-y: auto;
  `;

  // 3️⃣ محتوى الأسئلة
  const faqs = [
    { q: "🚚 الشحن والتوصيل", a: "مدة التوصيل من 7-14 يوم عمل حسب موقعك." },
    { q: "💳 الدفع ", a: "نوفر طرق دفع امنة ومتنوعة ." },
    { q: "🎁 المنتجات والإرجاع", a: "كل منتجاتنا أصلية ونوفر سياسة إرجاع سهلة." },
  ];

  faqs.forEach(item => {
    const qDiv = document.createElement("div");
    qDiv.style.cssText = `
      padding: 10px;
      border-bottom: 1px solid #1c6434;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      color: #1c6434;
    `;
    qDiv.innerHTML = `<span>${item.q}</span> <span style="transition: transform 0.3s;">⯈</span>`;

    const aDiv = document.createElement("div");
    aDiv.textContent = item.a;
    aDiv.style.cssText = `
      display: none;
      padding: 8px;
      font-size: 14px;
      color: #1c6434;
      background: #f4f4f4;
      border-radius: 8px;
      margin-top: 5px;
    `;

    qDiv.addEventListener("click", () => {
      const arrow = qDiv.querySelector("span:last-child");
      if (aDiv.style.display === "none") {
        aDiv.style.display = "block";
        arrow.style.transform = "rotate(90deg)";
      } else {
        aDiv.style.display = "none";
        arrow.style.transform = "rotate(0deg)";
      }
    });

    faqBox.appendChild(qDiv);
    faqBox.appendChild(aDiv);
  });

  document.body.appendChild(faqBox);

  // 4️⃣ إظهار/إخفاء البوكس عند الضغط على الأيقونة
  infoBtn.addEventListener("click", () => {
    faqBox.style.display = faqBox.style.display === "none" ? "block" : "none";
  });
});