/* Add custom Js styles below */ 
/* Add custom Js styles below */ 
/* Add custom Js styles below */ 
/* Add custom Js styles below */ 
/* Add custom Js styles below */ 
/* Add custom Js styles below */ 
/* Add custom Js styles below */ 
/* Add custom Js styles below */ 
/* Add custom Js styles below */ 


// ===================== اضافة فيديو للصفحة =====================
const SECTION_POSITION = 12; //
const VIDEO_SRC = "https://files.catbox.moe/a4p05y.mp4"; // 
const VIDEO_LINK = "#"; // رابط عند الضغط
// ====================================================

(function() {
  if (!document.body.classList.contains("index")) return;

  const style = document.createElement("style");
  style.textContent = `
    .custom-video-banner {
      font-size: 16px;
      margin: 30px 0;
    }
    .custom-video-banner .container {
      font-size: 16px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .custom-video-banner .banner {
      display: block;
      overflow: hidden;
      border-radius: 12px;
      box-shadow: none;
    }
    .custom-video-banner video {
      width: auto;
      height: auto;
      display: block;
      border-radius: 12px;
      object-fit: cover;
      margin: 0 auto;
    }

    @media (max-width: 768px) {
      .custom-video-banner {
        font-size: 14px;
        margin: 20px 0;
      }
      .custom-video-banner .container {
        padding: 0 10px;
      }
      .custom-video-banner video {
        width: 100%;
        height: auto;
      }
    }
  `;
  document.head.appendChild(style);

  const section = document.createElement("section");
  section.className = "custom-video-banner s-block s-block--fixed-banner wide-placeholder appear";
  section.innerHTML = `
    <div class="container">
      <a href="${VIDEO_LINK}" class="banner banner--fixed" aria-label="Video Banner">
        <video autoplay muted loop playsinline playsInline webkit-playsinline>
          <source src="${VIDEO_SRC}" type="video/mp4">
          متصفحك لا يدعم تشغيل الفيديو
        </video>
      </a>
    </div>
  `;

  const sections = document.querySelectorAll("section");
  if (sections.length >= SECTION_POSITION) {
    sections[SECTION_POSITION - 1].insertAdjacentElement("afterend", section);
  } else {
    // fallback -> لو مفيش سكشن كفاية نحطه آخر الصفحة
    document.body.appendChild(section);
  }

  const video = section.querySelector("video");
  if (video) {
    video.muted = true;
    video.setAttribute("playsinline", "");
    video.setAttribute("webkit-playsinline", "");
    video.play().catch(err => {
      console.log("Autoplay blocked:", err);
    });
  }
})();



//////////////////////* stars*/////////////////////


function addStarsOnly() {
  const cards = document.querySelectorAll('.s-product-card-entry');
  if (cards.length === 0) return;

  cards.forEach((card) => {
    if (card.querySelector('.product-rating')) return;

    // ⭐ تقييم النجوم
    const stars = document.createElement('div');
    stars.className = 'product-rating';
    const rating = Math.floor(Math.random() * 2) + 4; 
    for (let i = 0; i < 5; i++) {
      const star = document.createElement('span');
      star.innerHTML = i < rating ? '★' : '☆';
      stars.appendChild(star);
    }

    stars.style.color = '#FFD700';
    stars.style.fontSize = '18px';
    stars.style.margin = '6px 0';

    card.querySelector('.s-product-card-content-main')?.appendChild(stars);
  });
}

// تنفيذ الكود بعد تحميل الصفحة أو ظهور العناصر
let starTryCount = 0;
const starInterval = setInterval(() => {
  addStarsOnly();
  starTryCount++;
  if (starTryCount > 10) clearInterval(starInterval);
}, 1000);


//////////////////////* stars*/////////////////////




////////////////////////faq*///////////////////

