document.addEventListener("DOMContentLoaded", () => {
  const loader = document.createElement("div");
  loader.innerHTML = `
  <style>
    @keyframes fadeOut {
      to { opacity: 0; visibility: hidden; }
    }
    @keyframes logoGlow {
      0% { filter: drop-shadow(0 0 2px #fff); }
      50% { filter: drop-shadow(0 0 15px #fff) drop-shadow(0 0 25px #d5caba); }
      100% { filter: drop-shadow(0 0 2px #fff); }
    }
    @keyframes popIn {
      0% { opacity: 0; transform: scale(0.8); }
      100% { opacity: 1; transform: scale(1); }
    }
    @keyframes floatHeart {
      0% { transform: translateY(0) rotate(0deg); opacity: 1; }
      100% { transform: translateY(-120vh) rotate(360deg); opacity: 0; }
    }
    @keyframes shimmer {
      0% { transform: translate(0, 0); }
      100% { transform: translate(-100px, -100px); }
    }
    @keyframes fadeInPage {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    #lux-loader {
      position: fixed;
      inset: 0;
      background: linear-gradient(135deg, #8f7098, #d5caba);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 999999;
      overflow: hidden;
    }
    .glitter {
      position: absolute;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px);
      background-size: 3px 3px;
      animation: shimmer 4s linear infinite;
    }
    .loader-logo {
      animation: popIn 1.2s ease forwards, logoGlow 3s infinite ease-in-out;
    }
    .loader-logo img {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      object-fit: contain;
    }
    .loader-text {
      font-family: 'Cairo', sans-serif;
      color: #fff;
      font-size: 30px;
      font-weight: 700;
      margin-top: 20px;
      letter-spacing: 1px;
      text-shadow: 0 0 8px rgba(255,255,255,0.8);
      opacity: 0;
      animation: popIn 1s ease 1s forwards;
    }
    .loader-sub {
      color: #fff;
      font-family: 'Cairo', sans-serif;
      font-size: 16px;
      opacity: 0;
      margin-top: 8px;
      animation: popIn 1s ease 1.5s forwards;
    }
    .heart {
      position: absolute;
      bottom: -50px;
      opacity: 0.6;
      animation: floatHeart linear forwards;
    }
    body.fade-in {
      animation: fadeInPage 1.2s ease-out;
    }
  </style>

  <div id="lux-loader">
    <div class="glitter"></div>
    <div class="loader-logo">
      <img src="https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/EZRWxZ/u3l6LhYrH4Urah7eM96IuUjfVmJpHEllkaZ736Nn.png" alt="لمسات الفرح">
    </div>
    <div class="loader-text">لمسات الفرح</div>
    <div class="loader-sub">لمسة أناقة... وبداية فرح 💕</div>
  </div>
  `;
  document.body.appendChild(loader);

  const container = loader.querySelector("#lux-loader");

  // توليد قلوب متطايرة
  for (let i = 0; i < 15; i++) {
    const heart = document.createElement("div");
    heart.classList.add("heart");
    heart.innerHTML = "💜";
    heart.style.left = Math.random() * 100 + "vw";
    heart.style.fontSize = Math.random() * 20 + 15 + "px";
    heart.style.animationDuration = 4 + Math.random() * 3 + "s";
    heart.style.animationDelay = Math.random() * 2 + "s";
    container.appendChild(heart);
  }

  // صوت ترحيبي ناعم (اختياري)
  const audio = new Audio("https://cdn.pixabay.com/audio/2023/03/22/audio_ee52b2ed27.mp3");
  audio.volume = 0.4;
  setTimeout(() => audio.play().catch(()=>{}), 500);

  // بعد انتهاء اللودر – ظهور الصفحة بانسيابية
  setTimeout(() => {
    document.body.classList.add("fade-in");
    container.style.animation = "fadeOut 1s forwards";
    setTimeout(() => loader.remove(), 1000);
  }, 4000);
});

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".s-product-card-entry").forEach(card => {
    // حذف كل الأزرار النصية القديمة لو موجودة
    card.querySelectorAll("button, .add-to-cart-btn, .s-button").forEach(btn => btn.remove());

    // لو الأيقونات مش موجودة نضيفها
    if (!card.querySelector(".s-product-icons")) {
      const iconsDiv = document.createElement("div");
      iconsDiv.classList.add("s-product-icons");
      iconsDiv.innerHTML = `
        <a href="#" title="أضيفي للمفضلة"><i class="fa fa-heart"></i></a>
        <a href="#" title="عرض سريع"><i class="fa fa-eye"></i></a>
        <a href="#" title="أضيفي للسلة"><i class="fa fa-shopping-bag"></i></a>
      `;
      card.appendChild(iconsDiv);
    }
  });
});
document.addEventListener("DOMContentLoaded", function () {
    let observer = new MutationObserver(() => {
        let productCards = document.querySelectorAll(".s-product-card-content");

        productCards.forEach((productCard) => {
            if (!productCard.parentElement.querySelector(".marquee-bar")) { // تجنب التكرار
                let marquee = document.createElement("div");
                marquee.classList.add("marquee-bar");

                let textContent = `
                    <span>🔥 خصومات لن تجدها إلا هنا </span>
                    <span>💥💵 أسعار تبدأ من المستحيل </span>
                `;

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

                productCard.parentElement.insertBefore(marquee, productCard);
            }
        });
    });

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



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%; 
        max-width: 800px; 
        border-radius: 10px;
    `;

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

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

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

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

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

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

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

    // إضافة القسم قبل الفوتر
    const footer = document.querySelector("footer");
    footer.parentNode.insertBefore(faqSection, footer);
});

const footer = document.querySelector('.store-footer');
const wavesContainer = document.createElement('div');
wavesContainer.innerHTML = `
  <div class="wave" id="wave1"></div>
  <div class="wave" id="wave2"></div>
  <div class="wave" id="wave3"></div>
  <div class="wave" id="wave4"></div>
`;
wavesContainer.classList.add('waves');
footer.insertBefore(wavesContainer, footer.firstChild);

function handleScroll() {
    const elements = document.querySelectorAll('.banner--fixed img');
 
    elements.forEach(element => {
       const rect = element.getBoundingClientRect();
 
       if (rect.top <= window.innerHeight && rect.bottom >= 0) {
          if (!element.classList.contains('visible')) {
             element.classList.add('visible');
          }
       } else {
          if (element.classList.contains('visible')) {
             element.classList.remove('visible');
          }
       }
    });
 }
 
 window.addEventListener('scroll', handleScroll);
 handleScroll();

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

function handleScroll3() {
    const elements = document.querySelectorAll('.lazy__bg');
 
    elements.forEach(element => {
       const rect = element.getBoundingClientRect();
 
       if (rect.top <= window.innerHeight && rect.bottom >= 0) {
          if (!element.classList.contains('visible')) {
             element.classList.add('visible');
          }
       } else {
          if (element.classList.contains('visible')) {
             element.classList.remove('visible');
          }
       }
    });
 }
 
 window.addEventListener('scroll', handleScroll3);
 handleScroll3();

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

// Create scrolling text dynamically

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

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

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

    window.addEventListener("scroll", () => {
       const scrollTop = window.scrollY;
       const docHeight = document.documentElement.scrollHeight - window.innerHeight;
       const scrollPercent = (scrollTop / docHeight) * 100;
 
       if (scrollPercent > 1) {
          backToTopButton.style.display = "block";
       } else {
          backToTopButton.style.display = "none";
       }
 
       const circle = document.querySelector(".circle");
       const offset = 100 - scrollPercent;
       circle.style.strokeDasharray = `${scrollPercent}, 100`;
    });
 
    backToTopButton.addEventListener("click", () => {
       window.scrollTo({
          top: 0,
          behavior: "smooth",
       });
    });
});
 
document.querySelectorAll('a[href=""], a[href="#"]').forEach(link => {
    link.addEventListener('click', event => {
       event.preventDefault();
    });
});

const sallaProductOptions = document.querySelector('salla-product-options');
if (sallaProductOptions) {
    const alertMessage = document.createElement('p');
    alertMessage.textContent = "الرجاء اختيار أحد هذا الاختيارات للتمكن من اتمام الشراء";
    alertMessage.style.cssText = `
    background-color: #ffdddd;
    color: #a94442;
    padding: 15px;
    border: 1px solid #a94442;
    border-radius: 5px;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;`;
    sallaProductOptions.insertBefore(alertMessage, sallaProductOptions.firstChild);
}

// WhatsApp Float
const whatsappFloat = document.createElement('div');
whatsappFloat.className = 'whatsapp-float';
whatsappFloat.innerHTML = `
<div class="whatsapp-popup" style="display: none;">
  <div class="popup-header">
    <div class="avatar-container">
      <img src="https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg" alt="Avatar" class="avatar-img">
      <span class="support-text">الدعم الفني</span>
    </div>
    <button class="close-popup">×</button>
  </div>
  <div class="logo-container"></div>
  <div class="popup-body">
    <p>مرحباً بك، نحن متواجدون لخدمتك</p>
    <p>برجاء ارسال رقم:</p>
    <ul class="options-list">
      <li>1- لتتبع الطلب</li>
      <li>2- مشكلة</li>
      <li>3- استفسار</li>
    </ul>
    <a href="https://wa.me/+966537593508" target="_blank" class="whatsapp-button">تواصل معنا</a>
    <div class="adfaz-container">
      <a href="https://adfaz.sa/" target="_blank" class="adfaz-link">
        <img src="https://i.ibb.co/P4YVDmW/Black-Gold-White-Luxury-Royal-Crown-Logo.png" alt="Adfaz" class="adfaz-img">
        <span class="adfaz-text">برمجة وتطوير أدفاز</span>
      </a>
    </div>
  </div>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp" class="whatsapp-icon">`;

document.body.appendChild(whatsappFloat);

// WhatsApp Styles
const whatsappStyle = document.createElement('style');
whatsappStyle.textContent = `
.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-popup {
  position: fixed;
  bottom: 90px;
  left: 20px;
  background: linear-gradient(var(--second-color), var(--main-color));
  width: 300px;
  padding: 15px;
  color: white;
  z-index: 101;
  border-radius: 10px;
}
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.adfaz-img {
  width: 30px;
  height: 30px;
  margin-left: 3px;
}
.adfaz-text {
  font-size: 12px;
  color: white;
}`;
document.head.appendChild(whatsappStyle);

whatsappFloat.querySelector('.whatsapp-icon').addEventListener('click', function() {
  const popup = this.parentNode.querySelector('.whatsapp-popup');
  popup.style.display = popup.style.display === 'none' ? 'block' : 'none';
});

whatsappFloat.querySelector('.close-popup').addEventListener('click', function() {
  this.closest('.whatsapp-popup').style.display = 'none';
});

// Loader
const loaderDiv = document.createElement('div');
loaderDiv.id = 'loaderr';
loaderDiv.style.zIndex = '999';
loaderDiv.innerHTML = `
<div class="everything">
  <div class="loading-container">
    <div class="saher">
      <div class="loader__balls">
        <div class="loader__balls__group">
          <div class="ball item1"></div>
          <div class="ball item1"></div>
          <div class="ball item1"></div>
        </div>
        <div class="loader__balls__group">
          <div class="ball item2"></div>
          <div class="ball item2"></div>
          <div class="ball item2"></div>
        </div>
        <div class="loader__balls__group">
          <div class="ball item3"></div>
          <div class="ball item3"></div>
          <div class="ball item3"></div>
        </div>
      </div>
    </div>
  </div>
</div>`;
document.body.appendChild(loaderDiv);

// Dark Mode Toggle


// Dark Mode Toggle with your CSS
const style = document.createElement('style');
style.textContent = `
/* Your original dark mode toggle CSS */
.dark-mode-toggle {
    display: block;
    --width-of-switch: 3.5em;
    --height-of-switch: 2em;
    --size-of-icon: 1.4em;
    --slider-offset: 0.3em;
    position: relative;
    width: var(--width-of-switch);
    height: var(--height-of-switch);
    margin-left: 1rem;
}

.dark-mode-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbcbd3;
    transition: .4s;
    border-radius: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    height: var(--size-of-icon);
    width: var(--size-of-icon);
    border-radius: 20px;
    left: var(--slider-offset);
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
    transition: .4s;
}

input:checked + .slider {
    background-color: #303136;
}

input:checked + .slider:before {
    left: calc(100% - (var(--size-of-icon) + var(--slider-offset)));
    background: #303136;
    box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
}
`;
document.head.appendChild(style);

// Dark Mode Toggle Logic
const parentDiv = document.querySelector('.flex.items-center.justify-end');
const darkModeToggle = document.createElement('label');
darkModeToggle.className = 'dark-mode-toggle';
darkModeToggle.innerHTML = `
    <input type="checkbox">
    <span class="slider"></span>
`;

parentDiv.prepend(darkModeToggle);

(function() {
    const body = document.body;
    const toggleInput = darkModeToggle.querySelector('input');

    // Get saved theme preference
    const currentMode = localStorage.getItem('theme') || 'light';
    if (currentMode === 'dark') {
        body.classList.add('dark-theme');
        toggleInput.checked = true;
    }

    // Listen for toggle changes
    toggleInput.addEventListener('change', () => {
        body.classList.toggle('dark-theme');
        localStorage.setItem('theme', body.classList.contains('dark-theme') ? 'dark' : 'light');
    });
})();


// Dark Mode Toggle (Updated Implementation)

// Banner Swiper
document.body.insertAdjacentHTML('afterbegin', `
<div class="banner-swap">
  <div class="bannt">
    ${Array(12).fill(`
    <div class="banrerr" dir="rtl">
      ${['خدمة عملاء ممتازة <i class="fa-solid fa-headset"></i>',
         'توصيل سريع <i class="fa-solid fa-truck-fast"></i>',
         'منتجات عالية الجودة <i class="fa-solid fa-box-open"></i>',
         'دفع آمن <i class="fa-solid fa-lock"></i>',
         'دعم 24/7 <i class="fa-solid fa-phone-volume"></i>',
         'أسعار تنافسية <i class="fa-solid fa-tag"></i>']
       .join('</div><div class="banrerr" dir="rtl">')}
    </div>
    `).join('')}
  </div>
</div>`);

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

// Google Tag Manager
(function () {
    const 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);
    const noscript = document.createElement('noscript');
    noscript.innerHTML = `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N36BWD87" height="0" width="0" style="display:none;visibility:hidden"></iframe>`;
    document.body.appendChild(noscript);
})();

const tips = [
  "💡 الشال الكشميري يضيف فخامة لأي إطلالة شتوية.",
  "👜 الشنطة الصغيرة تعطيك مظهرًا أنيقًا في المناسبات.",
  "🌸 الألوان الهادئة تبرز أناقتك الطبيعية.",
];
const randomTip = tips[Math.floor(Math.random() * tips.length)];
document.querySelector('.s-slider-block__title').insertAdjacentHTML('afterend', `<p class="tip-box">${randomTip}</p>`);

document.addEventListener("DOMContentLoaded", function () {
  // إنشاء القسم بالكامل
  const testimonialsSection = document.createElement("section");
  testimonialsSection.classList.add("testimonials-section");
  testimonialsSection.innerHTML = `
    <h2 class="testimonials-title">آراء عميلات <span>لمسات الفرح</span> 💕</h2>
    <div class="testimonials-container">
      <div class="testimonial-card">
        <p class="testimonial-text">"الشنطة وصلت بسرعة وجودتها فخمة جدًا! أكتر من المتوقع ❤️"</p>
        <h4 class="testimonial-name">- سارة.م</h4>
      </div>
      <div class="testimonial-card">
        <p class="testimonial-text">"الشالات الكشميرية ناعمة جدًا على البشرة! أنصح بيهم بشدة 👌"</p>
        <h4 class="testimonial-name">- منى.خ</h4>
      </div>
      <div class="testimonial-card">
        <p class="testimonial-text">"تعامل راقي وتغليف أنيق.. حسّيت فعلاً إنها لمسة فرح 💫"</p>
        <h4 class="testimonial-name">- داليا.ر</h4>
      </div>
    </div>
  `;

  // إدراج القسم قبل الفوتر
  const footer = document.querySelector("footer");
  if (footer) {
    footer.parentNode.insertBefore(testimonialsSection, footer);
  }

  // تنسيقات CSS مضافة من داخل JS
  const style = document.createElement("style");
  style.textContent = `
    .testimonials-section {
      background: linear-gradient(180deg, #fff, #f9f8f9);
      padding: 60px 20px;
      text-align: center;
      border-top: 3px solid #d5caba;
      overflow: hidden;
    }

    .testimonials-title {
      font-size: 1.8rem;
      color: #8f7098;
      font-weight: 700;
      margin-bottom: 40px;
    }

    .testimonials-title span {
      color: #d5caba;
    }

    .testimonials-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 25px;
    }

    .testimonial-card {
      background: #fff;
      border-radius: 20px;
      padding: 25px;
      max-width: 300px;
      box-shadow: 0 5px 20px rgba(143,112,152,0.15);
      border: 1px solid rgba(213,202,186,0.2);
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s ease;
    }

    .testimonial-card.show {
      opacity: 1;
      transform: translateY(0);
    }

    .testimonial-text {
      font-size: 1rem;
      color: #4b3e4d;
      line-height: 1.6;
      margin-bottom: 15px;
      font-style: italic;
    }

    .testimonial-name {
      color: #8f7098;
      font-weight: 600;
      font-size: 1rem;
    }

    .testimonial-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 10px 25px rgba(143,112,152,0.25);
    }
  `;
  document.head.appendChild(style);

  // تأثير الظهور التدريجي عند التمرير
  window.addEventListener("scroll", () => {
    document.querySelectorAll(".testimonial-card").forEach(card => {
      if (card.getBoundingClientRect().top < window.innerHeight - 100) {
        card.classList.add("show");
      }
    });
  });
});
(function(){
  // حماية من تشغيل الكود مرتين
  if (window.__salla_testimonials_added) return;
  window.__salla_testimonials_added = true;

  // بيانات الآراء — عدّلي أو أضيفي هنا لو حبيتي
  const testimonialsData = [
    { text: "الشنطة وصلت بسرعة وجودتها فخمة جدًا! أكتر من المتوقع ❤️", name: "سارة.م" },
    { text: "الشالات الكشميرية ناعمة جدًا على البشرة! أنصح بيهم بشدة 👌", name: "منى.خ" },
    { text: "تعامل راقي وتغليف أنيق.. حسّيت فعلاً إنها لمسة فرح 💫", name: "داليا.ر" }
  ];

  // دالة لإنشاء العنصر (مرة واحدة)
  function createTestimonialsSection() {
    // لو العنصر موجود بالفعل رجع
    if (document.getElementById('salla-testimonials')) return null;

    const section = document.createElement('section');
    section.id = 'salla-testimonials';
    section.className = 'salla-testimonials-section';
    section.innerHTML = `
      <h2 class="salla-testimonials-title">آراء عميلات <span>لمسات الفرح</span> 💕</h2>
      <div class="salla-testimonials-container">
        ${testimonialsData.map(t => `
          <div class="salla-testimonial-card">
            <p class="salla-testimonial-text">"${t.text}"</p>
            <h4 class="salla-testimonial-name">- ${t.name}</h4>
          </div>`).join('')}
      </div>
    `;
    return section;
  }

  // CSS مضمن (يُضاف لمرة واحدة)
  function injectStyles() {
    if (document.getElementById('salla-testimonials-style')) return;
    const style = document.createElement('style');
    style.id = 'salla-testimonials-style';
    style.textContent = `
      /* Testimonials - Salla injected */
      .salla-testimonials-section {
        background: linear-gradient(180deg, #fff, #f9f8f9);
        padding: 50px 16px;
        text-align: center;
        border-top: 3px solid #d5caba;
        font-family: "Cairo", sans-serif;
      }
      .salla-testimonials-title { font-size: 1.8rem; color: #8f7098; font-weight:700; margin-bottom: 24px; }
      .salla-testimonials-title span { color: #d5caba; }

      .salla-testimonials-container {
        display: flex; flex-wrap: wrap; justify-content:center; gap:20px; max-width:1100px; margin: 0 auto;
      }
      .salla-testimonial-card {
        background:#fff; border-radius:16px; padding:20px; max-width:320px; width:100%;
        box-shadow: 0 6px 22px rgba(143,112,152,0.12); border:1px solid rgba(213,202,186,0.18);
        opacity:0; transform: translateY(24px); transition: all 0.8s cubic-bezier(.2,.9,.3,1);
      }
      .salla-testimonial-card.show { opacity:1; transform: translateY(0); }
      .salla-testimonial-text { font-size:1rem; color:#4b3e4d; margin:0 0 12px; font-style:italic; line-height:1.6 }
      .salla-testimonial-name { color:#8f7098; font-weight:700; margin:0; }

      /* responsive */
      @media (max-width:800px) {
        .salla-testimonials-container { gap:14px; }
        .salla-testimonial-card { max-width: 92%; padding:18px; }
        .salla-testimonials-title { font-size:1.4rem; }
      }
    `;
    document.head.appendChild(style);
  }

  // إضافة القسم قبل الفوتر أو في نهاية body كاحتياط
  function insertSection(section) {
    // جدّ الفوتر بعد تكرار محاولات (بعض قوالب تحمل الفوتر متأخر)
    const tryInsert = () => {
      const footer = document.querySelector('footer, .site-footer, #footer, .footer');
      if (footer && footer.parentNode) {
        footer.parentNode.insertBefore(section, footer);
        runShowOnScroll(); // بعد الإدراج نفعل الظهور بالتدريج
        return true;
      }
      // لو ما لقيناش الفوتر بعد 150ms * 50 = 7.5s، نضيف في نهاية body
      return false;
    };

    // نجرب لفترة قصيرة للعثور على الفوتر الديناميكي
    let attempts = 0;
    const maxAttempts = 50;
    const interval = setInterval(() => {
      attempts++;
      if (tryInsert()) {
        clearInterval(interval);
      } else if (attempts >= maxAttempts) {
        clearInterval(interval);
        document.body.appendChild(section);
        runShowOnScroll();
      }
    }, 150);
  }

  // تشغيل تأثير الظهور بالتدريج (يعمل أيضاً مباشرة عند الإدراج)
  function runShowOnScroll() {
    const cards = document.querySelectorAll('.salla-testimonial-card');
    function check() {
      cards.forEach(card => {
        if (card.classList.contains('show')) return;
        const rect = card.getBoundingClientRect();
        if (rect.top < window.innerHeight - 80) card.classList.add('show');
      });
    }
    check();
    window.addEventListener('scroll', throttle(check, 120));
    // استعداد للـ resize كمان
    window.addEventListener('resize', throttle(check, 200));
  }

  // مساعدة: دالة throttle بسيطة
  function throttle(fn, wait) {
    let t = 0;
    return function() {
      const now = Date.now();
      if (now - t > wait) {
        t = now;
        fn.apply(this, arguments);
      }
    };
  }

  // تنفيذ: حقن الأنماط، إنشاء القسم، وإدراجه
  injectStyles();
  const sec = createTestimonialsSection();
  if (!sec) return;
  insertSection(sec);

})();