/* Add custom CSS styles below */ 
.s-block{
padding-top:0px;
}
.s-block--fixed-banner .container {
padding-right:0px;
padding-left:0px;
}
.banner--fixed img{
border-radius:0px;
}


.s-product-card-content-footer .s-button-btn {
    background: linear-gradient(221deg,#863e26, #9f7356);
    border-radius: 20px !important;
    border: none;
    padding: 5px;
    box-shadow: -6px 19px 23px rgb(204 204 204 / 51%);
    color:#fff;
}


/*  كود الشريط العلوي */
.store-header, .main-nav-container, .top-navbar {
  background-color: #f8f4ef !important; /* بيج فاتح */
  margin-bottom: 0 !important; /* يلغي المسافة تحت الهيدر */
  padding-bottom: 0 !important; /* يقلل أي فراغ داخلي */
}

.main-menu, .sub-menu, .store-footer, .store-footer__inner {
  background-color: #f8f4ef !important; /* بيج فاتح */
}


.store-header + .s-block,
.s-block--fixed-banner, 
.wide-placeholder {
  margin-top: 0 !important; /* يلغي المسافة بين الهيدر والبانر */
  padding-top: 0 !important;
}



/* خلفية المتجر بالكامل */
body,
html,
.salla-body,
.store-body,
.page-content,
.main-content {
  background-color:  #f8f4ef !important;
}


.s-product-card-entry {
    transition: transform 0.5s ease-in-out;
}

.s-product-card-entry:hover {
    transform: scale(1.05);
}

.s-user-menu-trigger {
    background-color: transparent !important;
}

/* تأثير تفاعلي للأزرار عند المرور */
.s-product-card-content-footer .s-button-btn {
  transition: all 0.4s ease-in-out;
}

.s-product-card-content-footer .s-button-btn:hover {
  background: linear-gradient(221deg, #9f7356, #b88c6c);
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgb(204 204 204 / 60%), 0 0 10px #9f7356;
}

/* حركة نبض خفيفة للأزرار */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.s-product-card-content-footer .s-button-btn:hover {
  animation: pulse 0.6s ease-in-out infinite alternate;
}




/* إطار فقط حول الصور الدائرية داخل الفئات */
.slide--cat-entry img {
  border-radius: 50%;             /* تجعل الصورة دائرية */
  border: 2px solid #9f7356;      /* إطار بنفس لون الأزرار */
  padding: 2px;                    /* مساحة بسيطة بين الصورة والإطار */
  box-sizing: border-box;
  display: block;
  width: 64px;  
  height: 64px;
  object-fit: cover;
}

/* إزالة أي خلفية أو إطار للعنصر كامل */
.slide--cat-entry {
  background-color: transparent !important;
  border: none;
  padding: 0;
}
/* تكبير الصور الدائرية للفئات + إطار + تأثير Zoom */
.slide--cat-entry img {
  border-radius: 50%;             /* الصورة دائرية */
  border: 2px solid #9f7356;      /* إطار بنفس لون الأزرار */
  padding: 2px;                    /* مساحة بين الصورة والإطار */
  box-sizing: border-box;
  display: block;
  width: 100px;                    /* تكبير الصورة أكثر */
  height: 100px;
  object-fit: cover;
  margin: 0 auto;                  /* توسيط الصورة داخل العنصر */
  transition: transform 0.3s ease-in-out; /* تأثير تكبير عند المرور */
}

/* تأثير الزوم عند المرور على الصورة */
.slide--cat-entry img:hover {
  transform: scale(1.1);           /* تكبير 10% عند المرور */
}

/* تكبير عنوان الفئة */
.slide--cat-entry h2 {
  font-size: 16px;                 /* تكبير الخط */
  margin-top: 5px;                 /* مسافة صغيرة بين الصورة والعنوان */
  text-align: center;
  color: #000;                      /* يمكن تغير اللون حسب التصميم */
  transition: transform 0.3s ease-in-out;
}

/* تأثير الزوم على العنصر بالكامل (الصورة + العنوان) */
.slide--cat-entry:hover h2 {
  transform: scale(1.05);          /* تكبير طفيف للعنوان عند المرور */
}

/* تقليل المسافة بين كل عنصر فئة */
.swiper-slide.slide--one-sixth {
  padding-left: 5px;   
  padding-right: 5px;
}


/* خلفية التعليقات في صفحة المنتج */
.s-comments-product {
    background-color: #f8f4ef !important; /* نفس لون المتجر البيج */
    padding: 20px; /* مسافة داخلية لطيفة */
    border-radius: 15px; /* حواف ناعمة */
}


/* خلفية التعليقات بلون بيج فاتح */
.s-comments-product {
    background-color: #f8f4ef !important; /* بيج فاتح أكثر */
    padding: 20px; 
    border-radius: 15px;
}


 
.s-add-product-button-main > salla-button:first-child {
    animation: bounceAndReturn 6s infinite;
}

@keyframes bounceAndReturn {
    0% { transform: translateX(0px); }

    3% { transform: translateX(-3px); }
    6% { transform: translateX(3px); }
    9% { transform: translateX(-3px); }
    12% { transform: translateX(3px); }
    15% { transform: translateX(-3px); }
    18% { transform: translateX(0px); }

    100% { transform: translateX(0px); }
}

/* تأثير عند المرور بالماوس */
.s-add-product-button-mini-checkout:hover {
/*    background: linear-gradient(221deg, #b88c6c, #9f7356); /* تغيير التدرج */ */
 box-sizing: border-box;
 background-color: #708238; /* اللون الأخضر الزيتوني الثابت */
 border-radius: 11px;             /* الصورة دائرية */


//    transform: scale(1.05); /* تكبير خفيف */
}


/* الخلفية المظللة */
#welcomeBannerOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* البنر */
#welcomeBanner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  border-radius: 24px; /* الحواف دائرية */
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  z-index: 10001;
  opacity: 0;
  transition: all 0.3s ease;
  overflow: hidden;
  display: inline-block; /* يجعل الحجم يعتمد على الصورة */
}

/* الصورة داخل البنر */
#welcomeBanner img {
  display: block;
  width: auto;      /* يعتمد على حجم الصورة الأصلي */
  max-width: 90vw;  /* لا يتجاوز 90% من عرض الشاشة */
  height: auto;
  border-radius: 24px; /* الحواف دائرية */
  transition: transform 0.3s ease;
}

/* تأثير Hover */
#welcomeBanner img:hover {
  transform: scale(1.05);
}

/* زر الإغلاق */
#welcomeBanner button {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  line-height: 26px;
  text-align: center;
  padding: 0;
}

/* ظهور تدريجي */
#welcomeBanner.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

#welcomeBannerOverlay.show {
  opacity: 0.6;
}