// هذا الكود يمكن دمجه مع الأكواد الأخرى في ملف JS المخصص

const VIDEO_CONFIG = {
  VIDEO_SRC: "https://files.catbox.moe/xt5x5y.mp4", // رابط الفيديو
  WEBP_SRC: "https://files.catbox.moe/zgr4g8.webp", // صورة بديلة لأجهزة iOS
  VIDEO_LINK: "#",
  VIDEO_POSITION: 1, // رقم مكان الفيديو وسط الـ sections
};
// ====================================================

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

  function addVideoStyles() {
    const style = document.createElement("style");
    style.id = "custom-video-banner-styles";
    style.textContent = `
           .custom-video-banner {
              font-size: 16px;
              margin: 0;
              padding: 0;
              position: relative;
              z-index: 1;
           }
           .custom-video-banner .container {
              font-size: 16px;
              max-width: 100%;
              padding: 0 20px;
              margin: 0 auto 15px;
           }
           .custom-video-banner .banner {
              display: block;
              overflow: hidden;
              border-radius: 12px;
              box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
              transition: transform 0.3s ease, box-shadow 0.3s ease;
              text-decoration: none;
              position: relative;
           }
           .custom-video-banner video,
           .custom-video-banner img {
              width: 100%;
              height: auto;
              display: block;
              border-radius: 12px;
              object-fit: cover;
              margin: 0 auto;
              transition: transform 0.3s ease;
           }
        `;
    document.head.appendChild(style);
  }

  function createVideoSection() {
    const section = document.createElement("section");
    section.className =
      "custom-video-banner s-block s-block--video-banner wide-placeholder appear";
    const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);

    section.innerHTML = `
            <div class="container">
                <a href="${
                  VIDEO_CONFIG.VIDEO_LINK
                }" class="banner banner--video" aria-label="Video Banner">
                    ${
                      isIOS
                        ? `<img src="${VIDEO_CONFIG.WEBP_SRC}" alt="Banner" />`
                        : `<video muted autoplay playsinline loop>
                              <source src="${VIDEO_CONFIG.VIDEO_SRC}" type="video/mp4">
                              متصفحك لا يدعم تشغيل الفيديو
                           </video>`
                    }
                </a>
            </div>
        `;
    return section;
  }

  function insertVideoSection() {
    const videoSection = createVideoSection();
    const sections = document.querySelectorAll("section");

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

  function forcePlayOnIOS(video) {
    const tryPlay = () => {
      video.play().catch(() => {});
      document.removeEventListener("touchstart", tryPlay);
      document.removeEventListener("click", tryPlay);
      document.removeEventListener("scroll", tryPlay);
    };
    document.addEventListener("touchstart", tryPlay);
    document.addEventListener("click", tryPlay);
    document.addEventListener("scroll", tryPlay);
  }

  document.addEventListener("DOMContentLoaded", () => {
    const video = document.querySelector(".custom-video-banner video");
    if (video) {
      video.muted = true;
      video.autoplay = true;
      video.loop = true;
      video.setAttribute("playsinline", "");
      video.play().catch(() => {
        forcePlayOnIOS(video);
      });
    }
  });

  function init() {
    addVideoStyles();
    insertVideoSection();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }
})();


/* Add custom Js styles below */
// === تشغيل صوت عند الضغط على زر "أضف للسلة" ===
document.addEventListener("DOMContentLoaded", function () {
  const addSound = new Audio(
    "https://res.cloudinary.com/dgpyctx0v/video/upload/v1753155078/Add_to_Cart_SFX_at9ofh.mp3"
  );

  document.body.addEventListener("click", function (e) {
    const target = e.target.closest("salla-add-product-button");
    if (target) {
      addSound.currentTime = 0;
      addSound.play().catch((err) => console.warn("الصوت لم يعمل:", err));
    }
  });
});
// === [نهاية] صوت زر الإضافة للسلة ===

// === تحسين مظهر الناف بار عند التمرير للأسفل ===

// === [نهاية] تحسين الناف بار عند التمرير ===

// === [نهاية] أدوات الوصول ===

// === قسم الأسئلة الشائعة ===
document.addEventListener("DOMContentLoaded", () => {
  // إنشاء عنصر الحاوية الرئيسي
  const faqSection = document.createElement("section");
  faqSection.id = "faq-section";
  faqSection.style.cssText = `
        background-color:transparent;
        padding: 2rem;
        margin: 2rem auto;
        width: 90%; /* العرض 90% من حجم الشاشة */
        max-width: 800px; /* أقصى عرض للقسم */
        border-radius: 10px;
    `;

  // إضافة عنوان القسم
  const faqTitle = document.createElement("h2");
  faqTitle.innerText = "الأسئلة الشائعة";
  faqTitle.style.cssText = `
        text-align: center;
        color: var(--main-color);
        margin-bottom: 1.5rem;
        font-size: 1.5rem; /* حجم الخط يناسب الشاشات */
    `;
  faqSection.appendChild(faqTitle);

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

  // إنشاء الأسئلة والإجابات
  faqData.forEach(({ question, answer }) => {
    const questionContainer = document.createElement("div");
    questionContainer.style.cssText = `
            margin-bottom: 1rem;
            border-bottom: 1px solid #ccc;
            padding-bottom: 0.5rem;
        `;

    const questionEl = document.createElement("h3");
    questionEl.innerText = question;
    questionEl.style.cssText = `
            cursor: pointer;
            margin: 0;
            color:var(--main-color);
            font-size: 1.2rem;
        `;

    const answerEl = document.createElement("p");
    answerEl.innerText = answer;
    answerEl.style.cssText = `
            display: none;
            margin-top: 0.5rem;
            color:var(--main-color);
            font-size: 1rem;
        `;

    // إضافة تفاعل النقر
    questionEl.addEventListener("click", () => {
      const isVisible = answerEl.style.display === "block";
      answerEl.style.display = isVisible ? "none" : "block";
    });

    questionContainer.appendChild(questionEl);
    questionContainer.appendChild(answerEl);
    faqSection.appendChild(questionContainer);
  });

  // إضافة القسم قبل الفوتر
  const footer = document.querySelector("footer");
  footer.parentNode.insertBefore(faqSection, footer);
});
// === [نهاية] فقاعات الأسئلة الشائعة ===

