:root {
  /* الألوان الأساسية - الوضع النهاري */
  --primary-color: #8B4513;    /* بني متوسط */
  --gold-dark: #5C4033;        /* بني غامق */
  --gold-light: #D2B48C;       /* بيج فاتح */
  --black: #3E2723;            /* نص بني غامق */
  --black-light: #6D4C41;      /* بني رمادي فاتح */
  --white: #FFFFFF;            /* خلفية ونص */
  --success: #28a745;
  --danger: #dc3545;
  --warning: #ffc107;

  /* ألوان الخلفيات النهارية */
  --dark-bg: #ffffff;          /* خلفية نهار بيضاء */
  --dark-text: #3E2723;        /* نص بني */
  --dark-item-bg: #f5f5dc;     /* بيج فاتح جداً */
  --dark-border: #e6ddc4;      /* حدود بيج فاتح */

  /* ألوان البنر */
  --banner-height: 200px;
  --banner-height-mobile: 120px;
}

/* الوضع الليلي */
body.dark-mode {
  --primary-color: #5C4033;    /* بني غامق */
  --gold-dark: #3E2723;        /* بني أغمق */
  --gold-light: #A0522D;       /* بني فاتح/مائل للنحاسي */
  --black: #F5EBDD;            /* نص فاتح */
  --black-light: #D7CCC8;      /* بني فاتح رمادي */
  --white: #3E2723;            /* خلفية بني داكن */
  --dark-bg: #3E2723;          /* خلفية داكنة */
  --dark-text: #F5EBDD;        /* نص فاتح */
  --dark-item-bg: #4E342E;     /* بني متوسط */
  --dark-border: #6D4C41;      /* بني أفتح */
}


/* ==================== 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;
  }
}