document.addEventListener("DOMContentLoaded", () => {
  // ====== جلب الألوان من :root ======
  const rootStyles = getComputedStyle(document.documentElement);
  const mainColor = rootStyles.getPropertyValue("--main-color").trim();
  const secondColor = rootStyles.getPropertyValue("--second-color").trim();

  // ====== زر "اسأل" العائم ======
  const askBtn = document.createElement("div");
  askBtn.innerText =" الأسئلة الشائعة 💬";
  Object.assign(askBtn.style, {
    position: "fixed",
    bottom: "100px",
    left: "20px",
    background: mainColor,
    color: "#fff",
    padding: "12px 18px",
    borderRadius: "30px",
    cursor: "pointer",
    fontWeight: "bold",
    fontSize: "16px",
    boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
    backdropFilter: "blur(4px)",
    transition: "background 0.3s",
    zIndex: "1001",
  });
  askBtn.addEventListener("mouseenter", () => {
    askBtn.style.background = mainColor;
  });secondColor
  askBtn.addEventListener("mouseleave", () => {
    askBtn.style.background = mainColor;
  });

  // ====== Overlay ======
  const overlay = document.createElement("div");
  Object.assign(overlay.style, {
    position: "fixed",
    top: "0",
    left: "0",
    width: "100%",
    height: "100%",
    background: "rgba(0,0,0,0.4)",
    backdropFilter: "blur(3px)",
    display: "none",
    zIndex: "1000",
  });

  // ====== صندوق الأسئلة ======
  const faqBox = document.createElement("div");
  Object.assign(faqBox.style, {
    position: "fixed",
    bottom: "160px",
    left: "20px",
    width: "320px",
    background: "rgba(215, 196, 182, 0.95)", 
    borderRadius: "16px",
    boxShadow: "0 8px 25px rgba(0,0,0,0.35)",
    display: "none",
    flexDirection: "column",
    fontFamily: "Tahoma, sans-serif",
    zIndex: "1002",
    overflow: "hidden",
    backdropFilter: "blur(8px)",
  });

  // ====== الهيدر ======
  const header = document.createElement("div");
  header.innerText = "💬 الأسئلة الشائعة";
  Object.assign(header.style, {
    background: mainColor,
    color: "#fff",
    padding: "12px",
    fontSize: "18px",
    fontWeight: "bold",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    boxShadow: "0 2px 6px rgba(0,0,0,0.2)",
  });

  const closeBtn = document.createElement("span");
  closeBtn.innerText = "❌";
  Object.assign(closeBtn.style, {
    cursor: "pointer",
    fontSize: "16px",
  });
  header.appendChild(closeBtn);

  faqBox.appendChild(header);

  // ====== محتوى الأسئلة ======
  const faqContent = document.createElement("div");
  Object.assign(faqContent.style, {
    padding: "10px",
    maxHeight: "300px",
    overflowY: "auto",
  });

  const faqData = [
    {
      question: "ما هي خيارات الدفع المتوفرة؟",
      answer: "يمكنك الدفع باستخدام مدى، البطاقات الائتمانية، Apple Pay، Stc Pay.",
    },
    {
      question: "كم يستغرق توصيل الطلب؟",
      answer: "عادةً ما يتم توصيل الطلبات خلال 7 - 14 يوم عمل.",
    },
    {
      question: "هل يمكنني استرجاع المنتجات؟",
      answer: "نعم، يمكنك استرجاع المنتجات خلال 7 أيام من استلامها وفقًا لسياسة الإرجاع.",
    },
  ];

  faqData.forEach(({ question, answer }) => {
    const qBtn = document.createElement("div");
    qBtn.innerText = question;
    Object.assign(qBtn.style, {
      padding: "10px",
      margin: "5px 0",
      background: mainColor,
      color: "#fff",
      borderRadius: "8px",
      cursor: "pointer",
      fontWeight: "bold",
      boxShadow: "0 2px 6px rgba(0,0,0,0.2)",
      transition: "background 0.3s",
    });

    qBtn.addEventListener("mouseenter", () => {
      qBtn.style.background = mainColor;
    });
    qBtn.addEventListener("mouseleave", () => {
      qBtn.style.background = mainColor;
    });

    const ans = document.createElement("div");
    ans.innerText = answer;
    Object.assign(ans.style, {
      display: "none",
      padding: "8px",
      fontSize: "14px",
      color: mainColor,
      background: "#fff",
      borderRadius: "6px",
      marginTop: "5px",
      boxShadow: "inset 0 1px 4px rgba(0,0,0,0.1)",
    });

    qBtn.addEventListener("click", () => {
      ans.style.display = ans.style.display === "none" ? "block" : "none";
    });

    faqContent.appendChild(qBtn);
    faqContent.appendChild(ans);
  });

  faqBox.appendChild(faqContent);

  // ====== ربط العناصر ======
  document.body.appendChild(overlay);
  document.body.appendChild(askBtn);
  document.body.appendChild(faqBox);

  // ====== إظهار/إخفاء ======
  askBtn.addEventListener("click", () => {
    overlay.style.display = "block";
    faqBox.style.display = "flex";
  });

  closeBtn.addEventListener("click", () => {
    overlay.style.display = "none";
    faqBox.style.display = "none";
  });

  overlay.addEventListener("click", () => {
    overlay.style.display = "none";
    faqBox.style.display = "none";
  });
});

////////////////////////faq*///////////////////

document.addEventListener("DOMContentLoaded", () => {
  // إنشاء سكشن
  const section = document.createElement("section");
  section.style.textAlign = "center";
  section.style.padding = "3rem 1rem";
  section.style.fontFamily = "Cairo, sans-serif";
  section.style.backgroundColor = "#f9f9f9";

  // العنوان
  const title = document.createElement("h2");
  title.innerText = "لماذا تختارنا؟";
  Object.assign(title.style, {
    color: "#213655",
    fontSize: "1.8rem",
    marginBottom: "2rem",
  });
  section.appendChild(title);

  // الحاوية الرئيسية
  const container = document.createElement("div");
  Object.assign(container.style, {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    flexWrap: "wrap",
    gap: "1rem",
  });
  section.appendChild(container);

  // البيانات
  const data = [
    { icon: "💬", text: "دعم فني 24/7" },
    { icon: "🚚", text: "350 طلب مكتمل" },
    { icon: "👍", text: "300 عميل سعيد" },
  ];

  // دالة لتحديد حجم البطاقة حسب حجم الشاشة
  function getCardSize() {
    if (window.innerWidth <= 480) {
      // موبايل
      return { width: "110px", height: "100px", fontSize: "0.8rem", iconSize: "1.6rem" };
    } else if (window.innerWidth <= 768) {
      // تابلت
      return { width: "130px", height: "110px", fontSize: "0.9rem", iconSize: "1.8rem" };
    } else {
      // كمبيوتر
      return { width: "140px", height: "120px", fontSize: "0.9rem", iconSize: "1.8rem" };
    }
  }

  // إنشاء البطاقات
  data.forEach((item) => {
    const size = getCardSize();

    const card = document.createElement("div");
    Object.assign(card.style, {
      width: size.width,
      height: size.height,
      background: "#fff",
      borderRadius: "12px",
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
      boxShadow: "0 6px 15px rgba(0,0,0,0.1)",
      transition: "transform 0.3s ease, box-shadow 0.3s ease",
    });

    // تأثير عند المرور بالماوس
    card.addEventListener("mouseenter", () => {
      card.style.transform = "translateY(-6px)";
      card.style.boxShadow = "0 10px 20px rgba(0,0,0,0.15)";
    });
    card.addEventListener("mouseleave", () => {
      card.style.transform = "translateY(0)";
      card.style.boxShadow = "0 6px 15px rgba(0,0,0,0.1)";
    });

    // الأيقونة
    const icon = document.createElement("div");
    icon.innerText = item.icon;
    icon.style.fontSize = size.iconSize;
    icon.style.marginBottom = "0.4rem";

    // النص
    const text = document.createElement("p");
    text.innerText = item.text;
    text.style.fontSize = size.fontSize;
    text.style.color = "#213655";
    text.style.margin = "0";

    card.appendChild(icon);
    card.appendChild(text);
    container.appendChild(card);
  });

  // تحديث الحجم عند تغيير عرض الشاشة
  window.addEventListener("resize", () => {
    const cards = container.querySelectorAll("div");
    cards.forEach((card, index) => {
      const size = getCardSize();
      card.style.width = size.width;
      card.style.height = size.height;
      card.querySelector("div").style.fontSize = size.iconSize;
      card.querySelector("p").style.fontSize = size.fontSize;
    });
  });

  // إدراج قبل الفوتر
  const footer = document.querySelector("footer");
  if (footer) {
    footer.parentNode.insertBefore(section, footer);
  } else {
    document.body.appendChild(section);
  }
});






