/* 1. تلوين خلفية الموقع والصناديق بالكامل ومنع البياض */
body, .main-wrapper, #app, .tab-content, .tab-pane, 
.product-description-container, .tabby-promo-wrapper {
    background-color: #262a2d !important;
    border: none !important;
}

/* 2. تنسيق الأزرار (معلومات المنتج / وصف المنتج) */
.nav-link {
    background-color: #3e4449 !important; /* لون الزر غير المختار (رمادي) */
    color: #ffffff !important;           /* نص أبيض */
    border: 1px solid #444 !important;
    border-bottom: none !important;      /* إزالة الحد السفلي للالتصاق */
    margin-bottom: 0 !important;         /* إلغاء المسافة السفلية */
    border-radius: 8px 8px 0 0 !important; /* زوايا دائرية من الأعلى فقط */
    padding: 10px 20px !important;
}

/* 3. تنسيق الزر النشط (Active) المختار حالياً */
.nav-link.active {
    background-color: #f4c134 !important; /* لون أصفر */
    color: #000000 !important;           /* نص أسود للوضوح */
    border-color: #f4c134 !important;
}

/* إجبار النص داخل الزر النشط على اللون الأسود */
.nav-link.active, #buy-tab.active, #description-tab.active {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* 4. ربط الأزرار بالصندوق (إزالة الفراغ بين الـ nav والـ tab-content) */
.nav-tabs {
    border-bottom: 2px solid #f4c134 !important; /* خط أصفر يفصل الأزرار عن المحتوى */
    margin-bottom: 0 !important;
}

.tab-content {
    border: 1px solid #444 !important;
    padding: 20px !important;
    border-top: none !important; /* لتبدو متصلة بالخط الأصفر */
}

/* 5. ضمان أن كل النصوص داخل الوصف بيضاء وصريحة */
.tab-pane, .tab-pane *, #description, #buy {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

/* 6. زر أضف للسلة (الأصفر الكبير) */
.btn-primary, .add-to-cart-btn {
    background-color: #f4c134 !important;
    color: #000000 !important;
    border: none !important;
}
/* تغيير لون أسماء المنتجات */
.product-card__title, 
.product-card__title a, 
.product-item__title {
    color: #ffffff !important;
}

/* تغيير لون الأسعار */
.product-card__price, 
.product-item__price, 
.price-wrapper {
    color: #ffffff !important;
}

/* تغيير لون النصوص العامة والفقرات */
p, span, .text-muted {
    color: #ffffff !important;
}

/* تغيير لون العناوين الرئيسية */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
}
/* 1. تنسيق الأزرار (معلومات المنتج ووصف المنتج) */
.nav-tabs .nav-link {
    background-color: #3e4449 !important; /* لون الزر غير النشط */
    color: #ffffff !important;           /* نص أبيض للزر غير النشط */
    border: 1px solid #444 !important;
    border-bottom: none !important;      /* للالتصاق بالصندوق بالأسفل */
    margin-bottom: 0 !important;
}

/* 2. الزر النشط (Active): خلفية صفراء وكتابة فضية */
.nav-tabs .nav-link.active {
    background-color: #f4c134 !important; /* لون الزر أصفر */
    color: #C0C0C0 !important;           /* لون الكتابة فضي (Silver) */
    border-color: #f4c134 !important;
    font-weight: bold !important;
}

/* 3. تنظيف محتوى الصندوق بالأسفل (وصف المنتج ومعلومات المنتج) */
.product-card, .card-header, .card-body, .tab-content {
    background-color: #262a2d !important;
    border: none !important;
    box-shadow: none !important;
}

/* 4. إجبار نصوص الوصف المكتوبة بداخل HTML على التحول للأبيض */
/* ملاحظة: كود الـ HTML الذي أرسلته يحتوي على ألوان سوداء وخلفيات بيضاء ثابتة، هذا الكود سيلغيها */
#description ul, #description li, #description span, #description strong {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* 5. تنسيق نصوص معلومات المنتج (الوزن ورقم SKU) */
.product-title, .product-sku, .product-weight {
    color: #ffffff !important;
}

