/**************** 1) تدرّج الهيدر ****************/
:root, html :where(*) { --header-text-color:#fff !important; }

.store-header,
.store-header::before,
#mainnav,
.store-header #mainnav,
.store-header .main-nav-container,
.main-nav-container,
.header-inner-wrapper {
  background: linear-gradient(90deg, #008b3f 0%, #00b956 50%, #00d76c 100%) !important;
  color: var(--header-text-color) !important;
  border: none !important;
}
#mainnav.bg-white, .main-nav-container.bg-white { background: transparent !important; }
.shadow-default { box-shadow: none !important; }

/* مسافة بسيطة أسفل الهيدر */
.store-header { padding-bottom: 12px !important; }

/**************** 2) تصميم شريط البحث ككرت مستقل ****************/
.top-navbar { 
  background: transparent !important;
  padding: 0 !important;
}

.top-navbar .container { 
  max-width: 860px !important;
  margin-inline: auto !important;
}

/* إزاحة خفيفة للأسفل */
.top-navbar .header-search,
.top-navbar salla-search.hdr-srch,
.top-navbar .hdr-srch {
  position: relative !important;
  transform: translateY(4px) !important;
  z-index: 5;
  display: block !important;
  width: 100% !important;
}

/* شكل الكرت الداكن المضغوط */
.hdr-srch .s-search-input-wrapper {
  background: #15181d !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  height: 40px !important;
  padding-inline: 12px 10px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25) !important;
  transition: box-shadow .2s ease, height .2s ease, transform .2s ease;
}

/* يتمدّد عند التركيز */
.hdr-srch .s-search-input-wrapper:focus-within {
  height: 44px !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.28) !important;
  transform: translateY(2px);
}

/* فاصل بسيط بعد الشريط */
.top-navbar::after {
  content:""; display:block;
  height: 10px;
  background: transparent;
}

/**************** 3) تنسيق النص والأيقونة ****************/
.hdr-srch .s-search-container.s-search-inline { width: 100% !important; }

.hdr-srch .s-search-input {
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  width: 100% !important;
  height: 40px !important;
  line-height: 40px !important;
  color: #e7e9ee !important;
  font-size: 15px !important;
}
.hdr-srch .s-search-input::placeholder { color: #9aa3ae !important; }

.hdr-srch .s-search-icon-wrap,
.hdr-srch .s-search-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  color: #9aa3ae !important;
  fill: currentColor !important;
}

/* اتجاه RTL */
html[dir="rtl"] .hdr-srch .s-search-input-wrapper { flex-direction: row-reverse !important; }
html[dir="rtl"] .hdr-srch .s-search-icon-wrap { margin-inline-start: 8px !important; margin-inline-end: 6px !important; }

/**************** 4) تحسين الموبايل ****************/
@media (max-width: 640px){
  .store-header { padding-bottom: 10px !important; }
  .top-navbar .container { max-width: 92% !important; }

  .hdr-srch .s-search-input-wrapper {
    height: 36px !important;
    border-radius: 12px !important;
    padding-inline: 10px 8px !important;
    box-shadow: 0 6px 14px rgba(0,0,0,0.22) !important;
  }
  .hdr-srch .s-search-input {
    height: 36px !important;
    line-height: 36px !important;
    font-size: 14px !important;
  }
  .hdr-srch .s-search-icon-wrap,
  .hdr-srch .s-search-icon {
    width: 24px !important;
    height: 24px !important;
  }
  .hdr-srch .s-search-input-wrapper:focus-within {
    height: 40px !important;
    transform: translateY(1px);
  }
}


/* إضاءة متحركة خضراء ناعمة على الشريط السفلي */
/* وميض تمرير البطاقة على الشريط السفلي */
#app .mobile-nav {
  position: relative;
  overflow: hidden;
}

/* نستخدم ::before حتى لا يتعارض مع أي ::after سابق */
#app .mobile-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: -45%;
  width: 45%;
  height: 100%;
  pointer-events: none;
  /* تدرج الوميض الأخضر */
  background: linear-gradient(
    90deg,
    rgba(0,255,102,0) 0%,
    rgba(0,255,102,0.45) 50%,
    rgba(0,255,102,0) 100%
  );
  filter: blur(6px);
  transform: skewX(-10deg);
  animation: cardSwipe 3.2s ease-in-out infinite;
  will-change: transform, left, opacity;
}

@keyframes cardSwipe {
  0%   { left: -55%; opacity: 0; }
  15%  { opacity: 1; }
  50%  { left: 105%; opacity: 1; }
  70%  { opacity: 0.6; }
  100% { left: 105%; opacity: 0; }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  #app .mobile-nav::before { animation: none; opacity: 0; }
}

