/* Add custom Js styles below */ 
/* Add custom Js styles below */ 
/* Add custom Js styles below */ 
/* Add custom Js styles below */ 
/* Add custom Js styles below */ 
/* Add custom Js code below */ 
/* Add custom Js code below */ 
/* Add custom Js code below */ 
/* Add custom CSS styles below */ 
/* Add custom Js code below */ 
document.addEventListener("DOMContentLoaded", () => {
  // ✅ يظهر فقط في الصفحة الرئيسية
  if (window.location.pathname !== "/" && !window.location.pathname.includes("index")) return;

  // ✅ تحديد مكان الظهور (قبل البانر الرابع)
  const banners = document.querySelectorAll(".banner, .slider, .home-banner");
  if (banners.length < 4) return;
  const targetBanner = banners[3];

  // ✅ إنشاء القسم
  const section = document.createElement("section");
  section.id = "elvira-products";
  section.innerHTML = `
    <style>
      #elvira-products {
        background: transparent;
        padding: 40px 20px 60px;
        text-align: center;
        margin: 40px 0;
      }
      #elvira-products h2 {
        color: #000;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 25px;
      }
      .product-cards {
        display: flex;
        flex-direction: column;
        gap: 25px;
      }
      .product-card {
        background: #fff;
        border-radius: 16px;
        border: 1px solid rgba(0,0,0,0.08);
        box-shadow: 0 4px 12px rgba(221, 21, 60, 0.1);
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: start;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 16px rgba(221, 21, 60, 0.15);
      }
      .product-icon {
        flex-shrink: 0;
      }
      .product-icon img {
        width: 90px;
        height: 90px;
        object-fit: contain;
      }
      .product-text {
        flex: 1;
        margin-right: 15px;
      }
      .product-text h3 {
        color: #000;
        font-size: 18px;
        margin-bottom: 8px;
      }
      .product-text p {
        color: #000;
        font-size: 15px;
        line-height: 1.5;
      }
      @media (min-width: 768px) {
        .product-cards {
          flex-direction: row;
          justify-content: center;
        }
        .product-card {
          flex-direction: column;
          text-align: center;
          width: 30%;
          padding: 25px;
        }
        .product-text {
          margin-right: 0;
        }
        .product-icon img {
          width: 110px;
          height: 110px;
          margin-bottom: 15px;
        }
      }
    </style>

    <h2>اكتشفي أناقتك مع تشكيلتنا المختارة</h2>
    <div class="product-cards">
      <!-- 👠 الأحذية النسائية -->
      <div class="product-card">
        <div class="product-icon">
          <img src="https://cdn-icons-png.flaticon.com/512/82/82705.png" alt="أحذية نسائية حمراء">
        </div>
        <div class="product-text">
          <h3>الأحذية النسائية</h3>
          <p>أحذية بتصاميم أنثوية مريحة وألوان جريئة لإطلالة مفعمة بالثقة.</p>
        </div>
      </div>

      <!-- 👜 الحقائب -->
      <div class="product-card">
        <div class="product-icon">
          <img src="https://cdn-icons-png.flaticon.com/512/9346/9346658.png" alt="حقيبة وردية أنيقة">
        </div>
        <div class="product-text">
          <h3>الحقائب</h3>
          <p>حقائب نسائية باللون الوردي الفاتح، تضيف لمسة فخمة إلى إطلالتك اليومية.</p>
        </div>
      </div>

      <!-- 🎒 الشنط النسائية -->
      <div class="product-card">
        <div class="product-icon">
          <img src="https://cdn-icons-png.flaticon.com/512/4527/4527868.png" alt="شنطة نسائية">
        </div>
        <div class="product-text">
          <h3>الشنط النسائية</h3>
          <p>شنط عملية وأنيقة تناسب جميع المناسبات بألوان ناعمة وتصميم عصري.</p>
        </div>
      </div>
    </div>
  `;

  // ✅ إدراج القسم قبل البانر الرابع
  targetBanner.parentNode.insertBefore(section, targetBanner);
});







