/* ===============================================================
   OVERLAY (image above header)
   =============================================================== */
.rio-overlay {
	position: relative;
	width: 100%;
	display: block;
	background: #f5f5f5;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	z-index: 99998;
	line-height: 0;
	overflow: hidden;
}

.rio-overlay .rio-link {
	display: block;
	text-decoration: none;
	cursor: pointer;
	line-height: 0;
	width: 100%;
	position: relative;
	z-index: 1;
}

.rio-overlay .rio-image {
	display: block;
	width: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.rio-overlay.rio-loading .rio-image {
	opacity: 0.5;
}

/* ===============================================================
   PRELOADER — inline, fills the image area (NOT full screen)
   =============================================================== */
.rio-preloader {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 30%; /* default — overridden inline to match real image aspect */
	background-color: #1a1a1a;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	transition: opacity 0.35s ease;
	opacity: 1;
}

/* Blurred bg layer — image scaled up + heavy blur */
.rio-preloader::before {
	content: '';
	position: absolute;
	inset: -20px;
	background: inherit;
	background-size: cover;
	background-position: center;
	filter: blur(22px) brightness(0.65) saturate(1.1);
	-webkit-filter: blur(22px) brightness(0.65) saturate(1.1);
	transform: scale(1.15);
	z-index: 0;
}

/* Dark overlay on top of blur */
.rio-preloader::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 1;
}

.rio-preloader.rio-preloader-fade {
	opacity: 0;
	pointer-events: none;
}

.rio-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	z-index: 3;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

.rio-spinner-svg {
	width: 100%;
	height: 100%;
	animation: rio-rotate 1.2s linear infinite;
	transform-origin: center;
}

.rio-spinner-track {
	fill: none;
	stroke: rgba(255, 255, 255, 0.35);
	stroke-width: 4;
}

.rio-spinner-arc {
	fill: none;
	stroke: #2196f3;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 90 200;
	stroke-dashoffset: 0;
}

@keyframes rio-rotate {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@media (max-width: 600px) {
	.rio-spinner {
		width: 48px;
		height: 48px;
	}
}