/**
 * Slider controls row — matches the approved canvas (canvas-v2/*.dc.html).
 *
 * Elementor's Carousel can only pin its progress bar to the top of the track and
 * reserves side gutters for "outside" arrows. The design instead puts one row
 * BELOW the slides: "01 / 05" counter, a segmented progress bar (active segment
 * red) and two square arrow buttons at the right. The widgets keep their native
 * settings (Pagination = Dots, Arrows = on); this file only lays those native
 * elements out. Opt in per widget with the CSS class:
 *
 *   do-slider          Carousel (nested) — counter + segments + arrows
 *   do-slider--bleed   …when the carousel bleeds off the right page edge, so
 *                      the arrows still sit on the page gutter
 *   do-journey         Media Carousel, slideshow skin — counter + arrows below
 *                      the thumbnail strip (no segments)
 *
 * The counter is pure CSS: each dot increments a counter, the active dot prints
 * its own number and the last dot prints the total.
 */

/* ------------------------------------------------------------ shared tokens */
.elementor-widget.do-slider,
.elementor-widget.do-journey {
	--do-ctrl: 48px;          /* arrow button size */
	--do-ctrl-gap: 8px;       /* between the two arrows */
	--do-row-gap: 30px;       /* slides → controls row */
	--do-edge: 0px;           /* inset of the row's right end */
	--do-counter: 92px;       /* room for "01 / 05" */
	padding-bottom: calc(var(--do-ctrl) + var(--do-row-gap)) !important;
}
.elementor-widget.do-slider--bleed { --do-edge: 64px; }

@media (max-width: 1024px) {
	.elementor-widget.do-slider--bleed { --do-edge: 32px; }
}
@media (max-width: 767px) {
	.elementor-widget.do-slider,
	.elementor-widget.do-journey {
		--do-ctrl: 44px;
		--do-row-gap: 22px;
		--do-counter: 84px;
	}
	.elementor-widget.do-slider--bleed { --do-edge: 22px; }
}

/* ------------------------------------------------------------ arrows */
.elementor-widget.do-slider .elementor-swiper-button,
.elementor-widget.do-journey .elementor-swiper-button {
	position: absolute !important;
	top: auto !important;
	bottom: 0 !important;
	left: auto !important;
	transform: none !important;
	margin: 0 !important;
	width: var(--do-ctrl) !important;
	height: var(--do-ctrl) !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--e-global-color-lineDivider);
	background: transparent !important;
	color: var(--e-global-color-accent);
	font-size: 18px;
	z-index: 2;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}
.elementor-widget.do-slider .elementor-swiper-button svg,
.elementor-widget.do-journey .elementor-swiper-button svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
.elementor-widget.do-slider .elementor-swiper-button:hover,
.elementor-widget.do-slider .elementor-swiper-button:focus-visible,
.elementor-widget.do-journey .elementor-swiper-button:hover,
.elementor-widget.do-journey .elementor-swiper-button:focus-visible {
	border-color: var(--e-global-color-secondary);
	color: var(--e-global-color-secondary);
}
.elementor-widget.do-slider .elementor-swiper-button-next,
.elementor-widget.do-journey .elementor-swiper-button-next {
	right: var(--do-edge) !important;
}
.elementor-widget.do-slider .elementor-swiper-button-prev,
.elementor-widget.do-journey .elementor-swiper-button-prev {
	right: calc(var(--do-edge) + var(--do-ctrl) + var(--do-ctrl-gap)) !important;
}

/* "Outside" arrows reserve side gutters on the track; the row replaces them. */
.elementor-widget.do-slider .e-n-carousel.swiper {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}

/* ------------------------------------------------------------ counter + segments */
.elementor-widget.do-slider .swiper-pagination,
.elementor-widget.do-journey .swiper-pagination {
	position: absolute !important;
	top: auto !important;
	bottom: calc(var(--do-ctrl) / 2 - 1px) !important;
	left: 0 !important;
	right: calc(var(--do-edge) + 2 * var(--do-ctrl) + var(--do-ctrl-gap) + 24px) !important;
	width: auto !important;
	transform: none !important;
	display: flex;
	align-items: center;
	gap: 6px;
	padding-left: var(--do-counter);
	line-height: 0;
	counter-reset: do-slide;
}
/* Each dot becomes one segment: a 20px-tall hit area with the 2px bar drawn in its middle. */
.elementor-widget.do-slider .swiper-pagination .swiper-pagination-bullet,
.elementor-widget.do-journey .swiper-pagination .swiper-pagination-bullet {
	flex: 1 1 0;
	width: auto !important;
	height: 20px !important;
	margin: 0 !important;
	border-radius: 0 !important;
	opacity: 1 !important;
	background: linear-gradient(var(--e-global-color-lineDivider), var(--e-global-color-lineDivider)) center / 100% 2px no-repeat !important;
	counter-increment: do-slide;
}
.elementor-widget.do-slider .swiper-pagination .swiper-pagination-bullet-active {
	background: linear-gradient(var(--e-global-color-primary), var(--e-global-color-primary)) center / 100% 2px no-repeat !important;
}

.elementor-widget.do-slider .swiper-pagination .swiper-pagination-bullet-active::before,
.elementor-widget.do-slider .swiper-pagination .swiper-pagination-bullet:last-child::after,
.elementor-widget.do-journey .swiper-pagination .swiper-pagination-bullet-active::before,
.elementor-widget.do-journey .swiper-pagination .swiper-pagination-bullet:last-child::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--e-global-typography-secondary-font-family), monospace;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}
.elementor-widget.do-slider .swiper-pagination .swiper-pagination-bullet-active::before,
.elementor-widget.do-journey .swiper-pagination .swiper-pagination-bullet-active::before {
	content: counter(do-slide, decimal-leading-zero);
	left: 0;
	color: var(--e-global-color-accent);
}
.elementor-widget.do-slider .swiper-pagination .swiper-pagination-bullet:last-child::after,
.elementor-widget.do-journey .swiper-pagination .swiper-pagination-bullet:last-child::after {
	content: "/ " counter(do-slide, decimal-leading-zero);
	left: 34px;
	color: var(--e-global-color-textFooter);
}

/* ------------------------------------------------------------ Media Carousel (journey) */
/* Let the arrows and counter escape the clipped main slider and sit under the
   thumbnail strip (they are positioned against the widget instead). */
.elementor-widget.do-journey .elementor-main-swiper:not(.elementor-thumbnails-swiper) {
	position: static !important;
}
.elementor-widget.do-journey .swiper-pagination {
	right: auto !important;
}
.elementor-widget.do-journey .swiper-pagination .swiper-pagination-bullet {
	flex: 0 0 0;
	width: 0 !important;
	background: none !important;
}
/* active thumbnail, as in the canvas */
.elementor-widget.do-journey .elementor-thumbnails-swiper .swiper-slide {
	opacity: .5;
	transition: opacity .2s ease;
}
.elementor-widget.do-journey .elementor-thumbnails-swiper .swiper-slide-active {
	opacity: 1;
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget.do-slider .elementor-swiper-button,
	.elementor-widget.do-journey .elementor-swiper-button,
	.elementor-widget.do-journey .elementor-thumbnails-swiper .swiper-slide {
		transition: none;
	}
}