const whatsappNumber = "+966531635114";

// Throttle function لتقليل تكرار تنفيذ الأحداث
function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

document.addEventListener("DOMContentLoaded", function () {
  // إزالة النص البديل (alt) من صورة الشعار
  const imgElement = document.querySelector(".navbar-brand img");
  if (imgElement) imgElement.removeAttribute("alt");

  // تغيير نصوص جهات الاتصال
  setTimeout(() => {
    const whats = document.querySelector(
      ".s-contacts-list-vertical > div:nth-of-type(1) a > span:nth-of-type(2)"
    );
    
    if (mobile) mobile.textContent = "جوال";

    const email = document.querySelector(
      ".s-contacts-list-vertical > div:nth-of-type(3) a > span:nth-of-type(2)"
    );
    if (whats) whats.textContent = "واتساب";

    const mobile = document.querySelector(
      ".s-contacts-list-vertical > div:nth-of-type(2) a > span:nth-of-type(2)"
    );
    if (email) email.textContent = "ايميل";

    // تحسين أنماط جهات الاتصال
    const contactsList = document.querySelector(".s-contacts-list-vertical");
    if (contactsList) {
      Object.assign(contactsList.style, {
        flexDirection: "row",
        justifyContent: "center",
        gap: "20px",
        alignItems: "center",
      });
    }

    const contactSlot = document.querySelector("#contact-slot");
    if (contactSlot) {
      Object.assign(contactSlot.style, {
        backgroundColor: "transparent",
        padding: "20px",
        borderRadius: ".375rem",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      });
    }

    const contactItems = document.querySelectorAll(".s-contacts-item");
    contactItems.forEach((item) => {
      Object.assign(item.style, {
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        gap: "10px",
      });
    });

    const contactIcons = document.querySelectorAll(".s-contacts-icon");
    contactIcons.forEach((icon) => {
      Object.assign(icon.style, {
        marginRight: "auto",
        marginLeft: "auto",
        border: "none",
        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
        transform: "perspective(500px) rotateY(10deg)",
        transition: "transform 0.3s, box-shadow 0.3s",
        width: "50px",
        height: "50px",
        borderRadius: "50%",
        backgroundColor: "#EEEEEE",
      });

      icon.addEventListener("mouseover", () => {
        Object.assign(icon.style, {
          transform: "perspective(500px) rotateY(20deg)",
          boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
        });
      });

      icon.addEventListener("mouseout", () => {
        Object.assign(icon.style, {
          transform: "perspective(500px) rotateY(10deg)",
          boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
        });
      });
    });
  }, 1000);

  // إصلاح صور طرق الدفع
  const paymentImages = document.querySelectorAll(".s-payments-list img.lazy");
  const fallbackImages = [
    "https://i.postimg.cc/m2n1HWj3/Mada-Logo-svg.png",
    "https://i.postimg.cc/Dy4yRJQs/Visa-Logo-2006.png",
    "https://i.postimg.cc/52q1MwXH/apple-pay-og-twitter.jpg",
    "https://saudipedia.com/saudipedia/uploads/images/2023/12/14/84660.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Google_Pay_Logo.svg/640px-Google_Pay_Logo.svg.png",
    "https://example.com/path/to/cod-image.png",
  ];

  paymentImages.forEach((img, index) => {
    if (img.src === "undefined" || img.classList.contains("error")) {
      img.src = fallbackImages[index] || fallbackImages[0];
      img.setAttribute("loading", "lazy");
      img.classList.remove("error");
      img.setAttribute("data-ll-status", "loaded");
    }
  });

  const invalidImages = document.querySelectorAll(
    '.s-payments-list img[src="undefined"]'
  );
  invalidImages.forEach((img) => img.remove());
});


// إضافة أيقونة التمرير للأعلى
const scrollIcon = document.createElement("div");
scrollIcon.id = "scroll-icon";
Object.assign(scrollIcon.style, {
  position: "fixed",
  bottom: "100px",
  right: "23px",
  width: "50px",
  height: "50px",
  display: "none",
  alignItems: "center",
  justifyContent: "center",
  cursor: "pointer",
  zIndex: "1000",
});

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", "0 0 36 36");
Object.assign(svg.style, {
  width: "100%",
  height: "100%",
  transform: "rotate(-90deg)",
});

const circleBg = document.createElementNS("http://www.w3.org/2000/svg", "path");
circleBg.setAttribute(
  "d",
  "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
);
Object.assign(circleBg.style, {
  fill: "none",
  stroke: "#000",
  strokeWidth: "3.8",
});

const circle = document.createElementNS("http://www.w3.org/2000/svg", "path");
circle.setAttribute(
  "d",
  "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
);
Object.assign(circle.style, {
  fill: "none",
  stroke: "#c8aa88",
  strokeWidth: "3.8",
  strokeLinecap: "round",
  transition: "stroke-dasharray 0.3s ease",
});

svg.appendChild(circleBg);
svg.appendChild(circle);

const arrow = document.createElement("div");
arrow.textContent = "↑";
Object.assign(arrow.style, {
  position: "absolute",
  fontSize: "22px",
  fontWeight: "bold",
  color: "#000",
  pointerEvents: "none",
});

scrollIcon.appendChild(svg);
scrollIcon.appendChild(arrow);
document.body.appendChild(scrollIcon);

