/**
 * Mini Cart Loading Styles
 * CSS for the JavaScript-based mini-cart renderer
 */

/* Loading state styling */
#mini-cart .cart-loading {
	padding: 20px;
	text-align: center;
	color: #999;
	font-style: italic;
}

/* Animate loading text with ellipsis */
@keyframes ellipsis {
	0%, 20% {
		content: '';
	}
	40% {
		content: '.';
	}
	60% {
		content: '..';
	}
	80%, 100% {
		content: '...';
	}
}

/* Loading animation for cart items display */
#mini-cart .cart-items {
	display: inline-block;
	min-width: 70px;
}

#mini-cart.loading .cart-items::after {
	content: '';
	animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
	0%, 20% {
		content: '';
		letter-spacing: 0;
	}
	40% {
		content: '.';
		letter-spacing: 0.15em;
	}
	60% {
		content: '..';
		letter-spacing: 0.25em;
	}
	80%, 100% {
		content: '...';
		letter-spacing: 0.25em;
	}
}

/* Loading spinner animation */
#mini-cart .cart-loading::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 8px;
	border: 2px solid #f3f3f3;
	border-top: 2px solid #333;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	vertical-align: middle;
}

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

/* Hide loading state when content is loaded */
#mini-cart .cart_list_wrap ~ .minicart-actions {
	display: block;
}

#mini-cart .cart_list_wrap {
	display: block;
}

#mini-cart .ajax-loading {
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	width: 20px;
	height: 20px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="none" stroke="%23999" stroke-width="3"/><circle cx="50" cy="50" r="35" fill="none" stroke="%23333" stroke-width="2" stroke-dasharray="50" stroke-dashoffset="0" style="animation: spin 1s linear infinite;"/></svg>') no-repeat center;
	background-size: contain;
	opacity: 0;
	transition: opacity 0.2s ease;
}

#mini-cart li {
	position: relative;
}

#mini-cart li .ajax-loading {
	display: block;
}

/* Smooth transitions for cart updates */
#mini-cart .cart-content {
	transition: opacity 0.3s ease;
}

#mini-cart.updating .cart-content {
	opacity: 0.6;
}