/* =========================================================
   تطبيق ستايل فوتر بالكامل على متجر مقدار
   ========================================================= */

/* 1. إجبار الفوتر والحاوية الداخلية على أخذ اللون الأخضر الداكن */
footer,
.store-footer,
.site-footer,
.footer-main,
footer .container,
footer .footer-content {
  background-color: #004d19 !important; /* لون مقدار الزيتي الداكن */
  color: #ffffff !important;
}

/* 2. إزالة أي حاوية بيضاء داخلية داخل الفوتر */
footer div,
footer section,
.store-footer div,
.footer-wrapper {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 3. جعل كل العناوين والنصوص باللون الأبيض */
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
footer p, footer span, footer div, footer li, footer a {
  color: #ffffff !important;
}

/* 4. إعطاء الروابط لون أبيض ناعم وتأثير التمرير */
footer a {
  color: #e2e2e2 !important;
  transition: color 0.2s ease !important;
  text-decoration: none !important;
}

footer a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* 5. إعادة تنسيق أيقونات التواصل والأزرار بأطر بيضاء */
footer .social-link,
footer .contact-item,
footer [class*="icon"],
footer .btn {
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}

/* 6. تحسين ألوان أرقام التواصل والبريد الإكتروني */
footer a[href^="tel:"], 
footer a[href^="mailto:"],
footer a[href*="wa.me"] {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* 7. القوس العلي للفوتر بالكامل */
footer,
.store-footer {
  border-top-left-radius: 50% 25px !important;
  border-top-right-radius: 50% 25px !important;
  padding-top: 40px !important;
  overflow: hidden !important;
}

/* 8. الشريط السفلي للحقوق ووسائل الدفع */
footer .footer-sub,
footer .copyrights,
footer [class*="bottom"] {
  border-top: 1px dashed rgba(255, 255, 255, 0.25) !important;
  background-color: #003812 !important; /* درجة أغمق قليلاً للشريط السفلي */
}

/* 9. تعديل للموبايل */
@media (max-width: 768px) {
  footer,
  .store-footer {
    border-top-left-radius: 50% 15px !important;
    border-top-right-radius: 50% 15px !important;
    text-align: center !important;
  }
}



/* =========================================================
   التصميم النهائي الكامل لمتجر سلة (ثيم عالي)
   - اللون الأساسي: #323e34
   - تأثير هوفر انسيابي طافي (رفع الكارت + ظل ناعم + تكبير للصورة)
   - كروت مفرغة تندمج مع خلفية المتجر
   - عنوان قسم فخم مع خط سفلي ممتد
   - زر إضافة للسلة مستطيل الزوايا مع رمز (+) فقط
   - متجاوب وموزون للكمبيوتر والجوال
   ========================================================= */

/* ---------------------------------------------------------
   1. عنوان القسم العلوي (فخم، غير مقصوص، مع خط سفلي ممتد)
   --------------------------------------------------------- */
[data-component-id*="featured-products"] salla-button,
[data-component-id*="featured-products"] .s-button-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

button.tab-trigger.s-button-element,
button.tab-trigger.s-button-element.is-active,
salla-button.is-active button.tab-trigger {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 16px 20px 16px !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 10px auto 25px auto !important;
}

button.tab-trigger.s-button-element::before {
  display: none !important;
}

button.tab-trigger.s-button-element .s-button-text,
button.tab-trigger.s-button-element span {
  color: #323e34 !important;
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.5 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 2 !important;
}

button.tab-trigger.s-button-element::after,
button.tab-trigger.s-button-element.is-active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 160% !important;
  max-width: 280px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #323e34 20%, #323e34 80%, transparent) !important;
  border-radius: 2px !important;
  z-index: 1 !important;
}

/* ---------------------------------------------------------
   2. تفريغ كارت المنتج وتأثير اللمعة (Shine) على الصورة فقط
   --------------------------------------------------------- */
html body .product-block-outer,
html body salla-product-card,
html body .product-card {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  padding: 8px !important;
  position: relative !important;
  overflow: visible !important;
  transform: none !important; /* إلغاء رفع الكارت */
}

/* إلغاء أي حركة طفو أو ظل للكارت عند التمرير */
html body .product-block-outer:hover,
html body salla-product-card:hover,
html body .product-card:hover {
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* حاوية صورة المنتج لحصر اللمعة داخل حدودها */
html body .product-card a:first-of-type,
html body .product-block-outer a:first-of-type,
html body .product-card a:has(img),
html body .product-block-outer a:has(img),
html body .product-card .image-wrapper,
html body .s-product-card-image-wrap {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

/* شريط اللمعة الأبيض المائل (مخفي في الطرف قبل التمرير) */
html body .product-card a:first-of-type::before,
html body .product-block-outer a:first-of-type::before,
html body .product-card a:has(img)::before,
html body .product-block-outer a:has(img)::before,
html body .product-card .image-wrapper::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  transform: skewX(-25deg) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

/* حركة مرور اللمعة فوق الصورة عند الـ Hover */
html body .product-card:hover a:first-of-type::before,
html body .product-block-outer:hover a:first-of-type::before,
html body .product-card:hover a:has(img)::before,
html body .product-block-outer:hover a:has(img)::before,
html body .product-card:hover .image-wrapper::before {
  left: 200% !important;
  transition: left 0.75s ease-in-out !important;
}

/* بقاء الصورة ثابتة بأبعادها الطبيعية دون تكبير */
.product-block-outer img,
.product-card img {
  border-radius: 12px !important;
  transform: none !important;
}

.product-block-outer:hover img,
.product-card:hover img {
  transform: none !important;
}

/* إلغاء التقوسات وأيقونة المعاينة */
html body .product-block__info::before,
html body .product-block__info::after,
html body .showPreviewBtn,
html body .product-card .btn-quick-view,
html body .preview-btn-down {
  display: none !important;
  content: none !important;
}


/* 1. ضبط الحاوية المباشرة للصورة وحصر اللمعة داخل أبعادها */
html body .product-block__thumb .thumb-wrapper {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  display: flex !important;
}

/* 2. رسم شريط اللمعة الضوئي المائل فوق مساحة الصورة */
html body .product-block__thumb .thumb-wrapper::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -140% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  transform: skewX(-25deg) !important;
  z-index: 5 !important;
  pointer-events: none !important;
  transition: left 0.75s ease-in-out !important;
}

/* 3. انطلاق اللمعة فوق الصورة بمجرد ملامسة الماوس للكارت */
html body custom-salla-product-card:hover .thumb-wrapper::after,
html body .product-block:hover .thumb-wrapper::after,
html body .s-products-slider-card:hover .thumb-wrapper::after {
  left: 170% !important;
}

/* ---------------------------------------------------------
   3. تفاصيل المنتج (الشارة، العنوان، الوصف، السعر)
   --------------------------------------------------------- */
html body .product-block-outer [class*="badge"],
html body .product-card [class*="badge"],
html body .product-block-outer .promotion-title {
  background-color: #323e34 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
}

html body .product-block__info .product-title {
  display: block !important;
  text-decoration: none !important;
  text-align: center !important;
  margin-top: 8px !important;
}

/* النص الفرعي */
html body .product-block__info .product-subtitle,
html body .product-block-outer .product-subtitle {
  color: #8c7355 !important;
  font-size: 0.85rem !important;
  text-align: center !important;
  font-weight: 600 !important;
  margin-bottom: 14px !important;
}

html body .product-block__info .product-title h3,
html body .product-block__info .product-title .title {
  color: #1a1a1a !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin: 6px 0 4px 0 !important;
  line-height: 1.4 !important;
}

html body .product-block__info .price-wrapper {
  text-align: center !important;
  margin-bottom: 12px !important;
}

html body .product-block__info .price-wrapper span,
html body .product-block__info .price-wrapper .pc-t {
  color: #323e34 !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
}

html body .product-block__info .price-wrapper i.sicon-sar {
  font-size: 0.85rem !important;
  margin-right: 2px !important;
}

html body .product-block__info .price-wrapper::before {
  display: none !important;
}

/* ---------------------------------------------------------
   4. زر "أضف للسلة" وإلغاء أيقونة السلة ومساحتها تماماً
   --------------------------------------------------------- */
html body .btn--add-to-cart,
html body .btn--add-to-cart * {
  border-radius: 8px !important;
}

html body .btn--add-to-cart button.s-button-element,
html body salla-add-product-button button.s-button-element,
html body .s-button-element.s-button-solid.s-button-primary {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1.5px solid #323e34 !important;
  border-radius: 8px !important;
  color: #323e34 !important;
  box-shadow: none !important;
  height: 42px !important;
  width: 100% !important;
  padding: 0 16px !important;
  cursor: pointer !important;
  transition: all 0.25s ease-in-out !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* إزالة العناصر الوهمية التي يولدها ثيم عالي للأيقونة */
html body .aaliicon-add-to-cart-outer button::before,
html body .aaliicon-add-to-cart-outer button::after,
html body .btn--add-to-cart button.s-button-element::before,
html body .btn--add-to-cart button.s-button-element::after,
html body salla-add-product-button button::before,
html body salla-add-product-button button::after,
html body .btn--add-to-cart .s-button-text::before,
html body salla-add-product-button .s-button-text::before,
html body .btn--add-to-cart button:hover::before,
html body .btn--add-to-cart button:hover::after,
html body salla-add-product-button button:hover::before,
html body salla-add-product-button button:hover::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* إخفاء أي وسم أيقونة صريح داخل الزر */
html body .btn--add-to-cart button i,
html body .btn--add-to-cart button svg,
html body .btn--add-to-cart button span:not(.s-button-text),
html body salla-add-product-button button i,
html body salla-add-product-button button svg,
html body salla-add-product-button button span:not(.s-button-text) {
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
}

/* توسيط النص وإظهار علامة + فقط */
html body .btn--add-to-cart button.s-button-element .s-button-text,
html body salla-add-product-button button .s-button-text {
  color: #323e34 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: color 0.25s ease !important;
}

html body .btn--add-to-cart button.s-button-element .s-button-text::after,
html body salla-add-product-button button .s-button-text::after {
  content: "+" !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* تفاعل الهوفر لزر السلة */
html body .btn--add-to-cart button.s-button-element:hover,
html body salla-add-product-button button.s-button-element:hover {
  background-color: #323e34 !important;
  border-color: #323e34 !important;
}

html body .btn--add-to-cart button.s-button-element:hover .s-button-text,
html body salla-add-product-button button.s-button-element:hover .s-button-text {
  color: #ffffff !important;
}

/* ---------------------------------------------------------
   5. زر "عرض الكل" السفلي
   --------------------------------------------------------- */
button.s-block__display-all,
.s-block__display-all {
  background: transparent !important;
  color: #323e34 !important;
  padding: 6px 20px !important;
  font-weight: 700 !important;
  border-radius: 20px 20px 20px 20px !important:
  font-size: 0.88rem !important;
  transition: all 0.25s ease !important;
}

button.s-block__display-all:hover,
.s-block__display-all:hover {
  background-color: #323e34 !important;
  color: #ffffff !important;
  border-radius: 30px 20px 20px 20px !important:
  transition: all 0.25s ease !important;
}


/* ---------------------------------------------------------
   6. تنسيقات شاشة الجوال (أقل من 768px)
   --------------------------------------------------------- */
@media (max-width: 768px) {
  html body .product-block-outer,
  html body .product-block__info,
  html body .product-card {
    padding: 4px !important;
  }

  /* تعطيل رفع الكارت باللمس في الموبايل لتفادي القفز أثناء السكرول */
  html body .product-block-outer:hover,
  html body salla-product-card:hover,
  html body .product-card:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
  }

  html body .product-block__info .product-subtitle,
  html body .product-block-outer .product-subtitle {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    margin: 4px 0 10px 0 !important;
  }

  html body .product-block__info .product-title h3,
  html body .product-block__info .product-title .title {
    font-size: 0.86rem !important;
    line-height: 1.3 !important;
    min-height: 36px !important;
    margin: 4px 0 6px 0 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  html body .product-block__info .price-wrapper {
    margin-bottom: 8px !important;
  }

  html body .product-block__info .price-wrapper span,
  html body .product-block__info .price-wrapper .pc-t {
    font-size: 0.98rem !important;
  }

  html body .btn--add-to-cart button.s-button-element,
  html body salla-add-product-button button.s-button-element {
    height: 36px !important;
    padding: 0 10px !important;
    border-radius: 7px !important;
  }

  html body .btn--add-to-cart button.s-button-element .s-button-text,
  html body salla-add-product-button button .s-button-text {
    font-size: 0.82rem !important;
    gap: 5px !important;
  }

  html body .product-block-outer [class*="badge"],
  html body .product-card [class*="badge"],
  html body .product-block-outer .promotion-title {
    font-size: 0.68rem !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
  }
}