/* =========================================
   1. استدعاء الخطوط ومكتبة الأيقونات
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

* { font-family: 'Alexandria', sans-serif !important; }

/* =========================================
   2. تنسيق الهيدر العلوي (الأساسي)
   ========================================= */
.top-navbar { display: none !important; }
.header-inner-wrapper {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    position: relative !important; width: 100% !important; padding: 15px 0 !important;
}
.header-logo-wrapper {
    position: absolute !important; left: 50% !important; top: 50% !important;
    transform: translate(-50%, -50%) !important; margin: 0 !important; z-index: 10;
}
.header-logo-wrapper img { height: 70px !important; width: auto !important; object-fit: contain !important; }

.header-innerRight, .header-innerLeft { flex: 1 !important; display: flex !important; align-items: center !important; gap: 20px !important; z-index: 5; }
.header-innerRight { justify-content: flex-start !important; }
.header-innerLeft { justify-content: flex-end !important; }

.header-signInBtn span, .s-cart-summary-content { display: none !important; }
.header-btn, .s-cart-summary-wrapper { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }

.header-btn i, .s-cart-summary-icon svg { font-size: 22px !important; color: #18181b !important; transition: color 0.3s ease; }
.header-btn i:hover, .s-cart-summary-icon svg:hover { color: #b0956e !important; }

.s-cart-summary-count {
    background-color: #b0956e !important; color: #fff !important; border: 2px solid #fff !important;
    width: 20px !important; height: 20px !important; font-size: 11px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    top: -6px !important; right: -8px !important;
}

/* إخفاء أي زر إغلاق عشوائي يظهر في الهيدر العلوي */
.header-inner-wrapper .close-mobile-menu { display: none !important; }

/* =========================================
   3. تصميم قائمة الجوال والعنوان
   ========================================= */
.mobile-menu, .mobile-menu * { font-family: 'Tajawal', sans-serif !important; }
.mobile-menu, #mobile-menu { background-color: #ffffff !important; }

/* تلوين وضبط هيدر القائمة */
.mm-spn--navbar {
    background: #ffffff !important;
    color: #111111 !important;
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 900 !important;
    font-size: 22px !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

/* =========================================
   🚨 الحل الجذري لزر الإغلاق X 🚨
   ========================================= */
nav#mobile-menu button.btn--close,
.mm-ocd button.btn--close {
    display: flex !important;
    position: fixed !important; /* ثابت على الشاشة عشان ما يختفي */
    top: 20px !important;
    left: 20px !important;
    width: 38px !important;
    height: 38px !important;
    z-index: 2147483647 !important; /* أعلى طبقة موجودة في المتصفح */
    background-color: #ffffff !important; /* خلفية بيضاء دائرية للزر */
    border-radius: 50% !important;
    color: #e11d48 !important; /* أحمر */
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; /* ظل خفيف لبروز الزر */
    border: none !important;
    pointer-events: auto !important;
}

nav#mobile-menu button.btn--close::before,
.mm-ocd button.btn--close::before {
    content: "\f00d" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 22px !important;
}

/* =========================================
   4. تنسيق الروابط العامة والأيقونات
   ========================================= */
.mobile-menu-item > a {
    padding: 18px 25px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    border-bottom: 1px solid rgba(0,0,0,0.03) !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.mobile-menu-item.has-children > a::after { display: none !important; }

.mobile-menu-item > a::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    color: #111111 !important;
    min-width: 25px !important;
    text-align: center !important;
}

/* الأيقونات */
li[id*="2045170967"] > a::before { content: "\f1bb" !important; }
li[id*="2004169234"] > a::before { content: "\f005" !important; }
li[id*="322924572"] > a::before { content: "\f043" !important; }
li[id*="1095913747"] > a::before { content: "\f4cb" !important; }
li[id*="1055047198"] > a::before { content: "\f72e" !important; }
li[id*="1519713304"] > a::before { content: "\f5db" !important; }
li[id*="879827737"] > a::before { content: "\f06d" !important; }
li[id*="106838554"] > a::before { content: "\f06b" !important; }

/* =========================================
   5. الكارت الأسود (قسم التخفيضات)
   ========================================= */
.mobile-menu-item[id*="offers"] { padding: 15px 20px !important; border-bottom: none !important; }
.offers-link {
    background: #111111 !important; 
    border-left: 5px solid #e11d48 !important; 
    border-radius: 12px !important;
    padding: 22px !important;
    box-shadow: 0 4px 15px rgba(225, 29, 72, 0.2) !important; 
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: none !important; border-right: none !important; border-bottom: none !important;
}
.offers-link h4, .offers-link span, .offers-link .text-sm {
    color: #ffffff !important; font-weight: 900 !important; font-size: 19px !important; margin: 0 !important;
}
.offers-link::before { content: "\f02b" !important; color: #e11d48 !important; font-size: 22px !important; }

/* =========================================
   6. القوائم الفرعية (تحت خشب العود)
   ========================================= */
.mobile-menu-item ul { background-color: #fefefe !important; padding-right: 45px !important; border-right: 3px solid #111111 !important; }
.mobile-menu-item ul a { padding: 15px 20px !important; font-size: 16px !important; font-weight: 700 !important; color: #444 !important; }

/* =========================================
   7. حلول الدارك مود (Dark Mode Fixes)
   ========================================= */
/* القائمة العامة */
html.dark .mobile-menu, html.dark #mobile-menu, .dark .mobile-menu, .dark #mobile-menu { background-color: #111111 !important; }
html.dark .mm-spn--navbar, .dark .mm-spn--navbar { background: #111111 !important; color: #ffffff !important; border-bottom: 1px solid #222222 !important; }

/* زر الإغلاق الدائري X في الدارك مود */
.dark nav#mobile-menu button.btn--close, .dark .mm-ocd button.btn--close {
    background-color: #111111 !important;
    box-shadow: 0 4px 10px rgba(255,255,255,0.05) !important;
}

/* النصوص والأيقونات */
html.dark .mobile-menu-item > a, .dark .mobile-menu-item > a { color: #ffffff !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
html.dark .mobile-menu-item > a::before, .dark .mobile-menu-item > a::before { color: #ffffff !important; }

/* القوائم الفرعية */
html.dark .mobile-menu-item ul, .dark .mobile-menu-item ul { background-color: #1a1a1a !important; border-right: 3px solid #b0956e !important; }
html.dark .mobile-menu-item ul a, .dark .mobile-menu-item ul a { color: #dddddd !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; }

/* أيقونات الهيدر العلوي */
html.dark .header-btn i, html.dark .s-cart-summary-icon svg, .dark .header-btn i, .dark .s-cart-summary-icon svg { color: #ffffff !important; }
/* =========================================
   1. الحل الجذري لإظهار علامة X (مضاد للحذف البرمجي)
   ========================================= */
/* تحويل شريط العنوان بالكامل ليكون قابلاً للنقر */
.mm-spn.mm-spn--navbar {
    position: relative !important;
    cursor: pointer !important;
}

/* رسم علامة X برمجياً داخل الشريط بحيث يستحيل على المكتبة إخفاؤها */
.mm-spn.mm-spn--navbar::after {
    content: "\f00d" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: #e11d48 !important; /* لون أحمر */
    font-size: 24px !important;
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    text-align: center !important;
    pointer-events: none !important; /* لتجنب تعارض النقرات مع الشريط */
}

/* =========================================
   2. تمييز الصفحة الحالية (Active State)
   ========================================= */
/* تلوين وإبراز القسم الذي يتواجد فيه الزائر حالياً */
.mobile-menu-item.active > a,
.mobile-menu-item > a.active,
.mobile-menu-item.is-active > a {
    background-color: #f7f7f7 !important;
    color: #b0956e !important; /* إبراز النص باللون الذهبي */
    border-right: 5px solid #b0956e !important; /* خط عريض جانبي للتمييز */
    font-weight: 900 !important;
}

/* تغيير لون أيقونة الصفحة الحالية لتطابق النص */
.mobile-menu-item.active > a::before,
.mobile-menu-item > a.active::before,
.mobile-menu-item.is-active > a::before {
    color: #b0956e !important;
}

/* =========================================
   3. توافق الصفحة الحالية مع الوضع الليلي (Dark Mode)
   ========================================= */
html.dark .mobile-menu-item.active > a,
.dark .mobile-menu-item.active > a {
    background-color: #1f1f1f !important; /* خلفية داكنة مريحة للعين */
    color: #b0956e !important;
    border-right: 5px solid #b0956e !important;
}

html.dark .mobile-menu-item.active > a::before,
.dark .mobile-menu-item.active > a::before {
    color: #b0956e !important;
}