/* Centered Loader Container */
.loader-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10001;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

/* Spinning Loader */
.loader {
	position: relative;
	width: 20px;
	height: 20px;
	opacity: 1;
	transition: opacity 0.5s ease;
}

.loader.hidden {
	opacity: 0;
	pointer-events: none;
}

.loader svg {
	animation: spin 0.3s linear infinite;
	transform-origin: center;
}

.loader-arc {
	stroke-dasharray: 25 16;
}

/* Counter */
.counter {
	color: white;
	font-family: 'ABCMonumentGrotesk', 'Arial', sans-serif;
	font-size: 18px;
	font-weight: bold;
	opacity: 1;
	transition: opacity 0.5s ease;
    width: 30px;
}

.counter.hidden {
	opacity: 0;
	pointer-events: none;
}

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