/* زر "أضف للسلة" متناسق ومخفف التعتيم */
.s-button-element.s-button-primary {
  background: linear-gradient(90deg, #136b4b 0%, #00ff88 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 255, 136, 0.25);
}

/* عند التمرير */
.s-button-element.s-button-primary:hover {
  background: linear-gradient(90deg, #00ff88 0%, #136b4b 100%) !important;
  box-shadow: 0 0 14px rgba(0, 255, 136, 0.4);
  transform: translateY(-2px);
}

/* عند الضغط */
.s-button-element.s-button-primary:active {
  transform: scale(0.97);
  box-shadow: 0 0 5px rgba(0, 255, 136, 0.3);
}

/* ===== إزالة الخلفية/الإطار عن سلايدر صور المنتج في سلة ===== */

/* الحاوية الرئيسية للسلايدر */
salla-slider.details-slider,
salla-slider.details-slider .s-slider-container,
salla-slider.details-slider .swiper {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* الشرائح وروابط الصور */
salla-slider.details-slider .swiper-wrapper,
salla-slider.details-slider .swiper-slide,
salla-slider.details-slider .homeslider__slide,
salla-slider.details-slider .homeslider__slide img,
salla-slider.details-slider .swiper-slide img {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* مصغرات الصور (الثَمبنيلز) */
salla-slider.details-slider .s-slider-thumbs,
salla-slider.details-slider .s-slider-thumbs .swiper,
salla-slider.details-slider .s-slider-thumbs .swiper-slide,
salla-slider.details-slider .s-slider-thumbs img {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* تعطيل أي ألوان خلفية افتراضية شائعة في سلة */
salla-slider.details-slider .bg-white,
salla-slider.details-slider .bg-gray-50,
salla-slider.details-slider .bg-gray-100 {
  background-color: transparent !important;
}

/* في حال أضيفت حدود عبر Utilities */
salla-slider.details-slider [class*="border"] {
  border-color: transparent !important;
}

/* إزالة أي مسافات قد تظهر كـ “هامش أبيض” حول الصورة */
salla-slider.details-slider .s-slider-container,
salla-slider.details-slider .swiper-slide {
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== ضبط مظهر صور المنتجات داخل السلة ===== */

/* الحاوية التي تحتوي الصورة */
.cart-image-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 80px !important;   /* يمكنك تصغير الرقم حسب ذوقك */
  height: 80px !important;
  background: transparent !important;
  border: none !important;
}

/* الصورة نفسها */
.cart-image-btn img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* لتظهر الصورة كاملة بدون قص */
  object-position: center !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* لو أردت جعلها أصغر قليلاً */
@media (max-width: 768px) {
  .cart-image-btn {
    width: 64px !important;
    height: 64px !important;
  }
}
/* أبقِ الصور/الخلفيات كما هي، فقط أزل اللون الأبيض */
.menu_bg,
.nav-img,
.lazy_bg-cover {
  background-color: transparent !important;   /* لا تستعمل background:none */
  /* اختياري لتحسين العرض */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* لو كانت الأيقونة <img> وليست background-image */
.menu_bg img,
.nav-img img {
  background-color: transparent !important;
  display: block;
}

/* أزل أي طبقة تراكب مُلوّنة فقط إن وُجدت */
.menu_bg::before,
.menu_bg::after,
.lazy_bg-cover::before,
.lazy_bg-cover::after {
  /* لا تلمس background الأساسية */
  background-color: transparent !important;
}

/* ================================
   قسم المميزات — نسخة 4 بطاقات
   جوال: تمرير أفقي
   لابتوب: 4 بطاقات بصف واحد بدون تمرير
   ================================ */

/* منع قصّ من الحاويات العليا */
.s-block--features,
.s-block--features.container,
.s-block--features .container { overflow: visible !important; }

/* العناوين */
.s-block--features .features--title-outer { text-align:center; margin-bottom:22px; }
.s-block--features .features--title-outer h3 { color:#fff; font-weight:800; font-size:1.6rem; }
.s-block--features .features--title-outer p  { color:#fff; opacity:.8; font-size:1rem; }

/* الأساس: جوال/تابلت = صف واحد وتمرير أفقي */
.s-block--features .grid{
  display:flex !important;
  align-items:stretch;
  gap:12px;
  flex-wrap:nowrap !important;

  overflow-x:auto !important;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:12px;
  padding-inline:12px; /* كي لا تنقص آخر بطاقة */
}
.s-block--features .grid::-webkit-scrollbar{ display:none; }
.s-block--features .grid{ scrollbar-width:none; -ms-overflow-style:none; }

/* البطاقة */
.s-block--features__item{
  flex:0 0 auto;
  min-width:clamp(220px, 78vw, 320px);  /* عرض مناسب للجوال */
  scroll-snap-align:start;

  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.15);
  border-radius:16px;
  text-align:center;
  color:#fff;
  padding:18px 14px 20px;
  backdrop-filter:blur(6px);
  transition:border-color .25s, box-shadow .25s, transform .25s;
  overflow:visible !important;
  position:relative;
}

/* الأيقونة */
.s-block--features__item .feature-icon{
  width:60px; height:60px;
  display:grid; place-items:center;
  margin:0 auto 10px;
  background:rgba(255,255,255,.08);
  border-radius:14px;
  position:relative; top:0 !important; transform:none !important; margin-top:0 !important;
  z-index:2;
}
.s-block--features__item .feature-icon img{
  display:block; max-width:70%; height:auto;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}

/* العنوان + الوصف */
.s-block--features__item h4{ color:#fff !important; font-size:1.05rem; font-weight:700; margin:8px 0 6px; line-height:1.6; }
.s-block--features__item p { color:#fff !important; opacity:.9; font-size:.95rem; line-height:1.7; margin:0; }

/* هوفر على الأجهزة الداعمة فقط */
@media (hover:hover){
  .s-block--features__item:hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.25);
    box-shadow:0 8px 20px rgba(0,0,0,.28);
  }
}

/* الجوال: منع أي تحريك يسبب قصّ */
@media (max-width: 768px){
  .s-block--features .grid{ touch-action:pan-x; }
  .s-block--features__item{ transform:none !important; }
}

/* RTL */
html[dir="rtl"] .s-block--features .grid{ scroll-snap-type:x mandatory; }

/* ===== لابتوب وما فوق: 4 بطاقات بصف واحد كامل بدون تمرير ===== */
@media (min-width: 1024px){
  .s-block--features .grid{
    flex-wrap:wrap !important;       /* اسمح بالتفاف لمرة واحدة */
    overflow-x:visible !important;   /* لا تمرير أفقي */
    padding-inline:0;
    gap:16px;                        /* مسافات أنسب لسطح المكتب */
    justify-content:center;          /* توسيط الصف */
  }
  .s-block--features__item{
    min-width:0;                     /* ألغِ حد الجوال */
    flex:0 0 calc(25% - 12px);       /* أربع بطاقات في الصف */
    max-width:320px;                 /* حد أقصى اختياري */
    scroll-snap-align:unset;         /* لا حاجة للسناب */
  }
}

/* ===============================
   إصلاح تصميم الماركات التجارية
   - مربعات متناسقة
   - مسافات معتدلة (بدون فراغات كبيرة)
   - صور غير ممغوطة
   =============================== */

/* شبكة الماركات */
[id^="brand-section"] .grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 16px !important; /* مسافات معتدلة بين العناصر */
  align-items: center;
  justify-items: center;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}

/* كل عنصر داخل الشبكة */
[id^="brand-section"] .grid > * {
  aspect-ratio: 1 / 1; /* المربّع */
  width: 100%;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* الصور داخل العناصر */
[id^="brand-section"] .grid img {
  width: auto !important;
  height: auto !important;
  max-width: 80% !important;
  max-height: 80% !important;
  object-fit: contain !important;
  display: block;
  image-rendering: auto;
  -webkit-user-drag: none;
}

/* تأثير بسيط عند التمرير */
[id^="brand-section"] .grid > *:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.25);
}

/* تصغير المسافات وعدد الأعمدة في الجوال */
@media (max-width: 1024px) {
  [id^="brand-section"] .grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 640px) {
  [id^="brand-section"] .grid {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)) !important;
    gap: 10px !important;
  }
  [id^="brand-section"] .grid > * {
    padding: 8px;
  }
}

/* منع تمدد الصور داخل الروابط */
[id^="brand-section"] a img {
  width: auto !important;
  height: auto !important;
  max-width: 80% !important;
  max-height: 80% !important;
  object-fit: contain !important;
}

.footer_logo{
margin-top: 0 !important;
}
.footer-social-outer{
margin-top: 24px;
max-width: 80%; /*يتم حذفه عند اضافة ايقونات اكثر*/ 
}
.footer-social-item a {
    padding: 8px;
    background: #ffffff38;
    border-radius: 8px !important;
}
.footer-social-item {
width: 80%;
}

.wa-widget {
    background-color: #108854;
}