/* ==========================================================================
   ألوان العالم | Alwan Al-alem — تخصيص متقدم (CSS)
   متجر قطع غيار Range Rover و Jaguar — ثيم رائد (Raed) — منصة سلة
   ملاحظة مهمة:
   الأسماء الصفية (Class Names) المستخدمة أدناه هي الأسماء الشائعة في
   ثيم رائد وفي مكوّنات سلة (Web Components مثل salla-button, salla-header...).
   قد تختلف بعض الأسماء بشكل طفيف حسب إصدار الثيم لديك، لذلك يُنصح
   بفتح "أدوات المطوّر" (Inspect) في المتصفح والتأكد من الأسماء الفعلية
   إن لم يظهر أي تأثير على عنصر معيّن، ثم تعديل السطر المطابق فقط.
   ========================================================================== */

/* ---------------------------------------------------------------------
   1) متغيرات الألوان والهوية البصرية (CSS Variables)
   تجميع كل قيم التصميم في مكان واحد يسهّل التعديل مستقبلاً
   --------------------------------------------------------------------- */
:root{
  --aa-bg: #111111;              /* لون الخلفية العام */
  --aa-text: #FFFFFF;            /* لون النص العام */
  --aa-btn: #0F5C4D;             /* لون الأزرار الأساسي (أخضر داكن فاخر) */
  --aa-btn-hover-bg: #000000;    /* خلفية الزر عند الهوفر */
  --aa-btn-hover-border: #FFFFFF;/* إطار الزر عند الهوفر */
  --aa-radius: 16px;             /* درجة استدارة الزوايا */
  --aa-shadow: 0 6px 20px rgba(0,0,0,0.25); /* ظل ناعم غير مبالغ فيه */
  --aa-shadow-hover: 0 10px 28px rgba(0,0,0,0.35);
  --aa-transition: 0.3s ease;    /* مدة ونوع الحركة الموحّدة في الموقع */
  --aa-border-subtle: 1px solid rgba(255,255,255,0.12);
}

/* ---------------------------------------------------------------------
   2) الخلفية والنص العام للمتجر
   --------------------------------------------------------------------- */
body{
  background-color: var(--aa-bg) !important;
  color: var(--aa-text) !important;
}

/* عناصر النصوص الأساسية (عناوين / فقرات) تتبع نفس هوية الألوان */
h1, h2, h3, h4, h5, h6,
.s-block-title, .s-section-title, .section-title{
  color: var(--aa-text) !important;
}

/* ---------------------------------------------------------------------
   3) الهيدر: الشعار في اليسار، البحث في المنتصف، الحساب/المفضلة/السلة
   --------------------------------------------------------------------- */
salla-header, .s-header-main, header{
  background-color: var(--aa-bg) !important;
  border-bottom: var(--aa-border-subtle);
}

/* تكبير مساحة الشعار قليلاً ليظهر بشكل فاخر */
.s-header-main-logo img,
salla-header img.logo{
  max-height: 55px;
  transition: transform var(--aa-transition);
}
.s-header-main-logo img:hover{
  transform: scale(1.04);
}

/* توسيط حقل البحث وتحسين شكله ليتماشى مع الهوية الفاخرة */
.s-header-main-slot salla-search-input,
.s-header-search, salla-search-input{
  background-color: #1a1a1a !important;
  border-radius: var(--aa-radius) !important;
  border: var(--aa-border-subtle) !important;
  color: var(--aa-text) !important;
  transition: border-color var(--aa-transition), box-shadow var(--aa-transition);
}
.s-header-search:focus-within,
salla-search-input:focus-within{
  border-color: var(--aa-btn) !important;
  box-shadow: 0 0 0 3px rgba(15,92,77,0.35);
}

/* أيقونات الحساب / المفضلة / السلة */
.s-header-icons-item,
.s-header-actions a,
salla-cart-summary, salla-wishlist-icon{
  color: var(--aa-text) !important;
  transition: color var(--aa-transition), transform var(--aa-transition);
}
.s-header-icons-item:hover,
.s-header-actions a:hover{
  color: var(--aa-btn) !important;
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------------
   4) الأزرار — الشكل العام لكل أزرار الموقع (سلة + مكوّنات مخصصة)
   --------------------------------------------------------------------- */
