document.addEventListener("DOMContentLoaded", function() {
        // البحث عن صورة اللوجو داخل كود الـ HTML الخاص بك
        const logoImg = document.querySelector('a.navbar-brand img[alt="ناتورا logo"]');
        
        // إذا تم العثور على الصورة، سيتم استبدال الرابط
        if (logoImg) {
            logoImg.src = "https://cdn.salla.sa/KjKxDj/3bf08cbf-cbb1-4790-89fc-5d33805ecea9-1000x780.83588175331-HM5j3Jl2JUdiktPpcx53FLaTbVTlyB7PXlSw0KnK.png";
        }
    });



document.addEventListener("DOMContentLoaded", function() {
        // نستخدم setInterval للبحث المستمر عن أي زر يظهر في الصفحة
        setInterval(function() {
            
            // البحث عن جميع الأزرار التي حالتها "نفدت الكمية" ولم نقم بتعديلها مسبقاً
            // استخدمنا [product-status="out"] للبحث، و :not([data-updated="true"]) لتجاهل الأزرار التي تم تغييرها
            let outOfStockButtons = document.querySelectorAll('salla-button[product-status="out"]:not([data-updated="true"])');
            
            outOfStockButtons.forEach(function(sallaComponent) {
                let innerButton = sallaComponent.querySelector('button');
                let textSpan = sallaComponent.querySelector('.s-button-text span');

                // التحقق من وجود النص "نفدت الكمية"
                if (textSpan && textSpan.innerText.trim() === 'نفدت الكمية') {
                    
                    // 1. تغيير النص إلى قريباً
                    textSpan.innerText = 'قريباً';

                    // 2. تغيير الألوان
                    if (innerButton) {
                        innerButton.style.setProperty('background-color', '#B59A6D', 'important'); // اللون الذهبي
                        innerButton.style.setProperty('color', '#FFFFFF', 'important'); // لون النص أبيض
                        innerButton.style.setProperty('border-color', '#B59A6D', 'important'); // لون الإطار ذهبي
                        innerButton.style.setProperty('opacity', '1', 'important'); // إلغاء تأثير البهتان
                    }
                    
                    // 3. وضع علامة على هذا الزر بأنه تم تعديله، حتى لا يعيد الكود تعديله مرة أخرى
                    sallaComponent.setAttribute('data-updated', 'true');
                }
            });
            
        }, 500); // الكود سيفحص الصفحة كل نصف ثانية لضمان تعديل أي منتج جديد يظهر
    });




