/**
 * GEEKS loaders — 25 built-in CSS loaders + the site-wide overlay.
 *
 * Each loader is driven by three variables set from the theme settings:
 *   --geeks-loader-w   width (height follows via a proportional --size)
 *   --geeks-loader-c1/2/3   colours (default accent, injected globally)
 * Every internal `calc(N * var(--size))` scales with the width, so the aspect
 * ratio is preserved at any size. Keyframes are prefixed geeks-loader-* to avoid
 * animation-name clashes with plugins/theme.
 */

.geeks-loader {
	display: inline-block;
	box-sizing: border-box;
	color: var( --geeks-loader-c1, currentColor );
}

/* Shared keyframes ------------------------------------------------------- */
@keyframes geeks-loader-rotation { 0% { transform: rotate( 0 ); } 100% { transform: rotate( 360deg ); } }
@keyframes geeks-loader-scaleout { 0% { transform: scale( 0 ); opacity: 1; } 100% { transform: scale( 1 ); opacity: 0; } }

/* 1. ring-spin — 2 */
.geeks-loader--ring-spin {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) );
	border: calc( 5 * var( --size ) ) solid var( --geeks-loader-c1, currentColor );
	border-bottom-color: var( --geeks-loader-c2, transparent );
	border-radius: 50%; box-sizing: border-box;
	animation: geeks-loader-rotation 1s linear infinite;
}

/* 2. ring-open — 1 */
.geeks-loader--ring-open {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) );
	border: calc( 5 * var( --size ) ) solid var( --geeks-loader-c1, currentColor );
	border-bottom-color: transparent;
	border-radius: 50%; box-sizing: border-box;
	animation: geeks-loader-rotation 1s linear infinite;
}

/* 3. dual-arc — 2 */
.geeks-loader--dual-arc {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) );
	border-radius: 50%; position: relative;
	animation: geeks-loader-rotation 1s linear infinite;
}
.geeks-loader--dual-arc::before, .geeks-loader--dual-arc::after {
	content: ''; box-sizing: border-box; position: absolute; inset: 0; border-radius: 50%;
	border: calc( 5 * var( --size ) ) solid var( --geeks-loader-c1, currentColor );
	animation: geeks-loader-prixclipfix 2s linear infinite;
}
.geeks-loader--dual-arc::after { transform: rotate3d( 90, 90, 0, 180deg ); border-color: var( --geeks-loader-c2, transparent ); }
@keyframes geeks-loader-prixclipfix {
	0% { clip-path: polygon( 50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0 ); }
	50% { clip-path: polygon( 50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0 ); }
	75%, 100% { clip-path: polygon( 50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100% ); }
}

/* 4. orbit-outer — 2 */
.geeks-loader--orbit-outer {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) );
	border: calc( 3 * var( --size ) ) solid var( --geeks-loader-c1, currentColor );
	border-radius: 50%; position: relative; box-sizing: border-box;
	animation: geeks-loader-rotation 1s linear infinite;
}
.geeks-loader--orbit-outer::after {
	content: ''; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% );
	width: calc( 56 * var( --size ) ); height: calc( 56 * var( --size ) ); border-radius: 50%;
	border: calc( 3 * var( --size ) ) solid transparent; border-bottom-color: var( --geeks-loader-c2, transparent );
}

/* 5. inner-arc — 2 */
.geeks-loader--inner-arc {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) );
	border: calc( 3 * var( --size ) ) solid var( --geeks-loader-c1, currentColor );
	border-radius: 50%; position: relative; box-sizing: border-box;
	animation: geeks-loader-rotation 1s linear infinite;
}
.geeks-loader--inner-arc::after {
	content: ''; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% );
	width: calc( 40 * var( --size ) ); height: calc( 40 * var( --size ) ); border-radius: 50%;
	border: calc( 3 * var( --size ) ) solid; border-color: var( --geeks-loader-c2, transparent ) transparent;
}

/* 6. ring-dots-diag — 2 */
.geeks-loader--ring-dots-diag {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) );
	border: calc( 2 * var( --size ) ) solid var( --geeks-loader-c1, currentColor );
	border-radius: 50%; position: relative; box-sizing: border-box;
	animation: geeks-loader-rotation 1s linear infinite;
}
.geeks-loader--ring-dots-diag::after, .geeks-loader--ring-dots-diag::before {
	content: ''; box-sizing: border-box; position: absolute; left: 0; top: 0; background: var( --geeks-loader-c2, currentColor );
	width: calc( 6 * var( --size ) ); height: calc( 6 * var( --size ) ); transform: translate( 150%, 150% ); border-radius: 50%;
}
.geeks-loader--ring-dots-diag::before { left: auto; top: auto; right: 0; bottom: 0; transform: translate( -150%, -150% ); }

