/* Add custom Js styles below */ 
/* Add custom Js styles below */
document.addEventListener("DOMContentLoaded", function () {
  // إنشاء مودال عرض سريع
  const modal = document.createElement("div");
  modal.className = "quick-view-modal";
  modal.style.cssText = `
    position: fixed; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    background: white; 
    padding: 25px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    border-radius: 15px;
    max-width: 90%;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    display: none;
    z-index: 10001;
    border: 1px solid rgba(0,0,0,0.1);
  `;
  const overlay = document.createElement("div");
  overlay.className = "quick-view-overlay";
  overlay.style.cssText = `
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: none;
    z-index: 10000;
    backdrop-filter: blur(5px);
  `;
  // زر إغلاق محسّن
  const closeBtn = document.createElement("button");
  closeBtn.innerHTML = "✕";
  closeBtn.style.cssText = `
    position: absolute; 
    top: 15px; 
    right: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    font-size: 18px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
  `;
  closeBtn.setAttribute("aria-label", "إغلاق");
  closeBtn.addEventListener('mouseenter', () => {
    closeBtn.style.transform = 'scale(1.1)';
    closeBtn.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.6)';
  });
  closeBtn.addEventListener('mouseleave', () => {
    closeBtn.style.transform = 'scale(1)';
    closeBtn.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.4)';
  });
  // محتوى المودال
  const content = document.createElement("div");
  content.style.cssText = `
    margin-top: 20px;
    padding-bottom: 40px;
  `;
  // مؤشر تحميل محسّن
  const loader = document.createElement("div");
  loader.innerHTML = `
    <div style="display: flex; justify-content: center; align-items: center; height: 200px;">
      <div style="display: flex; flex-direction: column; align-items: center;">
        <div style="border: 4px solid rgba(102, 126, 234, 0.1); border-top: 4px solid #667eea; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite;"></div>
        <p style="margin-top: 15px; color: #667eea; font-weight: 500;">جاري تحميل المنتج...</p>
      </div>
      <style>
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
      </style>
    </div>
  `;
  modal.appendChild(closeBtn); // نقل زر الإغلاق داخل المودال
  modal.appendChild(content);
  document.body.appendChild(modal);
  document.body.appendChild(overlay);
  // إغلاق المودال
  function closeModal() {
    modal.style.display = "none";
    overlay.style.display = "none";
    content.innerHTML = "";
  }
  closeBtn.onclick = closeModal;
  overlay.onclick = closeModal;
  // إضافة أزرار العرض السريع
  setTimeout(() => {
    document.querySelectorAll(".s-product-card-entry").forEach(card => {
      if (card.querySelector(".quick-view-btn")) return;
      const btn = document.createElement("button");
      btn.className = "quick-view-btn";
      btn.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
          <circle cx="12" cy="12" r="3"></circle>
        </svg>
      `;
      btn.style.cssText = `
        padding: 10px;
        cursor: pointer;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 50%;
        font-size: 14px;
        width: 40px;
        height: 40px;
        transition: all 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 7px;
        top: 7px;
        z-index: 10;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        border: none;
      `;
      btn.addEventListener('mouseenter', () => {
        btn.style.transform = 'scale(1.1)';
        btn.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.6)';
      });
      btn.addEventListener('mouseleave', () => {
        btn.style.transform = 'scale(1)';
        btn.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.4)';
      });
      btn.onclick = async (e) => {
        e.preventDefault();
        e.stopPropagation();
        const productLink = card.querySelector('a')?.href;
        if (!productLink) return;
        // عرض مؤشر التحميل
        content.innerHTML = '';
        content.appendChild(loader);
        modal.style.display = "block";
        overlay.style.display = "block";
        try {
          // جلب محتوى صفحة المنتج
          const response = await fetch(productLink);
          const html = await response.text();
          // تحليل HTML
          const parser = new DOMParser();
          const doc = parser.parseFromString(html, 'text/html');
          // استخراج البيانات من صفحة المنتج في سلة
          const productTitle = doc.querySelector('h1')?.textContent.trim() || 'بدون عنوان';
          // إصلاح مشكلة ظهور الصفر - البحث عن السعر الصحيح
          let productPrice = '';
          const priceContainer = doc.querySelector('.price-wrapper');
          if (priceContainer) {
            // البحث عن السعر الفعلي (غير المخفي)
            const actualPrice = priceContainer.querySelector('.total-price:not(.hidden)') ||
              priceContainer.querySelector('.total-price');
            if (actualPrice) {
              productPrice = actualPrice.textContent.trim();
              // إزالة أي أصفار غير مرغوب فيها
              productPrice = productPrice.replace(/0\s*<i/g, '').trim();
            }
          }
          // استخراج الوصف مع زر عرض المزيد
          let productDescription = doc.querySelector('.product__description')?.innerHTML || 'لا يوجد وصف متوفر.';
          // استخراج الصور
          const mainImage = doc.querySelector('.details-slider img')?.src;
          const thumbnails = Array.from(doc.querySelectorAll('.s-slider-thumbs img')).map(img => img.src);
          // استخراج الخيارات
          const productOptions = doc.querySelector('.s-product-options-option-container')?.outerHTML || '';
          // استخراج زر الإضافة للسلة
          const addToCartForm = doc.querySelector('form.product-form')?.outerHTML || '';
          // بناء محتوى المودال
          content.innerHTML = `
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px;">
              <div>
                ${mainImage ? `
                  <div style="margin-bottom: 20px; text-align: center; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.15);">
                    <img id="main-product-image" src="${mainImage}" alt="${productTitle}" style="max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: cover;"/>
                  </div>
                  ${thumbnails.length > 0 ? `
                  <div style="display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; padding: 0 10px;">
                    ${thumbnails.map(img => `
                      <div style="border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: all 0.3s ease; cursor: pointer;" 
                           onclick="document.getElementById('main-product-image').src = '${img}'">
                        <img src="${img}" alt="" style="width: 70px; height: 70px; object-fit: cover;">
                      </div>
                    `).join('')}
                  </div>
                  ` : ''}
                ` : ''}
              </div>
              <div style="padding: 0 10px;">
                <h2 style="margin: 0 0 20px 0; color: #2c3e50; font-size: 24px; font-weight: 700; line-height: 1.3;">${productTitle}</h2>
                ${productPrice ? `<div style="font-size: 22px; font-weight: bold; color: #e74c3c; margin-bottom: 25px; background: rgba(231, 76, 60, 0.1); padding: 10px 15px; border-radius: 8px; display: inline-block;">${productPrice}</div>` : ''}
                <div style="margin-bottom: 25px; color: #555; line-height: 1.7; position: relative; font-size: 16px;">
                  ${productDescription}
                </div>
                ${productOptions}
                ${addToCartForm}
                <a href="${productLink}" style="display: block; text-align: center; margin: 30px 0 10px; padding: 15px 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); transition: all 0.3s ease;">عرض تفاصيل المنتج</a>
              </div>
            </div>
          `;
          // إضافة حدث لعرض المزيد من الوصف
          const moreContent = content.querySelector('#more-content');
          const btnShowMore = content.querySelector('#btn-show-more');
          if (moreContent && btnShowMore) {
            btnShowMore.addEventListener('click', function (e) {
              e.preventDefault();
              if (moreContent.style.maxHeight === '5.25rem') {
                moreContent.style.maxHeight = 'none';
                btnShowMore.textContent = 'إظهار أقل';
              } else {
                moreContent.style.maxHeight = '5.25rem';
                btnShowMore.textContent = 'قراءة المزيد';
              }
            });
          }
          // إضافة أحداث لتبديل الصور عند اختيار الخيارات
          const optionImages = content.querySelectorAll('.s-product-options-thumbnails-wrapper img');
          if (optionImages) {
            optionImages.forEach(img => {
              img.addEventListener('click', function () {
                const mainImg = content.querySelector('#main-product-image');
                if (mainImg && this.dataset.imgId) {
                  // البحث عن الصورة المقابلة للخيار المحدد
                  const newImgSrc = this.src.replace('-thumbnail', '') || this.src;
                  mainImg.src = newImgSrc;
                }
              });
            });
          }
        } catch (error) {
          content.innerHTML = `
            <div style="text-align: center; padding: 30px; color: #e74c3c;">
              <div style="font-size: 48px; margin-bottom: 20px;">⚠️</div>
              <p style="margin-bottom: 20px; font-size: 18px; color: #555;">حدث خطأ أثناء تحميل بيانات المنتج.</p>
              <button onclick="this.closest('.quick-view-modal').querySelector('.quick-view-btn').click()" style="padding: 12px 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 16px; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);">إعادة المحاولة</button>
            </div>
          `;
          console.error('Error loading product:', error);
        }
      };
      // أضف الزر في مكان مناسب في البطاقة
      const btnContainer = document.createElement("div");
      btnContainer.classList.add("eye-view");
      btnContainer.style.position = 'absolute';
      btnContainer.style.left = '15px';
      btnContainer.style.top = '15px';
      btnContainer.style.zIndex = '10';
      btnContainer.appendChild(btn);
      card.style.position = 'relative';
      card.appendChild(btnContainer);
    });
  }, 3000);
});

document.addEventListener("DOMContentLoaded", function () {
  const style = document.createElement("style");
  style.innerHTML = `
      .s-product-card-vertical .s-product-card-wishlist-btn {
        position: absolute !important;
        top: 65px !important;
        z-index: 5;
      }
    `;
  document.head.appendChild(style);
});






// document.addEventListener("DOMContentLoaded", function () {
//   // إنشاء زر الإعدادات
//   const settingsBtn = document.createElement("button");
//   settingsBtn.innerHTML = "⚙";
//   settingsBtn.id = "settings-btn";
//   document.body.appendChild(settingsBtn);

//   // إنشاء لوحة الإعدادات
//   const settingsPanel = document.createElement("div");
//   settingsPanel.id = "settings-panel";
//   document.body.appendChild(settingsPanel);

//   // إضافة الأنماط
//   const style = document.createElement("style");
//   style.textContent = `
//     #settings-btn {
//       position: fixed;
//       left: 16px;
//       top: 78%;
//       cursor: pointer;
//       z-index: 10;
//       font-size: 30px;
//       border: none;
//       border-radius: 30%;
//       width: 50px;
//       height: 50px;
//       display: flex;
//       align-items: center;
//       justify-content: center;
//       box-shadow: 0 6px 12px #B4AA99;
//       transition: all 0.3s ease;
//       transform: translateX(-30px);
//       opacity: 0.95;
//       color: #fff;
//       background: #1313134;
//       border: 2px solid white;
//       background: var(--navBgColor);
//     }
//  #settings-btn:hover {

//   opacity: 1;
//   width: 100px;
//   border-radius: 10px;
//   background: var(--navBgColor) !important;
// }
//     #settings-panel {
//       position: fixed;
//       left: 65px;
//       top: 50%;
//       background: var(--g-one);
//       border-radius: 14px;
//       z-index: 9999;
//       box-shadow: 0 5px 10px var(--g-two);
//       min-width: 360px;
//       max-width: 90vw;
//       padding: 24px 30px;
//       transform: scale(0.9);
//       opacity: 0;
//       transition: all 0.3s ease;
//       pointer-events: none;
//       color: #fff;
//     }
//     #settings-panel.visible {
//       transform: scale(1);
//       opacity: 1;
//       pointer-events: auto;
//     }
//     .settings-header {
//       font-size: 22px;
//       font-weight: 700;
//       margin-bottom: 20px;
//       display: flex;
//       justify-content: space-between;
//     }
//     .close-btn {
//       cursor: pointer;
//       font-size: 30px;
//     }
//     .setting-group {
//       margin-bottom: 28px;
//     }
//     .setting-label {
//       font-weight: 700;
//       font-size: 17px;
//       margin-bottom: 10px;
//       display: flex;
//       align-items: center;
//       cursor: pointer;
//     }
//     .toggle-icon {
//       margin-right: 10px;
//       font-size: 20px;
//       transition: transform 0.3s ease;
//     }
//     .font-size-controls, .translate-container {
//       max-height: 0;
//       overflow: hidden;
//       transition: max-height 0.5s ease, padding 0.5s ease;
//       padding-left: 10px;
//       border-left: 3px solid #4a6bff;
//       margin-top: 12px;
//       border-radius: 8px;
//       background-color: #f7f9ff;
//     }
//     .font-size-controls.open, .translate-container.open {
//       max-height: 280px;
//       padding: 15px !important;
//     }
//     .font-size-controls {
//       display: flex;
//       align-items: center;
//       gap: 14px;
//     }
//     .font-size-controls button {
//       width: 36px;
//       height: 36px;
//       border-radius: 8px;
//       background-color: #4a6bff;
//       color: white;
//       font-size: 22px;
//       cursor: pointer;
//       border: none;
//       display: flex;
//       align-items: center;
//       justify-content: center;
//     }
//     .font-size-display {
//       font-size: 18px;
//       width: 38px;
//       text-align: center;
//       font-weight: 700;
//       color: #334;
//     }
//     .reset-size-btn {
//       background-color: #888 !important;
//       width: 38px;
//       font-size: 28px;
//     }
//     #google_translate_element {
//       padding: 10px;
//     }
//     .goog-te-combo {
//       padding: 8px;
//       border-radius: 6px;
//       border: 1px solid #ddd;
//       width: 100%;
//     }
//   `;
//   document.head.appendChild(style);

//   // محتوى لوحة الإعدادات
//   settingsPanel.innerHTML = `
//     <div class="settings-header">
//       <span>إعدادات المتجر</span>
//       <span class="close-btn" title="إغلاق الإعدادات">&times;</span>
//     </div>

//     <div class="setting-group " style="display: none;">
//       <label class="setting-label" id="font-size-label">
//         حجم النص <span class="toggle-icon" id="toggle-font-size">+</span>
//       </label>
//       <div class="font-size-controls" id="font-size-controls">
//         <button id="font-size-decrease">−</button>
//         <span class="font-size-display" id="font-size-display">16</span>
//         <button id="font-size-increase">+</button>
//         <button class="reset-size-btn" id="font-size-reset">×</button>
//       </div>
//     </div>

//     <div class="setting-group">
//       <label class="setting-label" id="translate-label">
//         الترجمة <span class="toggle-icon" id="toggle-translate">+</span>
//       </label>
//       <div class="translate-container" id="translate-container"></div>
//     </div>
//   `;
//   // عناصر DOM
//   const fontSizeControls = document.getElementById("font-size-controls");
//   const fontSizeDisplay = document.getElementById("font-size-display");
//   const translateContainer = document.getElementById("translate-container");

//   // أيقونات التبديل
//   const toggleFontSizeIcon = document.getElementById("toggle-font-size");
//   const toggleTranslateIcon = document.getElementById("toggle-translate");

//   // وظيفة تبديل الأقسام
//   function toggleSection(sectionEl, toggleIcon) {
//     const isOpen = sectionEl.classList.toggle("open");
//     toggleIcon.textContent = isOpen ? "−" : "+";
//   }

//   // أحداث النقر على العناوين
//   document.getElementById("font-size-label").addEventListener("click", () => {
//     toggleSection(fontSizeControls, toggleFontSizeIcon);
//   });

//   document.getElementById("translate-label").addEventListener("click", () => {
//     toggleSection(translateContainer, toggleTranslateIcon);
//     if (!document.getElementById('google_translate_element')) {
//       const container = document.createElement('div');
//       container.id = 'google_translate_element';
//       translateContainer.appendChild(container);

//       window.googleTranslateElementInit = function () {
//         new google.translate.TranslateElement({
//           pageLanguage: 'ar',
//           includedLanguages: 'ar,en',
//           layout: google.translate.TranslateElement.InlineLayout.SIMPLE
//         }, 'google_translate_element');
//       };

//       const script = document.createElement('script');
//       script.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
//       document.body.appendChild(script);
//     }
//   });

//   // إعدادات حجم الخط
//   const defaultFontSizePx = 16;
//   let currentFontSizePx = defaultFontSizePx;

//   // تطبيق حجم الخط
//   function applyFontSize(sizePx) {
//     document.body.style.fontSize = sizePx + 'px';
//     fontSizeDisplay.textContent = sizePx;
//     localStorage.setItem("fontSize", sizePx);
//   }

//   // أحداث أزرار حجم الخط
//   document.getElementById("font-size-increase").addEventListener("click", () => {
//     currentFontSizePx++;
//     applyFontSize(currentFontSizePx);
//   });

//   document.getElementById("font-size-decrease").addEventListener("click", () => {
//     if (currentFontSizePx > 10) {
//       currentFontSizePx--;
//       applyFontSize(currentFontSizePx);
//     }
//   });

//   document.getElementById("font-size-reset").addEventListener("click", () => {
//     currentFontSizePx = defaultFontSizePx;
//     applyFontSize(currentFontSizePx);
//   });

//   // تحميل التفضيلات المحفوظة
//   function loadPreferences() {
//     // تحميل حجم الخط
//     const savedFontSize = localStorage.getItem("fontSize");
//     if (savedFontSize) {
//       currentFontSizePx = parseInt(savedFontSize);
//       applyFontSize(currentFontSizePx);
//     } else {
//       applyFontSize(defaultFontSizePx);
//     }
//   }

//   // أحداث إغلاق/فتح لوحة الإعدادات
//   document.querySelector(".close-btn").addEventListener("click", () => {
//     settingsPanel.classList.remove("visible");
//   });

//   settingsBtn.addEventListener("click", function (e) {
//     e.stopPropagation();
//     settingsPanel.classList.toggle("visible");
//   });

//   document.addEventListener("click", function (e) {
//     if (!settingsPanel.contains(e.target) && e.target !== settingsBtn) {
//       settingsPanel.classList.remove("visible");
//     }
//   });

//   // تحميل التفضيلات عند بدء التشغيل
//   loadPreferences();
// });

// أول مرة عند تحميل الصفحة
// document.addEventListener("DOMContentLoaded", () => {
//   addPromoToCards();

//   // راقب تغييرات DOM — مثلاً إذا أضيفت منتجات جديدة لاحقًا
//   const observer = new MutationObserver(() => {
//     addPromoToCards();
//   });

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

// JavaScript للتأثير التحميل
// document.addEventListener("DOMContentLoaded", function () {
//   const loadingScreen = document.createElement("div");
//   loadingScreen.id = "loading-screen";
//   loadingScreen.innerHTML = `
//     <div class="loading-logo"></div>
//     <div class="loading-spinner"></div>
//     <div class="loading-text">جاري التحميل...</div>
//   `;

//   document.body.prepend(loadingScreen);

//   // إخفاء شاشة التحميل بعد تحميل الصفحة
//   window.addEventListener("load", function () {
//     setTimeout(function () {
//       loadingScreen.style.opacity = "0";
//       setTimeout(function () {
//         loadingScreen.remove();
//       }, 500);
//     }, 1500);
//   });
// });

// // تحقق إذا كنا في صفحة index
// function isIndexPage() {
//   return document.body.classList.contains("index");
// }

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


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

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

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

//   // إضافة أيقونة التمرير للأعلى

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

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

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

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

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

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

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

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

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

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









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

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

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

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

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

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

//   //-----------
//   //*******************

//   //------------

//   // اللوقو
//   const logoImg = document.querySelector("a.navbar-brand img");
//   const logoLink = document.querySelector("a.navbar-brand");

//   logoImg.title = "اضغط مرتين لفتح اللوقو";

//   logoLink.href = "#";
//   logoLink.onclick = (e) => e.preventDefault();

//   logoLink.addEventListener("dblclick", () => {
//     window.open(logoImg.src, "_blank");
//   });



//   //************ 

//   (function () {
//     const style = document.createElement("style");
//     style.textContent = `
//     @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

//     .testimonial-title {
//       text-align: center;
//       font-size: 28px;
//       font-weight: bold;
//       color: var(--1);
//       margin-bottom: 30px;
//     }

//     .swiper-container {
//       padding: 40px 0;
//       background: transparent;
//       position: relative;
//     }

//     .swiper-wrapper {
//       display: flex;
//       align-items: center;
//     }

//     .swiper-slide {
//       display: flex;
//       justify-content: center;
//     }

//     .testimonial-bubble {
//       width: 280px;
//       height: 280px;
//       background: #CE570C;
//       border-radius: 61% 39% 52% 48% / 44% 59% 41% 56%;
//       box-shadow:
//         inset 20px 20px 20px rgba(0, 0, 0, 0.05),
//         5px 25px 20px rgba(0, 0, 0, 0.05),
//         5px 20px 30px rgba(0, 0, 0, 0.05),
//         inset -20px -20px 25px rgba(255, 255, 255, 0.9);
//       transition: 0.5s ease-in-out;
//       position: relative;
//       overflow: hidden;
//       display: flex;
//       flex-direction: column;
//       align-items: center;
//       justify-content: center;
//     }

//     .testimonial-bubble:hover {
//       border-radius: 50%;
//     }

//     .testimonial-bubble::before,
//     .testimonial-bubble::after {
//       content: "";
//       position: absolute;
//       background: #fff;
//       border-radius: 50%;
//       opacity: 0.9;
//     }

//     .testimonial-bubble::before {
//       top: 50px;
//       left: 65px;
//       width: 35px;
//       height: 35px;
//     }

//     .testimonial-bubble::after {
//       top: 90px;
//       left: 85px;
//       width: 15px;
//       height: 15px;
//     }

//     .testimonial-bubble img {
//       width: 100px;
//       height: 100px;
//       border-radius: 50%;
//       object-fit: cover;
//       border: 3px solid #fff;
//       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
//       opacity: 0.85;
//       margin-bottom: 10px;
//     }

//     .testimonial-name {
//       font-size: 20px;
//       font-weight: 600;
//       color: #fff;
//     }

//     .testimonial-review {
//       font-size: 14px;
//       color: #fff;
//       padding: 0 15px;
//       margin-top: 8px;
//       line-height: 1.5;
//       text-align: center;
//     }

//     .testimonial-stars {
//       margin-top: 10px;
//       font-size: 18px;
//       color: #ffc107;
//     }

//     .swiper-button-next,
//     .swiper-button-prev {
//       color: #fff;
//       background: #DC3F11;
//       width: 36px;
//       height: 36px;
//       border-radius: 50%;
//       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
//       display: flex;
//       align-items: center;
//       justify-content: center;
//       top: 50%;
//       transform: translateY(-50%);
//       position: absolute;
//       z-index: 10;
//       transition: background 0.3s;
//     }

//     .swiper-button-next:hover,
//     .swiper-button-prev:hover {
//       background: #b7320f;
//     }

//     .swiper-button-next::after,
//     .swiper-button-prev::after {
//       font-size: 18px;
//       font-weight: bold;
//     }

//     .swiper-button-prev {
//       left: 10px;
//     }

//     .swiper-button-next {
//       right: 10px;
//     }

//     .swiper-pagination {
//       margin-top: 20px;
//       position: relative;
//       text-align: center;
//     }

//     .swiper-pagination-bullet {
//       width: 10px;
//       height: 10px;
//       background: #888;
//       opacity: 1;
//       margin: 0 4px;
//       border-radius: 50%;
//     }

//     .swiper-pagination-bullet-active {
//       background: #333;
//     }

//     @media (max-width: 768px) {
//       .swiper-slide {
//         display: flex !important;
//         justify-content: center !important;
//         align-items: center;
//         width: 100% !important;
//       }

//       .testimonial-bubble {
//         width: 90% !important;
//         margin: 0 auto !important;
//         height: auto !important;
//         padding: 20px;
//       }

//       .swiper-button-next,
//       .swiper-button-prev {
//         top: unset;
//         bottom: -25px;
//       }

//       .swiper-button-prev {
//         left: 30%;
//       }

//       .swiper-button-next {
//         right: 30%;
//       }
//     }

//     .swiper-horizontal {
//       width: 100% !important;
//       overflow: hidden !important;
//     }
//   `;
//     document.head.appendChild(style);

//     const swiperCSS = document.createElement("link");
//     swiperCSS.rel = "stylesheet";
//     swiperCSS.href = "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";
//     document.head.appendChild(swiperCSS);

//     const swiperJS = document.createElement("script");
//     swiperJS.src = "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js";
//     swiperJS.onload = initTestimonials;
//     document.head.appendChild(swiperJS);

//     function initTestimonials() {
//       const testimonials = [
//         {
//           name: "سلمان العتيبي",
//           image: "https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp",
//           review: "والله الشغل نظيف وتعامل راقٍ، يعطيكم العافية!",
//           rating: 4
//         },
//         {
//           name: "نورة القحطاني",
//           image: "https://cdn.salla.sa/form-builder/ZyVHHa7UyP76mOyYttTmTmN71ZNJxq8hbEgQGRYt.webp",
//           review: "خدمتكم ممتازة وتستاهلون أكثر من خمس نجوم!",
//           rating: 5
//         },
//         {
//           name: "تركي السبيعي",
//           image: "https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp",
//           review: "جربت خدماتهم وكانت فوق التوقعات صراحة!",
//           rating: 5
//         },
//         {
//           name: "محمد الحربي",
//           image: "https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp",
//           review: "صراحة ما كنت أتوقع تكون التجربة بهذه الروعة!",
//           rating: 5
//         },
//         {
//           name: "جواهر الشهري",
//           image: "https://cdn.salla.sa/form-builder/ZyVHHa7UyP76mOyYttTmTmN71ZNJxq8hbEgQGRYt.webp",
//           review: "مره أعجبني التنظيم والدقة، ما شاء الله.",
//           rating: 4
//         }
//       ];

//       const section = document.createElement("section");
//       section.innerHTML = `
//       <h2 class="testimonial-title">آراء العملاء</h2>
//       <div class="swiper-container">
//         <div class="swiper-wrapper">
//           ${testimonials.map(t => `
//             <div class="swiper-slide">
//               <div class="testimonial-bubble">
//                 <img src="${t.image}" alt="${t.name}">
//                 <div class="testimonial-name">${t.name}</div>
//                 <div class="testimonial-review">"${t.review}"</div>
//                 <div class="testimonial-stars">${"★".repeat(t.rating)}${"☆".repeat(5 - t.rating)}</div>
//               </div>
//             </div>
//           `).join('')}
//         </div>
//         <div class="swiper-pagination"></div>
//         <div class="swiper-button-prev"></div>
//         <div class="swiper-button-next"></div>
//       </div>
//     `;

//       const footer = document.querySelector("footer") || document.querySelector(".footer") || document.body;

//       new Swiper(".swiper-container", {
//         direction: 'horizontal',
//         grabCursor: true,
//         rewind: true, // ✅ أكثر استقرارًا من loop
//         slidesPerView: 1,
//         spaceBetween: 20,
//         speed: 500,
//         shortSwipes: true,
//         longSwipesRatio: 0.3,
//         watchSlidesProgress: true,
//         watchSlidesVisibility: true,
//         allowTouchMove: true,
//         pagination: {
//           el: ".swiper-pagination",
//           clickable: true
//         },
//         navigation: {
//           nextEl: ".swiper-button-next",
//           prevEl: ".swiper-button-prev"
//         },
//         breakpoints: {
//           768: {
//             slidesPerView: 2,
//             spaceBetween: 20
//           },
//           1024: {
//             slidesPerView: 3,
//             spaceBetween: 30
//           }
//         }
//       });
//     }
//   })();
//   //***************** */

//   //------------------------------------------

//   // ***************** /



//   //------------------------------------------
// لماذا تختارنا 
  document.addEventListener("DOMContentLoaded", () => {
    const statsSection = document.createElement("section");
    statsSection.className = "stats-section";
    statsSection.setAttribute("aria-label", "إحصائيات الخدمة");
    statsSection.innerHTML = `
     <h2 class="stats-title">لماذا تختارنا؟</h2>
     <div class="stats-container" role="list">
       <article class="stat-item" data-count="490" aria-label="عدد العملاء السعداء" role="listitem" tabindex="0">
         <div class="icon-wrapper" aria-hidden="true">
           <img src="https://i.ibb.co/DgGyqwFj/like.gif" alt="" class="stat-icon" />
         </div>
         <span class="stat-number" aria-live="polite" aria-atomic="true">0</span>
         <p class="stat-text">عميل سعيد</p>
       </article>

       <article class="stat-item" data-count="500" aria-label="عدد الطلبات المكتملة" role="listitem" tabindex="0">
         <div class="icon-wrapper" aria-hidden="true">
           <img src="https://i.ibb.co/N6KvVfWt/delivery-truck.gif" alt="" class="stat-icon" />
         </div>
         <span class="stat-number" aria-live="polite" aria-atomic="true">0</span>
         <p class="stat-text">طلب مكتمل</p>
       </article>

       <article class="stat-item" data-count="24" aria-label="ساعات الدعم الفني" role="listitem" tabindex="0">
         <div class="icon-wrapper" aria-hidden="true">
           <img src="https://i.ibb.co/LXy5p6vP/helpdesk.gif" alt="" class="stat-icon" />
         </div>
         <span class="stat-number" aria-live="polite" aria-atomic="true">0</span>
         <p class="stat-text">دعم فني </p>
       </article>
     </div>
   `;

    const footer = document.querySelector("footer");
    if (footer) {
      footer.parentNode.insertBefore(statsSection, footer);
    } else {
      document.body.appendChild(statsSection);
    }

    const style = document.createElement("style");
    style.textContent = `
     :root {
       --primary-color: var(--1);
       --secondary-color: #6c7a9e;
       --background-color: #f9fbff;
       --text-color: #223344;
       --spacing: clamp(20px, 3vw, 60px);
       --card-radius: 24px;
       --transition-time: 0.4s;
       --shadow-light: rgba(49, 116, 255, 0.15);
       --shadow-strong: rgba(49, 116, 255, 0.3);
     }

     body {
       background-color: var(--background-color);
       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
       color: var(--text-color);
       margin: 0;
       padding: 0;
     }

     .stats-section {
       padding: var(--spacing) 20px;
       max-width: 1200px;
       margin: 10px auto;
       text-align: center;
     }

     .stats-title {
       font-size: clamp(2rem, 4vw, 3rem);
       margin-bottom: var(--spacing);
       font-weight: 800;
       color: var(--primary-color);
       text-shadow: 0 2px 6px rgba(0 0 0 / 0.1);
       user-select: none;
       animation: fadeInUp 1s ease forwards;
     }

     .stats-container {
       display: flex;
       justify-content: center;
       gap: clamp(30px, 5vw, 60px);
       flex-wrap: wrap;
       perspective: 1000px;
     }

     .stat-item {
       background: white;
       border-radius: var(--card-radius);
       box-shadow: 0 8px 25px #555879;
       padding: 20px 10px;
       width: 200px;
       cursor: default;
       display: flex;
       flex-direction: column;
       align-items: center;
       transition:
         box-shadow var(--transition-time) ease,
         transform var(--transition-time) ease;
       user-select: none;
       will-change: transform;
       opacity: 0;
       transform: translateY(40px);
     }

     .stat-item.visible {
       opacity: 1;
       transform: translateY(0);
       animation: pulseScale 2.5s ease infinite;
     }

     .stat-item:hover {
       box-shadow: 0 16px 40px rgba(0 0 0 / 0.12);
       transform: translateY(-15px) scale(1.06);
       animation-play-state: paused;
     }

     .icon-wrapper {
       width: 80px;
       height: 80px;
       margin-bottom: 25px;
       transition: transform 0.5s ease;
       filter: drop-shadow(0 3px 6px rgba(0 0 0 / 0.1));
       display: flex;
       justify-content: center;
       align-items: center;
     }

     .stat-item:hover .icon-wrapper {
       transform: rotate(15deg) scale(1.15);
       filter: drop-shadow(0 6px 10px rgba(0 0 0 / 0.15));
     }

     .stat-icon {
       max-width: 80px;
       max-height: 80px;
       user-select: none;
       pointer-events: none;
     }

     .stat-number {
       font-size: clamp(2.8rem, 6vw, 3.5rem);
       font-weight: 900;
       color: var(--primary-color);
       margin-bottom: 8px;
       letter-spacing: 0.05em;
       user-select: text;
     }

     .stat-text {
       font-size: clamp(1.1rem, 2vw, 1.4rem);
       font-weight: 600;
       color: var(--secondary-color);
       user-select: text;
     }

     @keyframes fadeInUp {
       0% {
         opacity: 0;
         transform: translateY(30px);
       }
       100% {
         opacity: 1;
         transform: translateY(0);
       }
     }

     @keyframes pulseScale {
       0%, 100% {
         transform: scale(1);
       }
       50% {
         transform: scale(1.05);
       }
     }

     @media (max-width: 900px) {
       .stats-container {
         gap: 40px;
       }
       .stat-item {
         width: 45vw;
         padding: 30px 20px;
       }
       .stat-number {
         font-size: 6vw;
       }
     }

     @media (max-width: 480px) {
       .stats-container {
         flex-direction: column;
         align-items: center;
         gap: 30px;
       }
       .stat-item {
         width: 80vw;
       }
     }
   `;
    document.head.appendChild(style);

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("visible");
            animateNumber(entry.target);
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.4 }
    );

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

    function animateNumber(item) {
      const target = parseInt(item.getAttribute("data-count"), 10);
      const numberElem = item.querySelector(".stat-number");
      let current = 0;
      const stepTime = Math.max(20, 1500 / target);

      const addPlusOrSlash = () => {
        if (target > 1000) return "+";
        if (target <= 30) return "/7";
        return "";
      };

      const suffix = addPlusOrSlash();

      const timer = setInterval(() => {
        current += Math.ceil(target / 60);
        if (current >= target) {
          current = target;
          clearInterval(timer);
        }
        numberElem.textContent = current.toLocaleString("en-EG") + suffix;
      }, stepTime);
    }
  });

//***************** */







// -------------- البحث --------------
const searchBar = document.querySelector('.header-search');
const target = document.querySelector('.flex.items-center.justify-end');

if (!document.querySelector('#custom-modal') && searchBar && target) {
  searchBar.style.display = 'none';

  const originalParent = searchBar.parentElement;

  const modal = document.createElement('div');
  modal.id = 'custom-modal';
  modal.className = 'fixed inset-0 backdrop-blur-sm bg-white/30 flex items-center justify-center z-50 hidden';

  const modalContent = document.createElement('div');
  modalContent.className = 'bg-white p-6 rounded shadow w-full max-w-md relative';

  const closeBtn = document.createElement('button');
  closeBtn.className = 'absolute top-2 right-2 text-gray-500 text-xl';
  closeBtn.innerHTML = '&times;';
  closeBtn.onclick = () => {
    modal.classList.add('hidden');
    searchBar.style.display = 'none';
  };

  modalContent.appendChild(closeBtn);
  modal.appendChild(modalContent);
  document.body.appendChild(modal);

  const btn = document.createElement('button');
  btn.innerHTML = '<i class="sicon-search text-xl"></i>';
  btn.className = 'header-btn ml-2';
  btn.addEventListener('click', () => {
    modal.classList.remove('hidden');
    modalContent.appendChild(searchBar);
    searchBar.style.display = 'block';
  });

  target.insertBefore(btn, target.firstChild);
}

// -------------- الرؤية السريعة--------------
// document.addEventListener("DOMContentLoaded", function () {
//   // إنشاء مودال عرض سريع
//   const modal = document.createElement("div");
//   modal.className = "quick-view-modal";
//   modal.style.cssText = `
//     position: fixed; 
//     top: 50%; 
//     left: 50%;
//     transform: translate(-50%, -50%);
//     background: white; 
//     padding: 20px;
//     box-shadow: 0 2px 10px rgba(0,0,0,0.3);
//     border-radius: 8px;
//     max-width: 90%;
//     width: 90%;
//     max-height: 90vh;
//     overflow-y: auto;
//     display: none;
//     z-index: 10001;
//   `;

//   const overlay = document.createElement("div");
//   overlay.className = "quick-view-overlay";
//   overlay.style.cssText = `
//     position: fixed; 
//     top: 0; 
//     left: 0; 
//     right: 0; 
//     bottom: 0;
//     background: rgba(0,0,0,0.7);
//     display: none;
//     z-index: 10000;
//   `;

//   // زر إغلاق محسّن
//   const closeBtn = document.createElement("button");
//   closeBtn.innerHTML = "×";
//   closeBtn.style.cssText = `
//     position: fixed; 
//     top: 15px; 
//     right: 15px;
//     background: #2c3e50;
//     color: white;
//     border: none;
//     font-size: 24px;
//     cursor: pointer;
//     width: 40px;
//     height: 40px;
//     border-radius: 50%;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     z-index: 10002;
//   `;
//   closeBtn.setAttribute("aria-label", "إغلاق");

//   // محتوى المودال
//   const content = document.createElement("div");
//   content.style.cssText = `
//     margin-top: 20px;
//     padding-bottom: 40px;
//   `;

//   // مؤشر تحميل
//   const loader = document.createElement("div");
//   loader.innerHTML = `
//     <div style="display: flex; justify-content: center; align-items: center; height: 200px;">
//       <div style="border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite;"></div>
//     </div>
//     <style>
//       @keyframes spin {
//         0% { transform: rotate(0deg); }
//         100% { transform: rotate(360deg); }
//       }
//     </style>
//   `;

//   modal.appendChild(closeBtn); // نقل زر الإغلاق داخل المودال
//   modal.appendChild(content);
//   document.body.appendChild(modal);
//   document.body.appendChild(overlay);

//   // إغلاق المودال
//   function closeModal() {
//     modal.style.display = "none";
//     overlay.style.display = "none";
//     content.innerHTML = "";
//   }
//   closeBtn.onclick = closeModal;
//   overlay.onclick = closeModal;

//   // إضافة أزرار العرض السريع
//   setTimeout(() => {
//     document.querySelectorAll(".s-product-card-entry").forEach(card => {
//       if (card.querySelector(".quick-view-btn")) return;

//       const btn = document.createElement("button");
//       btn.className = "quick-view-btn";
//       btn.innerHTML = "👁️";
//       btn.style.cssText = `
//         padding: 0px;
//         cursor: pointer;
//         background: #424242;
//         color: rgb(255, 255, 255);
//         border-radius: 30%;
//         font-size: 14px;
//         width: 37px;
//         height: 30px;
//         transition: background 0.3s;
//         display: flex;
//         justify-content: center;
//         align-items: center;
//         position: absolute;
//         left: 1px;
//         top: 51px;
//         z-index: 10;
//         border: 2px solid #eee;
//       `;

//       btn.addEventListener('mouseenter', () => {
//         btn.style.background = '#1a252f';
//       });
//       btn.addEventListener('mouseleave', () => {
//         btn.style.background = '#2c3e50';
//       });

//       btn.onclick = async (e) => {
//         e.preventDefault();
//         e.stopPropagation();

//         const productLink = card.querySelector('a')?.href;
//         if (!productLink) return;

//         // عرض مؤشر التحميل
//         content.innerHTML = '';
//         content.appendChild(loader);
//         modal.style.display = "block";
//         overlay.style.display = "block";

//         try {
//           // جلب محتوى صفحة المنتج
//           const response = await fetch(productLink);
//           const html = await response.text();

//           // تحليل HTML
//           const parser = new DOMParser();
//           const doc = parser.parseFromString(html, 'text/html');

//           // استخراج البيانات من صفحة المنتج في سلة
//           const productTitle = doc.querySelector('h1')?.textContent.trim() || 'بدون عنوان';

//           // إصلاح مشكلة ظهور الصفر - البحث عن السعر الصحيح
//           let productPrice = '';
//           const priceContainer = doc.querySelector('.price-wrapper');
//           if (priceContainer) {
//             // البحث عن السعر الفعلي (غير المخفي)
//             const actualPrice = priceContainer.querySelector('.total-price:not(.hidden)') ||
//               priceContainer.querySelector('.total-price');
//             if (actualPrice) {
//               productPrice = actualPrice.textContent.trim();
//               // إزالة أي أصفار غير مرغوب فيها
//               productPrice = productPrice.replace(/0\s*<i/g, '').trim();
//             }
//           }

//           // استخراج الوصف مع زر عرض المزيد
//           let productDescription = doc.querySelector('.product__description')?.innerHTML || 'لا يوجد وصف متوفر.';

//           // استخراج الصور
//           const mainImage = doc.querySelector('.details-slider img')?.src;
//           const thumbnails = Array.from(doc.querySelectorAll('.s-slider-thumbs img')).map(img => img.src);

//           // استخراج الخيارات
//           const productOptions = doc.querySelector('.s-product-options-option-container')?.outerHTML || '';

//           // استخراج زر الإضافة للسلة
//           const addToCartForm = doc.querySelector('form.product-form')?.outerHTML || '';

//           // بناء محتوى المودال
//           content.innerHTML = `
//             <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
//               <div>
//                 ${mainImage ? `
//                   <div style="margin-bottom: 15px; text-align: center;">
//                     <img id="main-product-image" src="${mainImage}" alt="${productTitle}" style="max-width: 100%; max-height: 100%; border-radius: 6px; object-fit: cover;"/>
//                   </div>
//                   ${thumbnails.length > 0 ? `
//                   <div style="display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;">
//                     ${thumbnails.map(img => `
//                       <img src="${img}" alt="" style="width: 60px; height: 60px; object-fit: cover; border-radius: 4px; cursor: pointer;" 
//                            onclick="document.getElementById('main-product-image').src = this.src">
//                     `).join('')}
//                   </div>
//                   ` : ''}
//                 ` : ''}
//               </div>
//               <div style="padding: 0 10px;">
//                 <h2 style="margin: 0 0 10px 0; color: #2c3e50; font-size: 1.5rem;">${productTitle}</h2>
//                 ${productPrice ? `<div style="font-size: 1.5rem; font-weight: bold; color: #e74c3c; margin-bottom: 15px;">${productPrice}</div>` : ''}
//                 <div style="margin-bottom: 20px; color: #555; line-height: 1.6; position: relative;">
//                   ${productDescription}
//                 </div>
//                 ${productOptions}
//                 ${addToCartForm}
//                 <a href="${productLink}" style="display: block; text-align: center; margin: 20px 0; padding: 12px; background: var(--1); color: white; text-decoration: none; border-radius: 4px;">عرض كامل المنتج</a>
//               </div>
//             </div>
//           `;

//           // إضافة حدث لعرض المزيد من الوصف
//           const moreContent = content.querySelector('#more-content');
//           const btnShowMore = content.querySelector('#btn-show-more');

//           if (moreContent && btnShowMore) {
//             btnShowMore.addEventListener('click', function (e) {
//               e.preventDefault();
//               if (moreContent.style.maxHeight === '5.25rem') {
//                 moreContent.style.maxHeight = 'none';
//                 btnShowMore.textContent = 'إظهار أقل';
//               } else {
//                 moreContent.style.maxHeight = '5.25rem';
//                 btnShowMore.textContent = 'قراءة المزيد';
//               }
//             });
//           }

//           // إضافة أحداث لتبديل الصور عند اختيار الخيارات
//           const optionImages = content.querySelectorAll('.s-product-options-thumbnails-wrapper img');
//           if (optionImages) {
//             optionImages.forEach(img => {
//               img.addEventListener('click', function () {
//                 const mainImg = content.querySelector('#main-product-image');
//                 if (mainImg && this.dataset.imgId) {
//                   // البحث عن الصورة المقابلة للخيار المحدد
//                   const newImgSrc = this.src.replace('-thumbnail', '') || this.src;
//                   mainImg.src = newImgSrc;
//                 }
//               });
//             });
//           }

//         } catch (error) {
//           content.innerHTML = `
//             <div style="text-align: center; padding: 20px; color: #e74c3c;">
//               <p>حدث خطأ أثناء تحميل بيانات المنتج.</p>
//               <button onclick="this.closest('.quick-view-modal').querySelector('.quick-view-btn').click()" style="padding: 8px 15px; background: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer;">إعادة المحاولة</button>
//             </div>
//           `;
//           console.error('Error loading product:', error);
//         }
//       };

//       // أضف الزر في مكان مناسب في البطاقة
//       const btnContainer = document.createElement("div");
//       btnContainer.classList.add("eye-view");
//       btnContainer.style.position = 'absolute';
//       btnContainer.style.left = '2px';
//       btnContainer.style.top = '50%';
//       btnContainer.style.zIndex = '10';

//       btnContainer.appendChild(btn);
//       card.style.position = 'relative';
//       card.appendChild(btnContainer);
//     });
//   }, 3000);
// });

// document.addEventListener("DOMContentLoaded", function () {
//   const style = document.createElement("style");
//   style.innerHTML = `
//       .s-product-card-vertical .s-product-card-wishlist-btn {
//         position: absolute !important;
//         top: 130px !important;
//         z-index: 5;
//       }
//     `;
//   document.head.appendChild(style);
// });



// إضافة مكتبة Font Awesome تلقائياً للهيدر
const fa = document.createElement("link");
fa.rel = "stylesheet";
fa.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css";
fa.crossOrigin = "anonymous";
fa.referrerPolicy = "no-referrer";
document.head.appendChild(fa);
//end icons
// 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);
// Create the loader div element


// ==================== 🖼️ SCROLL EFFECT FOR BANNERS ====================
function handleScroll() {
  const elements = document.querySelectorAll('.banner--fixed img');

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

    // إذا العنصر ظهر في نافذة المتصفح
    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      // هنضيف الكلاس visible لتشغيل تأثير الـ Bounce و Zoom
      if (!element.classList.contains('visible')) {
        element.classList.add('visible');
      }
    } else {
      // لو العنصر مش ظاهر، نشيل الكلاس visible علشان التأثير يتكرر لما يظهر تاني
      if (element.classList.contains('visible')) {
        element.classList.remove('visible');
      }
    }
  });
}

