/* Add custom CSS styles below */
/* =========================
   ألوان المتجر — عدّل من هنا فقط
========================= */
:root {
    --background: #0d0d0d;       /* خلفية المتجر والبطاقات */
    --primary: #ff6d00;          /* اللون البرتقالي */
    --primary-hover: #e65c00;    /* البرتقالي عند تمرير المؤشر */
    --text: #ffffff;             /* النص الأساسي */
    --muted-text: #a8a8a8;       /* النص الثانوي، السعر القديم، التصنيفات */
    --feature-bg: #ffffff;       /* خلفية بطاقات المميزات */
    --border: #2b2b2b;           /* حدود بطاقات المنتجات */
}


/* =========================
   إصلاح دقيق ومحصور: صندوق "السعر" و"الكمية" في صفحة المنتج
   (وُضع هذا القسم في أعلى الملف عمدًا — قريبًا من :root — حتى لا
   يتأثر بأي قصّ محتمل لو كان هناك حد أقصى لطول خانة CSS في سلة)

   السبب المؤكد: قاعدة لاحقة في هذا الملف (.product-entry *,
   .product-details *) تفرض اللون الأبيض على كل نص داخل صفحة
   المنتج. صندوقا "السعر" و"الكمية" لهما خلفية بيضاء من الثيم نفسه
   فتصبح الأرقام بيضاء فوق أبيض. تأكدت من مكوّن <salla-quantity-input>
   عبر توثيق سلة الرسمي (docs.salla.dev) وهو مكوّن حقيقي يمتد من
   input رقمي عادي وليس معزولاً بـ Shadow DOM يمنع الـ CSS الخارجي.
========================= */

/* أي حقل إدخال/قائمة داخل صفحة المنتج → نص داكن واضح
   (هذا وحده يضمن ظهور رقم الكمية أيًا كان اسم الكلاس المحيط به،
   لأن <salla-quantity-input> يمتد فعليًا من input[type=number]) */
.product-entry input,
.product-entry select,
.product-entry textarea,
.product-entry label,
.product-details input,
.product-details select,
.product-details textarea,
.product-details label {
    color: #1a1a1a !important;
    opacity: 1 !important;
}

/* مكوّن الكمية الرسمي salla-quantity-input وأي عنصر كلاسه يحتوي
   quantity/qty (العنصر نفسه + كل ما بداخله + أزراره وأيقوناته) */
.product-entry salla-quantity-input,
.product-entry salla-quantity-input *,
.product-details salla-quantity-input,
.product-details salla-quantity-input *,
.product-entry [class*="quantity" i],
.product-entry [class*="quantity" i] *,
.product-entry [class*="qty" i],
.product-entry [class*="qty" i] *,
.product-details [class*="quantity" i],
.product-details [class*="quantity" i] *,
.product-details [class*="qty" i],
.product-details [class*="qty" i] * {
    color: #1a1a1a !important;
    opacity: 1 !important;
}

.product-entry salla-quantity-input svg,
.product-entry [class*="quantity" i] svg,
.product-entry [class*="qty" i] svg,
.product-details salla-quantity-input svg,
.product-details [class*="quantity" i] svg,
.product-details [class*="qty" i] svg {
    fill: #1a1a1a !important;
    stroke: #1a1a1a !important;
    opacity: 1 !important;
}

/* السعر: أي عنصر كلاسه يحتوي price (عدا السعر القديم)، وأيضًا
   وسم <bdi> الذي تستخدمه سلة عادة لتغليف رقم السعر لضبط اتجاهه
   داخل صفحة RTL — تغطية إضافية لالتقاط السعر مهما كان اسم كلاسه */
.product-entry [class*="price" i]:not(del):not(.old-price),
.product-entry [class*="price" i]:not(del):not(.old-price) *,
.product-details [class*="price" i]:not(del):not(.old-price),
.product-details [class*="price" i]:not(del):not(.old-price) *,
.product-entry bdi,
.product-details bdi {
    color: var(--primary) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}