document.addEventListener("DOMContentLoaded", function() {
    // 1. تحديد العنصر المستهدف
    const targetElement = document.querySelector('.index #main-content .s-block');

    // 2. التحقق من وجود العنصر في الصفحة لتجنب أي أخطاء
    if (targetElement) {
        
        // 3. الكود المراد إضافته (التنسيقات + الأقسام)
        const naturaContent = `
            <style>
                @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');

                :root {
                    --natura-light: #F9F8F4;
                    --natura-green: #2C4C3B;
                    --natura-gold: #B59A6D;
                    --natura-card: #FFFFFF;
                }

                .natura-custom-section {
                    font-family: 'Tajawal', sans-serif;
                    background-color: var(--natura-light);
                    color: var(--natura-green);
                    -webkit-font-smoothing: antialiased;
                    direction: rtl;
                }

                .natura-custom-section .section {
                    padding: 6rem 2rem;
                    max-width: 80rem;
                    margin: 0 auto;
                }
                .natura-custom-section .text-center { text-align: center; }
                .natura-custom-section .mb-16 { margin-bottom: 4rem; }
                .natura-custom-section .section-title {
                    font-size: 1.875rem;
                    font-weight: 700;
                    margin-bottom: 1rem;
                }
                .natura-custom-section .section-subtitle {
                    font-size: 1.125rem;
                    opacity: 0.8;
                }
                .natura-custom-section .grid {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 1.5rem;
                }

                .natura-custom-section .hero {
                    position: relative; width: 100%; height: 100vh;
                    background-image: url('https://cdn.salla.sa/KjKxDj/1e07ee63-950b-4f7a-a18e-0fccc2572cb9-1000x520.83333333333-nUcWyD69na8Nd4gvkDdJEoZHtOJVQBJNed0b4AcQ.png');
                    background-size: cover; background-position: center;
                    display: flex; align-items: center; justify-content: flex-start; padding: 0 2rem;
                }
                .natura-custom-section .hero-overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.1); }
                .natura-custom-section .glass-card {
                    background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
                    border: 1px solid rgba(255, 255, 255, 0.3); padding: 2.5rem; border-radius: 1.5rem;
                    max-width: 32rem; z-index: 10; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
                    text-align: center; position: relative;
                }
                .natura-custom-section .hero-title { font-size: 2.25rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.25; }
                .natura-custom-section .hero-subtitle { font-size: 1.5rem; font-weight: 400; opacity: 0.8; display: block; margin-top: 0.5rem; }
                .natura-custom-section .hero-text { font-size: 1.125rem; margin-bottom: 2rem; line-height: 1.625; font-weight: 500; }
                .natura-custom-section .hero-btn {
                    background-color: var(--natura-green); color: white; padding: 1rem 2.5rem;
                    border-radius: 9999px; font-size: 1.125rem; font-weight: 700; border: none;
                    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); cursor: pointer; transition: all 0.3s; width: 100%; font-family: inherit;
                }
                .natura-custom-section .hero-btn:hover { background-color: var(--natura-gold); }

                .natura-custom-section .feature-card {
                    background-color: var(--natura-card); padding: 2rem; border-radius: 1rem;
                    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); border: 1px solid #f3f4f6;
                    text-align: center; cursor: pointer; transition: all 0.3s;
                }
                .natura-custom-section .feature-card:hover { transform: translateY(-0.5rem); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
                .natura-custom-section .feature-icon { font-size: 2.25rem; margin-bottom: 1rem; }
                .natura-custom-section .feature-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
                .natura-custom-section .feature-en { font-size: 0.875rem; opacity: 0.7; margin-bottom: 1rem; }
                .natura-custom-section .feature-desc { color: rgba(44, 76, 59, 0.8); }

                @media (min-width: 768px) {
                    .natura-custom-section .hero { padding: 0 6rem; }
                    .natura-custom-section .glass-card { text-align: right; padding: 3.5rem; }
                    .natura-custom-section .hero-title { font-size: 3.75rem; }
                    .natura-custom-section .hero-subtitle { font-size: 1.875rem; }
                    .natura-custom-section .hero-text { font-size: 1.25rem; }
                    .natura-custom-section .hero-btn { width: auto; }
                    .natura-custom-section .section { padding: 6rem; }
                    .natura-custom-section .section-title { font-size: 2.25rem; }
                    .natura-custom-section .grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
                }
                @media (min-width: 1024px) {
                    .natura-custom-section .grid { grid-template-columns: repeat(4, 1fr); }
                }
            </style>

            <!-- تغليف الأقسام لتطبيق التنسيقات عليها فقط دون التأثير على باقي الصفحة -->
            <div class="natura-custom-section">
                <!-- البانر الرئيسي -->
                <section id="hero" class="hero">
                    <div class="hero-overlay"></div>
                    <div class="glass-card">
                        <h1 class="hero-title">خلّها أبسط <br><span class="hero-subtitle">Keep it Simple</span></h1>
                        <p class="hero-text">
                            روتين يومي أخف… بدون تعقيد.<br>
                            ابدأ بخطوة بسيطة وخلّ ناتورا تكون جزء من يومك.
                        </p>
                        <button class="hero-btn">تسوّق الآن</button>
                    </div>
                </section>

                <!-- قسم الميزات -->
                <section id="features" class="section">
                    <div class="text-center mb-16">
                        <h2 class="section-title">وش تحتاج اليوم؟</h2>
                        <p class="section-subtitle">تسوق حسب إحساسك</p>
                    </div>
                    
                    <div class="grid">
                        <div class="feature-card">
                            <div class="feature-icon"></div>
                            <h3 class="feature-title">خفة ونشاط</h3>
                            <p class="feature-en">Light & Active</p>
                            <p class="feature-desc">ابدأ يومك بطاقة أخف</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon"></div>
                            <h3 class="feature-title">هدوء وتركيز</h3>
                            <p class="feature-en">Calm & Focus</p>
                            <p class="feature-desc">خفّف زحمة أفكارك</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon"></div>
                            <h3 class="feature-title">نوم عميق</h3>
                            <p class="feature-en">Deep Sleep</p>
                            <p class="feature-desc">نهاية يوم هادية ونوم أريح</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon"></div>
                            <h3 class="feature-title">راحة وهضم</h3>
                            <p class="feature-en">Gut Comfort</p>
                            <p class="feature-desc">خفة من الداخل… تفرق في يومك</p>
                        </div>
                    </div>
                </section>
            </div>
        `;

        // 4. إدراج الكود قبل العنصر المستهدف
        targetElement.insertAdjacentHTML('beforebegin', naturaContent);
        
    } else {
        console.warn("لم يتم العثور على العنصر '.index #main-content .s-block' لإضافة الأقسام.");
    }
});


