/* Add custom JS code below */ 
(function() {
    // 1. حقن التنسيقات (CSS) مباشرة في الرأس
    const style = document.createElement('style');
    style.textContent = `
        .salla-infinite-marquee-wrapper {
            overflow: hidden;
            white-space: nowrap;
            background-color: #DCECFF !important;
            color: #000 !important;
            padding: 12px 0;
            position: relative;
            width: 100% !important;
            box-sizing: border-box;
            display: flex !important;
            z-index: 99999; /* لضمان ظهوره فوق المكونات الأخرى */
            direction: ltr; /* لضبط الحسابات الرياضية للحركة */
        }

        .salla-infinite-marquee-track {
            display: flex;
            gap: 60px;
            padding-right: 60px;
            animation: sallaMarqueeLinear 30s linear infinite;
            will-change: transform;
        }

        .salla-marquee-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 16px;
            font-family: cairo;
            direction: rtl; /* لعرض النص العربي بشكل صحيح داخل العنصر */
        }

        .salla-marquee-item a {
            color: #000 !important;
            text-decoration: none !important;
            font-weight: bold;
        }

        /* حركة إنفينيتي انسيابية جهة اليمين المتوافقة مع القراءة العربية */
        @keyframes sallaMarqueeLinear {
            0% {
                transform: translate3d(-50%, 0, 0);
            }
            100% {
                transform: translate3d(0, 0, 0);
            }
        }

        /* إيقاف مؤقت عند تمرير الماوس */
        .salla-infinite-marquee-wrapper:hover .salla-infinite-marquee-track {
            animation-play-state: paused;
        }
    `;
    document.head.appendChild(style);

    // 2. إنشاء عناصر الشريط
    const marqueeWrapper = document.createElement('div');
    marqueeWrapper.className = 'salla-infinite-marquee-wrapper';

    const marqueeTrack = document.createElement('div');
    marqueeTrack.className = 'salla-infinite-marquee-track';

    // نص الإعلان الخاص بك
    const rawContent = `
        <div class="salla-marquee-item">
            <a href="https://buniquecoffee.com/#" target="_self">استخدم كود PAYNOW لخصم قيمة الطلب في حال استخدام طرق الدفع التالية: مدى - VISA - Apple Pay - STC PAY</a>
        </div>
    `;

    // تكرار الإعلان لملء الشريط بالكامل وتفادي الفراغات
    marqueeTrack.innerHTML = rawContent.repeat(8);
    marqueeWrapper.appendChild(marqueeTrack);

    // 3. دالة الحقن الذكي: تحاول إدخال الشريط في أعلى الصفحة بمجرد توفر الـ body
    function injectMarquee() {
        const target = document.body;
        // نتحقق من وجود الـ body وأن الشريط لم يتم إضافته مسبقاً
        if (target && !document.querySelector('.salla-infinite-marquee-wrapper')) {
            target.insertBefore(marqueeWrapper, target.firstChild);
            clearInterval(injectionCheck); // إيقاف المحاولة بمجرد النجاح
        }
    }

    // فحص دوري كل 100 ملي ثانية لحقن الكود فوراً بدون انتظار تحميل الصور وباقي السكريبتات الثقيلة
    const injectionCheck = setInterval(injectMarquee, 100);
    
    // محاولة تشغيل فورية أيضاً كخطوة احتياطية
    injectMarquee();
})();