salla-button::part(button),
.btn, .s-btn, button.btn-primary, .add-to-cart-btn{
  background-color: var(--aa-btn) !important;
  color: var(--aa-text) !important;
  border: 2px solid var(--aa-btn) !important;
  border-radius: var(--aa-radius) !important;
  box-shadow: var(--aa-shadow);
  transition: background-color var(--aa-transition),
              border-color var(--aa-transition),
              box-shadow var(--aa-transition),
              transform var(--aa-transition);
  font-weight: 600;
}
salla-button::part(button):hover,
.btn:hover, .s-btn:hover, button.btn-primary:hover, .add-to-cart-btn:hover{
  background-color: var(--aa-btn-hover-bg) !important;
  border-color: var(--aa-btn-hover-border) !important;
  box-shadow: var(--aa-shadow-hover);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------------
   5) البنر الرئيسي (Hero)
   --------------------------------------------------------------------- */
.s-block-slider, .hero-banner, #aa-hero-banner{
  position: relative;
  border-radius: var(--aa-radius);
  overflow: hidden;
}
.s-block-slider::after, #aa-hero-banner::after{
  /* تغميق خفيف للصورة لإبراز النص الأبيض فوقها */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.s-block-slider .slide-caption, #aa-hero-banner .aa-hero-text{
  position: relative;
  z-index: 2;
  color: var(--aa-text) !important;
  text-align: center;
}
.s-block-slider .slide-caption h1, #aa-hero-banner .aa-hero-text h1{
  font-size: clamp(24px, 4vw, 44px);
  font-weight: 800;
  margin-bottom: 12px;
}
.s-block-slider .slide-caption p, #aa-hero-banner .aa-hero-text p{
  font-size: clamp(14px, 2vw, 18px);
  opacity: 0.9;
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------------
   6) قسم "اختر سيارتك" — يتم إنشاء بطاقاته عبر JavaScript (انظر custom.js)
   --------------------------------------------------------------------- */
#aa-choose-car{
  padding: 60px 20px;
  text-align: center;
}
#aa-choose-car h2{
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  margin-bottom: 32px;
  position: relative;
  display: inline-block;
}
#aa-choose-car h2::after{
  /* خط تحت العنوان بلون الزر لإضافة لمسة فخامة */
  content:"";
  display:block;
  width: 60px; height: 3px;
  background: var(--aa-btn);
  margin: 12px auto 0;
  border-radius: 3px;
}

.aa-car-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.aa-car-card{
  position: relative;
  height: 350px;
  border-radius: var(--aa-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--aa-shadow);
  border: 2px solid transparent;
  background-color: #1a1a1a; /* خلفية داكنة موحّدة خلف الشعار بدل صورة السيارة */
  transition: border-color var(--aa-transition), box-shadow var(--aa-transition), background-color var(--aa-transition);
}

/* حاوية الشعار: تتوسّط البطاقة رأسيًا وأفقيًا */
.aa-car-card .aa-car-logo-wrap{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* الشعار نفسه: خلفية شفافة (PNG/SVG)، حجم ثابت تقريبي، بدون أي تشويه للأبعاد */
.aa-car-card .aa-car-logo{
  max-height: 120px;
  max-width: 70%;
  width: auto;
  height: auto;
  object-fit: contain;      /* يحافظ على أبعاد الشعار الأصلية دون تمديد أو تشويه */
  display: block;
  /* الشعارات الأصلية أسود على شفاف؛ هذا الفلتر يحوّلها لأبيض لتظهر بوضوح
     على خلفية البطاقة الداكنة. إن رفعت شعارًا أبيض جاهزًا يمكنك حذف هذا السطر */
  filter: brightness(0) invert(1);
  transition: transform var(--aa-transition);
}

.aa-car-card .aa-car-overlay{
  /* طبقة سوداء شفافة خفيفة أسفل البطاقة لإبراز اسم السيارة فوقها */
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 28px;
  transition: background var(--aa-transition);
  pointer-events: none; /* حتى لا تحجب النقر على البطاقة */
}
.aa-car-card .aa-car-title{
  color: var(--aa-text);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.5px;
  transition: transform var(--aa-transition);
}
.aa-car-card:hover{
  border-color: var(--aa-btn-hover-border);
  box-shadow: var(--aa-shadow-hover);
  background-color: #202020;
}
.aa-car-card:hover .aa-car-logo{
  transform: scale(1.06);
}
.aa-car-card:hover .aa-car-overlay{
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);
}
.aa-car-card:hover .aa-car-title{
  transform: translateY(-8px);
}

