/* Add custom CSS styles below */ 

/*Edit main Menu Start*/

/* ===========================
   🌟 Main Menu Modern Design
   =========================== */

/* ✅ خلفية القائمة بتدرج ذهبي أنيق */
#mainnav {
  background: linear-gradient(
    180deg,
    #f2bf84 0%,   /* ذهبي غامق */
    #f5d7a3 100%  /* ذهبي فاتح */
  ) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ✅ النصوص في القائمة (الرئيسية، التصنيفات، من نحن...) */
#mainnav a,
#mainnav .salla-menu a,
#mainnav .navbar-brand h1,
#mainnav .main-menu a {
  color: #6d3c02 !important; /* بني أنيق */
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.3px;
  transition: color 0.3s ease-in-out;
}

/* ✨ عند تمرير الماوس تتحول إلى ذهبي */
#mainnav a:hover,
#mainnav .main-menu a:hover {
  color: #f2bf84 !important;
}

/* ✅ الأيقونات (البروفايل، السلة، إلخ) */
#mainnav .header-btn__icon,
#mainnav .s-cart-summary-icon,
#mainnav .sicon-shopping-bag {
  color: #6d3c02 !important; /* بني */
  transition: color 0.3s ease-in-out;
}

/* ✨ عند تمرير الماوس على الأيقونات */
#mainnav .header-btn__icon:hover,
#mainnav .s-cart-summary-icon:hover,
#mainnav .sicon-shopping-bag:hover {
  color: #f2bf84 !important; /* ذهبي */
}

/* ✅ الشعار */
#mainnav .navbar-brand img {
  filter: brightness(1.05) contrast(1.1);
  max-height: 55px;
}

/* ✅ إزالة الخلفيات الداخلية */
#mainnav .inner,
#mainnav .container {
  background: transparent !important;
}

/* 🌟 زر القائمة في الجوال (Toggle / mburger) */
.mburger {
  background-color: #6d3c02 !important; /* بني أساسي */
  border: 2px solid #f2bf84 !important; /* إطار ذهبي */
  border-radius: 8px !important;
  padding: 6px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease-in-out;
}

/* 🎨 أيقونة القائمة */
.mburger .sicon-menu {
  color: #fff8e1 !important; /* ذهبي أبيض */
  font-size: 22px !important;
  transition: color 0.3s ease-in-out;
}

/* ✨ عند تمرير الماوس */
.mburger:hover {
  background-color: #f2bf84 !important; /* ذهبي فاتح */
  border-color: #6d3c02 !important;
  box-shadow: 0 0 10px rgba(242, 191, 132, 0.4);
}
.mburger:hover .sicon-menu {
  color: #6d3c02 !important; /* تتحول الأيقونة إلى بني */
}

/* 📱 للجوال */
@media (max-width: 768px) {
  .mburger {
    padding: 8px !important;
    font-size: 20px !important;
  }
}

/* ✅ القوائم المنسدلة */
.sub-menu *,
.dropdown-menu *,
div[class*="sub-menu"] a,
div[class*="dropdown"] a {
  color: #6d3c02 !important;
  background-color: #ffffff !important;
  font-weight: 600 !important;
  transition: all 0.25s ease-in-out !important;
}

.sub-menu a:hover,
.dropdown-menu a:hover,
div[class*="sub-menu"] a:hover,
div[class*="dropdown"] a:hover {
  color: #8b4d03 !important;
  background-color: #fff7e8 !important;
  border-radius: 6px !important;
}
/* 📵 إخفاء زر القائمة (Toggle Menu) في شاشات الكمبيوتر */
@media (min-width: 992px) {
  .mburger {
    display: none !important;
  }
}
/* 🖱️ في شاشات الكمبيوتر: عند تمرير الماوس على القائمة يصبح النص أبيض */
@media (min-width: 992px) {
  #mainnav a:hover,
  #mainnav .main-menu a:hover {
    color: #ffffff !important;
  }
}



/* EditMain menu End */

