document.addEventListener("DOMContentLoaded", function () {
  const style = document.createElement("style");
  style.innerHTML = `
    .custom-footer {
      position:relative;
      width:100%;
      height:500px;
      overflow:hidden;
      color:#fff;
      background:#f4e9da;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .custom-footer img.bg-webp {
      position:absolute;
      top:50%; left:50%;
      width:100%; height:100%;
      object-fit:cover;
      z-index:0;
      transform:translate(-50%,-50%);
    }

    .custom-footer .overlay {
      position:absolute;
      top:0; left:0;
      width:100%; height:100%;
      background:rgba(0,0,0,0.4);
      z-index:1;
    }

    .footer-content {
      position:relative;
      z-index:2;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      padding:30px 15px;
      text-align:center;
      gap:18px;
      height:100%;
    }

    .footer-logo {
      max-height:90px;
      width:10rem;
      margin-bottom:15px;
      opacity:0;
      transform:translateY(-20px);
      animation: logoAppear 1.2s ease forwards;
    }

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

    .footer-links a {
      color:#fff;
      font-size:15px;
      text-decoration:none;
      background:rgba(255,255,255,0.15);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding:12px 16px;
      border-radius:12px;
      transition:all 0.3s ease;
      font-weight:bold;
      margin:8px 0;
      display:block;
    }

    .footer-links a:hover {
      background:rgba(255,255,255,0.3);
      color:#ffd700;
      transform:scale(1.05);
      box-shadow:0 0 15px rgba(255,215,0,0.6);
    }

    .footer-links a:active {
      transform:scale(0.95);
      box-shadow:0 0 8px rgba(255,215,0,0.8);
    }

    .footer-copy {
      font-size:13px;
      margin-top:10px;
      opacity:0.9;
    }

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

    @media (max-width:767px){
      .footer-logo { max-height:90px; }
      .footer-links {
        display:flex;
        flex-direction:column;
        gap:12px;
        width:100%;
      }
      .footer-links a {
        width:100%;
      }
      .custom-footer img.bg-webp {
        object-fit:cover;
      }
    }

    @media (min-width:768px){
      .footer-links {
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
      }
      .footer-links a {
        width:100%;
      }
      .custom-footer {
        position:relative;
        width:100%;
        height:600px;
        overflow:hidden;
        color:#fff;
        background:#f4e9da;
        display:flex;
        align-items:center;
        justify-content:center;
      }
    }
  `;
  document.head.appendChild(style);

  const footerHTML = `
    <footer class="custom-footer">
      <img src="https://files.catbox.moe/q4zvsh.webp" alt="footer-bg" class="bg-webp" />
      <div class="overlay"></div>
      <div class="footer-content">
        <img src="https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/Vxxvj/Jz9nWFIL1p5bJvgEnLz2cJMjnqh0Qtd4QkTEpEQO.png" alt="footer-logo" class="footer-logo" />
        <div class="footer-links">
          <a href="https://reemas.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-550845078">سياسة الاستخدام والخصوصية</a>
          <a href="https://reemas.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%A7%D8%B3%D8%AA%D8%B1%D8%AC%D8%A7%D8%B9/page-1924290967">سياسة الاستبدال والاسترجاع</a>
 <a href="https://wa.me/+966582845552" target="_blank" class="whatsapp-button">تواصل معنا</a>        </div>
        <div class="footer-copy"> الحقوق محفوظة | 2025 REEMA'S JEWERLY</div>
        <div class="footer-advaz">برمجة وتطوير ادفاز</div>
      </div>
    </footer>
  `;

  const oldFooter = document.querySelector("footer.store-footer");
  if (oldFooter) oldFooter.remove();
  document.body.insertAdjacentHTML("beforeend", footerHTML);
});
document.addEventListener("DOMContentLoaded", () => {
  // إعدادات البانر
  const BAR_CONFIG = {
    BAR_POSITION: 2 // رقم مكان البانر وسط الـ sections (مثلاً 2 = بعد السكشن التاني)
  };

  // إنشاء شريط العرض
  const bar = document.createElement("div");
  bar.className = "sp-offer-bar";

  const countdown = document.createElement("div");
  countdown.className = "sp-countdown";

  const createBox = (id, label) => {
    const box = document.createElement("div");
    box.className = "sp-time-box";

    const value = document.createElement("div");
    value.id = id;
    value.textContent = "00";
    value.className = "sp-time-value";

    const labelDiv = document.createElement("div");
    labelDiv.textContent = label;
    labelDiv.className = "sp-time-label";

    box.appendChild(value);
    box.appendChild(labelDiv);
    return box;
  };

  countdown.appendChild(createBox("sp-days", "أيام"));
  countdown.appendChild(createBox("sp-hours", "ساعات"));
  countdown.appendChild(createBox("sp-minutes", "دقايق"));
  countdown.appendChild(createBox("sp-seconds", "ثواني"));

  const text = document.createElement("span");
  text.className = "sp-offer-text";
  text.innerHTML = "🎉 خصومات تصل الى 30%"; 
  countdown.appendChild(text);

  bar.appendChild(countdown);

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

  // ====== حساب العد التنازلي ======
  const countdownDate = new Date();
  countdownDate.setDate(countdownDate.getDate() + 5);

  const updateCountdown = () => {
    const now = new Date().getTime();
    const distance = countdownDate.getTime() - now;

    if (distance < 0) {
      if (bar && bar.parentNode) {
        bar.parentNode.removeChild(bar);
      }
      return;
    }

    const days = String(Math.floor(distance / (1000 * 60 * 60 * 24))).padStart(2, '0');
    const hours = String(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0');
    const minutes = String(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0');
    const seconds = String(Math.floor((distance % (1000 * 60)) / 1000)).padStart(2, '0');

    document.getElementById("sp-days").textContent = days;
    document.getElementById("sp-hours").textContent = hours;
    document.getElementById("sp-minutes").textContent = minutes;
    document.getElementById("sp-seconds").textContent = seconds;
  };

  updateCountdown();
  setInterval(updateCountdown, 1000);
});


const VIDEO_CONFIG = {
    VIDEO_SRC: "https://files.catbox.moe/pwzd0k.mp4", // رابط الفيديو
    WEBP_SRC: "https://files.catbox.moe/20n1gl.webp", // صورة بديلة لأجهزة iOS
    VIDEO_LINK: "#", 
    VIDEO_POSITION: 6 // رقم مكان الفيديو وسط الـ 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();
    }
})();


