/* ==========================================================================
   تنسيق القائمة الجانبية المطور - متجر عدن إكسبريس (الإصدار النظيف)
   ========================================================================== */

/* 1. جلب الخط العربي العصري وتطبيقه بقوة على نصوص القائمة */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@500;700;800&display=swap');

.mobile-menu-wrap ul li a, 
.mobile-menu-wrap ul li a span,
.drawer-clean ul li a,
.drawer-clean ul li a span {
    font-family: 'Tajawal', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ==========================================================================
   2. تصميم روابط القائمة وتأثير المستطيل الاحترافي (Hover/Active Box)
   ========================================================================== */
/* التنسيق الأساسي للروابط (جعلها متباعدة كأزرار التطبيقات) */
.mobile-menu-wrap ul li a,
.drawer-clean ul li a {
    display: flex !important;
    align-items: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;            /* خط عريض וواضح */
    color: #1e293b !important;              /* لون نص مريح */
    padding: 12px 20px !important;          
    margin: 6px 15px !important;            /* خلق مسافة جانبية لتكوين المستطيل */
    border-bottom: none !important;         /* إزالة الخطوط الفاصلة التقليدية */
    border-radius: 12px !important;         /* زوايا دائرية ناعمة للمستطيل */
    transition: all 0.25s ease !important;
}

/* تأثير ظهور المستطيل الرمادي الفاتح عند الضغط أو التمرير (مثل تطبيق وصلة) */
.mobile-menu-wrap ul li a:hover,
.mobile-menu-wrap ul li.current-menu-item > a,
.mobile-menu-wrap ul li.active > a,
.drawer-clean ul li.current-menu-item > a {
    background-color: #f1f5f9 !important;   /* لون المستطيل الخلفي */
    color: #0600a0 !important;              /* تحول النص للون الأزرق الداكن */
}

/* ==========================================================================
   3. تنسيق الأيقونات الجانبية المصاحبة للنصوص (إن وجدت)
   ========================================================================== */
.mobile-menu-wrap ul li a i,
.mobile-menu-wrap ul li a .fa {
    margin-left: 15px !important;           /* مسافة بين الأيقونة والنص */
    font-size: 18px !important;
    color: #64748b !important;              
    transition: all 0.25s ease !important;
}

/* تلوين الأيقونة بالأزرق عند تفعيل خيار الرابط */
.mobile-menu-wrap ul li a:hover i,
.mobile-menu-wrap ul li.current-menu-item > a i {
    color: #0600a0 !important;
}

/* ==========================================================================
   4. أيقونات التواصل الاجتماعي الدائرية في الأسفل
   ========================================================================== */
.mobile-menu-wrap [class*="social"] a,
.drawer-clean [class*="social"] a,
.mobile-menu-wrap .share-links a {
    border-radius: 50% !important;          /* تحويل كامل لدائرة */
    width: 42px !important;                 
    height: 42px !important;                
    display: inline-flex !important;        
    align-items: center !important;         
    justify-content: center !important;       
    margin: 0 6px !important;               
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    transition: all 0.3s ease !important;
}

.mobile-menu-wrap [class*="social"] a:hover,
.mobile-menu-wrap .share-links a:hover {
    transform: translateY(-3px) !important; /* ارتداد خفيف للأعلى */
    box-shadow: 0 5px 12px rgba(6, 0, 160, 0.2) !important;
}