/* 7. ring-dots-corner — 2 */
.geeks-loader--ring-dots-corner {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) );
	border: calc( 2 * var( --size ) ) solid var( --geeks-loader-c1, currentColor );
	border-radius: 50%; position: relative; box-sizing: border-box;
	animation: geeks-loader-rotation 1s linear infinite;
}
.geeks-loader--ring-dots-corner::after, .geeks-loader--ring-dots-corner::before {
	content: ''; box-sizing: border-box; position: absolute; left: 0; top: 0; background: var( --geeks-loader-c2, currentColor );
	width: calc( 6 * var( --size ) ); height: calc( 6 * var( --size ) ); border-radius: 50%;
}
.geeks-loader--ring-dots-corner::before { left: auto; top: auto; right: 0; bottom: 0; }

/* 8. double-ring — 2 */
.geeks-loader--double-ring {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) );
	border-radius: 50%; position: relative;
	border: calc( 2 * var( --size ) ) solid var( --geeks-loader-c1, currentColor );
	box-sizing: border-box; animation: geeks-loader-rotation 1s linear infinite;
}
.geeks-loader--double-ring::after {
	content: ''; box-sizing: border-box; position: absolute; left: calc( 4 * var( --size ) ); top: calc( 4 * var( --size ) );
	border: calc( 2 * var( --size ) ) solid var( --geeks-loader-c2, transparent );
	width: calc( 12 * var( --size ) ); height: calc( 12 * var( --size ) ); border-radius: 50%;
}

/* 9. ring-dot — 2 */
.geeks-loader--ring-dot {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) );
	border: calc( 3 * var( --size ) ) solid var( --geeks-loader-c1, currentColor );
	border-radius: 50%; position: relative; box-sizing: border-box;
	animation: geeks-loader-rotation 1s linear infinite;
}
.geeks-loader--ring-dot::after {
	content: ''; box-sizing: border-box; position: absolute; left: 0; top: 0; background: var( --geeks-loader-c2, currentColor );
	width: calc( 16 * var( --size ) ); height: calc( 16 * var( --size ) ); transform: translate( -50%, 50% ); border-radius: 50%;
}

/* 10. pulse-rings — 1 */
.geeks-loader--pulse-rings {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) ); position: relative;
}
.geeks-loader--pulse-rings::after, .geeks-loader--pulse-rings::before {
	content: ''; box-sizing: border-box; width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) ); border-radius: 50%;
	border: calc( 2 * var( --size ) ) solid var( --geeks-loader-c1, currentColor ); position: absolute; left: 0; top: 0;
	animation: geeks-loader-scaleout 2s linear infinite;
}
.geeks-loader--pulse-rings::after { animation-delay: 1s; }

