/* ==========================================
   1. الترتيب العام والأداء (Header > Ad > Content)
========================================== */
.app-inner { display: flex !important; flex-direction: column !important; }
header.header-components-all { 
    order: 1 !important; 
    z-index: 1000 !important; 
    position: sticky !important; 
    top: 0 !important; 
    background: #fff !important; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
salla-advertisement { order: 2 !important; z-index: 999 !important; }
.app-inner > *:not(header):not(salla-advertisement) { order: 3 !important; }
.header-components-top { display: none !important; }

/* ==========================================
   2. تصميم الجوال (توزيع متوازن وتوسيط الشعار)
========================================== */
@media (max-width: 1023px) {
    .header-components-inner { 
        display: flex !important; 
        justify-content: space-between !important; 
        align-items: center !important; 
        position: relative !important; 
        min-height: 65px !important; 
    }
    /* الشعار في المنتصف */
    .navbar-brand { 
        position: absolute !important; 
        left: 50% !important; 
        top: 50% !important; 
        transform: translate(-50%, -50%) !important; 
        z-index: 100 !important; 
    }
    .navbar-brand img { max-height: 42px !important; }

    /* يمين: منيو وبحث */
    .header-components-inner > div:first-child { display: flex !important; gap: 12px !important; order: 1 !important; }
    .search-btn { display: flex !important; visibility: visible !important; }

    /* يسار: حساب وسلة */
    .left-side { display: flex !important; gap: 12px !important; order: 2 !important; }
    .user-login { display: flex !important; visibility: visible !important; }
}

/* ==========================================
   3. تصميم الكمبيوتر (Grid لا يسمح بالتداخل)
========================================== */
@media (min-width: 1024px) {
    .header-components-inner { 
        display: grid !important; 
        grid-template-columns: 1fr auto 1fr !important; 
        align-items: center !important; 
        gap: 20px !important;
    }
    .navbar-brand { grid-column: 2 !important; position: static !important; transform: none !important; }
    .navbar-brand img { max-height: 75px !important; }
    .header-components-inner > .hidden.lg\:flex { grid-column: 1 !important; justify-content: flex-start !important; }
    .left-side { grid-column: 3 !important; justify-content: flex-end !important; display: flex !important; gap: 20px !important; }
}

/* ==========================================
   4. القائمة الجانبية (السيادة المطلقة للقائمة)
========================================== */
.s-mobile-drawer, .s-mobile-drawer-overlay { z-index: 999999 !important; }
/* إخفاء المكرر داخل المنيو فقط */
.s-mobile-drawer .user-login, .s-mobile-drawer .search-btn { display: none !important; }
/* إجبار المسارات على البقاء في الخلف */
.s-breadcrumb-container, .breadcrumb, .s-breadcrumb { z-index: 1 !important; position: relative !important; }

/* ==========================================
   5. الفوتر وتكبير السوشال ميديا (النسخة الراهية)
========================================== */
/* توسيط الشعار السفلي */
.store-footer__top .col-span-2 { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; }
.footer-logo img { max-height: 50px !important; margin-bottom: 15px !important; }

/* تكبير أيقونات التواصل الاجتماعي بشكل ملحوظ */
.s-social-icons { 
    display: flex !important; 
    justify-content: center !important; 
    gap: 30px !important; /* مساحة فخمة */
    margin-top: 25px !important; 
}
.s-social-icons a { 
    width: 65px !important; /* مساحة ضغط كبيرة */
    height: 65px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    background: rgba(0,0,0,0.04) !important; /* خلفية دائرية خفيفة */
    border-radius: 50% !important;
}
.s-social-icons a i { 
    font-size: 38px !important; /* تكبير الرمز نفسه (انستقرام، تيك توك، إلخ) */
    color: inherit !important;
}
/* --- تكبير أيقونات ومساحة التواصل الاجتماعي --- */
.footer-bottom salla-social, 
.footer-bottom .social-icons, 
.s-social-icons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important; /* مسافة فخمة بين الأيقونات */
    width: 100% !important;
    margin-top: 10px !important;
}

.footer-bottom salla-social a, 
.footer-bottom .social-icons a, 
.s-social-icons a {
    width: 50px !important; /* تكبير مساحة النقر الدائرية */
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important; /* لجعل الخلفية دائرية إذا وجدت */
    transition: all 0.3s ease !important;
}

.footer-bottom salla-social a i, 
.footer-bottom .social-icons a i, 
.s-social-icons a i,
.sicon-instagram, .sicon-tiktok {
    font-size: 30px !important; /* تكبير حجم الأيقونة (الرمز) نفسه */
    color: inherit !important; /* الحفاظ على لون الأيقونة الأصلي */
}

/* لضمان التوسيط الكامل في الجوال */
.footer-bottom > .container > div {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}