const waveWrapper = document.createElement("div");
waveWrapper.className = "wave-lottie-wrapper";
waveWrapper.innerHTML = `
      <div class="moving-lottie">
        <div class="lottie-item" id="lottie1"></div>
        <div class="spacer"></div>
        <div class="lottie-item" id="lottie2"></div>
      </div>
    `;

const storeFooter = document.querySelector(".store-footer");
if (storeFooter) {
  storeFooter.prepend(waveWrapper);
}

const lottieScript = document.createElement("script");
lottieScript.src =
  "https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.10.2/lottie.min.js";
lottieScript.onload = function () {
  const loadLottie = (id) => {
    lottie.loadAnimation({
      container: document.getElementById(id),
      renderer: "svg",
      loop: true,
      autoplay: true,
      path: "https://lottie.host/60b5e882-ec18-4b1f-8b57-5717f1e5e70f/GgWQuftRHp.json",
      rendererSettings: {
        clearCanvas: true,
        preserveAspectRatio: "xMidYMid meet",
        progressiveLoad: true,
        hideOnTransparent: true,
      },
    });
  };
  loadLottie("lottie1");
  loadLottie("lottie2");
};
document.head.appendChild(lottieScript);

// === تأثيرات الظهور بالتمرير ===
function handleScroll() {
  const elements = document.querySelectorAll(".banner--fixed img");

  elements.forEach((element) => {
    const rect = element.getBoundingClientRect();

    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      if (!element.classList.contains("visible")) {
        element.classList.add("visible");
      }
    } else {
      if (element.classList.contains("visible")) {
        element.classList.remove("visible");
      }
    }
  });
}

function handleScroll2() {
  const elements = document.querySelectorAll("salla-slider.photos-slider");

  elements.forEach((element) => {
    const rect = element.getBoundingClientRect();

    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      if (!element.classList.contains("visible")) {
        element.classList.add("visible");
      }
    }
  });
}

function handleScroll3() {
  const elements = document.querySelectorAll(".lazy__bg");

  elements.forEach((element) => {
    const rect = element.getBoundingClientRect();

    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      if (!element.classList.contains("visible")) {
        element.classList.add("visible");
      }
    } else {
      if (element.classList.contains("visible")) {
        element.classList.remove("visible");
      }
    }
  });
}

function handleScrollBlur() {
  const elements = document.querySelectorAll(".s-product-card-vertical");

  elements.forEach((element) => {
    const rect = element.getBoundingClientRect();

    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      element.classList.add("visible");
    } else {
      element.classList.remove("visible");
    }
  });
}

window.addEventListener("scroll", handleScroll);
window.addEventListener("scroll", handleScroll2);
window.addEventListener("scroll", handleScroll3);
window.addEventListener("scroll", handleScrollBlur);
handleScroll();
handleScroll2();
handleScroll3();
handleScrollBlur();

// === نص ترويجي متحرك ===
const scrollingDiv = document.createElement("div");
scrollingDiv.className = "scrolling-text";

const textContent = `
<span>🔥 خصومات لن تجدها إلا هنا </span>
<span>💥💵 أسعار تبدأ من المستحيل </span>
<span>🔥 عروض حصرية تنتظرك الآن</span>
<span>⏳💰 لا تفوت فرص التوفير اليوم </span>
<span>🛒💥 عروض حصرية تنتظرك الآن</span>
`;

scrollingDiv.innerHTML = `
<div class="text-container">
 ${textContent.repeat(4)}
</div>
`;

const sallaSlider = document.querySelector("salla-slider");
if (sallaSlider) {
  sallaSlider.insertAdjacentElement("afterend", scrollingDiv);
}

document.addEventListener("DOMContentLoaded", () => {
  const bannerImages = document.querySelectorAll("salla-slider.photos-slider");
  const bannerObserver = new IntersectionObserver(
    (entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          observer.unobserve(entry.target);
        }
      });
    },
    {
      threshold: 0.1,
    }
  );

  bannerImages.forEach((image) => bannerObserver.observe(image));

  const productCards = document.querySelectorAll(".s-product-card-entry");
  const productObserver = new IntersectionObserver(
    (entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          observer.unobserve(entry.target);
        }
      });
    },
    {
      threshold: 0.1,
    }
  );

  productCards.forEach((card) => {
    productObserver.observe(card);
  });

  // زر العودة للأعلى
  const backToTopButton = document.createElement("div");
  backToTopButton.id = "backToTop";
  backToTopButton.innerHTML = `
 <div class="icon">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
     <path d="M12 4l-8 8h6v8h4v-8h6z" />
   </svg>
 </div>
 <svg class="circular-chart" viewBox="0 0 36 36">
   <path class="circle-bg" d="M18 2.0845a15.9155 15.9155 0 1 1 0 31.831a15.9155 15.9155 0 1 1 0-31.831" />
   <path class="circle" d="M18 2.0845a15.9155 15.9155 0 1 1 0 31.831a15.9155 15.9155 0 1 1 0-31.831" />
 </svg>`;
  document.body.appendChild(backToTopButton);

  const style = `
 #backToTop {
   position: fixed;
   bottom: 100px;
   right: 20px;
   width: 60px;
   height: 60px;
   display: none;
   z-index: 99;
 }
 #backToTop .icon {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   color: var(--main-color);
 }
 .circular-chart {
   width: 100%;
   height: 100%;
   transform: rotate(-90deg);
 }
 .circle-bg {
   fill: none;
   stroke: transparent;
   stroke-width: 3.8;
 }
 .circle {
   fill: none;
   stroke: var(--main-color);
   stroke-width: 3.8;
   stroke-dasharray: 100, 100;
   stroke-linecap: round;
   transition: stroke-dasharray 0.1s linear;
 }
 #backToTop:hover .icon {
   color: var(--second-color);
 }
`;

  const styleSheet = document.createElement("style");
  styleSheet.type = "text/css";
  styleSheet.textContent = style;
  document.head.appendChild(styleSheet);

  window.addEventListener("scroll", () => {
    const scrollTop = window.scrollY;
    const docHeight =
      document.documentElement.scrollHeight - window.innerHeight;
    const scrollPercent = (scrollTop / docHeight) * 100;

    if (scrollPercent > 1) {
      backToTopButton.style.display = "block";
    } else {
      backToTopButton.style.display = "none";
    }

    const circle = document.querySelector(".circle");
    const offset = 100 - scrollPercent;
    circle.style.strokeDasharray = `${scrollPercent}, 100`;
  });

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