/* 11. orbit-8dots — 1 (fades via color-mix) */
.geeks-loader--orbit-8dots {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	--c: var( --geeks-loader-c1, currentColor );
	/* Fallback first (solid c1) for browsers without color-mix; the color-mix
	 * line overrides where supported. */
	--c2: var( --geeks-loader-c1, currentColor );
	--c2: color-mix( in srgb, var( --geeks-loader-c1, currentColor ) 20%, transparent );
	--c3: var( --geeks-loader-c1, currentColor );
	--c3: color-mix( in srgb, var( --geeks-loader-c1, currentColor ) 50%, transparent );
	--c4: var( --geeks-loader-c1, currentColor );
	--c4: color-mix( in srgb, var( --geeks-loader-c1, currentColor ) 70%, transparent );
	font-size: calc( 10 * var( --size ) ); width: 1em; height: 1em; border-radius: 50%; position: relative;
	text-indent: -9999em; animation: geeks-loader-orbit8 1.1s infinite ease; transform: translateZ( 0 );
}
@keyframes geeks-loader-orbit8 {
	0%, 100% { box-shadow: 0 -2.6em 0 0 var( --c ), 1.8em -1.8em 0 0 var( --c2 ), 2.5em 0 0 0 var( --c2 ), 1.75em 1.75em 0 0 var( --c2 ), 0 2.5em 0 0 var( --c2 ), -1.8em 1.8em 0 0 var( --c2 ), -2.6em 0 0 0 var( --c3 ), -1.8em -1.8em 0 0 var( --c4 ); }
	12.5% { box-shadow: 0 -2.6em 0 0 var( --c4 ), 1.8em -1.8em 0 0 var( --c ), 2.5em 0 0 0 var( --c2 ), 1.75em 1.75em 0 0 var( --c2 ), 0 2.5em 0 0 var( --c2 ), -1.8em 1.8em 0 0 var( --c2 ), -2.6em 0 0 0 var( --c2 ), -1.8em -1.8em 0 0 var( --c3 ); }
	25% { box-shadow: 0 -2.6em 0 0 var( --c3 ), 1.8em -1.8em 0 0 var( --c4 ), 2.5em 0 0 0 var( --c ), 1.75em 1.75em 0 0 var( --c2 ), 0 2.5em 0 0 var( --c2 ), -1.8em 1.8em 0 0 var( --c2 ), -2.6em 0 0 0 var( --c2 ), -1.8em -1.8em 0 0 var( --c2 ); }
	37.5% { box-shadow: 0 -2.6em 0 0 var( --c2 ), 1.8em -1.8em 0 0 var( --c3 ), 2.5em 0 0 0 var( --c4 ), 1.75em 1.75em 0 0 var( --c ), 0 2.5em 0 0 var( --c2 ), -1.8em 1.8em 0 0 var( --c2 ), -2.6em 0 0 0 var( --c2 ), -1.8em -1.8em 0 0 var( --c2 ); }
	50% { box-shadow: 0 -2.6em 0 0 var( --c2 ), 1.8em -1.8em 0 0 var( --c2 ), 2.5em 0 0 0 var( --c3 ), 1.75em 1.75em 0 0 var( --c4 ), 0 2.5em 0 0 var( --c ), -1.8em 1.8em 0 0 var( --c2 ), -2.6em 0 0 0 var( --c2 ), -1.8em -1.8em 0 0 var( --c2 ); }
	62.5% { box-shadow: 0 -2.6em 0 0 var( --c2 ), 1.8em -1.8em 0 0 var( --c2 ), 2.5em 0 0 0 var( --c2 ), 1.75em 1.75em 0 0 var( --c3 ), 0 2.5em 0 0 var( --c4 ), -1.8em 1.8em 0 0 var( --c ), -2.6em 0 0 0 var( --c2 ), -1.8em -1.8em 0 0 var( --c2 ); }
	75% { box-shadow: 0 -2.6em 0 0 var( --c2 ), 1.8em -1.8em 0 0 var( --c2 ), 2.5em 0 0 0 var( --c2 ), 1.75em 1.75em 0 0 var( --c2 ), 0 2.5em 0 0 var( --c3 ), -1.8em 1.8em 0 0 var( --c4 ), -2.6em 0 0 0 var( --c ), -1.8em -1.8em 0 0 var( --c2 ); }
	87.5% { box-shadow: 0 -2.6em 0 0 var( --c2 ), 1.8em -1.8em 0 0 var( --c2 ), 2.5em 0 0 0 var( --c2 ), 1.75em 1.75em 0 0 var( --c2 ), 0 2.5em 0 0 var( --c2 ), -1.8em 1.8em 0 0 var( --c3 ), -2.6em 0 0 0 var( --c4 ), -1.8em -1.8em 0 0 var( --c ); }
}

/* 12. quarter-spin — 1 */
.geeks-loader--quarter-spin {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) ); border-radius: 50%;
	border-top: calc( 3 * var( --size ) ) solid var( --geeks-loader-c1, currentColor );
	border-right: calc( 3 * var( --size ) ) solid transparent; box-sizing: border-box;
	animation: geeks-loader-rotation 1s linear infinite;
}

/* 13. pulse-dot — 1 */
.geeks-loader--pulse-dot {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) );
	background: var( --geeks-loader-c1, currentColor ); border-radius: 50%; box-sizing: border-box;
	animation: geeks-loader-scaleout 1s ease-in infinite;
}

/* 14. pulse-dots — 1 */
.geeks-loader--pulse-dots {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) ); position: relative;
}
.geeks-loader--pulse-dots::after, .geeks-loader--pulse-dots::before {
	content: ''; box-sizing: border-box; width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) ); border-radius: 50%;
	background: var( --geeks-loader-c1, currentColor ); position: absolute; left: 0; top: 0;
	animation: geeks-loader-scaleout 2s linear infinite;
}
.geeks-loader--pulse-dots::after { animation-delay: 1s; }