document.addEventListener("DOMContentLoaded", () => {
  // ✅ يظهر فقط في الصفحة الرئيسية
  if (window.location.pathname !== "/" && window.location.pathname !== "/index.html") return;

  // حذف أي قسم سابق لتجنّب التكرار
  const oldFaq = document.getElementById("elvira-faq");
  if (oldFaq) oldFaq.remove();

  // ✅ إنشاء قسم الأسئلة الشائعة
  const faqSection = document.createElement("section");
  faqSection.id = "elvira-faq";
  faqSection.innerHTML = `
    <div class="faq-container">
      <p class="faq-intro">✨ اكتشفي أهم المعلومات قبل تسوقك من <b>Elvira</b></p>
      <h2 class="faq-title">الأسئلة الشائعة 💬</h2>

      <div class="faq-item">
        <button class="faq-question">ما هي طرق الدفع المتوفرة في متجر Elvira؟</button>
        <div class="faq-answer">يمكنكِ الدفع إلكترونيًا عبر بطاقات <b>Visa</b> أو <b>MasterCard</b> أو <b>Apple Pay</b>.</div>
      </div>

      <div class="faq-item">
        <button class="faq-question">كم يستغرق توصيل الطلب؟</button>
        <div class="faq-answer">يتم التوصيل خلال 2 إلى 5 أيام عمل حسب المدينة أو المنطقة.</div>
      </div>

      <div class="faq-item">
        <button class="faq-question">هل يمكن استبدال أو إرجاع المنتج؟</button>
        <div class="faq-answer">نعم، يمكنكِ استبدال أو إرجاع المنتج خلال 3 أيام من الاستلام بشرط أن يكون بحالته الأصلية.</div>
      </div>

      <div class="faq-item">
        <button class="faq-question">هل يمكن تتبع الطلب بعد الشحن؟</button>
        <div class="faq-answer">بكل تأكيد، بمجرد شحن طلبك سيتم إرسال رقم التتبع لكِ عبر البريد الإلكتروني أو واتساب.</div>
      </div>
    </div>
  `;

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

  // ✅ تنسيقات CSS
  const style = document.createElement("style");
  style.textContent = `
    #elvira-faq {
      font-family: "Cairo", sans-serif;
      margin: 40px auto;
      max-width: 700px;
      padding: 0 15px;
    }

    .faq-intro {
      text-align: center;
      color: #a06260;
      font-size: 17px;
      margin-bottom: 8px;
    }

    .faq-title {
      text-align: center;
      color: #8c5a58;
      font-size: 24px;
      margin-bottom: 25px;
      font-weight: bold;
    }

    .faq-item {
      border: 2px solid #8c5a58;
      border-radius: 14px;
      padding: 10px 15px;
      margin-bottom: 15px;
      transition: box-shadow 0.3s ease;
      background: transparent;
    }

    .faq-item:hover {
      box-shadow: 0 0 15px rgba(140, 90, 88, 0.3);
    }

    .faq-question {
      width: 100%;
      text-align: right;
      background: none;
      border: none;
      color: #8c5a58;
      font-weight: bold;
      font-size: 17px;
      padding: 8px 0;
      cursor: pointer;
      transition: color 0.3s ease;
    }

    .faq-question:hover {
      color: #734847;
    }

    .faq-answer {
      display: none;
      color: #444;
      font-size: 15px;
      line-height: 1.6;
      margin-top: 5px;
      animation: fadeIn 0.3s ease;
    }

    .faq-item.active .faq-answer {
      display: block;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-5px); }
      to { opacity: 1; transform: translateY(0); }
    }
  `;
  document.head.appendChild(style);

  // ✅ تفعيل الفتح والإغلاق
  document.querySelectorAll(".faq-question").forEach((btn) => {
    btn.addEventListener("click", () => {
      const item = btn.parentElement;
      item.classList.toggle("active");
    });
  });
});






