/* ====== Brand ====== */
:root { --brand: #f03c00; }

/* ====== Base Dark ====== */
body.dark-mode {
  background-color: #121212 !important;
  color: #fff !important;
}

/* خلي كل النص أبيض (يعالج أي نص كحلي/غامق) */
body.dark-mode *,.dark-mode div * {
  color: #fff !important;
  border-color: rgb(42 42 42);
}

/* عناصر كانت فاتحة تبقى داكنة */
body.dark-mode .bg-white,
.dark-mode .s-comments-product,
.dark-mode .tamara-product-widget,
.dark-mode .spotii-wrapper,
.dark-mode #tabbyPromoWrapper {
  border-color: rgb(42 42 42) !important;
  background-color: rgb(32 32 32) !important;
}

.dark-mode .s-filters-widget-container,
body.dark-mode .slide--cat-entry,
body.dark-mode .s-product-card-entry,
body.dark-mode .s-block--features__item,
.dark-mode .brand-item,
.dark-mode .s-reviews-testimonial,
.dark-mode .store-footer {
  color: #fff !important;
  background-color: rgb(32 32 32);
}

.dark-mode .form-input,
.dark-mode .s-price-range-number-input,
.dark-mode .bg-gray-100,
.dark-mode .s-modal-body {
  color: #fff !important;
  border-color: rgb(42 42 42);
  background-color: rgb(42 42 42);
}

.dark-mode .s-button-light-outline,
.dark-mode .s-login-modal-input,
.dark-mode .store-footer__inner {
  background-color: rgb(42 42 42) !important;
  color: #fff !important;
}

.dark-mode .s-modal-close { background-color: transparent !important; }

/* ====== Primary / Brand Mapping ====== */
.dark-mode {
  --color-primary: var(--brand);
  --color-primary-dark: #d83700;
  --color-primary-light: #ff6a33;
  --color-primary-reverse: #ffe6de;
}

/* روابط ونصوص */
.text-primary,
a.text-primary,
.dark-mode .text-primary,
.dark-mode a.text-primary,
.dark-mode a,
a:hover {
  color: var(--brand) !important;
}

/* أزرار أساسية */
.s-button-primary,
.btn-primary,
.button-primary,
.dark-mode .s-button-primary,
.dark-mode .btn-primary,
.dark-mode .button-primary {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

/* أزرار Outline */
.s-button-primary-outline,
.btn-outline-primary,
.button-primary-outline,
.dark-mode .s-button-primary-outline,
.dark-mode .btn-outline-primary,
.dark-mode .button-primary-outline {
  background-color: transparent !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

/* Hover */
.s-button-primary:hover,
.btn-primary:hover,
.button-primary:hover,
.dark-mode .s-button-primary:hover,
.dark-mode .btn-primary:hover,
.dark-mode .button-primary:hover {
  filter: brightness(0.95);
}

.s-button-primary-outline:hover,
.btn-outline-primary:hover,
.button-primary-outline:hover,
.dark-mode .s-button-primary-outline:hover,
.dark-mode .btn-outline-primary:hover,
.dark-mode .button-primary-outline:hover {
  background-color: rgba(240, 60, 0, 0.08);
}

/* منيو الديسكتوب */
@media (min-width: 1024px) {
  .dark-mode .main-menu li > a { background-color: rgb(32 32 32); }
  .dark-mode .main-menu .has-children li a:hover,
  .dark-mode .main-menu .has-children .has-children:hover > a {
    color: var(--brand) !important;
    background-color: rgb(55, 55, 55);
  }
}

/* مودال */
.dark-mode .s-modal-body * { color: #f7eeff !important; }

/* ====== Salla Product Options (Dark Patch) ====== */
.dark-mode .s-product-options-option-container,
.dark-mode .s-product-options-option {
  background-color: #202020 !important;
}

.dark-mode .s-product-options-option-label b,
.dark-mode .s-product-options-option-label small {
  color: #fff !important;
}
.dark-mode .s-product-options-option-label small { opacity: .85; }

.dark-mode .s-product-options-option-content .s-form-control,
.dark-mode .s-form-control,
.dark-mode input.s-form-control,
.dark-mode textarea.s-form-control,
.dark-mode select.s-form-control {
  background-color: #2a2a2a !important;
  color: #fff !important;
  border-color: #2a2a2a !important;
  box-shadow: none !important;
}

/* Placeholder */
.dark-mode .s-form-control::placeholder { color: #cfcfcf !important; opacity: .9; }

/* Focus بلون البراند */
.dark-mode .s-form-control:focus {
  outline: 2px solid var(--brand) !important;
  outline-offset: 0;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(240, 60, 0, 0.25) !important;
}

/* Number spinner */
.dark-mode input[type="number"].s-form-control { -moz-appearance: textfield; }
.dark-mode input[type="number"].s-form-control::-webkit-outer-spin-button,
.dark-mode input[type="number"].s-form-control::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* Autofill */
.dark-mode input.s-form-control:-webkit-autofill,
.dark-mode textarea.s-form-control:-webkit-autofill,
.dark-mode select.s-form-control:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  transition: background-color 9999s ease-in-out 0s;
}

/* هوست العناصر */
.dark-mode salla-product-options,
.dark-mode salla-conditional-fields { background: transparent !important; }

/* ====== Extra Inputs ====== */

/* quantity input */
.dark-mode .s-quantity-input-input {
  background-color: #2a2a2a !important;
  color: #fff !important;
  border-color: #2a2a2a !important;
}
.dark-mode .s-quantity-input-input::placeholder { color: #cfcfcf !important; opacity: .9; }
.dark-mode .s-quantity-input-input:focus {
  outline: 2px solid var(--brand) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(240, 60, 0, 0.25) !important;
}

/* comment textarea */
.dark-mode .s-comment-form-input {
  background-color: #2a2a2a !important;
  color: #fff !important;
  border-color: #2a2a2a !important;
  resize: vertical;
}
.dark-mode .s-comment-form-input::placeholder { color: #cfcfcf !important; opacity: .9; }
.dark-mode .s-comment-form-input:focus {
  outline: 2px solid var(--brand) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(240, 60, 0, 0.25) !important;
}

/* ====== Mobile Menu Dark Mode ====== */
.dark-mode #mobile-menu,
.dark-mode .mm-ocd__content {
  background-color: #202020 !important;
  color: #fff !important;
}

.dark-mode #mobile-menu ul.main-menu > li {
  background-color: transparent !important;
  border-bottom: 1px solid #2a2a2a;
}

.dark-mode #mobile-menu ul.main-menu > li > a {
  color: #fff !important;
  font-weight: 500;
}

/* النصوص الرمادية */
.dark-mode #mobile-menu a.text-gray-500 { color: #fff !important; }

/* hover/active */
.dark-mode #mobile-menu ul.main-menu > li > a:hover,
.dark-mode #mobile-menu ul.main-menu > li > a:focus {
  color: var(--brand) !important;
  background-color: rgb(55, 55, 55) !important;
}

/* زر الإغلاق */
.dark-mode #mobile-menu .btn--close {
  color: #fff !important;
  background: transparent !important;
  border: none;
}