/* إضافة أنماط CSS مخصصة */

/* ===================================
   المتغيرات الأساسية للألوان
   =================================== */
:root {
    --main-color:  #47b55d;    /* اللون الأخضر الرئيسي */
    --second-color: #305b35;   /* اللون الأخضر الداكن الثانوي */
    --third-color: #ee9b5b;    /* اللون البرتقالي المساعد */
}


/* ===================================
   قسم السلايدر (عرض الصور)
   =================================== */
   
/* إزالة المسافة العلوية من السلايدر */
section.s-block.s-block--photos-slider {
    margin-top: 0;
}

/* تنسيق عرض الشرائح - جعلها بعرض كامل */
section.s-block.s-block--photos-slider .swiper-slide {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* إزالة الحواف الدائرية من الشرائح والصور */
section.s-block.s-block--photos-slider .swiper-slide,
section.s-block.s-block--photos-slider .swiper-slide img {
    border-radius: 0 !important;
}

/* إزالة المسافات الداخلية من حاوية السلايدر */
section.s-block.s-block--photos-slider .swiper.s-slider-container {
    padding: 0 !important;
}

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

/* ===================================
   قسم البانرات (الإعلانات المصورة)
   =================================== */
   
/* إزالة المسافة السفلية من السلايدر */
section#IRT__photos-slider-0 {
    margin-bottom: 0 !important;
}

/* جعل البانر بعرض كامل بدون مسافات */
section.s-block.s-block--fixed-banner.wide-placeholder:not(.s-block--three-banners) > .container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: unset !important;
}

/* إزالة الحواف الدائرية من صور البانر */
.banner--fixed img {
    border-radius: 0 !important;
}

/* ===================================
   قسم المنتجات في الصفحة الرئيسية
   =================================== */

/* إخفاء عنصر معين في قسم المنتجات */
body.index div.app-inner.flex.flex-col.min-h-full.bg-storeBG > section.s-block.container.fixed-products.fixed-products--2 > div {
    display:none;
}

/* تنسيق خلفية قسم المنتجات بلون أخضر داكن */
body.index div.app-inner.flex.flex-col.min-h-full.bg-storeBG > section.s-block.container.fixed-products.fixed-products--2 {
    max-width:unset;
    background-color:var(--second-color);
    padding:100px 160px;
}

/* ===================================
   تنسيق بطاقات المنتجات
   =================================== */

/* إضافة إطار وحواف دائرية لصور المنتجات */
.product-card__image {
    border:1px solid var(--main-color);
    border-radius:12px !important;
    overflow:hidden;
}

/* تنسيق بطاقة المنتج بالكامل */
body.index custom-salla-product-card {
    padding:20px !important;
    border-radius:12px !important;
    overflow:hidden;
}

/* تكبير حجم خط عنوان المنتج */
body.index custom-salla-product-card .product-card__title a {
    font-size:22px;
}

/* تلوين زر المفضلة باللون الأحمر */
body.index custom-salla-product-card button.btn--wishlist.heart-next-add-button {
    background-color:#af1b1b;
}

/* جعل أيقونة القلب بيضاء اللون */
custom-salla-product-card button.btn--wishlist.heart-next-add-button i.sicon-heart {
    fill:#fff !important;
    color:#fff;
}

/* تلوين خلفية بطاقات المنتجات في أقسام معينة */
section.s-block.container.fixed-products.fixed-products--4 custom-salla-product-card,
section.s-block.container.fixed-products.fixed-products--6 custom-salla-product-card {
     background-color:#f7f7f7;
}

/* إزالة المسافات بين الأقسام */
section.s-block.s-block--fixed-banner.wide-placeholder.s-block--animate.fixed-banner--3 {
    margin-top:0 !important;
}

section.s-block.container.fixed-products.fixed-products--2 {
    margin-top:0 !important;
}

/* ===================================
   تنسيق الأزرار
   =================================== */

/* تنسيق الأزرار الرئيسية */
button.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center {
    color:#fff;
    border-radius:12px !important;
}

/* تنسيق الأزرار الثانوية بلون أخضر */
button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-gray-outline.s-button-loader-after {
    background-color:#669200;
    color:#fff;
}

/* ===================================
   تنسيق أيقونات الهيدر
   =================================== */

/* تنسيق أيقونات البحث والسلة والمستخدم بشكل دائري */
span.header-btn__icon.icon.sicon-search,
i.header-btn__icon.icon.sicon-cart,
i.header-btn__icon.sicon-user {
    background-color:#305b35;
    border-radius:50px;
    width:fit-content;
    height:fit-content;
    padding:12px;
    color:#fff;
}

/* ===================================
   تنسيق الفوتر (التذييل)
   =================================== */

/* جعل نصوص الفوتر بيضاء اللون */
.footer-bottom p * {
    color:#fff !important;
}

.footer-is-custom .store-footer .footer-rights p {
    color:#fff !important;
}

/* إزالة المسافة العلوية من الفوتر */
footer {
  margin-top:0 !important;
}

/* ===================================
   تنسيقات الشاشات الصغيرة (الموبايل)
   =================================== */
@media(max-width:992px) {
    
    /* تقليل المسافات الجانبية في الشاشات الصغيرة */
    body.index div.app-inner.flex.flex-col.min-h-full.bg-storeBG > section.s-block.container.fixed-products.fixed-products--2 {
        max-width:unset;
        background-color:var(--second-color);
        padding:40px 20px;
    }
    
    /* تقليل المسافات في بطاقات المنتجات */
    body.index custom-salla-product-card {
        padding:10px !important;
        border-radius:12px !important;
        overflow:hidden;
        gap:15px;
    }

    /* تصغير حجم شعار الفوتر */
    footer a.footer-logo.anime-item img {
        height:90px !important;
    }
    
    /* توسيط جميع عناصر الفوتر */
    footer * {
        justify-content:center !important;
        align-items:center !important;
        text-align:center !important;
    }

    /* جعل البانرات الثلاثية تظهر بشكل متجاوب */
    section.s-block.s-block--fixed-banner.s-block--three-banners.wide-placeholder.s-block--animate.three-banners.three-banners--1 .flex.gap-2.md\:gap-4.items-stretch {
        flex-wrap:wrap;
        justify-content:center;
        align-items:center;
    }

    /* تلوين الأزرار باللون الأخضر */
    button.s-button-element.s-button-btn.s-button-solid {
        background-color:#47b55d !important;
    }

    /* جعل البانرات بعرض 48% لكل واحد */
    section.s-block.s-block--fixed-banner.s-block--three-banners.wide-placeholder.s-block--animate.three-banners.three-banners--1 .flex.gap-2.md\:gap-4.items-stretch a {
        flex-basis:48%;
        height:100% !important;
    }

    /* جعل خلفية زر المنتج شفافة */
    custom-salla-product-card salla-button.s-button-wrap.hydrated {
        background-color:transparent;
    }
    
    /* تنسيق أيقونة القائمة في الموبايل */
    i.sicon-menu.text-2xl {
        background-color:#305b35;
        border-radius:50px;
        width:fit-content;
        height:fit-content;
        padding:12px;
        color:#fff;
    }
}