/* ============================================
   Vironix — Full Black x Orange Override (v4)
   يُلصق في: لوحة تحكم سلة > المتجر > تخصيص المظهر > CSS
   يجب استبدال أي نسخة سابقة بالكامل بهذا الملف
   ============================================ */

:root {
  --v-bg: #0a0a0a;
  --v-bg-2: #141414;
  --v-bg-3: #1c1c1c;
  --v-border: rgba(255,255,255,0.08);
  --v-text: #f0f0f0;
  --v-orange: #ff6400;
}

html { scroll-behavior: smooth; background: var(--v-bg); }
body { background: var(--v-bg) !important; }

/* سكرول بار */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--v-bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--v-orange), #800000);
  border-radius: 10px;
}

/* ===== تغميق شامل: أي عنصر بالثيم يستخدم كلاسات Tailwind الفاتحة ===== */
.bg-white,
[class*="bg-white"],
[class^="bg-gray-5"], [class*=" bg-gray-5"],
[class^="bg-gray-1"], [class*=" bg-gray-1"],
[class^="bg-gray-2"], [class*=" bg-gray-2"],
.store-footer, .store-footer__inner,
.sub-menu,
.s-product-card-image,
salla-add-product-toast .s-add-product-toast,
.s-payments-list-item,
.modal, [class*="modal"] [class*="bg-white"],
[class*="dropdown"], [class*="drawer"] {
  background-color: var(--v-bg-2) !important;
  background-image: none !important;
}

/* نصوص داكنة فوق هالعناصر لازم تصير فاتحة */
.bg-white, [class*="bg-white"],
.store-footer, .sub-menu, [class*="dropdown"], [class*="drawer"] {
  color: var(--v-text) !important;
}
.bg-white *:not(svg):not(path):not(img),
.store-footer *:not(svg):not(path):not(img),
.sub-menu *:not(svg):not(path):not(img),
[class*="dropdown"] *:not(svg):not(path):not(img),
[class*="drawer"] *:not(svg):not(path):not(img) {
  color: var(--v-text) !important;
}
.bg-white svg, .store-footer svg, .sub-menu svg,
[class*="dropdown"] svg, [class*="drawer"] svg {
  fill: var(--v-text) !important;
}

/* روابط/عناوين ترجع للبرتقالي عند hover دايماً */
a:hover { color: var(--v-orange) !important; }

/* ===== الهيدر ===== */
.store-header {
  background: rgba(10, 10, 10, 0.9) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255, 100, 0, 0.15);
}
.store-header .main-nav-container {
  background: rgba(10, 10, 10, 0.95) !important;
}
.store-header * { color: var(--v-text) !important; fill: var(--v-text) !important; }
.store-header a:hover, .store-header [class*="cart"]:hover { color: var(--v-orange) !important; fill: var(--v-orange) !important; }

/* ===== القائمة المنسدلة ===== */
.sub-menu {
  border: 1px solid var(--v-border);
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
}
.sub-menu a:hover {
  color: var(--v-orange) !important;
  background: rgba(255,100,0,0.08) !important;
}

/* ===== الفوتر ===== */
.store-footer { border-top: 1px solid var(--v-border); }
.store-footer a:hover { color: var(--v-orange) !important; }

