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

/* ========================================
   1. المتغيرات الأساسية (Root Variables)
   ======================================== */
:root {
    --main-color:  #3d0904;      /* اللون الأساسي - بني غامق */
    --second-color: #ad8b3e;     /* اللون الثانوي - ذهبي */
    --white-color: #fff;         /* اللون الأبيض */
}

/* ========================================
   2. تنسيقات الخلفية العامة
   ======================================== */
body{
  background-color: #efe0d7;    /* لون خلفية الصفحة - بيج فاتح */
}

/* ========================================
   3. تنسيقات الهيدر والقائمة الرئيسية
   ======================================== */

/* لون خلفية القائمة الرئيسية */
header div#mainnav {
    background-color:var(--main-color);
}

/* مسافة علوية للقائمة الثابتة */
div#mainnav.fixed-header .inner.bg-inherit.w-full {
    margin-top:100px;
}

/* لون نصوص القائمة الرئيسية */
header ul.main-menu.mm-spn--open a *{
    color:var(--second-color);
}

/* خلفية القائمة الفرعية */
header .sub-menu.w-56 {
    background-color:var(--main-color);
}
.inner.bg-inherit.w-full i.sicon-menu.text-primary.text-2xl {
    width: unset !important;
    padding:8px;
    border-radius:50px ;
}

/* ========================================
   4. أيقونات الهيدر (المستخدم وسلة التسوق)
   ======================================== */

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

/* تنسيق أيقونة القائمة (Hamburger Menu) */
i.sicon-menu.text-primary.text-2xl {
    background-color: var(--second-color)!important;   /* خلفية ذهبية */
    color:var(--main-color);                           /* لون النص بني */
    padding:6px;                                       /* مساحة داخلية */
    border-radius:50px;                                /* حواف دائرية */
}

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

/* إجمالي السلة */
.main-nav-container b.s-cart-summary-total{
  color:var(--second-color);                           /* لون ذهبي */
}

/* ========================================
   5. شريط البحث العلوي
   ======================================== */

/* خلفية شريط البحث */
header .top-navbar {
    background-color:var(--main-color);                /* خلفية بنية */
    color:var(--second-color);                         /* نص ذهبي */
}

/* حقل إدخال البحث */
header .top-navbar input.s-search-input {
    background-color:var(--second-color) !important;   /* خلفية ذهبية */
    color:#ffff;                                       /* نص أبيض */
}

/* نص placeholder في حقل البحث */
header .top-navbar input.s-search-input::placeholder{
    color:var(--main-color);                           /* لون بني */
}

/* أيقونة البحث SVG */
header .top-navbar svg {
    fill:var(--main-color);                            /* تعبئة بنية */
}

span.s-search-icon svg {
    fill:var(--main-color);                            /* تعبئة بنية */
}

/* ========================================
   6. السلايدر الرئيسي (Photos Slider)
   ======================================== */

/* إزالة المسافة العلوية للسلايدر */
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;
}

/* ========================================
   7. البانرات (Banners)
   ======================================== */

/* إزالة المسافة السفلية للسلايدر */
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;
}

/* تحويل شبكة البانرات إلى 4 أعمدة */
section.s-block.s-block--banners.container .md\:grid-cols-3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));  /* 4 أعمدة متساوية */
    gap:4px;                                           /* مسافة 4 بكسل بين العناصر */
}

/* تنسيق عناصر البانر المربعة */
a.banner-entry.square-photos {
    width:100% !important;
    height:100% !important;
    padding:0 !important;
}

/* تنسيق العنصر الأول في البانر ذو الصفين */
section.s-block.s-block--banners.container .md\:grid-cols-3 .two-row .banner-entry:first-child {
    grid-column: span 1/span 1;
    grid-row: span 1/span 1 !important;
}

/* ========================================
   8. الأزرار (Buttons)
   ======================================== */

/* تنسيق الأزرار الأساسية */
button.s-button-element.s-button-btn {
    background-color:var(--main-color) !important;     /* خلفية بنية */
    color:var(--second-color);                         /* نص ذهبي */
}

/* تأثير hover على الأزرار */
button.s-button-element.s-button-btn:hover {
    background-color:var(--second-color) !important;   /* خلفية ذهبية */
    color:var(--main-color);                           /* نص بني */
}

/* تنسيق أزرار Outline */
button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-gray-outline.s-button-loader-after {
    background-color:var(--second-color) !important;   /* خلفية ذهبية */
    color:var(--main-color) !important;                /* نص بني */
}

/* ========================================
   9. بطاقات المنتجات (Product Cards)
   ======================================== */

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

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

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

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

/* خلفية شفافة لبطاقات المنتجات */
custom-salla-product-card {
    background-color:transparent !important;
}

/* ========================================
   10. الفوتر (Footer)
   ======================================== */

/* تنسيق الفوتر */
footer.store-footer .store-footer__inner {
    background-color:var(--main-color) !important;     /* خلفية بنية */
    color:#fff;                                        /* نص أبيض */
}

/* ========================================
   11. التنسيقات المتجاوبة (Responsive)
   ======================================== */

@media(max-width:992px){
   
   /* تحويل البانرات إلى عمودين على الشاشات الصغيرة */
   section.s-block.s-block--banners.container .md\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* عمودين */
        gap:4px;
    } 

    /* تنسيق القائمة على الموبايل */
    nav#mobile-menu {
        background-color:var(--main-color);                /* خلفية بنية */
    }

    /* لون نصوص القائمة على الموبايل */
    nav#mobile-menu ul.main-menu.mm-spn--open *{
        color:var(--second-color) !important;              /* نص ذهبي */
    }

    /* لون شريط التنقل على الموبايل */
    nav.mm-spn.mm-spn--navbar.mm-spn--main:after {
        color: var(--second-color) !important;             /* لون ذهبي */
    }

    /* تعديل المسافة العلوية للقائمة الثابتة */
    div#mainnav.fixed-header .inner.bg-inherit.w-full {
        margin-top:95px;
    }
    
    /* توسيط محتويات الفوتر على الموبايل */
    footer .store-footer__inner *{
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
}



/* إضافة النص تحت الـ input مباشرة */
.s-product-options-option-container[data-option-id="1711931055"] .s-product-options-option-content::after {
    content: "⚠️ يحتاج حجز مسبق قبل 24 ساعة على الأقل";
    display: block;
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #fff3cd;
    border-right: 4px solid #ffc107;
    font-size: 13px;
    color: #856404;
    border-radius: 4px;
    text-align: right;
    line-height: 1.5;
}