/* Add custom CSS styles below */ 
/* كود إجبار تلوين الخلفية العامة لثيم واثق بلون البريز */
body, 
html, 
main, 
#app, 
.salla-theme-breeze,
[bg-main],
.bg-theme-colors {
    background-color: rgb(227, 222, 213) !important;
}
/* ========================================================
   كود اختراق حماية ثيم واثق لإجبار الإطار الكحلي الخارجي
   ======================================================== */

/* 1. استهداف الجذور البرمجية للمكون ومحاكاة الإطار الكحلي الخارجي */
salla-products-list, 
salla-products-slider, 
salla-product-card {
    --box-shadow: 0 0 0 5.5px #0b1528, 0 4px 15px rgba(11, 21, 40, 0.08) !important;
    --border-radius: 14px !important;
}

/* 2. إجبار الهيكل المحيط بالبطاقة على استقبال اللون والإطار */
.s-product-card, 
salla-product-card::part(card), 
.s-product-card-entry {
    border: 5.5px solid #0b1528 !important;   /* إطار كحلي سميك */
    border-radius: 14px !important;            /* زوايا دائرية */
    box-shadow: 0 0 0 5.5px #0b1528 !important; /* تثبيت إضافي عبر الظل الحاد */
    overflow: hidden !important;
} 

/* ========================================================
   1. تلوين الشريط العلوي الأساسي (الهيدر وقسم الأقسام) بالكحلي
   ======================================================= */
.site-header, 
header, 
.header-navigation, 
.main-nav-container,
.top-nav {
    background-color: #0b1528 !important; /* خلفية كحلي فخم */
}

/* تحويل لون نصوص الأقسام الأساسية والترحيب والسلة إلى الأبيض */
.site-header a, 
.site-header span, 
.header-navigation > ul > li > a, 
.header-navigation span,
.main-nav-container a {
    color: #ffffff !important; 
    font-weight: bold !important;
}

/* تلوين أيقونات البحث والسهم العلوي بالأبيض */
.site-header i, .site-header svg, .header-navigation svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* ========================================================
   2. إصلاح القوائم المنسدلة الفرعية (عزلها باللون الأبيض/الكريمي)
   ======================================================= */
.sub-menu, 
.dropdown-menu, 
.header-navigation ul ul, 
[class*="dropdown"], 
[class*="sub-menu"] {
    background-color: #ffffff !important; /* خلفية بيضاء صافية للقائمة المنسدلة */
    border: 1px solid #e3ded5 !important;   /* إطار ناعم يحدد القائمة */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important; /* ظل يعطيها عمقاً */
}

/* إجبار نصوص الروابط داخل القوائم المنسدلة على الظهور باللون الكحلي */
.sub-menu a, 
.dropdown-menu a, 
.header-navigation ul ul a,
[class*="dropdown"] a, 
[class*="sub-menu"] a,
.sub-menu span,
[class*="sub-menu"] span {
    color: #0b1528 !important; /* خط كحلي فخم ومقروء جداً */
    background-transparent: transparent !important;
    font-weight: 500 !important;
    padding: 10px 15px !important;
}

/* تأثير تمرير الماوس فوق خيارات القائمة المنسدلة (خلفية بريز خفيفة) */
.sub-menu a:hover, 
.dropdown-menu a:hover, 
[class*="sub-menu"] a:hover {
    background-color: #f4f1eb !important; /* تفاعل ناعم عند التمرير */
    color: #0b1528 !important;
}



/* ========================================================
   تلوين الشريط الإعلاني الأعلى (Top Bar) باللون الكحلي والأبيض
   ======================================================== */

/* 1. تلوين خلفية الشريط الأعلى بالكامل */
.top-header, 
.announcement-bar, 
.top-nav-bar,
[class*="top-header"],
[class*="announcement"] {
    background-color: #0b1528 !important; /* تحويل الخلفية للكحلي */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* خط فاصل ناعم جداً */
}

/* 2. تحويل لون النصوص والروابط داخل الشريط الأعلى للأبيض */
.top-header a, 
.top-header span, 
.announcement-bar a, 
.announcement-bar span,
[class*="top-header"] a,
[class*="announcement"] * {
    color: #ffffff !important; /* نصوص بيضاء ناصعة */
    font-weight: 500 !important; /* سماكة خط واضحة */
}

/* 3. تلوين أيقونات الشريط الأعلى (مثل أيقونة الشحن أو مواقع التواصل) بالأبيض */
.top-header i, 
.top-header svg, 
.announcement-bar svg,
[class*="top-header"] svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}



/* ========================================================
   تخصيص شريط التمرير (Scrollbar) باللون الكحلي الفخم
   ======================================================== */

/* 1. تحديد عرض شريط التمرير على المتصفحات */
::-webkit-scrollbar {
    width: 10px !important;  /* سُمك شريط التمرير العمودي */
    height: 10px !important; /* سُمك شريط التمرير الأفقي في حال وجوده */
}

/* 2. تلوين الجزء المتحرك (المقبض) باللون الكحلي */
::-webkit-scrollbar-thumb {
    background-color: #0b1528 !important; /* لون كحلي فخم للمقبض */
    border-radius: 20px !important;        /* جعل حواف الشريط دائرية وناعمة */
    border: 2px solid #e3ded5 !important;  /* إطار بلون البريز حول المقبض ليعطيه مظهراً معزولاً وجميلاً */
}

/* 3. تأثير تمرير الماوس فوق الشريط (يصبح كحلي داكن أكثر للتفاعل) */
::-webkit-scrollbar-thumb:hover {
    background-color: #060d1a !important; 
}