/* 15. rolling-ball — 2 */
.geeks-loader--rolling-ball {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) );
	background: var( --geeks-loader-c1, currentColor ); border-radius: 50%; position: relative;
	animation: geeks-loader-roll 1s ease-in-out infinite alternate;
}
.geeks-loader--rolling-ball::after {
	content: ''; position: absolute; inset: calc( 5 * var( --size ) ); border-radius: 50%;
	border: calc( 5 * var( --size ) ) solid; border-color: var( --geeks-loader-c2, transparent ) transparent;
}
@keyframes geeks-loader-roll {
	0% { transform: translateX( -150% ) rotate( 0 ); }
	100% { transform: translateX( 150% ) rotate( 360deg ); }
}

/* 16. dots3-flash — 2 */
.geeks-loader--dots3-flash {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 16 * var( --size ) ); height: calc( 16 * var( --size ) ); border-radius: 50%;
	background-color: var( --geeks-loader-c1, currentColor );
	box-shadow: calc( 32 * var( --size ) ) 0 var( --geeks-loader-c1, currentColor ), calc( -32 * var( --size ) ) 0 var( --geeks-loader-c1, currentColor );
	position: relative; animation: geeks-loader-flash 0.5s ease-out infinite alternate;
}
@keyframes geeks-loader-flash {
	0% { background-color: var( --geeks-loader-c2, transparent ); box-shadow: calc( 32 * var( --size ) ) 0 var( --geeks-loader-c2, transparent ), calc( -32 * var( --size ) ) 0 var( --geeks-loader-c1, currentColor ); }
	50% { background-color: var( --geeks-loader-c1, currentColor ); box-shadow: calc( 32 * var( --size ) ) 0 var( --geeks-loader-c2, transparent ), calc( -32 * var( --size ) ) 0 var( --geeks-loader-c2, transparent ); }
	100% { background-color: var( --geeks-loader-c2, transparent ); box-shadow: calc( 32 * var( --size ) ) 0 var( --geeks-loader-c1, currentColor ), calc( -32 * var( --size ) ) 0 var( --geeks-loader-c2, transparent ); }
}

/* 17. dots3-rotate — 2 */
.geeks-loader--dots3-rotate {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 16 * var( --size ) ); height: calc( 16 * var( --size ) ); border-radius: 50%;
	margin: calc( 15 * var( --size ) ) auto; position: relative;
	background: var( --geeks-loader-c1, currentColor ); color: var( --geeks-loader-c2, currentColor );
	box-shadow: calc( -24 * var( --size ) ) 0, calc( 24 * var( --size ) ) 0; box-sizing: border-box;
	animation: geeks-loader-rotation 2s ease-in-out infinite;
}

/* 18. ball-split — 2 */
.geeks-loader--ball-split {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 82 * var( --size ) ); height: calc( 18 * var( --size ) ); position: relative;
}
.geeks-loader--ball-split::before, .geeks-loader--ball-split::after {
	content: ''; position: absolute; left: 50%; transform: translate( -50%, 10% ); top: 0;
	background: var( --geeks-loader-c1, currentColor ); width: calc( 16 * var( --size ) ); height: calc( 16 * var( --size ) ); border-radius: 50%;
	animation: geeks-loader-jump 0.5s ease-in infinite alternate;
}
.geeks-loader--ball-split::after {
	background: transparent; color: var( --geeks-loader-c2, currentColor ); top: 100%;
	box-shadow: calc( 32 * var( --size ) ) calc( -20 * var( --size ) ), calc( -32 * var( --size ) ) calc( -20 * var( --size ) );
	animation: geeks-loader-split 0.5s ease-out infinite alternate;
}
@keyframes geeks-loader-split {
	0% { box-shadow: calc( 8 * var( --size ) ) calc( -20 * var( --size ) ), calc( -8 * var( --size ) ) calc( -20 * var( --size ) ); }
	100% { box-shadow: calc( 32 * var( --size ) ) calc( -20 * var( --size ) ), calc( -32 * var( --size ) ) calc( -20 * var( --size ) ); }
}
@keyframes geeks-loader-jump {
	0% { transform: translate( -50%, -150% ); }
	100% { transform: translate( -50%, 10% ); }
}