/* =========================
   خلفية المتجر العامة (الصفحة الرئيسية والمتجر فقط)
========================= */
html,
body,
main,
.app-inner,
.store-home {
    background-color: var(--background) !important;
    color: var(--text) !important;
}


/* =========================
   صفحات المحتوى (مثل "مشاريع التخرج"، "من نحن"، إلخ)
   خلفية بيضاء + نص أسود بناءً على طلب صاحب المتجر
========================= */
.content-entry,
.content-entry > div,
.page-content,
.s-page-content,
.page-content-container {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

.content-entry *,
.page-content *,
.s-page-content * {
    color: #1a1a1a !important;
    opacity: 1 !important;
}


/* =========================
   بطاقات المنتجات
========================= */
.s-product-card,
.s-product-card-content,
.s-product-card .card,
.product-card {
    background-color: var(--background) !important;
    border-color: var(--border) !important;
}

.s-product-card-image,
.s-product-card-img,
.s-product-card picture,
.s-product-card figure,
[class*="product-card"] [class*="image"],
[class*="product-card-img"] {
    background-color: var(--background) !important;
}

.s-product-card > div,
.s-product-card-content > div,
[class*="product-card"] > div {
    background-color: var(--background) !important;
}

.s-product-card-content-main,
.s-product-card-content-sub {
    background-color: var(--background) !important;
}

.s-product-card-content,
.s-product-card-content * {
    color: var(--text) !important;
    opacity: 1 !important;
}

.s-product-card-content del,
.s-product-card-content .line-through {
    color: var(--muted-text) !important;
}


/* =========================
   زر إضافة للسلة
========================= */
.s-button-primary,
.btn--primary,
button.s-button {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--text) !important;
}

.s-button-primary *,
.btn--primary *,
button.s-button * {
    color: var(--text) !important;
    fill: currentColor !important;
}

.s-button-primary:hover,
.btn--primary:hover,
button.s-button:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}


/* =========================
   بطاقات مميزات المتجر
========================= */
.s-block--features .feature-item,
.store-features .feature-item,
salla-store-features .feature-item {
    background-color: var(--feature-bg) !important;
    border: 1px solid var(--primary) !important;
}

.s-block--features .feature-item *,
.store-features .feature-item *,
salla-store-features .feature-item * {
    color: var(--primary) !important;
}


/* =========================
   عناوين الأقسام وعرض الكل
========================= */
.s-block__title,
.s-block__title *,
.section-title,
.section-title * {
    color: var(--primary) !important;
    opacity: 1 !important;
}


/* =========================
   صفحة المنتج والوصف (نص أساسي)
========================= */
.product-entry,
.product-entry *,
.product-details,
.product-details *,
.product-description,
.product-description *,
.product__description,
.product__description *,
.prose,
.prose * {
    color: var(--text) !important;
    opacity: 1 !important;
}


/* =========================
   عنوان المنتج
========================= */
.product-title,
.product__title,
.product-details h1,
.product-entry h1,
h1.product-title,
.product-entry .title {
    color: var(--primary) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}


/* =========================
   النصوص الثانوية (تصنيف، معلومات إضافية)
========================= */
.product-details .text-gray-400,
.product-details .text-gray-500,
.product-details .text-gray-600,
.product-details .text-gray-700 {
    color: var(--muted-text) !important;
    opacity: 1 !important;
}


/* =========================
   روابط داخل المنتج والوصف (لون العلامة)
========================= */
.product-entry a,
.product-details a,
.product-description a,
.content-entry a {
    color: var(--primary) !important;
}


/* =========================
   مسار الصفحات (Breadcrumbs)
========================= */
.breadcrumbs,
.breadcrumbs *,
.s-breadcrumbs,
.s-breadcrumbs * {
    color: var(--muted-text) !important;
    opacity: 1 !important;
}


