/* Add custom CSS styles below */ 
body, 
.main-wrapper, 
.site-content, 
.app-content {
    background-color: #ffffff !important;
}
.store-header,
#mainnav,
.top-navbar {
    background-color: #0C447C !important;
}

#mainnav .inner,
.main-nav-container {
    background-color: #0C447C !important;
}
.top-navbar,
header.store-header .top-navbar,
.top-navbar .container {
    background-color: #121212 !important;
}

.top-navbar a,
.top-navbar i,
.top-navbar span,
.top-navbar svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}
/* إصلاح أزرار الشراء وإزالة الحواف الزائدة */
salla-button,
salla-add-product-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

salla-button .s-button-element,
salla-add-product-button .s-button-element,
.s-button-btn {
    background: linear-gradient(90deg, #0C447C 0%, #167CE2 100%) !important;
    border: none !important;
    border-radius: 50px !important; /* لضبط انحناء الحواف بانسجام */
    color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

salla-button:hover .s-button-element,
salla-add-product-button:hover .s-button-element,
.s-button-btn:hover {
    background: linear-gradient(90deg, #167CE2 0%, #0C447C 100%) !important;
}
.s-block__title {
    justify-content: center !important;
    text-align: center !important;
}
/* ضبط شبكة المنتجات لتكون في المنتصف مع المحافظة على الحجم الطبيعي */
.s-products-list-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 16px !important; /* المسافة بين الكرتين */
}

/* الحفاظ على حجم كروت سلة الطبيعي وعدم تمددها */
.s-products-list-wrapper > * {
    flex: 0 1 auto !important;
    width: 280px !important; /* أو اترك العرض التلقائي للثيم */
    max-width: 100% !important;
}
/* 1. جعل الفوتر نفسه هو الحاوية الرئيسية باللون والانحناء */
footer.store-footer {
    background-color: #0C447C !important;
    border-radius: 24px !important; /* الانحناء من الأربع جهات */
    overflow: hidden !important; /* يجبر الأبناء أنهم يلتزموا بنفس الانحناء */
    margin-left: 16px !important;
    margin-right: 16px !important;
    margin-bottom: 20px !important;
    padding: 0 !important; /* إلغاء أي حواف داخلية مش مشتركة */
    border: none !important;
}

/* 2. إلغاء أي خلفية أو انحناءات من العناصر الداخلية لتندمج كلياً */
.store-footer__inner,
footer.store-footer > div,
footer.store-footer .sub-footer {
    background-color: transparent !important;
    background: transparent !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* 3. إضافة خط فاصل خفيف جداً بين الجزءين لو تحب */
footer.store-footer > div:last-child {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 4. توحيد ألوان النصوص والأيقونات */
footer.store-footer * {
    color: #ffffff !important;
}
/* إخفاء كلمة "قيم" واستبدالها باللوجو */
.store-footer__inner a h3 {
    font-size: 0 !important; /* إخفاء النص الاصلي */
    color: transparent !important;
    display: inline-block !important;
    width: 140px !important; /* عرض اللوجو */
    height: 50px !important; /* ارتفاع اللوجو */
    background-image: url('https://cdn.files.salla.network/other/498640463/9ddc91a0-9aec-4181-abfa-7a6807de2eb1-original.webp') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center right !important;
}
/* تغيير لون وروابط القائمة الرئيسية على الكمبيوتر فقط */
@media (min-width: 1024px) {
    ul.main-menu li a,
    ul.main-menu li a span {
        color: #ffffff !important;
    }
}
/* تغيير ألوان أيقونات السلة والحساب للون الأبيض على الكمبيوتر فقط */
@media (min-width: 1024px) {
    /* تغيير لون أيقونة الحساب ومحتواها */
    .s-user-menu-login-btn,
    .s-user-menu-login-btn svg,
    .s-user-menu-login-btn path,
    salla-user-menu * {
        color: #ffffff !important;
        fill: #ffffff !important;
        stroke: #ffffff !important;
    }

    /* تغيير لون أيقونة السلة ومحتواها والعداد */
    salla-cart-summary,
    salla-cart-summary *,
    salla-cart-summary svg,
    salla-cart-summary path {
        color: #ffffff !important;
        fill: #ffffff !important;
        stroke: #ffffff !important;
    }
}