/* 6. تنسيق قائمة الكمية (Select) لتبدو داكنة */
.select-quantity {
    background-color: #3e4449 !important;
    color: #ffffff !important;
    border: 1px solid #f4c134 !important;
    padding: 5px !important;
    border-radius: 4px !important;
}

/* 7. زر "أضف للسلة" أو "إرسال" (إذا أردته أصفر بداخل فضي) */
.btn-primary, .btn-send-notify {
    background-color: #f4c134 !important;
    color: #C0C0C0 !important;
    border: none !important;
    font-weight: bold !important;
}
/* تغيير خلفية شارة (كمية محدودة) ولون النص والأيقونة */
.badge-name {
    background-color: #f4c134 !important; /* اللون الأصفر */
    border-color: #f4c134 !important;
    color: #262a2d !important;           /* لون النص (داكن للوضوح) */
}

/* لتغيير لون الأيقونة (SVG) بداخل الشارة */
.badge-name svg {
    fill: #262a2d !important;
}

/* للتأكد من أن النص بداخل الـ span يتغير أيضاً */
.badge-name span {
    color: #262a2d !important;
}
/* 1. جعل الخلفية شفافة ومضببة في كل الموقع */
.search-header, 
.header-theme-bg-primary {
    background-color: rgba(38, 42, 45, 0.5) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: none !important;
}

/* 2. إزالة أي طبقات سوداء داخلية تعيق الشفافية */
.div-bg-absolute, 
.menu-header-theme-bg-primary,
.search-header-bar {
    background: transparent !important;
    background-color: transparent !important;
}

/* 3. في "الصفحة الرئيسية" فقط: اجعل الناف بار يمر فوق الفيديو */
body.template-index .search-header, 
body.page-home .search-header {
    position: absolute !important;
    width: 100% !important;
    top: 0 !important;
    z-index: 1000 !important;
}

/* 4. في "صفحة المنتج": اجعل الناف بار طبيعي (يدفع الصورة للأسفل ولا يغطيها) */
body.template-product .search-header, 
body.page-product .search-header,
.product-details-page .search-header {
    position: relative !important; /* هذا السطر يمنع تغطية صورة المنتج */
    background-color: #262a2d !important; /* خلفية ثابتة لسهولة القراءة في صفحة المنتج */
}

/* 5. رفع الفيديو في الرئيسية ليدخل تحت الناف بار */
body.template-index video, 
body.page-home video {
    margin-top: -95px !important;
}
/* 1. تجهيز الحاوية لاستقبال الأسهم الوهمية */
.categories-slider-wrapper {
    position: relative !important;
    padding: 0 50px !important;
}

/* 2. رسم السهم الأيمن */
.categories-slider-wrapper::after {
    content: '→' !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 35px !important;
    height: 35px !important;
    background: #f4c134 !important; /* اللون الأصفر */
    color: #000 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    font-weight: bold !important;
    z-index: 99 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
    pointer-events: none !important; /* لكي لا يعيق اللمس */
}

/* 3. رسم السهم الأيسر */
.categories-slider-wrapper::before {
    content: '←' !important;
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 35px !important;
    height: 35px !important;
    background: #f4c134 !important;
    color: #000 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    font-weight: bold !important;
    z-index: 99 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
    pointer-events: none !important;
}

/* 4. تنسيق النصوص أسفل الأقسام */
.categories-slider-wrapper a {
    text-decoration: none !important;
    color: #fff !important;
    font-weight: bold !important;
    font-size: 14px !important;
    margin-top: 10px !important;
    display: block !important;
}
.category-item img {
    border-radius: 15px !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    border: 1px solid #f4c134 !important; /* إطار أصفر نحيف */
}
/* تبييض وصف المنتج بعد التنظيف */
.product-description, 
.product-description p, 
.product-description span, 
.product-description strong {
    color: #ffffff !important;
    font-size: 16px !important; /* تكبير الخط قليلاً لراحة العين */
    line-height: 1.6 !important; /* تحسين المسافات بين الأسطر */
}

/* تبييض زر أضف للسلة (نص وأيقونة) */
.btn-add-to-cart, 
.btn-add-to-cart * {
    color: #ffffff !important;
}
/* استهداف زر أضف للسلة بكل كلاساته الممكنة */
.product-card-add-to-cart,
.btn-addtocart,
.btn-primary.product-card-add-to-cart {
    color: #ffffff !important;
    fill: #ffffff !important; /* لتلوين الأيقونة */
}