window.addEventListener(
  "scroll",
  throttle(() => {
    const scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;
    const scrollHeight =
      document.documentElement.scrollHeight -
      document.documentElement.clientHeight;
    const scrollPercentage = (scrollTop / scrollHeight) * 100;
    circle.style.strokeDasharray = `${scrollPercentage}, 100`;
    scrollIcon.style.display = scrollTop > 300 ? "flex" : "none";
  }, 100)
);

scrollIcon.addEventListener("click", () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
});

// حفظ واستعادة موضع التمرير
window.addEventListener("beforeunload", () => {
  const currentPage = window.location.pathname;
  localStorage.setItem(`scrollPosition-${currentPage}`, window.scrollY);
});

window.addEventListener("load", () => {
  const currentPage = window.location.pathname;
  const scrollPosition = localStorage.getItem(`scrollPosition-${currentPage}`);
  if (scrollPosition) window.scrollTo(0, scrollPosition);
});

// إضافة واتساب عائم
const whatsappFloat = document.createElement("div");
whatsappFloat.className = "whatsapp-float";

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://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg" 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" viewBox="0 0 24 24" fill="white" width="24px" height="24px">
        <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
      </svg>
    </button>
  </div>`;

whatsappFloat.appendChild(whatsappPopup);

const whatsappIcon = document.createElement("img");
whatsappIcon.src =
  "https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg";
whatsappIcon.alt = "WhatsApp";
whatsappIcon.className = "whatsapp-icon";
whatsappIcon.setAttribute("loading", "lazy");
whatsappFloat.appendChild(whatsappIcon);
document.body.appendChild(whatsappFloat);

// إضافة النمط
const style = document.createElement("style");
style.innerHTML = `
.whatsapp-float { position: fixed; bottom: 20px; left: 20px; z-index: 100; }
.whatsapp-icon { width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); cursor: pointer; transition: transform 0.3s ease-in-out; }
.whatsapp-icon:hover { transform: scale(1.1); }
.whatsapp-popup { position: fixed; bottom: 90px; left: 20px; width: 300px; background-color: #f0f0f0; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 0; z-index: 101; display: flex; flex-direction: column; overflow: hidden; }
.popup-header { display: flex; justify-content: space-between; align-items: center; background-color: var(--color-primary); 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 { flex-grow: 1; padding: 10px; background-color: #e5ddd5; overflow-y: auto; max-height: 300px; }
.chat-message { margin-bottom: 10px; display: flex; }
.chat-message.sent { justify-content: flex-end; }
.chat-message p { max-width: 70%; padding: 10px; border-radius: 10px; background-color: #dcf8c6; margin: 0; }
.chat-footer { display: flex; align-items: center; padding: 10px; background-color: white; border-top: 1px solid #ccc; }
.chat-input { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 20px; margin-right: 10px; width: 87%; }
.whatsapp-button { background-color: var(--color-primary); color: white; padding: 5px; border-radius: 50%; border: none; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease-in-out; margin-right: 4px; }
.whatsapp-button:hover { transform: scale(1.1); }
#product-details { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 350px; background: #ffffff; padding: 25px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); z-index: 102; display: none; font-family: 'Arial', sans-serif; border: 1px solid #eee; }
#product-details.show { display: block; }
#product-details h3 { margin: 0 0 20px; font-size: 22px; color: #333; text-align: center; font-weight: bold; }
#product-details input, #product-details textarea, #product-details input[type="file"] { width: 100%; margin: 10px 0; padding: 12px; border: 1px solid #e0e0e0; border-radius: 10px; font-size: 14px; background-color: #f9f9f9; transition: border-color 0.3s ease, box-shadow 0.3s ease; box-sizing: border-box; }
#product-details input:focus, #product-details textarea:focus, #product-details input[type="file"]:focus { border-color: #25D366; box-shadow: 0 0 6px rgba(37, 211, 102, 0.2); outline: none; }
#product-details textarea { resize: none; height: 80px; }
#product-details input[type="file"] { padding: 10px; background-color: #fff; cursor: pointer; }
#product-details .button-container { display: flex; justify-content: space-between; margin-top: 15px; }
#product-details button { width: 48%; padding: 12px; border: none; border-radius: 10px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; }
#submitProductDetails { background-color: #25D366; color: white; }
#submitProductDetails:hover { background-color: #20b858; transform: translateY(-2px); }
#cancelProductDetails { background-color: #ff4444; color: white; }
#cancelProductDetails:hover { background-color: #e03e3e; transform: translateY(-2px); }
@media (max-width: 480px) { #product-details { width: 300px; padding: 15px; } #product-details h3 { font-size: 18px; margin-bottom: 12px; } #product-details input, #product-details textarea, #product-details input[type="file"] { padding: 8px; font-size: 12px; margin: 6px 0; } #product-details textarea { height: 50px; } #product-details button { padding: 8px; font-size: 13px; } }
.active .payment-icons{
  opacity: 1;
}
`;
document.head.appendChild(style);

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"<br>وفي حال أردت شيئاً آخر أرسل لنا وراح نساعدك بإذن الله</p></div>';
    chatBody.scrollTop = chatBody.scrollHeight;
  }
});

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

function getReply(message) {
  message = message.toLowerCase().trim();
  if (message === "1") {
    showProductForm();
    return null;
  } else if (message.includes("السلام عليكم")) {
    return "وعليكم السلام ورحمة الله وبركاته! كيف يمكنني مساعدتك اليوم؟ 🤗";
  } else if (message.includes("مرحبا")) {
    return "مرحبًا بك! 🌟 كيف يمكنني أن أكون في خدمتك؟";
  }
  return "شكرًا لرسالتك! سأقوم بتوجيهك إلى الدعم الفني.";
}

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

function sendMessage() {
  const message = document.getElementById("whatsapp-message").value.trim();
  if (!message) {
    alert("يرجى كتابة رسالة قبل الإرسال.");
    return;
  }

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

  chatBody.innerHTML += '<div class="chat-message"><p>...</p></div>';
  chatBody.scrollTop = chatBody.scrollHeight;

  setTimeout(() => {
    chatBody.lastChild.remove();
    const reply = getReply(message);
    if (reply) {
      chatBody.innerHTML += `<div class="chat-message"><p>${reply}</p></div>`;
      chatBody.scrollTop = chatBody.scrollHeight;
      if (message !== "1") {
        setTimeout(() => {
          whatsappPopup.style.display = "none";
          chatBody.innerHTML = "";
          window.location.href = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(
            message
          )}`;
        }, 2000);
      }
    }
  }, 1000);
}