window.addEventListener('scroll', handleScroll);
handleScroll(); // لتنفيذ التأثير أول مرة عند تحميل الصفحة



// ==================== 🖼️ SCROLL EFFECT FOR PHOTOS SLIDER ====================
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'); // إضافة الكلاس ليحصل التأثير
      }
    }
  });
}

window.addEventListener('scroll', handleScroll2);
handleScroll2(); // لتنفيذ التأثير عند تحميل الصفحة



// ======== 🖼️ SCROLL EFFECT FOR BACKGROUND =========
function handleScroll3() {
  const elements = document.querySelectorAll('.lazy__bg');

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

    // إذا العنصر ظهر في نافذة المتصفح
    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      // هنضيف الكلاس visible لتشغيل تأثير الـ Bounce و Zoom
      if (!element.classList.contains('visible')) {
        element.classList.add('visible');
      }
    } else {
      // لو العنصر مش ظاهر، نشيل الكلاس visible علشان التأثير يتكرر لما يظهر تاني
      if (element.classList.contains('visible')) {
        element.classList.remove('visible');
      }
    }
  });
}

window.addEventListener('scroll', handleScroll3);
handleScroll3(); // لتنفيذ التأثير أول مرة عند تحميل الصفحة


// ======== 🛍️ BLUR EFFECT ON PRODUCT CARDS ==========
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', handleScrollBlur);
// استدعاء الوظيفة عند تحميل الصفحة
handleScrollBlur();


