/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* أكواد CSS المقترحة لتعديل الهيدر في متجر  */

/* تطبيق margin و shadow على الهيدر الرئيسي */


/* إذا كنت ترغب في تطبيق الظل على جزء التنقل الرئيسي فقط داخل الهيدر */
.main-nav-container {
margin: 7px; /* مسافة سفلية */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); /* ظل خفيف */
    /* يمكنك تعديل قيم الظل والمسافة حسب الرغبة */
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border-radius: 30px;
    overflow: hidden;
    background:#fff;
   padding: 0;
   height: 8px;

 
} 


/* إذا كنت ترغب في إضافة مسافة داخلية (padding) للهيدر */
/* .store-header {
    padding: 15px 0; 
} */

store-footer__inner {
  Background :#B18B40
}




body {
    background-color: #1a1a1a; /* لون خلفية أسود داكن */
    color: #f0f0f0; /* لون افتراضي للنصوص لضمان وضوحها */
}

/* تعديل ألوان النصوص والعناوين العامة */
h1, h2, h3, h4, h5, h6 {
    color: #f0f0f0; /* ألوان فاتحة للعناوين */
}

p, span, div {
    color: #e0e0e0; /* ألوان فاتحة للفقرات والنصوص العادية */
}

/* تعديل ألوان الروابط */
a {
    color: #ffd700; /* لون ذهبي للروابط */
}

a:hover {
    color: #e6c200; /* لون ذهبي أغمق عند التمرير */
}

/* تعديل الهيدر ليتناسب مع الخلفية السوداء */
.store-header {
    background-color: rgba(0, 0, 0, 0.7); /* خلفية شبه شفافة سوداء للهيدر */
    backdrop-filter: blur(10px); /* تأثير الزجاج */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* حدود خفيفة */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* ظل أغمق */
}

.store-header .s-search-input {
    background-color: rgba(255, 255, 255, 0.1); /* خلفية فاتحة لحقل البحث */
    color: #f0f0f0; /* لون نص البحث */
    border: 1px solid rgba(255, 255, 255, 0.2); /* حدود فاتحة */
}

.store-header .s-search-input::placeholder {
    color: #cccccc; /* لون النص الوهمي */
}
.store-header .s-user-menu-login-btn,
.store-header .s-cart-btn {
    color: #f0f0f0; /* لون الأيقونات */
}

.store-header .main-nav-container a {
    color: #f0f0f0; /* لون روابط التنقل */
}

.store-header .main-nav-container a:hover {
    color: #ffd700; /* لون ذهبي عند التمرير */
}

/* تعديل الفوتر ليتناسب مع الخلفية السوداء */
.store-footer {
    background-color: #0d0d0d; /* خلفية أغمق للفوتر */
    color: #e0e0e0; /* لون نصوص الفوتر */
}

.store-footer a {
    color: #ffd700; /* لون ذهبي لروابط الفوتر */
}

.store-footer a:hover {
    color: #e6c200;
}

/* تعديل بطاقات المنتجات لتتناسب مع الخلفية السوداء */
custom-salla-product-card.s-product-card-entry {
    background-color: #2a2a2a; /* خلفية داكنة لبطاقات المنتجات */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* ظل أوضح */
}

custom-salla-product-card.s-product-card-entry:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* ظل أغمق عند التمرير */
}

.s-product-card-image {
    background-color: #3a3a3a; /* خلفية أغمق لصورة المنتج */
    border-bottom: 1px solid #444444; /* حدود أغمق */
}

.s-product-card-content-title a {
    color: #f0f0f0; /* لون عنوان المنتج */
}

.s-product-card-content-title a:hover {
    color: #ffd700; /* لون ذهبي عند التمرير */
}

.s-product-card-price {
    color: #ffd700; /* لون ذهبي للسعر */
}

.s-product-card-content-footer .s-button-btn {
    background-color: #B18B40; /* لون مخصص للزر */
    color: #000000; /* لون نص الزر أسود */
}

.s-product-card-content-footer .s-button-btn:hover {
    background-color: #9A7B35; /* لون أغمق عند التمرير */
}

.s-product-card-wishlist-btn {
    background-color: rgba(0, 0, 0, 0.5); /* خلفية شفافة داكنة لزر الأمنيات */
}

.s-product-card-wishlist-btn:hover {
    background-color: #ffd700; /* لون ذهبي عند التمرير */
    color: #1a1a1a;
}

.s-product-card-wishlist-btn svg {
    fill: #ffd700; /* لون أيقونة الأمنيات */
}

.s-product-card-wishlist-btn:hover svg {
    fill: #1a1a1a; /* لون أسود للأيقونة عند التمرير */
}



.store-header {
    background-color: #000000 !important; /* خلفية سوداء */
    color: #B18B40 !important; /* نص ذهبي */
}

.store-header a, 
.store-header .navbar-brand, 
.store-header .text-gray-500,
.store-header .s-contacts-topnav-link {
    color: #B18B40 !important; /* لون الروابط ذهبي */
}

.store-header a:hover {
    color: #ffffff !important; /* تغيير اللون عند التمرير (اختياري: أبيض لتباين أفضل) */
}

/* 
   تغيير ألوان قسم مميزات المتجر 
*/

/* 2. قسم مميزات المتجر (Features Section) */
/* استهداف الحاوية الرئيسية وجميع الطبقات الداخلية لضمان إزالة اللون الأبيض */
section.s-block--features,
.s-block--features,
.s-block--features .container,
.s-block--features__item {
    background-color: #000000 !important;
    background: #000000 !important;
}

/* الأيقونات والنصوص داخل المميزات */
.s-block--features__item i,
.s-block--features__item [class^="sicon-"],
.s-block--features__item h2,
.s-block--features__item h3,
.s-block--features__item p,
.s-block--features__item span {
    color: #fff !important;
}

/* 3. الهيدر (Header) */
.store-header,
.main-nav-container {
    background-color: #000 !important;
    color: #B18B40 !important;
}


/* أيقونات السلة والمستخدم في الهيدر */
.store-header .sicon-cart,
.store-header .sicon-user {
    color: #B18B40 !important;
}
 

/* تحسين التباين في شريط البحث إذا كان داخل الهيدر */
.store-header input[type="search"] {
    background-color: #1a1a1a !important;
    border-color: #B18B40 !important;
    color: #ffffff !important;
}




#mobile-menu, 
.mm-spn, 
.mm-spn--main {
    background-color: #000000 !important; /* خلفية سوداء */
    color: #B18B40 !important; /* نص ذهبي */
}