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

/* تعريف المتغيرات العامة */
:root {
    --main-color:#314158; /* اللون الرئيسي للموقع */
}

/* تنسيق شعار الموقع في الهيدر */
header .navbar-brand img {
    max-width:5rem !important;
    max-height:5rem !important;
}

/* تنسيق أيقونات المستخدم وسلة التسوق */
.main-nav-container i.header-btn__icon.sicon-user-circle,
.main-nav-container i.header-btn__icon.icon.sicon-shopping-bag{
    background-color: var(--main-color) !important; /* لون خلفية الأيقونات */
    color:white; /* لون الأيقونات */
}

/* تنسيق عداد منتجات السلة */
.main-nav-container span.s-cart-summary-count {
    background-color:white; /* خلفية بيضاء */
    color:var(--main-color); /* نص بلون رئيسي */
    border:1px solid var(--main-color); /* حدود بلون رئيسي */
}

/*** تنسيقات السلايدر الرئيسي ***/
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 > .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: unset !important; /* إلغاء العرض الأقصى */
}

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

/* تنسيق شبكة البانرات في القسم الثاني - 5 أعمدة */
body.index section:nth-child(2) .md\:grid-cols-3 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* تنسيق البانر الأول في الصف المزدوج */
.two-row .banner-entry:first-child {
    grid-column: span 1/span 1;
    grid-row: span 1/span 1;
}

/* خلفية شفافة للبانرات المربعة */
a.banner-entry.square-photos {
    background-color:transparent;
}

/* تحديد ارتفاع البانرات */
body.index section:nth-child(2) a {
    height: 275px;
}

/* تنسيق زر المنتج */
custom-salla-product-card button.s-button-element.s-button-btn{
    background-color:var(--main-color); /* لون الخلفية */
    color:#fff; /* لون النص */
}

/* محاذاة عنوان المنتج في المنتصف */
custom-salla-product-card h3.s-product-card-content-title {
    text-align:center;
}

/* محاذاة المحتوى الفرعي للمنتج */
custom-salla-product-card .s-product-card-content-sub {
    justify-content:center;
}

/* حجم خط السعر والمحتوى الفرعي */
custom-salla-product-card h4.s-product-card-price,
custom-salla-product-card .s-product-card-content-sub,
custom-salla-product-card .s-product-card-content-sub{
    font-size:22px;
}

/* تنسيق بطاقة المنتج */
custom-salla-product-card {
    border:1px solid #dddd; /* حدود رمادية فاتحة */
    transition:0.5s !important; /* تأثير انتقالي سلس */
    overflow: hidden; /* إخفاء المحتوى الزائد */
}

/* تأثير الهوفر على بطاقة المنتج */
body.index custom-salla-product-card:hover{
    transform:translateY(-10px); /* تحريك البطاقة للأعلى */
    box-shadow: 3px 3px 5px 4px #ddd !important; /* ظل */
    border:1px solid var(--main-color); /* تغيير لون الحدود */
}

/* تنسيق حاوية سلايدر المنتجات */
body.index salla-products-slider.s-products-slider-wrapper.hydrated .swiper.s-slider-container {
    padding:30px 0 0 !important;
}

/* تنسيق شبكة القسم العاشر - شبكة 2×2 */
body.index section:nth-child(10) .md\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* عمودين متساويين */
    grid-template-rows: repeat(2, 1fr); /* صفين متساويين */
    gap: 8px; /* مسافة بين العناصر */
}

/* البانر الأول يمتد على عمودين */
body.index section:nth-child(10) > div > a:nth-child(1){
    grid-column: span 2 / span 2;
}

/* البانر الثاني في الصف الثاني */
body.index section:nth-child(10) > div > a:nth-child(2){
    grid-row-start: 2;
}

/* البانر الثالث في الصف الثاني */
body.index section:nth-child(10) > div > a:nth-child(3){
    grid-row-start: 2;
}

/* ارتفاع البانر الأول */
body.index section:nth-child(10) > div > a:nth-child(1) {
    height: 279px;
}

/* ارتفاع البانرات الثاني والثالث */
body.index section:nth-child(10) > div > a:nth-child(2),
body.index section:nth-child(10) > div > a:nth-child(3){
    height: 184px !important;
}

/* تنسيق الفوتر */
footer.store-footer,
.store-footer__inner{
    background-color:#f3efeb !important;
}



.top-navbar {
    background-color:#f3efeb !important;
   
}

.top-navbar input.s-search-input {
    background-color:#ffff !important;
}

span.s-contacts-icon {
    background-color:var(--main-color);
    color:#fff;
}

/* تنسيقات الشاشات الصغيرة (أقل من 992px) */
@media(max-width:992px){
    /* تحويل الشبكة إلى Flexbox للشاشات الصغيرة */
    body.index section:nth-child(2) .md\:grid-cols-3 {
        display:flex !important;
        flex-wrap:wrap; /* السماح بالالتفاف */
        justify-content:center; /* محاذاة أفقية */
        align-items:center; /* محاذاة عمودية */
        gap:1rem; /* مسافة بين العناصر */
    }
    
    a.banner-entry.square-photos {
        background-color:transparent;
    }
    
    /* تحديد عرض وارتفاع البانرات للموبايل */
    body.index section:nth-child(2) a {
        flex-basis:30%; /* عرض 30% */
        height:125px;
    }
    
    /* ارتفاع البانر الأول للموبايل في القسم العاشر */
    body.index section:nth-child(10) > div > a:nth-child(1) {
        height: 87px;
    }
    
    /* ارتفاع البانرات الثاني والثالث للموبايل */
    body.index section:nth-child(10) > div > a:nth-child(2),
    body.index section:nth-child(10) > div > a:nth-child(3){
        height: 56px !important;
    }
    
    /* تنسيق عناصر الفوتر للموبايل */
    footer *{
        justify-content:center;
        text-align:center;
        align-items:center;
    }
    
    /* تصغير حجم الشعار في الهيدر للموبايل */
    header .navbar-brand img {
        max-width: 4rem !important;
        max-height: 4rem !important;
    }
  i.sicon-menu.text-primary.text-2xl {
    background-color:var(--main-color);
    color:#fff;
    padding:6px;
    border-radius:50px;
}
}