const menu = document.createElement("div");
menu.className = "floating-menu";
menu.innerHTML = `
  <button class="toggle">
    <!-- أيقونة القائمة (9 نقاط) -->
    <svg width="20" height="20" fill="white" viewBox="0 0 24 24">
      <circle cx="5" cy="5" r="2"/>
      <circle cx="12" cy="5" r="2"/>
      <circle cx="19" cy="5" r="2"/>
      <circle cx="5" cy="12" r="2"/>
      <circle cx="12" cy="12" r="2"/>
      <circle cx="19" cy="12" r="2"/>
      <circle cx="5" cy="19" r="2"/>
      <circle cx="12" cy="19" r="2"/>
      <circle cx="19" cy="19" r="2"/>
    </svg>
  </button>
  <div class="extra">
    <button class="account-btn" title="حسابي">
      <!-- أيقونة الحساب -->
      <svg width="20" height="20" fill="white" viewBox="0 0 24 24">
        <path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/>
      </svg>
    </button>
    <button class="search-btn" title="بحث">
      <!-- أيقونة البحث -->
      <svg width="20" height="20" fill="white" viewBox="0 0 24 24">
        <path d="M21.7 20.3l-5.1-5.1c1.1-1.4 1.7-3.1 1.7-5 0-4.4-3.6-8-8-8S2.3 5.8 2.3 10.2s3.6 8 8 8c1.9 0 3.6-.6 5-1.7l5.1 5.1 1.3-1.3zM10.3 16c-3.2 0-5.7-2.6-5.7-5.7s2.6-5.7 5.7-5.7 5.7 2.6 5.7 5.7-2.5 5.7-5.7 5.7z"/>
      </svg>
    </button>
    <button class="cart-btn" title="السلة">
      <!-- أيقونة السلة -->
      <svg width="20" height="20" fill="white" viewBox="0 0 24 24">
        <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 
        2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 
        2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.16 
        14l.84-2h8l.84 2H7.16zM6 2l-1 2H1v2h2l3.6 
        7.59-1.35 2.44C5.08 16.37 5 16.68 5 17c0 
        1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12L8.1 
        13h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.3.12-.48 
        0-.55-.45-1-1-1H6.21l-.94-2H2V2h4z"/>
      </svg>
      <span class="cart-badge"></span>
    </button>
  </div>
`;
document.body.appendChild(menu);

