/* Critical CSS for Initial Loader */
#initial-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(var(--bg-primary, 249, 250, 251));
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.4s ease-out;
}

body[data-app-ready="false"] .contents {
	visibility: hidden;
}

body[data-app-ready="true"] .contents {
	visibility: visible;
}

#initial-loader.fade-out {
	opacity: 0;
	pointer-events: none;
}

.loader-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.spinner {
	width: 80px;
	height: 80px;
	border: 4px solid rgb(var(--border-default, 203, 213, 225));
	border-radius: 50%;
	border-top-color: rgb(var(--accent-color, 59, 130, 246));
	animation: spin 1s linear infinite;
}

.loader-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	object-fit: contain;
}

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