/* كود تنسيق القائمة المنسدلة (بدون أوامر إخفاء) */
@media (min-width: 992px) {

    /* 1. ضبط العنصر الأب */
    .has-children {
        position: relative;
    }

    /* 2. جعل القائمة تطفو فوق المحتوى وتوسيع عرضها */
    .has-children > .sub-menu {
        position: absolute !important; /* يجعلها تطفو ولا تدفع الصور */
        top: 100%;
        right: 0;
        z-index: 99999 !important; /* يضمن ظهورها فوق كل شيء */
        
        min-width: 600px !important; /* عرض ثابت ليستوعب 3 أعمدة */
        width: max-content !important; /* تتوسع حسب المحتوى */
        
        background: #ffffff !important;
        box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important;
        border-radius: 8px;
        border: 1px solid #e5e5e5;
    }

    /* 3. تقسيم العناصر الداخلية إلى 3 أعمدة */
    .has-children > .sub-menu > ul {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* 3 أعمدة متساوية */
        gap: 15px 25px !important; /* مسافات بين العناصر */
        padding: 20px !important;
        width: 100% !important;
    }

    /* تحسين إضافي لعناصر القائمة لضمان عدم التداخل */
    .has-children > .sub-menu > ul > li {
        width: auto !important;
        margin: 0 !important;
    }
}