body[style] {
    background-color: #26283a !important;
    color: white !important;
}

.header-inner.inner.bg-white {
    background-color: #1b1d2c !important;
}


/* الكود اللي هيبيض كل حاجة في منطقة السلة والبحث */
#s-cart-icon, 
#s-cart-icon *, 
.s-cart-summary-count,      /* الكلاس اللي إنت واقف عليه في الصورة */
.s-cart-summary-total,      /* إجمالي السعر */
.header-inner i,            /* أيقونات البحث والقائمة (FontAwesome) */
.header-inner svg           /* أيقونات الـ SVG في الهيدر */
{
    color: #ffffff !important;
    fill: #ffffff !important;
    border-color: #ffffff !important;
}



/* 1. تغيير متغيرات الألوان الأساسية للفوتر من الجذور */
:root {
    --footer-bg: #1b1d2c !important;
}
/* 2. استهداف الكلاس اللي أنت واقف عليه في الصورة وإجباره على اللون الجديد */
.store-footer__inner.da-bgm.has-custom-bg {
    background-color: #1b1d2c !important;
    background: #1b1d2c !important;
    color: #ffffff !important;
}
/* استهداف أيقونات السوشيال ميديا في الفوتر وجعلها سوداء */
.s-social-link a svg {
    color: black !important;
    fill: black !important;
}
/* استهداف أيقونات التواصل (واتساب، هاتف، ايميل) وجعلها سوداء */
.s-contacts-icon {
    color: black !important;
}





/* 1. استهداف كلاس الخلفية اللي إنت حددته في الصورة وجعله غامق إجبارياً */
.faqs-list__item.bg-gray-100 {
    background-color: #1b1d2c !important;
    background: #1b1d2c !important;
}

/* 2. تبييض نصوص الأسئلة والأجوبة داخل الصناديق عشان تبان */
.faqs-list__item.bg-gray-100 label, 
.faqs-list__item.bg-gray-100 .answer-container,
.faqs-list__item.bg-gray-100 * {
    color: #ffffff !important;
}


/* لضمان أن اللون يطبق حتى لو تغيرت حالة الأيقونة */
.s-block--faqs i::before,
.s-block--faqs i {
    color: black !important;
}

/* تبييض العنوان h2 والوصف p في قسم الأسئلة الشائعة */
.s-block__title h2, 
.s-block__title p {
    color: #ffffff !important;
}





/* 1. تغيير خلفية كارت رأي العميل للون الفوتر الغامق */
.s-block--testimonials .bg-white.da-bgg {
    background-color: #1b1d2c !important;
    background: #1b1d2c !important;
}

/* 2. تبييض اسم العميل (h4) ونص الرأي (p) وكل النصوص */
.s-block--testimonials h4, 
.s-block--testimonials p, 
.s-block--testimonials .da-tm {
    color: #ffffff !important;
}



/* خلفية الديفات بلون الفوتر */
.angel-feature {
    background: #1b1d2c !important;
    padding: 20px !important; /* إضافة مساحة داخلية عشان الكلام ميبقاش لازق في الحواف */
    border-radius: 12px !important; /* لمسة جمالية للحواف */
}

/* تبييض كل النصوص اللي جواها */
.angel-feature h4, 
.angel-feature p {
    color: #ffffff !important;
}









/* 1. السيكشن: اللون والارتفاع وتجهيزه لتثبيت العناصر */
.s-block--special-product .da-bgg {
    background-color: #1b1d2c !important;
    height: 160px !important;
    position: relative !important; /* ضروري عشان نثبت الصورة جواه */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 2. الصورة: تثبيت العرض (280px) ورميها في أقصى اليمين */
.s-block--special-product .p_image {
    position: absolute !important;
    right: 0 !important; /* تثبيت في اليمين تماماً */
    top: 0 !important;
    width: 280px !important; /* العرض اللي طلبته */
    height: 100% !important;
    margin: 0 !important;
    z-index: 1 !important;
}

.s-block--special-product .p_image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* عشان الصورة تملا الـ 280px بوضوح */
}

/* 3. الكلام: تبييض ودفعه لجهة اليسار بعيداً عن الصورة */
.s-block--special-product .flex-col.gap-1 {
    width: calc(100% - 280px) !important; /* بياخد باقي المساحة اللي مش فيها صورة */
    margin-right: auto !important; /* بيدفع الكلام لليسار */
    padding: 0 20px !important;
    text-align: right !important;
    z-index: 2 !important;
}

/* 4. تبييض وفرد النصوص */
.s-block--special-product h2, 
.s-block--special-product p {
    color: #ffffff !important;
    white-space: nowrap !important;
    margin: 2px 0 !important;
}




