/* Add custom CSS styles below */ 
/* تغيير خلفية الفوتر إلى الكحلي */
footer,
.store-footer,
.footer,
.footer-main,
.footer-is-light,
.s-footer,
.salla-footer,
.footer-wrapper {
    background-color: #002248 !important;
}

/* توحيد خلفية جميع أجزاء الفوتر */
footer > div,
.store-footer > div,
.footer-main > div,
.s-footer > div,
.salla-footer > div {
    background-color: #002248 !important;
}

/* جعل النصوص والروابط داخل الفوتر باللون الأبيض */
footer,
footer p,
footer span,
footer a,
footer h1,
footer h2,
footer h3,
footer h4,
.store-footer,
.store-footer p,
.store-footer span,
.store-footer a,
.store-footer h1,
.store-footer h2,
.store-footer h3,
.store-footer h4 {
    color: #ffffff !important;
}

/* لون الأيقونات */
footer svg,
.store-footer svg {
    color: #ffffff !important;
    fill: currentColor;
}

/* تغيير خلفية الهيدر في ثيم سام */
.header-components-inner {
    background-color: #002248 !important;
}

/* توسيع اللون ليغطي كامل عرض الهيدر */
.header-components,
header .container,
header .header-components-inner {
    background-color: #002248 !important;
}

/* لون أيقونة القائمة */
.header-components-inner .sicon-menu {
    color: #ffffff !important;
}

/* لون أيقونات البحث والحساب والسلة */
.header-components-inner .header-icon-button,
.header-components-inner .header-icon-button i,
.header-components-inner .s-cart-summary-total,
.header-components-inner .s-cart-summary-count,
.header-components-inner .s-cart-summary-icon,
.header-components-inner svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* لون روابط القائمة في الكمبيوتر */
.header-components-inner .main-menu a,
.header-components-inner .main-menu span {
    color: #ffffff !important;
}

/* تغيير خلفية الشريط العلوي في ثيم سام */
.top-navbar,
.top-navbar .container,
.top-nav,
.top-nav .container,
.topnav,
.topnav .container,
.header-top,
.header-top .container,
header .top-navbar,
header .top-nav,
header .topnav,
header .header-top {
    background: #002248 !important;
    background-color: #002248 !important;
}

/* خلفية أزرار الحساب والبحث */
.top-navbar .header-icon-button,
.top-nav .header-icon-button,
.topnav .header-icon-button,
.header-top .header-icon-button {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* جعل أيقونات الحساب والبحث بيضاء */
.top-navbar i,
.top-nav i,
.topnav i,
.header-top i,
.top-navbar svg,
.top-nav svg,
.topnav svg,
.header-top svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* استهداف الصف الموجود قبل الهيدر الرئيسي مباشرة */
header > div:not(.header-components),
header > div:not(.header-components) > div {
    background-color: #002248 !important;
}

/* =====================================
   توسيط قسم الشعار والوصف والشهادات
===================================== */

.store-footer__top .footer-content > div:first-child {
    width: 100%;
    flex: 0 0 100%;
    text-align: center;
}

/* توسيط شعار الفوتر */
.store-footer__top .footer-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto 15px;
}

.store-footer__top .footer-logo img {
    display: block;
    margin: 0 auto;
    max-height: 75px;
    width: auto;
}

/* توسيط النص التعريفي تحت الشعار */
.store-footer__top .footer-content > div:first-child > p {
    text-align: center !important;
    margin: 15px auto !important;
    max-width: 650px !important;
    line-height: 2;
}

/* توسيط حاوية السجل التجاري والرقم الضريبي */
.store-footer__top .footer-content > div:first-child > .flex.items-center.justify-start {
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    gap: 25px;
    margin-left: auto;
    margin-right: auto;
}

/* تنسيق شعار السجل التجاري */
.store-footer__top salla-trust-badges {
    justify-content: center;
    text-align: center;
}

/* توسيط الرقم الضريبي */
.store-footer__top .footer-content > div:first-child > .flex.items-center.justify-start > div {
    justify-content: center !important;
    text-align: center;
}

/* تحسين العرض على الجوال */
@media (max-width: 767px) {

    .store-footer__top .footer-content > div:first-child > p {
        max-width: 95% !important;
        padding: 0 10px;
    }

    .store-footer__top .footer-content > div:first-child > .flex.items-center.justify-start {
        flex-direction: row;
        justify-content: center !important;
        gap: 15px;
    }

    .store-footer__top .footer-logo img {
        max-height: 70px;
    }
}