/**
 * Skeleton Loading States.
 * Placeholder animation for AJAX-filter / paginate / search.
 *
 * @package TMNhanPhat
 */

.skeleton-card,
.skeleton-line,
.skeleton-badge,
.skeleton-btn {
	background: linear-gradient(
		90deg,
		rgba(15, 23, 42, 0.06) 0%,
		rgba(15, 23, 42, 0.10) 50%,
		rgba(15, 23, 42, 0.06) 100%
	);
	background-size: 200% 100%;
	animation: skeleton-shimmer 1.4s ease-in-out infinite;
	border-radius: 8px;
	display: block;
}

@keyframes skeleton-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

.skeleton-line {
	height: 14px;
	margin-bottom: 10px;
}

.skeleton-line--short {
	width: 40%;
}

.skeleton-line--medium {
	width: 70%;
}

.skeleton-line--long {
	width: 100%;
}

.skeleton-badge {
	display: inline-block;
	width: 64px;
	height: 22px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.skeleton-card {
	padding: 18px;
	border: 1px solid #eef1f6;
	border-radius: 14px;
	background: #fff;
	margin-bottom: 16px;
}

.skeleton-card__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	margin-bottom: 14px;
}

.skeleton-card__title {
	width: 80%;
	height: 18px;
	margin-bottom: 10px;
}

.skeleton-card__meta {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

.skeleton-card__meta .skeleton-badge {
	width: 70px;
	height: 24px;
	margin-bottom: 0;
}

.skeleton-btn {
	height: 42px;
	width: 100%;
	border-radius: 999px;
	margin-top: 14px;
}

.product-archive__results.is-loading {
	position: relative;
	min-height: 280px;
}

.product-archive__results.is-loading > * {
	opacity: 0;
	transition: opacity 0.18s ease;
	pointer-events: none;
}

.product-archive__results-overlay {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(2px);
	z-index: 2;
}

.product-archive__results.is-loading .product-archive__results-overlay {
	display: flex;
}

.product-archive__results-spinner {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 3px solid rgba(4, 106, 181, 0.18);
	border-top-color: #046AB5;
	animation: spin 0.85s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}