/**
 * Shop Loading Styles
 * Loading overlay สำหรับ WooCommerce shop filtering/sorting
 */

.saren-shop-loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(4px);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.saren-shop-loading.active {
	opacity: 1;
	visibility: visible;
}

.saren-loading-spinner {
	width: 60px;
	height: 60px;
	position: relative;
}

.saren-spinner {
	animation: rotate 2s linear infinite;
	width: 100%;
	height: 100%;
}

.saren-spinner .path {
	stroke: var(--mainColor, #000);
	stroke-linecap: round;
	animation: dash 1.5s ease-in-out infinite;
}

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

@keyframes dash {
	0% {
		stroke-dasharray: 1, 150;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -35;
	}
	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -124;
	}
}

/* Dark mode support */
body.dark-mode .saren-shop-loading {
	background: rgba(0, 0, 0, 0.9);
}

body.dark-mode .saren-spinner .path {
	stroke: var(--mainColor, #fff);
}

/* ป้องกัน scroll เมื่อ loading */
body.shop-loading-active {
	overflow: hidden;
}

/* Loading state สำหรับ product grid */
.woo-products-archive.loading {
	position: relative;
	pointer-events: none;
	opacity: 0.6;
}

.woo-products-archive.loading::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 10;
}

/* Responsive */
@media (max-width: 768px) {
	.saren-loading-spinner {
		width: 50px;
		height: 50px;
	}
}