document.addEventListener("DOMContentLoaded", () => {
  // ✅ تظهر مرة واحدة في كل زيارة (وليس عند التنقل بين الصفحات)
  if (sessionStorage.getItem("elvira-welcome-shown")) return;

  // إنشاء النافذة
  const popup = document.createElement("div");
  popup.id = "elvira-welcome";
  popup.innerHTML = `
    <div class="elvira-content">
      <span class="elvira-close">×</span>
      <h2>مرحباً بكِ في <span>Elvira</span> ✨</h2>
      <p>تألّقي معنا بأجمل الفساتين والإكسسوارات والشنط والأحذية!</p>
      <button id="elvira-shop-now">تسوقي الآن</button>
    </div>
  `;
  document.body.appendChild(popup);

  // ✨ تنسيقات CSS
  const style = document.createElement("style");
  style.textContent = `
    #elvira-welcome {
      position: fixed;
      bottom: -100%;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      max-width: 360px;
      background: rgba(255, 255, 255, 0.9);
      border: 2px solid #8c5a58;
      border-radius: 18px;
      padding: 25px 20px;
      text-align: center;
      font-family: "Cairo", sans-serif;
      transition: bottom 1s ease;
      z-index: 9999;
      backdrop-filter: blur(5px);
      box-shadow: 0 0 25px rgba(140, 90, 88, 0.4);
      animation: elvira-glow 2s ease-in-out infinite alternate;
    }

    @keyframes elvira-glow {
      0% { box-shadow: 0 0 10px rgba(140,90,88,0.4); }
      100% { box-shadow: 0 0 25px rgba(140,90,88,0.8); }
    }

    #elvira-welcome.show {
      bottom: 50%;
      transform: translate(-50%, 50%);
    }

    #elvira-welcome h2 {
      color: #8c5a58;
      font-size: 22px;
      margin-bottom: 8px;
    }

    #elvira-welcome h2 span {
      font-weight: bold;
    }

    #elvira-welcome p {
      color: #444;
      font-size: 15px;
      margin-bottom: 18px;
      line-height: 1.5;
    }

    #elvira-welcome button {
      background: #8c5a58;
      color: #fff;
      border: none;
      padding: 10px 25px;
      border-radius: 30px;
      cursor: pointer;
      font-size: 16px;
      transition: 0.3s;
      box-shadow: 0 0 10px rgba(140, 90, 88, 0.3);
    }

    #elvira-welcome button:hover {
      background: #734847;
      box-shadow: 0 0 15px rgba(140, 90, 88, 0.5);
    }

    .elvira-close {
      position: absolute;
      top: 8px;
      right: 12px;
      font-size: 20px;
      color: #8c5a58;
      cursor: pointer;
      font-weight: bold;
    }

    @media (max-width: 480px) {
      #elvira-welcome {
        padding: 20px 15px;
      }
      #elvira-welcome h2 {
        font-size: 18px;
      }
      #elvira-welcome p {
        font-size: 14px;
      }
      .elvira-close {
        top: 6px;
        right: 10px;
      }
    }
  `;
  document.head.appendChild(style);

  // 💫 إظهار النافذة بالحركة
  setTimeout(() => popup.classList.add("show"), 400);

  // إغلاق النافذة بالزر أو علامة ×
  document.querySelector("#elvira-shop-now").addEventListener("click", () => popup.remove());
  document.querySelector(".elvira-close").addEventListener("click", () => popup.remove());

  // ✅ منع تكرار الظهور أثناء نفس الزيارة
  sessionStorage.setItem("elvira-welcome-shown", "true");
});



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

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

        // نجوم التقييم
        const stars = document.createElement('div');
        stars.className = 'product-rating';
        const rating = Math.floor(Math.random() * 2) + 4;
        for (let i = 0; i < 5; i++) {
            const star = document.createElement('span');
            star.innerHTML = i < rating ? '★' : '☆';
            stars.appendChild(star);
        }
        stars.style.display = 'flex';
        stars.style.justifyContent = 'center';
        stars.style.color = '#FFD700';
        stars.style.fontSize = '18px';
        stars.style.margin = '6px 0';
        card.querySelector('.s-product-card-content-main')?.appendChild(stars);

        // بادج (جديد أو خصم)
        const badge = document.createElement('div');
        badge.className = 'product-badge';
        badge.textContent = index % 2 === 0 ? 'جديد' : 'اشترى الان';
        badge.style.cssText = `
            position: absolute;
            top: 8px;
            right: 8px;
            background-color: #000;
            color: white;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: bold;
            z-index: 10;
        `;
        card.style.position = 'relative';
        card.appendChild(badge);
    });
}

let tryCount = 0;
const interval = setInterval(() => {
    enhanceCards();
    tryCount++;
    if (tryCount > 10) clearInterval(interval);
}, 1000)



