/* ==========================================================================
   SITS Marquee — sitsel_marquee
   ========================================================================== */

.sitsel-marquee {
	--sitsel-marquee-gap-column: 40px;
	--sitsel-marquee-gap-row: 20px;
	--sitsel-marquee-duration: 10s;
	--sitsel-marquee-distance: 50%;

	position: relative;
	width: 100%;
	overflow: hidden;
}

/*
 * FOUC control:
 * Keep the widget layout visible (no opacity:0 on the root — that causes a
 * blank gap then a pop-in). Only the moving track is soft-hidden until JS
 * has measured + applied Elementor styles, then it fades in once.
 */
.sitsel-marquee:not(.sitsel-marquee--ready) .sitsel-marquee-track {
	opacity: 0;
	animation: none !important;
	/* Prevent layout jump: still occupy space */
	visibility: hidden;
}

.sitsel-marquee.sitsel-marquee--ready .sitsel-marquee-track {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.2s ease;
}

/* Label + viewport side-by-side when label is present */
.sitsel-marquee.sitsel-marquee--has-label {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	flex-wrap: nowrap;
}

.sitsel-marquee-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 16px;
	margin-bottom: 0;
	border-radius: 4px;
	background-color: #1a1a1a;
	color: #ffffff;
	flex: 0 0 auto;
	align-self: stretch;
	position: relative;
	z-index: 2;
	white-space: nowrap;
}

.sitsel-marquee-label-text {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}

.sitsel-marquee-label-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.sitsel-marquee-label-icon svg {
	width: 1em;
	height: 1em;
}

/* Viewport */
.sitsel-marquee-viewport {
	overflow: hidden;
	width: 100%;
	position: relative;
	z-index: 1;
	/* Reserve min height so page doesn't jump while track is hidden */
	min-height: 1.5em;
}

.sitsel-marquee.sitsel-marquee--has-label .sitsel-marquee-viewport {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

/* Edge fade only when option is enabled */
.sitsel-marquee--edge-shadow .sitsel-marquee-viewport {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.sitsel-marquee--edge-shadow.sitsel-marquee--vertical .sitsel-marquee-viewport {
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
}

.sitsel-marquee--vertical .sitsel-marquee-viewport {
	max-height: 400px;
}

/* Track — single flex strip; items are duplicated inside by JS */
.sitsel-marquee-track {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
	gap: var(--sitsel-marquee-gap-column);
	will-change: transform;
	animation: sitsel-marquee-scroll-x var(--sitsel-marquee-duration) linear infinite;
}

.sitsel-marquee--vertical .sitsel-marquee-track {
	flex-direction: column;
	width: 100%;
	gap: var(--sitsel-marquee-gap-row);
	animation-name: sitsel-marquee-scroll-y;
}

.sitsel-marquee--reverse .sitsel-marquee-track {
	animation-direction: reverse;
}

.sitsel-marquee--pause-hover:hover .sitsel-marquee-track,
.sitsel-marquee--pause-hover.sitsel-marquee--paused .sitsel-marquee-track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.sitsel-marquee-track {
		animation: none;
	}
}

/* Distance is set by JS to the pixel width/height of one original set,
   so the loop is seamless regardless of item count. */
@keyframes sitsel-marquee-scroll-x {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(calc(-1 * var(--sitsel-marquee-distance)), 0, 0);
	}
}

@keyframes sitsel-marquee-scroll-y {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(0, calc(-1 * var(--sitsel-marquee-distance)), 0);
	}
}

/* No-duplication keyframes: both endpoints keep content fully outside the viewport */
@keyframes sitsel-marquee-scroll-x-noloop {
	from {
		transform: translate3d(var(--sitsel-marquee-from, 100%), 0, 0);
	}
	to {
		transform: translate3d(var(--sitsel-marquee-to, -100%), 0, 0);
	}
}

@keyframes sitsel-marquee-scroll-y-noloop {
	from {
		transform: translate3d(0, var(--sitsel-marquee-from, 100%), 0);
	}
	to {
		transform: translate3d(0, var(--sitsel-marquee-to, -100%), 0);
	}
}

/* Items — never shrink so the seamless loop distance stays accurate */
.sitsel-marquee-item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	white-space: nowrap;
}

/* Icon list item */
.sitsel-marquee-icon-item,
.sitsel-marquee-icon-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
}

.sitsel-marquee-icon {
	display: inline-flex;
	line-height: 1;
	/* Inherit Elementor color/size as soon as they apply — no default black flash */
	color: inherit;
	font-size: inherit;
}

.sitsel-marquee-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Image marquee item — default width 200px (overridden by Style control) */
.sitsel-marquee-image-item img {
	display: block;
	width: 200px;
	max-width: none;
	height: auto;
}

.sitsel-marquee-image-trigger {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	line-height: 0;
}

/* Dynamic — image (default width 200px, overridden by Style control) */
.sitsel-marquee-item--dyn-image img {
	display: block;
	width: 200px;
	max-width: none;
	height: auto;
}

/* Dynamic — title ticker */
.sitsel-marquee-item--dyn-title a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
}

.sitsel-marquee-title-thumb {
	display: inline-flex;
	width: 32px;
	height: 32px;
	overflow: hidden;
	border-radius: 3px;
	flex: 0 0 auto;
}

.sitsel-marquee-title-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Dynamic — category */
.sitsel-marquee-item--dyn-category a,
.sitsel-marquee-item--dyn-category span {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: #f1f1f1;
	color: #1a1a1a;
	text-decoration: none;
	white-space: nowrap;
	font-size: 13px;
}

/* Icon color inheritance (Font Awesome + SVG uploads) */
.sitsel-marquee-icon,
.sitsel-marquee-label-icon {
	color: inherit;
	fill: currentColor;
	line-height: 1;
}

.sitsel-marquee-icon i,
.sitsel-marquee-label-icon i {
	color: inherit;
}

.sitsel-marquee-icon svg,
.sitsel-marquee-label-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	color: inherit;
}

/* Title divider between dynamic title items */
.sitsel-marquee-item--divider {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.sitsel-marquee-divider {
	display: inline-block;
	opacity: 0.55;
	font-weight: 600;
	line-height: 1;
	user-select: none;
}

/* Lightbox — uses gallery classes for layout; keep marquee fallbacks */
.sitsel-marquee-lightbox.is-active,
.sitsel-marquee-lightbox.is-open {
	display: flex !important;
}

.sitsel-marquee-lightbox[hidden] {
	display: none !important;
}

.sitsel-marquee-lightbox-nav.sitsel-marquee-lightbox-prev {
	left: 20px;
}

.sitsel-marquee-lightbox-nav.sitsel-marquee-lightbox-next {
	right: 20px;
}

/* Minimal fallbacks if gallery CSS is missing */
.sitsel-marquee-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
}

.sitsel-marquee-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.9);
}

.sitsel-marquee-lightbox-image {
	max-width: 90vw;
	max-height: 80vh;
	width: auto;
	height: auto;
	display: block;
}