/* Page Loader Styles */
#page-loader {
	position: fixed; /* Keep it fixed in the viewport */
	top: 0;
	left: 0;
	width: 100%;    /* Cover the full width */
	height: 100%;   /* Cover the full height */
	z-index: 9999;  /* Ensure it's on top of other content */
	/* Subtle gradient background */
	background: linear-gradient(to bottom right, #ffffff, #f8f9fa);
	display: flex; /* Use flexbox for easy centering */
	/* Align items vertically and horizontally */
	justify-content: center;
	align-items: center;
	/* Arrange spinner and text vertically */
	flex-direction: column;
	opacity: 1; /* Start fully visible */
	transition: opacity 0.7s ease-in-out; /* Slightly longer fade-out transition */
	pointer-events: none; /* Initially allow clicks to pass through */
}

/* Style the Bootstrap spinner */
#page-loader .spinner-border {
	width: 3.5rem; /* Slightly larger spinner */
	height: 3.5rem; /* Slightly larger spinner */
	border-width: 0.3em; /* Keep spinner thickness */
	color: #0d6efd; /* Bootstrap primary blue */
}

/* Style for the loading text */
#page-loader .loading-text {
	margin-top: 1rem; /* Space between spinner and text */
	font-size: 1.1rem;
	color: #6c757d; /* Bootstrap secondary text color */
	font-weight: 500;
}

/* Class to hide the loader */
#page-loader.hidden {
	opacity: 0;
}