/* 1. ضرب متغيرات الألوان الأساسية لقالب سلة من الجذور */
:root,
body {
    --color-white: #000000 !important;
    --bg-surface: #000000 !important;
    --bg-main: #000000 !important;
    --color-bg-light: #000000 !important;
    --s-modal-bg: #000000 !important;
    --s-bottom-sheet-bg: #000000 !important;
    --s-cart-bg: #000000 !important;
}

/* 2. استهداف الأكواد المدمجة (Inline) اللي تزرعها سلة بالجافاسكربت */
div[style*="background-color: white"],
div[style*="background: white"],
div[style*="background-color: #fff"],
div[style*="background-color: rgb(255, 255, 255)"],
div[class*="bg-white"] {
    background-color: #000000 !important;
    background: #000000 !important;
    border-color: #111 !important;
}

/* 3. فرض اللون الأسود على كل العناصر داخل أي نافذة منبثقة بشكل عشوائي وشامل */
div[class*="modal"] *,
div[class*="bottom-sheet"] *,
div[class*="cart-popup"] * {
    border-color: #222 !important;
}

div[class*="modal"],
div[class*="bottom-sheet"] {
    background-color: #000000 !important;
}

/* =========================
   🌑 إجبار اللون الأسود على كل شيء
========================= */
html, body, #app, main, section, div, header, footer, nav, aside {
  background-color: #000 !important;
}

/* =========================
   ✍️ كل النصوص بيضاء + بالنص
========================= */
* {
  color: #fff !important;
  text-align: center !important;
}

/* =========================
   🧱 الهيدر
========================= */
header, .s-header, .salla-header {
  background: #000 !important;
  border-bottom: 1px solid #111 !important;
}

