/* === Horizontal scroll container === */
.race-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 16px;
  max-width: 100%;

  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
touch-action: pan-x;
  overscroll-behavior-x: contain;
}

.race-scroll::-webkit-scrollbar {
  display: none;
}

/* === Button style === */
.race-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 170px;        /* ✅ ΣΤΑΘΕΡΟ WIDTH */
  height: 56px;        /* προαιρετικό αλλά προτείνεται */

  background: linear-gradient(135deg, #333, #1a1a1a);
  color: white;
  border: 2px solid #ff9933;
  border-radius: 12px;

  font-size: 20px;
  font-family: Arial, sans-serif;
  text-decoration: none;
  white-space: nowrap;

  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  transition: all 0.25s ease;
}

.race-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.7);
}

/* .race-btn:hover,
.race-btn:focus {
  background: linear-gradient(135deg, #ff9933, #cc6600);
  color: #000;
} */

/* Active button (π.χ. Dark Elf) */
.race-btn.active {
  background: linear-gradient(135deg, #ff9933, #cc6600);
  color: #000;
}

.race-container {
  width: 100%;
  overflow: hidden;
}

.raceSwiper {
  width: 100%;
  overflow: visible;
  margin-top: 14px;
}

.raceSwiper .swiper-wrapper {
  align-items: center;
}

@media (min-width: 1024px) {
  .raceSwiper .swiper-wrapper {
    justify-content: center;
  }
}

.raceSwiper .swiper-slide {
  width: 170px; /* ίδιο width */
  flex-shrink: 0;
}