/* Add custom Js styles below */ 
document.addEventListener("DOMContentLoaded", function () {
  // ✅ إنشاء اللودر
  const loader = document.createElement('div');
  loader.id = 'loaderr';
  loader.style.cssText = `
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #fcfcfc;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    transition: opacity 2s ease; /* ← أبطأ */
  `;
  
  // ✅ شكل اللوجو + 4 دواير متحركة
  loader.innerHTML = `
    <div style="display: flex; flex-direction: column; align-items: center; gap: 25px;">
      <img src="https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/NKqxeD/il9NIcGiHlW958bpCb6lWpwkTVNCQjv2ytquHMq7.png" alt="logo" style="width: 150px; height: 150px; object-fit: contain;" />
      <div style="display: flex; gap: 10px;">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>

      </div>
    </div>
    <style>
      .dot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #E46484;
        animation: wave 1.5s infinite ease-in-out;
      }
      .dot:nth-child(1) { animation-delay: 0s; }
      .dot:nth-child(2) { animation-delay: 0.2s; }
      .dot:nth-child(3) { animation-delay: 0.4s; }
      .dot:nth-child(4) { animation-delay: 0.6s; }


      @keyframes wave {
        0%, 80%, 100% {
          transform: translateY(0);
        }
        40% {
          transform: translateY(-20px);
        }
      }
    </style>
  `;

  document.body.appendChild(loader);

  // ✅ إزالة اللودر بعد تحميل الصفحة
  window.addEventListener('load', function () {
    const loader = document.getElementById('loaderr');
    if (loader) {
      loader.style.opacity = '0';
      setTimeout(() => loader.remove(), 2000); // ← يتزامن مع transition: 2s
    }
  });
});

document.addEventListener("DOMContentLoaded", function () {
  // اختيار كل أقسام الصفحة
  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(); // تنفيذ التحقق أول مرة عند تحميل الصفحة

  // ✅ تعيين لون الخلفية لكل section إلى 'inherit'
  sections.forEach(function(section) {
    section.style.backgroundColor = '#fcfcfc';
  });

  // ✅ تعديل خلفية عنصر معين عند ظهوره
  const interval = setInterval(() => {
    const el = document.querySelector(".mm-spn.mm-spn--light");
    if (el) {
      el.style.backgroundColor = "#fcfcfc";
      el.style.backgroundImage = "none";
      el.style.color = "#E46484";
      clearInterval(interval);
    }
  }, 300);
});
/* لون الزرار في سياسة الاستبدال والإسترجاع */
const style = document.createElement('style');
style.textContent = `
  .s-button-primary {
    background-color: #fcfcfc !important;
    color: #E46484 !important;
  }
`;
document.head.appendChild(style);

/* أبعاد صفحة المنتجات على الموبايل */
(function () {
  const style = document.createElement('style');
  style.innerHTML = `
    @media screen and (max-width: 768px) {
      .s-products-list-vertical-cards {
        display: inline-grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-width: 86% !important;
        margin: auto !important;
        position: relative !important;
        left: -20px !important;
      }

      button.undefined.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center:hover {
        width: 146px !important;
      }
    }
  `;
  document.head.appendChild(style);
})();