/* ☰ الثلاث خطوط + السلة */
header svg,
header i,
.menu-toggle,
.cart-count,
.badge {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* =========================
   🦶 الفوتر
========================= */
footer, .s-footer, .salla-footer {
  background: #000 !important;
  border-top: 1px solid #111 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* كل عناصر الفوتر */
footer *,
.s-footer * {
  justify-content: center !important;
  align-items: center !important;
}

/* =========================
   🧊 المنتجات
========================= */
.product,
.s-product-card,
.salla-product-card {
  background: #0a0a0a !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 12px !important;
}

/* =========================
   ⭐ التقييمات + المزايا
========================= */
.s-reviews,
.reviews,
.s-features,
.features {
  background: #000 !important;
}

/* =========================
   🔘 الأزرار (ستايل Apple)
========================= */
button,
.btn,
.s-btn,
.s-button {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  border-radius: 12px !important;
  margin: 8px auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Hover */
button:hover,
.btn:hover,
.s-btn:hover {
  background: #1a1a1a !important;
  border-color: #777 !important;
}

/* =========================
   🔍 البحث
========================= */
input,
select,
textarea,
input[type="search"] {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  border-radius: 12px !important;
}

input::placeholder {
  color: #aaa !important;
}

/* =========================
   📱 القائمة الجانبية
========================= */
[role="dialog"],
[role="menu"],
aside,
nav {
  background: #000 !important;
}

[role="dialog"] *,
[role="menu"] *,
aside *,
nav * {
  color: #fff !important;
}

/* =========================
   🖼️ البنر
========================= */
.banner,
.s-banner,
.hero,
.s-hero {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.banner img,
.hero img {
  margin: 0 auto !important;
}

/* =========================
   🛒 صفحة المنتج
========================= */
main .container,
main .content,
main .product,
main section {
  text-align: center !important;
}

[class*="price"] {
  display: flex !important;
  justify-content: center !important;
}

[class*="description"],
[class*="summary"] {
  text-align: center !important;
}

[class*="quantity"],
[class*="qty"] {
  display: flex !important;
  justify-content: center !important;
  margin: 10px auto !important;
}

img {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* =========================
   🚫 إزالة الخطوط والفواصل
========================= */
hr,
footer hr,
[class*="divider"],
[class*="separator"] {
  display: none !important;
}
/* إخفاء رقم التواصل داخل الفوتر أو الزر */
footer a[href^="tel:"] span,
footer a[href^="tel:"] p,
footer a[href^="tel:"] strong,
.s-footer a[href^="tel:"] span,
.s-footer a[href^="tel:"] p,
.s-footer a[href^="tel:"] strong {
  display: none !important;
}

/* إبقاء الأيقونة/الزر ظاهر */
footer a[href^="tel:"],
.s-footer a[href^="tel:"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.product-page * {
  box-shadow: none !important;
}

.product-page [class*="option"],
.product-page [class*="variant"],
.product-page label {
  padding: 4px 8px !important;
  margin: 2px !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  background: #fff !important;
}
/* استهداف جذري لمربع خيارات المنتج في سلة لإزالة المساحات البيضاء */
salla-product-options,
.product-options,
.product-options-wrapper,
.product-details-content .bg-white,
div[class*="product-options"] {
    padding: 5px !important; /* تصغير المساحة لأقصى حد */
    background: transparent !important; /* إزالة الخلفية البيضاء بالكامل */
    background-color: transparent !important;
    border: 1px solid #333 !important; /* إضافة إطار خفيف رمادي غامق يناسب الثيم الأسود */
    border-radius: 10px !important; /* تنعيم الزوايا */
}

/* إجبار العناصر الداخلية على تقليل الهوامش */
salla-product-options > div,
.product-options > div,
.form-group {
    padding: 2px !important;
    margin-bottom: 5px !important;
}
/* 1. ضرب متغيرات الألوان الأساسية لقالب سلة من الجذور */
:root,
body {
    --color-white: #000000 !important;
    --bg-surface: #000000 !important;
    --bg-main: #000000 !important;
    --color-bg-light: #000000 !important;
    --s-modal-bg: #000000 !important;
    --s-bottom-sheet-bg: #000000 !important;
    --s-cart-bg: #000000 !important;
}

/* 2. استهداف الأكواد المدمجة (Inline) اللي تزرعها سلة بالجافاسكربت */
div[style*="background-color: white"],
div[style*="background: white"],
div[style*="background-color: #fff"],
div[style*="background-color: rgb(255, 255, 255)"],
div[class*="bg-white"] {
    background-color: #000000 !important;
    background: #000000 !important;
    border-color: #111 !important;
}

/* 3. فرض اللون الأسود على كل العناصر داخل أي نافذة منبثقة بشكل عشوائي وشامل */
div[class*="modal"] *,
div[class*="bottom-sheet"] *,
div[class*="cart-popup"] * {
    border-color: #222 !important;
}

div[class*="modal"],
div[class*="bottom-sheet"] {
    background-color: #000000 !important;
}
/* إخفاء السعر داخل زر الإضافة للسلة */
.add-to-cart-container .price,
.product-form .add-to-cart .price,
button .price {
    display: none !important;
}

/* إخفاء أي سعر داخل نموذج الشراء بعد أول سعر */
.product-form salla-money:not(:first-of-type) {
    display: none !important;
}

/* إخفاء أي بلوك سعر إضافي داخل الفورم */
.product-form .price-wrapper:not(:first-child),
.product-form .product-price:not(:first-child) {
    display: none !important;
}
/* استهداف الإشعار المنبثق كامل */
body .toast,
body .notification,
body .alert,
body .s-notification,
body [class*="toast"],
body [class*="notification"],
body [class*="alert"] {
    background: #000 !important;
    border: none !important;
    box-shadow: none !important;
}

/* استهداف كل العناصر داخل الإشعار */
body .toast *,
body .notification *,
body .alert *,
body .s-notification *,
body [class*="toast"] *,
body [class*="notification"] *,
body [class*="alert"] * {
    background: #000 !important;
    background-color: #000 !important;
    border-color: #111 !important;
    box-shadow: none !important;
}

/* استثناء الصور فقط */
body .toast img,
body .notification img,
body .alert img,
body [class*="toast"] img,
body [class*="notification"] img,
body [class*="alert"] img {
    background: transparent !important;
}