/* =========================
   حل احترازي مُضيّق: القوائم المنسدلة بالهيدر فقط
========================= */
header .bg-white,
header .bg-white *,
nav .bg-white,
nav .bg-white *,
.main-nav-container .bg-white,
.main-nav-container .bg-white *,
[class*="main-nav"] [class*="bg-white"],
[class*="main-nav"] [class*="bg-white"] * {
    color: #1a1a1a !important;
    opacity: 1 !important;
}


/* =========================
   بلوك آراء العملاء (Testimonials)
========================= */
salla-testimonials-slider,
salla-testimonials-slider *,
[class*="testimonial"],
[class*="testimonial"] *,
.s-block--testimonials,
.s-block--testimonials * {
    color: #1a1a1a !important;
    opacity: 1 !important;
}

salla-testimonials-slider .s-block__title,
salla-testimonials-slider .s-block__title *,
[class*="testimonial"] .s-block__title,
[class*="testimonial"] .s-block__title * {
    color: var(--primary) !important;
}
/* =========================
   إظهار سعر المنتج
========================= */

.s-product-card .price,
.s-product-card .product-price,
.s-product-card .price-current,
.s-product-card .current-price,
.s-product-card .s-product-card-price,
.product-entry .price,
.product-details .price,
.product-entry .product-price,
.product-details .product-price {
    color: var(--primary) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

.s-product-card del,
.s-product-card del *,
.s-product-card .old-price,
.s-product-card .price-old,
.product-entry del,
.product-details del {
    color: var(--muted-text) !important;
    opacity: 1 !important;
    text-decoration: line-through !important;
}

.s-product-card .price *,
.s-product-card .product-price *,
.product-entry .price *,
.product-details .price * {
    color: var(--primary) !important;
    opacity: 1 !important;
}

.s-product-card a.price,
.s-product-card a.product-price,
.product-entry a.price,
.product-details a.price {
    color: var(--primary) !important;
}
.s-product-card-content [class*="price"]:not(del),
.s-product-card-content [class*="Price"]:not(del),
.product-details [class*="price"]:not(del),
.product-entry [class*="price"]:not(del) {
    color: var(--primary) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}
/* =========================
   سعر المنتج داخل سلة الشراء والباقات
========================= */

.s-cart-item .price,
.s-cart-item .product-price,
.s-cart-item .current-price,
.s-cart-item [class*="price"],
.cart-item .price,
.cart-item .product-price,
.cart-item [class*="price"],
.s-cart-summary .price,
.s-cart-summary [class*="price"],
salla-cart-summary .price,
salla-cart-summary [class*="price"],
salla-cart-item .price,
salla-cart-item [class*="price"],
.s-product-options .price,
.s-product-options [class*="price"],
.bundle-product .price,
.bundle-product [class*="price"] {
    color: var(--primary) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

.s-cart-item .price *,
.s-cart-item .product-price *,
.s-cart-item [class*="price"] *,
.cart-item .price *,
.cart-item .product-price *,
.cart-item [class*="price"] *,
salla-cart-item [class*="price"] *,
salla-cart-summary [class*="price"] *,
.bundle-product [class*="price"] * {
    color: var(--primary) !important;
    opacity: 1 !important;
}

.cart-total,
.cart-total *,
.s-cart-total,
.s-cart-total *,
.s-cart-summary-total,
.s-cart-summary-total *,
salla-cart-summary .total,
salla-cart-summary .total * {
    color: var(--primary) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

.s-cart-item del,
.s-cart-item del *,
.cart-item del,
.cart-item del *,
salla-cart-item del,
salla-cart-item del * {
    color: var(--muted-text) !important;
    opacity: 1 !important;
}
salla-cart-item span,
salla-cart-summary span,
.s-cart-item span,
.cart-item span {
    color: var(--text) !important;
}

salla-cart-item [class*="price"],
salla-cart-item [class*="price"] *,
salla-cart-summary [class*="price"],
salla-cart-summary [class*="price"] *,
.s-cart-item [class*="price"],
.s-cart-item [class*="price"] *,
.cart-item [class*="price"],
.cart-item [class*="price"] * {
    color: var(--primary) !important;
}