/*Body background Start*/
/* 🌤️ خلفية ثابتة بدرجات ذهبية فاتحة ناعمة */
/* 🌅 خلفية ذهبية احترافية بتدرج من غامق إلى فاتح */
.app-inner {
  background: linear-gradient(
    180deg,
    #f2bf84 0%,    /* ذهبي دافئ غامق في الأعلى */
    #f7d7a3 40%,   /* درجة ذهبية متوسطة منتصف الصفحة */
    #fff6e9 100%   /* فاتح ناعم جدًا في الأسفل */
  ) !important;

  background-attachment: fixed !important;
  min-height: 100vh !important;
  background-size: cover;
  transition: background 0.6s ease-in-out;
}


/* ✅ العناصر الداخلية بشفافية خفيفة */
.container,
.s-products-list-wrapper,
.store-footer,
.store-header {
  background-color: transparent !important;
}

/* ✅ النصوص متناسقة وواضحة */
body, .s-products-list-wrapper .s-product-card-content-title a {
  color: #2b2b2b !important;
}

/* ✅ بطاقات المنتجات بخلفية بيضاء */
.s-product-card-entry {
  background-color: #ffffff !important;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* ✅ تذييل بلون ذهبي باهت متناغم */
.store-footer {
  background: #f9e5c7 !important;
  color: #5a3e15 !important;
}

/*Body background End*/


/*Slides Hero Start*/


/*Slides Hero End*/

/* Prpducts Box Start */ 

/* 🟤 تغيير لون زر إضافة للسلة إلى البني */
.s-button-element,
.s-button-primary-outline,
.s-button-primary-outline:hover,
.s-button-primary-outline:focus {
  background-color: #6d3c02 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: background-color 0.3s ease !important;
}

/* ✨ تأثير عند المرور */
.s-button-element:hover {
  background-color: #8b4d03 !important;
}

/* ❤️ تحسين مظهر زر المفضلة */
.s-product-card-wishlist-btn .s-button-element {
  background-color: #fff !important; /* خلفية بيضاء واضحة */
  border: 1px solid #6d3c02 !important; /* إطار بني */
  color: #6d3c02 !important; /* أيقونة بنية */
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

/* 💫 عند تمرير الماوس */
.s-product-card-wishlist-btn .s-button-element:hover {
  background-color: #6d3c02 !important;
  color: #fff !important; /* الأيقونة تتحول بيضاء عند الهوفر */
  border-color: #6d3c02 !important;
  transform: scale(1.05);
}

/* 💖 عند الإضافة للمفضلة */
.s-product-card-wishlist-btn.favorited .s-button-element,
.s-product-card-wishlist-btn.active .s-button-element {
  background-color: #6d3c02 !important;
  color: #fff !important;
  border: none !important;
}

/* 🎯 لون الأيقونة داخل الزر */
.s-product-card-wishlist-btn .s-button-element i {
  color: inherit !important;
  font-size: 18px !important;
}
/* 🎬 حركة دخول المنتجات */
.s-product-card-entry {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s ease-out;
}

/* ✅ عند ظهورها */
.s-product-card-entry.show {
  opacity: 1;
  transform: translateY(0);
}

/* 💫 تأثير هوفر */
.s-product-card-entry:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 20px rgba(109, 60, 2, 0.15);
  transition: all 0.3s ease-in-out;
}

/* ✨ توهج ناعم عند الهوفر */
.s-product-card-entry:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(109, 60, 2, 0.2);
  pointer-events: none;
  transition: all 0.4s ease-in-out;
}

/* ✨ حركة دخول ناعمة وآمنة */
.s-product-card-entry {
  opacity: 1; /* إظهار فوري */
  transform: translateY(0);
  transition: all 0.6s ease-out;
}

/* عند التفعيل بالحركة */
.s-product-card-entry.animate {
  opacity: 1;
  transform: translateY(-10px);
}

/* 💫 هوفر أنيق */
.s-product-card-entry:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 20px rgba(109, 60, 2, 0.15);
  transition: all 0.3s ease-in-out;
}

/* ✨ توهج بسيط بنفس لون الهوية */
.s-product-card-entry:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  box-shadow: 0 0 15px rgba(109, 60, 2, 0.15);
  pointer-events: none;
}

/* 🖼️ تأثير Zoom على صورة المنتج */
.s-product-card-image {
  overflow: hidden;
  border-radius: 12px;
  transition: all 0.4s ease-in-out;
}