/* التأكد من تلوين أي أيقونة SVG داخل الزر */
.btn-addtocart svg, 
.btn-addtocart svg path {
    stroke: #ffffff !important;
    fill: none !important; /* لأن الأيقونة تعتمد على الخط الخارجي Stroke */
}

/* حالة تمرير الماوس (Hover) ليبقى أبيض */
.btn-addtocart:hover {
    color: #ffffff !important;
    opacity: 0.9;
}
/* 1. إضافة إطار حول بطاقة المنتج */
.product-card, .product-item, .s-product-card {
    border: 1px solid rgba(244, 193, 52, 0.3) !important; /* إطار أصفر خفيف وشفاف */
    border-radius: 15px !important; /* زوايا منحنية */
    padding: 10px !important;
    transition: all 0.3s ease !important; /* حركة ناعمة عند مرور الماوس */
    background-color: #1a1a1a !important; /* لون خلفية البطاقة (تأكد أنه مناسب لموقعك) */
    overflow: hidden !important;
}

/* 2. تأثير عند مرور الماوس (Hover) ليصبح الإطار أوضح */
.product-card:hover, .product-item:hover, .s-product-card:hover {
    border-color: #f4c134 !important; /* يصبح الإطار أصفر فاقع */
    box-shadow: 0 5px 15px rgba(244, 193, 52, 0.2) !important; /* ظل أصفر خفيف */
    transform: translateY(-5px) !important; /* رفعة بسيطة للمنتج */
}

/* 3. تأكيد بياض نص "أضف للسلة" داخل البطاقة */
.product-card-add-to-cart, 
.btn-addtocart {
    color: #ffffff !important;
    text-decoration: none !important;
}
/* 1. إظهار حاوية المسار وتنسيق مكانها */
.breadcrumb, .s-breadcrumb {
    display: flex !important;
    background: transparent !important;
    padding: 10px 0 !important;
    margin-bottom: 20px !important;
    list-style: none !important;
    justify-content: flex-start !important; /* لجعله يبدأ من اليمين */
}

/* 2. تلوين النصوص باللون الأبيض */
.breadcrumb a, .s-breadcrumb a,
.breadcrumb li, .s-breadcrumb li {
    color: #ffffff !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

/* 3. تلوين الفواصل (أيقونة > أو /) باللون الأصفر الذهبي */
.breadcrumb li + li::before, 
.s-breadcrumb li + li::before {
    content: ">" !important;
    padding: 0 10px !important;
    color: #f4c134 !important; /* اللون الأصفر الخاص بك */
    font-weight: bold !important;
}

/* 4. تمييز اسم المنتج الأخير (المكان الحالي) بلون مختلف قليلاً */
.breadcrumb li:last-child, 
.s-breadcrumb li:last-child {
    color: #f4c134 !important;
    opacity: 0.8;
}

/* 5. تأثير عند تمرير الماوس على الروابط */
.breadcrumb a:hover, .s-breadcrumb a:hover {
    color: #f4c134 !important;
    text-decoration: underline !important;
}
/* إصلاح أزرار التصفية والترتيب التي تأثرت بالكود السابق */
.filter-button, 
.sort-button, 
.s-filter-button,
.s-button-element {
    background-color: #1a1a1a !important; /* خلفية غامقة للأزرار */
    color: #ffffff !important; /* أيقونة بيضاء */
    border: 1px solid rgba(244, 193, 52, 0.5) !important; /* إطار أصفر خفيف لتمييزها */
}

/* التأكد من أن الأيقونات (SVG) داخل هذه الأزرار تظهر باللون الأصفر */
.filter-button svg, 
.sort-button svg,
.filter-button i,
.sort-button i {
    fill: #f4c134 !important;
    color: #f4c134 !important;
}

/* منع تداخل اللون الأبيض مع خلفية هذه الأزرار تحديداً */
div[class*="filter"] button, 
div[class*="sort"] button {
    background-color: #1a1a1a !important;
}
/* 1. الغاء الايطار الابيض الخارجي وجعل الخلفية شفافة */
.testimonials-customer-card {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important; /* ازالة الظل الخارجي */
    padding: 0 !important;
}

/* 2. تنسيق البوكس الاصفر الداخلي (كما في الصورة تماما) */
.testimonials-customer-card .card-body {
    background-color: #f4c134 !important; /* لون الخلفية الاصفر */
    border-radius: 20px !important; /* انحناء الزوايا */
    padding: 25px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important; /* ظل خفيف للبوكس الاصفر */
}

/* 3. جعل النجوم رمادي غامق جدا للوضوح */
.star-rating svg path {
    fill: #4a4a4a !important; /* رمادي غامق جدا */
}

/* 4. تبييض الفاصلة (الاقتباس) والنص والاسم */
.comas svg path,
.testimonials-customer-text, 
.testimonials-customer-name {
    color: #ffffff !important;
    fill: #ffffff !important;
}
/* استهداف حاوية القائمة الجانبية المنسدلة */
.dropdown-menu.side-menu, 
.category-side-list,
[class*="side-nav"], 
[class*="right-menu"] {
    background-color: #ffffff !important; /* توحيد الخلفية باللون الأصفر */
    border: none !important; /* إزالة أي إطارات بيضاء */
    border-radius: 12px !important; /* تنعيم الحواف */
    padding: 10px !important;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.2) !important; /* ظل خفيف لليمين */
}