@media (max-width: 768px){
  .aa-car-grid{ grid-template-columns: 1fr; }
  .aa-car-card{ height: 260px; }
}

/* ---------------------------------------------------------------------
   7) قسم المميزات (٤ بطاقات بأيقونة دائرية)
   --------------------------------------------------------------------- */
#aa-features{
  padding: 50px 20px;
}
.aa-features-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.aa-feature-card{
  background: #1a1a1a;
  border: var(--aa-border-subtle);
  border-radius: var(--aa-radius);
  padding: 28px 16px;
  text-align: center;
  transition: transform var(--aa-transition), box-shadow var(--aa-transition), border-color var(--aa-transition);
}
.aa-feature-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--aa-shadow-hover);
  border-color: var(--aa-btn);
}
.aa-feature-icon{
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--aa-btn);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-size: 26px;
  color: var(--aa-text);
}
.aa-feature-title{
  font-weight: 700;
  font-size: 16px;
  color: var(--aa-text);
}

@media (max-width: 900px){
  .aa-features-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .aa-features-grid{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   8) بطاقات المنتجات (الأكثر مبيعاً / أحدث المنتجات) — تنسيق موحّد
   --------------------------------------------------------------------- */
.s-product-card, salla-product-card{
  background-color: #1a1a1a !important;
  border-radius: var(--aa-radius) !important;
  border: var(--aa-border-subtle);
  overflow: hidden;
  transition: transform var(--aa-transition), box-shadow var(--aa-transition);
}
.s-product-card:hover, salla-product-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--aa-shadow-hover);
}
.s-product-card img{
  transition: transform var(--aa-transition);
}
.s-product-card:hover img{
  transform: scale(1.05);
}
.s-product-card .product-title, .s-product-card h3{
  color: var(--aa-text) !important;
}
.s-product-card .product-price, .s-product-card .price{
  color: var(--aa-btn) !important;
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   9) بانر "لا تعرف رقم القطعة؟" — يُنشأ عبر JavaScript
   --------------------------------------------------------------------- */
#aa-vin-banner{
  width: 100%;
  background-color: #000000;
  padding: 50px 20px;
  text-align: center;
  border-radius: var(--aa-radius);
  margin: 40px 0;
}
#aa-vin-banner h2{
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 800;
  margin-bottom: 10px;
}
#aa-vin-banner p{
  opacity: 0.85;
  margin-bottom: 22px;
  font-size: 15px;
}
#aa-vin-banner .aa-whatsapp-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--aa-btn);
  color: var(--aa-text);
  border: 2px solid var(--aa-btn);
  border-radius: var(--aa-radius);
  padding: 12px 26px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--aa-transition), border-color var(--aa-transition), transform var(--aa-transition);
}
#aa-vin-banner .aa-whatsapp-btn:hover{
  background-color: var(--aa-btn-hover-bg);
  border-color: var(--aa-btn-hover-border);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------------
   10) آراء العملاء
   --------------------------------------------------------------------- */
.s-block-reviews, .customer-reviews{
  background-color: #161616 !important;
  border-radius: var(--aa-radius);
  padding: 20px;
}
.s-block-reviews .review-card, .customer-reviews .review-card{
  background-color: #1f1f1f !important;
  border-radius: var(--aa-radius);
  border: var(--aa-border-subtle);
}

/* ---------------------------------------------------------------------
   11) الفوتر
   --------------------------------------------------------------------- */
.s-footer, salla-footer, footer{
  background-color: #000000 !important;
  color: var(--aa-text) !important;
  border-top: var(--aa-border-subtle);
}
.s-footer a, footer a{
  color: rgba(255,255,255,0.75) !important;
  transition: color var(--aa-transition);
}
.s-footer a:hover, footer a:hover{
  color: var(--aa-btn) !important;
}

/* ---------------------------------------------------------------------
   12) أنيميشن عام للظهور عند التمرير (يُفعَّل عبر JavaScript)
   --------------------------------------------------------------------- */
.aa-fade-in{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.aa-fade-in.aa-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------
   13) تجاوب عام إضافي لضمان الشكل الفاخر على كل المقاسات
   --------------------------------------------------------------------- */
@media (max-width: 768px){
  #aa-choose-car, #aa-features, #aa-vin-banner{
    padding-left: 12px;
    padding-right: 12px;
  }
}