function showProductForm() {
  whatsappPopup.style.display = "none";
  const productDetails = document.createElement("div");
  productDetails.id = "product-details";
  productDetails.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>
  `;
  document.body.appendChild(productDetails);
  productDetails.classList.add("show");

  document
    .getElementById("cancelProductDetails")
    .addEventListener("click", () => {
      productDetails.classList.remove("show");
      document.body.removeChild(productDetails);
      whatsappPopup.style.display = "block";
    });

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

      if (productName && customerName) {
        const message = `السلام عليكم، أنا أبحث عن منتج بهذه المواصفات\nاسم المنتج: ${productName}\nاسم العميل: ${customerName}\nرابط المنتج: ${
          productLink || "غير متوفر"
        }`;
        window.location.href = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(
          message
        )}`;
        productDetails.classList.remove("show");
        document.body.removeChild(productDetails);
      } else {
        alert("يرجى إدخال اسم المنتج واسمك للمتابعة.");
      }
    });
}

// إضافة رسالة تنبيه لاختيار خيارات المنتج
const sallaProductOptions = document.querySelector("salla-product-options");
if (sallaProductOptions) {
  const alertMessage = document.createElement("p");
  alertMessage.textContent =
    "الرجاء اختيار أحد هذا الاختيارات للتمكن من اتمام الشراء";
  Object.assign(alertMessage.style, {
    backgroundColor: "#ffdddd",
    color: "#a94442",
    padding: "15px",
    border: "1px solid #a94442",
    borderRadius: "5px",
    marginBottom: "10px",
    fontWeight: "bold",
    textAlign: "center",
  });
  sallaProductOptions.insertBefore(
    alertMessage,
    sallaProductOptions.firstChild
  );
}

setTimeout(() => {
  const mada = document.querySelector(
    ".s-payments-list > li:first-of-type > img"
  );
  if (mada) mada.src = "https://i.postimg.cc/m2n1HWj3/Mada-Logo-svg.png";

  const visa = document.querySelector(
    ".s-payments-list > li:nth-of-type(2) > img"
  );
  if (visa) visa.src = "https://i.postimg.cc/Dy4yRJQs/Visa-Logo-2006.png";

  const pay = document.querySelector(
    ".s-payments-list > li:nth-of-type(3) > img"
  );
  if (pay) pay.src = "https://i.postimg.cc/52q1MwXH/apple-pay-og-twitter.jpg";

  const googlePay = document.querySelector(
    ".s-payments-list > li:nth-of-type(4) > img"
  );
  if (googlePay)
    googlePay.src =
      "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Google_Pay_Logo.svg/768px-Google_Pay_Logo.svg.png";

  const stcPay = document.querySelector(
    ".s-payments-list > li:nth-of-type(5) > img"
  );
  if (stcPay)
    stcPay.src = "https://stcpay.com.sa/wp-content/uploads/2024/01/logo-2.svg";
}, 1000);

document.addEventListener("DOMContentLoaded", () => {
  const style = document.createElement("style");
  style.textContent = `
    .s-block { opacity: 0; transform: translateY(30px) scale(0.95); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); will-change: opacity, transform; }
    .s-block.appear { opacity: 1; transform: translateY(0) scale(1); }
  `;
  document.head.appendChild(style);

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) entry.target.classList.add("appear");
        else {
          entry.target.classList.remove("appear");
          entry.target.style.animation = "none";
          entry.target.offsetHeight;
          entry.target.style.animation = "";
        }
      });
    },
    { threshold: 0.1 }
  );

  document.querySelectorAll(".s-block").forEach((el) => observer.observe(el));

  const blockObserver = new MutationObserver(() => {
    document
      .querySelectorAll(".s-block:not(.appear)")
      .forEach((el) => observer.observe(el));
  });
  blockObserver.observe(document.body, { childList: true, subtree: true });
});

document.addEventListener("DOMContentLoaded", () => {
  const style = document.createElement("style");
  style.innerHTML = `
    .features-section { background: transparent; padding: 20px 20px; max-width: 90%; margin: 40px auto; text-align: center; width: 100%; }
    .features-section h2 { font-size: 2em; margin-bottom: 20px; color: #9a696c; }
    .features-container { display: flex; align-items: center; justify-content: center; gap: 20px; }
    @media(max-width: 991px) { .features-container { flex-direction: column; } }
    .feature { background: #c8aa88; color: white; padding: 20px; border-radius: 10px; width: 300px; font-size: 16px; font-weight: bold; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: center; position: relative; overflow: hidden; cursor: pointer; overflow: visible; }
    .feature-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--1); color: white; display: flex; align-items: center; justify-content: center; border-radius: 10px; opacity: 0; transform: scale(0.8); transition: opacity 0.3s ease, transform 0.3s ease; }
    .feature:hover .feature-hover { opacity: 1; transform: scale(1); }
    .payment-icons { display: flex; justify-content: center; gap: 15px; margin-top: 15px; opacity: 0; transition: opacity 0.3s ease; position: absolute; top: 60px; left: 0; }
    .payment-icons img { width: 50px; height: 50px; border-radius: 20%; background: white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 5px; }
    .payment-icons img:hover { transform: translateY(-7px); }
    .feature.active .payment-icons { opacity: 1; }
  `;
  document.head.appendChild(style);



  const section = document.createElement("section");
  section.className = "features-section";
  section.innerHTML = `
    <h2>مميزات المتجر</h2>
    <div class="features-container">
      <div class="feature">🎧 دعم متواصل<div class="feature-hover">💬 دعم فني على مدار الأسبوع</div></div>
      <div class="feature">🚀 شحن سريع<div class="feature-hover">🚚 شحن سريع لكل أنحاء المملكة</div></div>
      <div class="feature">💳 تمتع بخدمات دفع متعددة<div class="feature-hover">💸 طرق دفع متنوعة</div>
        <div class="payment-icons">
          <img src="https://cdn.salla.network/images/payment/google_pay_mini.png" loading="lazy">
          <img src="https://cdn.salla.network/images/payment/apple_pay_mini.png" loading="lazy">
          <img src="https://cdn.salla.network/images/payment/stc_pay_mini.png" loading="lazy">
          <img src="https://cdn.salla.network/images/payment/credit_card_mini.png" loading="lazy">
          <img src="https://cdn.salla.network/images/payment/mada_mini.png" loading="lazy">
        </div>
      </div>
    </div>
  `;

  const footer = document.querySelector(".index footer");
  if (footer && footer.parentNode)
    footer.parentNode.insertBefore(section, footer);
  else document.body.appendChild(section);

  document.querySelectorAll(".feature")[2].addEventListener("click", (e) => {
    e.target.classList.toggle("active");
  });
});

