/**
 * OpsMind Travel — unified loader
 * Larger pale orb; soft gradient colors float / drift inside. No text.
 */

:root {
	--opsmind-book-grad-1: #e8892a;
	--opsmind-book-grad-2: #3db8a8;
	--opsmind-book-grad-3: #2ec4f3;
	--opsmind-loader-accent: var(--opsmind-book-grad-1);
	--opsmind-orb-size: 96px;
	/* Pale mixes — muted pastels from theme colors */
	--opsmind-orb-pale-1: color-mix(in srgb, var(--opsmind-book-grad-1) 42%, #ffffff);
	--opsmind-orb-pale-2: color-mix(in srgb, var(--opsmind-book-grad-2) 40%, #ffffff);
	--opsmind-orb-pale-3: color-mix(in srgb, var(--opsmind-book-grad-3) 40%, #ffffff);
	--opsmind-orb-base: color-mix(in srgb, var(--opsmind-book-grad-2) 18%, #f7fafc);
}

@supports not (background: color-mix(in srgb, red 50%, white)) {
	:root {
		--opsmind-orb-pale-1: #f0c48a;
		--opsmind-orb-pale-2: #9fd9d0;
		--opsmind-orb-pale-3: #9fdcf0;
		--opsmind-orb-base: #eef6f8;
	}
}

/* ---- Overlay shell ---- */
.loader-wrapper,
.map-loading,
.map-content-loading,
.load-ajax-icon .loader-wrapper {
	background: rgba(255, 255, 255, 0.5) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.loader-wrapper.opsmind-glass-loader {
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 30;
	margin: 0;
	padding: 0;
	border-radius: inherit;
}

.loader-wrapper.opsmind-glass-loader[style*="block"],
.loader-wrapper.opsmind-glass-loader[style*="flex"] {
	display: flex !important;
}

.loader-wrapper .lds-ripple,
.opsmind-glass-loader .ops-loader {
	display: none !important;
}

/* ---- Orb shell ---- */
.opsmind-orb,
.loader-wrapper .ops-loader,
.map-loading .ops-loader,
.map-content-loading .ops-loader,
.load-ajax-icon .loader-wrapper .ops-loader,
body .ops-loader {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: var(--opsmind-orb-size) !important;
	height: var(--opsmind-orb-size) !important;
	margin: 0 !important;
	margin-left: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	transform: translate(-50%, -50%) !important;
	background: var(--opsmind-orb-base) !important;
	background-image: none !important;
	box-shadow:
		0 14px 40px rgba(15, 23, 42, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.75);
	animation:
		opsmindOrbBreath 2.4s ease-in-out infinite,
		opsmindOrbGlow 2.4s ease-out infinite !important;
	z-index: 2;
	overflow: hidden !important;
	isolation: isolate;
}

.opsmind-glass-loader .opsmind-orb {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	flex-shrink: 0;
	animation:
		opsmindOrbBreathRel 2.4s ease-in-out infinite,
		opsmindOrbGlowRel 2.4s ease-out infinite !important;
}

/* Soft floating color blobs inside */
.opsmind-orb__spin {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 260%;
	height: 260%;
	margin: 0;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background:
		radial-gradient(circle at 28% 32%, var(--opsmind-orb-pale-1) 0%, transparent 42%),
		radial-gradient(circle at 72% 38%, var(--opsmind-orb-pale-3) 0%, transparent 44%),
		radial-gradient(circle at 48% 78%, var(--opsmind-orb-pale-2) 0%, transparent 46%),
		radial-gradient(circle at 58% 22%, var(--opsmind-orb-pale-2) 0%, transparent 36%),
		var(--opsmind-orb-base);
	filter: saturate(0.85) brightness(1.06);
	animation: opsmindOrbFloat 4.5s ease-in-out infinite;
	will-change: transform;
	pointer-events: none;
}

.opsmind-orb__spin::after {
	content: "";
	position: absolute;
	inset: 22%;
	border-radius: 50%;
	background: radial-gradient(
		circle at 30% 26%,
		rgba(255, 255, 255, 0.7) 0%,
		rgba(255, 255, 255, 0.12) 45%,
		transparent 72%
	);
	pointer-events: none;
}

/* Legacy .ops-loader — same float via ::before */
.loader-wrapper .ops-loader::before,
.map-loading .ops-loader::before,
.map-content-loading .ops-loader::before,
.load-ajax-icon .loader-wrapper .ops-loader::before,
body .ops-loader::before {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 260% !important;
	height: 260% !important;
	margin: 0 !important;
	margin-left: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background:
		radial-gradient(circle at 28% 32%, var(--opsmind-orb-pale-1) 0%, transparent 42%),
		radial-gradient(circle at 72% 38%, var(--opsmind-orb-pale-3) 0%, transparent 44%),
		radial-gradient(circle at 48% 78%, var(--opsmind-orb-pale-2) 0%, transparent 46%),
		radial-gradient(circle at 58% 22%, var(--opsmind-orb-pale-2) 0%, transparent 36%),
		var(--opsmind-orb-base) !important;
	box-shadow: none !important;
	opacity: 1 !important;
	filter: saturate(0.85) brightness(1.06);
	transform: translate(-50%, -50%) !important;
	animation: opsmindOrbFloat 4.5s ease-in-out infinite !important;
	pointer-events: none;
	z-index: 0;
}

.loader-wrapper .ops-loader::after,
.map-loading .ops-loader::after,
.map-content-loading .ops-loader::after,
.load-ajax-icon .loader-wrapper .ops-loader::after,
body .ops-loader::after {
	content: "" !important;
	position: absolute !important;
	inset: 16% !important;
	top: 16% !important;
	left: 16% !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	margin-left: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: radial-gradient(
		circle at 30% 26%,
		rgba(255, 255, 255, 0.7) 0%,
		rgba(255, 255, 255, 0.12) 45%,
		transparent 72%
	) !important;
	box-shadow: none !important;
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
	pointer-events: none;
	z-index: 1;
}

.opsmind-orb::before,
.opsmind-orb::after {
	display: none !important;
}

/* Drift / float path — colors wave through the orb */
@keyframes opsmindOrbFloat {
	0% {
		transform: translate(-58%, -52%) rotate(0deg) scale(1);
	}
	25% {
		transform: translate(-42%, -60%) rotate(8deg) scale(1.04);
	}
	50% {
		transform: translate(-40%, -44%) rotate(-6deg) scale(1.06);
	}
	75% {
		transform: translate(-56%, -40%) rotate(5deg) scale(1.03);
	}
	100% {
		transform: translate(-58%, -52%) rotate(0deg) scale(1);
	}
}

@keyframes opsmindOrbBreath {
	0%,
	100% {
		transform: translate(-50%, -50%) scale(0.97);
	}
	50% {
		transform: translate(-50%, -50%) scale(1.04);
	}
}

@keyframes opsmindOrbBreathRel {
	0%,
	100% {
		transform: scale(0.97);
	}
	50% {
		transform: scale(1.04);
	}
}

@keyframes opsmindOrbGlow {
	0% {
		box-shadow:
			0 14px 40px rgba(15, 23, 42, 0.12),
			inset 0 1px 0 rgba(255, 255, 255, 0.75),
			0 0 0 0 color-mix(in srgb, var(--opsmind-orb-pale-1) 40%, transparent);
	}
	70% {
		box-shadow:
			0 14px 40px rgba(15, 23, 42, 0.12),
			inset 0 1px 0 rgba(255, 255, 255, 0.75),
			0 0 0 18px color-mix(in srgb, var(--opsmind-orb-pale-1) 0%, transparent);
	}
	100% {
		box-shadow:
			0 14px 40px rgba(15, 23, 42, 0.12),
			inset 0 1px 0 rgba(255, 255, 255, 0.75),
			0 0 0 0 color-mix(in srgb, var(--opsmind-orb-pale-1) 0%, transparent);
	}
}

@keyframes opsmindOrbGlowRel {
	0% {
		box-shadow:
			0 14px 40px rgba(15, 23, 42, 0.12),
			inset 0 1px 0 rgba(255, 255, 255, 0.75),
			0 0 0 0 color-mix(in srgb, var(--opsmind-orb-pale-1) 40%, transparent);
	}
	70% {
		box-shadow:
			0 14px 40px rgba(15, 23, 42, 0.12),
			inset 0 1px 0 rgba(255, 255, 255, 0.75),
			0 0 0 18px color-mix(in srgb, var(--opsmind-orb-pale-1) 0%, transparent);
	}
	100% {
		box-shadow:
			0 14px 40px rgba(15, 23, 42, 0.12),
			inset 0 1px 0 rgba(255, 255, 255, 0.75),
			0 0 0 0 color-mix(in srgb, var(--opsmind-orb-pale-1) 0%, transparent);
	}
}

@supports not (background: color-mix(in srgb, red 50%, white)) {
	@keyframes opsmindOrbGlow {
		0% {
			box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 0 0 rgba(240, 196, 138, 0.4);
		}
		70% {
			box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 0 18px rgba(240, 196, 138, 0);
		}
		100% {
			box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 0 0 rgba(240, 196, 138, 0);
		}
	}

	@keyframes opsmindOrbGlowRel {
		0% {
			box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 0 0 rgba(240, 196, 138, 0.4);
		}
		70% {
			box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 0 18px rgba(240, 196, 138, 0);
		}
		100% {
			box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 0 0 rgba(240, 196, 138, 0);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.opsmind-orb,
	.opsmind-orb__spin,
	.loader-wrapper .ops-loader,
	.loader-wrapper .ops-loader::before,
	body .ops-loader,
	body .ops-loader::before {
		animation: none !important;
	}
}