body.ts-loader-active-body {
	overflow: hidden !important;
}

#ts-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999999;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

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

/* Exit Animations */
#ts-loader.ts-loader-animation-slide_up.ts-loader-hidden {
	transform: translateY(-100%);
}

#ts-loader.ts-loader-animation-zoom_out.ts-loader-hidden {
	transform: scale(1.1);
}

.ts-loader-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	max-width: 90%;
}

.ts-loader-animation-wrapper {
	position: relative;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
}

/* ==========================================================================
   CSS Spinner Presets
   ========================================================================== */

/* 1. Ring Preset */
.ts-loader-ring {
	width: 55px;
	height: 55px;
	border: 3px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	animation: ts-spin 0.85s linear infinite;
}

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

/* 2. Dots Preset */
.ts-loader-dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ts-loader-dots div {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	animation: ts-dots 1.4s infinite ease-in-out both;
}

.ts-loader-dots div:nth-child(1) {
	animation-delay: -0.32s;
}

.ts-loader-dots div:nth-child(2) {
	animation-delay: -0.16s;
}

@keyframes ts-dots {
	0%, 80%, 100% { 
		transform: scale(0);
	} 40% { 
		transform: scale(1.0);
	}
}

/* 3. Pulse Preset */
.ts-loader-pulse {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	animation: ts-scaleout 1.0s infinite ease-in-out;
}

@keyframes ts-scaleout {
	0% { 
		transform: scale(0);
	} 100% { 
		transform: scale(1.0);
		opacity: 0;
	}
}

/* 4. Bars Preset */
.ts-loader-bars {
	display: flex;
	gap: 6px;
	width: 60px;
	height: 45px;
	align-items: center;
	justify-content: center;
}

.ts-loader-bars div {
	width: 6px;
	height: 100%;
	border-radius: 3px;
	animation: ts-stretchdelay 1.2s infinite ease-in-out;
}

.ts-loader-bars div:nth-child(1) {
	animation-delay: -1.2s;
}

.ts-loader-bars div:nth-child(2) {
	animation-delay: -1.1s;
}

.ts-loader-bars div:nth-child(3) {
	animation-delay: -1.0s;
}

.ts-loader-bars div:nth-child(4) {
	animation-delay: -0.9s;
}

.ts-loader-bars div:nth-child(5) {
	animation-delay: -0.8s;
}

@keyframes ts-stretchdelay {
	0%, 40%, 100% { 
		transform: scaleY(0.4);
	}  20% { 
		transform: scaleY(1.0);
	}
}

/* 5. Double Bounce Preset */
.ts-loader-bounce {
	width: 60px;
	height: 60px;
	position: relative;
}

.ts-loader-bounce div {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	opacity: 0.6;
	position: absolute;
	top: 0;
	left: 0;
	animation: ts-bounce 2.0s infinite ease-in-out;
}

.ts-loader-bounce div:nth-child(2) {
	animation-delay: -1.0s;
}

@keyframes ts-bounce {
	0%, 100% { 
		transform: scale(0.0);
	} 50% { 
		transform: scale(1.0);
	}
}

/* ==========================================================================
   SVG Animation File
   ========================================================================== */
.ts-loader-svg-file-wrapper svg,
.ts-loader-svg-file-wrapper img,
.ts-loader-svg-file-wrapper div {
	width: 80px;
	height: 80px;
	display: block;
	animation: ts-pulse 2s ease-in-out infinite;
}

@keyframes ts-pulse {
	0%, 100% { transform: scale(1); opacity: 0.9; }
	50% { transform: scale(1.05); opacity: 1; }
}

.ts-loader-custom-svg svg {
	width: 70px;
	height: 70px;
	animation: ts-pulse 2s ease-in-out infinite;
}

/* ==========================================================================
   Logo/Image Type
   ========================================================================== */
.ts-loader-logo-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ts-loader-logo {
	position: relative;
	z-index: 2;
	object-fit: contain;
	border-radius: 8px;
	transition: all 0.3s ease;
}

.ts-logo-round .ts-loader-logo {
	border-radius: 50% !important;
	object-fit: cover !important;
	aspect-ratio: 1/1 !important;
}

.ts-loader-logo-placeholder {
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	background-color: rgba(255, 255, 255, 0.1);
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	z-index: 2;
}

.ts-logo-round .ts-loader-logo-placeholder {
	border-radius: 50% !important;
}

/* Spinner wrap around the logo */
.ts-loader-logo-spinner-wrap {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--ts-pl-logo-width) + 30px);
	height: calc(var(--ts-pl-logo-width) + 30px);
}

/* Make inner elements of spinner responsive to the wrap size */
.ts-loader-logo-spinner-wrap .ts-loader-ring {
	width: 100% !important;
	height: 100% !important;
	border-width: 4px !important;
}

.ts-loader-logo-spinner-wrap .ts-loader-dots {
	width: 100% !important;
	height: auto !important;
	justify-content: space-around;
}

.ts-loader-logo-spinner-wrap .ts-loader-dots div {
	width: calc(var(--ts-pl-logo-width) / 5) !important;
	height: calc(var(--ts-pl-logo-width) / 5) !important;
	background-color: var(--ts-pl-loader-color) !important;
}

.ts-loader-logo-spinner-wrap .ts-loader-pulse {
	width: 100% !important;
	height: 100% !important;
	opacity: 0.3 !important;
	border-radius: 50%;
	background-color: var(--ts-pl-loader-color) !important;
}

.ts-loader-logo-spinner-wrap .ts-loader-bars {
	width: 100% !important;
	height: 80% !important;
}

.ts-loader-logo-spinner-wrap .ts-loader-bars div {
	width: calc(var(--ts-pl-logo-width) / 10) !important;
	background-color: var(--ts-pl-loader-color) !important;
}

.ts-loader-logo-spinner-wrap .ts-loader-bounce {
	width: 100% !important;
	height: 100% !important;
}

.ts-loader-logo-spinner-wrap .ts-loader-bounce div {
	background-color: var(--ts-pl-loader-color) !important;
}

/* ==========================================================================
   Text Only Loader & Subtitle Text
   ========================================================================== */
.ts-loader-text-only {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.ts-text-pulse {
	animation: ts-text-fade 1.5s ease-in-out infinite;
}

@keyframes ts-text-fade {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 1; }
}

/* Loader Subtitle Text */
.ts-loader-text-wrapper {
	margin-top: 10px;
}

.ts-loader-text {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 500;
	margin: 0;
	letter-spacing: 0.03em;
	animation: ts-text-fade 2s ease-in-out infinite;
}