@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//blackboard.to/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.4.1") format("woff2");
}

:root {
	--wd-text-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 14px;
	--wd-title-font: "Yantramanav", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 500;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Yantramanav", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: var(--wd-text-font);
	--wd-widget-title-font: "Yantramanav", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 500;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 500;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(0,0,0);
	--wd-alternative-color: #fbbc34;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(41,192,147);
	--btn-accented-bgcolor-hover: rgb(37,177,136);
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(21,16,99);
	background-image: none;
}
.page :is(.wd-page-content, .whb-header) {
	background-color: rgb(249,249,249);
	background-image: url(https://blackboard.to/wp-content/uploads/2026/04/background3.jpg);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-bottom-active: -1px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--wd-brd-radius: 0px;
}

@media (min-width: 1222px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}



/**
 * ============================================================
 * نظام واجهة الدورات - الإصدار النهائي مع الحماية الكاملة
 * ============================================================
 * 
 * يضع هذا الكود في:
 * WoodMart Theme → Theme Settings → Custom JS
 * أو
 * WordPress → Appearance → Customize → Additional JavaScript
 */

document.addEventListener('DOMContentLoaded', function () {

    // ─────────────────────────────────────────
    // 1. تحقق من وجود البيانات
    // ─────────────────────────────────────────
    if (typeof window.allCourses === 'undefined') {
        console.error('❌ window.allCourses غير موجود');
        return;
    }

    // قيم course_id الصالحة (للحماية)
    var VALID_COURSE_IDS = [1, 2, 3, 4, 5, 6, 7, 8];

    // ─────────────────────────────────────────
    // 2. CSS
    // ─────────────────────────────────────────
    var style = document.createElement('style');
    style.innerHTML = `
        .custom-dropdown-wrapper {
            position: relative;
            margin-bottom: 20px;
        }
        .custom-dropdown-button {
            padding: 14px 18px;
            font-size: 15px;
            border-radius: 10px;
            cursor: pointer;
            background: white;
            border: 1px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: border-color 0.2s;
        }
        .custom-dropdown-button:hover  { border-color: #aaa; }
        .custom-dropdown-button.active { border-color: #f39c12; background: #fafafa; }

        .custom-dropdown-menu {
            display: none;
            position: absolute;
            top: calc(100% + 4px);
            right: 0; left: 0;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            z-index: 9999;
            box-shadow: 0 6px 16px rgba(0,0,0,0.12);
            max-height: 320px;
            overflow-y: auto;
        }
        .custom-dropdown-menu.show { display: block; }

        .custom-dropdown-item {
            padding: 14px 18px;
            font-size: 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #f0f0f0;
            transition: background 0.15s;
        }
        .custom-dropdown-item:last-child { border-bottom: none; }
        .custom-dropdown-item:hover     { background: #f9f9f9; }
        .custom-dropdown-item.selected  { background: #eef6ff; font-weight: bold; }

        .badge-available {
            font-size: 12px;
            color: #27ae60;
            background: #eafaf1;
            padding: 3px 10px;
            border-radius: 20px;
        }
        .badge-full {
            font-size: 12px;
            color: #e74c3c;
            background: #fdedec;
            padding: 3px 10px;
            border-radius: 20px;
        }

        .seats-countdown {
            margin-top: 14px;
            padding: 12px 16px;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
            font-size: 15px;
            color: white;
            background: #ff9800;
        }
        .seats-countdown.pulse {
            animation: pulse-badge 1.6s infinite;
            cursor: pointer;
        }
        @keyframes pulse-badge {
            0%   { box-shadow: 0 0 0 0   rgba(230,126,34,.7); }
            70%  { box-shadow: 0 0 0 12px rgba(230,126,34,0); }
            100% { box-shadow: 0 0 0 0   rgba(230,126,34,0); }
        }

        .btn-disabled {
            opacity: .5 !important;
            pointer-events: none !important;
            filter: grayscale(1) !important;
        }
    `;
    document.head.appendChild(style);

    // ─────────────────────────────────────────
    // 3. أيقونة التقويم
    // ─────────────────────────────────────────
    var calSvg = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round"
        stroke-linejoin="round" style="margin-left:8px;vertical-align:middle;">
        <rect x="3" y="4" width="18" height="18" rx="2"/>
        <line x1="16" y1="2" x2="16" y2="6"/>
        <line x1="8"  y1="2" x2="8"  y2="6"/>
        <line x1="3"  y1="10" x2="21" y2="10"/>
    </svg>`;

    // ─────────────────────────────────────────
    // 4. تجميع الدورات حسب الـ class
    // ─────────────────────────────────────────
    var byClass = {};
    window.allCourses.forEach(function (c) {
        if (!byClass[c.class]) byClass[c.class] = [];
        byClass[c.class].push(c);
    });

    var itemCache = {};
    var activeCourse = {};

    // ─────────────────────────────────────────
    // 5. ✅ مسح course_id المخفي عند تحميل الصفحة (حماية)
    // ─────────────────────────────────────────
    document.querySelectorAll('input[name="course_id"]').forEach(function (el) {
        el.value = '';
    });

    // ─────────────────────────────────────────
    // 6. بناء واجهة كل بطاقة دورة
    // ─────────────────────────────────────────
    Object.keys(byClass).forEach(function (cls) {
        var card = document.querySelector('.' + cls);
        if (!card) { console.warn('⚠️ لا توجد بطاقة بـ class:', cls); return; }

        var courses  = byClass[cls];
        var dropdown = card.querySelector('.course-dates-dropdown');
        var btn      = card.querySelector('.elementor-button, .wd-open-popup, button[type="submit"]');
        var btnSpan  = btn ? btn.querySelector('.elementor-button-text, .wd-btn-text') : null;
        var origText = btnSpan ? btnSpan.innerText : (btn ? btn.innerText : 'التسجيل');

        function renderBadge(course) {
            var old = card.querySelector('.seats-countdown');
            if (old) old.remove();

            var badge = document.createElement('div');
            badge.className = 'seats-countdown';

            if (!course) {
                badge.classList.add('pulse');
                badge.innerHTML = '👆 اختر تاريخ الدورة';
                badge.addEventListener('click', function (e) {
                    e.stopPropagation();
                    openMenu();
                });
                if (btn) { btn.classList.add('btn-disabled'); }
                if (btnSpan) btnSpan.innerText = 'اختر التاريخ أولاً';
                card.appendChild(badge);
                return;
            }

            activeCourse[cls] = course;
            var rem = course.limit - course.count;

            if (rem <= 0) {
                badge.style.background = '#e74c3c';
                badge.innerHTML = 'اكتمل التسجيل لهذا التاريخ';
                if (btn) { btn.classList.add('btn-disabled'); }
                if (btnSpan) btnSpan.innerText = 'اكتمل التسجيل';
            } else {
                badge.innerHTML =
                    '🔥 متبقي ' + rem + ' مقعد فقط!<div style="font-size:12px;margin-top:6px;opacity:.85;">' +
                    calSvg + ' ' + course.hijri + '</div>';
                if (btn) {
                    btn.classList.remove('btn-disabled');
                    if (btnSpan) btnSpan.innerText = origText;
                }
            }
            card.appendChild(badge);
        }

        function openMenu() {
            var m = card.querySelector('.custom-dropdown-menu');
            var b = card.querySelector('.custom-dropdown-button');
            if (!m || !b) return;
            closeAllMenus();
            m.classList.add('show');
            b.classList.add('active');
        }

        if (dropdown) {
            dropdown.style.display = 'none';

            var wrapper   = document.createElement('div');
            wrapper.className = 'custom-dropdown-wrapper';

            var customBtn = document.createElement('div');
            customBtn.className = 'custom-dropdown-button';
            customBtn.innerHTML =
                `<span style="color:#888;display:flex;align-items:center;">${calSvg} اختر تاريخ الدورة...</span>
                 <span style="font-size:11px;color:#bbb;">▼</span>`;

            var menu = document.createElement('div');
            menu.className = 'custom-dropdown-menu';

            wrapper.appendChild(customBtn);
            wrapper.appendChild(menu);
            dropdown.parentNode.insertBefore(wrapper, dropdown);

            courses.forEach(function (c) {
                var rem  = c.limit - c.count;
                var item = document.createElement('div');
                item.className = 'custom-dropdown-item';

                function itemHTML(remaining) {
                    var badge = remaining <= 0
                        ? '<span class="badge-full">مكتملة</span>'
                        : '<span class="badge-available">متبقي ' + remaining + ' مقعد</span>';
                    return `<span style="display:flex;align-items:center;">${calSvg} ${c.hijri}</span>${badge}`;
                }

                item.innerHTML = itemHTML(rem);
                itemCache[cls + '_' + c.id] = { el: item, courseId: c.id };

                item.addEventListener('click', function (e) {
                    e.stopPropagation();

                    customBtn.innerHTML =
                        `<span style="color:#f39c12;display:flex;align-items:center;">${calSvg} ${c.hijri}</span>
                         <span style="font-size:11px;color:#bbb;">▼</span>`;

                    menu.querySelectorAll('.custom-dropdown-item').forEach(function (i) {
                        i.classList.remove('selected');
                    });
                    item.classList.add('selected');

                    menu.classList.remove('show');
                    customBtn.classList.remove('active');

                    renderBadge(c);
                    fillForm(c);
                });

                menu.appendChild(item);
            });

            customBtn.addEventListener('click', function (e) {
                e.stopPropagation();
                var isOpen = menu.classList.contains('show');
                closeAllMenus();
                if (!isOpen) {
                    menu.classList.add('show');
                    customBtn.classList.add('active');
                }
            });
        }

        renderBadge(null);
    });

    // ─────────────────────────────────────────
    // 7. إغلاق كل القوائم
    // ─────────────────────────────────────────
    function closeAllMenus() {
        document.querySelectorAll('.custom-dropdown-menu').forEach(function (m) { m.classList.remove('show'); });
        document.querySelectorAll('.custom-dropdown-button').forEach(function (b) { b.classList.remove('active'); });
    }
    document.addEventListener('click', closeAllMenus);

    // ─────────────────────────────────────────
    // 8. ملء حقول Fluent Form + علامة الاختيار
    // ─────────────────────────────────────────
    function fillForm(course) {
        setField('course_id', course.id);

        // ✅ علامة أن المستخدم اختار التاريخ فعلاً
        document.querySelectorAll('input[name="course_id"]').forEach(function (el) {
            var form = el.closest('form');
            if (!form) return;
            
            var marker = form.querySelector('input[name="course_selected"]');
            if (!marker) {
                marker = document.createElement('input');
                marker.type = 'hidden';
                marker.name = 'course_selected';
                form.appendChild(marker);
            }
            marker.value = '1';
        });
    }

    function setField(name, value) {
        var elements = document.querySelectorAll(
            'input[name="' + name + '"], select[name="' + name + '"], textarea[name="' + name + '"]'
        );
        elements.forEach(function (el) {
            el.value = value;
            el.dispatchEvent(new Event('input',  { bubbles: true }));
            el.dispatchEvent(new Event('change', { bubbles: true }));
        });
        if (elements.length > 0) {
            console.log('✅ ' + name + ' = ' + value);
        }
    }

    // ─────────────────────────────────────────
    // 9. ✅ منع إرسال أي نموذج بدون اختيار التاريخ (الحماية الذهبية)
    // ─────────────────────────────────────────
    document.addEventListener('submit', function (e) {
        var form = e.target;
        if (!form || !form.querySelector) return;

        var courseField = form.querySelector('input[name="course_id"]');
        if (!courseField) return; // النموذج لا علاقة له بالدورات

        var marker = form.querySelector('input[name="course_selected"]');
        var courseValue = parseInt(courseField.value);

        if (!marker || marker.value !== '1' || !VALID_COURSE_IDS.includes(courseValue)) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            alert('⚠️ يرجى اختيار تاريخ الدورة أولاً قبل الضغط على إرسال');
            console.error('❌ تم منع الإرسال: course_id غير صالح =', courseField.value);
            return false;
        }
    }, true);

    // حماية إضافية: منع الضغط على الزر إذا لم يتم اختيار تاريخ
    document.addEventListener('click', function (e) {
        var btn = e.target.closest('.elementor-button, .wd-open-popup, button[type="submit"]');
        if (!btn) return;
        if (btn.classList.contains('btn-disabled')) {
            e.preventDefault();
            e.stopPropagation();
            alert('⚠️ يرجى اختيار تاريخ الدورة أولاً');
            return false;
        }
    }, true);

    // ─────────────────────────────────────────
    // 10. تحديث الأرقام من السيرفر كل 5 ثواني
    // ─────────────────────────────────────────
    function refreshCounts() {
        fetch('/wp-json/course/v1/counts')
            .then(function (r) { return r.json(); })
            .then(function (data) {

                window.allCourses.forEach(function (c) {
                    if (data[c.id] !== undefined) {
                        c.count = data[c.id].count;
                    }
                });

                Object.keys(itemCache).forEach(function (key) {
                    var cache    = itemCache[key];
                    var courseId = cache.courseId;
                    var el       = cache.el;
                    var course   = window.allCourses.find(function (c) { return c.id === courseId; });
                    if (!course || !data[courseId]) return;

                    var rem = data[courseId].remaining;
                    var badge = rem <= 0
                        ? '<span class="badge-full">مكتملة</span>'
                        : '<span class="badge-available">متبقي ' + rem + ' مقعد</span>';
                    el.innerHTML =
                        `<span style="display:flex;align-items:center;">${calSvg} ${course.hijri}</span>${badge}`;
                });

                Object.keys(activeCourse).forEach(function (cls) {
                    var c = activeCourse[cls];
                    if (!c || !data[c.id]) return;
                    c.count = data[c.id].count;
                    var card = document.querySelector('.' + cls);
                    if (!card) return;

                    var rem   = c.limit - c.count;
                    var badge = card.querySelector('.seats-countdown');
                    if (!badge || badge.classList.contains('pulse')) return;

                    if (rem <= 0) {
                        badge.style.background = '#e74c3c';
                        badge.innerHTML = 'اكتمل التسجيل لهذا التاريخ';
                    } else {
                        badge.innerHTML =
                            '🔥 متبقي ' + rem + ' مقعد فقط!<div style="font-size:12px;margin-top:6px;opacity:.85;">' +
                            calSvg + ' ' + c.hijri + '</div>';
                    }
                });
            })
            .catch(function (e) { console.warn('refresh error:', e); });
    }

    setTimeout(refreshCounts, 1500);
    setInterval(refreshCounts, 5000);

    console.log('✅ نظام الدورات جاهز - الإصدار المحمي');
});