/* تعديل العناصر الداخلية للقائمة (النصوص) */
.side-menu a, 
.category-side-list li a,
[class*="side-nav"] li a {
    color: #000000 !important; /* نص أسود للوضوح فوق الأصفر */
    font-weight: bold !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important; /* خط فاصل بسيط جدًا */
    display: block !important;
    padding: 12px 15px !important;
    text-align: right !important; /* محاذاة النص لليمين */
}

/* إلغاء أي خلفية بيضاء تظهر عند رأس القائمة */
.side-menu-header, 
[class*="menu-title"] {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* تأثير التمرير (Hover) */
.side-menu a:hover, 
[class*="side-nav"] a:hover {
    background-color: #e5b32a !important; /* درجة أغمق قليلًا عند اللمس */
    color: #000000 !important;
    border-radius: 8px !important;
}
/* استهداف مباشر للعنوان بناءً على الكود الذي أرفقته */
h2.h2.fw-bold.mb-0 {
    text-align: center !important;
    color: #f4c134 !important; /* اللون الأصفر */
    width: 100% !important;
    display: block !important;
    margin: 20px auto !important;
}

/* في حال كان العنوان داخل حاوية (div) تمنعه من التوسط */
h2.h2.fw-bold.mb-0 {
    position: relative !important;
    right: 0 !important;
    left: 0 !important;
}
/* 1. تكبير الدائرة والأيقونة بشكل ملحوظ */
.box-feat img {
    width: 140px !important;   /* حجم الدائرة */
    height: 140px !important;
    padding: 20px !important;  /* مساحة داخلية للأيقونة */
    background: rgba(244, 193, 52, 0.1) !important; /* خلفية صفراء خفيفة جداً */
    border-radius: 50% !important;
    transition: all 0.4s ease-in-out !important;
    animation: iconFloat 3s infinite ease-in-out !important; /* أنميشن طفو ناعم */
}

/* 2. تكبير النص (العناوين) */
.box-feat h3 {
    font-size: 1.8rem !important; /* خط كبير وعريض */
    font-weight: 900 !important;
    margin-top: 20px !important;
    color: #1a1a1a !important;
}

/* 3. أنميشن الطفو المستمر */
@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); } /* ترتفع للأعلى بوضوح */
}

/* 4. تأثير الماوس (Hover) */
.box-feat:hover img {
    background: #f4c134 !important; /* تتحول للأصفر الكامل */
    transform: scale(1.15) !important; /* تكبر زيادة عند اللمس */
    box-shadow: 0 15px 30px rgba(244, 193, 52, 0.3) !important;
}

