.loader-container {
	position: fixed !important;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background: transparent;
	backdrop-filter: blur(1px);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	transition: opacity 0.4s ease;
}

.shadow_loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 30px 40px;
	border-radius: 20px;
	background: white;
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
	border: 1px solid rgba(0, 0, 0, 0.08);
}



.htmx-indicator,
.loader-container {
	position: fixed !important;
	width: 100%;
	text-align: center;
	z-index: 9999;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
	height: 100vh;
	display: none;
}

.htmx-request.htmx-indicator,
.htmx-request.loader-container {
	display: flex !important;
}


/* Beautiful SVG Animation */
.spinner-svg {
	animation: spin 1.2s linear infinite;
}

.circle-progress {
	animation: dash 1.5s ease-in-out infinite;
	transform-origin: center;
}

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

@keyframes dash {
	0% {
		stroke-dashoffset: 251.2;
	}

	50% {
		stroke-dashoffset: 60;
	}

	100% {
		stroke-dashoffset: 251.2;
	}
}

/* Text Animation using Animate.css */
.loading-text {
	margin: 0;
	font-family: system-ui, -apple-system, sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #0A1F44;
	letter-spacing: 0.5px;
}

/* HTMX support */
.htmx-request .loader-container,
.loader-container.htmx-request {
	display: flex !important;
}

/* Optional: Dark mode support */
@media (prefers-color-scheme: dark) {
	.loader-container {
		background: rgba(15, 23, 42, 0.95);
	}

	.shadow_loader {
		background: #1e2937;
		border-color: rgba(255, 255, 255, 0.1);
	}

	.loading-text {
		color: #a5b4fc;
	}
}

.overlay-loader {
	position: fixed !important;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background: transparent;
	backdrop-filter: blur(1px);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	transition: opacity 0.4s ease;
}

.loader-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 30px 40px;
	border-radius: 20px;
	background: white;
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
	border: 1px solid rgba(0, 0, 0, 0.08);
}

/* HTMX indicator compatibility */
.htmx-indicator,
.overlay-loader {
	position: fixed !important;
	width: 100%;
	text-align: center;
	z-index: 9999;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
	height: 100vh;
	display: none;
}

.htmx-request.htmx-indicator,
.htmx-request.overlay-loader {
	display: flex !important;
}

/* SVG Animation */
.loader-spinner {
	animation: rotateLoader 1.2s linear infinite;
}

.spinner-progress {
	animation: progressDash 1.5s ease-in-out infinite;
	transform-origin: center;
}

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

@keyframes progressDash {
	0% {
		stroke-dashoffset: 251.2;
	}
	50% {
		stroke-dashoffset: 60;
	}
	100% {
		stroke-dashoffset: 251.2;
	}
}

/* Text */
.loader-text {
	margin: 0;
	font-family: system-ui, -apple-system, sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #0A1F44;
	letter-spacing: 0.5px;
}

/* HTMX trigger */
.htmx-request .overlay-loader,
.overlay-loader.htmx-request {
	display: flex !important;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	.overlay-loader {
		background: rgba(15, 23, 42, 0.95);
	}

	.loader-card {
		background: #1e2937;
		border-color: rgba(255, 255, 255, 0.1);
	}

	.loader-text {
		color: #a5b4fc;
	}
}