/* Generic horizontal card slider (1 centered card on narrow screens) */
.apr-card-slider {
  position: relative;
}

.apr-card-slider__track {
  --apr-card-w: min(86%, 420px);
  --apr-gap: 12px;

  display: flex;
  gap: var(--apr-gap);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding-left: calc((100% - var(--apr-card-w)) / 2);
  scroll-padding-right: calc((100% - var(--apr-card-w)) / 2);
  padding: 4px calc((100% - var(--apr-card-w)) / 2) 12px;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none; /* IE/old Edge */
  scrollbar-width: none !important; /* override global scrollbar-width: thin */
  scrollbar-color: transparent transparent !important;
  overscroll-behavior-x: contain;
  user-select: none;
}
.apr-card-slider__track::-webkit-scrollbar { height: 0; width: 0; display: none; }
.apr-card-slider__track::-webkit-scrollbar-thumb { background: transparent; }
.apr-card-slider__track::-webkit-scrollbar-track { background: transparent; }

/* Works with existing cards */
.apr-card-slider__track > .apr-tariff-card {
  flex: 0 0 var(--apr-card-w);
  scroll-snap-align: center;
}

/* Narrow screens: blur non-active cards (peek effect) */
@media (max-width: 979px) {
  .apr-card-slider.is-narrow .apr-card-slider__track > .apr-tariff-card {
    filter: blur(1.6px);
    opacity: 0.78;
    transition: filter 180ms ease, opacity 180ms ease;
  }
  .apr-card-slider.is-narrow .apr-card-slider__track > .apr-tariff-card.is-active {
    filter: none;
    opacity: 1;
  }

  .apr-card-slider.is-narrow .apr-card-slider__track > .apr-tariff-card.is-active {
    outline: 1px solid rgba(59, 130, 246, 0.95);
    box-shadow:
      0 0 0 3px rgba(59, 130, 246, 0.16),
      0 0 24px rgba(59, 130, 246, 0.32);
  }
}

.apr-card-slider__dots {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.apr-card-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(148, 163, 184, 0.7);
  cursor: pointer;
}
.apr-card-slider__dot.is-active {
  background: rgba(59, 130, 246, 0.95);
  width: 18px;
}

/* Wide screens: still a horizontal slider (no wrap) */
@media (min-width: 980px) {
  .apr-card-slider__track {
    --apr-card-w: 360px;
    scroll-snap-type: x proximity;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
    padding: 4px 16px 12px;
    overflow-x: auto;
    overflow-y: visible;
    flex-wrap: nowrap;
    user-select: auto;
  }
}