document.addEventListener("DOMContentLoaded", () => {
  const style = document.createElement("style");
  style.innerHTML = `
    .popup-image { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: auto; display: none; z-index: 1000; background: white; padding: 10px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
  `;
  document.head.appendChild(style);

  const features = document.querySelectorAll(".feature");
  if (features.length > 1) {
    features[1].addEventListener("click", () => {
      popupImage.style.display = "block";
      setTimeout(() => (popupImage.style.display = "none"), 3000);
    });
    features[0].addEventListener("click", () => {
      popupImage.style.display = "block";
      setTimeout(() => (popupImage.style.display = "none"), 3000);
    });
  }
});


//-----------
//*******************
document.addEventListener("DOMContentLoaded", () => {
  // Add Font Awesome if not present
  if (!document.querySelector('script[src*="fontawesome"]')) {
    const fontAwesomeLink = document.createElement("link");
    fontAwesomeLink.rel = "stylesheet";
    fontAwesomeLink.href =
      "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css";
    fontAwesomeLink.integrity =
      "sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==";
    fontAwesomeLink.crossOrigin = "anonymous";
    document.head.appendChild(fontAwesomeLink);
  }

  // Create stats section
  const statsSection = document.createElement("section");
  statsSection.className = "stats-section";
  statsSection.setAttribute("aria-label", "إحصائيات الخدمة");
  statsSection.innerHTML = `
    <h2>لماذا تختارنا؟</h2>
    <div class="stats-container">
      <div class="stat-item" data-count="5000" aria-label="عدد العملاء السعداء">
        <div class="icon-wrapper">
          <i class="fa-solid fa-users stat-icon"></i>
          <i class="fa-solid fa-user-friends stat-icon secondary-icon"></i>
        </div>
       
        <p>المصداقية</p>
      </div>
      <div class="stat-item" data-count="10000" aria-label="عدد الطلبات المكتملة">
        <div class="icon-wrapper">
          <i class="fa-solid fa-shopping-cart stat-icon"></i>
          <i class="fa-solid fa-box-open stat-icon secondary-icon"></i>
        </div>
        
        <p>رضا العميل</p>
      </div>
      <div class="stat-item" data-count="24" aria-label="ساعات الدعم الفني">
        <div class="icon-wrapper">
          <i class="fa-solid fa-headset stat-icon"></i>
          <i class="fa-solid fa-clock stat-icon secondary-icon"></i>
        </div>
        <span class="stat-number" aria-live="polite">0</span>
        <p>دعم فني 24/7</p>
      </div>
    </div>
  `;

  // Enhanced styles
  const style = document.createElement("style");
  style.textContent = `
    :root {
      --spacing-unit: clamp(20px, 3vw, 60px);
    }
    .stats-section {
      padding: var(--spacing-unit) 0;
      text-align: center;
      background: transparent;
      margin: 0;
      width: 100vw;
      min-height: 50vh;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      overflow: hidden;
      isolation: isolate;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .stats-section h2 {
      font-size: clamp(1.8rem, 4vw, 2.5rem);
      color: var(--1);
      margin-bottom: var(--spacing-unit);
      animation: fadeInDown 1s ease-in-out;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding: 0 20px;
    }
    .stats-container {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(15px, 2vw, 40px);
      padding: 0 var(--spacing-unit);
      justify-content: center;
      align-items: stretch;
      max-width: 1400px;
      margin: 0 auto;
    }
    .stat-item {
      background: #fff;
      padding: clamp(20px, 3vw, 30px);
      border-radius: 15px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      transition: all 0.4s ease;
      opacity: 0;
      transform: translateY(50px) scale(0.95);
      position: relative;
      overflow: hidden;
      flex: 1 1 calc(33.33% - clamp(10px, 1.5vw, 20px));
      min-width: 220px;
      max-width: 400px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .stat-item.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .stat-item:hover {
      transform: translateY(-15px) scale(1.02);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }
    .icon-wrapper {
      position: relative;
      height: clamp(50px, 6vw, 60px);
      width: clamp(50px, 6vw, 60px);
      margin: 0 auto 15px;
      transition: all 0.3s ease;
    }
    .stat-icon {
      font-size: clamp(2rem, 3vw, 2.5rem);
      color: var(--primary-color);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: transform 0.5s ease;
    }
    .secondary-icon {
      font-size: clamp(1.2rem, 2vw, 1.5rem);
      color: var(--secondary-color);
      opacity: 0.3;
      transform: translate(-50%, -50%) rotate(45deg);
      transition: all 0.5s ease;
    }
    .stat-item:hover .stat-icon {
      transform: translate(-50%, -50%) rotate(360deg) scale(1.2);
    }
    .stat-item:hover .secondary-icon {
      opacity: 0.8;
      transform: translate(-50%, -50%) rotate(0deg) scale(1.1);
    }
    .stat-number {
      font-size: clamp(2rem, 3.5vw, 2.5rem);
      font-weight: 700;
      color: var(--primary-color);
      display: block;
      margin: 10px 0;
      transition: color 0.3s ease;
    }
    .stat-item p {
      font-size: clamp(1rem, 1.5vw, 1.2rem);
      color: var(--secondary-color);
      margin: 0;
      font-weight: 500;
    }
    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    .stat-item::before {
      content: '';
      position: absolute;
      inset: -50%;
      background: radial-gradient(circle, rgba(46, 204, 113, 0.15) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.5s ease;
      pointer-events: none;
      z-index: -1;
    }
    .stat-item:hover::before {
      opacity: 1;
    }
    @media (max-width: 768px) {
      .stats-container {
        gap: clamp(10px, 1.5vw, 20px);
        padding: 0 15px;
      }
      .stat-item {
        flex: 1 1 calc(33.33% - clamp(5px, 1vw, 15px));
        min-width: 0;
        padding: 15px;
      }
    }
    @media (max-width: 480px) {
      .stat-item {
        flex: 1 1 calc(50% - clamp(5px, 1vw, 15px));
      }
    }
  `;
  document.head.appendChild(style);

  // Insert section before footer if exists
  const footer = document.querySelector(".index footer");
  if (footer) {
    footer.parentNode.insertBefore(statsSection, footer);
  } else {
    document.body.appendChild(statsSection);
  }

  // Intersection Observer for reveal effect
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry, index) => {
        if (entry.isIntersecting) {
          setTimeout(() => {
            entry.target.classList.add("visible");
            animateNumber(entry.target);
          }, index * 200);
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.3 }
  );

  document
    .querySelectorAll(".stat-item")
    .forEach((item) => observer.observe(item));

  // Enhanced number animation
  function animateNumber(item) {
    const target = parseInt(item.getAttribute("data-count"));
    const numberElement = item.querySelector(".stat-number");
    let current = 0;
    const duration = 2000;
    const increment = target / (duration / 20);

    const animation = setInterval(() => {
      current += increment;
      if (current >= target) {
        current = target;
        clearInterval(animation);
      }
      numberElement.textContent =
        Math.floor(current) + (target === 24 ? "/7" : "+");
      numberElement.style.animation = "pulse 0.5s ease-in-out";
    }, 20);

    numberElement.addEventListener(
      "animationend",
      () => {
        numberElement.style.animation = "";
      },
      { once: true }
    );
  }
});
//------------