/* 19. dots3-wave — 1 */
.geeks-loader--dots3-wave {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 12 * var( --size ) ); height: calc( 12 * var( --size ) ); border-radius: 50%;
	margin: calc( 15 * var( --size ) ) auto; position: relative; color: var( --geeks-loader-c1, currentColor );
	box-sizing: border-box; animation: geeks-loader-wave 1s linear infinite alternate;
}
@keyframes geeks-loader-wave {
	0% { box-shadow: calc( -38 * var( --size ) ) calc( -6 * var( --size ) ), calc( -14 * var( --size ) ) calc( 6 * var( --size ) ), calc( 14 * var( --size ) ) calc( -6 * var( --size ) ); }
	33% { box-shadow: calc( -38 * var( --size ) ) calc( 6 * var( --size ) ), calc( -14 * var( --size ) ) calc( -6 * var( --size ) ), calc( 14 * var( --size ) ) calc( 6 * var( --size ) ); }
	66% { box-shadow: calc( -38 * var( --size ) ) calc( -6 * var( --size ) ), calc( -14 * var( --size ) ) calc( 6 * var( --size ) ), calc( 14 * var( --size ) ) calc( -6 * var( --size ) ); }
	100% { box-shadow: calc( -38 * var( --size ) ) calc( 6 * var( --size ) ), calc( -14 * var( --size ) ) calc( -6 * var( --size ) ), calc( 14 * var( --size ) ) calc( 6 * var( --size ) ); }
}

/* 20. dots2-spin — 2 */
.geeks-loader--dots2-spin {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) );
	margin: calc( 15 * var( --size ) ) auto; position: relative; box-sizing: border-box;
	animation: geeks-loader-rotation 1.2s linear infinite;
}
.geeks-loader--dots2-spin::before, .geeks-loader--dots2-spin::after {
	content: ''; position: absolute; top: 50%; left: 50%; width: calc( 16 * var( --size ) ); height: calc( 16 * var( --size ) );
	border-radius: 50%; margin: calc( -8 * var( --size ) ); box-sizing: border-box;
}
.geeks-loader--dots2-spin::before { background: var( --geeks-loader-c1, currentColor ); transform: translateX( calc( -16 * var( --size ) ) ); }
.geeks-loader--dots2-spin::after { background: var( --geeks-loader-c2, currentColor ); transform: translateX( calc( 16 * var( --size ) ) ); }

/* 21. ripple — 1 */
.geeks-loader--ripple {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	width: calc( 16 * var( --size ) ); height: calc( 16 * var( --size ) ); border-radius: 50%;
	margin: calc( 30 * var( --size ) ) auto; position: relative; background: var( --geeks-loader-c1, currentColor ); box-sizing: border-box;
}
.geeks-loader--ripple::before, .geeks-loader--ripple::after {
	content: ''; position: absolute; inset: 0; border-radius: 50%;
	border: calc( 2 * var( --size ) ) solid var( --geeks-loader-c1, currentColor ); box-sizing: border-box;
	animation: geeks-loader-ripple 1.4s ease-out infinite;
}
.geeks-loader--ripple::after { animation-delay: -0.7s; }
@keyframes geeks-loader-ripple {
	0% { transform: scale( 1 ); opacity: 0.8; }
	100% { transform: scale( 4 ); opacity: 0; }
}

/* 22. dots5-chase — 2 */
.geeks-loader--dots5-chase {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	--track: var( --geeks-loader-c2, currentColor );
	--active: var( --geeks-loader-c1, currentColor );
	width: calc( 6 * var( --size ) ); height: calc( 6 * var( --size ) ); border-radius: 50%;
	margin: calc( 30 * var( --size ) ) auto; position: relative;
	background: var( --track ); /* centre dot = the element itself (always painted) */
	box-shadow: calc( -28 * var( --size ) ) 0 var( --track ), calc( -14 * var( --size ) ) 0 var( --track ), calc( 14 * var( --size ) ) 0 var( --track ), calc( 28 * var( --size ) ) 0 var( --track );
	box-sizing: border-box; animation: geeks-loader-dotchase 1.5s linear infinite;
}
@keyframes geeks-loader-dotchase {
	0% { background: var( --track ); box-shadow: calc( -28 * var( --size ) ) 0 var( --active ), calc( -14 * var( --size ) ) 0 var( --track ), calc( 14 * var( --size ) ) 0 var( --track ), calc( 28 * var( --size ) ) 0 var( --track ); }
	25% { background: var( --track ); box-shadow: calc( -28 * var( --size ) ) 0 var( --track ), calc( -14 * var( --size ) ) 0 var( --active ), calc( 14 * var( --size ) ) 0 var( --track ), calc( 28 * var( --size ) ) 0 var( --track ); }
	50% { background: var( --active ); box-shadow: calc( -28 * var( --size ) ) 0 var( --track ), calc( -14 * var( --size ) ) 0 var( --track ), calc( 14 * var( --size ) ) 0 var( --track ), calc( 28 * var( --size ) ) 0 var( --track ); }
	75% { background: var( --track ); box-shadow: calc( -28 * var( --size ) ) 0 var( --track ), calc( -14 * var( --size ) ) 0 var( --track ), calc( 14 * var( --size ) ) 0 var( --active ), calc( 28 * var( --size ) ) 0 var( --track ); }
	100% { background: var( --track ); box-shadow: calc( -28 * var( --size ) ) 0 var( --track ), calc( -14 * var( --size ) ) 0 var( --track ), calc( 14 * var( --size ) ) 0 var( --track ), calc( 28 * var( --size ) ) 0 var( --active ); }
}

