@charset "UTF-8";
/* ZEN Logistics — дополнительные стили */

/* Scroll-reveal: плавное появление (fade + лёгкий подъём) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Пошаговая задержка для группы элементов */
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

/* Скрыть скроллбары у горизонтальных лент (мобильные скроллы) */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------
   Ползунки калькулятора (input[type=range]).
   Нативный вид у range в каждом браузере свой, поэтому рисуем сами.
   Пройденную часть дорожки в WebKit подсвечиваем градиентом: ширину
   заливки в --zen-range-fill проставляет web/js/calculator.js.
   Firefox для этого имеет собственный ::-moz-range-progress.
   --------------------------------------------------------------- */
.zen-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 22px;          /* зона захвата пальцем, сама дорожка тоньше */
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.zen-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(#EA1102, #EA1102) left center / var(--zen-range-fill, 0%) 100% no-repeat,
    #E2E2E2;
}
.zen-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: #E2E2E2;
}
.zen-range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: #EA1102;
}

.zen-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;      /* центр бегунка относительно дорожки 6px */
  border-radius: 50%;
  background: #fff;
  border: 2px solid #EA1102;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
  transition: transform .12s ease;
}
.zen-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #EA1102;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
  transition: transform .12s ease;
}

.zen-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.zen-range:active::-moz-range-thumb { transform: scale(1.15); }

.zen-range:focus { outline: none; }
.zen-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(234, 17, 2, .25); }
.zen-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(234, 17, 2, .25); }

/* Стрелки-спиннеры у числа рядом с ползунком только мешают: значение
   меняют ползунком, а с клавиатуры вводят точное число. */
.zen-range-number::-webkit-outer-spin-button,
.zen-range-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.zen-range-number { -moz-appearance: textfield; appearance: textfield; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .zen-range::-webkit-slider-thumb { transition: none; }
  .zen-range::-moz-range-thumb { transition: none; }
}