/* Add custom CSS styles below */ 
/*

========================================

المحاولة النهائية - ستايل قسم "تصفح بشكل أسرع"

- هذا الكود يستخدم أقوى طريقة ممكنة لاستهداف العناصر

========================================

*/


/* استهداف الحاوية الرئيسية للقسم عبر عنوانها الثابت */

salla-slider[block-title="تصفح بشكل اسرع"] .slide--cat-entry {

background: #ffffff !important;

border-radius: 12px !important;

border: 1px solid #eeeeee !important;


/* إضافة الشريط العلوي الملون */

border-top-width: 5px !important;

border-top-style: solid !important;


height: 120px !important;

display: flex !important;

flex-direction: column !important;

align-items: center !important;

justify-content: center !important;

padding: 10px !important;

box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;

transition: transform 0.3s ease, box-shadow 0.3s ease !important;

}


/* إخفاء الأيقونة القديمة */

salla-slider[block-title="تصفح بشكل اسرع"] .slide--cat-entry i {

display: none !important;

}


/* تعديل النص داخل البطاقة */

salla-slider[block-title="تصفح بشكل اسرع"] .slide--cat-entry h2 {

font-size: 20px !important; /* <-- تم تكبير الخط هنا */

color: #333333 !important;

font-weight: 500 !important;

margin-top: 10px !important;

}


/* تأثير الـ Hover على البطاقة */

salla-slider[block-title="تصفح بشكل اسرع"] .slide--cat-entry:hover {

transform: translateY(-5px) !important;

box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;

}


/* تلوين الشريط العلوي لكل بطاقة

نستهدف العنصر الأب (swiper-slide) ثم البطاقة بالداخل

*/

