/* إخفاء زر القائمة على سطح المكتب وإظهاره على الجوال */
.mobile-menu-toggle {
    display: none; 
    float: right;
    margin-top: 10px;
    padding: 10px;
    cursor: pointer;
    background: #000000; /* زر القائمة باللون الأسود */
    color: white;
    border: none;
    font-size: 16px;
    border-radius: 4px;
    z-index: 1000;
}

/* القائمة الموحدة للجوال - تصميم أسود/أبيض ونظام الإغلاق */
#mobile-unified-menu {
    display: none; 
    position: fixed; 
    top: 0;
    right: 0;
    width: 100%;
    height: 100%; 
    background-color: #000000; /* خلفية سوداء */
    overflow-y: auto; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    z-index: 9999; 
    padding-top: 50px; 
}

#mobile-unified-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#mobile-unified-menu ul li a {
    display: block;
    color: #ffffff; /* كتابة بيضاء */
    text-decoration: none;
    font-weight: normal;
}

/* تنسيق رؤوس الأقسام (Mobile Sub Header) - الرأس القابل للفتح */
.mobile-sub-header {
    background: #111111; /* أسود أغمق قليلاً */
    color: #ffffff;
    padding: 15px 15px;
    font-weight: bold;
    border-bottom: 1px solid #333333;
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mobile-sub-header span {
    font-size: 20px;
    transition: transform 0.3s;
}
.mobile-sub-header.active span {
    transform: rotate(45deg); /* تحويل علامة + إلى X عند الفتح */
}

/* القوائم الفرعية المخفية (Sub Menu) */
.mobile-sub-menu {
    display: none; /* إخفاء القوائم الفرعية افتراضياً */
    background: #000000;
}
.mobile-sub-menu li {
    padding: 10px 25px;
    border-bottom: 1px solid #222222;
}
.mobile-sub-menu li:last-child {
    border-bottom: none;
}
.mobile-sub-menu li a {
    font-size: 14px;
    color: #cccccc; /* لون رمادي فاتح للروابط الداخلية */
}

/* زر الإغلاق */
#mobile-unified-menu .close-btn {
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
}


