/* 1. الخلفية الداكنة العامة */
body, .bg-storeBG {
  background-color: #121212 !important;
  color: #f0f0f0 !important;
}

/* 2. النصوص العامة */
h1, h2, h3, h4, h5, h6,
p, li, span, label,
.product-title, .price, .stock {
  color: #f0f0f0 !important;
}

/* 3. صناديق وصف المنتجات */
.product-card__content,
.product-description,
.product-price-wrapper,
.product-details-wrapper,
.product-additional-wrapper,
.product-page .content,
.tab-content,
.card,
.panel {
  background-color: #1a1a1a !important;
  color: #f0f0f0 !important;
  border-radius: 8px !important;
}

/* 4. مدخلات النماذج */
.form-input {
  background-color: #222 !important;
  color: #f0f0f0 !important;
  border: 1px solid #444 !important;
  border-radius: 6px !important;
}

/* 5. صندوق تمارا وتابي */
.payment-info-box,
[class*="tamara"],
[class*="tabby"] {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 6. النصوص داخل تمارا/تابي */
.payment-info-box *,
[class*="tamara"] *,
[class*="tabby"] * {
  background-color: transparent !important;
  color: #f0f0f0 !important;
  font-size: 14px !important;
}

/* 7. الروابط */
.payment-info-box a,
[class*="tamara"] a,
[class*="tabby"] a {
  color: #66ccff !important;
  text-decoration: underline !important;
}

/* 8. الشعارات */
img[src*="tamara"],
img[src*="tabby"] {
  filter: none !important;
  background-color: transparent !important;
  max-height: 26px;
  border: none !important;
  padding: 0 !important;
}

/* 9. أزرار المفضلة والمشاركة */
.product-actions button,
.product-actions .button,
.product-actions .btn {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.3s ease;
}

.product-actions button:hover,
.product-actions .button:hover,
.product-actions .btn:hover {
  background-color: rgba(255, 255, 255, 0.07) !important;
  border-radius: 6px !important;
}

/* أيقونات الأزرار */
.product-actions button svg,
.product-actions .button svg,
.product-actions .btn svg {
  width: 22px !important;
  height: 22px !important;
  fill: #f0f0f0 !important;
  stroke: #f0f0f0 !important;
}

/* 10. زر إضافة للسلة */
.s-button.button.add-to-cart-button,
.product-card .button.add-to-cart-button,
.product-form__buttons .button {
  background-color: #d62828 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: bold !important;
  padding: 10px 16px !important;
  transition: background 0.3s ease !important;
  box-shadow: 0 0 8px rgba(214, 40, 40, 0.4) !important;
}

.s-button.button.add-to-cart-button:hover,
.product-card .button.add-to-cart-button:hover,
.product-form__buttons .button:hover {
  background-color: #b71c1c !important;
  box-shadow: 0 0 12px rgba(214, 40, 40, 0.7) !important;
}

/* 11. النوافذ المنبثقة العامة + Blur + Shadow */
div[class*="popup"],
div[class*="modal"],
div[class*="dialog"] {
  background-color: rgba(28,28,28,0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 20px !important;
  animation: popupFade 0.3s ease-out;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4) !important;
}

/* إزالة الشادو الداخلي المكرر */
div[class*="popup"] div,
div[class*="modal"] div,
div[class*="dialog"] div {
  box-shadow: none !important;
  background: transparent !important;
}

/* النصوص في النوافذ */
div[class*="popup"] label,
div[class*="modal"] label,
div[class*="dialog"] label,
div[class*="popup"] p,
div[class*="modal"] p,
div[class*="dialog"] p {
  color: #fff !important;
  font-weight: 500 !important;
}

/* الأعلام في نافذة اللغة */
div[class*="popup"] img,
div[class*="modal"] img,
div[class*="dialog"] img {
  border-radius: 6px !important;
  box-shadow: none !important;
  background-color: transparent !important;
  width: 24px !important;
  height: auto !important;
  object-fit: cover !important;
  border: 1px solid rgba(255,255,255,0.3) !important; /* Border أبيض شفاف */
  padding: 2px !important;
}

/* الدوائر (Radio Buttons) */
input[type="radio"] {
  accent-color: #d62828 !important;
  width: 16px;
  height: 16px;
}

/* زر OK */
div[class*="popup"] button,
div[class*="modal"] button,
div[class*="dialog"] button {
  background-color: #d62828 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: bold !important;
  padding: 8px 16px !important;
  transition: background 0.3s ease;
  box-shadow: 0 0 6px rgba(214, 40, 40, 0.5) !important;
}

div[class*="popup"] button:hover,
div[class*="modal"] button:hover,
div[class*="dialog"] button:hover {
  background-color: #b71c1c !important;
  box-shadow: 0 0 10px rgba(214, 40, 40, 0.8) !important;
}

/* زر الإغلاق */
div[class*="popup"] .close,
div[class*="modal"] .close,
div[class*="dialog"] .close {
  color: #fff !important;
  font-size: 20px !important;
}

/* Animation للنافذة */
@keyframes popupFade {
  0% {
    opacity: 0;
    transform: translateY(-15px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== PlayUrPlay — CLS Patch (إلحاقي، لا يغيّر ستايلك) ===== */

/* 1) ثبّت نسب صور المنتجات (يمنع القفز قبل ما تتحمل الأبعاد) */
.product-card img,
.product-item img,
.products-grid .product .product-img img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 2) ثبّت نسب بنرات/سلايدر/الهيرو (عدّل النسبة لو تصميمك مختلف) */
.hero img,
.s-slider img,
.banner img,
.section-hero img,
.slider .slide img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 3) احجز مساحة ثابتة لواجهات تمارا/تابي (بدون تغيير ستايلك) */
.payment-info-box,
[class*="tamara"],
[class*="tabby"] {
  min-height: 40px; /* المهم للـCLS */
  display: block;
}

/* 4) رأس الموقع/التوست: منع قفز عند ظهور/تحميل */
.header,
.site-header { min-height: 64px; }
.toast-container,
.alerts,
.notifications { min-height: 56px; }

/* 5) أمان عام للصور */
img { max-width: 100%; height: auto; }

/* 6) عناوين البطاقات الطويلة: لا تكسر التخطيط */
.product-card .title,
.product-item .title { overflow-wrap: anywhere; }

/* 7) منع تمدد مفاجئ في السعر/التقسيط عند تحميل الخط */
.price,
.product-price,
.installments { line-height: 1.25; min-height: 1.25em; }