/* Add custom CSS styles below */ 
/* كود جعل البانر بعرض الشاشة الكامل على الديسك توب */
@media (min-width: 1024px) {
    /* 1. إزالة حدود العرض والمسافات الجانبية للحاوية */
    section.s-block--fixed-banner .container {
        max-width: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2. التأكد من أن الصورة والروابط بداخلها تمتد للعرض الكامل */
    section.s-block--fixed-banner .banner,
    section.s-block--fixed-banner picture,
    section.s-block--fixed-banner img {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        display: block;
    }

    /* 3. إلغاء أي مسافات علوية لضمان التصاق البانر بالهيدر */
    section.s-block--fixed-banner {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* إزالة الخلفية البيضاء من العناصر */
.s-block--features__item {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* تغيير لون خلفية دائرة الأيقونات */
.feature-icon {
    background-color: #ac3d57 !important;
}

/* جعل الأيقونات (السيارة، المحفظة، الصح) باللون الأبيض */
.feature-icon i, 
.feature-icon svg, 
.feature-icon svg path {
    color: white !important;
    fill: white !important;
}

/* تغيير لون الفوتر الرئيسي */
footer.store-footer {
    background-color: #d66a7e !important;
    /* هذا الجزء يصنع الشريط الأبيض كامل العرض في الأسفل */
    background-image: linear-gradient(to bottom, #d66a7e calc(100% - 64px), #ffffff 64px) !important;
}

/* إزالة أي خلفيات داخلية للفوتر لضمان ظهور الألوان الموحدة */
.store-footer__inner, 
.md\:flex.items-center.justify-between.py-4.container.text-center {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* تغيير لون الفوتر الرئيسي والشريط السفلي الأبيض */
footer.store-footer {
    background-color: #d66a7e !important;
    background-image: linear-gradient(to bottom, #d66a7e calc(100% - 64px), #ffffff 64px) !important;
}

/* تحويل كافة النصوص والروابط داخل الفوتر (الجزء الملون) إلى الأبيض */
.store-footer__inner, 
.store-footer__inner p, 
.store-footer__inner span, 
.store-footer__inner a, 
.store-footer__inner h1, 
.store-footer__inner h2, 
.store-footer__inner h3, 
.store-footer__inner h4, 
.store-footer__inner li {
    color: white !important;
}

/* إزالة الخلفيات الداخلية */
.store-footer__inner, 
.md\:flex.items-center.justify-between.py-4.container.text-center {
    background-color: transparent !important;
    box-shadow: none !important;
}

.s-search-icon-wrap:where([dir=rtl],[dir=rtl] *) {
  color: rgb(214, 106, 126);
}

span {
  color: rgb(214, 106, 126);
}

.main-menu li>a {
  color: rgb(214, 106, 126);
}

/* تغيير شكل زر إضافة للسلة في جميع الصفحات ليكون مثل اشتري الآن */
.s-button-element.s-button-btn.s-button-solid.s-button-primary {
    background-color: transparent !important;
    color: #f77479 !important; /* اللون الوردي */
    border: 1px solid #f77479 !important;
}

/* تأثير عند مرور الماوس على الزر */
.s-button-element.s-button-btn.s-button-solid.s-button-primary:hover {
    background-color: #f77479 !important;
    color: #ffffff !important;
}

/* كود خاص للموبايل فقط - إجباري */
@media (max-width: 767px) {
    /* 1. نلغي التدرج اللوني من الفوتر نفسه عشان ميرميش لون ورا الجزء اللي تحت */
    footer.store-footer {
        background-image: none !important;
        background-color: #d66a7e !important; /* لون الفوتر الوردي الأساسي */
    }

    /* 2. نخلي الجزء اللي تحت أبيض بالكامل ونضمن إنه يملأ العرض */
    footer.store-footer > .md\:flex.items-center.justify-between.py-4.container.text-center {
        background-color: #ffffff !important;
        display: block !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }
}

@media (min-width: 1024px) {
  picture img {
    margin-top: 5px;
  }
}