/* 4. تلوين المجرى الخلفي للشريط بلون البريز ليتناسق مع خلفية متجرك */
::-webkit-scrollbar-track {
    background-color: #e3ded5 !important; /* لون البريز للمجرى الخلفي */
}


/* النظام القياسي الحديث لتلوين شريط التمرير بالمتصفحات لعام 2026 */
html {
    scrollbar-color: #0b1528 #e3ded5 !important; /* اللون الأول للمقبض (كحلي) واللون الثاني للمجرى (بريز) */
    scrollbar-width: auto !important; /* ضبط سُمك الشريط القياسي */
}


/* ========================================================
   كود إجبار تلوين شريط التمرير بالكحلي والبريز لكافة المتصفحات
   ======================================================== */

/* 1. للمتصفحات الحديثة (فايرفوكس وكروم المحدث) */
html, body, :root, * {
    scrollbar-color: #0b1528 #e3ded5 !important; /* المقبض كحلي والخلفية بريز */
    scrollbar-width: auto !important;
}

/* 2. لمتصفحات كروم، إيدج، وسفاري (الكمبيوتر والجوال) */
::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
    display: block !important;
}

/* تلوين مجرى الشريط بلون البريز ليتناسق مع المتجر */
::-webkit-scrollbar-track, 
html::-webkit-scrollbar-track, 
body::-webkit-scrollbar-track {
    background: #e3ded5 !important;
}

/* تلوين الجزء المتحرك (المقبض) باللون الكحلي الفخم */
::-webkit-scrollbar-thumb, 
html::-webkit-scrollbar-thumb, 
body::-webkit-scrollbar-thumb {
    background-color: #0b1528 !important;
    border-radius: 10px !important;
    border: 3px solid #e3ded5 !important; /* فراغ بريز حول المقبض ليعطيه مظهراً معزولاً ونظيفاً */
}

/* عند تمرير الماوس فوق الشريط يصبح أغمق للتفاعل */
::-webkit-scrollbar-thumb:hover {
    background-color: #050a12 !important;
}


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

/* ========================================================
   3️⃣ تأثير تفاعلي ناعم (Hover Effect) لبطاقات المنتجات عند تمرير الماوس
   ======================================================== */

/* 1. تهيئة بطاقة المنتج الأساسية لاستقبال الحركة الانسيابية */
salla-product-card, 
.s-product-card, 
.s-product-card-entry {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; /* حركة هادئة وعالمية تدريجياً */
    will-change: transform !important; /* حيلة برمجية لتسريع أداء الحركة على الجوالات */
}

/* 2. التأثير الفعلي عند تمرير الماوس (Hover) فوق الصنف */
salla-product-card:hover, 
.s-product-card:hover, 
.s-product-card-entry:hover {
    transform: translateY(-4px) !important; /* رفع البطاقة للأعلى برفق بمقدار 4 بكسل */
    
    /* إضافة ظل كحلي شفاف وناعم يعزز من بروز المنتج بشكل فخم ثلاثي الأبعاد */
    box-shadow: 0 10px 25px rgba(11, 21, 40, 0.12) !important; 
    
    /* جعل حواف الإطار تبدو أكثر حدة ونظافة أثناء الارتفاع */
    z-index: 10 !important;
}

/* ========================================================
   4️⃣ تنسيق أسعار المنتجات وتلوين وسم التخفيضات (Sale Tags)
   ======================================================== */

/* 1. تكبير خط السعر الأساسي وجعله عريضاً باللون الكحلي الفخم */
.s-product-card-price, 
.product-card__price, 
.salla-price,
[class*="price"] {
    color: #0b1528 !important;     /* لون كحلي */
    font-size: 18px !important;     /* حجم خط أكبر وأوضح للعميل */
    font-weight: 800 !important;     /* خط عريض وبارز */
}

/* 2. تنسيق السعر القديم (قبل الخصم) ليكون بلون رمادي ناعم وعليه خط شطب */
.s-product-card-price-before, 
.price-regular, 
[class*="price-before"] {
    color: #8a94a6 !important;     /* رمادي هادئ لكسر الحدة */
    font-size: 14px !important;     /* حجم أصغر مقارنة بالسعر الجديد */
    text-decoration: line-through !important; /* وضع خط الشطب الافتراضي */
    font-weight: normal !important;
}

/* 3. تلوين وسم التخفيض والخصومات باللون الأحمر التقني الملفت */
.s-product-card-promotion, 
.badge-sale, 
.discount-tag,
[class*="promotion"], 
[class*="badge"] {
    background-color: #dd2c00 !important; /* أحمر ناري تقني جاذب للعين فوراً */
    color: #ffffff !important;            /* نص الخصم باللون الأبيض الساطع */
    font-weight: bold !important;
    font-size: 12px !important;
    border-radius: 4px !important;         /* زوايا دائرية ناعمة للوسم */
    padding: 4px 8px !important;           /* مسافة داخلية مرتبة */
}


/* توحيد مقاس صور قسم "قائمة عناصر" بالصفحة الرئيسية */
.s-block-squared-photos img,
.s-block-squared-photos .s-block-item img,
.squared-photos-item img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
}

.s-block-squared-photos .s-block-item,
.squared-photos-item {
  height: 200px !important;
  overflow: hidden !important;
}

/* تغيير خلفية الشريط العلوي بالكامل */
.main-header, .header-wrapper, [class*="header"] {
    background-color: #e3ded5 !important;
    background: #e3ded5 !important;
}