document.addEventListener("DOMContentLoaded", function() {
    // 1. تحديد العنصر المستهدف
    const targetElement = document.querySelector('.index #main-content .s-block');

    // 2. التحقق من وجود العنصر في الصفحة
    if (targetElement) {
        
        // 3. الكود المراد إضافته (تنسيقات مُحسنة + قسم التقييمات)
        const testimonialsContent = `
            <style>
                @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');

                .natura-reviews-section {
                    font-family: 'Tajawal', sans-serif;
                    direction: rtl;
                }

                .natura-reviews-section .bg-green { 
                    background-color: #2C4C3B; 
                    color: #F9F8F4; 
                    padding: 6rem 2rem; 
                    text-align: center; 
                }
                
                .natura-reviews-section .testimonial-container { 
                    max-width: 48rem; 
                    margin: 0 auto; 
                }
                
                .natura-reviews-section .testimonial-title { 
                    font-size: 1.875rem; 
                    font-weight: 700; 
                    margin-bottom: 3rem; 
                }
                
                /* السلايدر التلقائي */
                .natura-reviews-section .slider-wrapper {
                    position: relative;
                    min-height: 220px; /* تم زيادة الارتفاع ليناسب البطاقات */
                    margin-bottom: 3rem;
                    display: flex;
                    justify-content: center;
                }
                
                .natura-reviews-section .testimonial-slide {
                    position: absolute;
                    width: 100%;
                    opacity: 0;
                    animation: sallaAutoSlide 12s infinite; 
                    display: flex;
                    justify-content: center;
                }

                .natura-reviews-section .slide-1 { animation-delay: 0s; }
                .natura-reviews-section .slide-2 { animation-delay: 4s; }
                .natura-reviews-section .slide-3 { animation-delay: 8s; }
                
                @keyframes sallaAutoSlide {
                    0% { opacity: 0; transform: translateY(20px); z-index: 1; }
                    5% { opacity: 1; transform: translateY(0); z-index: 2; }
                    28% { opacity: 1; transform: translateY(0); z-index: 2; }
                    33% { opacity: 0; transform: translateY(-20px); z-index: 1; }
                    100% { opacity: 0; z-index: 1; }
                }
                
                /* تصميم بطاقة التقييم الجديدة */
                .natura-reviews-section .review-card {
                    background: rgba(255, 255, 255, 0.08);
                    border: 1px solid rgba(255, 255, 255, 0.15);
                    backdrop-filter: blur(8px);
                    -webkit-backdrop-filter: blur(8px);
                    border-radius: 1.5rem;
                    padding: 2rem;
                    max-width: 400px;
                    width: 100%;
                    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
                }

                .natura-reviews-section .stars {
                    color: #B59A6D;
                    font-size: 1.5rem;
                    margin-bottom: 1rem;
                    letter-spacing: 2px;
                }

                .natura-reviews-section .testimonial-text { 
                    font-size: 1.25rem; 
                    font-weight: 400; 
                    line-height: 1.6; 
                    margin-bottom: 1.5rem;
                }

                .natura-reviews-section .reviewer-info {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.75rem;
                }

                .natura-reviews-section .reviewer-avatar {
                    width: 40px;
                    height: 40px;
                    background-color: #B59A6D;
                    color: #fff;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 700;
                    font-size: 1.1rem;
                }

                .natura-reviews-section .reviewer-name {
                    font-size: 1rem;
                    opacity: 0.9;
                    font-weight: 500;
                }

                .natura-reviews-section .testimonial-divider { 
                    border: none; 
                    border-top: 1px solid rgba(255,255,255,0.2); 
                    margin: 0 auto 3rem auto; 
                    width: 50%; 
                }
                
                .natura-reviews-section .cta-title { font-size: 2.25rem; font-weight: 700; margin-bottom: 1rem; }
                .natura-reviews-section .cta-subtitle { font-size: 1.125rem; opacity: 0.8; margin-bottom: 2rem; }
                
                .natura-reviews-section .cta-btn {
                    background-color: #F9F8F4; color: #2C4C3B; padding: 1rem 3rem;
                    border-radius: 9999px; font-size: 1.25rem; font-weight: 700; border: none; cursor: pointer; transition: all 0.3s; font-family: inherit;
                }
                .natura-reviews-section .cta-btn:hover { background-color: #B59A6D; color: white; transform: translateY(-3px); }

                @media (min-width: 768px) {
                    .natura-reviews-section .testimonial-text { font-size: 1.35rem; }
                    .natura-reviews-section .slider-wrapper { min-height: 240px; }
                }
            </style>

            <div class="natura-reviews-section">
                <section id="testimonials" class="bg-green">
                    <div class="testimonial-container">
                        <h2 class="testimonial-title">ناس جرّبت… وفرّق معها</h2>
                        
                        <div class="slider-wrapper">
                            <!-- التقييم الأول -->
                            <div class="testimonial-slide slide-1">
                                <div class="review-card">
                                    <div class="stars">★★★★★</div>
                                    <div class="testimonial-text">"فرق معي لأني قدرت أستمر، منتج بسيط ونتيجته واضحة من أول أسبوع."</div>
                                    <div class="reviewer-info">
                                        <div class="reviewer-avatar">س</div>
                                        <div class="reviewer-name">سارة محمد</div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- التقييم الثاني -->
                            <div class="testimonial-slide slide-2">
                                <div class="review-card">
                                    <div class="stars">★★★★★</div>
                                    <div class="testimonial-text">"بسيط وسهل… وهذا اللي خلاني أكمل. أنصح فيه بقوة لكل شخص مشغول."</div>
                                    <div class="reviewer-info">
                                        <div class="reviewer-avatar">أ</div>
                                        <div class="reviewer-name">أحمد العتيبي</div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- التقييم الثالث -->
                            <div class="testimonial-slide slide-3">
                                <div class="review-card">
                                    <div class="stars">★★★★★</div>
                                    <div class="testimonial-text">"حسيت يومي أخف بدون ما أضغط على نفسي، فعلاً إضافة فرقت في روتيني."</div>
                                    <div class="reviewer-info">
                                        <div class="reviewer-avatar">ن</div>
                                        <div class="reviewer-name">نورة القحطاني</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <hr class="testimonial-divider">
                        
                        <h3 class="cta-title">ابدأ خفيف اليوم</h3>
                        <p class="cta-subtitle">خطوة بسيطة… وتفرق</p>
                        <button class="cta-btn">
                            اطلب الآن
                        </button>
                    </div>
                </section>
            </div>
        `;

        // 4. إدراج الكود (بعد) العنصر المستهدف مباشرة
        targetElement.insertAdjacentHTML('afterend', testimonialsContent);
        
    } else {
        console.warn("لم يتم العثور على العنصر '.index #main-content .s-block'.");
    }
});