/* Add custom CSS styles below */ 
.down-footer {
    background-color: #1c6144; /* أسود مريح للعين (Material Design style) */
    color: #ffffff; /* لجعل النص واضحاً */
}
.bottom-footer {
    background-color: #1c6144; /* أخضر زمردي غامق جداً (Emerald-900) */
    color: #1C6144; /* نص فاتح لضمان القراءة */
}
.store-header.store-header--live-editor {
    background-color: #1C6144 !important;
}
.store-header i, 
.store-header .icon {
    color: #FFFFFF !important;
}
.store-header svg {
stroke: #FFFFFF !important; /* لضمان تلوين الحدود أيضاً */
}

.s-user-menu-wrapper {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1; /* بيضمن إن الطول والعرض يضلوا متساويين عشان تطلع دائرة صح */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* عشان أي محتوى داخلي ما يخرب شكل الدائرة */
}



/* 1. تحويل الخلفية للأبيض وإلغاء الـ shadow القديم أو تعديله */
.top-btn {
    background-color: #FFFFFF !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important; /* ظل خفيف بدل الـ primary */
}

/* 2. تحويل رأس السهم (المصنوع بـ before) للون الأخضر */
.top-btn::before {
    border-top-color: #1C6144 !important;
    border-left-color: #1C6144 !important;
}

/* 3. تحويل عصا السهم (المصنوعة بـ after) للون الأخضر */
.top-btn::after {
    background-color: #1C6144 !important;
}

.wa-s-n {
    display: none !important;
}

/* تغيير لون العنوان والأيقونات المرتبطة به */
.s-slider-block__title-left, 
.s-slider-block__title-left i, 
.s-slider-block__title-left svg {
    color: #ffffff !important;
    fill: #ffffff !important; /* للأيقونات من نوع SVG */
}

/* تغيير لون الأزرار لتكون بيضاء بالكامل (نص وأيقونة) */
.s-slider-block__title-left .s-button, 
.s-slider-block__title-left button,
.s-slider-block__title-left a {
    color: #ffffff !important;
}

/* إذا كنت تقصد الأيقونات العامة داخل هذا القسم */
.s-slider-block__title-left .s-icon {
    color: #ffffff !important;
}


/* تطبيق الزوايا المدورة على حاوية السلايدر الرئيسية */
.swiper.s-slider-container {
    border-radius: 15px !important;
    overflow: hidden !important; /* هذا السطر ضروري لقص الصور عند الزوايا */
    backface-visibility: hidden; /* يحسن الأداء مع الزوايا المدورة */
    transform: translateZ(0); /* حل لمشكلة ظهور الزوايا في بعض المتصفحات */
}

/* التأكد من أن الصور داخل السلايدر تأخذ نفس التدوير إذا لزم الأمر */
.swiper.s-slider-container .swiper-slide img {
    border-radius: 15px !important;
}



/* إخفاء الصورة الموجودة داخل هذا الكلاس */
.s-slider-block__title img {
    display: none !important;
}

/* إخفاء أزرار التنقل في السلايدر تماماً */
.s-slider-block__title-nav {
    display: none !important;
}

/* للموبايل بشكل افتراضي */
.inner {
    height: 100px;
}
.main-nav-container {
    margin-top: -20px; /* يمكنك زيادة أو تقليل الرقم حسب الحاجة */
}



/* 1. رفع الحاوية للأعلى قليلاً */
.main-nav-container {
    margin-top: -15px; /* يمكنك زيادة الرقم حسب الرغبة */
    position: relative;
    z-index: 10; /* لضمان عدم اختفائها خلف عناصر أخرى */
}

/* 2. إخفاء أيقونة البحث في الشاشات الكبيرة */
.search-mobile-icon {
    display: none;
}

/* 3. إعدادات الشاشات الصغيرة (الموبايل) */
@media (max-width: 768px) {
    
    /* إخفاء كلاس البحث تماماً */
    .s-search-modal {
        display: none !important;
    }

    /* إظهار الأيقونة بدلاً منه */
    .search-mobile-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 10px;
    }

    /* تعديل اختياري: تصغير المارجن في الموبايل إذا لزم الأمر */
    .main-nav-container {
        margin-top: 0px;
    }
}
.ms-6{
  display: none !important;
}


body {
    background-color: #F3F4F6;
    /* يفضل دائماً تحديد لون النص لضمان التباين */
    color: #F3F4F6; 
    margin: 0;
    padding: 0;
}
h2{
    color: #547540 !important ;
}
p{
  color: #547540 !important ;
}



.text-sm{
  color: #ffffff !important; 
}

.text-sm.sm\:text-base.text-text-secondary.line-clamp-2 {
    color: green !important;
}


.text-xs.sm\:text-base.self-start.font-bold.size-8.flex.items-center.justify-center.bg-primary.rounded-full.\!aspect-square {
    color: #ffffff !important;
}



.top-footer {
    background-color: #1c6144 !important;
    width: 100%;
    padding: 2rem 1rem; /* هذه تعادل py-8 px-4 في Tailwind */
}

