/* Add custom JS code below */ 
document.addEventListener("DOMContentLoaded", function() {
    // إنشاء الحاوية الرئيسية للشريط
    var zaiemBar = document.createElement("div");
    
    // تصميم الحاوية
    zaiemBar.style.cssText = `
        background: #c6922e;
        padding: 12px 16px;
        text-align: center;
        direction: rtl;
        width: 100%;
        box-sizing: border-box;
        border-top: 1px solid rgba(255, 215, 0, 0.15);
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    `;

    // إضافة زر التوقيع المتوهج داخل الحاوية
    zaiemBar.innerHTML = `
        <a href="https://linktr.ee/AL_Zaiem" target="_blank" rel="noopener noreferrer" class="zaiem-glow-btn">
            <span class="zaiem-icon"></span>
            <span>برمجة وتطوير</span>
            <span class="zaiem-brand">ALZaiem</span>
        </a>
    `;

    // إضافة أنماط CSS المتقدمة للتأثيرات الضوئية والتفاعلية
    var style = document.createElement('style');
    style.innerHTML = `
        .zaiem-glow-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 20px;
            color: #ffffff;
            background: linear-gradient(135deg, #1f1a14 0%, #3a2810 100%);
            border: 1px solid #d4a017;
            border-radius: 50px;
            font-size: 13.5px;
            font-family: system-ui, -apple-system, sans-serif;
            text-decoration: none;
            position: relative;
            z-index: 1;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            /* إضاءة وتوهج نيون ذهبي خلف الزر */
            box-shadow: 0 0 12px rgba(212, 160, 23, 0.35),
                        inset 0 1px 1px rgba(255, 255, 255, 0.2);
        }

        /* نص الماركة الذهبي المتألق */
        .zaiem-brand {
            color: #ffd700;
            font-weight: 800;
            letter-spacing: 0.8px;
            text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
        }

        /* أيقونة البرق النابضة */
        .zaiem-icon {
            font-size: 12px;
            filter: drop-shadow(0 0 4px #ffd700);
            animation: pulseGlow 1.8s infinite alternate;
        }

        /* تأثير التمرير (Hover Effect) - زيادة التوهج والبروز */
        .zaiem-glow-btn:hover {
            transform: translateY(-3px) scale(1.03);
            background: linear-gradient(135deg, #2a2218 0%, #523816 100%);
            border-color: #ffe066;
            color: #ffffff;
            /* زيادة شدة الإضاءة النيون عند حرك الماوس */
            box-shadow: 0 0 22px rgba(255, 215, 0, 0.75),
                        0 0 35px rgba(212, 160, 23, 0.4),
                        inset 0 1px 2px rgba(255, 255, 255, 0.4);
        }

        .zaiem-glow-btn:active {
            transform: translateY(-1px) scale(0.98);
        }

        /* أنيميشن نبض الضوء */
        @keyframes pulseGlow {
            0% {
                opacity: 0.6;
                transform: scale(0.95);
            }
            100% {
                opacity: 1;
                transform: scale(1.15);
            }
        }
    `;
    document.head.appendChild(style);

    // العثور على الفوتر وإضافة الشريط أسفله مباشرة
    var footer = document.querySelector("footer") || document.body;
    footer.appendChild(zaiemBar);
});
document.addEventListener("DOMContentLoaded", function() {
    // 1. إضافة تنسيقات الـ CSS الفاخرة للنافذة والتبويبات
    var style = document.createElement('style');
    style.innerHTML = `
        /* زر دليل الفوائد العائم على اليسار (مرفوع أكثر للأعلى) وأرفع */
        #honeyGuideBtn {
            position: fixed;
            bottom: 160px;
            left: 20px;
            background: linear-gradient(135deg, #c6922e, #8a5a00);
            color: #fff;
            padding: 8px 14px;
            border-radius: 30px;
            box-shadow: 0 4px 15px rgba(198, 146, 46, 0.35);
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            z-index: 99997;
            font-family: inherit;
            font-weight: bold;
            font-size: 12px;
            border: 1.5px solid #f7f0df;
            transition: all 0.3s ease;
        }

        #honeyGuideBtn:hover {
            transform: scale(1.05);
            background: linear-gradient(135deg, #d4a017, #9b6500);
        }

        /* نافذة الدليل المنبثقة */
        #honeyGuideOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(74, 42, 18, 0.6);
            backdrop-filter: blur(5px);
            z-index: 99999;
            display: none;
            align-items: center;
            justify-content: center;
            direction: rtl;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        #honeyGuideOverlay.active {
            display: flex;
            opacity: 1;
        }

        #honeyGuideModal {
            background: #f7f0df;
            width: 90%;
            max-width: 600px;
            max-height: 85vh;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            display: flex;
            flex-direction: column;
            border: 2px solid #c6922e;
            transform: scale(0.9);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        #honeyGuideOverlay.active #honeyGuideModal {
            transform: scale(1);
        }

        /* رأس النافذة */
        .guide-modal-header {
            background: #4a2a12;
            color: #f7f0df;
            padding: 20px;
            text-align: center;
            position: relative;
            border-bottom: 3px solid #c6922e;
        }

        .guide-modal-header h3 {
            margin: 0;
            font-size: 1.2rem;
            color: #f3e5ab;
        }

        .guide-modal-header p {
            margin: 5px 0 0;
            font-size: 0.8rem;
            color: #d1c7b7;
        }

        .close-guide-modal {
            position: absolute;
            top: 15px;
            left: 15px;
            font-size: 18px;
            cursor: pointer;
            color: #c6922e;
            font-weight: bold;
        }

        /* تبويبات أنواع العسل */
        .guide-tabs-nav {
            display: flex;
            background: #eae2cc;
            padding: 10px;
            gap: 8px;
            justify-content: center;
        }

        .guide-tab-btn {
            background: #fff9ed;
            color: #4a2a12;
            border: 1px solid #c6922e;
            padding: 8px 14px;
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 700;
            cursor: pointer;
            transition: 0.2s;
        }

        .guide-tab-btn.active {
            background: #c6922e;
            color: #fff9ed;
            box-shadow: 0 3px 10px rgba(198, 146, 46, 0.3);
        }

        /* محتوى الفوائد */
        .guide-tab-content {
            padding: 20px;
            overflow-y: auto;
            flex-grow: 1;
            background: #ffffff;
        }

        .guide-panel {
            display: none;
            animation: fadeInHoney 0.4s ease-in-out;
        }

        .guide-panel.active {
            display: block;
        }

        .guide-panel h4 {
            color: #4a2a12;
            margin-top: 0;
            font-size: 1rem;
            border-bottom: 2px dashed #c6922e;
            padding-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .guide-benefits-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .guide-benefits-list li {
            position: relative;
            padding-right: 22px;
            margin-bottom: 10px;
            color: #555;
            line-height: 1.5;
            font-size: 0.85rem;
        }

        .guide-benefits-list li::before {
            content: "✓";
            position: absolute;
            right: 0;
            color: #c6922e;
            font-weight: bold;
        }

        /* تذييل النافذة (يحوي زر إغلاق مخصص) */
        .guide-modal-footer {
            background: #f7f0df;
            padding: 12px 20px;
            text-align: center;
            border-top: 1px solid #eae2cc;
        }

        .guide-close-btn {
            background: #4a2a12;
            color: #f3e5ab;
            border: 1px solid #c6922e;
            padding: 8px 24px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: bold;
            cursor: pointer;
            transition: 0.2s;
        }

        .guide-close-btn:hover {
            background: #2D1B00;
        }

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

        @media (max-width: 600px) {
            #honeyGuideModal {
                width: 95%;
                max-height: 90vh;
            }
            .guide-tabs-nav {
                flex-direction: column;
                gap: 5px;
            }
        }
    `;
    document.head.appendChild(style);

    // 2. إنشاء زر العرض العائم على اليسار
    var floatBtn = document.createElement("div");
    floatBtn.id = "honeyGuideBtn";
    floatBtn.innerHTML = `<span>📖</span> <span>دليل الفوائد</span>`;
    document.body.appendChild(floatBtn);

    // 3. إنشاء النافذة المنبثقة وزر الإغلاق السفلي
    var overlay = document.createElement("div");
    overlay.id = "honeyGuideOverlay";
    overlay.innerHTML = `
        <div id="honeyGuideModal">
            <div class="guide-modal-header">
                <span class="close-guide-modal" id="closeGuideTop">✕</span>
                <h3>🍯 الدليل الشامل لفوائد أعسال وديع البرية</h3>
                <p>اكتشف الخصائص العلاجية والغذائية لكل نوع من أعسالنا الطبيعية</p>
            </div>

            <!-- أزرار اختيار نوع العسل -->
            <div class="guide-tabs-nav">
                <button class="guide-tab-btn active" data-panel="sdrPanel">🟡 عسل السدر البري</button>
                <button class="guide-tab-btn" data-panel="talhPanel">🟠 عسل الطلح البري</button>
                <button class="guide-tab-btn" data-panel="samraPanel">🟤 عسل السمرة</button>
            </div>

            <!-- صندوق تفاصيل الفوائد -->
            <div class="guide-tab-content">
                
                <!-- فوائد عسل السدر -->
                <div id="sdrPanel" class="guide-panel active">
                    <h4>✨ فوائد عسل السدر العلاجية</h4>
                    <ul class="guide-benefits-list">
                        <li>يقوي المناعة بشكل فعال.</li>
                        <li>مناسب للجروح والحروق من خلال الدهن الموضعي على المنطقة المصابة.</li>
                        <li>مفيد للقولون ومشاكل الباطنية والمعدة.</li>
                        <li>يفتح الشهية وخصوصاً للأطفال / ويساعد في حالات التبول اللاإرادي خلال النوم.</li>
                        <li>مفيد لمشاكل الأرق وقلة النوم.</li>
                        <li>يستخدم كغذاء مثالي وصحي للكبار والصغار.</li>
                        <li>مفيد لمشاكل حموضة المعدة والزائدة.</li>
                        <li>مفيد جداً للقضاء على جرثومة المعدة.</li>
                        <li>يعتبر مقوياً طبيعياً للرجال.</li>
                    </ul>
                </div>

                <!-- فوائد عسل الطلح البري -->
                <div id="talhPanel" class="guide-panel">
                    <h4>🔥 فوائد عسل الطلح البري العلاجية</h4>
                    <ul class="guide-benefits-list">
                        <li>ينشط البنكرياس وينظم السكر في الدم وخصوصاً لمرضى السكري.</li>
                        <li>يعمل كمحفز ومنشط قوي للدورة الدموية.</li>
                        <li>من أفضل العلاجات لأمراض الذبحة الصدرية ويعالج أمراض الجهاز التنفسي والرئتين.</li>
                        <li>مفيد جداً لصحة المسالك البولية.</li>
                    </ul>
                </div>

                <!-- فوائد عسل السمرة -->
                <div id="samraPanel" class="guide-panel">
                    <h4>🌿 فوائد عسل السمرة العلاجية</h4>
                    <ul class="guide-benefits-list">
                        <li>ينشط البنكرياس وينظم السكر في الدم وخصوصاً لمرضى السكري.</li>
                        <li>يعالج عسر الهضم، ينشط الأمعاء، ويقاوم البكتيريا والديدان.</li>
                        <li>يعالج التهابات القولون ويمنعه من التهيج، ويقلل من التوتر العصبي.</li>
                        <li>يمنع الارتداد المريئي ويقضي على الحرقة في المعدة.</li>
                        <li>يعالج جرثومة المعدة الحلزونية ويمنع تسبب التهاب وقرحة المعدة.</li>
                        <li>يعالج حالات فقدان الشهية، فقر الدم، نقص الحديد، وفيتامين (د).</li>
                        <li>يمنع الإسهال ويقلل من حالات الإمساك.</li>
                    </ul>
                </div>

            </div>

            <!-- زر الإغلاق السفلي الواضح -->
            <div class="guide-modal-footer">
                <button class="guide-close-btn" id="closeGuideBottom">إغلاق الدليل ✕</button>
            </div>
        </div>
    `;
    document.body.appendChild(overlay);

    // 4. وظائف الفتح والإغلاق والتبديل
    function openModal() {
        overlay.classList.add("active");
    }

    function closeModal() {
        overlay.classList.remove("active");
    }

    floatBtn.addEventListener("click", openModal);
    document.getElementById("closeGuideTop").addEventListener("click", closeModal);
    document.getElementById("closeGuideBottom").addEventListener("click", closeModal);
    
    overlay.addEventListener("click", function(e) {
        if(e.target === overlay) closeModal();
    });

    // تفاعل التبويبات داخل النافذة
    const tabBtns = overlay.querySelectorAll('.guide-tab-btn');
    const panels = overlay.querySelectorAll('.guide-panel');

    tabBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            tabBtns.forEach(b => b.classList.remove('active'));
            panels.forEach(p => p.classList.remove('active'));

            this.classList.add('active');
            document.getElementById(this.getAttribute('data-panel')).classList.add('active');
        });
    });
});

