/* =========================================================
   🚀 إصلاحات الهيدر والقائمة الجانبية (Mobile Menu Fix) 🚀
   ========================================================= */

/* 1️⃣ إصلاح أزرار القائمة الجانبية (الإغلاق والرجوع) */
/* نرفع القائمة الجانبية لتكون الطبقة رقم 1 فوق كل شيء في المتجر */
.mm-ocd, 
.mm-ocd__content, 
.mm-spn {
    z-index: 99999999 !important; 
}
/* إجبار المتصفح على تفعيل النقر للأزرار العلوية للقائمة */
.mm-spn.mm-spn--navbar::after, 
.mm-spn.mm-spn--navbar::before,
.mm-spn .btn--close {
    z-index: 99999999 !important;
    pointer-events: auto !important;
}

/* 2️⃣ إصلاح ثبات الهيدر (Sticky) في الصفحة الرئيسية */
/* تحرير الـ overflow للأباء عشان الـ sticky يشتغل بالرئيسية بدون ما يخرب التصميم */
body, 
html, 
.app-inner, 
main {
    overflow-x: clip !important; /* يمنع التمرير الأفقي المزعج */
    overflow-y: visible !important; /* يحرر التمرير العمودي لثبات الهيدر */
}

/* حل احتياطي: إذا كان هناك سكشن يخفي الهيدر في الرئيسية */
.s-block {
    overflow: visible !important;
}

/* =========================================================
   🎯 إصلاح أبعاد زر إغلاق القائمة (X) وإخفاؤه بالكمبيوتر 🎯
   ========================================================= */

/* 🚫 إخفاء إجباري للزر في شاشات الكمبيوتر 🚫 */
@media (min-width: 1025px) {
    .btn--close, 
    .close-mobile-menu, 
    #mobile-menu .btn--close {
        display: none !important;
        visibility: hidden !important;
    }
}

/* 📱 تنسيق الزر وإظهاره فقط في شاشات الجوال والتابلت 📱 */
@media (max-width: 1024px) {
    .mobile-menu .btn--close,
    .mobile-menu .close-mobile-menu,
    #mobile-menu .btn--close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 45px !important;  /* 👈 إعطاء عرض كافي ومريح للنقر بالجوال */
        height: 45px !important; /* 👈 إعطاء ارتفاع كافي */
        position: absolute !important;
        top: 6px !important;
        color: red !important;
        left: 15px !important;   /* 👈 تثبيته في الزاوية اليسرى العليا */
        z-index: 999999999 !important;
        pointer-events: auto !important; /* التأكيد على استقبال النقرات */
        cursor: pointer !important;
    }

    /* تكبير حجم الأيقونة (الـ X) داخل الزر لتكون واضحة */
    .mobile-menu .btn--close::before,
    .mobile-menu .btn--close i,
    .close-mobile-menu::before {
        font-size: 20px !important;
        display: inline-block !important;
        position: absolute !important;
        left: 0px !important;
    }
}


/* =========================================================
   🎯 الارتفاع المعتمد هو 450px للجوال 🎯 
   ========================================================= */
@media (max-width: 767px) { 
    .advanced-slider__slide, 
    .advanced-slider__caption, 
    .advanced-slider__image { 
        height: 450px !important; 
        min-height: 450px !important; 
    } 

    .advanced-slider { 
        height: 450px !important; 
    } 

    .advanced-slider .advanced-slider__image { 
        height: 450px !important; 
        object-fit: cover !important; 
        object-position: center !important; 
    } 
}


/* =========================================================
   🎯 إصلاحات شريط البحث والفلتر 🎯 
   ========================================================= */

/* 🎯 1. رفع الهيدر بالكامل ليكون أعلى من الفلتر 🎯 */
header, 
.main-nav-container, 
.s-site-header {
    z-index: 999999 !important; /* الهيدر هو الملك */
}

/* خفض الفلتر درجة ليكون تحت الهيدر وتحت نتائج البحث */
#store-filter-nav, 
.st-pills-container {
    z-index: 9998 !important; 
    position: sticky !important;
}

/* رفع نافذة نتائج البحث للحد الأقصى */
salla-search, 
.s-search-modal, 
.search-results {
    z-index: 9999999 !important;
}

/* 🎯 2. إخفاء التصنيفات وتلوين حقل البحث (#60989b) 🎯 */
/* إخفاء القائمة المنسدلة للتصنيفات */
salla-search .s-search-select,
salla-search select {
    display: none !important;
}