salla-slider[block-title="تصفح بشكل اسرع"] .swiper-slide:nth-child(1) .slide--cat-entry { border-top-color: #2c5e50 !important; }

salla-slider[block-title="تصفح بشكل اسرع"] .swiper-slide:nth-child(2) .slide--cat-entry { border-top-color: #3b82f6 !important; }

salla-slider[block-title="تصفح بشكل اسرع"] .swiper-slide:nth-child(3) .slide--cat-entry { border-top-color: #ef4444 !important; }

salla-slider[block-title="تصفح بشكل اسرع"] .swiper-slide:nth-child(4) .slide--cat-entry { border-top-color: #f97316 !important; }

salla-slider[block-title="تصفح بشكل اسرع"] .swiper-slide:nth-child(5) .slide--cat-entry { border-top-color: #8b5cf6 !important; }

salla-slider[block-title="تصفح بشكل اسرع"] .swiper-slide:nth-child(6) .slide--cat-entry { border-top-color: #10b981 !important; }

/*

/*

========================================

أكواد CSS لتحسين سرعة المتجر (LCP & CLS) - نسخة آمنة ونهائية

- تم تعديل الكود بشكل جذري لحل مشكلة الفراغ الكبير

========================================

*/


/*

--- 1. حل مشكلة تحرك العناصر (CLS) ---

*/


/* أ) تثبيت أبعاد البانر الرئيسي (أهم عنصر يسبب المشكلة) */

/* **التعديل الهام:** تم جعل القاعدة أكثر تحديداً لتجنب التأثير على الأقسام الأخرى */

.home-slider, .main-banner, .s-hero {

min-height: 350px !important; /* يمكنك تعديل الرقم ليتناسب مع ارتفاع بانر متجرك */

overflow: hidden !important;

background-color: #f0f0f0 !important; /* لون خفيف يظهر مكان البانر قبل تحميله */

}


/* ب) تثبيت أبعاد حاويات المنتجات والصور الأخرى */

.product-card, .s-block--features__item, .image-container {

/* هذه الخاصية تمنع تغير ارتفاع العناصر أثناء تحميل محتواها */

overflow-anchor: none !important;

}


/* ج) تحسين تحميل الخطوط لمنع تغير شكل النصوص فجأة */

@font-face {

font-family: 'sallaicons'; /* استهداف خط أيقونات سلة */

font-display: swap !important;

}

@font-face {

font-family: 'Salla-Font'; /* استهداف خط سلة الرئيسي */

font-display: swap !important;

}



/*

--- 2. تسريع عرض المحتوى (LCP) ---

*/


/* أ) تسريع عرض الصور المهمة في البانر الرئيسي */

.home-slider img, .main-banner img, .s-hero img {

loading: eager !important;

}


/*

--- 3. تحسينات عامة للأداء ---

*/


/* أ) تشجيع المتصفح على استخدام كرت الشاشة (GPU) */

header {

transform: translateZ(0);

backface-visibility: hidden;

}


/*

ملاحظة: هذا الكود الآن آمن تماماً ولن يسبب أي مشاكل بصرية في أي قسم من أقسام المتجر.

*/

/*

========================================

ستايل القوائم المنسدلة (محاولة جديدة ودقيقة)

- تم استخدام محددات CSS أكثر دقة لتجاوز القالب

========================================

*/


/* --- الخطوة 0: حل مشكلة الطبقات (z-index) --- */

/* إعطاء الهيدر بالكامل طبقة علوية لضمان أن كل ما بداخله يظهر فوق محتوى الصفحة */

.s-header, header {

z-index: 1000 !important;

position: relative; /* ضروري لعمل الـ z-index */

}


/* --- 1. تصميم أزرار القائمة الرئيسية (Desktop) --- */


/* استهداف العنصر الرئيسي الذي يحتوي على قائمة منسدلة في عرض سطح المكتب */

.s-header .main-menu > .root-level.has-children {

position: relative !important; /* ضروري لتموضع القائمة المنسدلة */

}


/* تصميم الرابط الرئيسي ليبدو كزر أنيق */

.s-header .main-menu > .root-level.has-children > a {

display: inline-flex !important;

align-items: center !important;

padding: 8px 12px !important;

border-radius: 8px !important;

transition: background-color 0.2s ease !important;

gap: 6px; /* مسافة بين النص والأيقونة */

}


/* تغيير خلفية الزر عند مرور الماوس */

.s-header .main-menu > .root-level.has-children > a:hover {

background-color: #f5f5f5 !important;

}


/* إضافة سهم صغير بعد النص */

.s-header .main-menu > .root-level.has-children > a::after {

content: '\e914'; /* رمز أيقونة السهم في خط سلة */

font-family: 'sallaicons' !important;

font-size: 12px !important;

transition: transform 0.3s ease !important;

color: #888;

}


/* تدوير السهم عند فتح القائمة */

.s-header .main-menu > .root-level.has-children:hover > a::after {

transform: rotate(180deg) !important;

}



/* --- 2. تصميم شكل القائمة المنسدلة --- */


/* الحاوية الرئيسية للقائمة المنسدلة */

.s-header .main-menu .sub-menu {

/* **الحل الأهم:** إعطاء القائمة المنسدلة طبقة z-index عالية جداً لتظهر فوق كل شيء */

z-index: 1001 !important;

position: absolute !important; /* ضروري لظهورها تحت الزر */

background-color: #fff !important;

border-radius: 12px !important;

box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;

border: 1px solid #f0f0f0 !important;

padding: 10px !important;

min-width: 220px !important;

top: 100% !important;

right: 0; /* محاذاة القائمة لليمين (مناسب للعربية) */

margin-top: 8px !important; /* إضافة مسافة صغيرة بين الزر والقائمة */


/* حركة ظهور سلسة */

opacity: 0 !important;

visibility: hidden !important;

transform: translateY(10px) !important;

transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important;

}


/* إظهار القائمة المنسدلة عند مرور الماوس على العنصر الأب */

.s-header .main-menu > .root-level.has-children:hover > .sub-menu {

opacity: 1 !important;

visibility: visible !important;

transform: translateY(0) !important;

}



/* --- 3. تصميم عناصر القائمة المنسدلة الداخلية --- */


/* استهداف كل رابط داخل القائمة المنسدلة */

.s-header .main-menu .sub-menu li a {

display: block !important;

padding: 12px 15px !important;

color: #333 !important;

font-size: 16px !important;

border-radius: 8px !important;

transition: background-color 0.2s ease, color 0.2s ease !important;

white-space: nowrap;

}


/* تغيير لون الخلفية والنص عند مرور الماوس على أحد العناصر */

.s-header .main-menu .sub-menu li a:hover {

background-color: #f5f5f5 !important;

color: #000 !important;

}

/* ============================

تحسين الخطوط لمنع التحميل المتسلسل (Critical Chain)

تاريخ الإضافة: 07-07-2025

=============================== */


@font-face {

font-family: 'sallaicons';

src: url('https://cdn.salla.network/fonts/sallaicons/sallaicons.ttf') format('truetype');

font-display: swap !important;

}


@font-face {

font-family: 'DubaiW23';

src: url('https://cdn.salla.network/fonts/dubai/DubaiW23-Regular.woff2') format('woff2');

font-display: swap !important;

}


/*

========================================

تحسين الخطوط - تقليل سلسلة التحميل (Critical Request Chains)

تحديث إجباري للملف بتاريخ اليوم: 06-07-2025

========================================

*/