@media (max-width: 767px) {
    /* **إصلاح مشكلة الزحف الأفقي (المسافة البيضاء)** */
    body {
        overflow-x: hidden !important;
    }

    /* **إخفاء السلايدر القديم على الجوال فقط** */
    #slider {
        display: none !important; 
    }
    
    /* **إظهار الصورة المتجاوبة على الجوال فقط (موجودة في homepage.tpl)** */
    .mobile-slider {
        display: block !important;
    }

    /* **بداية: قواعد تنظيف التجاوب للصفحة الرئيسية - مهم جدًا** */
    
    /* جعل جميع الأعمدة تأخذ عرض 100% وإلغاء التعويم */
    .homerow1 .latestnews, 
    .homerow1 .featurelist,
    .homerow2 .content .col1,
    .homerow2 .content .col2,
    .homerow2 .content .col3,
    .homerow3 .col1, 
    .homerow3 .col2, 
    .homerow3 .col3,
    .homerow4 .latestproducts,
    .homerow4 .kbmostviewed,
    .homerow4 .twitterfeed,
    .homerow5 ul li 
    {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 25px !important; /* إضافة مسافة بين العناصر المتكدسة */
    }

    /* توسيط المحتوى داخل هذه الأعمدة الجديدة */
    .homerow1 .latestnews .content, 
    .homerow1 .featurelist .content,
    .homerow5 ul li {
        text-align: center;
    }
    
    /* توسيط عناصر القوائم في homerow5 (خدماتك على جوالك...الخ) */
    .homerow5 ul li i {
        float: none !important;
        margin: 0 auto 15px auto !important; /* توسيط الأيقونة */
        display: block; /* لجعل التوسيط يعمل */
    }
    .homerow5 ul li h2 {
        text-align: center !important;
    }

    /* تنسيق خاص لقائمة المميزات في homerow1 لجعلها تتكدس بشكل صحيح */
    .featurelist .content ul {
        list-style: none;
        padding: 0;
    }
    .featurelist .content ul li {
        width: 100% !important;
        float: none !important;
        padding-right: 0 !important;
        margin-bottom: 20px;
    }
    .featurelist .content ul li .f-icon {
        float: none !important;
        margin: 0 auto 10px auto !important; /* توسيط الأيقونة */
        display: block;
    }
    
    /* **نهاية: قواعد تنظيف التجاوب للصفحة الرئيسية** */
    
    
    /* Header (للتوسيط والتكديس) */
    #header .container {
        flex-direction: column; /* تكديس العناصر عمودياً */
        display: flex;
        align-items: center; /* توسيط أفقي */
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    /* توسيط الشعار */
    #logo {
        width: 100% !important;
        text-align: center !important;
        float: none !important;
        margin-bottom: 10px;
        order: 1; /* الشعار أولاً */
    }
    #logo img {
        margin: 0 auto;
    }

    /* إظهار الروابط السريعة أسفل الشعار */
    #left-content {
        width: 100% !important;
        float: none !important;
        order: 2; /* يأتي بعد الشعار */
    }
    
    /* تنسيق الروابط السريعة لإعادة الأيقونات */
    .left-more-links {
        display: block !important; 
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    .left-more-links ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap; 
        justify-content: center; 
    }
    .left-more-links ul li {
        margin: 5px;
        float: none;
        padding: 0 !important;
        height: auto !important;
        line-height: normal !important;
    }
    .left-more-links ul li a {
        padding: 0 !important;
        background: none !important;
        color: inherit !important;
        border-radius: 0 !important;
        font-size: 0 !important; 
        text-decoration: none !important;
        width: 40px; 
        height: 40px;
        display: block;
        text-indent: -9999px; /* لإخفاء النص تماماً */
    }
    /* إخفاء قوائم سطح المكتب والعناصر المكررة */
    #main-menu, .top-menu, #social {
        display: none !important;
    }

    /* إظهار زر القائمة في الأسفل */
    .mobile-menu-toggle {
        display: block !important; 
        width: 100% !important; 
        order: 3;
        text-align: center;
    }
    
    /* تنسيقات عامة للتجاوب */
    .container {
        width: 95% !important; 
        padding: 0 10px !important;
    }
    .loginarea-welcome, .loginarea-bottom {
        flex-direction: column !important;
        display: flex !important;
        width: 100% !important;
    }

    /* **بداية: تنسيق الفوتر لضمان التوسيط والتكديس الجميل على الجوال** */
    .footer .container .widget {
        width: 100% !important; /* اجعل كل عمود يأخذ عرض كامل */
        float: none !important; /* إزالة التعويم */
        margin-bottom: 25px; /* مسافة بين الأعمدة المتكدسة */
        text-align: center; /* توسيط محتوى الودجت */
    }
    /* تنسيق القوائم داخل الودجت */
    .footer .container .widget ul {
        padding: 0; /* إزالة البادئة الافتراضية */
        list-style: none; /* إزالة النقاط إذا كانت موجودة */
    }
    .footer .container .widget ul li {
        text-align: center; /* توسيط عناصر القائمة */
    }

    /* تنسيق منطقة حقوق النشر والروابط السفلية (footer-bottom) */
    .footer-bottom .footer-right,
    .footer-bottom .footer-left {
        width: 100% !important;
        float: none !important;
        text-align: center !important; /* توسيط حقوق النشر ونص Powered by */
        padding-top: 5px; 
        margin-bottom: 5px; 
    }
    /* إذا كان لديك قائمة في الـ footer-left وتريد توسيطها أفقياً */
    .footer-bottom .footer-left ul {
        display: flex; /* لترتيب الروابط أفقياً */
        justify-content: center; /* توسيط الروابط السفلية */
        list-style: none;
        padding: 0;
    }
    .footer-bottom .footer-left ul li {
        margin: 0 5px;
    }
    /* **نهاية: تنسيق الفوتر** */
    
    /* تقليل أي فراغ زائد بعد السلايدر القديم على الجوال */
    .homerow1 {
        padding-top: 10px !important; 
    }
}