/* ==========================================
   1. الخلفيات العامة والصناديق الداكنة
   ========================================== */
body, .s-page, .main-wrapper, .product-details, .card, .s-product-block, 
div[class*="card"], section[class*="block"], .product-container, 
.product-content, .s-product-container, .product-block, .box, .bg-white,
.s-product-options-wrapper, salla-product-options, .s-product-options-option-container,
.s-comments, .s-comments-product, div.s-comments.s-comments-product,
.product-detalis-wrapper, .section-separator, .py-5, .my-5,
.sub-menu, .s-block--features__item,
div[class*="options"], div[class*="option"], .form-group, .s-options-wrp, fieldset,
.features-slider, .feature-item, .features-block, div[class*="feature-box"], div[class*="s-box"],
a.slide--cat-entry, .slide--cat-entry,
salla-cart-summary-card,
.s-cart-summary-card,
.s-cart-summary-card-sheet-wrap,
.s-cart-summary-wrapper,
div[class*="cart-summary"],
salla-add-product-toast,
.s-add-product-toast {
    background-color: #101522 !important;
    background: #101522 !important;
    color: #ffffff !important;
    border-color: #2a3447 !important;
}

/* ==========================================
   تنسيق الإطار الأبيض لـ (ملخص الطلب) و (السلة العائمة) فقط
   ========================================== */

/* 1. إطار أبيض لمربع ملخص الطلب في الصفحة */
salla-cart-summary-card,
.s-cart-summary-card {
    border: 1px solid #ffffff !important;
}

/* 2. إطار أبيض للسلة العائمة الجانبية فقط */
salla-add-product-toast,
.s-add-product-toast {
    border: 1px solid #ffffff !important;
}

/* إلغاء أي إطار عن أيقونة السلة في الهيدر العلوي */
.s-cart-summary-wrapper,
a[class*="cart-summary"] {
    border: none !important;
}

/* إلغاء الإطارات الداخلية في السلة العائمة */
salla-add-product-toast *,
.s-add-product-toast * {
    border-color: transparent !important;
}

/* إضافة إطار أبيض لزر "عرض السلة" داخل السلة العائمة */
salla-add-product-toast .s-add-product-toast-actions salla-button .s-button-btn,
.s-add-product-toast a.s-button-gray-outline,
.s-add-product-toast .s-button-gray-outline {
    border: 1px solid #ffffff !important;
}

/* ==========================================
   2. حقول الإدخال والأزرار الثانوية (إرفاق ملف / ملاحظة)
   ========================================== */
select, input, textarea, .form-control, .select2-selection, div[class*="select"],
.btn-light, .btn-secondary, .s-btn-light, button[class*="light"], .btn-default,
.btn-tab, .btn--collapse, button.btn-tab.btn--collapse {
    background-color: #161f33 !important;
    color: #ffffff !important;
    border: 1px solid #2a3447 !important;
}

.btn-tab *, .btn--collapse * {
    color: #ffffff !important;
}

/* ==========================================
   3. ألوان الأيقونات والنصوص في الهيدر والسلة والتنبيهات
   ========================================== */
.s-user-menu-login-btn svg, 
.s-user-menu-login-btn path,
.s-cart-summary-wrapper *, 
.s-cart-summary-total *,
salla-cart-summary-card *,
salla-add-product-toast *,
.s-add-product-toast * {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* ألوان القائمة الرئيسية عند اللمس فقط */
.main-menu a:hover,
.main-menu a:hover *,
.main-menu li:hover > a,
.main-menu li:hover > a * {
    color: #f9ee58 !important;
    fill: #f9ee58 !important;
}

/* ==========================================
   4. أزرار التنقل (دائرة الأسهم لليمين واليسار)
   ========================================== */
.s-slider-nav-arrow,
button.s-slider-nav-arrow,
.s-slider-prev,
.s-slider-next {
    background-color: #101522 !important;
    border: 1px solid #f9ee58 !important;
    color: #f9ee58 !important;
}

.s-slider-nav-arrow *,
button.s-slider-nav-arrow * {
    color: #f9ee58 !important;
    fill: #f9ee58 !important;
}

/* ==========================================
   5. زر المفضلة (دائرة الإعجاب: خلفية بيضاء ورمز غامق / وعند اللمس خلفية أصفر)
   ========================================== */
.s-product-card-wishlist-btn {
    background-color: #ffffff !important;
    border: 1px solid #ffffff !important;
    color: #101522 !important;
}

.s-product-card-wishlist-btn i, 
.s-product-card-wishlist-btn svg {
    color: #101522 !important;
    fill: #101522 !important;
}

/* التغيير عند اللمس فقط */
.s-product-card-wishlist-btn:hover {
    background-color: #f9ee58 !important;
    border-color: #f9ee58 !important;
}

.s-product-card-wishlist-btn:hover i, 
.s-product-card-wishlist-btn:hover svg {
    color: #101522 !important;
    fill: #101522 !important;
}

/* ==========================================
   6. النصوص والروابط والأزرار الملونة بالكامل
   ========================================== */
.product-container *, .s-product-container *, label, span, p, h1, h2, h3, h4, h5, h6,
.s-product-card-content-title, .s-product-card-content-title a,
.features-slider *, .feature-item *, .features-block * {
    color: #ffffff !important;
}

/* أي نص داخل زر أو أيقونة خلفيتها أصفر بالكامل يكون باللون الغامق */
.s-button-element.s-button-primary,
.s-button-element[class*="primary"],
button[class*="primary"] {
    background-color: #f9ee58 !important;
    border-color: #f9ee58 !important;
    color: #101522 !important;
}

.s-button-element.s-button-primary *,
.s-button-element[class*="primary"] *,
button[class*="primary"] * {
    color: #101522 !important;
}

/* تحويل لون الروابط إلى الأصفر عند اللمس */
a:hover, 
.s-product-card-content-title a:hover, 
.sub-menu a:hover, 
a.slide--cat-entry:hover,
a.slide--cat-entry:hover * {
    color: #f9ee58 !important;
}

/* تغيير خلفية القائمة الجانبية للجوال */
#mobile-menu,
#mobile-menu ul,
.mm-ocd__content {
    background-color: #101522 !important;
}
/* 2. لون نص عنوان القائمة العلوي (للجوال) */
.mm-spn.mm-spn--light {
    color: #ffffff !important;
}



/* إرجاع خلفية نافذة الدخول للون الفاتح لتقرأ النصوص الغامقة بشكل صحيح */
.s-modal-body,
.s-modal-wrapper,
salla-modal .s-modal-body {
  background-color: #081735 !important;
}

/* 1. جعل النصوص والعناوين فوق حقول الإدخال باللون الأصفر */
.s-login-modal-title,
.s-login-modal label {
  color: #ffffff !important; /* اللون الأصفر الخاص بالمتجر */
}

/* 3. تعديل خلفية مربع زر الإغلاق (X) إلى اللون الغامق وتوضيح الرمز */
.s-modal-header,
.s-modal-close,
salla-modal .s-modal-close,
.s-modal-header button {
  background-color: #081735 !important;
  background: #081735 !important;
}