/**
 * Page navigation loader — centered panel, page dim, optional top bar.
 */

.xm-page-loader {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.xm-page-loader.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.xm-page-loader__veil {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.25);
}

.xm-page-loader__track {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	overflow: hidden;
	background: rgba(255, 103, 0, 0.12);
}

.xm-page-loader__bar {
	position: absolute;
	top: 0;
	left: -35%;
	width: 35%;
	height: 100%;
	background: linear-gradient(90deg, var(--xm-color-primary) 0%, #ff9800 100%);
	border-radius: 0 2px 2px 0;
	animation: xm-page-loader-slide 1s ease-in-out infinite;
}

.xm-page-loader__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-width: 9.5rem;
	padding: 1.35rem 1.65rem;
	border-radius: var(--xm-radius-md);
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);
}

.xm-page-loader__spinner {
	width: 2.25rem;
	height: 2.25rem;
	border: 3px solid rgba(255, 103, 0, 0.18);
	border-top-color: var(--xm-color-primary);
	border-radius: 50%;
	animation: xm-page-loader-spin 0.75s linear infinite;
}

.xm-page-loader__label {
	margin: 0;
	color: var(--xm-color-text);
	font-size: 0.875rem;
	font-weight: var(--xm-font-weight-bold);
	line-height: 1.3;
	text-align: center;
}

body.xm-page-loading #xm-header,
body.xm-page-loading .xm-site__main,
body.xm-page-loading #xm-footer,
body.xm-page-loading .xm-footer,
body.xm-page-loading .xm-whatsapp-float,
body.xm-page-loading .xm-deals-float {
	opacity: var(--xm-loader-page-opacity, 0.9);
	transition: opacity 0.2s ease;
}

body.xm-page-loading--no-dim #xm-header,
body.xm-page-loading--no-dim .xm-site__main,
body.xm-page-loading--no-dim #xm-footer,
body.xm-page-loading--no-dim .xm-footer,
body.xm-page-loading--no-dim .xm-whatsapp-float,
body.xm-page-loading--no-dim .xm-deals-float {
	opacity: 1;
}

@keyframes xm-page-loader-slide {
	0% {
		left: -35%;
	}

	100% {
		left: 100%;
	}
}

@keyframes xm-page-loader-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.xm-page-loader__bar,
	.xm-page-loader__spinner {
		animation: none;
	}

	.xm-page-loader.is-active .xm-page-loader__bar {
		left: 0;
		width: 100%;
	}
}