/* /static/css/BLOCKS/Step_slider/step_slider.css */

/* ─────────────────────────────────────────────────────────────
   StepSlider (ss)
   - “окно” максимум на 3 элемента (центр + 2 соседа)
   - step-линия с точками + заливка
   - без бордеров/обводок, плотные цвета
   ───────────────────────────────────────────────────────────── */

.ss{
  /* layout */
  --ss-gap: 12px;
  --ss-pill: 110px;

  --ss-inactive-opacity: 0.35;
  --ss-inactive-scale: 0.88;
  --ss-active-scale: 1.08;

  /* slider line/dots */
  --ss-line-h: 5px;
  --ss-dot: 14px;
  --ss-dot-active: 22px;

  /* colors (light defaults) */
  --ss-base-color: #E5E7EB;  /* gray-200 */
  --ss-fill-color: #3B82F6;  /* blue-500 */
  --ss-active-color:#2563EB; /* blue-600 */

  color: inherit;
  width: 100%;
}

.dark .ss{
  --ss-base-color: #D1D5DB;  /* gray-300 */
  --ss-fill-color: #3B82F6;
  --ss-active-color:#2563EB;
}

/* ───────────────────────── Window (strict 3 items) ─────────────────────────
/* окно: скрываем только по X, а по Y даём “дышать” scale-анимации */
.ss-window{
  max-width: calc(var(--ss-pill) * 3 + var(--ss-gap) * 2);
  margin: 0 auto;

  overflow-x: hidden;
  overflow-y: visible;

  /* чуть больше вертикального воздуха, чтобы active-scale не резало */
  padding: 14px 0 16px;
}


/* ───────────────────────── Lenta (items) ───────────────────────── */

/* лента: вертикальный оверфлоу не нужен, а скроллбар лучше спрятать */
.ss-items{
  display: flex;
  justify-content: flex-start;
  gap: var(--ss-gap);

  overflow-x: auto;
  overflow-y: hidden; /* важно: чтобы не было “уголка/квадратика” */

  -webkit-overflow-scrolling: touch;

  /* чтобы крайние могли становиться по центру */
  padding: 6px calc(50% - (var(--ss-pill) / 2));

  scroll-snap-type: x mandatory;
  scroll-padding-left: 50%;
  scroll-padding-right: 50%;
  scroll-behavior: smooth;

  -webkit-mask-image: none !important;
  mask-image: none !important;

  background: transparent; /* на всякий случай */
}

/* прячем скроллбар (часто именно он и даёт “белый квадратик”) */
.ss-items{
  scrollbar-width: none;          /* Firefox */
}
.ss-items::-webkit-scrollbar{
  height: 0 !important;           /* Chromium/Safari */
  display: none;
}
.ss-items::-webkit-scrollbar{ height: 6px; }
.ss-items::-webkit-scrollbar-thumb{ border-radius: 999px; }

.ss-item{
  flex: 0 0 auto;
  scroll-snap-align: center;

  opacity: var(--ss-inactive-opacity);
  transform: scale(var(--ss-inactive-scale));
  transition: transform 180ms ease, opacity 180ms ease;
  will-change: transform, opacity;
}

.ss-item.is-active{
  opacity: 1;
  transform: scale(var(--ss-active-scale));
}

/* ───────────────────────── Pill (circle) ───────────────────────── */

.ss-pill{
  width: var(--ss-pill);
  height: var(--ss-pill);
  border-radius: 9999px;

  border: 0;
  box-shadow: none;

  background: rgba(255,255,255,0.45);
  display: grid;
  place-items: center;
  padding: 10px;
  text-align: center;

  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.dark .ss-pill{
  background: rgba(15, 23, 42, 0.22);
}

.ss-pill:focus-visible{
  box-shadow: 0 0 0 3px rgba(59,130,246,0.35);
}

.ss-emoji{
  font-size: 34px;
  line-height: 1;
}

.ss-title{
  margin-top: 6px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.1;
  opacity: 0.95;
}

.ss-time{
  margin-top: 4px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.1;
  opacity: 0.7;
}

/* ─────────────────────── Step line + dots ─────────────────────── */

.ss-slider{
  width: 100%;
  padding: 0 10px 2px;
}

.ss-track{
  position: relative;
  height: 40px;
}

.ss-line,
.ss-fill,
.ss-dots{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.ss-line{
  height: var(--ss-line-h);
  border-radius: 999px;
  background: var(--ss-base-color);
}

.ss-fill{
  height: var(--ss-line-h);
  border-radius: 999px;
  width: var(--ss-fill, 0%);
  background: var(--ss-fill-color);
}

.ss-dots{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ss-dot{
  appearance: none;
  -webkit-appearance: none;

  padding: 0;
  margin: 0;
  border: 0;

  width: var(--ss-dot);
  height: var(--ss-dot);
  border-radius: 999px;

  background: var(--ss-base-color);
  box-shadow: none;

  line-height: 0;
  font-size: 0;
}

.ss-dot.is-done{
  background: var(--ss-fill-color);
}

.ss-dot.is-active{
  width: var(--ss-dot-active);
  height: var(--ss-dot-active);
  background: var(--ss-active-color);
  box-shadow: none;
}

.ss-range{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 40px;
  opacity: 0;
  cursor: pointer;
}

/* ───────────────────────── Mobile sizing ───────────────────────── */

@media (max-width: 420px){
  .ss{
    --ss-gap: 10px;
    --ss-pill: 92px;
  }

  .ss-window{
    /* окно на мобилке чуть уже, но логика “макс 3” сохраняется */
    max-width: calc(var(--ss-pill) * 3 + var(--ss-gap) * 2);
  }

  .ss-pill{ padding: 8px; }
  .ss-emoji{ font-size: 30px; }
  .ss-title{ font-size: 12px; }
  .ss-time { font-size: 11px; }
}