:root {
  --primary-color: #35d6ff;
  --gold-dark: #071b3a;
  --gold-light: #35d6ff;
  --black: #071b3a;
  --black-light: #0b2d5c;
  --white: #ffffff;

  --success: #28a745;
  --danger: #dc3545;
  --warning: #ffc107;

  --light-bg: #f4fcff;
  --light-card: #ffffff;
  --light-soft: #dff8ff;
  --light-text: #071b3a;
  --light-border: rgba(7, 27, 58, 0.10);

  --dark-bg: #02040a;
  --dark-text: #ffffff;
  --dark-item-bg: #071b3a;
  --dark-border: rgba(53, 216, 255, 0.24);

  --banner-height: 200px;
  --banner-height-mobile: 120px;
}

body.dark-mode {
  --primary-color: #35d6ff;
  --gold-dark: #071b3a;
  --gold-light: #35d6ff;
  --black: #ffffff;
  --black-light: #dff8ff;
  --white: #02040a;

  --dark-bg: #02040a;
  --dark-text: #ffffff;
  --dark-item-bg: #071b3a;
  --dark-border: rgba(53, 216, 255, 0.28);
}

body {
  background:
    radial-gradient(circle at top right, rgba(53,216,255,.30), transparent 34%),
    radial-gradient(circle at bottom left, rgba(7,27,58,.10), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #eefbff 48%, #dff8ff 100%);
  color: var(--light-text);
  min-height: 100vh;
}

body.dark-mode {
  background:
    radial-gradient(circle at top right, rgba(53,216,255,.16), transparent 34%),
    radial-gradient(circle at bottom left, rgba(11,45,92,.55), transparent 34%),
    linear-gradient(135deg, #02040a 0%, #071b3a 48%, #000000 100%);
  color: var(--dark-text);
}

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

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

  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(223,248,255,.54));

  border: 1px solid rgba(7,27,58,.10);

  box-shadow:
    0 18px 42px rgba(7,27,58,.14),
    inset 0 1px 0 rgba(255,255,255,.8);
}

body.dark-mode .banner-swiper {
  background:
    linear-gradient(135deg, rgba(7,27,58,.72), rgba(0,0,0,.56));

  border-color: rgba(53,216,255,.23);

  box-shadow:
    0 20px 45px rgba(0,0,0,.48),
    0 0 24px rgba(53,216,255,.10),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.banner-swiper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  z-index: 2;
}

.banner-swiper .swiper-slide img {
  width: 100%;
  height: var(--banner-height);
  object-fit: cover;
  border-radius: 28px;
  display: block;
  transition: transform .35s ease, filter .35s ease;
}

.banner-swiper .swiper-slide img:hover {
  transform: scale(1.025);
}

body.dark-mode .banner-swiper .swiper-slide img {
  border: none;
  filter: brightness(.92) contrast(1.05);
}

/* Swiper pagination */
.swiper-pagination-bullet {
  width: 18px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.75) !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  width: 28px !important;
  background: #35d6ff !important;
  box-shadow: 0 0 12px rgba(53,216,255,.55);
}

/* منع التحديد باللمس */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* حركات خفيفة عامة */
@keyframes k1Float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes k1Glow {
  0%, 100% {
    box-shadow: 0 0 12px rgba(53,216,255,.18);
  }

  50% {
    box-shadow: 0 0 24px rgba(53,216,255,.34);
  }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(7,27,58,.08);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #071b3a, #35d6ff);
  border-radius: 999px;
}

body.dark-mode::-webkit-scrollbar-track {
  background: rgba(255,255,255,.05);
}

/* SweetAlert خفيف لو ظهر بالموقع */
.swal2-popup {
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, #ffffff, #eefbff) !important;
  color: #071b3a !important;
  box-shadow: 0 20px 50px rgba(7,27,58,.22) !important;
}

body.dark-mode .swal2-popup {
  background:
    linear-gradient(180deg, #071b3a, #02040a) !important;
  color: #ffffff !important;
  border: 1px solid rgba(53,216,255,.22) !important;
}

.swal2-confirm {
  border-radius: 14px !important;
  background: linear-gradient(135deg, #071b3a, #0b8fc2) !important;
  box-shadow: 0 10px 22px rgba(7,27,58,.22) !important;
}

.swal2-cancel {
  border-radius: 14px !important;
}

/* ==================== Responsive ==================== */
@media (max-width: 768px) {
  .banner-wrapper {
    padding: 0 10px;
    margin-top: 10px;
    margin-bottom: 18px;
  }

  .banner-swiper {
    height: var(--banner-height-mobile);
    border-radius: 22px;
  }

  .banner-swiper::before {
    border-radius: 22px;
  }

  .banner-swiper .swiper-slide img {
    height: var(--banner-height-mobile);
    object-fit: cover;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .banner-wrapper {
    padding: 0 8px;
  }

  .banner-swiper {
    border-radius: 20px;
  }

  .banner-swiper .swiper-slide img {
    border-radius: 20px;
  }
}