/* ===== حقول الإدخال (بحث، فورمات) ===== */
input, textarea, select {
  background-color: var(--v-bg-3) !important;
  color: var(--v-text) !important;
  border-color: var(--v-border) !important;
}
input::placeholder, textarea::placeholder { color: #9a9a9a !important; }

/* ===== بطاقات المنتجات ===== */
.s-product-card-entry {
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid var(--v-border);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.s-product-card-entry:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 24px 48px -16px rgba(255,100,0,.4), 0 0 0 1px rgba(255,100,0,.25);
  border-color: rgba(255,100,0,.5);
}
.s-product-card-entry img { transition: transform .6s ease; }
.s-product-card-entry:hover img { transform: scale(1.08); }

/* إصلاح مباشر: اسم المنتج والسعر تحت الصورة لازم يكونوا فاتحين دايماً،
   بدون الاعتماد على الفحص التلقائي بالـ JS (كان يفوّت هالعنصر أحياناً) */
.s-product-card-entry .s-product-card-content-title,
.s-product-card-entry h3,
.s-product-card-entry a,
.s-product-card-entry [class*="price"],
.s-product-card-entry [class*="content"] {
  color: var(--v-text) !important;
}

/* ===== الأزرار: توهج نابض ===== */
.btn, salla-button button, button.btn-primary {
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.btn:hover, salla-button button:hover, button.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -8px rgba(255,100,0,.55);
}

/* ===== عناوين الأقسام ===== */
.s-block h2, .s-block h1 {
  background: linear-gradient(90deg, #ffffff 60%, var(--v-orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== ظهور تدريجي عند التمرير (مع JS المرفق) ===== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* عنصر داكن أُضيف تلقائياً بواسطة JS (auto-dark enforcer) */
[data-v-auto-dark] {
  background-color: var(--v-bg-2) !important;
  background-image: none !important;
}
[data-v-auto-dark] * { color: var(--v-text) !important; }

/* ===== بديل أنيق لصور المنتج الناقصة (placeholder.png من سلة) =====
   يعمل مع JS المرفق: يخفي صورة سلة الافتراضية البيضاء ويظهر بدلها
   دائرة متوهجة بنفس هوية بطاقاتك الحالية، لحين رفع صور حقيقية */
.s-product-card-image {
  position: relative;
  background: radial-gradient(circle at 50% 45%, rgba(255,100,0,0.22), #0a0a0a 70%) !important;
}
.v-fallback-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.v-fallback-badge .v-fallback-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255,100,0,0.55);
  box-shadow: 0 0 24px rgba(255,100,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--v-orange);
  font-weight: bold;
}
.v-fallback-badge .v-fallback-label {
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
}

/* ============================================
   المرحلة الأولى
   ============================================ */

/* شريط الإشعارات */
#v-announcement-bar {
  position: relative;
  z-index: 60;
  background: linear-gradient(90deg, #7a2e00, var(--v-orange), #7a2e00);
  background-size: 200% 100%;
  animation: v-bar-shine 6s linear infinite;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 10px 40px;
}
@keyframes v-bar-shine { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
#v-announce-close {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

/* شريط العداد التنازلي */
#v-countdown-bar {
  position: relative;
  z-index: 59;
  background: var(--v-bg-2);
  border-bottom: 1px solid rgba(255,100,0,.25);
  color: var(--v-text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 13px;
}
.v-countdown-time {
  font-weight: bold;
  color: var(--v-orange);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

/* Progress Bar */
#v-progress-bar {
  position: fixed;
  top: 0;
  right: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--v-orange), #ffb066);
  z-index: 9999;
  transition: width .1s ease-out;
  box-shadow: 0 0 8px rgba(255,100,0,.6);
}

/* ============================================
   المرحلة الثانية
   ============================================ */

/* Glow يتبع الماوس */
#v-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,100,0,0.15), transparent 70%);
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  mix-blend-mode: screen;
}

/* Background Animation */
#v-bg-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#v-bg-ambient .v-blob {
  position: absolute;
  width: 45vw;
  height: 45vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.10;
  background: radial-gradient(circle, var(--v-orange), transparent 70%);
}
#v-bg-ambient .v-blob-1 { top: -10%; right: -10%; animation: v-blob-move-1 22s ease-in-out infinite alternate; }
#v-bg-ambient .v-blob-2 { bottom: -15%; left: -10%; animation: v-blob-move-2 26s ease-in-out infinite alternate; }
@keyframes v-blob-move-1 {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(-6vw, 8vw) scale(1.15); }
}
@keyframes v-blob-move-2 {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(6vw, -6vw) scale(1.1); }
}
/* المحتوى فوق الخلفية المتحركة دايماً */
.store-header, main, .store-footer, #v-announcement-bar, #v-countdown-bar {
  position: relative;
  z-index: 2;
}

/* Ripple */
.v-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  transform: scale(0);
  animation: v-ripple-anim .6s ease-out;
  pointer-events: none;
}
@keyframes v-ripple-anim {
  to { transform: scale(2.6); opacity: 0; }
}

/* Smooth Page Transition */
body.v-fade-ready { opacity: 0; transition: opacity .35s ease; }
body.v-fade-ready.v-loaded { opacity: 1; }

/* ============================================
   Recently Viewed
   ============================================ */
.v-recently-viewed {
  background: var(--v-bg);
  padding: 50px 24px;
  border-top: 1px solid var(--v-border);
}
.v-recently-viewed-inner { max-width: 1280px; margin: 0 auto; }
.v-recently-viewed h3 {
  color: var(--v-text);
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.v-recently-viewed-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.v-rv-card {
  flex: 0 0 180px;
  background: var(--v-bg-2);
  border: 1px solid var(--v-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .3s ease, border-color .3s ease;
}
.v-rv-card:hover { transform: translateY(-6px); border-color: rgba(255,100,0,.5); }
.v-rv-img {
  width: 100%;
  height: 120px;
  background-size: cover;
  background-position: center;
  background-color: var(--v-bg-3);
}
.v-rv-title {
  color: var(--v-text) !important;
  font-size: 13px;
  padding: 10px 12px 4px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.v-rv-price {
  color: var(--v-orange) !important;
  font-size: 13px;
  font-weight: bold;
  padding: 0 12px 12px;
}

/* ============================================
   تحريك صورة المنتج تلقائياً يمين/يسار — بطاقات القوائم
   يفعّل نفسه تلقائياً بس إذا رفعت صورتين حقيقيتين مختلفتين
   للمنتج (يشتغل مع JS المرفق، ما يحتاج تعديل يدوي، وما يحتاج
   تمرير ماوس — يتحرك باستمرار)
   ============================================ */
.v-card-slide-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}
.v-card-slide-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== سلايدر صور صفحة المنتج (Swiper) — تنسيق داكن/برتقالي ===== */
.swiper-pagination-bullet {
  background: rgba(255,255,255,0.4) !important;
  opacity: 1 !important;
}
.swiper-pagination-bullet-active {
  background: var(--v-orange) !important;
}
.swiper-button-next, .swiper-button-prev {
  color: var(--v-orange) !important;
  background: rgba(10,10,10,0.6);
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  backdrop-filter: blur(6px);
}
.swiper-button-next:after, .swiper-button-prev:after {
  font-size: 16px !important;
}

/* ملاحظة: تحريك معرض صفحة المنتج نفسه (يمين/يسار) يستخدم Swiper
   الأصلي بالثيم مباشرة (JS المرفق فقط يشغّله تلقائياً كل 2.5 ثانية)،
   فما يحتاج أي كلاسات CSS إضافية هنا — الحركة والتنسيق (الأسهم
   والنقاط) موجودة أعلاه في قسم "سلايدر صور صفحة المنتج". */