/* ============================================
   Media Slider ProgressBar Widget – CSS v3.2
   ============================================ */

.msw-slider-wrapper *,
.msw-slider-wrapper *::before,
.msw-slider-wrapper *::after {
	box-sizing: border-box;
}

/* ── Root ── */
.msw-slider-wrapper {
	--msw-speed:        600ms;
	--msw-fill-color:   #333;
	--msw-track-color:  #ccc;
	/* Peek-настройки — задаются через Elementor selectors как CSS-переменные */
	--msw-peek-width:   80%;
	--msw-peek-gap:     16px;
	position: relative;
	width: 100%;
}

/* ============================================
   PEEK-CLIPPER
   ============================================ */
.msw-peek-clipper {
	overflow: hidden;
	width: 100%;
	position: relative;
}

/* ============================================
   MEDIA WRAP
   ============================================ */
.msw-media-wrap {
	position: relative;
	width: 100%;
	margin-bottom: 24px;
	cursor: grab;
	overflow: hidden;
}

.msw-media-wrap:active {
	cursor: grabbing;
}

/* ============================================
   TRACK
   ============================================ */
.msw-track {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	transition: transform var(--msw-speed) cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* ── Слайд ── */
.msw-slide {
	flex-shrink: 0;
	position: relative;
}

/* ── Медиа ── */
.msw-media-inner {
	width: 100%;
	overflow: hidden;
	display: block;
}

.msw-media-inner img,
.msw-media-inner video {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: inherit;
}

.msw-media-inner iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: none;
	border-radius: inherit;
}

/* ── Кнопки навигации — скрыты ── */
.msw-nav {
	display: none !important;
}

/* ============================================
   OVERLAY-ЭФФЕКТЫ: Fade / Zoom / Flip / Cube
   ============================================ */

.msw-effect-fade  .msw-track,
.msw-effect-zoom  .msw-track,
.msw-effect-flip  .msw-track,
.msw-effect-cube  .msw-track {
	display: block;
	position: relative;
	overflow: hidden;
	transition: none;
}

.msw-effect-fade  .msw-slide,
.msw-effect-zoom  .msw-slide,
.msw-effect-flip  .msw-slide,
.msw-effect-cube  .msw-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
}

.msw-effect-fade  .msw-slide.msw-active,
.msw-effect-zoom  .msw-slide.msw-active,
.msw-effect-flip  .msw-slide.msw-active,
.msw-effect-cube  .msw-slide.msw-active {
	pointer-events: auto;
}

/* — FADE — */
.msw-effect-fade .msw-slide {
	opacity: 0;
	transition: opacity var(--msw-speed) ease;
}
.msw-effect-fade .msw-slide.msw-active { opacity: 1; }

/* — ZOOM — */
.msw-effect-zoom .msw-slide {
	opacity: 0;
	transform: scale(0.92);
	transition: opacity var(--msw-speed) ease, transform var(--msw-speed) ease;
}
.msw-effect-zoom .msw-slide.msw-active { opacity: 1; transform: scale(1); }

/* — FLIP — */
.msw-effect-flip .msw-track { perspective: 1400px; }
.msw-effect-flip .msw-slide {
	opacity: 0;
	transform: rotateY(90deg);
	transform-origin: center center;
	backface-visibility: hidden;
	transition: opacity var(--msw-speed) ease, transform var(--msw-speed) ease;
}
.msw-effect-flip .msw-slide.msw-active { opacity: 1; transform: rotateY(0deg); }

/* — CUBE — */
.msw-effect-cube .msw-track { perspective: 1000px; }
.msw-effect-cube .msw-slide {
	opacity: 0;
	transform: rotateY(-90deg);
	transition: opacity var(--msw-speed) ease, transform var(--msw-speed) ease;
}
.msw-effect-cube .msw-slide.msw-active { opacity: 1; transform: rotateY(0deg); }

/* ============================================
   PEEK-КАРУСЕЛЬ (мобайл + только slide)
   ============================================ */

.msw-mode-mobile.msw-effect-slide .msw-media-wrap {
	overflow: visible;
}

.msw-mode-mobile .msw-track {
	gap: var(--msw-peek-gap, 16px);
}

/* Dim неактивных в мобайл */
.msw-mode-mobile.msw-effect-slide .msw-slide {
	opacity: 0.45;
	transition: opacity var(--msw-speed) ease;
}
.msw-mode-mobile.msw-effect-slide .msw-slide.msw-active { opacity: 1; }

/* ============================================
   INFO WRAP — внешняя обёртка
   padding-inline задаётся через Elementor selectors
   ============================================ */
.msw-info-wrap {
	/* padding задаётся через Elementor */
}

/* ============================================
   INFO AREA — ДЕСКТОП
   Все панели видны в ряд, высота области
   = максимальная высота среди всех панелей.
   ============================================ */
.msw-info-area {
	display: flex;
	gap: 24px;
	width: 100%;
}

.msw-slide-info {
	flex: 1;
	min-width: 0;
	cursor: pointer;
}

.msw-mode-desktop .msw-slide-info {
	display: block;
}

/* ============================================
   INFO AREA — МОБАЙЛ
   Все панели находятся в стеке, но невидимые
   скрыты через visibility+opacity (не display:none),
   чтобы высота контейнера не прыгала.
   Контейнер фиксирует высоту = высота самой
   высокой панели.
   ============================================ */
.msw-mode-mobile .msw-info-area {
	display: block;
	/* height фиксируется JS-ом */
	position: relative;
}

/* Все панели — абсолютные, поверх друг друга */
.msw-mode-mobile .msw-slide-info {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* Скрыто, но занимает место для замера */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--msw-speed) ease, visibility 0s linear var(--msw-speed);
}

/* Активная панель видна */
.msw-mode-mobile .msw-slide-info.msw-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--msw-speed) ease, visibility 0s linear 0s;
}

/* ============================================
   ПРОГРЕСС-ЛИНИЯ
   ============================================ */
.msw-progress-line {
	position: relative;
	width: 40%;
	height: 2px;
	background-color: var(--msw-track-color, #ccc);
	margin-bottom: 12px;
	overflow: hidden;
	border-radius: 999px;
}

/* Выравнивание линии = text-align блока (управляется JS через data-атрибут) */
.msw-slide-info[data-line-align="left"]   .msw-progress-line { margin-left: 0;    margin-right: auto; }
.msw-slide-info[data-line-align="center"] .msw-progress-line { margin-left: auto; margin-right: auto; }
.msw-slide-info[data-line-align="right"]  .msw-progress-line { margin-left: auto; margin-right: 0;    }

.msw-progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background-color: var(--msw-fill-color, #333);
	border-radius: 999px;
	transition: width linear;
}

/* ============================================
   ЗАГОЛОВОК И ПОДЗАГОЛОВОК
   ============================================ */
.msw-slide-title {
	margin: 0 0 8px 0;
	padding: 0;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
	color: #1a1a1a;
}

.msw-slide-subtitle {
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #666;
}

/* ============================================
   ELEMENTOR EDITOR
   ============================================ */
.elementor-editor-active .msw-progress-fill {
	transition: none !important;
}

/* В редакторе показываем все info-панели нормально */
.elementor-editor-active .msw-mode-mobile .msw-slide-info {
	position: relative;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.elementor-editor-active .msw-mode-mobile .msw-slide-info:not(.msw-active) {
	opacity: 0.4;
}