// حماية الموقع
(function () {
  if (window.innerWidth > 991) {
    document.addEventListener("contextmenu", (e) => e.preventDefault());
    document.addEventListener("keydown", (e) => {
      if (
        e.key === "F12" ||
        (e.ctrlKey && e.shiftKey && (e.key === "I" || e.key === "J")) ||
        (e.ctrlKey && e.key === "U")
      ) {
        e.preventDefault();
        return false;
      }
    });

    const detectDevTools = () => {
      const threshold = 150;
      if (
        window.outerWidth - window.innerWidth > threshold ||
        window.outerHeight - window.innerHeight > threshold
      ) {
        console.log("DevTools detected");
      }
    };

    const detectDebugger = () => {
      const start = new Date().getTime();
      const end = new Date().getTime();
      if (end - start > 100) {
        console.log("Debugger detected");
      }
    };

    let detectionInterval;
    const startDetection = () => {
      detectionInterval = setInterval(() => {
        detectDevTools();
        detectDebugger();
      }, 500);
    };

    window.onload = () => {
      detectDevTools();
      detectDebugger();
      startDetection();
    };

    window.addEventListener("unload", () => clearInterval(detectionInterval));
  }
})();

document.addEventListener("DOMContentLoaded", () => {
  const sliderContainer = document.createElement("div");
  sliderContainer.innerHTML = `
    <section class="s-block">
      <div class="container">
        <div class="slider-wrapper">
          <div class="slider-title">آراء العملاء</div>
          <div class="review-container">
            <div class="review"><img src="https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp" alt="Customer" loading="lazy"><div class="stars">★★★★★</div><p>خدمة ممتازة جدًا! شكرًا لكم.</p><div class="name">محمد الحربي</div></div>
            <div class="review"><img src="https://cdn.salla.sa/form-builder/ZyVHHa7UyP76mOyYttTmTmN71ZNJxq8hbEgQGRYt.webp" alt="Customer" loading="lazy"><div class="stars">★★★★★</div><p>أفضل تجربة تعاملت معها، سريع جدًا!</p><div class="name">فاطمة حسن</div></div>
            <div class="review"><img src="https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp" alt="Customer" loading="lazy"><div class="stars">★★★★★</div><p>منتجات مميزة وخدمة سريعة، أكيد سأعيد التجربة!</p><div class="name">ماجد الخالدي</div></div>
            <div class="review"><img src="https://cdn.salla.sa/form-builder/ZyVHHa7UyP76mOyYttTmTmN71ZNJxq8hbEgQGRYt.webp" alt="Customer" loading="lazy"><div class="stars">★★★★★</div><p>المتجر يقدم خيارات متنوعة وجودة عالية جدًا.</p><div class="name">سارة البقمي</div></div>
            <div class="review"><img src="https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp" alt="Customer" loading="lazy"><div class="stars">★★★★★</div><p>تجربة شراء سلسة وتوصيل في الموعد، شكرًا!</p><div class="name">فهد العتيبي</div></div>
            <div class="review"><img src="https://cdn.salla.sa/form-builder/ZyVHHa7UyP76mOyYttTmTmN71ZNJxq8hbEgQGRYt.webp" alt="Customer" loading="lazy"><div class="stars">★★★★★</div><p>أعجبني الاهتمام بالتفاصيل، متجر رائع بكل المقاييس.</p><div class="name">نورة الحربي</div></div>
            <div class="review"><img src="https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp" alt="Customer" loading="lazy"><div class="stars">★★★★★</div><p>خدمة ممتازة والمنتجات تستحق كل ريال!</p><div class="name">تركي الشهري</div></div>
            <div class="review"><img src="https://cdn.salla.sa/form-builder/ZyVHHa7UyP76mOyYttTmTmN71ZNJxq8hbEgQGRYt.webp" alt="Customer" loading="lazy"><div class="stars">★★★★★</div><p>التعامل مع المتجر كان مريحًا وسهلاً، أنصح به.</p><div class="name">منى الغامدي</div></div>
            <div class="review"><img src="https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp" alt="Customer" loading="lazy"><div class="stars">★★★★★</div><p>الجودة ممتازة والشحن دائمًا في الوقت المحدد.</p><div class="name">ياسر القرني</div></div>
            <div class="review"><img src="https://cdn.salla.sa/form-builder/ZyVHHa7UyP76mOyYttTmTmN71ZNJxq8hbEgQGRYt.webp" alt="Customer" loading="lazy"><div class="stars">★★★★★</div><p>أفضل متجر تعاملت معه، كل شيء مثالي!</p><div class="name">شوق التميمي</div></div>
            <div class="review"><img src="https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp" alt="Customer" loading="lazy"><div class="stars">★★★★★</div><p>دعم فني متجاوب ومنتجات بجودة عالية.</p><div class="name">حسن النفيعي</div></div>
            <div class="review"><img src="https://cdn.salla.sa/form-builder/ZyVHHa7UyP76mOyYttTmTmN71ZNJxq8hbEgQGRYt.webp" alt="Customer" loading="lazy"><div class="stars">★★★★★</div><p>التغليف ممتاز والتوصيل سريع، تجربة رائعة!</p><div class="name">جواهر المالكي</div></div>
            <div class="review"><img src="https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp" alt="Customer" loading="lazy"><div class="stars">★★★★★</div><p>منتجات عالية الجودة، أنصح بها الجميع.</p><div class="name">خالد الغامدي</div></div>
            <div class="review"><img src="https://cdn.salla.sa/form-builder/ZyVHHa7UyP76mOyYttTmTmN71ZNJxq8hbEgQGRYt.webp" alt="Customer" loading="lazy"><div class="stars">★★★★★</div><p>متجر رائع وخدمة العملاء ممتازة.</p><div class="name">أميرة العتيبي</div></div>
            <div class="review"><img src="https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp" alt="Customer" loading="lazy"><div class="stars">★★★★★</div><p>الشحن سريع جدًا والجودة رائعة!</p><div class="name">علي يوسف</div></div>
          </div>
        </div>
      </div>
    </section>
  `;

  const footer = document.querySelector(".index footer");
  if (footer) footer.parentNode.insertBefore(sliderContainer, footer);
  else document.body.appendChild(sliderContainer);

  const container = sliderContainer.querySelector(".review-container");
  const reviews = container.querySelectorAll(".review");
  let index = 0;
  const reviewWidth = reviews[0].offsetWidth + 20;
  const visibleReviews = 3;
  let isDragging = false;
  let startX, touchStartX;
  let autoSlideInterval;

  function updateSlider() {
    container.style.transform = `translateX(${index * reviewWidth}px)`;
  }

  function nextSlide() {
    if (index > +(reviews.length - visibleReviews)) index--;
    else index = 0;
    updateSlider();
  }

  function startAutoSlide() {
    autoSlideInterval = setInterval(nextSlide, 4000);
  }

  function pauseAutoSlide() {
    clearInterval(autoSlideInterval);
    setTimeout(startAutoSlide, 15000);
  }

  startAutoSlide();

  container.addEventListener("mousedown", (e) => {
    isDragging = true;
    startX = e.clientX;
  });

  container.addEventListener(
    "mousemove",
    throttle((e) => {
      if (!isDragging) return;
      let moveX = e.clientX - startX;
      if (moveX > 50) {
        index++;
        updateSlider();
        isDragging = false;
        pauseAutoSlide();
      } else if (moveX < -50) {
        index--;
        updateSlider();
        isDragging = false;
        pauseAutoSlide();
      }
    }, 100)
  );

  container.addEventListener("mouseup", () => (isDragging = false));
  container.addEventListener("mouseleave", () => (isDragging = false));

  container.addEventListener("touchstart", (e) => {
    isDragging = true;
    touchStartX = e.touches[0].clientX;
  });

  container.addEventListener(
    "touchmove",
    throttle((e) => {
      if (!isDragging) return;
      let moveX = e.touches[0].clientX - touchStartX;
      if (moveX > 50) {
        index++;
        updateSlider();
        isDragging = false;
        pauseAutoSlide();
      } else if (moveX < -50) {
        index--;
        updateSlider();
        isDragging = false;
        pauseAutoSlide();
      }
    }, 100)
  );

  container.addEventListener("touchend", () => (isDragging = false));
  container.addEventListener("touchcancel", () => (isDragging = false));

  window.addEventListener("unload", () => clearInterval(autoSlideInterval));
});



//==========
function shortenProductTitles() {
  document.querySelectorAll('.s-product-card-content-title a').forEach(function(el) {
    const words = el.textContent.trim().split(/\s+/);
    if (words.length > 3) {
      el.textContent = words.slice(0, 3).join(' ') + '...';
    }
  });
}

const observer = new MutationObserver(function(mutationsList, observer) {
  shortenProductTitles(); // شغّل الكود كل ما يحصل تغيير
});

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

// ممكن كمان تشغله أول مرة
window.addEventListener('load', shortenProductTitles);
//============/* Add custom Js code below */

setInterval(() => {
    let button = document.querySelector('.s-infinite-scroll-btn');
    if (button) {
        button.click();
        
    } 
}, 1000);