/*
 * Shared layout for NN Advanced Carousel and NN Advanced Loop Carousel.
 *
 * Selectors use child combinators (widget > [widget-container >] .swiper) so
 * carousels placed inside a slide are not affected.
 */

/* ---------- Arrows: per-device visibility ---------- */

.elementor-widget.nn-carousel > .elementor-swiper-button,
.elementor-widget.nn-carousel > .elementor-widget-container > .elementor-swiper-button {
	display: var(--nn-arrows-display, inline-flex);
}

.elementor-widget.nn-carousel > .elementor-swiper-button.swiper-button-lock,
.elementor-widget.nn-carousel > .elementor-widget-container > .elementor-swiper-button.swiper-button-lock,
.elementor-widget.nn-carousel > .elementor-swiper-button.hide,
.elementor-widget.nn-carousel > .elementor-widget-container > .elementor-swiper-button.hide {
	display: none;
}

/* ---------- Vertical axis ---------- */

.elementor-widget.nn-carousel.nn-axis-vertical {
	--nn-track-ml-eff: 0px;
	--nn-track-mr-eff: 0px;
}

.elementor-widget.nn-carousel.nn-axis-vertical:is(.elementor-pagination-type-bullets, .elementor-pagination-type-fraction, .elementor-pagination-type-progressbar) {
	--nn-track-ml-eff: var(--nn-track-ml, 0px);
	--nn-track-mr-eff: var(--nn-track-mr, var(--nn-dots-space, 32px));
}

/* Track: leaves room for the pagination column and, optionally, the arrows. */
.elementor-widget.nn-carousel.nn-axis-vertical > .swiper,
.elementor-widget.nn-carousel.nn-axis-vertical > .elementor-widget-container > .swiper {
	width: calc(100% - var(--nn-track-ml-eff) - var(--nn-track-mr-eff));
	margin: var(--nn-arrows-space, 0px) var(--nn-track-mr-eff) var(--nn-arrows-space, 0px) var(--nn-track-ml-eff);
	padding-bottom: 0;
}

/* Fixed height mode. */
.elementor-widget.nn-carousel.nn-axis-vertical:not(.nn-vheight-auto) > .swiper,
.elementor-widget.nn-carousel.nn-axis-vertical:not(.nn-vheight-auto) > .elementor-widget-container > .swiper {
	height: var(--nn-carousel-height, 720px);
}

/* Auto height mode: one slide, carousel height = active slide height (set by JS). */
.elementor-widget.nn-carousel.nn-axis-vertical.nn-vheight-auto > .swiper,
.elementor-widget.nn-carousel.nn-axis-vertical.nn-vheight-auto > .elementor-widget-container > .swiper {
	height: auto;
	overflow: hidden;
	transition: height var(--nn-speed, 500ms) ease;
}

.elementor-widget.nn-carousel.nn-axis-vertical.nn-vheight-auto > .swiper > .swiper-wrapper > .swiper-slide,
.elementor-widget.nn-carousel.nn-axis-vertical.nn-vheight-auto > .elementor-widget-container > .swiper > .swiper-wrapper > .swiper-slide {
	height: auto !important;
	width: 100% !important;
	max-width: none;
}

.elementor-widget.nn-carousel.nn-axis-vertical.nn-vheight-auto > .swiper > .swiper-wrapper > .swiper-slide > .e-con,
.elementor-widget.nn-carousel.nn-axis-vertical.nn-vheight-auto > .elementor-widget-container > .swiper > .swiper-wrapper > .swiper-slide > .e-con {
	height: auto;
}

/* Before Swiper starts, show only the first slide so the page does not jump. */
.elementor-widget.nn-carousel.nn-axis-vertical.nn-vheight-auto > .swiper:not(.swiper-initialized) > .swiper-wrapper,
.elementor-widget.nn-carousel.nn-axis-vertical.nn-vheight-auto > .elementor-widget-container > .swiper:not(.swiper-initialized) > .swiper-wrapper {
	flex-direction: column;
}

.elementor-widget.nn-carousel.nn-axis-vertical.nn-vheight-auto > .swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide:not(:first-child),
.elementor-widget.nn-carousel.nn-axis-vertical.nn-vheight-auto > .elementor-widget-container > .swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide:not(:first-child) {
	display: none;
}

