/* Основной контейнер виджета с поддержкой мобильных жестов */
.slider-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  user-select: none;
  cursor: ew-resize;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  /* НАМЕРТВО ОТКЛЮЧАЕМ СТАНДАРТНЫЙ СКРОЛЛ БРАУЗЕРА ПРИ КАСАНИИ ВИДЖЕТА */
  touch-action: none !important; 
}

/* Пропорции 16:9 */
.slider-container::before {
  content: "";
  display: block;
  padding-top: 56.25%; 
}

.slider-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.image-after {
  z-index: 1;
}

.image-before-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* Стартовая позиция разделителя */
  height: 100%;
  overflow: hidden;
  border-right: 3px solid #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.image-before {
  z-index: 2;
  max-width: none !important;
}

/* Идеальное центрирование под родной шрифт сайта Fira Sans */
.slider-container .slider-arrows {
  position: absolute !important;
  top: 50% !important;
  left: 50%; /* Управляется скриптом */
  transform: translate(-46%, -50%) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important; /* Оптимальный зазор под шрифт Fira Sans */
  color: #ffffff !important;
  z-index: 10 !important;
  pointer-events: none !important; /* Пропускает клики и тачи сквозь себя на картинки */
  font-family: "Fira Sans", sans-serif !important; /* Родной шрифт вашего сайта */
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.9)) drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)) !important;
  transition: gap 0.2s, transform 0.2s !important;
  width: max-content !important; /* Гарантирует, что блок не сожмет стрелки на мобильных */
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Левый уголок */
.slider-container .slider-arrows::before {
  content: '<' !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-block !important;
  text-align: center !important;
}

/* Правый уголок */
.slider-container .slider-arrows::after {
  content: '>' !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-block !important;
  text-align: center !important;
}

/* Эффект при клике / таче */
.slider-container:active .slider-arrows {
  transform: translate(-46%, -50%) scale(1.15) !important;
  gap: 26px !important;
}