.s-product-card-image img {
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

/* عند تمرير الماوس */
.s-product-card-entry:hover .s-product-card-image img {
  transform: scale(1.08);
}

/* توهج خفيف حول الصورة أثناء الهوفر */
.s-product-card-entry:hover .s-product-card-image {
  box-shadow: 0 0 15px rgba(109, 60, 2, 0.25);
}

------------------------------------------



------------------------------------------
/* Products Box End */

/* Features Section Design Start */
/* 🎯 تصميم قسم ما يميزنا */
.s-block--features {
  margin-top: 60px;
  margin-bottom: 60px;
}

/* 🎁 الصندوق الأساسي */
.s-block--features__item {
  background: rgba(255, 255, 255, 0.85); /* شفاف قليلاً */
  border-radius: 20px;
  text-align: center;
  padding: 40px 25px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

/* ✨ عند تمرير الماوس على الصندوق */
.s-block--features__item:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(109, 60, 2, 0.25);
}

/* 🎨 تصميم الأيقونة */
.feature-icon {
  width: 85px;
  height: 85px;
  margin: 0 auto 20px;
  background: rgba(109, 60, 2, 0.15); /* بني فاتح شفاف */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  color: #6d3c02; /* لون الأيقونة الأساسي */
  transition: all 0.4s ease;
}

/* 🧠 عند تمرير الماوس — تغيّر الألوان */
.s-block--features__item:hover .feature-icon {
  background: #6d3c02; /* الخلفية البنية */
  color: #fff !important; /* الأيقونة باللون الأبيض */
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(109, 60, 2, 0.3);
}

/* 🧩 دعم جميع أنواع الأيقونات (i أو svg) */
.s-block--features__item:hover .feature-icon i,
.s-block--features__item:hover .feature-icon svg {
  color: #fff !important;
  fill: #fff !important;
  transition: color 0.4s ease, fill 0.4s ease;
}

/* 📝 العناوين والنصوص */
.s-block--features__item h2 {
  font-size: 20px;
  font-weight: 700;
  color: #2d1b0b;
  margin-bottom: 10px;
  transition: color 0.3s ease;
}

.s-block--features__item p {
  color: #555;
  font-size: 15px;
  line-height: 1.7;
}

/* 📱 متجاوب للأجهزة الصغيرة */
@media (max-width: 768px) {
  .s-block--features__item {
    padding: 25px 15px;
  }

  .feature-icon {
    width: 70px;
    height: 70px;
    font-size: 30px;
  }

  .s-block--features__item h2 {
    font-size: 18px;
  }
}

/* Features Section Design End */
/* Testmonial Design Start */

/* ===== 🟤 قسم آراء العملاء (Testimonials) ===== */

/* خلفية ناعمة للقسم */
.s-reviews-swiper {
  background: linear-gradient(180deg, #fff7e8 0%, #fffaf3 100%);
  padding: 60px 20px;
  border-radius: 20px;
}

/* 🎯 تصميم البطاقة */
.s-reviews-testimonial {
  background: #ffffff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease-in-out;
  position: relative;
  overflow: hidden;
}

/* ✨ تأثير عند المرور */
.s-reviews-testimonial:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(109, 60, 2, 0.15);
}

/* ✅ الإطار الجانبي الذهبي */
.s-reviews-testimonial::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, #f2bf84, #c78a3e);
  border-radius: 6px 0 0 6px;
}

/* 🧍‍♂️ صورة العميل */
.s-reviews-testimonial__avatar img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50%;
  border: 3px solid #f2bf84;
  margin: 0 auto 10px;
  display: block;
  transition: transform 0.3s ease;
}
.s-reviews-testimonial:hover .s-reviews-testimonial__avatar img {
  transform: scale(1.05);
}

/* 💬 أيقونة الاقتباس */
.s-reviews-testimonial__icon svg path {
  fill: #f2bf84 !important;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.s-reviews-testimonial:hover .s-reviews-testimonial__icon svg path {
  opacity: 0.8;
}

/* ✍️ نص التقييم */
.s-reviews-testimonial__text p {
  color: #333 !important;
  font-size: 16px !important;
  font-weight: 500;
  text-align: center;
  line-height: 1.8;
  margin: 15px 0;
}

/* 👤 اسم العميل */
.s-reviews-testimonial__info h2 {
  color: #6d3c02 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-align: center;
  margin-top: 10px;
}

/* ⭐ تقييم النجوم */
.s-reviews-testimonial__rating svg path {
  fill: #f2bf84 !important;
}

