/* ═══════════════════════════════════════════════════════════
   🚀 RBSHCAR - متجر قطع غيار احترافي
   ✨ خلفية متحركة Parallax + خطوط رمادية متدرجة
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   🎨 المتغيرات الأساسية (سهلة التعديل)
═══════════════════════════════════════════════════════════ */
:root {
  --rbsh-dark-1: #0f172a;
  --rbsh-dark-2: #1e293b;
  --rbsh-dark-3: #334155;
  --rbsh-gray-1: #475569;
  --rbsh-gray-2: #64748b;
  --rbsh-gray-3: #94a3b8;
  --rbsh-light: #cbd5e1;
  --rbsh-bg: #eaeaea;
  --rbsh-white: #ffffff;
  --rbsh-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --rbsh-shadow-md: 0 4px 20px rgba(15, 23, 42, 0.08);
  --rbsh-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.15);
  --rbsh-transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════
   🧹 إزالة الخلفيات الافتراضية
═══════════════════════════════════════════════════════════ */
body,
.main-content,
.content,
.page-wrapper,
.wrapper {
  background: transparent !important;
  background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════
   🌫️ الخلفية الأساسية + تأثير Parallax
═══════════════════════════════════════════════════════════ */
body {
  position: relative;
  background-color: var(--rbsh-bg) !important;
  background-image: 
    radial-gradient(ellipse at top, rgba(100, 116, 139, 0.1), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(71, 85, 105, 0.1), transparent 60%) !important;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════
   ✨ طبقة الخلفية المتحركة RBSHCAR
   📌 تتحرك مع التمرير (Parallax Effect)
═══════════════════════════════════════════════════════════ */
body::after {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'><defs><linearGradient id='g1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' style='stop-color:%231e293b;stop-opacity:0.25'/><stop offset='50%25' style='stop-color:%23475569;stop-opacity:0.18'/><stop offset='100%25' style='stop-color:%2394a3b8;stop-opacity:0.12'/></linearGradient><linearGradient id='g2' x1='100%25' y1='0%25' x2='0%25' y2='100%25'><stop offset='0%25' style='stop-color:%230f172a;stop-opacity:0.22'/><stop offset='100%25' style='stop-color:%2364748b;stop-opacity:0.10'/></linearGradient><linearGradient id='g3' x1='0%25' y1='100%25' x2='100%25' y2='0%25'><stop offset='0%25' style='stop-color:%23334155;stop-opacity:0.20'/><stop offset='100%25' style='stop-color:%23cbd5e1;stop-opacity:0.08'/></linearGradient></defs><g fill='none'><text x='50' y='90' font-family='Arial Black, Impact, sans-serif' font-size='52' font-weight='900' font-style='italic' transform='rotate(-20 50 90)' fill='url(%23g1)' letter-spacing='4'>RBSHCAR</text><text x='420' y='150' font-family='Arial Black, Impact, sans-serif' font-size='32' font-weight='900' transform='rotate(25 420 150)' fill='url(%23g2)' letter-spacing='3'>RBSHCAR</text><text x='150' y='260' font-family='Arial Black, Impact, sans-serif' font-size='68' font-weight='900' font-style='italic' transform='rotate(-8 150 260)' fill='url(%23g3)' letter-spacing='5'>RBSHCAR</text><text x='500' y='330' font-family='Arial Black, Impact, sans-serif' font-size='38' font-weight='900' transform='rotate(38 500 330)' fill='url(%23g1)' letter-spacing='3'>RBSHCAR</text><text x='30' y='440' font-family='Arial Black, Impact, sans-serif' font-size='58' font-weight='900' font-style='italic' transform='rotate(-32 30 440)' fill='url(%23g2)' letter-spacing='4'>RBSHCAR</text><text x='450' y='500' font-family='Arial Black, Impact, sans-serif' font-size='34' font-weight='900' transform='rotate(15 450 500)' fill='url(%23g3)' letter-spacing='3'>RBSHCAR</text><text x='200' y='600' font-family='Arial Black, Impact, sans-serif' font-size='48' font-weight='900' font-style='italic' transform='rotate(-18 200 600)' fill='url(%23g1)' letter-spacing='4'>RBSHCAR</text><text x='580' y='80' font-family='Arial Black, Impact, sans-serif' font-size='28' font-weight='900' transform='rotate(45 580 80)' fill='url(%23g2)' letter-spacing='2'>RBSHCAR</text><text x='10' y='320' font-family='Arial Black, Impact, sans-serif' font-size='24' font-weight='900' transform='rotate(60 10 320)' fill='url(%23g3)' letter-spacing='2'>RBSHCAR</text><text x='620' y='620' font-family='Arial Black, Impact, sans-serif' font-size='30' font-weight='900' transform='rotate(-45 620 620)' fill='url(%23g1)' letter-spacing='3'>RBSHCAR</text><text x='300' y='40' font-family='Arial Black, Impact, sans-serif' font-size='22' font-weight='900' font-style='italic' transform='rotate(10 300 40)' fill='url(%23g2)' letter-spacing='2'>RBSHCAR</text><text x='80' y='700' font-family='Arial Black, Impact, sans-serif' font-size='26' font-weight='900' transform='rotate(-55 80 700)' fill='url(%23g3)' letter-spacing='2'>RBSHCAR</text><text x='650' y='380' font-family='Arial Black, Impact, sans-serif' font-size='22' font-weight='900' transform='rotate(28 650 380)' fill='url(%23g1)' letter-spacing='2'>RBSHCAR</text><text x='350' y='750' font-family='Arial Black, Impact, sans-serif' font-size='40' font-weight='900' font-style='italic' transform='rotate(-12 350 750)' fill='url(%23g2)' letter-spacing='3'>RBSHCAR</text><text x='700' y='200' font-family='Arial Black, Impact, sans-serif' font-size='36' font-weight='900' transform='rotate(-25 700 200)' fill='url(%23g3)' letter-spacing='3'>RBSHCAR</text><text x='250' y='380' font-family='Arial Black, Impact, sans-serif' font-size='28' font-weight='900' font-style='italic' transform='rotate(35 250 380)' fill='url(%23g1)' letter-spacing='2'>RBSHCAR</text></g></svg>") !important;
  background-repeat: repeat !important;
  background-size: 800px 800px !important;
  will-change: transform;
  transition: transform 0.1s ease-out;
  transform: translate3d(0, 0, 0);
}

/* ═══════════════════════════════════════════════════════════
   🎨 الخطوط الرمادية المتدرجة (عناوين احترافية)
═══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.main-title,
.block-head__title,
.product-title,
.category-title,
.page-title,
.section-title {
  background: linear-gradient(
    135deg,
    var(--rbsh-dark-1) 0%,
    var(--rbsh-dark-2) 25%,
    var(--rbsh-gray-1) 50%,
    var(--rbsh-gray-2) 75%,
    var(--rbsh-gray-3) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  position: relative;
  display: inline-block;
}

/* تأثير لمعان عند المرور */
h1:hover, h2:hover, h3:hover, h4:hover {
  background: linear-gradient(
    90deg,
    var(--rbsh-dark-1) 0%,
    var(--rbsh-gray-1) 25%,
    var(--rbsh-light) 50%,
    var(--rbsh-gray-1) 75%,
    var(--rbsh-dark-1) 100%
  ) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: rbshShine 3s linear infinite;
}

@keyframes rbshShine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════
   📦 البطاقات بتأثير Glassmorphism
═══════════════════════════════════════════════════════════ */
.s-product-card,
.product-card,
.card,
.block--product-list .product-item,
.block--products .product-item {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  box-shadow: var(--rbsh-shadow-md) !important;
  transition: all var(--rbsh-transition);
  position: relative;
  overflow: hidden;
}

.s-product-card:hover,
.product-card:hover,
.card:hover {
  background-color: rgba(255, 255, 255, 0.95) !important;
  transform: translateY(-6px);
  box-shadow: var(--rbsh-shadow-lg) !important;
  border-color: rgba(71, 85, 105, 0.4) !important;
}

/* تأثير اللمعان على البطاقات */
.s-product-card::after,
.product-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: right 0.6s ease;
  pointer-events: none;
  z-index: 3;
}

.s-product-card:hover::after,
.product-card:hover::after {
  right: 100%;
}

/* ═══════════════════════════════════════════════════════════
   🧭 الهيدر والفوتر
═══════════════════════════════════════════════════════════ */
.header,
.header-wrapper,
.site-header,
.navbar {
  background-color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  position: sticky;
  top: 0;
  z-index: 100;
}

footer,
.footer,
.site-footer {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95)) !important;
  backdrop-filter: blur(20px);
  color: #e2e8f0 !important;
  margin-top: 4rem;
}