// منع السلوك الافتراضي لبعض الروابط
document.querySelectorAll('a[href=""], a[href="#"]').forEach((link) => {
  link.addEventListener("click", (event) => {
    event.preventDefault();
  });
});

// رسالة تنبيه لخيارات المنتج
const sallaProductOptions = document.querySelector("salla-product-options");
if (sallaProductOptions) {
  const alertMessage = document.createElement("p");
  alertMessage.textContent =
    "الرجاء اختيار أحد هذا الاختيارات للتمكن من اتمام الشراء";

  alertMessage.style.backgroundColor = "#ffdddd";
  alertMessage.style.color = "#a94442";
  alertMessage.style.padding = "15px";
  alertMessage.style.border = "1px solid #a94442";
  alertMessage.style.borderRadius = "5px";
  alertMessage.style.marginBottom = "10px";
  alertMessage.style.fontWeight = "bold";
  alertMessage.style.textAlign = "center";

  sallaProductOptions.insertBefore(
    alertMessage,
    sallaProductOptions.firstChild
  );
}

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

const whatsappPopup = document.createElement("div");
whatsappPopup.className = "whatsapp-popup";
whatsappPopup.style.display = "none";

const popupContent = `
<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">
    <span class="support-text">الدعم الفني</span>
  </div>
  <button class="close-popup">×</button>
</div>
<div class="logo-container">
    <a >
      <img src="">
    </a>
  </div>
<div class="popup-body">
  <p>مرحباً بك، نحن متواجدون لخدمتك</p>
  <p>برجاء ارسال رقم:</p>
  <ul class="options-list">
    <li>1- لتتبع الطلب</li>
    <li>2- مشكلة</li>
    <li>3- استفسار</li>
  </ul>
  <a href="https://wa.me/+966502206803" target="_blank" class="whatsapp-button">تواصل معنا</a>
  <div class="adfaz-container">
    <a href="https://adfaz.sa/" target="_blank" class="adfaz-link">
      <img src="https://i.ibb.co/P4YVDmW/Black-Gold-White-Luxury-Royal-Crown-Logo.png" alt="Adfaz" class="adfaz-img">
      <span class="adfaz-text">برمجة وتطوير أدفاز</span>
    </a>
  </div>
</div>
`;

whatsappPopup.innerHTML = popupContent;
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";
whatsappFloat.appendChild(whatsappIcon);
document.body.appendChild(whatsappFloat);

const whatsappStyle = document.createElement("style");
whatsappStyle.innerHTML = `
.whatsapp-float {
position: fixed;
bottom: 100px;
left: 20px;
z-index: 100;
}
.logo-container{
  height: 50px;
  margin: auto;
}
.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;
  background: linear-gradient(var(--main-color), var(--second-color));
  width: 300px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 15px;
  color: white;
  z-index: 101;
  border-radius: 10px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.adfaz-container {
  display: flex;
  padding-top: 6px;
  align-items: flex-end;
  justify-content: space-evenly;
}
.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;
cursor: pointer;
}

.popup-body {
}

.options-list {
list-style-type: none;
padding: 0;
margin: 10px 0;
}

.options-list li {
margin-bottom: 5px;
}

.whatsapp-button {
display: block;
width: 100%;
text-align: center;
background-color: #25d366;
color: white;
padding: 10px 15px;
border-radius: 5px;
text-decoration: none;
margin-top: 15px;
}

.whatsapp-button:hover {
background-color: #1ebe55;
}

.adfaz-container {
display: flex;
align-items: center;
}

.adfaz-link {
display: flex;
text-decoration: none;
color: black;
}

.adfaz-img {
  width: 30px;
  height: 30px;
  margin-left: 3px;
}

.adfaz-text {
font-size: 12px;
    color: white;
}
.support-text {
font-size: 16px;
font-weight: bold;
}
`;
document.head.appendChild(whatsappStyle);

whatsappIcon.addEventListener("click", function () {
  whatsappPopup.style.display =
    whatsappPopup.style.display === "none" ? "block" : "none";
});

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

// Load FontAwesome
var fontAwesomeLink = document.createElement("link");
fontAwesomeLink.rel = "stylesheet";
fontAwesomeLink.href =
  "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css";
document.head.appendChild(fontAwesomeLink);

// Google Tag Manager
(function () {
  var script = document.createElement("script");
  script.innerHTML =
    "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-N36BWD87');";
  document.head.appendChild(script);
})();

// Google Tag Manager NoScript
/* Add custom Js code below */
// Load FontAwesome for icons
var fontAwesomeLink = document.createElement("link");
fontAwesomeLink.rel = "stylesheet";
fontAwesomeLink.href =
  "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css";
document.head.appendChild(fontAwesomeLink);

// Google Tag Manager (unchanged)
(function () {
  var script = document.createElement("script");
  script.innerHTML =
    "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-N36BWD87');";
  document.head.appendChild(script);
})();

// Google Tag Manager NoScript fallback (unchanged)
(function () {
  var noscriptTag = document.createElement("noscript");
  var iframeTag = document.createElement("iframe");
  iframeTag.src = "https://www.googletagmanager.com/ns.html?id=GTM-N36BWD87";
  iframeTag.height = "0";
  iframeTag.width = "0";
  iframeTag.style.display = "none";
  iframeTag.style.visibility = "hidden";
  noscriptTag.appendChild(iframeTag);
  document.body.appendChild(noscriptTag);
})();