// فتح / قفل القائمة
document.querySelector(".floating-menu .toggle").addEventListener("click", () => {
  menu.classList.toggle("active");
});

// زر الحساب → يضغط على زر الحساب الأصلي
document.querySelector(".account-btn").addEventListener("click", () => {
  let userBtn = document.querySelector(".header-btn[aria-label='user-icon']");
  if (userBtn) {
    userBtn.click();
  }
});

document.querySelector(".cart-btn").addEventListener("click", () => {
  window.location.href = "/cart";
});

// إنشاء شريط البحث العائم
const searchBar = document.createElement("div");
searchBar.className = "custom-search-bar";
searchBar.innerHTML = `
  <input type="search" enterkeyhint="search" autocomplete="off" class="s-search-input" placeholder="ادخل كلمة البحث">
  <button class="close-btn">&times;</button>
`;
document.body.appendChild(searchBar);

// أيقونة البحث → تفتح الشريط
document.querySelector(".search-btn").addEventListener("click", () => {
  searchBar.classList.add("active");
  searchBar.querySelector("input").focus();
});

// زر الإغلاق ×
searchBar.querySelector(".close-btn").addEventListener("click", () => {
  searchBar.classList.remove("active");
});

// يقفل البحث لو ضغطت برا
document.addEventListener("click", (e) => {
  if (!searchBar.contains(e.target) && !e.target.closest(".search-btn")) {
    searchBar.classList.remove("active");
  }
});

// 🔹 تحديث العداد من السلة الأصلية
const cartBadge = document.querySelector(".floating-menu .cart-badge");
function updateCartBadge() {
  const originalCart = document.querySelector("#s-cart-icon");
  if (!originalCart) return;

  let count = originalCart.textContent.match(/\d+/);
  if (count && parseInt(count[0]) > 0) {
    cartBadge.textContent = count[0];
    cartBadge.style.display = "inline-block";
  } else {
    cartBadge.style.display = "none";
  }
}

// تحديث أول مرة
updateCartBadge();

// متابعة التغيير باستخدام MutationObserver (أدق من interval)
const cartObserverTarget = document.querySelector("#s-cart-icon");
if (cartObserverTarget) {
  const observer = new MutationObserver(updateCartBadge);
  observer.observe(cartObserverTarget, { childList: true, subtree: true, characterData: true });
}
/* 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);
});
// === [نهاية] فقاعات الأسئلة الشائعة ===


// === تأثيرات الظهور بالتمرير ===
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/+966582845552" 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
});
// Preloader with Lottie Animation
var preloaderScript = document.createElement("script");
preloaderScript.src = "https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.10.2/lottie.min.js";
preloaderScript.onload = function () {
    var preloaderStyle = document.createElement("style");
    preloaderStyle.innerHTML = `
    @keyframes fade-in {
      0% {
        opacity: 1;
        transform: scale(1);
      }
      75% {
        opacity: 1;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: scale(0.1);
      }
    }

    #loaderr {
      position: fixed;
      z-index: 999999;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: transparent !important;
      animation: fade-in 3.8s forwards;
    }
    `;
    document.head.appendChild(preloaderStyle);

    var wrapper = document.createElement("div");
    wrapper.id = "loaderr";
    document.body.appendChild(wrapper);

    var loader = document.createElement("div");
    loader.style.width = "500px";
    loader.style.height = "500px";
    wrapper.appendChild(loader);

    lottie.loadAnimation({
        container: loader,
        renderer: "svg",
        loop: true,
        autoplay: true,
        path: "https://lottie.host/983b6649-a585-4682-a978-0a1a120d33cc/yG8I7cdaRj.json"
    });

    setTimeout(function () {
        wrapper.remove();
    }, 3500);
};
document.head.appendChild(preloaderScript);