//start dark 
// ===== 🌙 TOGGLE DARK MODE BUTTON ==========
// ===== 🌙 TOGGLE DARK MODE BUTTON WITHOUT FONT AWESOME ==========
document.addEventListener("DOMContentLoaded", () => {
  const toggleBtn = document.createElement("button");
  toggleBtn.id = "themeToggle";
  toggleBtn.innerHTML = `🌙`;
  toggleBtn.style.cssText = `
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 10;
    background: #353c44;
    color: white;
    border:1px solid #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease-in-out;
  `;

  document.body.appendChild(toggleBtn);

  // التبديل بين light/dark
  toggleBtn.addEventListener("click", () => {
    document.body.classList.toggle("dark-mode");
    const isDark = document.body.classList.contains("dark-mode");
    toggleBtn.innerHTML = isDark ? `☀️` : `🌙`;
    localStorage.setItem("theme", isDark ? "dark" : "light");
  });

  // التحميل من localStorage
  if (localStorage.getItem("theme") === "dark") {
    document.body.classList.add("dark-mode");
    toggleBtn.innerHTML = `☀️`;
  }
});


//end dark
document.addEventListener("DOMContentLoaded", function () {
  // 1. إضافة أيقونة السلة بجانب السعر
  const priceElement = document.querySelector('.s-product-card-price');
  const iconElement = document.querySelector('.s-button-btn');
  if (priceElement && iconElement) {
    priceElement.parentNode.insertBefore(iconElement, priceElement.nextSibling);
  }
})



