/* Optional slider mode (enabled via plugin settings + layout="slider") */

.scl--layout-slider .scl-slider {
  position: relative;
}

/* wrapper must not add any side padding/margins */
.scl--layout-slider {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  /* the TRACK is the scroll container; hide any outer scrollbars */
  overflow: hidden;
  box-sizing: border-box;
}

/* Track: same cards, just horizontal */
.scl--layout-slider .scl__grid {
  display: flex;
  gap: 16px;              /* MUST match scl.css */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;  /* Firefox */
  padding: 0;             /* no extra left/right space */
  margin: 0;              /* no extra left/right space */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  cursor: grab;
}

.scl--layout-slider .scl__grid::-webkit-scrollbar {
  display: none; /* WebKit */
}

.scl--layout-slider .scl__grid.is-dragging {
  cursor: grabbing;
  user-select: none;
}

/* single source of truth for columns */
.scl--layout-slider {
  --scl-cols: var(--scl-cols-mobile, 1);
}

@media (min-width: 768px) {
  .scl--layout-slider {
    --scl-cols: var(--scl-cols-tablet, 2);
  }
}

@media (min-width: 1024px) {
  .scl--layout-slider {
    --scl-cols: var(--scl-cols-desktop, 3);
  }
}

/* IMPORTANT: subtract gaps so right edge aligns pixel-perfect */
.scl--layout-slider .scl__grid > * {
  box-sizing: border-box;
  flex: 0 0 calc(
    (100% - (var(--scl-cols) - 1) * 16px)
    / var(--scl-cols)
  );
  scroll-snap-align: start;
}

.scl--layout-slider .scl-slider[data-scl-slider-align="center"] .scl__grid > * {
  scroll-snap-align: center;
}

/* Arrows (overlay; no layout shift) */
.scl-slider__btn {
  position: absolute !important;
  top: var(--scl-btn-top, 50%) !important;
  transform: translateY(-50%) !important;
  left: auto !important;
  right: auto !important;

  width: var(--scl-btn-size, 48px) !important;
  height: var(--scl-btn-size, 48px) !important;
  min-width: var(--scl-btn-size, 48px) !important;
  min-height: var(--scl-btn-size, 48px) !important;
  padding: var(--scl-btn-padding, 0) !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: var(--scl-btn-border, 1px solid rgba(0,0,0,.25)) !important;
  border-radius: var(--scl-btn-radius, 0) !important;
  background: var(--scl-btn-bg, rgba(255,255,255,.9)) !important;
  box-shadow: var(--scl-btn-shadow, 0 2px 6px rgba(0,0,0,.15)) !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  white-space: nowrap !important;

  cursor: pointer !important;
  z-index: var(--scl-btn-z, 3) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease !important;
}

.scl-slider__btn:hover,
.scl-slider__btn:focus,
.scl-slider__btn:active {
  transform: translateY(-50%) !important;
  background: var(--scl-btn-bg-hover, var(--scl-btn-bg, rgba(255,255,255,.95))) !important;
  border: var(--scl-btn-border-hover, var(--scl-btn-border, 1px solid rgba(0,0,0,.25))) !important;
  box-shadow: var(--scl-btn-shadow-hover, var(--scl-btn-shadow, 0 2px 6px rgba(0,0,0,.15))) !important;
  outline: none !important;
}

.scl-slider__btn:disabled {
  opacity: var(--scl-btn-disabled-opacity, .35) !important;
  cursor: not-allowed !important;
  transform: translateY(-50%) !important;
}

.scl-slider__btn--prev {
  left: var(--scl-btn-prev-left, 0) !important;
}

.scl-slider__btn--next {
  right: var(--scl-btn-next-right, 0) !important;
}

.scl-slider__btn::before {
  content: '' !important;
  display: block !important;
  width: var(--scl-btn-icon-size, 12px) !important;
  height: var(--scl-btn-icon-size, 12px) !important;
  box-sizing: border-box !important;
  border-style: solid !important;
  border-color: var(--scl-btn-icon-color, rgba(0,0,0,.75)) !important;
  border-width: 0 var(--scl-btn-icon-stroke, 3px) var(--scl-btn-icon-stroke, 3px) 0 !important;
}

.scl-slider__btn--prev::before {
  transform: rotate(135deg) !important;
  margin-left: calc(var(--scl-btn-icon-nudge-x, 0px) * -1) !important;
}

.scl-slider__btn--next::before {
  transform: rotate(-45deg) !important;
  margin-left: var(--scl-btn-icon-nudge-x, 0px) !important;
}

/* Dots */
.scl-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.scl-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.35);
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.scl-slider__dot.is-active {
  background: rgba(0,0,0,.35);
}