:root {
  /* الألوان الأساسية - الوضع النهاري */
  --primary-color: #E4287C;    /* سماوي وردي */
  --gold-dark: #E4287C;        /* سماوي (أساسي) */
  --gold-light: #F535AA;       /* سماوي فاتح */
  --black: #121212;            /* نص داكن */
  --black-light: #1E1E1E;      /* رمادي داكن */
  --white: #FFFFFF;            /* خلفيات ونص */
  --success: #28a745;
  --danger: #dc3545;
  --warning: #ffc107;
  
  /* ألوان الخلفيات والوضع الليلي */
  --dark-bg: #121212;          /* خلفية داكنة */
  --dark-text: #B0C4DE;        /* نص سماوي فاتح */
  --dark-item-bg: #004080;     /* خلفية العناصر في الوضع الداكن */
  --dark-border: #3B5998;      /* حدود سماوية داكنة */
  
  /* ألوان البنر */
  --banner-height: 200px;
  --banner-height-mobile: 120px;
}

/* الوضع الليلي */
body.dark-mode {
  --primary-color: #9370db;    /* بنفسجي فاتح */
  --gold-dark: #6a0dad;        /* بنفسجي داكن */
  --gold-light: #8a2be2;       /* بنفسجي متوسط */
  --black: #FFFFFF;            /* نص أبيض */
  --black-light: #cccccc;
  --white: #121212;            /* خلفية داكنة */
  --dark-bg: #2e0854;
  --dark-text: #B0C4DE;
  --dark-item-bg: #3b0a68;
  --dark-border: #6a0dad;
}

/* ==================== Banner Styling ==================== */
.banner-wrapper {
  padding: 0 10px;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 20px;
  margin-top: 10px;
}

.banner-swiper {
  width: 100%;
  height: var(--banner-height);
  aspect-ratio: 16 / 5;
  border-radius: 12px;
  transition: height 0.3s ease;
}

.banner-swiper .swiper-slide img {
  width: 100%;
  height: var(--banner-height);
  object-fit: contain;
  border-radius: 12px;
  display: block;
  transition: border-color 0.3s;
}

/* حدود الصورة في الوضع الليلي */
body.dark-mode .banner-swiper .swiper-slide img {
  border: 2px solid #333;
}

/* === تغيير ارتفاع البنر على الشاشات الصغيرة === */
@media (max-width: 768px) {
  .banner-swiper {
    height: var(--banner-height-mobile);
  }
  .banner-swiper .swiper-slide img {
    height: var(--banner-height-mobile);
    object-fit: cover;
  }
}