/* كود خاص بالموبايل فقط */
@media (max-width: 768px) {
    /* تظبيط الصورة في الموبايل عشان متغطيش على الكلام */
    .s-block--special-product .p_image {
        width: 40% !important; /* نصغر عرض الصورة شوية في الموبايل */
        height: 100% !important;
        flex-shrink: 0 !important;
    }

    .s-block--special-product .p_image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* تظبيط الكلام عشان ميبقاش متاكل */
    .s-block--special-product .flex-col.gap-1 {
        width: 60% !important; /* نعطي مساحة أكبر للكلام */
        padding: 5px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 2px !important;
    }

}
.special-product .btn--primary {
    background-color: #1b1d1c !important;
    color: #ffffff !important; /* لون النص أبيض */
}




/* الكلاس اللي حددته في صورة الـ Inspect */
.flex.flex-col.bg-gray-100.da-bgg.relative {
    background-color: transparent !important; /* إلغاء اللون الرمادي */
    background-image: none !important;      /* إلغاء أي صورة خلفية */
    --tw-bg-opacity: 0 !important;          /* تصفير الشفافية */
}

/* إلغاء أي لون جاي من كلاس bg-gray-100 في السيكشن ده */
.bg-gray-100 {
    background-color: transparent !important;
}









/* 1. تلوين حاوية التبويبات بالكامل للون الفوتر وتبييض النص */
.tabs-wrapper__product, 
#product-tabs-options {
    background-color: #1b1d2c !important;
    color: #ffffff !important;
}

/* 2. تلوين السلكشن (القائمة اللي بختار منها) للون الفوتر */
.s-product-options-option-content select, 
.s-form-control {
    background-color: #1b1d2c !important; /* لون الفوتر */
    color: #ffffff !important;           /* نص أبيض */
    border: 1px solid #33364d !important; /* حدود خفيفة عشان تبان */
}

/* 3. تلوين العناوين (Label) والوصف الصغير */
.s-product-options-option-label, 
.s-product-options-option-label b, 
.s-product-options-option-label small {
    color: #ffffff !important;
}

/* 4. تلوين حقول الإدخال (الايميل والباسورد والأكواد) */
.s-product-options-text input {
    background-color: #1b1d2c !important;
    color: #ffffff !important;
    border: 1px solid #33364d !important;
}

/* 5. ضبط السعر والوصف ليكون أبيض */
.details__title, .total-price, .details__container span {
    color: #ffffff !important;
}
.tabs-wrapper, 
.details.is-sold {
    background-color: #1b1d2c !important;
}







.details.total {
    background-color: #1b1d2c !important;
}

.btn-tab.btn--collapse, 
textarea[name="notes"] {
    background-color: #1b1d2c !important;
}
.p--features__item {
    background-color: #1b1d2c !important;
}

.p--features__item h3 {
    color: #ffffff !important;
}
.s-block--payment {
    background-color: #1b1d2c !important;
}

/* تلوين أزرار التبويبات (الخيارات، التفاصيل، التقييمات) */
.tabs__product .tab-trigger {
    background-color: #1b1d2c !important;
}
.s-button-primary {
    background-color: #1b1d2c !important;
    border-color: #1b1d2c !important;
}






/* 1. ترتيب الحاوية الكبيرة */
.product-form {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* 2. وضع الشريط في ترتيبه الصحيح ومنع العوم */
.sticky-product-bar {
    position: relative !important; /* لغيت الـ Absolute عشان نشيل الـ Gap */
    order: 2 !important;           /* يظهر بعد الفورم وقبل المدفوعات */
    background-color: #1b1d2c !important;
    margin: 10px 0 !important;
    bottom: auto !important;
    top: auto !important;
}

/* 3. التأكد من أن الملاحظات فوقه والمدفوعات تحته */
.attachments { order: 1 !important; }
.s-block--payment { order: 3 !important; }

/* 4. تبييض الكلام داخل الشريط */
.sticky-product-bar h2, 
.sticky-product-bar .total-price,
.sticky-product-bar span {
    color: #ffffff !important;
}

/* 5. ضبط الزرار */
.sticky-product-bar .s-button-primary {
    background-color: #1b1d2c !important;
    border: 1px solid #ffffff !important;
}





.s-product-card-content {
    background-color: #1b1d2c !important;
}
.s-product-card-wishlist-btn .sicon-heart {
    color: #ffffff !important;
















/* 1. تلوين خلفية القائمة المنسدلة (Select) بلون الفوتر */
.rtl .form-select, 
#product-filter {
    background-color: #1b1d2c !important;
    color: #ffffff !important; /* لون النص داخل القائمة */
    border: 1px solid #33364d !important;
}

/* 2. تلوين الليبل (ترتيب حسب) باللون الأبيض */
label[for="product-filter"] {
    color: #ffffff !important;
}




/* 1. تلوين خلفية عنصر السلة بلون الفوتر */
.cart-item {
    background-color: #1b1d2c !important;
}

/* 2. تبييض العناوين والنصوص داخل عنصر السلة */
.cart-item h1, 
.cart-item h2, 
.cart-item h3, 
.cart-item span,
.cart-item .cart-item-title {
    color: #ffffff !important;
}

/* 3. تبييض أي نصوص إضافية أو تسميات (Labels) داخل السلة */
.cart-item * {
    color: #ffffff !important;
}


/* 2. تلوين الأزرار التي تظهر بلون الأكوامارين (مثل أضف للأمنيات) */
.s-button-element:not(:disabled):not([loading]) {
    background-color: #1b1d2c !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important; /* إطار أبيض لتمييز الزر */
}

}



