.atc-carousel-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.atc-carousel-body {
	display: flex;
	align-items: stretch;
	width: 100%;
}

/* In vertical carousels, "One on Each Side" navigation should sit above/below
   the viewport (prev = up, next = down) instead of left/right, since motion
   is vertical here. This must ONLY apply to the "sides" position - not to
   "left"/"right" grouped, which should stay beside the content, not on top. */
.atc-carousel-wrapper[data-direction="vertical"][data-nav-pos="sides"] .atc-carousel-body {
	flex-direction: column;
}

/* Grouped arrows (Left/Right nav position) stack vertically (up/down) within
   their own group when the carousel direction is vertical, but the group
   itself still sits beside the content (body stays a row) */
.atc-carousel-wrapper[data-direction="vertical"][data-nav-pos="left"] .atc-nav-group,
.atc-carousel-wrapper[data-direction="vertical"][data-nav-pos="right"] .atc-nav-group {
	flex-direction: column;
}

.atc-carousel-viewport {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	height: 50px;
}

/* Horizontal track: slides side by side */
.atc-carousel-wrapper[data-direction="horizontal"] .atc-carousel-track {
	display: flex;
	flex-direction: row;
	height: 100%;
	will-change: transform;
}

/* Vertical track: slides stacked */
.atc-carousel-wrapper[data-direction="vertical"] .atc-carousel-track {
	display: flex;
	flex-direction: column;
	height: 100%;
	will-change: transform;
}

.atc-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 20px;
	box-sizing: border-box;
}

/* Fade animation mode: slides stacked absolutely */
.atc-carousel-wrapper[data-animation="fade"] .atc-carousel-track {
	position: relative;
}
.atc-carousel-wrapper[data-animation="fade"] .atc-slide {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.atc-carousel-wrapper[data-animation="fade"] .atc-slide.atc-active {
	opacity: 1;
	pointer-events: auto;
	position: relative;
}

.atc-slide-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}

.atc-slide-text {
	margin: 0;
	color: #ffffff;
	font-size: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.atc-slide-highlight {
	font-weight: 700;
	text-decoration: underline;
}

.atc-slide-media img {
	max-height: 28px;
	width: auto;
	display: block;
}

.atc-slide-icon {
	display: inline-flex;
	align-items: center;
}

/* Navigation buttons */
.atc-nav-btn {
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.15);
	transition: background-color 0.2s ease;
	flex: 0 0 auto;
	box-sizing: border-box; /* fix: browser default button padding was pushing the icon out of a fixed box, making it invisible */
	line-height: 1;
	overflow: visible;
	/* Fix: button auto-sizes to icon + padding so the background box always
	   stays exactly around the icon, no matter how big/small the icon is */
	width: auto;
	height: auto;
	aspect-ratio: 1 / 1;
	min-width: 1.6em;
	min-height: 1.6em;
	/* Fix: without this, the button stretches to fill the full cross-axis
	   width of its flex parent (e.g. the whole carousel width in vertical
	   mode) - and aspect-ratio then blows the height up to match, covering
	   the entire carousel. align-self:center keeps it sized to its content. */
	align-self: center;
}

.atc-nav-btn i,
.atc-nav-btn svg {
	display: inline-block;
	line-height: 1;
	transition: transform 0.2s ease;
	/* Fix: Elementor SVG-library icons ignore font-size by default; forcing
	   1em width/height makes them scale with the Navigation Icon Size control */
	width: 1em;
	height: 1em;
}

/* Auto-rotate icons to point up/down when carousel direction is vertical */
.atc-carousel-wrapper.atc-rotate-nav[data-direction="vertical"] .atc-nav-prev i,
.atc-carousel-wrapper.atc-rotate-nav[data-direction="vertical"] .atc-nav-prev svg {
	transform: rotate(90deg);
}
.atc-carousel-wrapper.atc-rotate-nav[data-direction="vertical"] .atc-nav-next i,
.atc-carousel-wrapper.atc-rotate-nav[data-direction="vertical"] .atc-nav-next svg {
	transform: rotate(90deg);
}

.atc-nav-shape-circle {
	border-radius: 50%;
}

.atc-nav-shape-square {
	border-radius: 4px;
}

.atc-nav-shape-none {
	background-color: transparent !important;
}

.atc-nav-group {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 8px 0;
}

/* When both arrows are grouped together on one side, they sit inline with the
   carousel body (left group before the viewport, right group after it) */
.atc-carousel-body > .atc-nav-group.atc-nav-left,
.atc-carousel-body > .atc-nav-group.atc-nav-right {
	flex: 0 0 auto;
	padding: 0 10px;
}

.atc-carousel-body > .atc-nav-btn {
	margin: auto 6px;
}

/* Dots */
.atc-carousel-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 0;
}

.atc-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.35);
	cursor: pointer;
	padding: 0;
}

.atc-dot.atc-dot-active {
	background: #ffffff;
}