/* Universal Marquee v1.0.0 — 3-Layer Build */
.universal-marquee {
	--um-speed: 50;
	--um-gap: 24px;
	--um-fade: 80px;
	--um-item-width: 360px;
}

.universal-marquee.um-ready {
	overflow: hidden !important;
	position: relative;
}

.universal-marquee.um-ready.um-edge-fade {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--um-fade),
		#000 calc(100% - var(--um-fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--um-fade),
		#000 calc(100% - var(--um-fade)),
		transparent 100%
	);
}

/* We always create our own track rather than reusing Elementor's e-con-inner.
   This prevents Elementor width/gap/flex rules from fighting the marquee engine. */
.universal-marquee .um-track {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: stretch !important;
	flex: 0 0 auto !important;
	gap: 0 !important;
	width: max-content !important;
	min-width: max-content !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.universal-marquee .um-group {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: stretch !important;
	flex: 0 0 auto !important;
	column-gap: var(--um-gap) !important;
	row-gap: 0 !important;
	width: max-content !important;
	min-width: max-content !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 var(--um-gap) 0 0 !important;
}

/* Every direct original Elementor child becomes one marquee item. */
.universal-marquee .um-group > .elementor-element {
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	min-width: 0;
}

/* Smart mode:
   - Explicit/narrow Elementor widths are captured in px before DOM wrapping.
   - Default 100%-wide child containers are allowed to shrink to their content.
   This is the main fix for the "each child becomes parent 100%" problem. */
.universal-marquee.um-width-smart .um-group > .elementor-element {
	--width: auto;
	width: var(--um-preserved-item-width, auto) !important;
	min-width: 0 !important;
	max-width: var(--um-preserved-item-width, none) !important;
	flex-basis: var(--um-preserved-item-width, auto) !important;
}

/* Strict preserve mode intentionally preserves the exact original rendered pixel width,
   including a 100%-wide child if the Elementor design really used one. */
.universal-marquee.um-width-keep .um-group > .elementor-element {
	width: var(--um-preserved-item-width) !important;
	min-width: var(--um-preserved-item-width) !important;
	max-width: var(--um-preserved-item-width) !important;
	flex-basis: var(--um-preserved-item-width) !important;
}

/* Predictable equal card widths; responsive value comes from Elementor control. */
.universal-marquee.um-width-custom .um-group > .elementor-element {
	--width: var(--um-item-width);
	width: var(--um-item-width) !important;
	min-width: var(--um-item-width) !important;
	max-width: var(--um-item-width) !important;
	flex-basis: var(--um-item-width) !important;
}

/* Avoid legacy Elementor parent spacing leaking into the new track. */
.universal-marquee.um-ready > .um-track,
.universal-marquee.um-ready > .e-con-inner > .um-track,
.universal-marquee.um-ready > .elementor-container > .um-track {
	align-self: flex-start !important;
}

/* A paused class is also exposed for debugging/optional custom CSS. */
.universal-marquee.um-is-paused .um-track {
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.universal-marquee .um-track {
		transform: none !important;
	}
}