/* ===== شبح ستور — CSS نهائي v6 ===== */

/* ══════════════════════════════════════
   1. خلفية الصفحة + شفافية الطبقات
══════════════════════════════════════ */
body,
.app-inner,
main#main-content,
.s-layout,
#app {
  background: #080808 !important;
  color: #ffffff !important;
  position: relative !important;
}

/* الكانفاس خلف كل شيء */
#ghost-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* كل الطبقات فوق الكانفاس */
header,
.store-header,
main#main-content,
.s-layout,
footer,
.s-block,
.s-block-container,
section {
  position: relative !important;
  z-index: 1 !important;
}

/* شفافية السكشن والكونتينر */
.s-block-container,
.s-block,
section,
.s-block-content-wrapper,
.s-block__title,
.container {
  background: transparent !important;
}

/* ══════════════════════════════════════
   2. الهيدر
══════════════════════════════════════ */
header,
header.store-header,
.store-header,
[class*="store-header"],
[class*="top-bar"],
[class*="topbar"],
.s-top-bar {
  background: rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.store-header > div,
.store-header > nav,
header > div,
header > nav,
[class*="header-bottom"],
[class*="header-main"],
[class*="header-middle"] {
  background: transparent !important;
}

.store-header a,
.store-header span,
.store-header p,
header a,
header span,
header p,
[class*="top-bar"] a,
[class*="top-bar"] span,
[class*="top-bar"] p {
  color: rgba(255,255,255,0.85) !important;
}

/* ══════════════════════════════════════
   3. شريط البحث
══════════════════════════════════════ */
input[type="search"],
input[type="text"],
.s-search input,
[class*="search"] input,
[class*="search-input"],
salla-search input,
salla-search [class*="input"] {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
  border-radius: 30px !important;
}

input[type="search"]::placeholder,
input[type="text"]::placeholder,
[class*="search"] input::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

[class*="search-bar"],
[class*="search-form"],
salla-search,
[class*="search-wrapper"] {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 30px !important;
}

/* ══════════════════════════════════════
   4. القائمة الرئيسية
══════════════════════════════════════ */
.main-menu,
ul.main-menu,
[class*="main-menu"],
nav ul,
.mm-spn--open {
  background: transparent !important;
}

.main-menu li a,
ul.main-menu li a,
[class*="main-menu"] li a,
nav ul li a,
a.text-gray-500 {
  color: rgba(255,255,255,0.8) !important;
}

.main-menu li a:hover,
ul.main-menu li a:hover,
a.text-gray-500:hover {
  color: #ffffff !important;
}

/* ══════════════════════════════════════
   5. زر إضافة للسلة
══════════════════════════════════════ */
.s-button-element.s-button-outline,
.s-button-element.s-button-primary-outline,
.s-button-element.s-button-btn.s-button-outline,
button.s-button-element[class*="outline"],
button.s-button-element {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: none !important;
  border-color: transparent !important;
  color: #000000 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  position: relative !important;
  z-index: 2 !important;
}

.s-button-element.s-button-outline *,
.s-button-element.s-button-primary-outline *,
button.s-button-element * {
  color: #000000 !important;
  fill: #000000 !important;
}

.s-button-element.s-button-outline:hover,
button.s-button-element:hover {
  background: #f0f0f0 !important;
  background-color: #f0f0f0 !important;
  box-shadow: 0 0 24px rgba(255,255,255,0.2) !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════
   6. الأقسام / Categories
══════════════════════════════════════ */
[class*="category"],
[class*="categories"],
.s-block--categories,
section[class*="categor"] {
  background: transparent !important;
}

[class*="category"] a,
[class*="category"] span,
[class*="category"] p,
[class*="category"] h1,
[class*="category"] h2,
[class*="category"] h3,
.s-block--categories a,
.s-block--categories span,
.s-block--categories h3 {
  color: #ffffff !important;
}

[class*="category-card"],
[class*="category-item"],
.s-block--categories article,
.s-block--categories li,
.s-block--categories > div > div {
  background: #131313 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: border-color .3s, transform .3s !important;
}

[class*="category-card"]:hover,
[class*="category-item"]:hover,
.s-block--categories article:hover {
  border-color: rgba(255,255,255,0.28) !important;
  transform: translateY(-4px) !important;
}

/* ══════════════════════════════════════
   7. كروت الميزات
══════════════════════════════════════ */
.s-block--features,
section[class*="features"],
[class*="features-section"] {
  background: transparent !important;
}

.s-block--features article,
.s-block--features > div article,
.s-block--features > div > div > div,
section[class*="features"] article,
section[class*="features"] > div > div,
section[class*="features"] li,
[class*="features-section"] article {
  background: rgba(19,19,19,0.9) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 16px !important;
  transition: border-color .3s, transform .3s !important;
}

.s-block--features article:hover,
section[class*="features"] article:hover {
  border-color: rgba(255,255,255,0.28) !important;
  transform: translateY(-5px) !important;
}

.s-block--features h1,.s-block--features h2,
.s-block--features h3,.s-block--features h4,
.s-block--features p,.s-block--features span,
section[class*="features"] h1,section[class*="features"] h2,
section[class*="features"] h3,section[class*="features"] h4,
section[class*="features"] p,section[class*="features"] span {
  color: #ffffff !important;
}

.s-block--features [class*="icon"],
.s-block--features svg,
section[class*="features"] [class*="icon"],
section[class*="features"] svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* ── s-block--features__item ── */
.s-block--features__item {
  background: rgba(17,17,17,0.9) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  padding: 40px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 16px !important;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

.s-block--features__item:hover {
  border-color: rgba(255,255,255,0.25) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
}

.s-block--features__item .feature-icon {
  width: 64px !important;
  height: 64px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.3s ease !important;
}

.s-block--features__item:hover .feature-icon {
  background: rgba(255,255,255,0.1) !important;
}

.s-block--features__item .feature-icon i {
  font-size: 26px !important;
  color: #ffffff !important;
}

.s-block--features__item h2 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.s-block--features__item p {
  font-size: 13px !important;
  color: rgba(255,255,255,0.5) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* ══════════════════════════════════════
   8. كروت المنتجات — شفافة جزئياً
══════════════════════════════════════ */
.s-product-card,
[class*="product-card"],
[class*="ProductCard"],
.product-item,
[class*="product-item"] {
  background: rgba(19,19,19,0.92) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 2 !important;
  transition: border-color .3s, transform .35s, box-shadow .35s !important;
}

.s-product-card::after,
[class*="product-card"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: ghostShimmer 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.s-product-card::before,
[class*="product-card"]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  opacity: 0;
  transition: opacity .3s;
  z-index: 2;
}

.s-product-card:hover,
[class*="product-card"]:hover {
  border-color: rgba(255,255,255,0.28) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 14px 40px rgba(255,255,255,0.06) !important;
}

.s-product-card:hover::before,
[class*="product-card"]:hover::before { opacity: 1; }

.s-product-card h1,.s-product-card h2,
.s-product-card h3,.s-product-card h4,
.s-product-card span,.s-product-card p,
[class*="product-card"] h3,[class*="product-card"] h4,
[class*="product-card"] span,[class*="product-card"] p {
  color: #ffffff !important;
}

/* ══════════════════════════════════════
   9. الأسعار
══════════════════════════════════════ */
salla-price,
salla-price *,
[class*="price"],
[class*="price"] * {
  color: #ffffff !important;
}

[class*="price"] s,
[class*="price"] del,
[class*="old-price"],
salla-price s,
salla-price del {
  color: rgba(255,255,255,0.35) !important;
  text-decoration: line-through !important;
}

/* ══════════════════════════════════════
   10. البانر
══════════════════════════════════════ */
.s-block--fixed-banner,
section[class*="fixed-banner"],
[class*="hero-section"] {
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
  z-index: 2 !important;
}

/* ══════════════════════════════════════
   11. الفوتر
══════════════════════════════════════ */
footer,
footer.store-footer,
.store-footer,
[class*="store-footer"] {
  background: rgba(10,10,10,0.9) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  position: relative !important;
  z-index: 2 !important;
}

footer a, footer p, footer span,
footer li, footer h1, footer h2, footer h3,
.store-footer a, .store-footer p, .store-footer span,
.store-footer li, .store-footer h1, .store-footer h2, .store-footer h3 {
  color: rgba(255,255,255,0.7) !important;
  background-color: transparent !important;
}

footer img, .store-footer img {
  filter: brightness(10) !important;
}

footer [class*="social"] a,
.store-footer [class*="social"] a {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════
   12. الحركات
══════════════════════════════════════ */
@keyframes ghostShimmer {
  0%   { left: -100%; }
  100% { left: 200%;  }
}