/*
 * Rtist91 Slider Pro — Front-end Stylesheet v1.0.7
 * NOTE: Slide and image dimensions are set by JavaScript (not CSS) using
 * naturalWidth/naturalHeight ratios. CSS here is structural only.
 * -----------------------------------------------------------------------
 */

/* ── Wrapper ─────────────────────────────────────────────────────────── */
/*
 * CLS prevention: the carousel wrapper always reserves its configured height
 * via --rtsp-height so no layout shift occurs on load. The wrapper itself is
 * always visible so the loader spinner shows immediately. Only the viewport
 * (the image track) starts hidden and fades in once images are measured.
 */
.rtsp-carousel {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	-webkit-user-select: none;
	user-select: none;

	/* Reserve height immediately — prevents CLS */
	min-height: var(--rtsp-height, 400px);
}

.rtsp-carousel.rtsp-is-ready {
	/* nothing extra needed — viewport handles the fade */
}

/* ── Viewport — the only clipping element ────────────────────────────── */
/*
 * Starts invisible so the loader is all you see until images are ready.
 * rtsp-is-ready (added to the parent wrapper) triggers the fade-in.
 */
.rtsp-viewport {
	width: 100%;
	height: var(--rtsp-height, 400px);
	overflow: hidden;
	position: relative;

	opacity: 0;
	transition: opacity 0.4s ease;
}

.rtsp-carousel.rtsp-is-ready .rtsp-viewport {
	opacity: 1;
}

/* ── Track ────────────────────────────────────────────────────────────── */
.rtsp-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--rtsp-gap, 15px);
	height: 100%;
	will-change: transform;
	/* No width set — grows naturally to fit all slides */
}

/* ── Slide ────────────────────────────────────────────────────────────── */
/*
 * Width and height are set by JS via style.width / style.height.
 * CSS only handles visual decoration (border-radius, GPU layer).
 */
.rtsp-slide {
	flex-shrink: 0;
	flex-grow: 0;
	overflow: hidden;          /* clips border-radius only — not image content */
	border-radius: var(--rtsp-img-radius, 8px);
	transform: translateZ(0);
	backface-visibility: hidden;
	line-height: 0;            /* removes inline gap below img */
}

/* ── Image ────────────────────────────────────────────────────────────── */
/*
 * Width and height are set explicitly by JS.
 * These CSS rules are fallbacks only — JS overrides them.
 */
.rtsp-slide img {
	display: block;
	pointer-events: none;
	-webkit-user-drag: none;
	/* JS sets width, height, max-width, min-width explicitly */
}

/* ── Navigation buttons ───────────────────────────────────────────────── */
.rtsp-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;

	width:  var(--rtsp-nav-size, 44px);
	height: var(--rtsp-nav-size, 44px);
	padding: 0;

	border-radius: var(--rtsp-nav-radius, 50%);
	border: none;
	outline: none;
	cursor: pointer;

	background: var(--rtsp-nav-bg, rgba(0,0,0,0.5));
	color: var(--rtsp-nav-color, #fff);

	display: flex;
	align-items: center;
	justify-content: center;

	/* Hidden until ready; transition covers bg/color hover + opacity reveal */
	opacity: 0;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.4s ease;
}

.rtsp-carousel.rtsp-is-ready .rtsp-nav { opacity: 1; }

.rtsp-nav:hover,
.rtsp-nav:focus-visible {
	background: var(--rtsp-nav-hover-bg, rgba(0,0,0,0.85));
	color: var(--rtsp-nav-hover-color, #fff);
}

.rtsp-nav:focus-visible {
	box-shadow: 0 0 0 3px rgba(255,255,255,0.8);
}

.rtsp-nav--prev { left:  var(--rtsp-nav-offset, 15px); }
.rtsp-nav--next { right: var(--rtsp-nav-offset, 15px); }

.rtsp-nav svg {
	width:  calc(var(--rtsp-nav-size, 44px) * 0.45);
	height: calc(var(--rtsp-nav-size, 44px) * 0.45);
	display: block;
	flex-shrink: 0;
	pointer-events: none;
}

/* ── Paused state ─────────────────────────────────────────────────────── */
.rtsp-carousel.is-paused .rtsp-nav { opacity: 0.7; }

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.rtsp-track { transition: none !important; animation: none !important; }
	.rtsp-loader__ring { animation: none !important; }
}

/* ── Loading overlay ──────────────────────────────────────────────────── */
/*
 * Centred ripple/wave loader that sits over the reserved-height area
 * while images are loading. Removed from DOM by JS after the carousel
 * fades in (500ms after rtsp-is-ready is added).
 */
.rtsp-loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
	pointer-events: none;
}

.rtsp-loader__ring {
	position: absolute;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 3px solid rgba(0, 0, 0, 0.2);
	opacity: 0;
	animation: rtsp-ripple 1.8s ease-out infinite;
}

.rtsp-loader__ring:nth-child(2) { animation-delay: 0.6s; }
.rtsp-loader__ring:nth-child(3) { animation-delay: 1.2s; }

@keyframes rtsp-ripple {
	0%   { transform: scale(0.2); opacity: 0.9; }
	100% { transform: scale(2.2); opacity: 0; }
}