/* ============================================================
   KEY X — DARK v7 FINAL
   يستهدف الـ Tailwind classes الحقيقية من HTML سلة
   ============================================================ */

:root {
  --r-pink:   #af1e89;
  --r-pink-b: #cd2ca1;
  --r-blue:   #1f80c3;
  --r-bg:     #13132a;
  --r-card:   #1c1c38;
  --r-nav:    #1e1e3d;
  --r-input:  #16162e;
  --r-text:   #f0eef8;
  --r-muted:  #9a94b8;
  --r-border: rgba(175,30,137,0.28);
  --color-primary:         #af1e89;
  --color-primary-dark:    #cd2ca1;
  --color-primary-light:   #1f80c3;
  --color-primary-reverse: #f0eef8;
}

/* ============================================================
   1. BODY + خلفية الصفحة العامة
   ============================================================ */
html, body {
  background-color: var(--r-bg) !important;
  color: var(--r-text) !important;
}

/* ============================================================
   2. Tailwind النصوص الداكنة — المشكلة الرئيسية
   ============================================================ */
.text-gray-800,
.text-gray-700,
.text-gray-600,
.text-gray-500,
.text-gray-400,
.text-gray-300,
.text-black,
[class*="text-gray"] {
  color: var(--r-text) !important;
}

/* ============================================================
   3. Tailwind الخلفيات البيضاء والرمادية
   ============================================================ */
.bg-white,
.bg-gray-100,
.bg-gray-50,
[class*="bg-white"],
[class*="bg-gray"] {
  background-color: var(--r-card) !important;
  color: var(--r-text) !important;
}

/* ============================================================
   4. الـ body * — يغطي كل عناصر سلة
   ============================================================ */
body *, div *, section *, main *, article * {
  color: var(--r-text) !important;
  border-color: var(--r-border) !important;
}

/* استثناءات — عناصر لازم تبقى بلونها */
body * img,
body * svg,
body * iframe,
body * video {
  color: unset !important;
  border-color: unset !important;
}

/* ============================================================
   5. HEADER — الهيدر وكل عناصره
   ============================================================ */
header,
header *,
.store-header,
.store-header *,
.main-nav-container,
.main-nav-container *,
.top-navbar,
.top-navbar *,
#mainnav,
#mainnav * {
  background-color: var(--r-nav) !important;
  color: var(--r-text) !important;
  border-color: var(--r-border) !important;
}

/* الهيدر نفسه فقط — بدون override على كل الـ children */
#mainnav,
.main-nav-container {
  border-bottom: 1px solid var(--r-border) !important;
}

/* ============================================================
   6. قائمة التنقل الرئيسية
   ============================================================ */
.main-menu li > a,
.main-menu a,
nav a,
.mm-spn a {
  color: var(--r-text) !important;
  background-color: var(--r-nav) !important;
}

.main-menu li > a:hover,
.main-menu a:hover {
  background-color: rgba(175,30,137,0.18) !important;
  color: #e090d8 !important;
}

/* Mobile menu */
.mm-ocd,
.mm-ocd__content,
.mobile-menu,
#mobile-menu,
#mobile-menu * {
  background-color: var(--r-nav) !important;
  color: var(--r-text) !important;
}

/* ============================================================
   7. BREADCRUMB
   ============================================================ */
.breadcrumbs,
.s-breadcrumb-wrapper,
.s-breadcrumb-item,
.s-breadcrumb-item a,
.s-breadcrumb-arrow svg path {
  color: var(--r-muted) !important;
  fill: var(--r-muted) !important;
}

/* ============================================================
   8. صفحة المنتج — النصوص والأسعار
   ============================================================ */
/* عنوان المنتج الرئيسي */
h1.text-gray-800,
h1[class*="text-gray"],
h1 {
  color: var(--r-text) !important;
}

/* subtitle المنتج */
h2.product-entry__sub-title,
.product-entry__sub-title {
  color: var(--r-muted) !important;
}

/* وصف المنتج */
.product__description,
.product__description *,
.article--main,
.article--main * {
  color: var(--r-text) !important;
  background-color: transparent !important;
}

.article--main h2 {
  color: var(--r-text) !important;
  border-color: var(--r-border) !important;
}

/* السعر في صفحة المنتج */
.total-price,
[class*="total-price"] {
  color: rgb(0 0 0 / 21%); !important;
}