/* 23. bars-fill — 2 */
.geeks-loader--bars-fill {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	--b: var( --geeks-loader-c1, currentColor );
	--f: var( --geeks-loader-c2, currentColor );
	display: block; position: relative; height: calc( 20 * var( --size ) ); width: calc( 140 * var( --size ) );
	background-repeat: no-repeat; background-size: calc( 20 * var( --size ) ) auto;
	background-position: 0 0, calc( 40 * var( --size ) ) 0, calc( 80 * var( --size ) ) 0, calc( 120 * var( --size ) ) 0;
	background-image: linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 );
	animation: geeks-loader-pgfill 1s linear infinite;
}
@keyframes geeks-loader-pgfill {
	0% { background-image: linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ); }
	25% { background-image: linear-gradient( var( --f ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ); }
	50% { background-image: linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --f ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ); }
	75% { background-image: linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --f ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ); }
	100% { background-image: linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --b ) calc( 20 * var( --size ) ), transparent 0 ), linear-gradient( var( --f ) calc( 20 * var( --size ) ), transparent 0 ); }
}

/* 24. square-steps — 2 */
.geeks-loader--square-steps {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	border: calc( 24 * var( --size ) ) solid var( --geeks-loader-c1, currentColor );
	border-color: var( --geeks-loader-c2, currentColor ) var( --geeks-loader-c1, currentColor ) var( --geeks-loader-c1, currentColor ) var( --geeks-loader-c1, currentColor );
	box-sizing: border-box; animation: geeks-loader-rotation 2s steps( 4 ) infinite;
}

/* 25. triangles-spin — 2 */
.geeks-loader--triangles-spin {
	--size: calc( var( --geeks-loader-w, 48px ) / 48 );
	position: relative; width: calc( 48 * var( --size ) ); height: calc( 48 * var( --size ) );
}
.geeks-loader--triangles-spin::before, .geeks-loader--triangles-spin::after {
	content: ''; display: block; border: calc( 32 * var( --size ) ) solid transparent; border-top-color: var( --geeks-loader-c1, currentColor );
	position: absolute; left: 0; top: 0; animation: geeks-loader-weld 2s infinite ease-in;
}
.geeks-loader--triangles-spin::before { border-color: transparent transparent transparent var( --geeks-loader-c2, currentColor ); animation-delay: 0.5s; }
@keyframes geeks-loader-weld {
	0%, 25% { transform: rotate( 0 ); }
	50%, 75% { transform: rotate( 180deg ); }
	100% { transform: rotate( 360deg ); }
}

/* An uploaded (SVG/GIF) custom loader — sized by width, aspect kept. */
.geeks-loader--custom img { display: block; width: var( --geeks-loader-w, 48px ); height: auto; }

/* An inline (HTML/CSS/JS) custom loader — the fragment controls its own layout;
 * the wrapper just gets out of the way. */
.geeks-loader--inline { display: block; width: auto; height: auto; }

/* ----------------------------------------------------------------------- *
 * Site-wide page overlay
 * ----------------------------------------------------------------------- */
.geeks-loader-overlay {
	position: fixed; inset: 0; z-index: 999999;
	display: flex; align-items: center; justify-content: center;
	background: var( --geeks-overlay-bg, #ffffff );
	opacity: 1; transition: opacity var( --geeks-overlay-fade, 350ms ) ease;
}
.geeks-loader-overlay.is-hidden { opacity: 0; pointer-events: none; }

/* Lock page scroll (hide the scrollbar) while the site-wide overlay is shown.
 * scrollbar-gutter keeps the scrollbar's space reserved so hiding it doesn't
 * shift the page sideways (supported browsers). */
html.geeks-loading { overflow: hidden; scrollbar-gutter: stable; }