/* Loading state pseudo-elements (can't be done with Tailwind) */
.price-history-container.loading::before {
	content: 'Indlæser prishistorik...';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1rem;
	color: #666;
}

.price-history-container.loading::after {
	content: '';
	position: absolute;
	top: calc(50% + 2rem);
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #4bc0c0;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

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