/* ==========================================
   CSS شامل لمتجر سترا - تيفاني فاخر (محسن قوي للوضوح + الالتصاق)
   ========================================== */

/* 1. خطوط + إعادة تعيين */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Tajawal:wght@400;500;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-padding-top: 100px !important; /* يمنع التداخل عند التمرير لأقسام داخلية */
}

body {
  font-family: 'Cairo', 'Tajawal', system-ui, sans-serif !important;
  direction: rtl;
  line-height: 1.7;
  color: #2d2d2d;
  background-color: #f9fdfc;
  padding-top: 100px !important; /* دفع المحتوى كله لتحت الهيدر الملتصق - جرب 90px أو 110px إذا لزم */
}

/* الألوان */
:root {
  --tiffany:       #81D8D0;
  --tiffany-dark:  #5ab7ae;
  --tiffany-darker:#3a9a92;
  --dark-bg:       #0a0a0a;
  --dark-overlay:  rgba(10, 10, 10, 0.95) !important; /* أغمق جدًا لتغطية الصورة الفاتحة */
  --text-light:    #000000 !important; /* أبيض نقي لأعلى تباين */
  --text-shadow:   0 2px 6px rgba(0,0,0,0.95) !important; /* ظل قوي جدًا للنصوص */
  --secondary:     #1a1a1a;
  --accent:        #d81e5b;
  --gray:          #6c757d;
  --white:         #000000;
}

/* 2. الهيدر - خلفية غامقة قوية + نصوص واضحة */
header, .header, .site-header, .main-header, .navbar, .top-bar {
  background-color: var(--dark-overlay) !important;
  color: var(--text-light) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
  border-bottom: 1px solid rgba(129, 216, 208, 0.08) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  backdrop-filter: none !important;
}

/* كل النصوص، الأيقونات، الروابط، شريط البحث في الهيدر */
.header *,
.header a,
.header .menu-item a,
.header .cart-icon,
.header .search-icon,
.header .account-icon,
.header .wishlist-icon,
.header input,
.header input::placeholder,
.header span,
.header p,
.header div,
.header .menu a {
  color: #000000 !important;
  text-shadow: var(--text-shadow) !important;
  transition: color 0.3s ease;
}

.header a:hover,
.header .menu-item a:hover {
  color: var(--tiffany) !important;
}

/* شريط البحث */
.header input[type="search"],
.header .search-bar,
.header input::placeholder {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border: 1px solid var(--tiffany) !important;
  text-shadow: none !important; /* ما نحتاج ظل داخل البحث */
}

/* 3. الأزرار */
.btn, button, .button, a.button, input[type="submit"], .add-to-cart {
  background-color: var(--tiffany) !important;
  color: var(--dark-bg) !important;
  border-radius: 30px !important;
  padding: 12px 26px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(129, 216, 208, 0.25);
}

.btn:hover, .add-to-cart:hover {
  background-color: var(--tiffany-dark) !important;
  transform: translateY(-3px);
}

/* 4. عرض المنتجات */
.products-grid, .collection-grid, .products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 30px !important;
  padding: 30px 15px !important;
}

.product-item {
  background: white;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  transition: all 0.4s ease;
}

.product-item:hover {
  transform: translateY(-12px);
  box-shadow: 0 15px 35px rgba(129, 216, 208, 0.25);
}

.product-price {
  color: var(--tiffany-darker) !important;
  font-weight: bold;
}

/* 5. الفوتر - نفس التحسين القوي */
footer, .site-footer, .footer {
  background-color: var(--dark-overlay) !important;
  color: var(--text-light) !important;
  padding: 70px 0 40px !important;
  border-top: 1px solid rgba(129, 216, 208, 0.1);
  text-shadow: var(--text-shadow) !important;
}

footer *,
footer a,
.footer-link,
.social-icon,
footer .phone,
footer .whatsapp,
.contact-info {
  color: #000000 !important;
  text-shadow: var(--text-shadow) !important;
}

footer a:hover,
.social-icon:hover {
  color: var(--tiffany) !important;
}

/* باقي الأقسام */
.product__title {
  font-size: 2.4rem !important;
  color: var(--secondary);
}

.badge-sale,
.onsale {
  background: var(--accent) !important;
  color: white !important;
  border-radius: 50px !important;
}

/* Responsive */
@media (max-width: 768px) {
  body { padding-top: 80px !important; }
  html { scroll-padding-top: 80px !important; }
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  }
}