/* التأكد من عمل الفلتر مع اللون */
.top-footer {
    backdrop-filter: brightness(0.95);
}

.dark .top-footer {
    backdrop-filter: brightness(1.1);
}


.inner {
    background-color: #1C6144 !important;
    width: 100%;
    padding-top: 1.5rem;   /* يعادل py-6 */
    padding-bottom: 1.5rem; /* يعادل py-6 */
}









/* إنشاء الشريط الإعلاني وتنسيقه بالكامل */
.announcement-bar {
    width: 100% !important;
    background-color: #1C6144 !important;
    color: #ffffff !important;
    padding: 10px 0 !important;
    position: relative !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    z-index: 9999 !important;
    height: 40px !important; /* تحديد طول ثابت للشريط */
}

/* استخدام العنصر الوهمي لاحتواء النص وتكراره */
.announcement-bar::after {
    content: "خصم 10% على جميع المنتجات ، كود الخصم : KOOV10          خصم 10% على جميع المنتجات ، كود الخصم : KOOV10          خصم 10% على جميع المنتجات ، كود الخصم : KOOV10";
    display: inline-block !important;
    padding-left: 100% !important;
    animation: scroll-left 15s linear infinite !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
}

/* الحركة */
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}


.s-slider-block__title-left a{
  color: #1C6144 !important;
}

.s-block.s-block--best-offers {
    margin-bottom: 25px !important;
}

.bg-\[var\(--bg-color-secondary\)\] {
    background-color: #ffffff !important;
}
/* استهداف الروابط داخل القائمة المفتوحة بشكل دائم */
.main-menu.mm-spn--open a {
    color: #1C6144 !important; /* درجة أخضر احترافية */
}

/* إذا أردت استهداف النصوص فقط داخل الـ li */
.main-menu.mm-spn--open ul li a {
    color: #1C6144 !important;
}





/* استهداف الجوال فقط */
@media (max-width: 767px) {
    .banner-sm-mq-0 {
        height: 300px !important;
        object-fit: cover; /* لضمان عدم تمدد الصورة بشكل مشوه */
    }
}