.before-price,
.text-gray-500.line-through,
[class*="before-price"] {
  color: #666688 !important;
}

/* ============================================================
   9. قسم الإضافة للسلة — bg-white + p-5
   ============================================================ */
.flex.bg-white,
section.bg-white,
section.flex.bg-white,
.sticky-product-bar,
.sticky-product-bar.bg-white,
[class*="sticky-product-bar"] {
  background-color: var(--r-card) !important;
  border-top: 1px solid var(--r-border) !important;
}

.form-label,
.form-label b {
  color: var(--r-text) !important;
}

/* out of stock text */
.out-of-stock {
  color: #ff6060 !important;
}

/* ============================================================
   10. البطاقة
   ============================================================ */
custom-salla-product-card,
.s-product-card-entry {
  background: var(--r-card) !important;
  border: 1px solid var(--r-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 16px rgba(10,10,30,0.6) !important;
  transition: transform .3s, box-shadow .3s, border-color .3s !important;
}

custom-salla-product-card:hover,
.s-product-card-entry:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 28px rgba(175,30,137,0.28) !important;
  border-color: rgba(175,30,137,0.6) !important;
}

.s-product-card-image {
  background: var(--r-input) !important;
  overflow: hidden !important;
  border-radius: 14px 14px 0 0 !important;
}

.s-product-card-image-cover {
  display: block !important;
  width: 100% !important;
  transition: transform .4s ease !important;
}

custom-salla-product-card:hover .s-product-card-image-cover {
  transform: scale(1.04) !important;
}

.s-product-card-content {
  background: var(--r-card) !important;
  padding: 12px !important;
  border-top: 1px solid rgba(175,30,137,0.12) !important;
}

.s-product-card-content-main  { margin-bottom: 6px !important; }
.s-product-card-content-sub   { margin-bottom: 8px !important; }
.s-product-card-content-footer { margin-top: 0 !important; padding-top: 0 !important; }

