/* ======================================= */
/* الكود القاهر: التنسيق الفاخر وإخفاء التشتيت */
/* ======================================= */

/* 1. إخفاء الشريط العلوي الصغير (المحمي) */
.app-inner > *:first-child:not(.store-header),
.top-header, .header-top-bar, .top-bar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. إعداد الخلفية وحجم الهيدر (600px) */
.store-header {
    /* **الخلفية الـ GIF الكبيرة** */
    min-height: 600px !important; 
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    background-image: url(https://cityupload.io/2025/11/Gemini-Generated-Image-i3gqkdi3gqkdi3gq_04c69.png) !important;
    background-size: cover !important;        
    background-position: center center !important;    
    background-repeat: no-repeat !important;   
    background-color: transparent !important; 
    position: relative !important;
}

/* 3. **التكبير القسري للشعار** */
/* يستهدف أي صورة داخل الهيدر لتكبيرها */
.store-header img {
    height: 150px !important; 
    max-height: 150px !important; 
    width: auto !important;
    max-width: none !important;
}

/* 4. **إخفاء جميع العناصر التي تسبب مشاكل في الترتيب** */
/* (القائمة، محرك البحث، الأقسام، وأي رابط زائد) */
.store-header .flex.items-center.gap-5.grow.basis-0 {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    flex: none !important;
}
.store-header .flex.items-center.justify-center.grow.basis-0 > *:not(.navbar-brand) {
    display: none !important;
    visibility: hidden !important;
}

/* 5. **توسيط الشعار بشكل قسري (الحل الناجح سابقاً)** */
.store-header .flex.items-center.justify-center.grow.basis-0 {
    /* توسيط الشعار في كل المساحة المتبقية */
    flex-grow: 1 !important; 
    flex-basis: auto !important;
    display: flex !important; 
    justify-content: center !important; 
    width: auto !important; 
}

/* 6. **تعديل أيقونات اليسار لتبدو فاخرة على الخلفية الداكنة** */
.main-nav-container, .main-nav-container .inner {
    background-color: transparent !important;
}
.header-btn, .header-btn i, .header-btn span {
    color: #FFFFFF !important; /* لون أبيض واضح */
    text-shadow: 1px 1px 2px #000000; /* ظل أسود خفيف لزيادة الوضوح */
}

/* 7. إزالة أي مستطيل بحث جمالي قد يكون مضافاً */
.store-header::after {
    content: none !important;
}