/* 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: #142c44;
    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/mYZKa/rPFMS6wp27OUIYhmQJEMtpnE2jHceuLS7XhskuNf.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: white;
        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 = '#142c44';
  });

  // ✅ تعديل خلفية عنصر معين عند ظهوره
  const interval = setInterval(() => {
    const el = document.querySelector(".mm-spn.mm-spn--light");
    if (el) {
      el.style.backgroundColor = "#142c44";
      el.style.backgroundImage = "none";
      el.style.color = "white";
      clearInterval(interval);
    }
  }, 300);
});
/* لون الزرار في سياسة الاستبدال والإسترجاع */
const style = document.createElement('style');
style.textContent = `
  .s-button-primary {
    background-color: #142c44 !important;
    color: white !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: #142c44;
            padding: 20px;
            border-radius: 12px;
            max-width: 420px;
            width: 90%;
            text-align: center;
            position: relative;
            box-shadow: 0 6px 24px white;
            font-family: Arial, sans-serif;
        }
        #wp-box h2 {
            margin: 0 0 8px;
            font-size: 20px;
        }
        #wp-box p {
            margin: 0 0 16px;
            color:white;
        }
        .wp-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .wp-btn {
            display: inline-block;
            padding: 10px 16px;
            background: #142c44;
            color: white;
            border: 2px solid black;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            cursor: pointer;
        }
        .wp-btn:hover {
            background: #142c44;
            color: white;
        }
        .wp-close {
            position: absolute;
            top: 8px;
            right: 10px;
            border: none;
            background: transparent;
            font-size: 20px;
            cursor: pointer;
            color: white;
        }
        @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>
            <h2>اهلا بك في متجرنا!</h2>
            <p>نتمنى لك رحلة تجارة ممتعة🤩</p>

            <div class="wp-buttons">
                <a href="https://alfares-ksa.store" class="wp-btn">أبدأ الأن</a>
                
        </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:white; font-weight:bold;"> ما يميزنا</div>
      <div style="
        width: 55px; height: 55px;
        background: #142c44;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 8px white;
        color: white; 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: #142c44;
    border-radius: 16px;
    box-shadow: 0 6px 16px white;
    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 white;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      color:white;
    `;
    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: white;
      background: #142c44;
      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";
  });
});