/* تلوين أطراف الحقل (الفورم كامل) */
salla-search form,
salla-search .s-form-control,
.s-search-input {
    border: 1px solid #60989b !important;
    box-shadow: none !important;
}

/* تلوين زر البحث */
salla-search .s-search-btn,
salla-search button[type="submit"],
.btn--search {
    background-color: #60989b !important;
    border-color: #60989b !important;
    color: #fff !important; 
}

/* تلوين أيقونة البحث داخل الزر باللون الأبيض */
salla-search .s-search-btn i,
salla-search .s-search-btn svg,
.btn--search i {
    color: #ffffff !important;
    fill: #ffffff !important;
}


/* =========================================================
   🎯 14. اللمسات النهائية لنافذة البحث 🎯 
   ========================================================= */

/* 1. إعطاء الـ Div مسافة 65px من الأعلى */
salla-search .s-modal-body,
div:has(> .s-search-container).s-modal-body {
    top: 65px !important;
}

/* 2. تلوين أيقونة البحث باللون المعتمد */
.s-search-icon svg,
.s-search-icon path {
    fill: #60989b !important;
    color: #60989b !important;
}

/* 3. نقل الأيقونة إلى الجهة اليسرى بدلاً من اليمنى */
.s-search-icon-wrap {
    right: auto !important; /* إلغاء تثبيتها من اليمين */
    left: 15px !important;  /* تثبيتها في اليسار */
}

/* 4. تعديل مساحات حقل الإدخال ليتناسب مع الأيقونة في اليسار */
.s-search-input {
    padding-right: 15px !important; /* جعل النص يبدأ من اليمين بشكل طبيعي */
    padding-left: 50px !important;  /* ترك مساحة في اليسار حتى لا يغطي النص الأيقونة */
}

/* =========================================================
   🛒 إجبار رسالة الإضافة للسلة لتكون دائماً فوق الهيدر 🛒 
   ========================================================= */
.s-add-product-toast, 
salla-add-product-toast {
    z-index: 999999999 !important;
}
///////////////////////////////



















/* 🎯 16. ترتيب أقسام المنتجات المتحركة (تقليل المساحات + العنوان يمين والزر يسار) 🎯 */

/* 1. تقليل المسافة العلوية للسكشن بالكامل (بدل 2rem) */
.s-block--best-offers {
    margin-top: 15px !important; 
    padding-top: 10px !important;
    position: relative !important; /* مهم جداً عشان نثبت الزر داخله */
}

/* 2. ضبط العنوان ليكون في اليمين وإلغاء مساحة mb-8 */
.s-block--best-offers > div.mb-8 {
    margin-bottom: 0px !important;
    text-align: right !important;
    padding-right: 15px !important;
    padding-left: 110px !important; /* ترك مساحة في اليسار عشان الزر ما يغطي عالعنوان */
}

/* تصغير حجم خط العنوان قليلاً في الجوال ليتناسب مع الزر */
@media (max-width: 767px) {
    .s-block--best-offers > div.mb-8 h2 {
        font-size: 18px !important;
    }
}

/* إخفاء الخط الزخرفي تحت العنوان ليكون التصميم نظيف وحديث */
.s-block--best-offers .enhanced-title-border {
    display: none !important;
}

/* 3. ضبط زر "عرض الكل" وإلغاء مساحة mt-5 ونقله لليسار */
.s-block--best-offers > div.mt-5 {
    margin-top: 0 !important;
    position: absolute !important;
    top: 5px !important;
    left: 15px !important;
    width: auto !important;
    gap: 0 !important;
}

/* إخفاء الخطوط الرمادية الممتدة يمين ويسار زر عرض الكل */
.s-block--best-offers > div.mt-5 span.bg-gray-200 {
    display: none !important;
}

/* 🎯 1. إضافة خط بسيط تحت العنوان 🎯 */
.s-block--best-offers > div.mb-8 h2 {
    display: inline-block !important;
    border-bottom: 2px solid #0b7579 !important; /* لون وسماكة الخط */
    padding-bottom: 6px !important; /* مسافة بين النص والخط */
}

/* تصغير حجم خط العنوان قليلاً في الجوال ليتناسب مع الزر */
@media (max-width: 767px) {
    .s-block--best-offers > div.mb-8 h2 {
        font-size: 18px !important;
    }
}

