.ac-marquee {
	--gap: 50px; /* Default gap */
	--items-to-show: 5; /* Default items */
	width: 100%;
	overflow: hidden;
	position: relative;
	display: flex;
	container-type: inline-size; /* Enable container query for the track width calculation */
}

.ac-marquee-track {
	display: flex;
	width: max-content;
	animation: ac-marquee-scroll linear infinite;
	/* default animation values that can be overridden by controls */
	animation-duration: 30s; 
}

/* Fix for pause on hover: the class is on the track, but we need to pause the track itself */
.ac-marquee-pause-hover:hover {
	animation-play-state: paused;
}

/* Also pause when hovering anywhere in the parent wrapper if the user wants it */
.ac-marquee:has(.ac-marquee-pause-hover):hover .ac-marquee-track {
	animation-play-state: paused;
}

.ac-marquee-content {
	display: flex;
	align-items: center;
	gap: var(--gap);
	/* Critical fix: We add the gap to the right padding of each content block
	   so that the visual distance between the end of block 1 and start of block 2
	   is exactly the same as the gap between individual items. */
	padding-right: var(--gap);
}

.ac-marquee-item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	
	/* Robust width fallback using viewport width to prevent overlapping/collapsing to 0 */
	width: calc((100vw / var(--items-to-show)) - var(--gap));
	min-width: 120px; /* Prevent shrinking below a readable size */
}

/* Use Container Queries with a fallback to ensure we only apply cqw when the container size is resolved and non-zero */
@supports (width: 1cqw) {
	@container (min-width: 200px) {
		.ac-marquee-item {
			width: calc((100cqw / var(--items-to-show)) - (((var(--items-to-show) - 1) * var(--gap)) / var(--items-to-show)));
		}
	}
}

/* Ensure consistent width calculation on frontend and editor */
.elementor-widget-container .ac-marquee-item {
	min-width: 120px;
}

@supports (width: 1cqw) {
	@container (min-width: 200px) {
		.elementor-widget-container .ac-marquee-item {
			width: calc((100cqw / var(--items-to-show)) - (((var(--items-to-show) - 1) * var(--gap)) / var(--items-to-show)));
		}
	}
}

.ac-marquee-item img {
	object-fit: contain;
	max-width: 100%;
	height: auto;
	max-height: 60px; /* default fallback */
	transition: all 0.3s ease;
}

@keyframes ac-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* Translate exactly 50% of the total track width.
		   Since the track has exactly two identical .ac-marquee-content blocks (which include the padding),
		   50% is exactly the width of one full block + one gap. */
		transform: translateX(-50%);
	}
}

/* In the Elementor editor, CSS animations can sometimes be glitchy on reload, 
   we ensure it works smoothly or just shows the first items */
.elementor-editor-active .ac-marquee-track {
	/* animation: none; Uncomment this if animation is too annoying in editor */
}