/* Rivmedia Loop Carousel – carousel.css */

/* ── Wrapper ─────────────────────────────────────────────────────────
   No overflow:hidden here — clipping is handled by track-outer.
   The wrapper is position:relative so arrows can anchor to it.
   ──────────────────────────────────────────────────────────────── */

.riv-lc-wrapper {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

/* ── Track outer (the scrollable viewport) ───────────────────────────
   overflow:hidden clips the moving track.
   mask-image fades the left and right ~120px to transparent so cards
   gracefully disappear rather than hard-clip at the container edge.
   ──────────────────────────────────────────────────────────────── */

.riv-lc-track-outer {
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;

	/* Fade edges: opaque centre, transparent 0–8%, transparent 92–100% */
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 8%,
		black 92%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 8%,
		black 92%,
		transparent 100%
	);
}

/* Wider fade on larger screens where more cards are visible */
@media ( min-width: 1025px ) {
	.riv-lc-track-outer {
		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0%,
			black 6%,
			black 94%,
			transparent 100%
		);
		mask-image: linear-gradient(
			to right,
			transparent 0%,
			black 6%,
			black 94%,
			transparent 100%
		);
	}
}

/* When arrows are present give the outer a horizontal pad so
   arrows sit outside the fade zone and aren't masked away */
.riv-lc-wrapper.has-arrows .riv-lc-track-outer {
	padding: 0 52px;
}

/* ── Track ───────────────────────────────────────────────────────── */

.riv-lc-track {
	display: flex;
	align-items: stretch;
	will-change: transform;
	transition: transform 0.4s cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
}

.riv-lc-track.riv-lc-no-transition {
	transition: none !important;
}

/* ── Slides ──────────────────────────────────────────────────────── */

.riv-lc-slide {
	flex: 0 0 auto;
	box-sizing: border-box;
	/* Width + marginRight set by JS */
}

/* Make Elementor loop-item template fill its slide */
.riv-lc-slide > .elementor,
.riv-lc-slide > .elementor-section-wrap,
.riv-lc-slide > * {
	height: 100%;
}

/* ── Arrows ──────────────────────────────────────────────────────── */

.riv-lc-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: #000;
	color: #fff;
	border: none;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: opacity 0.2s ease, background-color 0.2s ease;
	/* Arrows sit outside the masked area */
}

.riv-lc-arrow:hover {
	opacity: 0.75;
}

.riv-lc-arrow.riv-lc-disabled {
	opacity: 0.25;
	cursor: default;
	pointer-events: none;
}

.riv-lc-prev { left: 4px; }
.riv-lc-next { right: 4px; }

/* ── Dots ────────────────────────────────────────────────────────── */

.riv-lc-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.riv-lc-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ccc;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s ease;
}

.riv-lc-dot.is-active {
	background: #000;
}

/* ── Fallback card (no template selected) ────────────────────────── */

.riv-lc-fallback-card {
	background: #fff;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	height: 100%;
	box-sizing: border-box;
}

.riv-lc-fallback-card h3 {
	margin: 0 0 10px;
	font-size: 1rem;
}

.riv-lc-fallback-card h3 a {
	text-decoration: none;
	color: inherit;
}

.riv-lc-fallback-card p {
	margin: 0;
	font-size: 0.875rem;
	color: #555;
}