/* لون الجزء اللي تحت في المنتجات (موبايل فقط) */
window.addEventListener('load', () => {
  const style = document.createElement('style');
  style.textContent = `
    @media screen and (max-width: 768px) {
      .s-product-card-content {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

      }

     
    }
  `;
  document.head.appendChild(style);
});
document.addEventListener("DOMContentLoaded", () => {
  // دالة لإضافة النجوم في أعلى كارت المنتج
  function addStarsToTop() {
    const cards = document.querySelectorAll(".s-product-card-content");

    cards.forEach(card => {
      // لو مفيش نجوم مضافة قبل كده
      if (!card.querySelector(".stars-custom")) {
        const stars = document.createElement("div");
        stars.className = "stars-custom";
        stars.textContent = "★★★★★";
        stars.style.display = "block";
        stars.style.color = "#facc15";
        stars.style.fontSize = "0.75rem";
        stars.style.marginBottom = "0.25rem";
        stars.style.letterSpacing = "1px";
        stars.style.textAlign = "center";

        // نضيف النجوم في أول الكارت
        card.insertBefore(stars, card.firstChild);
      }
    });
  }

  // شغل الدالة فورًا
  addStarsToTop();

  // راقب الصفحة لو في منتجات بتظهر بعدين
  const observer = new MutationObserver(() => {
    addStarsToTop();
  });

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


document.addEventListener("DOMContentLoaded", function () {
    // لو تم اغلاق الرسالة سابقاً ما نعرضهاش
    if (localStorage.getItem("wpMessageDismissed") === "true") {
        return;
    }

    // إضافة الاستايل
    const styleWp = document.createElement("style");
    styleWp.textContent = `
        #wp-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); /* أسود شفاف */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}
        #wp-box {
            background: #fcfcfc;
            padding: 20px;
            border-radius: 12px;
            max-width: 420px;
            width: 90%;
            text-align: center;
            position: relative;
            box-shadow: 0 6px 24px #E46484;
            font-family: Arial, sans-serif;
        }
        #wp-box h2 {
            margin: 0 0 8px;
            font-size: 20px;
        }
        #wp-box p {
            margin: 0 0 16px;
            color:#E46484;
        }
        .wp-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .wp-btn {
            display: inline-block;
            padding: 10px 16px;
            background: #fcfcfc;
            color: #E46484;
            border: 2px solid #E46484;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            cursor: pointer;
        }
        .wp-btn:hover {
            background: #fcfcfc;
            color: #E46484;
        }
        .wp-close {
            position: absolute;
            top: 8px;
            right: 10px;
            border: none;
            background: transparent;
            font-size: 20px;
            cursor: pointer;
            color: #E46484;
        }
        @media (min-width: 560px) {
            .wp-buttons { flex-direction: row; justify-content: center }
            .wp-btn { min-width: 120px }
        }
    `;
    document.head.appendChild(styleWp);

    // إنشاء البوب أب
    const overlay = document.createElement("div");
    overlay.id = "wp-overlay";
    overlay.innerHTML = `
        <div id="wp-box">
            <button class="wp-close">&times;</button>
            <img id="wp-logo" src="https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/NKqxeD/il9NIcGiHlW958bpCb6lWpwkTVNCQjv2ytquHMq7.png">
            <h2>اهلا بك في متجرنا!</h2>
            <p>نتمنى لك رحلة تجارة ممتعة 🤩</p>

            <div class="wp-buttons">
                <a href="https://lamora-sa.store" class="wp-btn">ابدأ الأن</a>
                
            </div>
        </div>
    `;
    document.body.appendChild(overlay);

    // دالة لإخفاء الرسالة وتخزين الحالة
    function dismissMessage() {
        localStorage.setItem("wpMessageDismissed", "true");
        overlay.remove();
    }

    // زر إغلاق الرسالة
    overlay.querySelector(".wp-close").addEventListener("click", dismissMessage);

    // لكل زرار، لما يضغط، يخزن الحالة ويحول للينك بدون فتح تاب جديد
    overlay.querySelectorAll(".wp-btn").forEach(btn => {
        btn.addEventListener("click", function (e) {
            e.preventDefault(); // منع الانتقال السريع
            dismissMessage();
            window.location.href = this.href; // تحويل في نفس الصفحة
        });
    });
});
document.addEventListener("DOMContentLoaded", function () {
  // 1️⃣ إنشاء زر الأيقونة
  const infoBtn = document.createElement("div");
  infoBtn.innerHTML = `<div style="
      position: fixed;
      bottom: 100px;
      left: 20px;
      text-align: center;
      cursor: pointer;
      z-index: 9999;
    ">
      <div style="font-size:14px; color:#E46484; font-weight:bold;"> ما يميزنا</div>
      <div style="
        width: 55px; height: 55px;
        background: #fcfcfc;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 8px #E46484;
        color: #E46484; font-size: 24px;
      ">🤩</div>
    </div>`;
  document.body.appendChild(infoBtn);

  // 2️⃣ إنشاء البوكس
  const faqBox = document.createElement("div");
  faqBox.style.cssText = `
    position: fixed;
    bottom: 170px;
    left: 20px;
    width: 300px;
    background: #fcfcfc;
    border-radius: 16px;
    box-shadow: 0 6px 16px #E46484;
    padding: 15px;
    font-family: sans-serif;
    direction: rtl;
    display: none;
    z-index: 9999;
    max-height: 400px;
    overflow-y: auto;
  `;

  // 3️⃣ محتوى الأسئلة
  const faqs = [
    { q: "🚚 الشحن والتوصيل", a: "مدة التوصيل من 7-14 يوم عمل حسب موقعك." },
    { q: "💳 الدفع ", a: "نوفر طرق دفع امنة ومتنوعة ." },
    { q: "🎁 المنتجات والإرجاع", a: "كل منتجاتنا أصلية ونوفر سياسة إرجاع سهلة." },
  ];

  faqs.forEach(item => {
    const qDiv = document.createElement("div");
    qDiv.style.cssText = `
      padding: 10px;
      border-bottom: 1px solid #E46484;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      color: #E46484;
    `;
    qDiv.innerHTML = `<span>${item.q}</span> <span style="transition: transform 0.3s;">⯈</span>`;

    const aDiv = document.createElement("div");
    aDiv.textContent = item.a;
    aDiv.style.cssText = `
      display: none;
      padding: 8px;
      font-size: 14px;
      color: #E46484;
      background: #fcfcfc;
      border-radius: 8px;
      margin-top: 5px;
    `;

    qDiv.addEventListener("click", () => {
      const arrow = qDiv.querySelector("span:last-child");
      if (aDiv.style.display === "none") {
        aDiv.style.display = "block";
        arrow.style.transform = "rotate(90deg)";
      } else {
        aDiv.style.display = "none";
        arrow.style.transform = "rotate(0deg)";
      }
    });

    faqBox.appendChild(qDiv);
    faqBox.appendChild(aDiv);
  });

  document.body.appendChild(faqBox);

  // 4️⃣ إظهار/إخفاء البوكس عند الضغط على الأيقونة
  infoBtn.addEventListener("click", () => {
    faqBox.style.display = faqBox.style.display === "none" ? "block" : "none";
  });
});



document.addEventListener("DOMContentLoaded", () => {
  const bannerSec = document.createElement("section");
  bannerSec.className = "accessory-banner hidden";
  bannerSec.innerHTML = `
    <div class="banner-card">
      <div class="banner-container">
        <div class="banner-left">
          <img src="https://i.postimg.cc/xjRDcgzL/Screenshot-2025-10-13-at-13-07-16-19-Whats-App-Business-removebg-preview.png" alt="Accessory Banner">
        </div>

        <div class="banner-right">
          <h2 class="typing-text" data-text="إكسسوارات تكمّل شخصيتك 💕"></h2>
          <p>
            قبل إطلالتك، كل قطعة مصممة بعناية لتعبّر عنكِ بطريقتك الخاصة.  
            اختاري اللمعة التي تليق بكِ من تشكيلتنا الراقية.
          </p>
          <a href="https://lamora-sa.store/%D8%B2%D9%8A%D9%86%D8%A9-%D9%88%D8%A7%D9%86%D8%A7%D9%82%D8%A9/c1636630104" class="shop-btn"> تسوّق الآن</a>
        </div>
      </div>
    </div>
  `;

  // ✅ إدراج البانر قبل آخر سكشن في الصفحة
  const allSections = document.querySelectorAll("section");
  if (allSections.length > 1) {
    const lastSection = allSections[allSections.length - 1];
    lastSection.insertAdjacentElement("beforebegin", bannerSec);
  } else {
    document.body.appendChild(bannerSec);
  }

  const style = document.createElement("style");
  style.textContent = `
    :root {
      --color-primary: black;
      --color-bg: #f4dcdc;
      --card-bg: #f4dcdc;
      --text-dark: black;
    }

    .accessory-banner {
      background: #f4dcdc;
      padding: 100px 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transform: translateY(60px);
      transition: all 1s ease;
    }

    .accessory-banner.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .banner-card {
      background: #f4dcdc;
      border-radius: 35px;
      padding: 60px 50px;
      max-width: 1200px;
      width: 100%;
      backdrop-filter: blur(14px);
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }

    .banner-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 35px 80px #e46484;
    }

    .banner-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 50px;
      direction: ltr;
    }

    .banner-left {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .banner-left img {
      width: 100%;
      max-width: 460px;
      border-radius: 25px;
      transition: transform 0.5s ease;
      object-fit: cover;
      height: auto;
    }

    .banner-left img:hover {
      transform: scale(1.03);
    }

    .banner-right {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: 1.3rem;
    }

    .typing-text {
      color: black;
      font-weight: 800;
      font-size: clamp(1.6rem, 4vw, 2.3rem);
      overflow: hidden;
      white-space: nowrap;
      width: 0;
      line-height: 1.5;
      padding: 10px 0;
      display: inline-block;
      vertical-align: middle;
    }

    @keyframes typing {
      from { width: 0; }
      to { width: 100%; }
    }

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

    .banner-right p {
      font-size: clamp(1rem, 2.2vw, 1.15rem);
      color: var(--text-dark);
      line-height: 1.9;
      background: #f4dcdc;
      padding: 1rem 1.4rem;
      border-radius: 18px;
      backdrop-filter: blur(6px);
      max-width: 90%;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 1s ease forwards;
      animation-delay: 3.2s;
    }

    .shop-btn {
      display: inline-block;
      background: #E46484;
      color: #fff;
      padding: 12px 35px;
      border-radius: 40px;
      font-size: 1rem;
      font-weight: 600;
      position: relative;
      overflow: hidden;
      text-decoration: none;
      box-shadow: 0 5px 25px rgba(161, 75, 101, 0.3);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 1s ease forwards;
      animation-delay: 3.6s;
    }

    .shop-btn::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
      transition: all 0.6s ease;
    }

    .shop-btn:hover::before { left: 100%; }

    .shop-btn:hover {
      transform: translateY(-4px) scale(1.04);
      box-shadow: 0 10px 30px rgba(161, 75, 101, 0.4);
    }

    @media(max-width: 992px) {
      .banner-card { padding: 40px 25px; }
      .banner-container { grid-template-columns: 1fr; text-align: center; }
      .banner-right { align-items: center; text-align: center; }
      .typing-text { font-size: clamp(1.3rem, 5vw, 1.8rem); }
      .banner-right p { font-size: clamp(0.95rem, 3.5vw, 1.1rem); max-width: 100%; }
      .shop-btn { padding: 10px 28px; font-size: 0.95rem; }
    }

    @media(max-width: 480px) {
      .accessory-banner { padding: 60px 15px; }
      .typing-text { font-size: 1.3rem; }
      .banner-right p { font-size: 0.9rem; }
    }
  `;
  document.head.appendChild(style);

  // ✅ الكشف عند التمرير لتفعيل الأنيميشن
  const revealOnScroll = () => {
    const rect = bannerSec.getBoundingClientRect();

    // لما يوصل السكشن للمنطقة المرئية
    if (rect.top < window.innerHeight * 0.8) {
      bannerSec.classList.add("visible");

      const textEl = bannerSec.querySelector(".typing-text");
      const text = textEl.dataset.text;

      // تأثير الكتابة بعد ظهور السكشن
      textEl.style.animation = "typing 3s steps(30) forwards";
      textEl.textContent = text;

      // إزالة الاستماع بعد التشغيل مرة واحدة
      window.removeEventListener("scroll", revealOnScroll);
    }
  };

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