/* Add custom Js code below */
/* Add custom Js code below */
// document.addEventListener('DOMContentLoaded', function () {
//   const appInner = document.querySelector('.app-inner');
//   if (!appInner) return;

//   const elements = Array.from(appInner.children);

//   const observer = new IntersectionObserver(
//     (entries, observer) => {
//       entries.forEach((entry, index) => {
//         if (entry.isIntersecting) {
//           setTimeout(() => {
//             entry.target.classList.add('visible');
//           }, index * 150); // تأخير تدريجي لكل عنصر
//           observer.unobserve(entry.target);
//         }
//       });
//     },
//     { threshold: 0.1 }
//   );

//   elements.forEach(el => observer.observe(el));
// });


/* 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);


//***********************************

// حفظ الاحداثيات عند مغادرة الصفحة
// window.addEventListener('beforeunload', function () {
//   //save the page path name
//   const currentPage = window.location.pathname;

//   localStorage.setItem(`scrollPosition-${currentPage}`, window.scrollY);
// });

// استرجاع مكان الاسكرول عند العودة الى الصفحة 
// window.addEventListener('load', function () {
//   const currentPage = window.location.pathname;
//   const scrollPosition = localStorage.getItem(`scrollPosition-${currentPage}`);

//   if (scrollPosition) {
//     // الاسكرول إلى الموضع المحفوظ
//     window.scrollTo(0, scrollPosition);
//   }
// });
//****************************************
document.addEventListener("DOMContentLoaded", function () {
  // إضافة التنسيقات داخل JavaScript
  const style = document.createElement("style");
  style.textContent = `
        .s-block {
            opacity: 0;
            transform: translateY(30px) scale(0.95);
            transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
            will-change: opacity, transform;
        }
        .s-block.appear {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    `;
  document.head.appendChild(style);

  function handleVisibility(elements, className) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add(className);
        } else {
          entry.target.classList.remove(className);
          resetAnimation(entry.target);
        }
      });
    }, { threshold: 0.1 });

    elements.forEach((element) => observer.observe(element));
  }

  function resetAnimation(element) {
    element.style.animation = "none";
    element.offsetHeight;
    element.style.animation = "";
  }

  handleVisibility(document.querySelectorAll(".s-block"), "appear");

  const blockObserver = new MutationObserver(() => {
    handleVisibility(document.querySelectorAll(".s-block:not(.appear)"), "appear");
  });

  blockObserver.observe(document.body, { childList: true, subtree: true });
});
//************************************



var whatsappFloat = document.createElement('div');
whatsappFloat.className = 'whatsapp-float';

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

var 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="chat-body" id="chat-body">
  </div>
  <div class="chat-footer">
    <input type="text" id="whatsapp-message" placeholder="اكتب رسالتك هنا" class="chat-input">
    <button id="send-whatsapp" class="whatsapp-button">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px">
        <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
      </svg>
    </button>
  </div>`;

whatsappPopup.innerHTML = popupContent;
whatsappFloat.appendChild(whatsappPopup);

var 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);

var style = document.createElement('style');
style.innerHTML =
  `.whatsapp-float {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 100;
}
  

.whatsapp-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.whatsapp-icon:hover {
  transform: scale(1.1);
}

.whatsapp-popup {
  position: fixed;
  bottom: 100px;
  left: 20px;
  width: 300px;
  background-color:#3E4F44;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 0;
  z-index: 101;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color:#3E4F44;
  color:#fff;
  padding: 10px;
}

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

.avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.support-text {
  font-size: 16px;
  font-weight: bold;
}

.close-popup {
  background: none;
  border: none;
  font-size: 20px;
  color: white;
  cursor: pointer;
}

.chat-body {
  flex-grow: 1;
  padding: 10px;
  background-color: #e5ddd5;
  overflow-y: auto;
  max-height: 300px;
}

.chat-message {
  margin-bottom: 10px;
  display: flex;
}

.chat-message.sent {
  justify-content: flex-end;
}

.chat-message p {
  max-width: 70%;
  padding: 10px;
  border-radius: 10px;
  background-color: #dcf8c6;
  margin: 0;
}

.chat-footer {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: white;
  border-top: 1px solid #ccc;
}

.chat-input {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 20px;
  margin-right: 10px;
}

.whatsapp-button {
  background-color:#3E4F44;
  color:#fff;
  padding: 10px;
  border-radius: 50%;
  border: none;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-in-out;
}

.whatsapp-button:hover {
  transform: scale(1.1);
}

.whatsapp-button svg {
  fill: white;
}`;
document.head.appendChild(style);

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

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

function getReply(message) {
  message = message.toLowerCase().trim();

  // ردود عامة
  if (message.includes("السلام عليكم") || message.includes("سلام")) {
    return "وعليكم السلام ورحمة الله وبركاته! كيف يمكنني مساعدتك اليوم؟ 🤗";
  } else if (message.includes("مرحبا") || message.includes("اهلا")) {
    return "مرحبًا بك! 🌟 كيف يمكنني أن أكون في خدمتك؟";
  } else if (message.includes("كيفكم") || message.includes("اخباركم")) {
    return "الحمد لله نحن بخير، ونأمل أن تكون أنت أيضًا بخير. كيف يمكنني مساعدتك؟ 🌟";
  } else if (message.includes("هلا") || message.includes("اهلين")) {
    return "أهلًا وسهلًا! 🌼 كيف أساعدك اليوم؟";
  } else if (message.includes("مشكلة") || message.includes("عندي مشكله")) {
    return "عذرًا لسماع ذلك! 🛠️ أخبرني بالمشكلة بالتفصيل وسأحاول مساعدتك في حلها.";
  } else if (message.includes("؟") || message.includes("سؤال")) {
    return "بالطبع! أسعد بالإجابة على سؤالك. ما هو سؤالك؟ 🧐";
  } else if (message.includes("كيف") || message.includes("طريقة")) {
    return "أبشر! سأشرح لك بالتفصيل. ما الذي تريد معرفته؟ 🧐";
  } else if (message.includes("مساعدة") || message.includes("ساعدني")) {
    return "بالطبع! أنا هنا لمساعدتك. ما هي المشكلة التي تواجهها؟ 💬";
  } else if (message.includes("شكرًا") || message.includes("متشكر")) {
    return "العفو! 😊 دائمًا في خدمتك. هل هناك شيء آخر تحتاجه؟";
  } else if (message.includes("عفوا") || message.includes("لا شكر على واجب")) {
    return "لا شكر على واجب! 🌟 نحن هنا لخدمتك دائمًا.";
  } else if (message.includes("معلومات") || message.includes("تفاصيل")) {
    return "بالطبع! ما هي المعلومات أو التفاصيل التي تريدها؟ 📚";
  } else if (message.includes("مبروك") || message.includes("تهانينا")) {
    return "مبروك! 🎉 نتمنى لك المزيد من التوفيق والنجاح!";
  } else if (message.includes("وداعًا") || message.includes("مع السلامة")) {
    return "إلى اللقاء! 🌞 نتمنى لك يومًا سعيدًا. إذا احتجت أي شيء، نحن هنا!";
  }

  // ردود ذكية تعتمد على السياق
  else if (message.includes("سعر") || message.includes("تكلفة")) {
    return "لحظة واحدة، سأتحقق من السعر لك. هل تريد معرفة سعر منتج معين؟ 💰";
  } else if (message.includes("توصيل") || message.includes("شحن")) {
    return "خدمة التوصيل متاحة! 🚚 هل تريد معرفة المزيد عن سياسة الشحن؟";
  } else if (message.includes("خصم") || message.includes("عروض")) {
    return "لدينا عروض وخصومات رائعة! 🎁 هل تريد معرفة التفاصيل؟";
  } else if (message.includes("حساب") || message.includes("تسجيل دخول")) {
    return "بالطبع! هل تحتاج مساعدة في تسجيل الدخول أو إنشاء حساب جديد؟ 🔐";
  } else if (message.includes("منتج") || message.includes("سلعة")) {
    return "لدينا مجموعة واسعة من المنتجات. هل تبحث عن شيء معين؟ 🛍️";
  } else if (message.includes("تقييم") || message.includes("رأيك")) {
    return "رأيك مهم جدًا لنا! 🌟 هل تريد ترك تقييم أو مشاركة تجربتك؟";
  } else if (message.includes("تواصل") || message.includes("اتصال")) {
    return "يمكنك التواصل معنا عبر الواتساب أو البريد الإلكتروني. هل تريد التفاصيل؟ 📞";
  }

  // ردود عشوائية لزيادة التفاعل
  else if (message.includes("حب") || message.includes("حبي")) {
    return "أهلاً بك! ❤️ نحن نحب عملائنا ونحرص على رضاهم دائمًا.";
  } else if (message.includes("صباح الخير") || message.includes("مساء الخير")) {
    return "صباح/مساء الخير! 🌞 كيف يمكنني مساعدتك اليوم؟";
  } else if (message.includes("طقس") || message.includes("حرارة")) {
    return "الطقس اليوم رائع! ☀️ هل تخطط لشيء مميز؟";
  } else if (message.includes("نصيحة") || message.includes("ارشاد")) {
    return "بالطبع! ما هي النصيحة التي تبحث عنها؟ 🧠";
  }

  // رد افتراضي إذا لم يتطابق أي شيء
  else {
    const randomReplies = [
      "شكرًا لتواصلك معنا! 😊 هل هناك شيء آخر تحتاجه؟",
      "أنا هنا لمساعدتك! 💬 أخبرني بما تحتاجه.",
      "هل يمكنك توضيح طلبك أكثر؟ 🧐",
      "أهلاً بك! 🌟 كيف يمكنني مساعدتك اليوم؟",
      "نحن هنا لخدمتك! 💪 ما الذي تبحث عنه؟"
    ];
    return randomReplies[Math.floor(Math.random() * randomReplies.length)];
  }
}

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

function sendMessage() {
  var message = document.getElementById('whatsapp-message').value;
  if (message.trim() !== '') {
    var chatBody = document.getElementById('chat-body');
    var messageBubble = document.createElement('div');
    messageBubble.className = 'chat-message sent';
    messageBubble.innerHTML = `<p>${message}</p>`;
    chatBody.appendChild(messageBubble);
    chatBody.scrollTop = chatBody.scrollHeight;
    document.getElementById('whatsapp-message').value = '';
    var typingBubble = document.createElement('div');
    typingBubble.className = 'chat-message';
    typingBubble.innerHTML = `<p>...</p>`;
    chatBody.appendChild(typingBubble);
    chatBody.scrollTop = chatBody.scrollHeight;
    setTimeout(() => {
      chatBody.removeChild(typingBubble);
      var reply = getReply(message);
      var replyBubble = document.createElement('div');
      replyBubble.className = 'chat-message';
      replyBubble.innerHTML = `<p>${reply}</p>`;
      chatBody.appendChild(replyBubble);
      chatBody.scrollTop = chatBody.scrollHeight;


      const watsappNum = document.querySelector("#contact-slot .s-contacts-item:first-of-type .unicode");
      var text = "";
      if (watsappNum) {
        text = watsappNum.textContent.trim(); // أو innerText حسب الحاجة
        console.log(text); // عرض النص في الكونسول
      } else {
        console.log("0000000000");
      }


      setTimeout(() => {
        whatsappPopup.style.display = 'none';
        chatBody.innerHTML = '';
        var whatsappLink = `https://wa.me/${text}?text=${encodeURIComponent(message)}`;
        window.location.href = whatsappLink;
      }, 3000);
    }, 2000);
  } else {
    alert('يرجى كتابة رسالة قبل الإرسال.');
  }
}

/**********************************************/

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;
        box-shadow: 4px 4px 4px 4px var(--navBgColor);
       
    `;

  // إضافة عنوان القسم
  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: "عادةً ما يتم توصيل الطلبات خلال 3 - 10 يوم عمل."
    },
    {
      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);
});


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

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

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

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

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




document.addEventListener("DOMContentLoaded", function () {
  // إضافة التنسيقات داخل JavaScript
  const style = document.createElement("style");
  style.textContent = `
        .s-block {
            opacity: 0;
            transform: translateY(30px) scale(0.95);
            transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
            will-change: opacity, transform;
        }
        .s-block.appear {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    `;
  document.head.appendChild(style);

  function handleVisibility(elements, className) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add(className);
        } else {
          entry.target.classList.remove(className);
          resetAnimation(entry.target);
        }
      });
    }, { threshold: 0.1 });

    elements.forEach((element) => observer.observe(element));
  }

  function resetAnimation(element) {
    element.style.animation = "none";
    element.offsetHeight;
    element.style.animation = "";
  }

  handleVisibility(document.querySelectorAll(".s-block"), "appear");

  const blockObserver = new MutationObserver(() => {
    handleVisibility(document.querySelectorAll(".s-block:not(.appear)"), "appear");
  });

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

document.addEventListener("DOMContentLoaded", function () {
  // إنشاء وتطبيق أنماط CSS ديناميكيًا
  const style = document.createElement("style");
  style.innerHTML = `
        .features-section {
background: transparent;
  padding: 20px 20px;
  max-width: 90%;
  margin: 40px auto !important;
  text-align: center;
  width: 100%;
        }
        .features-section h2 {
font-size: 26px;
  margin-bottom: 25px;
  color:var(--main-color);
        }
        .features-container {
            display: flex;
            align-items: center;
              justify-content: center;
            gap: 20px;
        }
        
        @media(max-width: 991px) {
          .features-container {
              flex-direction: column;
        }
        }
        .feature {
            background: var(--navBgColor);
            color: var(--navFontColor);
            padding: 20px;
            border-radius: 10px;
            width: 300px;
            font-size: 20px;
            font-weight: bold;
            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            text-align: center;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            overflow: visible;
        }
        .feature-hover {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:var(--navFontColor);
            color: var(--navBgColor);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            opacity: 0;
            transform: scale(0.8);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .feature:hover .feature-hover {
            opacity: 1;
            transform: scale(1);
        }
      .payment-icons {
display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  top: 60px;
  left: 0;
}
.payment-icons img {
  width: 50px;
  height: 50px;
  border-radius: 20%;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 5px;
}

.payment-icons img:hover {
  transform: translateY(-7px);
}
        .feature.active .payment-icons {
            opacity: 1;
        }
    `;
  document.head.appendChild(style);

  function createFeaturesSection() {
    const section = document.createElement("section");
    section.className = "features-section";

    const title = document.createElement("h2");
    title.innerText = "مميزات المتجر";
    section.appendChild(title);

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

    const features = [
      { icon: "🎧", text: "دعم متواصل", hoverText: "💬 دعم فني على مدار الأسبوع" },
      { icon: "🚀", text: "شحن سريع", hoverText: "🚚 شحن سريع لكل أنحاء المملكة" },
      { icon: "💳", text: "تمتع بخدمات دفع متعددة", hoverText: "💸 طرق دفع متنوعة" }
    ];

    features.forEach((feature, index) => {
      const div = document.createElement("div");
      div.className = "feature";
      div.innerHTML = `${feature.icon} ${feature.text}`;

      const hoverText = document.createElement("div");
      hoverText.className = "feature-hover";
      hoverText.innerText = feature.hoverText;
      div.appendChild(hoverText);

      if (index === 2) {
        const iconsContainer = document.createElement("div");
        iconsContainer.className = "payment-icons";

        const paymentIcons = [
          "https://cdn.salla.network/images/payment/google_pay_mini.png",
          "https://cdn.salla.network/images/payment/apple_pay_mini.png",
          "https://cdn.salla.network/images/payment/stc_pay_mini.png",
          "https://cdn.salla.network/images/payment/credit_card_mini.png",
          "https://cdn.salla.network/images/payment/mada_mini.png"
        ];

        paymentIcons.forEach(src => {
          const img = document.createElement("img");
          img.src = src;
          iconsContainer.appendChild(img);
        });

        div.appendChild(iconsContainer);
        div.addEventListener("click", () => {
          div.classList.toggle("active");
        });
      }

      container.appendChild(div);
    });

    section.appendChild(container);

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

  // createFeaturesSection();
});


document.addEventListener('DOMContentLoaded', function() {
    // التحقق إذا كانت هذه أول زيارة في هذه الجلسة
    if (!sessionStorage.getItem('logoAnimationPlayed')) {
        // إنشاء حاوية الأنيميشن
        var animationOverlay = document.createElement('div');
        animationOverlay.className = 'logo-animation-overlay';
        
        // إنشاء حاوية الشعار
        var logoContainer = document.createElement('div');
        logoContainer.className = 'logo-container';
        
        // إنشاء الشعار
        var logo = document.createElement('img');
        logo.className = 'store-logo';
        logo.src = 'https://cdn.salla.sa/qQKzOm/oddv3YrT3kq1JpptC6iwyVsOn8gY9KFGmzOfB3bx.png'; // استبدل هذا برابط الشعار
        logo.alt = 'شعار المتجر';
        
        // إنشاء تأثير الجزيئات
        var particlesContainer = document.createElement('div');
        particlesContainer.className = 'particles-container';
        
        // تجميع العناصر
        logoContainer.appendChild(logo);
        animationOverlay.appendChild(logoContainer);
        animationOverlay.appendChild(particlesContainer);
        document.body.appendChild(animationOverlay);
        
        // إنشاء الجزيئات
        createParticles(particlesContainer, 30);
        
        // إزالة الأنيميشن بعد انتهائه
        setTimeout(function() {
            animationOverlay.style.opacity = '0';
            setTimeout(function() {
                animationOverlay.remove();
            }, 800);
        }, 4000); // مدة الأنيميشن 4 ثواني
        
        // حفظ أن الأنيميشن تم عرضه
        sessionStorage.setItem('logoAnimationPlayed', 'true');
    }
});

// دالة إنشاء الجزيئات
function createParticles(container, count) {
    for (let i = 0; i < count; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        
        // حجم عشوائي للجزيئة
        const size = Math.random() * 8 + 2;
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        
        // موضع عشوائي
        const posX = Math.random() * 100;
        const posY = Math.random() * 100;
        particle.style.left = `${posX}%`;
        particle.style.top = `${posY}%`;
        
        // تأخير عشوائي للبدء
        const delay = Math.random() * 2;
        particle.style.animationDelay = `${delay}s`;
        
        container.appendChild(particle);
    }
}







document.addEventListener("DOMContentLoaded", function () {
  // إنشاء وتطبيق أنماط CSS ديناميكيًا
  const style = document.createElement("style");
  style.innerHTML = `
        .popup-image {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: auto;
            display: none;
            z-index: 1000;
            background: white;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }
    `;
  document.head.appendChild(style);

  // إضافة الصورة المخفية عند الضغط على العنصر الثاني
  const popupImage = document.createElement("img");
  popupImage.src = "https://i.ibb.co/WNM4MnqD/Artboard-3.png";
  popupImage.className = "popup-image";
  document.body.appendChild(popupImage);

  // استهداف العنصر الثاني (شحن سريع)
  const features = document.querySelectorAll(".feature");
  if (features.length > 1) {
    features[1].addEventListener("click", () => {
      popupImage.style.display = "block";
      setTimeout(() => {
        popupImage.style.display = "none";
      }, 2000);
    });
  }
});




document.addEventListener("DOMContentLoaded", function () {
  // إنشاء وتطبيق أنماط CSS ديناميكيًا
  const style = document.createElement("style");
  style.innerHTML = `
        .popup-image {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: auto;
            display: none;
            z-index: 1000;
            background: white;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }
    `;
  document.head.appendChild(style);

  // إضافة الصورة المخفية عند الضغط على العنصر الثاني
  const popupImage = document.createElement("img");
  popupImage.src = "https://cdn.salla.sa/form-builder/uiBgp591L9iYltdEDgJAqkwkvi0Q2gnQ1ZjsPIWn.png";
  popupImage.className = "popup-image";
  document.body.appendChild(popupImage);

  // استهداف العنصر الثاني (شحن سريع)
  const features = document.querySelectorAll(".feature");
  if (features.length > 1) {
    features[0].addEventListener("click", () => {
      popupImage.style.display = "block";
      setTimeout(() => {
        popupImage.style.display = "none";
      }, 3000);
    });
  }
});
/******************************/

//Ticker After baner 
/* Add custom Js code below */
const scrollingDiv = document.createElement('div');
scrollingDiv.className = 'scrolling-text';

scrollingDiv.innerHTML = `
  <div class="text-container">
    <span>🔥 خصومات لن تجدها إلا هنا </span>
    <span>💥💵 أسعار تبدأ من المستحيل </span>
    <span>🔥 عروض حصرية تنتظرك الآن</span>
    <span>⏳💰 لا تفوت فرص التوفير اليوم </span>
    <span>🛒💥 عروض حصرية تنتظرك الآن</span>

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

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

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

const firstSection = document.querySelector('.app-inner>section:nth-of-type(1)');
if (firstSection) {
  firstSection.appendChild(scrollingDiv);
}

// // Ticker Items Data
// const tickerData = [
//     { text: "خدمة عملاء", icon: "fa-phone" },
//     { text: "توصيل سريع", icon: "fa-truck" },
//     { text: "منتجات عالية الجودة", icon: "fa-box" },
// ];

// // Generate Ticker Items HTML Dynamically
// const tickerItems = tickerData
//     .map(
//         (item) => `
//       <div class="ticker-item" dir="rtl">
//         ${item.text} <i class="fa-solid ${item.icon}"></i>
//       </div>
//     `
//     )
//     .join("");

// // Ticker Wrapper HTML
// const tickerHTML = `
//     <div class="ticker-wrapper">
//       <div class="ticker">${tickerItems.repeat(5)}</div>
//     </div>
//   `;

// // Add Ticker to Body (if not already added)
// if (!document.querySelector(".ticker-wrapper")) {
//     document.body.insertAdjacentHTML("afterbegin", tickerHTML);
// }

// Add FontAwesome CSS (if not already added)
if (!document.querySelector('link[href*="font-awesome"]')) {
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = "https://cdn.salla.sa/wWOODx/W3KPafbffCykIgloc3V1TgzU3loN3lCGw8wnnhdC.png";
  document.head.appendChild(link);
}



// create scrollIcon 
const scrollIcon = document.createElement("div");
scrollIcon.id = "scroll-icon";
scrollIcon.style.position = "fixed";
scrollIcon.style.bottom = "20px";
scrollIcon.style.right = "20px";
scrollIcon.style.width = "50px";
scrollIcon.style.height = "50px";
scrollIcon.style.display = "none"; // initailly hidden
scrollIcon.style.alignItems = "center";
scrollIcon.style.justifyContent = "center";
scrollIcon.style.cursor = "pointer";
scrollIcon.style.zIndex = "1000";

// create svg circle
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("class", "progress-circle");
svg.setAttribute("viewBox", "0 0 36 36");
svg.style.width = "100%";
svg.style.height = "100%";
svg.style.transform = "rotate(-90deg)";
svg.style.background = "#424242";
svg.style.borderRadius = "50%";



// create circle background
const circleBg = document.createElementNS("http://www.w3.org/2000/svg", "path");
circleBg.setAttribute("class", "circle-bg");
circleBg.setAttribute(
  "d",
  "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
);
circleBg.setAttribute("fill", "none");
// -------------لون السهم والدايرة ----------------
circleBg.setAttribute("stroke", "#fff");
// -----------------------------
circleBg.setAttribute("stroke-width", "3.8");

// create the moved circle
const circle = document.createElementNS("http://www.w3.org/2000/svg", "path");
circle.setAttribute("class", "circle");
circle.setAttribute(
  "d",
  "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
);
circle.setAttribute("fill", "none");
circle.setAttribute("stroke", "#4caf50");
circle.setAttribute("stroke-width", "3.8");
circle.setAttribute("stroke-linecap", "round");
circle.style.transition = "stroke-dasharray 0.3s ease";



// add elements to svg
svg.appendChild(circleBg);
svg.appendChild(circle);

// create arrow
const arrow = document.createElement("div");
arrow.textContent = "↑";
arrow.style.position = "absolute";
arrow.style.fontSize = "22px";
arrow.style.fontWeight = "bold";
arrow.style.color = "#4caf50";
arrow.style.pointerEvents = "none";



// add svg , arrow to scrollTcon
scrollIcon.appendChild(svg);
scrollIcon.appendChild(arrow);

// add scrollTcon to page
document.body.appendChild(scrollIcon);

// add events
window.addEventListener("scroll", () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scrollPercentage = (scrollTop / scrollHeight) * 100;

  // update circle background
  circle.style.strokeDasharray = `${scrollPercentage}, 100`;

  // hide or display scrollIcon based on scrollTop 
  if (scrollTop > 300) {
    scrollIcon.style.display = "flex";
  } else {
    scrollIcon.style.display = "none";
  }

});




// back to top when click the icon
scrollIcon.addEventListener("click", () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
});



//***********************************

// حفظ الاحداثيات عند مغادرة الصفحة
window.addEventListener('beforeunload', function () {
  //save the page path name
  const currentPage = window.location.pathname;

  localStorage.setItem(`scrollPosition-${currentPage}`, window.scrollY);
});

// استرجاع مكان الاسكرول عند العودة الى الصفحة 
window.addEventListener('load', function () {
  const currentPage = window.location.pathname;
  const scrollPosition = localStorage.getItem(`scrollPosition-${currentPage}`);

  if (scrollPosition) {
    // الاسكرول إلى الموضع المحفوظ
    window.scrollTo(0, scrollPosition);
  }
});

//************************************


document.querySelectorAll('a[href=""], a[href="#"]').forEach(link => {
  link.addEventListener('click', event => {
    event.preventDefault();
  });
});

//****************************************


const sallaProductOptions = document.querySelector('salla-product-options');


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);