@media (max-width: 767px) {
    /* استهداف الفوتر والكلاسات التابعة له لإلغاء الفراغ */
    footer, 
    .down-footer, 
    .footer-main {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
/* أحياناً يكون الفراغ ناتجاً عن كلاسات Tailwind مثل py-8 */
    .py-8 {
        padding-top: 10px !important; /* تقليل المسافة بدل إلغائها تماماً لجمالية التصميم */
        padding-bottom: 20px !important;
    }

    /* استهداف أول عنصر داخل الفوتر (غالباً ما يكون الـ Logo) لتقليل الهامش العلوي الخاص به */
    footer div:first-child, 
    .down-footer div:first-child {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}



/* استهداف شاشات الجوال فقط */
@media (max-width: 767px) {
    .scroll.fixed {
        right: auto !important; /* إلغاء التموضع من اليمين */
        left: 10px !important;  /* التثبيت على اليسار */
        
        /* تقليل المسافة من الأسفل ليكون العنصر أسفل قليلاً */
        /* يمكنك تغيير الرقم (40px) حسب الرغبة؛ كلما قل الرقم نزل العنصر لأسفل */
        bottom: 40px !important; 
        
        z-index: 999 !important; /* لضمان ظهوره فوق العناصر الأخرى */
    }
}


.lazy.object-contain.mr-auto.w-auto.absolute.h-20.md\:h-24.top-1\/2.left-5.scale-110.origin-center.-translate-y-1\/2.group-hover\:drop-shadow-lg {
    display: block !important; /* للتأكد من أنها تظهر ولا تختفي */
    width: 250px !important;    /* تحديد العرض بـ 50 بكسل */
    height: auto !important;   /* جعل الارتفاع يتناسب تلقائياً للحفاظ على الأبعاد */
}
.lazy.object-contain.mr-auto.w-auto.absolute.h-20.md\:h-24.top-1\/2.left-5.scale-110.origin-center.-translate-y-1\/2.group-hover\:drop-shadow-lg {
    display: block !important;    /* إظهار الصورة */
    width: 100px !important;      /* العرض المطلوب */
    max-width: 100px !important;  /* لضمان عدم تجاوز العرض */
    height: auto !important;      /* الحفاظ على تناسق الطول مع العرض */
    left: 10px !important;        /* قد تحتاج لتعديل مكانها قليلاً بعد تكبيرها */
}




.md\:block.flex.justify-center.w-full.md\:w-auto.flex-1.whitespace-nowrap {
    display: none !important;

}

/* تغيير لون النص داخل القائمة */
.s-breadcrumb-wrapper ol li {
    color: #ff5722 !important; /* استبدل هذا اللون باللون الذي تريده */
}
.text-base.leading-6.font-bold.flex-1 {
    color: #1c6144 !important; /* استبدل الكود باللون الذي تريده */
}
.inline-flex.items-center.justify-center.text-text-secondary.underline {
    color: #1c6144 !important;
}
/* أو استهدافه بشكل عام (حذر) */
.block {
    color: #1c6144 !important;
}
.has-overlay.flex-1.discount.flex.items-center.text-sm {
    color: #1c6144 !important;
}
/* استهداف العنوان h3 داخل حاوية الطلب السريع */
.s-quick-order-button-cont h3 {
    color: #1c6144 !important;
}

/* استهداف الفقرة p داخل حاوية الطلب السريع */
.s-quick-order-button-cont p {
    color: #1c6144 !important;
}
.inline-flex.items-center.justify-center.underline.text-sm {
    color: #1c6144 !important;
}
.form-label {
    color: #1c6144 !important;
    font-weight: 500; /* إضافة سماكة بسيطة لجعل اللون أوضح */
}
.s-quick-order-button-cont h3, 
.s-quick-order-button-cont p {
    color: #fff !important;
}
.whitespace-nowrap.flex-1.inline-flex.items-center.justify-center.text-text-primary {
    color: #1c6144 !important;
}
.font-semibold.text-xxs, 
.font-semibold.sm\:text-xs {
    color: #1c6144 !important;
}

.breadcrumbs.w-full.py-5,
.breadcrumbs.w-full.py-5 a,
.breadcrumbs.w-full.py-5 li,
.breadcrumbs.w-full.py-5 span {
    color: #032B21 !important;
}





/* --- تنسيق الحاوية الرئيسية --- */
.has-overlay.flex-1.discount.countersingl.flex.items-center.text-sm {
    /* الخلفية والحدود */
    background-color: #fcfbf8; /* لون كريمي فخم جداً */
    border: 1.5px solid #1c6144; /* حدود بلونك الأخضر */
    box-shadow: 0 4px 12px rgba(3, 43, 33, 0.12); /* ظل ناعم لإعطاء فخامة */
    
    /* المساحات والترتيب */
    border-radius: 12px !important; /* زوايا منحنية */
    padding: 1rem 1.5rem !important; /* مساحة داخلية كافية */
    gap: 1.5rem; /* مسافة بين النص والعداد */
    direction: rtl; /* ضمان الاتجاه الصحيح */
}

/* --- تنسيق نص الدعوة بالشراء --- */
.has-overlay span:first-child {
    color: #1c6144 !important; /* لونك الأخضر */
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    line-height: 1.4;
    white-space: nowrap;
}

/* --- تنسيق حاوية الأعداد --- */
.has-overlay.flex-1.discount .flex {
    display: flex !important;
    flex-wrap: wrap; /* ضمان الاستجابة على الجوال */
    gap: 0.75rem !important;
    align-items: center;
}

/* --- تنسيق كل وحدة زمنية (البطاقات) --- */
.has-overlay.flex-1.discount .flex .timer-unit {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    background: #1c6144; /* خلفية خضراء */
    border-radius: 8px; /* زوايا منحنية */
    padding: 10px;
    min-width: 65px; /* عرض أدنى لتوحيد الشكل */
    transition: all 0.3s ease;
}

.has-overlay.flex-1.discount .flex .timer-unit:hover {
    transform: translateY(-2px); /* تأثير بسيط عند المرور */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* --- تنسيق الرقم --- */
.has-overlay.flex-1.discount .flex .timer-unit .number {
    color: #ffffff !important; /* لون أبيض */
    font-weight: 800 !important;
    font-size: 1.8rem !important; /* حجم كبير للرقم */
    line-height: 1;
}

/* --- تنسيق النص التوضيحي (ثانية، دقيقة...) --- */
.has-overlay.flex-1.discount .flex .timer-unit .label {
    color: rgba(255, 255, 255, 0.85); /* لون أبيض خفيف */
    font-size: 0.75rem !important;
    font-weight: 400;
    margin-top: 4px;
}

/* --- تنسيق الفواصل (النقطتين) --- */
.has-overlay.flex-1.discount .flex > span:not(.timer-unit) {
    color: #032B21 !important;
    font-size: 1.6rem !important;
    font-weight: 600;
}

/* --- تنسيق للأجهزة الصغيرة --- */
@media (max-width: 768px) {
    .has-overlay.flex-1.discount.countersingl.flex.items-center.text-sm {
        flex-direction: column !important; /* جعل العناصر عمودية */
        gap: 0.5rem;
        padding: 0.75rem !important;
    }
    
    .has-overlay.flex-1.discount .flex .timer-unit {
        min-width: 50px; /* تصغير العرض للأجهزة الصغيرة */
        padding: 8px;
    }
    
    .has-overlay.flex-1.discount .flex .timer-unit .number {
        font-size: 1.4rem !important;
    }
}
.has-overlay.flex-1.discount.countersingl.flex.items-center.text-sm {
    /* الخصائص السابقة التي أضفناها */
    margin-bottom: 30px !important; /* هذه هي المسافة المطلوبة */
}
.overlay {
    background-color: #1C6144 !important;
    /* إذا كنت تريد إضافة لمسة من الشفافية (اختياري) */
    /* background-color: rgba(28, 97, 68, 0.9) !important; */
}