/* Pagination column on the left or right. */
.elementor-widget.nn-carousel.nn-axis-vertical > .swiper-pagination,
.elementor-widget.nn-carousel.nn-axis-vertical > .elementor-widget-container > .swiper-pagination {
	position: absolute;
	top: 50%;
	bottom: auto;
	left: var(--nn-dots-left, auto);
	right: var(--nn-dots-right, 0px);
	width: var(--nn-dots-space, 32px);
	height: auto;
	margin: 0;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--nn-dots-gap, 8px);
}

.elementor-widget.nn-carousel.nn-axis-vertical > .swiper-pagination .swiper-pagination-bullet,
.elementor-widget.nn-carousel.nn-axis-vertical > .elementor-widget-container > .swiper-pagination .swiper-pagination-bullet {
	margin: 0 !important;
}

.elementor-widget.nn-carousel.nn-axis-vertical > .swiper-pagination.swiper-pagination-progressbar,
.elementor-widget.nn-carousel.nn-axis-vertical > .elementor-widget-container > .swiper-pagination.swiper-pagination-progressbar {
	top: var(--nn-arrows-space, 0px);
	bottom: var(--nn-arrows-space, 0px);
	width: var(--e-n-carousel-swiper-pagination-size, var(--swiper-pagination-size, 4px));
	height: auto;
	transform: none;
}

/* Arrows: up/down, above and below the slide, centred on the track. */
.elementor-widget.nn-carousel.nn-axis-vertical > .elementor-swiper-button.elementor-swiper-button-prev,
.elementor-widget.nn-carousel.nn-axis-vertical > .elementor-swiper-button.elementor-swiper-button-next,
.elementor-widget.nn-carousel.nn-axis-vertical > .elementor-widget-container > .elementor-swiper-button.elementor-swiper-button-prev,
.elementor-widget.nn-carousel.nn-axis-vertical > .elementor-widget-container > .elementor-swiper-button.elementor-swiper-button-next {
	left: calc(var(--nn-track-ml-eff) + (100% - var(--nn-track-ml-eff) - var(--nn-track-mr-eff)) / 2);
	right: auto;
	height: auto;
	min-height: var(--nn-arrows-space, 0px);
	align-items: center;
	justify-content: center;
	transform: translateX(-50%);
}

.elementor-widget.nn-carousel.nn-axis-vertical > .elementor-swiper-button.elementor-swiper-button-prev,
.elementor-widget.nn-carousel.nn-axis-vertical > .elementor-widget-container > .elementor-swiper-button.elementor-swiper-button-prev,
body.rtl .elementor-widget.nn-carousel.nn-axis-vertical > .elementor-swiper-button.elementor-swiper-button-next,
body.rtl .elementor-widget.nn-carousel.nn-axis-vertical > .elementor-widget-container > .elementor-swiper-button.elementor-swiper-button-next {
	top: 0;
	bottom: auto;
}

.elementor-widget.nn-carousel.nn-axis-vertical > .elementor-swiper-button.elementor-swiper-button-next,
.elementor-widget.nn-carousel.nn-axis-vertical > .elementor-widget-container > .elementor-swiper-button.elementor-swiper-button-next,
body.rtl .elementor-widget.nn-carousel.nn-axis-vertical > .elementor-swiper-button.elementor-swiper-button-prev,
body.rtl .elementor-widget.nn-carousel.nn-axis-vertical > .elementor-widget-container > .elementor-swiper-button.elementor-swiper-button-prev {
	top: auto;
	bottom: 0;
}

.elementor-widget.nn-carousel.nn-axis-vertical > .elementor-swiper-button > :is(i, svg),
.elementor-widget.nn-carousel.nn-axis-vertical > .elementor-widget-container > .elementor-swiper-button > :is(i, svg) {
	transform: rotate(90deg);
}

body.rtl .elementor-widget.nn-carousel.nn-axis-vertical > .elementor-swiper-button > :is(i, svg),
body.rtl .elementor-widget.nn-carousel.nn-axis-vertical > .elementor-widget-container > .elementor-swiper-button > :is(i, svg) {
	transform: rotate(-90deg);
}