/* Add custom CSS styles below */ 
/* ضبط وتوسيط حاوية التصنيفات بالكامل في منتصف الصفحة */
@media screen and (max-width: 767px) {
    
    /* 1. الحاوية الأساسية: إلغاء الانحراف وتوسيطها بالكامل */
    div.tabs.hide-scroll {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        
        /* التوسيط المطلق للحاوية ومحتوياتها */
        justify-content: center !important; 
        align-items: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        
        /* ضبط المساحات لضمان تساوي اليمين واليسار */
        gap: 8px !important; 
        padding: 10px 8px !important; /* حشو متساوٍ من الطرفين */
        
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* 2. الأزرار: حساب عرض دقيق يضمن توازن المسافات المحيطة */
    div.tabs.hide-scroll > * {
        /* حساب المساحة بالتساوي: 50% من العرض مطروحاً منه نصف قيمة الـ gap */
        flex: 0 0 calc(50% - 4px) !important;
        width: calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        box-sizing: border-box !important;
        
        /* التوسيط الداخلي للنصوص */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        
        /* حجم الخط والحشو الداخلي */
        font-size: 11px !important;       
        padding: 8px 4px !important;      
        white-space: nowrap !important;
        
        /* تصفير الهوامش الخارجية الفردية للأزرار لمنع تشتيتها */
        margin: 0 !important;
        border-radius: 6px !important;
    }
}
/* إخفاء العنصر الذي يحمل هذه الكلاسات بشكل نهائي */
.w-full.lg\:w-1\/4.self-stretch.flex.items-start.flex-col {
    display: none !important;
}