// Insert the banner swap (now called banSwiper)
const banSwiperHTML = `
<div class="banner-swap">
   <div class="bannt">
       <div class="banrerr" dir="rtl">خدمة عملاء ممتازة <i class="fa-solid fa-headset"></i></div>
       <div class="banrerr" dir="rtl">توصيل سريع <i class="fa-solid fa-truck-fast"></i></div>
       <div class="banrerr" dir="rtl">منتجات عالية الجودة <i class="fa-solid fa-box-open"></i></div>
       <div class="banrerr" dir="rtl">دفع آمن <i class="fa-solid fa-lock"></i></div>
       <div class="banrerr" dir="rtl">دعم 24/7 <i class="fa-solid fa-phone-volume"></i></div>
       <div class="banrerr" dir="rtl">أسعار تنافسية <i class="fa-solid fa-tag"></i></div>

       <!-- Repeat the same items for continuous scroll -->
       <div class="banrerr" dir="rtl">خدمة عملاء ممتازة <i class="fa-solid fa-headset"></i></div>
       <div class="banrerr" dir="rtl">توصيل سريع <i class="fa-solid fa-truck-fast"></i></div>
       <div class="banrerr" dir="rtl">منتجات عالية الجودة <i class="fa-solid fa-box-open"></i></div>
       <div class="banrerr" dir="rtl">دفع آمن <i class="fa-solid fa-lock"></i></div>
       <div class="banrerr" dir="rtl">دعم 24/7 <i class="fa-solid fa-phone-volume"></i></div>
       <div class="banrerr" dir="rtl">أسعار تنافسية <i class="fa-solid fa-tag"></i></div>
   </div>
</div>
`;

// Insert the banSwiper as the first element in the body
document.body.insertAdjacentHTML("afterbegin", banSwiperHTML);

// === سلايدر مخصص ===
const style = document.createElement("style");
style.innerHTML = `
  .custom-carousel-wrapper {
    width: 100%;
    padding: 30px 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    position: relative;
  }

  .carousel-inner-container {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    transition: transform 0.5s ease;
  }

  .custom-carousel-item {
    flex-shrink: 0;
    height: 420px;
    width: 90px;
    border-radius: 30px;
    overflow: hidden;
    transition: all 0.4s ease;
    opacity: 0.6;
    cursor: pointer;
    position: relative;
    z-index: 1;
  }

  .custom-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
  }

  .custom-carousel-item.active {
    width: 1024px;
    height: 576px;
    border-radius: 30px;
    opacity: 1;
    z-index: 2;
  }

  .custom-carousel-item.active img {
    object-fit: cover;
  }

  /* === Arrows for Desktop === */
  .carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--main-color);
    color: var(--second-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    user-select: none;
  }

  .carousel-arrow.left {
    left: 10px;
  }

  .carousel-arrow.right {
    right: 10px;
  }

  /* === Swiper for Mobile & Tablet === */
  @media (max-width: 1023px) {
    .custom-carousel-wrapper {
      display: none !important;
    }

    .mobile-swiper-container {
      width: 100%;
      padding: 16px 0;
    }

    .swiper-slide img {
      width: 100%;
      height: auto;
      border-radius: 20px;
      object-fit: cover;
    }

    .swiper-pagination-bullets {
      bottom: 8px;
    }
  }

  @media (min-width: 1024px) {
    .mobile-swiper-container {
      display: none !important;
    }
  }
`;
document.head.appendChild(style);