/* ⬅️➡️ أسهم التمرير */
.swiper-button-prev,
.swiper-button-next {
  background: #ffffff !important;
  border: 2px solid #6d3c02 !important;
  color: #6d3c02 !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: #6d3c02 !important;
  color: #fff !important;
  transform: scale(1.1);
}

/* ===== 🟤 عرض آراء العملاء اثنين اثنين ===== */

/* ✅ على الشاشات المتوسطة والكبيرة */
@media (min-width: 992px) {
  .s-reviews-swiper .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    justify-content: center !important;
    align-items: stretch !important;
  }

  .s-reviews-swiper .swiper-slide {
    width: 100% !important;
    height: auto !important;
  }

  .s-reviews-testimonial {
    margin: 0 !important;
  }

  /* تحريك الأسهم للأسفل قليلاً */
  .swiper-button-prev,
  .swiper-button-next {
    top: auto !important;
    bottom: -60px !important;
  }
}

/* 📱 في الجوال تبقى واحدة */
@media (max-width: 991px) {
  .s-reviews-swiper .swiper-wrapper {
    display: block !important;
  }

  .s-reviews-testimonial {
    padding: 20px;
  }

  .s-reviews-testimonial__text p {
    font-size: 14px !important;
  }

  .s-reviews-testimonial__avatar img {
    width: 65px !important;
    height: 65px !important;
  }
}

/* Testmonial Design End */


/* 🌟 Footer Modern Design Start */

/* ===============================
   🌟 تصميم فوتر احترافي نهائي ذهبي متدرج بتوهج
   =============================== */

/* الخلفية العامة للفوتر */
footer.store-footer,
.store-footer,
.store-footer__inner {
  background: linear-gradient(180deg, #825015 0%, #6d3c02 100%) !important;
  color: #ffffff !important;
  border: none !important;
  position: relative;
  overflow: hidden;
  padding-bottom: 60px !important;
}

/* العناوين */
.store-footer h3 {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin-bottom: 12px !important;
}

/* الروابط */
.store-footer a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.3s ease-in-out;
}
.store-footer a:hover {
  color: #f2bf84 !important;
}

/* النصوص */
.store-footer p,
.store-footer span,
.store-footer .unicode {
  color: #ffffff !important;
  font-size: 14px !important;
}

/* الأيقونات الاجتماعية */
.store-footer .s-social-icon svg path {
  fill: #ffffff !important;
  transition: fill 0.3s ease-in-out;
}
.store-footer .s-social-link:hover svg path {
  fill: #f2bf84 !important;
}

/* 💳 شريط طرق الدفع الذهبي المتدرج مع توهج */
.store-footer .payment-bar {
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.4px;
  color: #fff8e1; /* ذهبي فاتح للنص */
  background: linear-gradient(90deg, #b97a1f, #6d3c02, #b97a1f);
  background-size: 300% 300%;
  animation: glowShift 8s ease-in-out infinite;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  backdrop-filter: blur(6px);
  text-shadow: 0 0 6px rgba(255, 221, 160, 0.5);
  box-shadow: inset 0 0 10px rgba(242, 191, 132, 0.2);
  margin-top: 25px;
}

/* ✨ حركة التوهج الذهبي المتدرج */
@keyframes glowShift {
  0% {
    background-position: 0% 50%;
    box-shadow: 0 0 10px rgba(242, 191, 132, 0.3);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 0 0 20px rgba(242, 191, 132, 0.6);
  }
  100% {
    background-position: 0% 50%;
    box-shadow: 0 0 10px rgba(242, 191, 132, 0.3);
  }
}

/* الحقوق */
.store-footer .copyright-text {
  color: #ffffff !important;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 10px;
  padding-top: 15px;
  font-size: 13px !important;
  text-align: center;
  opacity: 0.9;
}

/* تأثير ظهور الفوتر */
.store-footer__inner.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* الجوال */
@media (max-width: 768px) {
  .store-footer .payment-bar {
    font-size: 12.5px;
    padding: 8px 0;
    line-height: 1.4;
  }
  .store-footer h3 {
    font-size: 15px !important;
  }
  .store-footer {
    padding-bottom: 55px !important;
  }
}

/* 🌟 Footer Modern Design End*/