/* Горизонтальное меню видов спорта (тайлы) */

.sports-strip {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: .5rem 0; /* вертикальный отступ */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--color-border, #242b42) transparent; /* Firefox */
  cursor: grab;
}

/* Custom scrollbar (WebKit/Blink) */
.sports-strip::-webkit-scrollbar { height: 8px; }
.sports-strip::-webkit-scrollbar-track { background: transparent; }
.sports-strip::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.22);
  border: 1px solid var(--color-border, #242b42);
  border-radius: 8px;
}
.sports-strip:hover::-webkit-scrollbar-thumb {
  background-color: var(--brand-pink, #ff267e);
}

.sports-strip.grabbing { cursor: grabbing; }

.sports-strip .strip-inner {
  display: inline-flex;
  gap: .5rem;
  padding: 0;
}

.sport-card {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 60px;
  border-radius: .5rem;
  background: var(--bg_color_3, #151721);
  color: var(--txt_color_1, #fff);
  text-decoration: none;
  border: 1px solid var(--color-border, #242b42);
  transition: filter .15s ease, background .15s ease;
}

.sport-card:hover { filter: brightness(1.05); }
.sport-card.active {
  background: var(--brand-pink, #ff267e);
  color: #fff;
  border-color: transparent;
}

.sport-card .icon {
  width: 22px; height: 22px; object-fit: contain;     margin: .5rem 0rem;
}
.sport-card .label {
  font-size: .8rem; font-weight: 700; text-align: center; line-height: 1.1;
}
.sport-card .count {
  position: absolute; top: .35rem; left: .35rem;
  font-size: .7rem; color: #fff; display: none;
}

@media (max-width: 991.98px) {
  .sport-card { width: 80px;  }
  .sport-card .label { font-size: .78rem; }
}

/* Sticky behavior on desktop */
@media (min-width: 992px) {
  .sports-sticky {
    position: sticky;
    top: 56px; /* высота шапки Bootstrap */
    z-index: 1019; /* под шапкой (1020 у .sticky-top) */
    background: var(--body_color_1, #191a23);
    border-bottom: 1px solid var(--color-border, #242b42);
  }
}