footer a,
.footer a {
  color: var(--rbsh-gray-3) !important;
  transition: color var(--rbsh-transition);
}

footer a:hover,
.footer a:hover {
  color: var(--rbsh-light) !important;
}

/* ═══════════════════════════════════════════════════════════
   🎯 الأزرار بتدرج رمادي فاخر
═══════════════════════════════════════════════════════════ */
.btn-primary,
.button--primary,
.main-btn,
.s-button--primary,
.add-to-cart,
.s-button--add-cart {
  background: linear-gradient(135deg, var(--rbsh-dark-2) 0%, var(--rbsh-gray-1) 50%, var(--rbsh-gray-2) 100%) !important;
  background-size: 200% 200% !important;
  border: none !important;
  color: var(--rbsh-white) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  transition: all var(--rbsh-transition) !important;
  box-shadow: 0 4px 15px rgba(30, 41, 59, 0.3) !important;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.btn-primary:hover,
.button--primary:hover,
.main-btn:hover,
.s-button--primary:hover {
  background-position: 100% 100% !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(30, 41, 59, 0.45) !important;
}

/* ═══════════════════════════════════════════════════════════
   🔗 الروابط
═══════════════════════════════════════════════════════════ */
a {
  transition: color var(--rbsh-transition);
}

a:hover {
  color: var(--rbsh-dark-2) !important;
}

/* ═══════════════════════════════════════════════════════════
   🔍 حقول الإدخال
═══════════════════════════════════════════════════════════ */
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--rbsh-dark-2) !important;
  box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.15) !important;
  transition: all var(--rbsh-transition);
}

/* ═══════════════════════════════════════════════════════════
   📊 شريط التمرير المخصص
═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--rbsh-bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--rbsh-dark-2), var(--rbsh-gray-2));
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--rbsh-dark-1), var(--rbsh-dark-2));
}

/* ═══════════════════════════════════════════════════════════
   🎯 تحديد النص
═══════════════════════════════════════════════════════════ */
::selection {
  background: var(--rbsh-dark-2);
  color: var(--rbsh-white);
}

/* ═══════════════════════════════════════════════════════════
   📱 الاستجابة للجوال
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body::after {
    background-size: 500px 500px !important;
  }
  
  h1, h2, h3 {
    font-size: 1.8rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   ⚡ تحسينات الأداء
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  body::after {
    transition: none !important;
  }
}