document.addEventListener("DOMContentLoaded", function () {
    // ✅ التحقق من ظهور المنتجات
    function checkProductVisibility() {
        const products = document.querySelectorAll(".s-product-card-vertical");
        products.forEach((product) => {
            if (!product) return;
            const position = product.getBoundingClientRect();
            if (position.top < window.innerHeight * 0.9 && position.bottom >= 0) {
                product.classList.add("visible");
            } else {
                product.classList.remove("visible");
            }
        });
    }

    function observeElements() {
        const observer = new MutationObserver(() => {
            checkProductVisibility();
        });
        observer.observe(document.body, { childList: true, subtree: true });
        window.addEventListener("scroll", checkProductVisibility);
    }

    setTimeout(() => {
        checkProductVisibility();
        observeElements();
    }, 500);

    // ✅ قسم الأسئلة الشائعة وآراء العملاء
    const footer = document.querySelector("footer");
    if (!footer) return;

    const primaryColor = "#fff";
    const backgroundColor = "#808fd5";
    const textColor = "#555";
    const starColor = "#FFD700";

    const faqSection = document.createElement("section");
    faqSection.id = "faq-section";
    faqSection.style.cssText = `
        background-color: ${backgroundColor};
        padding: 2rem;
        margin-bottom: 2rem;
        border-radius: 15px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    `;

    const faqTitle = document.createElement("h2");
    faqTitle.innerText = "الأسئلة الشائعة";
    faqTitle.style.cssText = `color: ${primaryColor}; margin-bottom: 1.5rem; font-size: 1.8rem;`;
    faqSection.appendChild(faqTitle);

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

    faqData.forEach(({ question, answer }) => {
        const questionContainer = document.createElement("div");
        questionContainer.style.cssText = `
            background: #fff;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.3s;
        `;

        const questionEl = document.createElement("h3");
        questionEl.innerText = question;
        questionEl.style.cssText = `color: ${backgroundColor}; font-size: 1.2rem;`;

        const answerEl = document.createElement("p");
        answerEl.innerText = answer;
        answerEl.style.cssText = `display: none; margin-top: 5px; color: ${textColor}; font-size: 1rem;`;

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

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


    // ✅ تفعيل إظهار الأقسام عند التمرير
    const sections = document.querySelectorAll('section');
    function checkVisibility() {
        sections.forEach(section => {
            const position = section.getBoundingClientRect();
            if (position.top < window.innerHeight && position.bottom >= 0) {
                section.classList.add('visible');
            } else {
                section.classList.remove('visible');
            }
        });
    }

    window.addEventListener("scroll", checkVisibility);
    checkVisibility();
});

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

var whatsappLink = document.createElement('a');
whatsappLink.href = 'https://wa.me/+966560986159'; 
whatsappLink.target = '_blank';

var whatsappIcon = document.createElement('img');
whatsappIcon.src = 'https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg';
whatsappIcon.alt = 'WhatsApp';
whatsappIcon.className = 'whatsapp-icon';

whatsappLink.appendChild(whatsappIcon);

whatsappFloat.appendChild(whatsappLink);

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);
}
`;
document.head.appendChild(style);

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

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

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


// Insert the banSwiper as the first element in the body
document.body.insertAdjacentHTML('afterbegin', banSwiperHTML);
// Create the loader div element
const loaderDiv = document.createElement('div');
loaderDiv.id = 'loader';
loaderDiv.style.zIndex = '999';

// Create the 'everything' div
const everythingDiv = document.createElement('div');
everythingDiv.className = 'everything';

// Create the 'loading-container' div
const loadingContainerDiv = document.createElement('div');
loadingContainerDiv.className = 'loading-container';

// Create the SVG element for the cart icon
const svgElement = `
  <svg class="cart-icon" role="img" aria-label="Shopping cart line animation" viewBox="0 0 128 128" width="128px" height="128px" xmlns="http://www.w3.org/2000/svg">
    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="8">
      <g class="cart-track" stroke="hsla(0,10%,10%,0.1)">
        <polyline points="4,4 21,4 26,22 124,22 112,64 35,64 39,80 106,80" />
        <circle cx="43" cy="111" r="13" />
        <circle cx="102" cy="111" r="13" />
      </g>
      <g class="cart-lines" stroke="currentColor">
        <polyline class="cart-top" points="4,4 21,4 26,22 124,22 112,64 35,64 39,80 106,80" stroke-dasharray="338 338" stroke-dashoffset="-338" />
        <g class="cart-wheel1" transform="rotate(-90,43,111)">
          <circle class="cart-wheel-stroke" cx="43" cy="111" r="13" stroke-dasharray="81.68 81.68" stroke-dashoffset="81.68" />
        </g>
        <g class="cart-wheel2" transform="rotate(90,102,111)">
          <circle class="cart-wheel-stroke" cx="102" cy="111" r="13" stroke-dasharray="81.68 81.68" stroke-dashoffset="81.68" />
        </g>
      </g>
    </g>
  </svg>
`;

// Create the loading text div
// Create the 'loading-text' div and set the text content
const loadingTextDiv = document.createElement('div');
loadingTextDiv.className = 'loading-text';
loadingTextDiv.textContent = 'Loading';

// Append the SVG and loading text div to the loading container
loadingContainerDiv.innerHTML = svgElement;
loadingContainerDiv.appendChild(loadingTextDiv);

// Append the loading container to the everything div
everythingDiv.appendChild(loadingContainerDiv);

// Append the everything div to the loader div
loaderDiv.appendChild(everythingDiv);

// Finally, append the loader div to the body
document.body.appendChild(loaderDiv);
y
// Finally, append the loader div to the body