document.addEventListener("DOMContentLoaded", function () {
  const allSliders = Array.from(
    document.querySelectorAll("salla-slider.photos-slider")
  );

  allSliders.forEach((slider) => {
    const sliderImgs = Array.from(slider.querySelectorAll(".swiper-slide img"));
    if (sliderImgs.length <= 1) return;

    const imageData = sliderImgs.map((img) => {
      const linkEl = img.closest("a");
      return {
        src: img.src,
        href: linkEl ? linkEl.href : null,
      };
    });

    // إخفاء سلايدر سلة
    slider.style.display = "none";
    slider.style.height = "0";
    slider.style.width = "0";
    slider.style.overflow = "hidden";
    slider.style.opacity = "0";
    slider.style.pointerEvents = "none";
    slider.style.visibility = "hidden";

    // === Desktop Carousel ===
    const wrapper = document.createElement("div");
    wrapper.className = "custom-carousel-wrapper";

    const container = document.createElement("div");
    container.className = "carousel-inner-container";

    const items = [];

    imageData.forEach((data, index) => {
      const item = document.createElement("div");
      item.className = "custom-carousel-item";
      if (index === 0) item.classList.add("active");

      const img = document.createElement("img");
      img.src = data.src;

      if (data.href) {
        const link = document.createElement("a");
        link.href = data.href;
        link.appendChild(img);
        item.appendChild(link);
      } else {
        item.appendChild(img);
      }

      container.appendChild(item);
      items.push(item);
    });

    wrapper.appendChild(container);

    // === Arrows
    const leftArrow = document.createElement("div");
    leftArrow.className = "carousel-arrow left";
    leftArrow.innerHTML = "‹";

    const rightArrow = document.createElement("div");
    rightArrow.className = "carousel-arrow right";
    rightArrow.innerHTML = "›";

    wrapper.appendChild(leftArrow);
    wrapper.appendChild(rightArrow);

    let currentIndex = 0;

    const activateItem = (index) => {
      items.forEach((el) => el.classList.remove("active"));
      items[index].classList.add("active");
    };

    leftArrow.addEventListener("click", () => {
      currentIndex = (currentIndex - 1 + items.length) % items.length;
      activateItem(currentIndex);
    });

    rightArrow.addEventListener("click", () => {
      currentIndex = (currentIndex + 1) % items.length;
      activateItem(currentIndex);
    });

    slider.insertAdjacentElement("afterend", wrapper);

    // === Swiper Slider for Mobile/Tablet ===
    const swiperContainer = document.createElement("div");
    swiperContainer.className = "mobile-swiper-container";

    swiperContainer.innerHTML = `
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          ${imageData
            .map(
              (data) => `
            <div class="swiper-slide">
              ${data.href ? `<a href="${data.href}">` : ""}
                <img src="${data.src}" />
              ${data.href ? `</a>` : ""}
            </div>`
            )
            .join("")}
        </div>
        <div class="swiper-pagination"></div>
      </div>
    `;

    slider.insertAdjacentElement("afterend", swiperContainer);
  });

  // تحميل Swiper
  if (typeof Swiper === "undefined") {
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";
    document.head.appendChild(link);

    const script = document.createElement("script");
    script.src = "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js";
    script.onload = () => {
      new Swiper(".mySwiper", {
        loop: true,
        autoplay: {
          delay: 3500,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    };
    document.body.appendChild(script);
  } else {
    new Swiper(".mySwiper", {
      loop: true,
      autoplay: {
        delay: 3500,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  }
});
// === [نهاية] سلايدر مخصص ===

// === أزرار المنتجات ===
const observer = new MutationObserver(() => {
  document.querySelectorAll(".s-product-card-entry").forEach((card) => {
    const image = card.querySelector(".s-product-card-image");
    const productId = card.id;
    const originalBtn = card.querySelector("salla-add-product-button button");
    const productLink = card.querySelector("a")?.href;

    if (!image || !productId || !originalBtn || !productLink) return;

    // ✅ زر السلة
    if (!image.querySelector(".custom-cart-button")) {
      const cartBtn = document.createElement("button");
      cartBtn.className = "custom-cart-button";
      cartBtn.innerHTML = '<i class="sicon-shopping-bag"></i>';
      cartBtn.addEventListener("click", (e) => {
        e.preventDefault();
        originalBtn.click();
      });
      image.appendChild(cartBtn);
    }

    // ✅ زر المقارنة
    if (!image.querySelector(".compare-btn")) {
      const compareBtn = document.createElement("button");
      compareBtn.className = "compare-btn";
      compareBtn.innerHTML = '<i class="sicon-compare"></i>';
      compareBtn.title = "قارن هذا المنتج";

      compareBtn.addEventListener("click", (e) => {
        e.preventDefault();
        let arr = JSON.parse(localStorage.getItem("compare-products") || "[]");
        if (!arr.includes(productId)) arr.push(productId);
        localStorage.setItem("compare-products", JSON.stringify(arr));

        if (arr.length === 2) {
          const cards = arr.map((id) => document.getElementById(id));
          const data = cards.map((card) => {
            const name =
              card.querySelector(".s-product-card-content-title")?.innerText ||
              "بدون اسم";
            const img = card.querySelector("img")?.src || "";
            const price =
              card.querySelector(".s-product-card-price")?.innerText ||
              "بدون سعر";
            return { name, img, price };
          });

          const popup = document.createElement("div");
          popup.style = `
            position: fixed;
            top: 10%;
            left: 50%;
            transform: translateX(-50%);
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
            width: 90%;
            max-width: 600px;
            z-index: 99999;
          `;
          popup.innerHTML = `
            <h3 style="text-align:center;">🔍 مقارنة المنتجين</h3>
            <div style="display:flex; gap:10px; justify-content:center; flex-wrap:wrap;">
              ${data
                .map(
                  (d) => `
                <div style="width: 45%; text-align:center; border:1px solid #eee; border-radius:8px; padding:10px;">
                  <img src="${d.img}" style="width:100px; height:100px; object-fit:cover;" />
                  <h4>${d.name}</h4>
                  <p>${d.price}</p>
                </div>
              `
                )
                .join("")}
            </div>
            <div style="text-align:center; margin-top:15px;">
              <button onclick="this.parentElement.parentElement.remove()" style="padding: 8px 16px; background:#000; color:#fff; border:none; border-radius:5px;">إغلاق</button>
            </div>
          `;
          document.body.appendChild(popup);
          localStorage.removeItem("compare-products");
        } else {
          alert("✅ تم اختيار المنتج. اختر منتجًا آخر للمقارنة.");
        }
      });

      image.appendChild(compareBtn);
    }

    // ✅ زر العرض السريع 👁️
    if (!image.querySelector(".quick-view-btn")) {
      const quickBtn = document.createElement("button");
      quickBtn.className = "quick-view-btn";
      quickBtn.innerHTML = '<i class="sicon-eye"></i>';
      quickBtn.title = "عرض سريع";

      quickBtn.addEventListener("click", () => {
        const popup = document.createElement("div");
        popup.style = `
          position: fixed;
          top: 5%;
          left: 50%;
          transform: translateX(-50%);
          background: white;
          padding: 0;
          border-radius: 10px;
          box-shadow: 0 4px 20px rgba(0,0,0,0.2);
          z-index: 99999;
          width: 90%;
          max-width: 800px;
          height: 80%;
          overflow: hidden;
        `;

        popup.innerHTML = `
          <iframe src="${productLink}" style="width:100%; height:100%; border:none;"></iframe>
          <button onclick="this.parentElement.remove()" style="
            position:absolute;
            top:10px;
            right:10px;
            background:black;
            color:white;
            border:none;
            padding:8px 12px;
            border-radius:5px;
            z-index: 999999;
          ">✖</button>
        `;

        document.body.appendChild(popup);
      });

      image.appendChild(quickBtn);
    }
  });
});

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

// ✅ زر المنتجات المشابهة
const similarObserver = new MutationObserver(() => {
  document.querySelectorAll(".s-product-card-entry").forEach((card) => {
    const image = card.querySelector(".s-product-card-image");
    if (!image || image.querySelector(".similar-products-btn")) return;

    const productTitle = card
      .querySelector(".s-product-card-content-title")
      ?.innerText?.trim();
    if (!productTitle) return;

    const similarBtn = document.createElement("button");
    similarBtn.className = "similar-products-btn";
    similarBtn.title = "منتجات مشابهة";
    similarBtn.innerHTML = '<i class="sicon-search"></i>';

    similarBtn.addEventListener("click", async () => {
      const keywords = "";
      const categoryPath = "";

      if (categoryPath) {
        window.location.href = `/${categoryPath}`;
      } else {
        const searchQuery = encodeURIComponent(productTitle + " " + keywords);

        try {
          const res = await fetch(`/search?q=${searchQuery}`);
          const text = await res.text();

          if (
            text.includes("no-results") ||
            text.includes("لم يتم العثور") ||
            res.url.includes("/not-found")
          ) {
            alert("❌ لم يتم العثور على منتجات مشابهة لهذا المنتج.");
          } else {
            window.location.href = `/search?q=${searchQuery}`;
          }
        } catch (err) {
          alert("حدث خطأ أثناء البحث، حاول مرة أخرى.");
        }
      }
    });

    image.appendChild(similarBtn);
  });
});

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

//✅تقييم وهمي
const ratingObserver = new MutationObserver(() => {
  document.querySelectorAll(".s-product-card-entry").forEach((card) => {
    if (card.querySelector(".fake-rating")) return;

    const priceEl = card.querySelector(".s-product-card-price");
    if (!priceEl) return;

    const ratingEl = document.createElement("div");
    ratingEl.className = "fake-rating";

    const fullStars = Math.floor(Math.random() * 3) + 3;
    const emptyStars = 5 - fullStars;

    ratingEl.innerHTML = "★".repeat(fullStars) + "☆".repeat(emptyStars);

    priceEl.parentElement.insertBefore(ratingEl, priceEl);
  });
});

ratingObserver.observe(document.body, {
  childList: true,
  subtree: true,
}); // ====================================================
// لودر الفخامة والجمال - كود شامل JS + CSS (مصحح اختفاء اللودر)
// ====================================================

document.addEventListener("DOMContentLoaded", () => {
    // ----------------------------------------------------
    // التعديل الرئيسي: منطق التشغيل لمرة واحدة فقط (باستخدام sessionStorage)
    // ----------------------------------------------------
    const LOADER_KEY = 'luxuryLoaderDisplayed';

    // 1. التحقق: إذا كان اللودر قد ظهر بالفعل في هذه الجلسة، توقف.
    if (sessionStorage.getItem(LOADER_KEY) === 'true') {
        return;
    }

    // 2. إذا لم يظهر، قم بتعيين المفتاح الآن لمنع ظهوره مستقبلاً في هذه الجلسة
    sessionStorage.setItem(LOADER_KEY, 'true');

    // ----------------------------------------------------
    // الكود الأصلي للودر (بدون تغيير)
    // ----------------------------------------------------

    // رابط الشعار
    const LOGO_URL =
        "https://cdn.salla.sa/KOrlD/VQSNDl3tWwDqw4FlIWIcF9oLYGa4nsfOIX2SymGI.png";
    // الحد الأدنى لوقت ظهور اللودر (لضمان رؤية الحركة)
    const MIN_LOAD_TIME = 3500;

    // الجملة التسويقية
    const fullText = "مختاراتك تنتظرك... اكتشف فخامة اللحظة!";
    // سرعة الكتابة لكل حرف
    const TYPING_SPEED = 70;
    const TYPING_DURATION = fullText.length * TYPING_SPEED;

    // وقت البدء لقياس الحد الأدنى للوقت
    const startTime = Date.now();

    // --- 0. إضافة الخطوط وتضمين CSS ---

    // إضافة خط Aref Ruqaa
    const fontLink = document.createElement("link");
    fontLink.rel = "stylesheet";
    fontLink.href =
        "https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@700&display=swap";
    document.head.appendChild(fontLink);

    // أكواد CSS المضمنة
    const customCss = `
/*
|======================================================
| أكواد CSS للودر الفاخر 
|======================================================
*/
#final-luxury-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    overflow: hidden; 
}

/* حاويات الستارة */
.curtain-left,
.curtain-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: #1a1a1a; 
    transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1);
}

.curtain-left {
    left: 0;
    transform: translateX(0);
}

.curtain-right {
    right: 0;
    transform: translateX(0);
}

/* حركة فتح الستارة */
.curtain-left.open {
    transform: translateX(-100%);
}

.curtain-right.open {
    transform: translateX(100%);
}

/* حاوية المحتوى */
.loader-content-container {
    position: relative;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    max-width: 450px; 
    padding: 20px;
}

/* 1. الشعار وتأثير السقوط */
.falling-logo {
    width: 110px; 
    height: auto;
    object-fit: contain;
    transform: translateY(-250px) scale(0.4);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease-in; 
    filter: drop-shadow(0 0 15px rgba(240, 230, 140, 0.4));
}

.falling-logo.landed {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* 2. النص والكتابة الجذابة */
.loader-text {
    margin-top: 25px;
    font-size: 1.8rem; 
    font-weight: 700;
    color: #FFD700; 
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    font-family: 'Aref Ruqaa', serif; 
    transition: opacity 0.5s ease-in; 
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
    max-width: 100%; 
}

.loader-text.visible {
    opacity: 1;
}

/* 3. شريط التحميل والنسبة المئوية */
.progress-bar-container {
    width: 100%;
    height: 8px; 
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    margin-top: 35px;
    position: relative;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #F0E68C, #FFD700);
    border-radius: 4px;
    transition: width 0.3s ease-out;
}

.progress-percentage {
    position: absolute;
    top: -25px;
    right: 5px;
    color: #FFD700;
    font-size: 1rem;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
}
    `;

    // إضافة وسم <style> إلى رأس الصفحة
    const styleElement = document.createElement("style");
    styleElement.textContent = customCss;
    document.head.appendChild(styleElement);

    // --- 2. إنشاء محتوى اللودر ---
    const loaderWrapper = document.createElement("div");
    loaderWrapper.id = "final-luxury-loader";

    loaderWrapper.innerHTML = `
        <div class="loader-content-container">
            <img src="${LOGO_URL}" alt="Store Logo" class="falling-logo">
            <p class="loader-text"></p>
            <div class="progress-bar-container">
                <div class="progress-bar-fill"></div>
                <span class="progress-percentage">0%</span>
            </div>
        </div>
        <div class="curtain-left"></div>
        <div class="curtain-right"></div>
    `;

    document.body.prepend(loaderWrapper);

    const logo = loaderWrapper.querySelector(".falling-logo");
    const textElement = loaderWrapper.querySelector(".loader-text");
    const progressBarFill = loaderWrapper.querySelector(".progress-bar-fill");
    const progressPercentage = loaderWrapper.querySelector(
        ".progress-percentage"
    );
    const leftCurtain = loaderWrapper.querySelector(".curtain-left");
    const rightCurtain = loaderWrapper.querySelector(".curtain-right");

    // === 3. آليات الحركة والتوقيت ===

    // أ. تشغيل سقوط اللوجو
    setTimeout(() => {
        logo.classList.add("landed");
    }, 300);

    // ب. تحديث النص الجذاب حرفاً حرفاً
    let textIndex = 0;
    let typingFinished = false;

    const typeText = () => {
        if (textIndex < fullText.length) {
            textElement.textContent += fullText.charAt(textIndex);
            textIndex++;
            setTimeout(typeText, TYPING_SPEED);
        } else {
            // عند الانتهاء من الكتابة
            textElement.style.whiteSpace = "normal";
            typingFinished = true;
            // بمجرد انتهاء الكتابة، يتم محاولة إخفاء اللودر
            checkAndHideLoader();
        }
    };

    // إظهار عنصر النص ثم بدء الكتابة
    setTimeout(() => {
        textElement.classList.add("visible");
        typeText();
    }, 1300);

    // ج. محاكاة شريط التحميل
    let currentProgress = 0;
    const updateProgress = () => {
        if (currentProgress < 95) {
            currentProgress += Math.floor(Math.random() * (4 - 1 + 1)) + 1;
            if (currentProgress > 95) currentProgress = 95;
        }
        progressBarFill.style.width = `${currentProgress}%`;
        progressPercentage.textContent = `${currentProgress}%`;
    };
    const progressInterval = setInterval(updateProgress, 180);

    // د. دالة الإخفاء النهائية (تفتح الستارة)
    const hideLoader = () => {
        clearInterval(progressInterval);
        currentProgress = 100;
        progressBarFill.style.width = `100%`;
        progressPercentage.textContent = `100%`;

        // تشغيل حركة الستارة بعد تأخير بسيط للتأكد من رؤية الـ 100%
        setTimeout(() => {
            leftCurtain.classList.add("open");
            rightCurtain.classList.add("open");

            // إزالة العنصر بالكامل بعد انتهاء حركة الستارة
            setTimeout(() => {
                loaderWrapper.remove();
            }, 1000);
        }, 300);
    };

    // هـ. منطق التحقق من الإخفاء (الآن مبسط ومرتبط بانتهاء الكتابة)
    let loadCompleted = false;
    window.addEventListener("load", () => {
        loadCompleted = true;
        checkAndHideLoader();
    });

    // الدالة الرئيسية للتحقق والبدء بالإخفاء
    const checkAndHideLoader = () => {
        const timeElapsed = Date.now() - startTime;
        const minimumTimePassed = timeElapsed >= MIN_LOAD_TIME;

        // الشرط هو: (انتهت الكتابة) و (انتهى تحميل الصفحة أو مر الحد الأدنى للوقت)
        if (typingFinished && (loadCompleted || minimumTimePassed)) {
            hideLoader();
        } else if (typingFinished && !loadCompleted) {
            // إذا انتهت الكتابة والصفحة لم تكتمل، ننتظر 500ms ثم نعيد الفحص
            setTimeout(checkAndHideLoader, 500);
        }
    };

    // نضمن أن يتم الفحص مرة واحدة بعد مرور الحد الأدنى للوقت، حتى لو لم يكتمل تحميل الصفحة
    setTimeout(checkAndHideLoader, MIN_LOAD_TIME);
});
document.addEventListener("DOMContentLoaded", function () {
  const style = document.createElement("style");
  style.innerHTML = `
    .custom-footer {
  position: relative;
  width: 100%;
  height: 550px;
  overflow: hidden;
  color: #f4dfd4;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
}

.custom-footer video {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 0;
  filter: brightness(0.6) contrast(1.1) saturate(1.2);
}

.custom-footer .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(
    rgba(75, 54, 33, 0.55),
    rgba(35, 22, 14, 0.75)
  );
  z-index: 1;
}

.footer-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 15px;
  text-align: center;
  gap: 22px;
  height: 100%;
  animation: fadeInUp 1.2s ease both;
}

.footer-logo {
  max-height: 90px;
  width: 11rem;
  opacity: 0;
  transform: translateY(-20px);
  animation: logoAppear 1.2s ease forwards 0.5s;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.4));
}

.footer-tagline {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #f9e8db;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
  animation: fadeIn 1.2s ease 0.8s both;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 15px;
  animation: fadeIn 1.2s ease 1s both;
}

.footer-links a {
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 10px 22px;
  border-radius: 12px;
  transition: all 0.35s ease;
  font-weight: 600;
}

.footer-links a:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.2);
}

.footer-copy {
  font-size: 14px;
  margin-top: 10px;
  color: #f8eae2;
  opacity: 0.9;
}

.footer-advaz {
  font-size: 14px;
  font-weight: bold;
  margin-top: 8px;
  color: #f8eae2;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes logoAppear {
  from { opacity: 0; transform: translateY(-30px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 767px) {
  .custom-footer { height: 480px; }
  .footer-logo { width: 8rem; }
  .footer-links {
    flex-direction: column;
    gap: 12px;
  }
  .footer-links a {
    width: 100%;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .custom-footer {
    height: 600px;
  }
  .footer-links {
    flex-direction: row;
    gap: 25px;
  }
}

  `;
  document.head.appendChild(style);

  const footerHTML = `
    <footer class="custom-footer">
      <video autoplay muted loop playsinline preload="auto" src="https://files.catbox.moe/sgo21a.mp4"></video>
      <div class="overlay"></div>
      <div class="footer-content">
        <img src="https://cdn.salla.sa/KOrlD/VQSNDl3tWwDqw4FlIWIcF9oLYGa4nsfOIX2SymGI.png" alt="footer-logo" class="footer-logo" />
        <div class="footer-tagline">حوّل مساحتك إلى لوحة فنية بأروع المزهريات التي تعبر عن ذوقك</div>
        <div class="footer-links">
          <a href="https://urneeds.shop/%D8%B3%D9%8A%D8%A7%D8%B3%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%88-%D8%A7%D9%84%D8%AE%D8%B5%D9%88%D8%B5%D9%8A%D8%A9/page-88115326">سياسة الاستخدام والخصوصية</a>
          <a href="https://urneeds.shop/%D8%B3%D9%8A%D8%A7%D8%B3%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%A8%D8%AF%D8%A7%D9%84-%D9%88%D8%A7%D9%84%D8%A5%D8%B3%D8%AA%D8%B1%D8%AC%D8%A7%D8%B9/page-1462605695">سياسة الاستبدال والاسترجاع</a>
          <a href="tel:+966508303937">تواصل معنا</a>
        </div>
        <div class="footer-copy">جميع الحقوق محفوظة © RONQA 2025</div>
        <div class="footer-advaz">برمجة وتطوير ادفاز</div>
      </div>
    </footer>
  `;

  const oldFooter = document.querySelector("footer.store-footer");
  if (oldFooter) oldFooter.remove();
  document.body.insertAdjacentHTML("beforeend", footerHTML);
});
// ====================================================
// سيكشن شريط الصور المتحرك (VASE & Accessories Marquee) - الحل النهائي الآمن والمحمول
// ====================================================

document.addEventListener("DOMContentLoaded", () => {

    // 1. روابط الصور المحدثة من المستخدم
    const imageLinks = [
        "https://iili.io/KNM2tLu.md.png",
        "https://iili.io/KNM3JkB.png",
        "https://iili.io/KNM2m1j.png",
        "https://iili.io/KNM3dmP.png",
    ];
    
    const marqueeText = "اجعل كل زاوية في منزلك لوحة فنية."; 
    
    // 2. التحقق الآمن من العنصر المستهدف
    const targetElement = document.querySelector(".custom-footer");
    if (!targetElement) {
        console.warn("Target element with class 'custom-footer' not found. Code execution stopped safely.");
        return; 
    }

    // --- 3. إنشاء كود CSS (مضمّن) ---
    const customCss = `
        /* الخط (Aref Ruqaa) */
        @import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@700&display=swap');

        /* حاوية السيكشن الرئيسية */
        .accessories-marquee-section {
            width: 100%;
            overflow: hidden;
            padding: 4vw 0; 
            background-color: #fbf3f5; 
            margin: 5vw 0; 
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 1. النص المتحرك (Typing Animation) */
        .typing-text-container {
            font-family: 'Aref Ruqaa', serif; 
            font-size: clamp(1.2rem, 5vw, 1.8rem); 
            font-weight: 700;
            color: #333; 
            text-align: center;
            height: clamp(30px, 8vw, 50px);
            margin-bottom: 3vw; 
            white-space: nowrap;
        }
        
        .typing-text-span {
            border-right: 2px solid #333; /* مؤشر الكتابة */
            animation: blink-caret .75s step-end infinite;
        }

        /* 2. شريط الصور (Marquee) */
        .marquee-wrapper {
            width: 100%;
            overflow: hidden;
            display: flex; 
            animation: scroll-loop 8s linear infinite; 
        }
        
        .marquee-track {
            display: flex;
            flex-shrink: 0; 
        }

        .marquee-item {
            flex-shrink: 0; 
            width: 55vw; 
            height: 55vw; 
            margin-right: 3vw; 
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
        }

        .marquee-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; 
            opacity: 0.8; 
            transform: translateZ(0); 
        }
        
        /* إطارات الحركة (GPU Accelerated) */
        @keyframes scroll-loop {
            0% { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(-20%, 0, 0); } 
        }
        
        @keyframes blink-caret {
          from, to { border-color: transparent }
          50% { border-color: #333 }
        }

        /* ======================================= */
        /* التعديل الرئيسي: إخفاء الشريط في شاشات الجوال */
        /* ======================================= */
        @media (max-width: 767px) {
            .marquee-wrapper {
                display: none !important; /* إخفاء شريط الصور بالكامل */
            }

            /* زيادة الهامش أسفل النص بدلاً من الشريط */
            .accessories-marquee-section {
                padding-bottom: 10vw; 
            }
        }
        
        /* تعديل حجم العنصر على الشاشات الأكبر (لضمان ظهوره بشكل صحيح) */
        @media (min-width: 768px) {
            .marquee-item {
                width: 220px; 
                height: 220px; 
                margin-right: 20px; 
            }
            .typing-text-container {
                font-size: 1.8rem; 
                height: 50px; 
                margin-bottom: 20px; 
            }
        }
    `;

    // 4. إضافة وسم <style>
    const styleElement = document.createElement("style");
    styleElement.textContent = customCss;
    document.head.appendChild(styleElement);

    // 5. إنشاء عناصر الشريط
    const section = document.createElement("div");
    section.className = "accessories-marquee-section";

    // عنصر النص المتحرك
    const textContainer = document.createElement('div');
    textContainer.className = 'typing-text-container';
    const typingSpan = document.createElement('span');
    typingSpan.className = 'typing-text-span';
    textContainer.appendChild(typingSpan);
    section.appendChild(textContainer);

    // حاوية الشريط الرئيسية التي تحمل الحركة
    const marqueeWrapper = document.createElement('div');
    marqueeWrapper.className = 'marquee-wrapper';
    
    // دالة لإنشاء شريط صور واحد
    const createTrack = (images) => {
        const track = document.createElement("div");
        track.className = "marquee-track";
        
        images.forEach((url) => {
            const item = document.createElement("div");
            item.className = "marquee-item";

            const img = document.createElement("img");
            img.src = url;
            img.alt = "Luxury Accessory or Vase";

            item.appendChild(img);
            track.appendChild(item);
        });
        return track;
    };
    
    // تكرار الشريط 5 مرات 
    const originalTrack = createTrack(imageLinks);
    const trackClone2 = createTrack(imageLinks);
    const trackClone3 = createTrack(imageLinks);
    const trackClone4 = createTrack(imageLinks);
    const trackClone5 = createTrack(imageLinks); 
    
    // ندمج الأجزاء الخمسة داخل حاوية الحركة
    marqueeWrapper.appendChild(originalTrack);
    marqueeWrapper.appendChild(trackClone2);
    marqueeWrapper.appendChild(trackClone3);
    marqueeWrapper.appendChild(trackClone4);
    marqueeWrapper.appendChild(trackClone5);

    section.appendChild(marqueeWrapper); 

    // 6. وضع السيكشن قبل العنصر المستهدف
    targetElement.parentNode.insertBefore(section, targetElement);


    // 7. دالة حركة الكتابة والمسح (Typing & Deleting)
    let charIndex = 0;
    let isDeleting = false;
    const typingDelay = 100; 
    const deletingDelay = 50; 
    const pauseDelay = 1500; 

    function typeAndDelete() {
        const currentText = marqueeText;

        if (isDeleting) {
            // المسح
            typingSpan.textContent = currentText.substring(0, charIndex - 1);
            charIndex--;
        } else {
            // الكتابة
            typingSpan.textContent = currentText.substring(0, charIndex + 1);
            charIndex++;
        }

        if (!isDeleting && charIndex === currentText.length) {
            // انتهت الكتابة
            isDeleting = true;
            setTimeout(typeAndDelete, pauseDelay);
        } else if (isDeleting && charIndex === 0) {
            // انتهى المسح
            isDeleting = false;
            setTimeout(typeAndDelete, typingDelay * 2); 
        } else {
            // استمر في الكتابة أو المسح
            const delay = isDeleting ? deletingDelay : typingDelay;
            setTimeout(typeAndDelete, delay);
        }
    }

    // بدء الحركة
    typeAndDelete();
});