/* MR scroll-snap carousel — ITER 286 (BS-paralel)
   ─────────────────────────────────────────────────────────────────
   CSS-only horizontal scroll-snap carousel for:
   - Hero slider (.bs-hero, .heroSlider, .swiper-wrapper)
   - Kategori chip row (.bs-chips, .category-chip-row)
   - Top providers row (.bs-providers, .provider-row)
   - Featured games row (.bs-features, .featured-games-row)

   Class wiring:
     .bs-snap                  → enable scroll-snap container
     .bs-snap--mandatory       → strict snap (default: proximity)
     .bs-snap--center          → snap to center (default: start)
     .bs-snap--gap-{2,4,8,12,16,20,24}  → gap utility tokens

   Each child of .bs-snap automatically gets scroll-snap-align based on container modifier.

   Tokens:
     --bs-snap-gap: 12px (default child gap)
     --bs-snap-pad-x: 16px (container side padding)
     --bs-snap-momentum-decel: 0.95 (-webkit-overflow-scrolling momentum)
*/

:root {
  --bs-snap-gap: 12px;
  --bs-snap-pad-x: 16px;
}

.bs-snap {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--bs-snap-gap);
  padding: 0 var(--bs-snap-pad-x);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-padding-inline: var(--bs-snap-pad-x);
  overscroll-behavior-x: contain;
  /* Prevent vertical bounce on iOS Safari while horizontal scroll */
  touch-action: pan-x;
}
.bs-snap::-webkit-scrollbar {
  display: none;
}

.bs-snap > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* Modifiers */
.bs-snap--mandatory {
  scroll-snap-type: x mandatory;
}
.bs-snap--center > * {
  scroll-snap-align: center;
}
.bs-snap--end > * {
  scroll-snap-align: end;
}

/* Gap utility tokens */
.bs-snap--gap-2  { --bs-snap-gap:  2px; }
.bs-snap--gap-4  { --bs-snap-gap:  4px; }
.bs-snap--gap-8  { --bs-snap-gap:  8px; }
.bs-snap--gap-12 { --bs-snap-gap: 12px; }
.bs-snap--gap-16 { --bs-snap-gap: 16px; }
.bs-snap--gap-20 { --bs-snap-gap: 20px; }
.bs-snap--gap-24 { --bs-snap-gap: 24px; }

/* Edge padding utility (no extra padding mode) */
.bs-snap--flush {
  --bs-snap-pad-x: 0;
}

/* Hero slider variant — full-width snap, mandatory */
.bs-snap--hero {
  scroll-snap-type: x mandatory;
  --bs-snap-pad-x: 0;
  --bs-snap-gap: 0;
}
.bs-snap--hero > * {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* Chip row variant — proximity snap, smaller gap */
.bs-snap--chips {
  --bs-snap-gap: 6px;
  --bs-snap-pad-x: 12px;
  scroll-snap-type: x proximity;
}

/* Provider row variant — center snap, fixed-width tiles */
.bs-snap--providers {
  --bs-snap-gap: 8px;
  scroll-snap-type: x proximity;
}
.bs-snap--providers > * {
  scroll-snap-align: start;
}

/* Featured games row — start snap, BS card width */
.bs-snap--games {
  --bs-snap-gap: 8px;
  scroll-snap-type: x proximity;
}

/* Reduced motion — disable smooth scroll */
@media (prefers-reduced-motion: reduce) {
  .bs-snap {
    scroll-behavior: auto;
  }
}

/* Visible peek hint — last child gets right margin so user sees there's more */
.bs-snap--peek > *:last-child {
  margin-right: var(--bs-snap-pad-x);
}

/* Indicator dots (for hero variant) */
.bs-snap-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  pointer-events: none;
  z-index: 2;
}
.bs-snap-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: background-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
              width 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bs-snap-dot.is-active {
  background: rgba(255, 255, 255, 0.95);
  width: 18px;
  border-radius: 3px;
}

/* Inline arrow buttons (desktop tablet hover-capable) */
@media (hover: hover) and (pointer: fine) {
  .bs-snap-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background-color 220ms ease, opacity 220ms ease;
    opacity: 0;
  }
  .bs-snap-wrapper:hover .bs-snap-arrow {
    opacity: 1;
  }
  .bs-snap-arrow:hover {
    background: rgba(0, 0, 0, 0.75);
  }
  .bs-snap-arrow--prev { left: 8px; }
  .bs-snap-arrow--next { right: 8px; }
}

/* Mobile: hide arrows */
@media (max-width: 992px) {
  .bs-snap-arrow {
    display: none;
  }
}

/* Container wrapper for arrow positioning */
.bs-snap-wrapper {
  position: relative;
  width: 100%;
}