/* 🎯 2. تعديل زر عرض الكل (دائري، إطار ملون، بدون سهم) 🎯 */
.s-block--best-offers > div.mt-5 a {
    height: 32px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    border-radius: 50px !important; /* يخلي الأطراف دائرية بالكامل */
    background: #ffffff !important; 
    border: 1px solid #000000 !important; /* لون الإطار اللي طلبته */
    color: #000000 !important; /* لون النص متناسق مع الإطار */
}

/* إخفاء السهم من الزر نهائياً */
.s-block--best-offers > div.mt-5 a i,
.s-block--best-offers > div.mt-5 a svg {
    display: none !important;
}
/* 🎯 17. تصفير المسافة العلوية لكل الأقسام (s-block) 🎯 */
.s-block {
    margin-top: 0 !important;
}

.s-cart-summary-count {background-color: rgb(218 207 192) !important;}
/* =========================================================
   🚀 19. منع تكدس العناوين (حجز مساحة السلايدر قبل التحميل) 🚀
   ========================================================= */

/* حجز مساحة للسلايدر قبل أن يتم تفعيله (hydrated) بواسطة سلة */
salla-products-slider:not(.hydrated),
.s-products-slider-wrapper:not(.hydrated),
salla-slider:not(.hydrated) {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    min-height: 250px !important; /* 👈 مساحة مبدئية محجوزة للجوال */
    background-color: transparent !important;
}

@media (min-width: 768px) {
    salla-products-slider:not(.hydrated),
    .s-products-slider-wrapper:not(.hydrated),
    salla-slider:not(.hydrated) {
        min-height: 420px !important; /* 👈 مساحة مبدئية محجوزة للكمبيوتر */
    }
}











/* =========================================================
   🚀 20. قص صور البحث بذكاء (التركيز على الجزء السفلي) 🚀
   ========================================================= */

/* 1. إغلاق الحاوية لمنع خروج الصورة بعد التكبير (القص الذكي) */
.s-search-product-image,
.s-search-results .s-search-product-image,
salla-search .s-search-product-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 60px !important; 
    width: 60px !important;
    min-width: 60px !important;
    margin: 0 0 0 15px !important; 
    position: relative !important;
top: -15px;
    right: 10px;    border-radius: 6px !important;
    overflow: hidden !important; /* 👈 (مهم جداً) لقص الفراغ العلوي بعد عمل الزووم */
}

/* 2. تطبيق اقتراحك: زووم مع التركيز على أسفل الصورة */
.s-search-product-image img,
.s-search-results .s-search-product-image img,
salla-search .s-search-product-image img {
    position: relative !important; 
    top: 0 !important; 
    height: 100% !important; 
    width: 100% !important;
    object-fit: cover !important; /* نرجعها لنظام سلة في القص */
    object-position: bottom center !important; /* 👈 إجبار التركيز على الجزء السفلي */
    transform: scale(1.4) !important; /* 👈 عمل زووم (تكبير) بنسبة 140% لاخفاء الفراغ */
    transform-origin: bottom center !important; /* 👈 الزووم يبدأ من تحت عشان الحذاء ما ينقص */
}

/* ترتيب الكرت بالكامل */
.s-search-product,
.s-search-results a,
salla-search .s-search-product {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 8px !important;
    height: auto !important;
    border-bottom: 1px solid #f9f9f9 !important;
}

/* إخفاء التأثيرات الوهمية */
.s-search-product-image::before,
.s-search-product::before {
    display: none !important;
}









/* =========================================================
   🚀 22. حل مشكلة الهوامش الجانبية في سلايدر الماركات 🚀
   ========================================================= */

/* 1. إلغاء نسبة العرض إلى الطول (التي تسبب الفراغات) */
#square-links-slider-2 .aspect-\[14\/13\],
#square-links-slider-2 img {
    aspect-ratio: auto !important;
}

/* 2. التحكم في الحاوية (التي تحتوي الصورة) */
#square-links-slider-2 .overflow-hidden.rounded-2xl {
    aspect-ratio: 1 / 1 !important; /* اجعلها مربعة تماماً (يمكنك تغييرها لـ 4/3) */
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

/* 3. إجبار الصورة على ملء الحاوية بالكامل بدون أي هامش */
#square-links-slider-2 img.lazy {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* هذا هو السر: يملأ المساحة ويقص الزوائد بدلاً من ترك فراغات */
    object-position: center !important;
    display: block !important;
  transform:scale(1.2) !important;

}