/* ضبط الحجم للجوال لضمان عدم تداخل العناصر */
@media (max-width: 768px) {
    .box-feat img {
        width: 100px !important;
        height: 100px !important;
    }
    .box-feat h3 {
        font-size: 1.4rem !important;
    }
}
/* 1. تكبير الدائرة والأيقونة بشكل ملحوظ */
.box-feat img {
    width: 140px !important;   /* حجم الدائرة */
    height: 140px !important;
    padding: 20px !important;  /* مساحة داخلية للأيقونة */
    background: rgba(244, 193, 52, 0.1) !important; /* خلفية صفراء خفيفة جداً */
    border-radius: 50% !important;
    transition: all 0.4s ease-in-out !important;
    animation: iconFloat 3s infinite ease-in-out !important; /* أنميشن طفو ناعم */
}

/* 2. تكبير النص (العناوين) */
.box-feat h3 {
    font-size: 4rem !important; /* خط كبير وعريض */
    font-weight: 900 !important;
    margin-top: 20px !important;
    color: #1a1a1a !important;
}

/* 3. أنميشن الطفو المستمر */
@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); } /* ترتفع للأعلى بوضوح */
}

/* 4. تأثير الماوس (Hover) */
.box-feat:hover img {
    background: #f4c134 !important; /* تتحول للأصفر الكامل */
    transform: scale(1.15) !important; /* تكبر زيادة عند اللمس */
    box-shadow: 0 15px 30px rgba(244, 193, 52, 0.3) !important;
}

/* ضبط الحجم للجوال لضمان عدم تداخل العناصر */
@media (max-width: 968px) {
    .box-feat img {
        width: 150px !important;
        height: 150px !important;
    }
    .box-feat h3 {
        font-size: 2rem !important;
    }
}
/* تلوين أسماء التصنيفات باللون الأصفر في صفحة جميع التصنيفات */
.btn-link-categories span, 
.btn-link-categories,
.card-header-category a span {
    color: #f4c134 !important; /* اللون الأصفر الذهبي الخاص بمتجرك */
    font-weight: bold !important; /* جعل الخط عريضاً لزيادة الوضوح */
    text-decoration: none !important; /* إزالة أي خط تحت النص */
}

/* تغيير اللون عند تمرير الماوس (Hover) ليكون تفاعلياً */
.btn-link-categories:hover span {
    color: #e5b32a !important; /* درجة أغمق قليلاً عند اللمس */
}

/* إذا أردت إزالة الخلفية البيضاء أو الإطار حول النص وتوحيد الشكل */
.category-second-card .card-content {
    background-color: transparent !important;
    border: none !important;
}
/* 1. تلوين صناديق الخيارات بالأصفر وتكبير النص الأسود */
#product-custom-user-option-fields .form-group,
#product-custom-user-option-fields .form-group div,
#product-custom-user-option-fields .form-group label {
    background-color: #f4c134 !important;
    background: #f4c134 !important;
    border: none !important;
}

.custom-checkbox-label, 
.custom-checkbox-label span,
.text-color-primary {
    color: #000000 !important; /* نص أسود */
    font-size: 1.2rem !important; /* تكبير النص */
    font-weight: 900 !important; /* نص عريض جداً */
}

/* 2. تنسيق مربع التحديد (Checkmark) ليصبح أسود عند الاختيار */
.custom-checkmark {
    background-color: #ffffff !important;
    border: 2px solid #000000 !important;
    border-radius: 5px !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-block !important;
    position: relative !important;
}

.checkbox-container input:checked ~ .custom-checkmark {
    background-color: #000000 !important; /* مربع أسود سادة */
    border-color: #000000 !important;
}

.custom-checkmark:after {
    content: "" !important;
    position: absolute !important;
    display: none !important;
    left: 8px !important;
    top: 3px !important;
    width: 7px !important;
    height: 13px !important;
    border: solid #ffffff !important; /* علامة صح بيضاء داخل المربع الأسود */
    border-width: 0 3px 3px 0 !important;
    transform: rotate(45deg) !important;
}

.checkbox-container input:checked ~ .custom-checkmark:after {
    display: block !important;
}