document.addEventListener("DOMContentLoaded", () => {
  const whatsappNumber = "+966509225017";

  // إنشاء العنصر العائم
  const whatsappFloat = document.createElement("div");
  whatsappFloat.className = "whatsapp-float";

  // أيقونة الواتساب
  const whatsappIcon = document.createElement("img");
  whatsappIcon.src = "https://i.ibb.co/wZrVWv1J/image.gif";
  whatsappIcon.alt = "WhatsApp";
  whatsappIcon.className = "whatsapp-icon";
  whatsappIcon.setAttribute("loading", "lazy");

  // النافذة المنبثقة
  const whatsappPopup = document.createElement("div");
  whatsappPopup.className = "whatsapp-popup";
  whatsappPopup.style.display = "none";
  whatsappPopup.innerHTML = `
    <div class="popup-header">
      <div class="avatar-container">
        <img src="https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/mYZKa/rPFMS6wp27OUIYhmQJEMtpnE2jHceuLS7XhskuNf.png" alt="Avatar" class="avatar-img" loading="lazy">
        <span class="support-text">الدعم الفني</span>
      </div>
      <button class="close-popup">×</button>
    </div>
    <div class="chat-body" id="chat-body"></div>
    <div class="chat-footer">
      <input type="text" id="whatsapp-message" placeholder="اكتب رسالتك هنا" class="chat-input">
      <button id="send-whatsapp" class="whatsapp-button">
        <svg xmlns="http://www.w3.org/2000/svg" fill="white" width="24px" height="24px" viewBox="0 0 24 24">
          <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
        </svg>
      </button>
    </div>
  `;

  // تجميع العناصر
  whatsappFloat.appendChild(whatsappPopup);
  whatsappFloat.appendChild(whatsappIcon);
  document.body.appendChild(whatsappFloat);

  // ستايلات الواتساب
  const whatsappStyle = document.createElement("style");
  whatsappStyle.textContent = `
    .whatsapp-float { position: fixed; bottom: 20px; left: 20px; z-index: 10000; }
    .whatsapp-icon { width: 80px; height: 80px; cursor: pointer; transition: transform 0.3s; }
    .whatsapp-icon:hover { transform: scale(1.1); }
    .whatsapp-popup { position: fixed; bottom: 100px; left: 20px; width: 300px; background: #142c44; border-radius: 8px; box-shadow: 0 4px 12px white; z-index: 10001; overflow: hidden; }
    .popup-header { display: flex; justify-content: space-between; align-items: center; background-color: black; color: white; padding: 10px; }
    .avatar-container { display: flex; align-items: center; }
    .avatar-img { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; }
    .support-text { font-size: 16px; font-weight: bold; }
    .close-popup { background: none; border: none; font-size: 20px; color: white; cursor: pointer; }
    .chat-body { max-height: 300px; overflow-y: auto; padding: 10px; background-color: #e5ddd5; }
    .chat-message { margin-bottom: 10px; }
    .chat-message.sent { text-align: right; }
    .chat-message p { display: inline-block; background: #dcf8c6; padding: 10px; border-radius: 10px; max-width: 80%;color:white; }
    .chat-footer { display: flex; align-items: center; padding: 10px; background: white; border-top: 1px solid #ccc; }
    .chat-input { flex: 1; padding: 10px; border-radius: 20px; border: 1px solid #ccc; }
    .whatsapp-button { background: black; color: white; border: none; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; margin-left: 10px; cursor: pointer; }
  `;
  document.head.appendChild(whatsappStyle);

  // فتح / إغلاق المحادثة
  whatsappIcon.addEventListener("click", () => {
    whatsappPopup.style.display = whatsappPopup.style.display === "none" ? "block" : "none";
    if (whatsappPopup.style.display === "block") {
      const chatBody = document.getElementById("chat-body");
      chatBody.innerHTML = `
        <div class="chat-message"><p>أهلاً بك! نحن هنا لمساعدتك<br>لو تحتاج ترشيح منتج أرسل رقم "1"</p></div>
      `;
    }
  });

  document.querySelector(".close-popup").addEventListener("click", () => {
    whatsappPopup.style.display = "none";
  });

  // الردود الآلية
  function getReply(message) {
    const m = message.toLowerCase().trim();
    if (m === "1") return "form"; // افتح النموذج
    if (m.includes("السلام")) return "وعليكم السلام! كيف يمكنني مساعدتك؟";
    if (m.includes("مرحبا")) return "مرحبًا! كيف أقدر أساعدك؟";
    return "شكراً لتواصلك! سيتم توجيهك للدعم الفني.";
  }

  // إرسال رسالة
  function sendMessage() {
    const input = document.getElementById("whatsapp-message");
    const msg = input.value.trim();
    if (!msg) return;

    const chatBody = document.getElementById("chat-body");
    chatBody.innerHTML += `<div class="chat-message sent"><p>${msg}</p></div>`;
    input.value = "";

    setTimeout(() => {
      const reply = getReply(msg);
      if (reply === "form") {
        showProductForm();
      } else {
        chatBody.innerHTML += `<div class="chat-message"><p>${reply}</p></div>`;
        setTimeout(() => {
          window.location.href = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(msg)}`;
        }, 2000);
      }
    }, 1000);
  }

  document.getElementById("send-whatsapp").addEventListener("click", sendMessage);
  document.getElementById("whatsapp-message").addEventListener("keypress", e => {
    if (e.key === "Enter") sendMessage();
  });

  // نموذج ترشيح منتج
  function showProductForm() {
    const formDiv = document.createElement("div");
    formDiv.id = "product-details";
    formDiv.innerHTML = `
      <h3>أرغب بترشيح منتج</h3>
      <input type="text" id="productName" placeholder="اسم المنتج">
      <input type="text" id="customerName" placeholder="اسمك">
      <input type="text" id="productLink" placeholder="رابط المنتج (اختياري)">
      <div class="button-container">
        <button id="submitProductDetails">إرسال</button>
        <button id="cancelProductDetails">إلغاء</button>
      </div>
    `;
    formDiv.style.cssText = `
      position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
      background:#142c44;  padding: 20px; border-radius: 15px; z-index: 10002;
      box-shadow: 0 0 10px white; width: 320px;
    `;
    document.body.appendChild(formDiv);

    document.getElementById("cancelProductDetails").addEventListener("click", () => {
      formDiv.remove();
    });

    document.getElementById("submitProductDetails").addEventListener("click", () => {
      const name = document.getElementById("customerName").value.trim();
      const prod = document.getElementById("productName").value.trim();
      const link = document.getElementById("productLink").value.trim();

      if (name && prod) {
        const message = `السلام عليكم، أود ترشيح منتج:\nالاسم: ${name}\nالمنتج: ${prod}\nالرابط: ${link || "غير متوفر"}`;
        window.location.href = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(message)}`;
        formDiv.remove();
      } else {
        alert("يرجى ملء الحقول المطلوبة.");
      }
    });
  }
});