.s-product-card-content-title,
.s-product-card-content-title a {
  color: var(--r-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.s-product-card-content-subtitle {
  color: var(--r-muted) !important;
  font-size: 11px !important;
}

.s-product-card-price {
  color: rgb(0 0 0 / 21%); !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  margin: 0 !important;
}

/* زر القلب */
button.s-product-card-wishlist-btn.s-button-element {
  background: rgba(15,15,35,0.75) !important;
  border: 1px solid rgba(175,30,137,0.35) !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #d080c0 !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

button.s-product-card-wishlist-btn.s-button-element:hover {
  background: rgba(175,30,137,0.3) !important;
  border-color: var(--r-pink) !important;
  color: #fff !important;
}

/* ============================================================
   11. الأزرار
   ============================================================ */
button.s-button-btn.s-button-element:not(.s-product-card-wishlist-btn) {
  border-radius: 25px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 9px 16px !important;
  width: 100% !important;
  border: none !important;
}

button.s-button-btn.s-button-element:not(.s-product-card-wishlist-btn):not(.s-button-disabled) {
  background: linear-gradient(135deg, var(--r-pink) 0%, var(--r-pink-b) 100%) !important;
  color: #fff !important;
}

button.s-button-btn.s-button-disabled:not(.s-product-card-wishlist-btn) {
  background: rgba(175,30,137,0.15) !important;
  border: 1px solid rgba(175,30,137,0.35) !important;
  color: #b070a8 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* أزرار outline الأخرى */
.s-button-light-outline,
.s-button-primary-outline {
  background-color: var(--r-card) !important;
  color: var(--r-text) !important;
  border-color: var(--r-border) !important;
}

/* ============================================================
   12. حقول الإدخال
   ============================================================ */
input, textarea, select,
.form-input,
.s-search-input,
[class*="form-input"],
[class*="s-input"] {
  background-color: var(--r-input) !important;
  color: var(--r-text) !important;
  border: 1px solid var(--r-border) !important;
  border-radius: 8px !important;
}

input::placeholder,
textarea::placeholder,
.s-search-input::placeholder {
  color: var(--r-muted) !important;
  opacity: 0.8 !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--r-pink) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(175,30,137,0.15) !important;
}

/* شريط البحث */
.s-search-container,
.s-search-input-wrapper,
.s-search-modal {
  background-color: var(--r-nav) !important;
}

/* ============================================================
   13. SLIDER
   ============================================================ */
.s-slider-block__title h2,
.s-slider-block__title h3 {
  color: var(--r-text) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.s-slider-nav-arrow {
  background: rgba(175,30,137,0.12) !important;
  border: 1px solid rgba(175,30,137,0.35) !important;
  border-radius: 50% !important;
}

.s-slider-nav-arrow:hover { background: rgba(175,30,137,0.3) !important; }
.s-slider-nav-arrow svg path { fill: #d080c8 !important; }

/* ============================================================
   14. MODAL (تسجيل الدخول وغيره)
   ============================================================ */
.s-login-modal-title {
    --tw-text-opacity: 1;
    color: #ffffff;
    color: rgb(255 255 255);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5rem;
    margin-bottom: .5rem;
}
/* ============================================================
   15. FOOTER — داكن دائماً
   ============================================================ */
footer,
footer *,
.store-footer,
.store-footer *,
.store-footer__inner,
.store-footer__inner * {
  background-color: var(--r-nav) !important;
  color: #ffffff !important;
  border-color: rgba(175,30,137,0.2) !important;
}

.store-footer {
  border-top: 2px solid var(--r-pink) !important;
}

footer a:hover,
.store-footer a:hover {
  color: var(--r-text) !important;
}

/* copyright */
.copyright-text,
.copyright-text * {
  color: #666690 !important;
}

/* ============================================================
   16. Header btn icon (أيقونة المستخدم والسلة)
   ============================================================ */
.header-btn__icon,
.header-btn i {
  color: var(--r-pink) !important;
}

.s-cart-summary-total,
.s-cart-summary-count {
  color: var(--r-text) !important;
}

/* ============================================================
   17. Tabby / Tamara widgets
   ============================================================ */
#tabbyPromoWrapper,
.tamara-product-widget,
.spotii-wrapper,
.s-installment-madfu-wrapper,
.s-installment-emkan-wrapper {
  background-color: var(--r-card) !important;
  border-color: var(--r-border) !important;
  color: var(--r-text) !important;
}

/* ============================================================
   18. Comments / Reviews
   ============================================================ */
.s-comments-product,
.s-comments-product * {
  background-color: var(--r-card) !important;
  color: var(--r-text) !important;
  border-color: var(--r-border) !important;
}

/* ============================================================
   19. Responsive
   ============================================================ */
@media (max-width: 768px) {
  .s-product-card-price   { font-size: 15px !important; }
  .s-product-card-content { padding: 10px !important; }
  .s-products-slider-card {
    width: calc(50% - 6px) !important;
    margin-left: 6px;
  }
}
.s-block-trust-store-features {
    display: block;
    background-color: var(--features-bg-color, # #1c1c38);
    padding: 2.5rem 0;
    width: 100%;
    box-sizing: border-box;
}


.banner--fixed img, .banner-entry {
    --tw-bg-opacity: 1;
  background-color: #000;
    border-radius: 20px;
 }
  .s-add-product-toast {
    background-color: rgb(32 29 81);
   }

  .s-add-product-toast {
        background-color: #000;
  }
  .s-add-product-toast__progress {
    height: .5rem;
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: #000;
  }

.hover\:bg-gray-50:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(30 50 200 / var(--tw-bg-opacity, 1))!important
}

.gradient-bg {
    --tw-gradient-from: #1c1c38 var(--tw-gradient-from-position);
    --tw-gradient-to: hsla(0, 0%, 100%, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #2f0523 var(--tw-gradient-to-position);
}

.s-order-totals-card-panel {
    border-radius: .375rem;
    --tw-bg-opacity: 1;
    background-color: #fff;
    background-color: rgb(101 0 115);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.s-orders-table-head {
    margin-bottom: 1.25rem;
    --tw-bg-opacity: 1;
    background-color: #f9fafb;
    background-color: rgb(28 28 56);
}

.s-orders-table-tbody-tr {
    background-color: #fff;
    background-color: rgb(28 28 56);
    }

.s-notifications-item {
  
    background-color: rgb(0 0 0 / 20%);
    }

.s-product-options-wrapper {
    border-radius: .375rem;
    display: block;
    margin-bottom: 1.25rem;
    --tw-bg-opacity: 1;
    
    background-color: rgb(176 30 139);
    padding: 1.25rem;
}

.s-metadata-box {
    border-radius: .375rem;
    display: block;
    margin-bottom: 1.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / 21%);
    padding: 1.25rem;
}

.btn--collapse {
    
    background-color: rgb(201 42 158);
    }