/**
 * =========================================================
 *  Mobile Menu UI – Complete Version
 *  تحسين واجهة القائمة على الجوال – نسخة متكاملة
 * =========================================================
 * 
 *  الإصدار:   9.0 (COMPLETE)
 *  التاريخ:   2026-04-23
 *  
 *  تشمل التحسينات:
 *  - إخفاء السهم الأصلي
 *  - أيقونات + / - بخلفية دائرية
 *  - إضافة نقاط للعناصر العادية
 *  - خط فاصل بين العناصر
 *  - تأثير عند الضغط
 *  - تحديد ارتفاع القوائم الفرعية (44px للجوال)
 *  - تصحيح المحاذاة RTL للقائمة
 * =========================================================
 */

@media (max-width: 768px) {

    /* =====================================================
       1. إخفاء السهم الأصلي للقوائم
       ===================================================== */
    .main-navigation .menu-item-has-children .dropdown-menu-toggle {
        display: none !important;
    }

    /* =====================================================
       2. تصحيح المحاذاة RTL للقائمة على الجوال
       ===================================================== */
    .main-navigation,
    .main-navigation .main-nav,
    .main-navigation .main-nav ul,
    .main-navigation .main-nav ul li,
    .main-navigation .main-nav ul li a,
    .slideout-navigation,
    .slideout-navigation .main-nav,
    .slideout-navigation .main-nav ul,
    .slideout-navigation .main-nav ul li,
    .slideout-navigation .main-nav ul li a {
        text-align: right !important;
        direction: rtl !important;
    }

    /* =====================================================
       3. تنسيق العناصر التي تحتوي على قائمة فرعية
       ===================================================== */
    .main-navigation .menu-item-has-children > a,
    .main-navigation .sub-menu .menu-item-has-children > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row-reverse;
        gap: 8px;
        width: 100%;
    }

    /* =====================================================
       4. الأيقونة الموحدة (+ / -)
       ===================================================== */
    .main-navigation .menu-item-has-children > a::after,
    .main-navigation .sub-menu .menu-item-has-children > a::after {
        content: "+";
        font-size: 18px;
        font-weight: 400;
        
        background: rgba(255, 255, 255, 0.12);
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    /* عند فتح القائمة */
    .main-navigation .menu-item-has-children.focus > a::after,
    .main-navigation .menu-item-has-children.sfHover > a::after,
    .main-navigation .menu-item-has-children.toggled > a::after,
    .main-navigation .sub-menu .menu-item-has-children.focus > a::after,
    .main-navigation .sub-menu .menu-item-has-children.sfHover > a::after {
        content: "−";
    }

    /* =====================================================
       5. النقاط للعناصر العادية (بدون قائمة فرعية)
       ===================================================== */
    .main-navigation .main-nav ul li:not(.menu-item-has-children) > a {
        display: flex;
        align-items: center;
    }

    .main-navigation .main-nav ul li:not(.menu-item-has-children) > a::before {
        content: "•";
        margin-left: 10px;
        color: var(--accent, #00abfb);
        font-size: 18px;
        display: inline-block;
    }

    /* =====================================================
       6. تحديد ارتفاع القوائم الفرعية (للجوال فقط)
       لأن الثيم لا يوفر هذه الخاصية للجوال
       ===================================================== */
    .main-navigation .sub-menu li a,
    .slideout-navigation .sub-menu li a {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        min-height: 44px !important;
    }

    /* =====================================================
       7. تباعد القوائم الفرعية
       ===================================================== */
    .main-navigation .sub-menu {
        padding-right: 15px;
    }

    .main-navigation .sub-menu li a {
        padding-right: 35px;
    }

    .main-navigation .sub-menu .sub-menu li a {
        padding-right: 50px;
    }

    /* =====================================================
       8. خط فاصل بين عناصر القائمة
       ===================================================== */
    .main-navigation .main-nav ul li:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* =====================================================
       9. تأثير خفيف عند الضغط
       ===================================================== */
    .main-navigation .main-nav ul li a:active {
        background-color: rgba(255, 255, 255, 0.05);
        transition: background-color 0.05s ease;
    }
}

/* =====================================================
   10. تحريك علامة (+ / -) إلى اليمين (Off Canvas)
   ===================================================== */
@media (max-width: 768px) {
    /* استهداف الحاوية الرئيسية للرابط في قائمة Off Canvas */
    .slideout-navigation.main-navigation .menu-item-has-children > a,
    .slideout-navigation.main-navigation .sub-menu .menu-item-has-children > a {
        flex-direction: row !important; /* النص بعد الأيقونة */
        justify-content: flex-start !important; /* البداية من اليمين */
        display: flex !important;
    }

    /* التحكم في الأيقونة نفسها (التي هي Pseudo-element) */
    .slideout-navigation.main-navigation .menu-item-has-children > a::after,
    .slideout-navigation.main-navigation .sub-menu .menu-item-has-children > a::after {
        order: -1 !important; /* نقلها قبل النص بصرياً */
        margin-left: 15px !important; /* مسافة بينها وبين النص */
        margin-right: 0 !important;
    }

    /* إذا كانت النقاط تظهر أيضاً، نضمن محاذاتها */
    .slideout-navigation.main-navigation .main-nav ul li:not(.menu-item-has-children) > a {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
    }
}

/* =====================================================
   11. تحسينات إضافية لتجربة المستخدم (UI Enhancements)
   ===================================================== */
@media (max-width: 768px) {

    /* جعل الأقسام الرئيسية تبرز بشكل أقوى */
    .slideout-navigation .main-nav > ul > li.menu-item-has-children > a {
        font-weight: 700 !important;
        color: var(--contrast, #0f1111) !important;
        background-color: rgba(0, 0, 0, 0.02); /* خلفية خفيفة جداً للتمييز */
    }

    /* تكبير مساحة النقر لتسهيل الاستخدام بالإبهام */
    .slideout-navigation .main-nav ul li a {
        padding: 14px 20px !important;
        font-size: 15px !important;
    }

    /* تحسين شكل النقاط (Bullets) لتكون أكثر رقة */
    .main-navigation .main-nav ul li:not(.menu-item-has-children) > a::before {
        content: "•";
        color: var(--accent, #00abfb) !important;
        opacity: 0.6;
        font-size: 22px;
        margin-left: 12px;
    }

    /* تأثير ناعم عند فتح القوائم الفرعية */
    .main-navigation ul.sub-menu {
        transition: all 0.3s ease-in-out;
        border-right: 2px solid rgba(0, 171, 251, 0.1); /* خط جانبي خفيف يربط العناصر ببعضها */
        margin-right: 10px !important;
    }

    /* تحسين أيقونة الإغلاق (X) في الأعلى */
    .slideout-exit {
        font-size: 24px !important;
        padding: 15px !important;
    }
}