/* 4. تقليل الفراغ بين الكروت بشكل أكبر */
#square-links-slider-2 .swiper-slide {
    padding-left: 5px !important; /* تقليل المسافة بين العناصر */
    padding-right: 5px !important;
}
.s-block-trust-store-features__grid{
    display: grid !important;
    gap: 2rem !important;
    grid-template-columns: repeat(2, 1fr) !important;
  
}













/* =========================================================
           ترتيب وتحسين قسم (البنر الجانبي + سلايدر المنتجات) ⚡
           ========================================================= */
        
        /* 1. مسافة آمنة بين الصورة والمنتجات ومنع التداخل */
        .special-products-slider__inner {
            gap: 30px !important; /* مسافة إجبارية بين الصورة والمنتجات */
            overflow: visible !important;
        }

        /* 2. هندسة البنر الجانبي (الصورة) */
        .special-slider__media {
            border-radius: 24px !important; /* حواف دائرية فخمة */
            overflow: hidden !important; /* قص أي جزء بارز من الصورة */
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important; /* ظل يعطي عمق للصفحة */
            border: 1px solid rgba(255, 255, 255, 0.1) !important; /* إطار زجاجي خفيف */
            position: relative !important;
            z-index: 10 !important; /* إبقاء الصورة في طبقتها الصحيحة */
            transform: scale(0.98); /* تصغير بسيط جداً لإعطاء مساحة للتنفس */
        }

        /* 3. تأثير التمويه والتدرج على أطراف الصورة (Vignette Effect) */
        .special-slider__media::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            /* تدرج يبدأ شفاف من النص ويصير غامق مموه في الأطراف */
            background: radial-gradient(circle, transparent 40%, rgba(0, 0, 0, 0.7) 100%) !important;
            z-index: 1 !important; /* فوق الصورة وتحت النص */
            pointer-events: none !important; /* عشان ما يمنع النقر على الزر */
            border-radius: 24px !important;
        }

        /* ضمان بقاء النص والزر فوق تأثير التعتيم */
        .special-slider__content {
            z-index: 5 !important; 
        }

        /* 4. حماية سلايدر المنتجات من الدخول تحت الصورة */
        .slider-wrap {
            position: relative !important;
            z-index: 5 !important;
            padding-right: 10px !important; /* إبعاد المنتجات قليلاً */
        }

        /* 5. لمسة زجاجية (Glassmorphism) على النص والزر لزيادة الفخامة */
        .special-slider__content h2, .special-slider__content p {
            text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* إبراز النص */
        }
        .special-products-slider__button {
            border-radius: 12px !important;
            border: 1px solid rgba(255,255,255,0.2) !important;
            backdrop-filter: blur(5px) !important;
            -webkit-backdrop-filter: blur(5px) !important;
            transition: all 0.3s ease !important;
        }
        .special-products-slider__button:hover {
            transform: translateY(-3px) scale(1.05) !important;
            box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
        }

/* === الشريط المتحرك (Ticker) — سيليا | متصل من أقصى اليمين لأقصى الشمال === */
.st-ticker {
    width: 100%;
    direction: ltr;
    overflow: hidden;
    position: relative;
    z-index: 10005;
    padding: 9px 0;
    background: linear-gradient(90deg, #085a5d, #0b7579, #0e9aa0, #0b7579, #085a5d);
    background-size: 200% 100%;
    animation: stTickerBg 10s linear infinite;
    box-shadow: 0 3px 14px rgba(11, 117, 121, 0.28);
    font-family: var(--font-readex, 'Tajawal', sans-serif);
}
.st-ticker-track {
    display: flex;
    width: max-content;
    white-space: nowrap;
    will-change: transform;
    animation: stTickerScroll 15s linear infinite;
}
.st-ticker:hover .st-ticker-track { animation-play-state: paused; }
.st-ticker-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    min-width: 100%;
    direction: rtl;
}
.st-ticker-pair { display: inline-flex; align-items: center; flex-shrink: 0; }
.st-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
}
.st-ticker-star { color: #ffd76a; font-size: 12px; padding: 0 2px; flex-shrink: 0; }
@keyframes stTickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes stTickerBg { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@media (max-width: 767px) {
    .st-ticker { padding: 7px 0; }
    .st-ticker-item { font-size: 12px; padding: 0 13px; }
    .st-ticker-star { font-size: 10px; }
}