/*
 * أيقونة نحلة صغيرة وأنيقة (تصميم محدث وجذاب) - لمتجر "وديع العسل" (Salla JS/CSS)
 */

(function() {
    'use strict';

    // 1. إضافة أنماط CSS للتصميم الفاخر والحركات
    const style = document.createElement('style');
    style.innerHTML = `
        @keyframes floatBeeLeft {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-8px) rotate(-3deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }
        @keyframes honeyGlow {
            0% { filter: drop-shadow(0 3px 8px rgba(198, 146, 46, 0.35)); }
            50% { filter: drop-shadow(0 6px 15px rgba(198, 146, 46, 0.65)); }
            100% { filter: drop-shadow(0 3px 8px rgba(198, 146, 46, 0.35)); }
        }
        @keyframes modalShow {
            from { opacity: 0; transform: translate(-50%, -40%) scale(0.9); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }

        #wadie-bee-container {
            position: fixed;
            bottom: 220px;
            left: 20px; /* على الشمال */
            z-index: 999990;
            cursor: pointer;
            animation: floatBeeLeft 3.2s ease-in-out infinite, honeyGlow 2.5s ease-in-out infinite;
            transition: transform 0.3s ease;
        }

        #wadie-bee-container:hover {
            transform: scale(1.1) rotate(2deg);
        }

        .wadie-bee-tooltip {
            position: absolute;
            top: -28px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #c6922e, #4a2a12);
            color: #ffffff;
            font-size: 10px;
            font-weight: bold;
            padding: 3px 8px;
            border-radius: 10px;
            white-space: nowrap;
            box-shadow: 0 3px 8px rgba(0,0,0,0.2);
            pointer-events: none;
            font-family: inherit;
        }

        .wadie-bee-tooltip::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 4px 4px 0 4px;
            border-style: solid;
            border-color: #4a2a12 transparent transparent transparent;
        }

        /* نافذة المعلومات */
        #wadie-modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(4px);
            z-index: 999998;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        #wadie-modal-box {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 450px;
            background: #f7f0df;
            border: 2px solid #c6922e;
            border-radius: 24px;
            padding: 30px 25px;
            box-shadow: 0 20px 40px rgba(74, 42, 18, 0.35);
            z-index: 999999;
            text-align: center;
            direction: rtl;
            font-family: inherit;
            color: #4a2a12;
        }

        #wadie-modal-box.active {
            display: block;
            animation: modalShow 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        .wadie-modal-close-btn {
            position: absolute;
            top: 15px;
            left: 18px;
            background: rgba(74, 42, 18, 0.1);
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-size: 20px;
            color: #4a2a12;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }

        .wadie-modal-close-btn:hover {
            background: rgba(74, 42, 18, 0.2);
        }

        .wadie-modal-title {
            font-size: 23px;
            font-weight: 800;
            color: #4a2a12;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .wadie-modal-text {
            font-size: 15px;
            line-height: 1.8;
            color: #4a2a12;
            margin-bottom: 20px;
        }

        .wadie-modal-highlights {
            display: flex;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .wadie-chip {
            background: rgba(198, 146, 46, 0.18);
            color: #4a2a12;
            border: 1px solid #c6922e;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: bold;
        }
    `;
    document.head.appendChild(style);

    // 2. تصميم النحلة الجديد: أصغر حجماً، أشيك، وناعم جداً (SVG)
    const beeContainer = document.createElement('div');
    beeContainer.id = 'wadie-bee-container';
    beeContainer.innerHTML = `
        <div class="wadie-bee-tooltip">عن المتجر 🍯</div>
        <svg width="55" height="55" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <linearGradient id="bodyGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="#FFE082" />
                    <stop offset="100%" stop-color="#c6922e" />
                </linearGradient>
                <linearGradient id="wingGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9" />
                    <stop offset="100%" stop-color="#d4f1f9" stop-opacity="0.7" />
                </linearGradient>
            </defs>

            <!-- الأجنحة الشفافة الرقيقة -->
            <ellipse cx="38" cy="32" rx="14" ry="24" fill="url(#wingGrad)" stroke="#4a2a12" stroke-width="2" transform="rotate(-30 38 32)"/>
            <ellipse cx="65" cy="32" rx="14" ry="24" fill="url(#wingGrad)" stroke="#4a2a12" stroke-width="2" transform="rotate(30 65 32)"/>

            <!-- الجسم الأنيق -->
            <ellipse cx="50" cy="62" rx="26" ry="30" fill="url(#bodyGrad)" stroke="#4a2a12" stroke-width="3"/>

            <!-- خطوط الجسم البنية الناعمة -->
            <path d="M 28 52 Q 50 44 72 52" stroke="#4a2a12" stroke-width="5" stroke-linecap="round"/>
            <path d="M 25 64 Q 50 56 75 64" stroke="#4a2a12" stroke-width="5" stroke-linecap="round"/>
            <path d="M 31 76 Q 50 68 69 76" stroke="#4a2a12" stroke-width="4.5" stroke-linecap="round"/>

            <!-- الرأس والابتسامة اللطيفة -->
            <circle cx="50" cy="36" r="18" fill="url(#bodyGrad)" stroke="#4a2a12" stroke-width="3"/>
            <circle cx="43" cy="40" r="3.5" fill="#ffb4a2" opacity="0.8"/>
            <circle cx="57" cy="40" r="3.5" fill="#ffb4a2" opacity="0.8"/>
            
            <circle cx="43" cy="33" r="3.5" fill="#4a2a12"/>
            <circle cx="57" cy="33" r="3.5" fill="#4a2a12"/>
            <circle cx="44.2" cy="31.8" r="1.2" fill="#fff"/>
            <circle cx="58.2" cy="31.8" r="1.2" fill="#fff"/>
            
            <path d="M 45 42 Q 50 47 55 42" stroke="#4a2a12" stroke-width="2.2" stroke-linecap="round" fill="none"/>

            <!-- قرون الاستشعار الرفيعة -->
            <path d="M 43 20 Q 34 10 36 5" stroke="#4a2a12" stroke-width="2.2" stroke-linecap="round" fill="none"/>
            <circle cx="36" cy="5" r="2.5" fill="#4a2a12"/>
            <path d="M 57 20 Q 66 10 64 5" stroke="#4a2a12" stroke-width="2.2" stroke-linecap="round" fill="none"/>
            <circle cx="64" cy="5" r="2.5" fill="#4a2a12"/>
        </svg>
    `;

    // 3. إنشاء النافذة التفاعلية وخلفية التظليل
    const overlay = document.createElement('div');
    overlay.id = 'wadie-modal-overlay';

    const modalBox = document.createElement('div');
    modalBox.id = 'wadie-modal-box';
    modalBox.innerHTML = `
        <button class="wadie-modal-close-btn" id="wadie-close-trigger">&times;</button>
        <div class="wadie-modal-title">
            <span>🐝</span>
            <span>عن متجر وديع العسل</span>
        </div>
        <div class="wadie-modal-text">
            <b>وديع للعسل البري؛</b> من مناحلنا المحلية في المملكة العربية السعودية إلى مائدتكم مباشرة.<br><br>
            نُقدم لكم أعسالاً طبيعية نقية علاجية بإشرافنا المباشر، ومنتجات نحل فاخرة وزيت زيتون معصور على البارد.<br><br>
            <i>أصالة المذاق وخبرة توّجتها جوائز عالمية في الجودة.</i>
        </div>

        <div class="wadie-modal-highlights">
            <span class="wadie-chip">🌿 عسل طبيعي 100%</span>
            <span class="wadie-chip">🇸🇦 مناحل محليّة</span>
            <span class="wadie-chip">🏆 جوائز جودة عالمية</span>
            <span class="wadie-chip">🫒 زيت زيتون عصارة باردة</span>
        </div>
    `;

    // 4. إدراج العناصر بالصفحة
    document.body.appendChild(beeContainer);
    document.body.appendChild(overlay);
    document.body.appendChild(modalBox);

    // 5. التحكم بفتح وإغلاق النافذة
    function showModal() {
        overlay.style.display = 'block';
        setTimeout(() => overlay.style.opacity = '1', 10);
        modalBox.classList.add('active');
    }

    function hideModal() {
        overlay.style.opacity = '0';
        modalBox.classList.remove('active');
        setTimeout(() => {
            overlay.style.display = 'none';
        }, 300);
    }

    beeContainer.addEventListener('click', showModal);
    document.getElementById('wadie-close-trigger').addEventListener('click', hideModal);
    overlay.addEventListener('click', hideModal);

})();