/* Add custom CSS styles below */ 

/* ==========================================
   1. الخلفية العامة للموقع والفوتر (أسود ملكي نقي)
   ========================================== */
html, body, body.index, main, #app, .main-content, .page-wrapper, .content-wrapper, section,
.store-footer, .store-footer__inner, footer {
    background-color: #000000 !important;
}

/* ==========================================
   2. حل مشكلة الأطراف البيضاء على جوانب الهيدر العلوي (Desktop)
   ========================================== */
header, 
salla-header, 
.store-header, 
.header-wrapper, 
.top-nav, 
[class*="header"] {
    background-color: #000000 !important;
}

/* إجبار نصوص الهيدر والمنيو العلوي على اللون الأبيض */
.store-header *, [class*="header"] * {
    color: #ffffff !important;
}

/* ==========================================
   3. ضبط كروت المنتجات (اسم المنتج أبيض ناصع + خلفية داكنة)
   ========================================== */
/* تحويل خلفية الكرت للأسود الداكن */
.s-product-card-entry, .s-product-card-content {
    background-color: #101010 !important;
    border: 1px solid #222222 !important;
}

/* إجبار اسم المنتج داخل الكروت على اللون الأبيض الناصع ليظهر بوضوح */
.s-product-card-title, 
.s-product-card-title a, 
.s-product-card-entry h3, 
.s-product-card-entry h3 a,
h3.s-product-card-title,
.s-product-card-content a,
.s-product-card-content span {
    color: #ffffff !important;
}

/* ==========================================
   4. حل مشكلة المربعات البيضاء داخل صفحة المنتج الداخلي
   ========================================== */
/* تحويل صناديق الخيارات والمقاسات والكمية من الأبيض إلى الأسود */
salla-product-options, 
.s-product-options, 
.s-product-options-wrapper, 
.s-quantity-selector, 
salla-quantity-input,
.s-box, 
.bg-white,
.product-single-details,
.s-product-options-option {
    background-color: #111111 !important; /* أسود داكن متناسق */
    background: #111111 !important;
    border-color: #222222 !important;
}

/* جعل كل النصوص والعناوين والأسعار داخل صفحة المنتج باللون الأبيض */
.product-category, 
.product-main-title, 
.product__title, 
.s-product-options-title, 
.s-option-label, 
label, 
.text-gray-600, 
.text-gray-700,
.s-product-options *, 
.s-quantity-selector * {
    color: #ffffff !important;
}

/* ==========================================
   5. حماية أزرار "إضافة للسلة" (تثبيت اللون الأصفر الذهبي والكتابة البيضاء)
   ========================================== */
.s-product-card-button, 
.s-button-primary,
.s-button-primary-outline,
salla-button .s-btn-primary,
.s-btn-primary,
.s-button-wrap button,
[class*="add-to-cart"] {
    background-color: #E2B13E !important; /* لونك الذهبي المعتمد */
    background: #E2B13E !important;
    border-color: #E2B13E !important;
    color: #ffffff !important; /* نص أبيض داخل الزر */
    opacity: 1 !important;
}

/* إجبار النصوص والأيقونات داخل أزرار السلة على اللون الأبيض دائماً */
.s-product-card-button *, 
.s-button-primary *, 
.s-button-primary-outline *,
salla-button *,
.s-btn-primary *,
.s-button-wrap button * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ==========================================
   6. الفوتر ونصوصه (تثبيت اللون الأسود والنصوص البيضاء)
   ========================================== */
.store-footer *, .store-footer__inner *, footer * {
    color: #ffffff !important;
}
.store-footer svg, .store-footer__inner svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* ==========================================
   7. تنسيقات متجرك الأصلية الخاصة بالبنرات والأبعاد
   ========================================== */
.navbar-brand img { max-height: 5rem; }

body.index header.store-header + section.s-block.s-block--fixed-banner {
    margin-top: 0 !important;
}
body.index salla-slider.photos-slider .swiper {
    padding-bottom: 0 !important;
}
[dir=rtl] .carousel-slider .swiper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
section.s-block.s-block--photos-slider {
    margin-top: 0 !important;
}
section.s-block.s-block--photos-slider img {
    border-radius: 0 !important;
}
section.s-block.s-block--photos-slider .swiper-slide {
    margin: 0 !important;
    padding: 0 !important; 
    width: 100% !important;
    border-radius: 0 !important;
}

.s-products-slider-card {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}
.s-product-card-image {
    background-color: transparent !important;
}
.s-slider-nav-arrow {
    border-color: #6D4937 !important;
    background-color: #6D4937 !important;
}
.s-slider-nav-arrow svg, .s-slider-nav-arrow:not(:disabled):hover svg {
    fill: #ffffff !important;
}
.product-index-offers .s-products-list-vertical-cards,
.product-index .s-products-list-vertical-cards {
    margin: 0.2rem; 
}

.s-block--fixed-banner .container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.banner--fixed img {
    border-radius: 0 !important;
    background-color: transparent !important;
}

section.s-block.s-block--banners.container div.grid {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
section.s-block.s-block--banners.container div.grid a.banner-entry {
    width: 20%;
    background-color: transparent !important;
    border-radius: 0 !important;
    height: 375px !important;
}
@media(max-width: 767px) {
    section.s-block.s-block--banners.container div.grid a.banner-entry {
        width: 31%;
        height: 180px !important;
    }
    .store-footer__inner * {
        justify-content: center;
        text-align: center;
    }	
}
.banner-entry > div {
    background-size: contain !important;
    background-repeat: no-repeat;
}

h1.text-xl.md\:text-2xl.leading-10.font-bold.mb-6.text-gray-800 {
    color: white;
}

p.font-bold.text-xl.inline-block {
    color: white;
}

h2.total-price.font-bold.text-xl.inline-block {
    color: white;
}


body,
#app,
.app-inner,
main#main-content,
.s-block--best-offers,
.s-block,
.swiper-slide,
salla-products-slider,
.container {
    background-color: #CFC1B4 !important;
}

salla-products-slider::part(base),
salla-products-slider::part(wrapper),
.s-block--best-offers .container {
    background-color: #CFC1B4 !important;
}


html, body, body.index, main, #app, .main-content, .page-wrapper, .content-wrapper, section, .store-footer, .store-footer__inner, footer {
    background-color: #CFC1B4 !important;
}

#mainnav, .main-nav-container {
    background-color: #CFC1B4 !important;
}

header, salla-header, .store-header, .header-wrapper, .top-nav, [class*="header"] {
    background-color: #CFC1B4 !important;
}


salla-product-options, .s-product-options, .s-product-options-wrapper, .s-quantity-selector, salla-quantity-input, .s-box, .bg-white, .product-single-details, .s-product-options-option {
    background-color: #111111 !important;
    background: #CFC1B4 !important;
    border-color: #222222 !important;
}

.s-comments.s-comments-product {
    background-color: #CFC1B4;
}


h4.s-product-card-price {
    color: white !important;
}


button.s-product-card-wishlist-btn.animated.not-added.un-favorited.s-button-element.s-button-icon.s-button-outline.s-button-light-outline.s-button-loader-center {
    visibility: hidden;
}