/* Add custom CSS styles below */ /* ================ إعداد الألوان العامة ================ */
:root{
  --brand-color: #b82e71; /* لو تحب تغيّر علامة المتجر */
  --page-bg: #b82e71;     /* لون الخلفية الرمادي العام */
  --card-bg: #ffffff;     /* خلفية البطاقات/المحتوى */
  --muted: #6b6b6b;       /* لون نص ثانوي */
}

/* ================ الخلفية العامة ================ */
html, body, #app, .app-inner, .main-content, .relative {
  background-color: var(--page-bg) !important;
  color: #222 !important;
}

/* لو عندك iframe عرض المتجر: خلي الخلفية شفافة عشان يظهر الرمادي */
iframe, .store_preview, #store_preview {
  background: transparent !important;
}

/* ================ بطاقات المحتوى (product / sections) ================ */
.section, .card, .product-card, .store-section, .container, .site-wrapper {
  background: var(--card-bg) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(18,18,18,0.06) !important;
  padding: 12px !important;
}

/* ================ رؤوس وأزرار ================ */
.header, header, .site-header, .topbar {
  background: transparent !important; /* شفافية لو تحب */
}

/* أزرار رئيسية باللون البنفسجي الخاص بك */
.btn, button, .btn-primary, .button {
  background: var(--brand-color) !important;
  border-color: var(--brand-color) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* روابط */
a { color: var(--brand-color) !important; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ================ نصوص وأسعار (تعديل اللون عند الحاجة) ================ */
/* لو تبي تخلي الأسعار + تواريخ الطلب باللون الأبيض كما طلبت قبل،
   شيل التعليق (احذف /* و */) من الأسطر التالية */
 /*
.price, .product-price, .order-price, .order-date {
  color: #ffffff !important;
}
*/

/* نص ثانوي */
.small, .muted, .text-muted {
  color: var(--muted) !important;
}

/* ================ تعديل الفوتر ليناسب التصميم ================ */
.footer, footer, .site-footer {
  background: transparent !important;
  color: #333 !important;
}

/* ================ تحسين التباعد على الشاشات الضيقة ================ */
@media (max-width: 768px) {
  .card, .product-card, .container {
    padding: 10px !important;
    margin: 8px !important;
  }
}

/* ================ RTL دعم (لو الموقع عربي) ================ */
html[dir="rtl"] .card, html[dir="rtl"] .product-card {
  text-align: right !important;
}

/* ================ ملاحظات عرضية: أداة تصحيح سريعة ================ */
/* لو لاحظت عنصر ما لسه بلون غريب، افتح DevTools وحدد العنصر وانسخ الـ selector
   ثم تضيفه تحت وتكتب color/background الذي تريده مع !important. */
   /* ================================================
   🎀 تخصيص الخلفية إلى اللون الوردي الداكن #b82e71
   ================================================ */

/* الخلفية العامة */
html, body, #app, .app-inner, .main-content, .relative {
  background-color: #b82e71 !important;
}

/* البطاقات، الحاويات، صناديق المنتجات، مربعات البحث */
.container,
.section,
.card,
.product-card,
.store-section,
.site-wrapper,
header,
.search-bar,
.input,
.input-field,
.search-input,
form,
button,
.navbar,
.header,
.footer {
  background-color: #b82e71 !important;
  border: none !important;
}

/* إزالة أي خلفية بيضاء من عناصر داخلية */
div[style*="background: #fff"],
div[style*="background-color: #fff"],
section[style*="background: #fff"],
section[style*="background-color: #fff"] {
  background-color: #b82e71 !important;
}

/* النصوص تبقى واضحة باللون الأبيض */
body, h1, h2, h3, h4, h5, h6, p, span, a, label, input, button {
  color: #fff !important;
}

/* تخصيص الأزرار لتكون بنفس اللون البنفسجي لمتجرك */
button, .btn, .salla-btn, .product-btn {
  background-color: #b82e71 !important;
  color: #fff !important;
  border: none !important;
}

/* إزالة أي تباعد غريب أو حدود رمادية */
.container, .card, .section {
  box-shadow: none !important;
  border: none !important;
}

/* تصحيح الحواف */
.card, .product-card, .container {
  border-radius: 10px !important;
}

/* ================================================
   💡 ملاحظات إضافية
   - استخدم Ctrl + F5 بعد الحفظ لتحديث التغييرات
   - لو تبغى نخلي فقط مناطق معينة باللون الوردي (مو الكل)
     قلّي أي جزء بالضبط، مثل الهيدر فقط أو المنتجات فقط.
   ================================================ */
/* ================================================
   💖 جعل كل المربعات البيضاء بلون #b82e71
   ================================================ */

/* استهداف العناصر البيضاء مثل .inner و .container */
div.inner,
div.bg-inherit,
div.bg-white,
.container.bg-white,
.section.bg-white,
.card.bg-white,
.w-full.bg-inherit {
  background-color: #b82e71 !important;
  border: none !important;
}