/* الحل الثاني: استهداف الكلاس المباشر لضمان التغيير */
nav#mobile-menu.mobile-menu.has-custom-bg {
    background-color: #1b1d2c !important;
}

/* تغيير لون النص للأبيض */
#mobile-menu, #mobile-menu * {
    color: #ffffff !important;
}



/* تغيير خلفية قائمة المستخدم */
.s-user-menu-dropdown {
    background-color: #1b1d2c !important;
}

/* تغيير لون النصوص والأيقونات للأبيض داخل قائمة المستخدم */
.s-user-menu-dropdown *,
.s-user-menu-dropdown-header *,
.s-user-menu-dropdown-list-item a {
    color: #ffffff !important;
}

/* تغيير لون اسم المستخدم والترحيب بشكل خاص لضمان الظهور */
.s-user-menu-dropdown-header {
    color: #ffffff !important;
}

/* تغيير لون خلفية قائمة المستخدم "عبدالله البقشي" */
.s-user-menu-dropdown {
    background-color: #1b1d2c !important;
}

/* تغيير لون خلفية بطاقة الطلبات (اللي كانت Aqua) */
.s-table tbody tr.s-table__tr {
    background-color: #1b1d2c !important;
}

/* تحويل كل النصوص والأيقونات داخلهم للون الأبيض */
.s-user-menu-dropdown *, 
.s-table tbody tr.s-table__tr * {
    color: #ffffff !important;
}



.s-modal-body.s-modal-align-middle {
    background-color: #1b1d2c !important;
}
.s-modal-title {
    color: #ffffff !important;
}
/* تغيير خلفية صندوق النص ولون الخط بداخله */
.s-modal-body .s-rating-modal-comment {
    background-color: #1b1d2c !important; /* نفس لون الخلفية */
    color: #ffffff !important;           /* لون النص الأبيض */
    border: 1px solid #3e4152 !important; /* إطار خفيف ليميز الصندوق عن الخلفية */
}

/* تغيير لون النص المؤقت (Placeholder) */
.s-modal-body .s-rating-modal-comment::placeholder {
    color: #a0a0a0 !important; 
    opacity: 1;
}


.s-localization-modal-select {
    background-color: #1b1d2c !important;
    color: white !important; /* لضمان وضوح النص الأبيض فوق الخلفية الغامقة */
}

.s-product-card-category {
    color: black !important;
}

.s-localization-modal-title {
    color: white !important;
}






/* زر أضف للسلة فقط */
.s-product-card-content-footer salla-add-product-button {
  display: block;
  position: relative;
  overflow: hidden;
  /* border-radius: 12px;  <-- حُذفت */
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}

/* حركة الزر */
.s-product-card-content-footer salla-add-product-button:hover {
  transform: translateY(-8px) scale(1.05);
}

/* عند الضغط */
.s-product-card-content-footer salla-add-product-button:active {
  transform: translateY(-3px) scale(0.97);
}

/* لون النص وقت Hover فقط */
.s-product-card-content-footer salla-add-product-button:hover button span {
  color: #000 !important;
  transition: color 0.25s ease;
}

/* لمعة احترافية على Hover */
.s-product-card-content-footer salla-add-product-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(0,0,0,0.15),
    transparent
  );
  transform: rotate(25deg);
  transition: left 0.6s ease;
  pointer-events: none;
  /* border-radius: 0;  <-- تأكد إنه مفيش */
}

.s-product-card-content-footer salla-add-product-button:hover::before {
  left: 120%;
}