/* 3. جعل مربع الكمية باللون الأصفر الكامل */
.select-quantity {
    background-color: #f4c134 !important; /* خلفية صفراء */
    color: #000000 !important; /* رقم أسود */
    border: 2px solid #f4c134 !important;
    border-radius: 10px !important;
    width: 100% !important;
    height: 50px !important;
    font-size: 1.3rem !important;
    font-weight: bold !important;
    text-align: center !important;
    appearance: none !important; /* إخفاء سهم المتصفح الافتراضي */
    -webkit-appearance: none !important;
}

/* تحسين شكل حاوية الكمية */
.select-quantity-div .form-group {
    background-color: #f4c134 !important;
    border-radius: 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 4. تنظيف التصميم */
.form-group {
    margin-bottom: 15px !important;
    border-radius: 12px !important;
}
/* تنسيق القائمة المنسدلة (العدد) */
select.form-control, 
select.product-custom-user-option-fields-group {
    background-color: #f4c134 !important; /* خلفية صفراء */
    color: #000000 !important; /* نص أسود */
    font-weight: 900 !important; /* نص عريض */
    font-size: 1.1rem !important; /* تكبير الخط */
    border: 2px solid #f4c134 !important;
    border-radius: 10px !important;
    padding: 10px !important;
    cursor: pointer !important;
}

/* تنسيق الخيارات داخل القائمة عند فتحها */
select.form-control option, 
select.product-custom-user-option-fields-group option {
    background-color: #ffffff !important; /* خلفية الخيارات بيضاء لسهولة القراءة */
    color: #000000 !important;
    font-weight: bold !important;
}

/* تكبير عنوان الحقل (العدد) */
label[for="product-custom-user-option-fields"] span,
.text-color-primary {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
}
/* 1. تنسيق النافذة المنبثقة للتصفية */
.filter-modal-content, 
.modal-content {
    background-color: #1a1a1a !important; /* خلفية داكنة */
    border-radius: 15px !important;
    border: 1px solid #f4c134 !important;
    color: #ffffff !important;
}

/* 2. تنسيق حقول الإدخال (من - إلى) */
.filter-modal-content input,
.modal-content input {
    background-color: #f4c134 !important; /* خلفية صفراء للحقول */
    color: #000000 !important; /* نص أسود */
    border: none !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    padding: 10px !important;
}

/* 3. تنسيق زر "حفظ" (جعلته أصفر بنص أسود) */
.btn-save-filter, 
.modal-content .btn-primary,
button[type="submit"].btn-block {
    background-color: #f4c134 !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 50px !important; /* شكل كبسولة */
    font-weight: 900 !important;
    padding: 10px 30px !important;
    transition: 0.3s !important;
}

.btn-save-filter:hover {
    transform: scale(1.05) !important;
    background-color: #e5b32a !important;
}

/* 4. تنسيق زر "مسح" (جعلته أسود بإطار أصفر) */
.btn-clear-filter,
.modal-content .btn-secondary,
.btn-outline-primary {
    background-color: #000000 !important;
    color: #f4c134 !important;
    border: 2px solid #f4c134 !important;
    border-radius: 50px !important;
    font-weight: bold !important;
    padding: 10px 30px !important;
}

/* 5. تنسيق نصوص العناوين داخل النافذة */
.modal-content label, 
.modal-content span {
    color: #ffffff !important;
    font-weight: bold !important;
}

/* 6. تحسين شكل علامة "عرض المخفضة فقط" */
.custom-control-label::before {
    border-color: #f4c134 !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #f4c134 !important;
    border-color: #f4c134 !important;
}
/* تنسيق زر المفضلة (القلب) */
.product-card .wishlist-btn, 
.add-to-wishlist, 
.wishlist-icon-container {
    background-color: #f4c134 !important; /* خلفية الدائرة صفراء */
    color: #000000 !important; /* لون القلب أسود */
    border: none !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important; /* ظل خفيف ليبرز فوق الصورة */
    transition: transform 0.2s ease !important;
}

/* تأثير عند وضع الماوس على القلب */
.product-card .wishlist-btn:hover {
    transform: scale(1.1) !important;
    background-color: #e5b32a !important; /* درجة أغمق قليلاً */
}

/* لضمان تلوين الأيقونة الداخلية (القلب) */
.product-card .wishlist-btn i, 
.product-card .wishlist-btn svg {
    color: #000000 !important;
    fill: #000000 !important;
}