/* تصحيح الحواف */
div.inner,
.container,
.section,
.card {
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* تعديل اللون في مربعات البحث والايقونات */
input,
.search-bar,
.search-input,
form,
button,
.header,
.navbar {
  background-color: #b82e71 !important;
  color: #fff !important;
  border: none !important;
}

/* النصوص تبقى بيضاء وواضحة */
div.inner *,
.container *,
.section *,
.card *,
.search-bar *,
input,
button,
label,
span,
a {
  color: #fff !important;
}

/* منع التداخل في العناصر التي تستخدم الوردي الفاتح للإعلانات */
.announcement-bar,
.promo-banner {
  background-color: #f5a9c3 !important; /* وردي فاتح مميز */
  color: #fff !important;
}
/* ================================================
   🎯 تخصيص كروت المنتجات فقط (الخلفية الداخلية)
   ================================================ */

/* الكرت نفسه */
.s-product-card-entry,
.s-product-card,
.custom-salla-product-card,
.product-card-entry,
.product-card-vertical,
.product-card,
.product,
div[class*="product-card"] {
  background-color: #e5e5e5 !important; /* رمادي فاتح */
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
}

/* محتوى الكرت (السعر، النجمة، النصوص) */
.s-product-card-entry *,
.s-product-card *,
.product-card *,
.product *,
.custom-salla-product-card * {
  color: #222 !important; /* نصوص غامقة وواضحة */
}

/* زر إضافة للسلة */
.s-product-card-entry button,
.product-card button,
.product button,
.add-to-cart,
.btn {
  background-color: #b82e71 !important; /* بنفسجي متجر زون بلس */
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
}

/* السعر والنجمة بلون بنفسجي فاتح */
.s-product-card-entry .price,
.product-card .price,
.product .price,
.icon,
.star {
  color: #b82e71 !important;
}

/* إزالة أي تداخل من ألوان سابقة */
div[class*="bg-white"],
div[class*="bg-inherit"] {
  background: transparent !important;
}
/* ================================================
   🛒 زر إضافة إلى السلة - لون أبيض بالكامل
   ================================================ */

/* الزر نفسه */
.s-product-card button,
.s-product-card .s-button-btn,
.s-product-card .s-button-element,
.s-product-card .salla-button,
.product-card button,
.product button,
.add-to-cart button,
.s-button-primary,
.s-button-outline {
  background-color: transparent !important; /* شفاف */
  border: 2px solid #fff !important; /* إطار أبيض أنيق */
  color: #fff !important; /* نص أبيض */
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

/* الأيقونة والنص داخل الزر */
.s-button-text,
.s-product-card button span,
.s-button-btn span,
.s-button-element span,
.salla-button span,
.s-button-icon,
.salla-button svg {
  color: #fff !important;
  fill: #fff !important;
}

/* تأثير عند المرور بالماوس (Hover) */
.s-product-card button:hover,
.s-product-card .s-button-element:hover,
.s-button-btn:hover {
  background-color: #ffffff !important;
  color: #b82e71 !important; /* نص بنفسجي غامق عند التفاعل */
}

.s-product-card button:hover svg,
.s-product-card button:hover span {
  color: #b82e71 !important;
  fill: #b82e71 !important;
}
/* ================================================
   🛒 جعل أيقونة السلة داخل زر "إضافة للسلة" باللون الأبيض
   ================================================ */

.s-product-card button svg,
.s-product-card button i,
.s-button-element svg,
.s-button-element i,
.salla-button svg,
.salla-button i {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* لو فيه أيقونة داخل span */
.s-product-card .s-button-text svg,
.s-product-card .s-button-text i {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* عند تمرير الماوس (Hover) نحافظ على التباين */
.s-product-card button:hover svg,
.s-product-card button:hover i {
  color: #b82e71 !important; /* نفس لون الزر عند التفاعل */
  fill: #b82e71 !important;
  stroke: #b82e71 !important;
}
/* ================================================
   🚀 حذف العنوان (منتجاتنا) وتقريب المنتجات للأعلى
   ================================================ */

/* إخفاء العنوان فقط */
.s-block_title h2,
.s-block_title .right-side h2 {
  display: none !important;
}

/* إزالة المسافة الناتجة بعد الإخفاء */
.s-block_title {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* تقريب قسم المنتجات للأعلى */
.s-products-list,
.vertical-products,
.s-block.container,
section.s-block {
  margin-top: -15px !important;
  padding-top: 0 !important;
}

/* ضبط المسافة بين الكروت */
.s-product-card-entry,
.custom-salla-product-card {
  margin-top: 5px !important;
}
/* ================================================
   🛒 تثبيت شكل زر "إضافة للسلة" بدون أي تغيير عند المرور
   ================================================ */

/* الشكل الأساسي */
button.s-button-element,
.s-button,
.s-button-outline,
.s-button-primary-outline {
  background-color: #b82e71 !important; /* الوردي */
  color: #ffffff !important; /* النص أبيض */
  border: none !important;
  transition: none !important;
}

/* تثبيت الشكل عند التمرير (بدون أي تغيير) */
button.s-button-element:hover,
.s-button:hover,
.s-button-outline:hover,
.s-button-primary-outline:hover {
  background-color: #b82e71 !important; /* يبقى نفس اللون */
  color: #ffffff !important; /* يبقى النص أبيض */
  border: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* تثبيت لون أيقونة السلة */
button.s-button-element svg,
.s-button svg {
  fill: #ffffff !important;
}

/* منع أي تغيير عند الضغط */
button.s-button-element:active,
.s-button:active {
  background-color: #b82e71 !important;
  color: #ffffff !important;
  border: none !important;
  opacity: 1 !important;
}
/* ===== ضبط لون الفوتر النهائي ===== */
footer.store-footer,
footer.store-footer * {
  background-color: #b82e71 !important; /* ← لون متجرك البنفسجي */
  border: none !important;
  box-shadow: none !important;
}

/* ===== العنصر الداخلي المحدد بالضبط ===== */
footer.store-footer > .store-footer_inner {
  background-color: #b82e71 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== إزالة أي فاصل أو خلفية بيضاء قبل أو بعد ===== */
footer.store-footer::before,
footer.store-footer::after,
.store-footer_inner::before,
.store-footer_inner::after,
footer.store-footer + div,
.store-footer_inner + div,
footer.store-footer + section,
.store-footer_inner + section {
  background: #b82e71 !important;
  border: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ===== النصوص داخل الفوتر ===== */
footer.store-footer,
footer.store-footer a,
footer.store-footer span,
footer.store-footer p {
  color: #fff !important;
}

/* ===== تصحيح التباعد ===== */
footer.store-footer {
  margin: 0 !important;
  padding-bottom: 0 !important;
}
/* =======================================================
   🎯 تنسيق القائمة الجانبية mobile menu بلون وردي وأبيض وأسود
   ======================================================= */

/* خلفية القائمة */
.mm-spn,
.mobile-menu,
.mm-ocd_content {
  background-color: #b82e71 !important; /* الوردي الأساسي */
  color: #ffffff !important; /* النص أبيض */
}

/* عناصر القائمة */
.mm-spn ul li a,
.main-menu li a {
  color: #ffffff !important; /* نص أبيض */
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 14px 18px !important;
  transition: all 0.3s ease-in-out !important;
}

/* عند المرور على العنصر */
.mm-spn ul li a:hover,
.main-menu li a:hover {
  background-color: #ffffff !important; /* خلفية بيضاء */
  color: #000000 !important; /* نص أسود */
  border-radius: 8px !important;
}

/* أيقونة الإغلاق */
.btn-close,
.close-mobile-menu {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease-in-out !important;
}

/* عند تمرير الماوس على زر الإغلاق */
.btn-close:hover,
.close-mobile-menu:hover {
  background: #ffffff !important;
  color: #b82e71 !important;
}

/* عناوين الأقسام داخل القائمة */
.mm-spn .mm-spn-title,
.mobile-menu .mm-spn-title {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: bold !important;
  border-bottom: 2px solid #ffffff22 !important;
  margin-bottom: 10px !important;
  padding-bottom: 5px !important;
}
/* حل نهائي لاختفاء النص داخل الفوتر */
.store-footer_inner,
footer.store-footer {
  background-color: #b82e71 !important; /* نفس لون المتجر */
  opacity: 1 !important;
  filter: none !important;
}

/* منع أي تأثير عند التحويم على الفوتر */
.store-footer_inner:hover,
footer.store-footer:hover {
  background-color: #b82e71 !important;
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
}

/* إبقاء النصوص مرئية دائماً */
.store-footer_inner *,
footer.store-footer * {
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 5 !important;
}

/* إزالة أي طبقة أو تأثير يخفي النص */
.store-footer_inner::before,
.store-footer_inner::after,
footer.store-footer::before,
footer.store-footer::after {
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* 🔥 إخفاء زر الإعجاب (القلب) من بطاقات المنتجات */
.s-product-card-wishlist-btn {
  display: none !important;
}
/* 🔥 إخفاء عناوين الأقسام مثل "أحدث المنتجات" و"تحت التخفيضات" */
.s-block__title {
  display: none !important;
}
/* ===========================================
   ⚙️ تنسيق قسم مميزات المتجر (features)
   =========================================== */

/* خلفية القسم نفس لون الموقع + ضبط الهوامش */
section.s-block.s-block--features {
  background: #b82e71 !important;
  padding-top: 12px !important;
  padding-bottom: 20px !important;
}

/* شبكة العناصر (تعمل حتى لو كلاس التيلويند تغيّر) */
.s-block--features .grid,
section.s-block.s-block--features .grid {
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* موبايل */
}
@media (min-width: 768px){
  .s-block--features .grid,
  section.s-block.s-block--features .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* تابلت/دسكتوب */
    gap: 20px !important;
  }
}

/* بطاقة الميزة */
.s-block--features .s-block--features__item,
.s-block--features .s-block--features_item,
.s-block--features .feature-item,
.s-block--features .flex > .s-block--features__item {
  background: #ffffff !important;           /* بطاقة بيضاء نظيفة */
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.06) !important;
  padding: 20px !important;
  min-height: 140px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border: none !important;
}

/* دائرة الأيقونة */
.s-block--features .s-block--features__item .icon,
.s-block--features .s-block--features_item .icon,
.s-block--features .feature-item .icon,
.s-block--features .s-icon,
.s-block--features [class*="icon"] {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: #b82e71 !important;           /* وردي المتجر */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
}

/* لون الأيقونة داخل الدائرة (SVG/Font) */
.s-block--features [class*="icon"] svg,
.s-block--features [class*="icon"] i {
  fill: #ffffff !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* العنوان والوصف */
.s-block--features h3,
.s-block--features h4,
.s-block--features p,
.s-block--features span {
  color: #222 !important;
  margin: 0 !important;
}

/* إزالة أي حواف/خلفيات رمادية سابقة تأتي من القالب */
.s-block--features .bg-gray,
.s-block--features .bg-light,
.s-block--features .card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* =========================
   قسم مميزات المتجر — قفل نهائي
   ========================= */

/* خلفية القسم ومسافاته */
section.s-block.s-block--features,
section.s-block.s-block--features.container {
  background: #b82e71 !important;
  padding: 24px 0 !important;
}

/* شبكة العناصر */
section.s-block.s-block--features .grid {
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (min-width: 768px){
  section.s-block.s-block--features .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* الكارت نفسه */
section.s-block.s-block--features .s-block--features__item,
section.s-block.s-block--features .s-block--features_item,
section.s-block.s-block--features .feature-item,
section.s-block.s-block--features .flex > .s-block--features__item {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.08) !important;
  padding: 20px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* دائرة الأيقونة */
section.s-block.s-block--features [class*="icon"],
section.s-block.s-block--features .icon,
section.s-block.s-block--features .s-icon {
  width: 62px !important;
  height: 62px !important;
  border-radius: 9999px !important;
  background: #b82e71 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
}

/* الأيقونة نفسها (SVG/Font) */
section.s-block.s-block--features [class*="icon"] svg,
section.s-block.s-block--features [class*="icon"] i,
section.s-block.s-block--features svg,
section.s-block.s-block--features svg * {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* نصوص العنوان/الوصف — نجبرها على الظهور الأسود ونلغي أي classes موروثة */
section.s-block.s-block--features *,
section.s-block.s-block--features .feature-title,
section.s-block.s-block--features .feature-desc {
  color: #000 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* اجعل العناوين بالوردي، والوصف رمادي غامق (اختياري) */
section.s-block.s-block--features h3,
section.s-block.s-block--features h4 { color: #b82e71 !important; font-weight: 700 !important; }
section.s-block.s-block--features p,
section.s-block.s-block--features span { color: #333 !important; font-weight: 500 !important; }

/* نلغي أي فئات Tailwind قد تجعل النص أبيض أو شفاف */
section.s-block.s-block--features [class*="text-white"],
section.s-block.s-block--features [class*="opacity-"],
section.s-block.s-block--features [style*="opacity"] {
  color: #000 !important;
  opacity: 1 !important;
}

/* تباعد داخلي للنص تحت الأيقونة */
section.s-block.s-block--features .s-block--features__item > * + * {
  margin-top: 8px !important;
}
/* 🎯 تنسيق مربع البحث */
.s-search-input {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #b82e71 !important;
  border-radius: 25px !important;
  height: 40px !important;
  padding: 0 15px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  box-shadow: 0 0 10px rgba(0,0,0,0.08) !important;
  transition: all 0.3s ease !important;
}

/* النص داخل البحث */
.s-search-input::placeholder {
  color: #999 !important;
  font-weight: 400 !important;
}

/* عند التركيز */
.s-search-input:focus {
  outline: none !important;
  border-color: #b82e71 !important;
  box-shadow: 0 0 8px rgba(184,46,113,0.5) !important;
}

/* أيقونة البحث */
.s-search-icon-wrap svg {
  color: #b82e71 !important;
  fill: #b82e71 !important;
}

/* =========================================
   🎁 شريط "شحن مجاني" بشكل فخم ومتناسق
   ========================================= */

.s-advertisement {
  background: linear-gradient(90deg, #b82e71 0%, #b82e71 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-align: center !important;
  padding: 12px 10px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  letter-spacing: 0.3px !important;
}

/* النص داخل الإعلان */
.s-advertisement-content-main,
.s-advertisement h2 {
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}

/* الأيقونات أو الإيموجي */
.s-advertisement-content-main span,
.s-advertisement-content-main i,
.s-advertisement-content-main svg {
  color: #FFFFFF !important; /* ذهبي أنيق */
}
/* زر الإغلاق */
.s-advertisement-action {
  color: #fff !important;
  opacity: 0.9 !important;
  transition: 0.3s ease !important;
}
.s-advertisement-action:hover {
  opacity: 1 !important;
  transform: scale(1.1);
}

/* عند التمرير يعطي لمعة خفيفة */
.s-advertisement:hover {
  background: linear-gradient(90deg, #c03b86 0%, #8470D8 100%) !important;
}
/* 💳 تخصيص مكون Tabby ليتناسق مع ألوان المتجر */
div[class*="tabbyPromoSnippet"],
div[class*="tabbyPromoSnippetContent"],
div[class*="tabbyPromoSnippetText"],
div[class*="snippetWrapper"],
div[class*="styles_snippetwrapperContainer"] {
  background: linear-gradient(90deg, #b82e71 0%, #d86aa0 100%) !important;
  color: #fff !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15) !important;
  text-align: center !important;
  font-weight: 600 !important;
  border: none !important;
}

/* النصوص داخل الإعلان */
div[class*="tabbyPromoSnippetText"],
p[class*="tabbyPromoSnippetText"],
span[class*="tabbyPromoSnippetText"] {
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* أيقونة Tabby أو اللوجو */
div[class*="tabbyPromoSnippetContent"] img,
div[class*="tabbyPromoSnippetContent"] svg {
  filter: brightness(0) invert(1) !important; /* يجعل اللوجو أبيض */
  opacity: 0.9 !important;
}

/* تأثير مرور خفيف */
div[class*="tabbyPromoSnippet"]:hover {
  transform: scale(1.02);
  transition: all 0.3s ease-in-out;
  background: linear-gradient(90deg, #c54c86 0%, #e080b6 100%) !important;
}
/* 🎨 تخصيص صندوق Tabby المتكامل */
div[class*="styles_snippetwrapperContainer"],
div[class*="tabbyPromoSnippet"],
div[id*="tabby"] {
  background: linear-gradient(90deg, #b82e71 0%, #d873a9 100%) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
  font-weight: 600 !important;
  text-align: center !important;
  border: none !important;
}

/* النص داخل Tabby */
div[class*="tabbyPromoSnippetText"],
div[class*="styles_body"],
p[class*="styles_body"],
span[class*="styles_body"] {
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
}

/* شعار Tabby */
div[class*="tabbyPromoSnippetContent"] img,
div[class*="tabbyPromoSnippetContent"] svg {
  filter: brightness(0) invert(1) !important; /* يحوله أبيض */
  opacity: 0.9 !important;
}

/* الخط داخل المكون */
div[class*="tabbyPromoSnippetContent"] * {
  color: #fff !important;
}

/* تأثير تفاعلي بسيط */
div[class*="styles_snippetwrapperContainer"]:hover {
  transform: scale(1.02);
  transition: all 0.3s ease-in-out;
  background: linear-gradient(90deg, #c44b85 0%, #e58fc0 100%) !important;
}
/* 🎨 تعديل الخلفيات البيضاء أسفل السعر لتتناسب مع تصميم تابي */
section.bg-white.p-5.rounded-md.mb-5,
section.flex.bg-white,
section.bg-white {
  background: linear-gradient(90deg, #b82e71 0%, #d873a9 100%) !important;
  border-radius: 14px !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
  padding: 18px !important;
}

/* النصوص داخل المستطيل */
section.bg-white.p-5.rounded-md.mb-5 *,
section.flex.bg-white *,
section.bg-white * {
  color: #fff !important;
  font-weight: 600 !important;
}

/* إزالة أي حدود أو خطوط زائدة */
section.bg-white.p-5.rounded-md.mb-5::before,
section.bg-white.p-5.rounded-md.mb-5::after {
  content: none !important;
  display: none !important;
}

/* تأثير خفيف عند المرور */
section.bg-white.p-5.rounded-md.mb-5:hover {
  transform: scale(1.02);
  transition: all 0.3s ease-in-out;
}
/* 🎨 تخصيص خلفية قسم التقييمات بنفس لون المتجر */
.s-comments.s-comments-product,
salla-comments,
salla-comments .s-comments {
  background-color: #b82e71 !important;
  border-radius: 16px !important;
  padding: 20px !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}

/* النصوص داخل التقييمات */
.s-comments.s-comments-product *,
salla-comments *,
.s-comments-product * {
  color: #fff !important;
}

/* العناوين والأسماء داخل التقييمات */
.s-comments .s-comment__author,
.s-comments .s-comment__title,
.s-comments .s-comment__date {
  color: #fff !important;
  font-weight: 600 !important;
}

/* تلوين أزرار الإرسال أو إضافة تقييم */
.s-comments button,
.s-comments .btn {
  background-color: #fff !important;
  color: #b82e71 !important;
  font-weight: bold !important;
  border-radius: 8px !important;
  border: none !important;
}

/* تأثير عند المرور */
.s-comments button:hover,
.s-comments .btn:hover {
  background-color: #d873a9 !important;
  color: #fff !important;
  transition: all 0.3s ease-in-out;
}
/* 🔥 جعل خلفية التقييمات وردية سادة بدون مستطيلات أو ظلال */
.s-comments.s-comments-product,
salla-comments,
.s-comments {
  background-color: #b82e71 !important;
  box-shadow: none !important;
  background-image: none !important;
  border: none !important;
}

/* إزالة أي ظلال داخلية إضافية */
.s-comments.s-comments-product::before,
.s-comments.s-comments-product::after,
salla-comments::before,
salla-comments::after {
  box-shadow: none !important;
  background: none !important;
  content: none !important;
}

/* النصوص بيضاء وواضحة */
.s-comments *,
salla-comments * {
  color: #fff !important;
}
/* 🔥 شريط الأزرار السفلي بنفس لون المتجر وثابت فوق الخلفية */
.sticky-product-bar,
section.sticky-product-bar.bg-white {
  background-color: #b82e71 !important;
  box-shadow: none !important;
  border: none !important;
  z-index: 9999 !important;
  position: sticky !important;
  bottom: 0 !important;
}

/* النصوص والأزرار داخل الشريط */
.sticky-product-bar *,
section.sticky-product-bar * {
  color: #fff !important;
  font-weight: 600 !important;
}

/* الأزرار */
.sticky-product-bar button,
.sticky-product-bar .btn,
.sticky-product-bar input {
  background-color: #fff !important;
  color: #b82e71 !important;
  border-radius: 10px !important;
  border: none !important;
  font-weight: bold !important;
}

/* تأثير عند المرور على الأزرار */
.sticky-product-bar button:hover,
.sticky-product-bar .btn:hover {
  background-color: #d873a9 !important;
  color: #fff !important;
  transition: all 0.3s ease-in-out;
}

/* لمنع الاختفاء خلف الخلفية عند التمرير */
body,
html {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
/* 🎨 تعديل شريط إضافة المنتج (sticky-product-bar) ليطابق لون المتجر */
section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none {
  background-color: #b82e71 !important; /* اللون الوردي للمتجر */
  border-radius: 20px 20px 0 0 !important;
  padding: 20px 15px !important;
  position: sticky !important;
  bottom: 10px !important; /* نزله شوي فوق الحافة */
  z-index: 9999 !important;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* النصوص والأيقونات داخل الشريط */
section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none * {
  color: #fff !important;
  font-weight: 600 !important;
}

/* أزرار الشراء والسلة */
section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none button,
section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none .btn {
  background-color: #fff !important;
  color: #b82e71 !important;
  border-radius: 12px !important;
  border: none !important;
  font-weight: bold !important;
  transition: all 0.3s ease-in-out;
}

/* تأثير عند المرور */
section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none button:hover,
section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none .btn:hover {
  background-color: #d873a9 !important;
  color: #fff !important;
}

/* مربع الكمية */
section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none input,
section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none .quantity-input {
  background-color: #fff !important;
  color: #b82e71 !important;
  border-radius: 12px !important;
  border: none !important;
  font-weight: bold !important;
  text-align: center !important;
}

/* أزرار + و - */
section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none .quantity-btn {
  background-color: #fff !important;
  color: #b82e71 !important;
  border-radius: 10px !important;
  border: none !important;
}
/* 🔥 إجبار تنسيق الشريط السفلي ليكون بنفس لون المتجر الوردي */
section.sticky-product-bar,
section[class*="sticky-product-bar"],
div[class*="sticky-product-bar"] {
  background: #b82e71 !important;
  background-color: #b82e71 !important;
  color: #fff !important;
  border-radius: 20px 20px 0 0 !important;
  padding: 20px 15px !important;
  position: sticky !important;
  bottom: 10px !important;
  z-index: 99999 !important;
  box-shadow: 0 -6px 15px rgba(0, 0, 0, 0.15) !important;
}

/* كل النصوص داخل الشريط */
section.sticky-product-bar * {
  color: #fff !important;
  font-weight: 600 !important;
}

/* الأزرار (إضافة للسلة / اشتري الآن) */
section.sticky-product-bar button,
section.sticky-product-bar .btn,
section.sticky-product-bar [type="submit"] {
  background-color: #fff !important;
  color: #b82e71 !important;
  border-radius: 12px !important;
  border: none !important;
  font-weight: bold !important;
  padding: 12px !important;
  transition: all 0.3s ease-in-out !important;
}

/* تأثير عند المرور */
section.sticky-product-bar button:hover,
section.sticky-product-bar .btn:hover {
  background-color: #d873a9 !important;
  color: #fff !important;
}

/* مربعات الكمية والأزرار (+ و -) */
section.sticky-product-bar input,
section.sticky-product-bar .quantity-input,
section.sticky-product-bar .quantity-btn {
  background-color: #fff !important;
  color: #b82e71 !important;
  border-radius: 10px !important;
  border: none !important;
  font-weight: bold !important;
  text-align: center !important;
}

/* تأكيد أن العنصر فوق كل شيء */
section.sticky-product-bar {
  position: fixed !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 10px !important;
}

/* منع أي تداخلات غريبة */
body, html {
  overflow-x: hidden !important;
}
/* 💥 شريط المنتج السفلي بلون المتجر وثابت دائماً */
section.sticky-product-bar,
section[class*="sticky-product-bar"] {
  background-color: #b82e71 !important; /* اللون الوردي */
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 999999 !important;
  padding: 15px !important;
  border-top-left-radius: 15px !important;
  border-top-right-radius: 15px !important;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2) !important;
}

/* 📱 منع التداخل مع المحتوى فوق */
body {
  padding-bottom: 120px !important;
}

/* الأزرار داخل الشريط */
section.sticky-product-bar button,
section.sticky-product-bar .btn,
section.sticky-product-bar [type="submit"] {
  background: #fff !important;
  color: #b82e71 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

/* تأثير عند المرور */
section.sticky-product-bar button:hover,
section.sticky-product-bar .btn:hover {
  background: #d873a9 !important;
  color: #fff !important;
}

/* مربع الكمية */
section.sticky-product-bar input,
section.sticky-product-bar .quantity-input {
  background-color: #fff !important;
  color: #b82e71 !important;
  border-radius: 10px !important;
  font-weight: bold !important;
  border: none !important;
  text-align: center !important;
}

/* أزرار + و - */
section.sticky-product-bar .quantity-btn {
  background: #fff !important;
  color: #b82e71 !important;
  border-radius: 8px !important;
  border: none !important;
  font-weight: bold !important;
}

/* النصوص داخل الشريط */
section.sticky-product-bar * {
  color: #fff !important;
  font-weight: 600 !important;
}
/* 🔥 تنسيق الشريط السفلي بلون المتجر وردي وإجبار كامل */
section.sticky-product-bar,
section[class*="sticky-product-bar"],
div.s-add-product-button-main {
  background-color: #b82e71 !important; /* اللون الوردي */
  background: #b82e71 !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999999 !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: 0 -6px 12px rgba(0,0,0,0.25) !important;
  padding: 18px !important;
  text-align: center !important;
}

/* 💡 ضمان ظهور الأزرار في المنتصف */
div.s-add-product-button-main {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
}

/* 🛒 الأزرار (إضافة للسلة / اشتري الآن) */
div.s-add-product-button-main button,
div.s-add-product-button-main .btn,
div.s-add-product-button-main [type="submit"] {
  background: #fff !important;
  color: #b82e71 !important;
  border-radius: 10px !important;
  border: none !important;
  font-weight: bold !important;
  padding: 10px 20px !important;
  transition: all 0.3s ease-in-out !important;
}

/* تأثير الهوفر */
div.s-add-product-button-main button:hover,
div.s-add-product-button-main .btn:hover {
  background: #d873a9 !important;
  color: #fff !important;
}

/* 🎯 مربع الكمية */
section.sticky-product-bar input,
section.sticky-product-bar .quantity-input {
  background: #fff !important;
  color: #b82e71 !important;
  border-radius: 10px !important;
  border: none !important;
  font-weight: bold !important;
  text-align: center !important;
}

/* أزرار + و - */
section.sticky-product-bar .quantity-btn {
  background: #fff !important;
  color: #b82e71 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: bold !important;
}

/* 🧱 تأكيد مساحة سفلية للمحتوى */
body {
  padding-bottom: 130px !important;
}
/* 🌸 الشريط السفلي بتنسيق أنيق بنفس لون المتجر */
section.sticky-product-bar,
section[class*="sticky-product-bar"] {
  background-color: #b82e71 !important;
  background: #b82e71 !important;
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99 !important;
  border-radius: 15px !important;
  padding: 15px !important;
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ✅ النصوص داخل الشريط */
section.sticky-product-bar * {
  color: #fff !important;
  font-weight: 600 !important;
}

/* 🎨 مربع الكمية */
section.sticky-product-bar input,
section.sticky-product-bar .quantity-input {
  background-color: #fff !important;
  color: #b82e71 !important;
  border-radius: 10px !important;
  border: none !important;
  font-weight: bold !important;
  text-align: center !important;
}

/* أزرار + و - */
section.sticky-product-bar .quantity-btn {
  background: #fff !important;
  color: #b82e71 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: bold !important;
}

/* 🛍️ زر "إضافة للسلة" و "اشترِ الآن" */
section.sticky-product-bar button,
section.sticky-product-bar .btn,
section.sticky-product-bar [type="submit"] {
  background: #fff !important;
  color: #b82e71 !important;
  border-radius: 10px !important;
  border: none !important;
  font-weight: bold !important;
  padding: 10px 15px !important;
  transition: all 0.3s ease-in-out !important;
}

/* 💫 عند المرور */
section.sticky-product-bar button:hover,
section.sticky-product-bar .btn:hover {
  background: #d873a9 !important;
  color: #fff !important;
}

/* 🧱 منع تغطية المحتوى */
body {
  padding-bottom: 50px !important;
}
/* 💥 تلوين الشريط السفلي بالكامل غصب عنه بلون المتجر */
section.sticky-product-bar.bg-white,
section[class*="sticky-product-bar"],
section.sticky-product-bar,
div.s-add-product-button-main,
section[style*="sticky-product-bar"],
div[class*="sticky-product-bar"] {
  background: #b82e71 !important;
  background-color: #b82e71 !important;
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 999999 !important;
  border-radius: 18px !important;
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 18px !important;
}

/* ✅ الأزرار داخل الشريط */
section.sticky-product-bar button,
section.sticky-product-bar .btn,
section.sticky-product-bar [type="submit"],
div.s-add-product-button-main button,
div.s-add-product-button-main .btn {
  background: #fff !important;
  color: #b82e71 !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: bold !important;
  padding: 10px 15px !important;
  font-size: 15px !important;
  transition: all 0.3s ease-in-out !important;
}

/* تأثير الهوفر */
section.sticky-product-bar button:hover,
section.sticky-product-bar .btn:hover {
  background: #d873a9 !important;
  color: #fff !important;
}

/* 🎯 مربع الكمية */
section.sticky-product-bar input,
section.sticky-product-bar .quantity-input {
  background-color: #fff !important;
  color: #b82e71 !important;
  border-radius: 8px !important;
  border: none !important;
  font-weight: bold !important;
  text-align: center !important;
}

/* أزرار + و - */
section.sticky-product-bar .quantity-btn,
section.sticky-product-bar .btn-quantity {
  background: #b82e71 !important;
  color: #b82e71 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: bold !important;
}

/* 🩶 النصوص داخل الشريط */
section.sticky-product-bar * {
  color: #fff !important;
}

/* 📱 عشان ما يغطي المحتوى */
body {
  padding-bottom: 130px !important;
}
/* ✨ إصلاح اختفاء كلمة "إضافة للسلة" */
.s-add-product-button-main button,
.s-add-product-button-main {
  padding: 0 22px !important;       /* يوسّع المسافة الجانبية */
  white-space: nowrap !important;   /* يمنع كسر الكلمة */
  overflow: visible !important;     /* يخلي النص يطلع كامل */
  text-overflow: unset !important;  /* يلغي الثلاث نقاط */
  width: auto !important;           /* يضبط العرض تلقائي */
  min-width: 160px !important;      /* يضمن عرض كافي للكلمة */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
/* ✅ إصلاح نهائي لزر "إضافة للسلة" */
.s-add-product-button-main button,
.s-add-product-button-main {
  width: 180px !important;          /* يوسع الزر شوي */
  min-width: 180px !important;
  padding: 0 26px !important;       /* يزيد المسافة حول النص */
  font-size: 16px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;   /* يمنع تقطيع الكلمة */
  overflow: visible !important;     /* يخلي النص يبان كامل */
  text-overflow: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #B82E71 !important;
  color: #fff !important;
  border-radius: 10px !important;
  height: 55px !important;
  line-height: 55px !important;
}

/* ✨ تنسيق الزرين داخل الحاوية */
.s-add-product-button-with-sticky-bar {
  display: flex !important;
  flex-direction: row-reverse !important; /* "إضافة للسلة" على اليمين */
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
}
/* 🎨 تغيير خلفية المربع الأبيض إلى نفس لون الخلفية #b82e71 */
section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none,
section.sticky-product-bar.bg-white,
section[class*="sticky-product-bar"].bg-white {
  background: #b82e71 !important;
  background-color: #b82e71 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ✨ تصحيح الزر داخل المربع حتى يظل واضح */
section.sticky-product-bar button,
section.sticky-product-bar .btn {
  background-color: #ffffff !important;
  color: #b82e71 !important;
  font-weight: bold !important;
  border-radius: 10px !important;
  border: none !important;
}

/* 🔹 نصوص الزر والعناصر تبقى متناسقة */
section.sticky-product-bar * {
  color: #ffffff !important;
  font-weight: 600 !important;
}
/* تعديل شريط الإعلان العلوي */
.s-advertisement,
.s-advertisement-content {
    background-color: #cce7ff !important; /* سماوي فاتح */
    color: #000000 !important; /* كتابة بالأسود */
    border: none !important;
    box-shadow: none !important;
}

/* إزالة أي طبقة أو تأثير سابق */
.s-advertisement::before,
.s-advertisement::after,
.s-advertisement-content::before,
.s-advertisement-content::after {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* الأيقونة (الجرس والإغلاق) */
.s-advertisement button,
.s-advertisement svg {
    fill: #000000 !important; /* أيقونات سوداء */
    color: #000000 !important;
}
t::before,
.s-advertisement-content::after {
    background: none !important;
    box-shadow: none !important;
}
/* فرض لون النص الأسود في شريط الإعلان */
.s-advertisement,
.s-advertisement-content,
.s-advertisement-content-main,
h2.s-advertisement-content-main {
    color: #000000 !important; /* أسود قوي */
    background-color: #cce7ff !important; /* سماوي فاتح */
}

/* إجبار الخط داخل كل span أو نص داخلي */
.s-advertisement * {
    color: #000000 !important; /* كل النصوص تصير أسود */
    fill: #000000 !important; /* حتى الإيموجي أو SVG */
}

/* زر الإغلاق */
.s-advertisement-action,
.s-advertisement-action svg {
    color: #000000 !important;
    fill: #000000 !important;
}

/* تعطيل أي تأثير داخلي أو لون inline */
[style*="color"] {
    color: #000000 !important;
}
/* جعل أيقونة الجرس سوداء بالكامل */
.s-advertisement-content-icon.sicon-bell::before {
    color: #000000 !important;   /* أسود */
    fill: #000000 !important;    /* لو كانت SVG */
    opacity: 1 !important;       /* إظهارها بوضوح */
    filter: brightness(0) !important; /* تكسر أي لون باهت */
}

/* للتأكد أن العنصر نفسه ما يورث لون من أبوه */
.s-advertisement-content-icon.sicon-bell {
    color: #000000 !important;
    fill: #000000 !important;
}
/* تغيير لون زر إغلاق الإعلان إلى سماوي */
button.s-advertisement-action {
    background-color: #cce7ff !important; /* خلفية سماوية فاتحة */
    color: #000000 !important; /* حرف X أسود واضح */
    border-radius: 6px !important; /* حواف ناعمة */
    border: none !important;
    box-shadow: none !important;
}

/* عند تمرير الماوس */
button.s-advertisement-action:hover {
    background-color: #a6d5ff !important; /* سماوي أغمق بسيط عند التمرير */
    color: #000000 !important;
}

/* لو الأيقونة داخل الزر عبارة عن SVG أو before */
button.s-advertisement-action::before,
button.s-advertisement-action svg {
    color: #000000 !important;
    fill: #000000 !important;
}
/* زر الإغلاق بلون ثابت بدون تأثير عند التمرير */
button.s-advertisement-action {
    background-color: #cce7ff !important; /* سماوي فاتح */
    color: #000000 !important; /* X أسود */
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    transition: none !important; /* إلغاء أي حركة */
}

/* تعطيل تأثير hover تماماً */
button.s-advertisement-action:hover,
button.s-advertisement-action:focus,
button.s-advertisement-action:active {
    background-color: #cce7ff !important; /* نفس اللون بالضبط */
    color: #000000 !important;
    box-shadow: none !important;
    transform: none !important;
}