/*
 * Roadhouse-Loader (0.38.20, überarbeitet 0.38.36): das R aus dem Logo mit goldenem Ring statt der Standard-Ladekreise.
 * Seiten-Loader: inc/loader.php + assets/js/loader.js. Kleine Fassung für Aktionen: nur CSS.
 */

@property --rh-loader-a {
	inherits: false;
	initial-value: 0deg;
	syntax: "<angle>";
}

:root {
	--rh-loader-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpath fill-rule='evenodd' fill='black' transform='translate(10.453 10.257) scale(.787)' d='M24.5 28H57.5C68.5 28 75 33.2 75 41C75 46.8 71.2 50.6 64.6 52.2L71.8 66.2H76V73H60.6L52.3 54.6H46V66.2H51V73H24.5V66.2H30.2V34.8H24.5ZM46 34.8V47.8H55.6C60 47.8 62.3 45.4 62.3 41.3C62.3 37.2 60 34.8 55.6 34.8Z'/%3E%3C/mask%3E%3C/defs%3E%3Cpath fill-rule='evenodd' mask='url(%23m)' d='M50 0a50 50 0 1 0 0 100a50 50 0 1 0 0-100ZM50 6a44 44 0 1 0 0 88a44 44 0 1 0 0-88ZM50 13a37 37 0 1 0 0 74a37 37 0 1 0 0-74Z'/%3E%3C/svg%3E");
}

/* ---------- Seiten-Loader ---------- */

/*
 * 0.38.36: ruhiger und edler – Milchglas, haarfeiner Ring mit goldenem Schweif (statt Strichbogen),
 * Plakette mit Goldkante und weichem Schatten, Schriftzug darunter, sanftes Erscheinen.
 */
.rh-loader {
	align-items: center;
	-webkit-backdrop-filter: blur(14px) saturate(1.15);
	backdrop-filter: blur(14px) saturate(1.15);
	background: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent);
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity var(--wp--custom--motion--duration--slow) var(--wp--custom--motion--ease--silk), visibility 0s linear var(--wp--custom--motion--duration--slow);
	visibility: hidden;
	z-index: 100000;
}

/* Neue Seite: erst nach 0,45 s sichtbar (schnelle Seiten zeigen ihn nie), nach 8 s sicher weg. */
.rh-loader.is-start {
	animation: rh-loader-show var(--wp--custom--motion--duration--slow) var(--wp--custom--motion--ease--silk) 0.45s both, rh-loader-hide var(--wp--custom--motion--duration--medium) var(--wp--custom--motion--ease--standard) 8s forwards;
	visibility: visible;
}

/* Seitenwechsel: sofort einblenden (das Skript wartet selbst kurz). */
.rh-loader.is-leaving {
	opacity: 1;
	pointer-events: auto;
	transition-delay: 0s;
	visibility: visible;
}

@keyframes rh-loader-show {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes rh-loader-hide {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

.rh-loader__inner {
	display: grid;
	gap: 1.5rem;
	justify-items: center;
}

/* Plakette und Schriftzug kommen sanft von unten, sobald der Loader sichtbar wird. */
.rh-loader.is-start .rh-loader__inner {
	animation: rh-loader-rise 0.7s var(--wp--custom--motion--ease--silk) 0.45s both;
}

.rh-loader.is-leaving .rh-loader__inner {
	animation: rh-loader-rise 0.7s var(--wp--custom--motion--ease--silk) both;
}

@keyframes rh-loader-rise {
	from {
		opacity: 0;
		transform: translateY(0.5rem) scale(0.96);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.rh-loader__mark {
	display: grid;
	height: 5.5rem;
	place-items: center;
	position: relative;
	width: 5.5rem;
}

.rh-loader__mark > * {
	grid-area: 1 / 1;
}

/* Haarfeine Spur des Rings. */
.rh-loader__mark::before {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 9%, transparent);
	border-radius: 50%;
	content: "";
	inset: 0;
	position: absolute;
}

/* Goldener Schweif: Verlauf von durchsichtig zu Gold, als 2 px breiter Ring ausgestanzt. */
.rh-loader__halo {
	animation: rh-loader-turn 1.25s linear infinite;
	background: conic-gradient(from 0deg, transparent 0 35%, color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent) 70%, var(--wp--preset--color--accent) 100%);
	border-radius: 50%;
	height: 100%;
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), var(--wp--preset--color--contrast) calc(100% - 1.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2px), var(--wp--preset--color--contrast) calc(100% - 1.5px));
	position: relative;
	width: 100%;
}

/* Leuchtender Kopf am Ende des Schweifs – eigener, mitdrehender Träger (die Ring-Maske würde ihn abschneiden). */
.rh-loader__mark::after {
	animation: rh-loader-turn 1.25s linear infinite;
	background: radial-gradient(circle, var(--wp--preset--color--accent) 0 1.5px, transparent 2.5px) 50% 0 / 6px 6px no-repeat;
	content: "";
	filter: drop-shadow(0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 80%, transparent));
	inset: -2px;
	position: absolute;
}

.rh-loader .rh-loader__r {
	animation: rh-loader-breathe 2.4s var(--wp--custom--motion--ease--in-out) infinite;
	filter: drop-shadow(0 0.5rem 1rem color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent));
	height: 72%;
	overflow: visible;
	width: 72%;
}

/* Goldkante der Plakette (nur im Loader). */
.rh-loader .rh-rmark__disc {
	stroke: color-mix(in srgb, var(--wp--preset--color--accent) 75%, transparent);
	stroke-width: 1.2;
}

.rh-loader__label {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.32em;
	line-height: 1;
	/* Ausgleich für die Laufweite nach dem letzten Buchstaben, damit der Schriftzug mittig steht. */
	padding-left: 0.32em;
	text-transform: uppercase;
}

.rh-rmark__disc {
	fill: var(--wp--preset--color--contrast);
}

.rh-rmark__r {
	fill: var(--wp--preset--color--base);
}

@keyframes rh-loader-turn {
	to {
		transform: rotate(360deg);
	}
}

@keyframes rh-loader-breathe {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(0.965);
	}
}

/* ---------- Kleine Fassung für Aktionen ----------
 * Ein einziges Pseudo-Element: Maske = Ring + Plakette mit ausgespartem R,
 * Hintergrund = Plakettenfarbe innen, wandernder Goldbogen außen.
 * Farben je Untergrund über --rh-ld-disc / --rh-ld-arc / --rh-ld-track.
 */
body .single_add_to_cart_button.is-loading::after,
body .woocommerce .blockUI.blockOverlay::before,
body .woocommerce .loader::before,
body .wc-block-components-spinner::after,
body .rh-more.is-loading .rh-more__btn::after {
	--rh-ld-disc: var(--wp--preset--color--contrast);
	--rh-ld-arc: var(--wp--preset--color--accent);
	--rh-ld-track: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	animation: rh-loader-mini 1s linear infinite;
	background: radial-gradient(circle closest-side, var(--rh-ld-disc) 0 75%, transparent 75.5%), conic-gradient(from var(--rh-loader-a), var(--rh-ld-arc) 0 30%, var(--rh-ld-track) 30% 100%);
	border: 0;
	border-radius: 50%;
	box-sizing: border-box;
	content: "";
	-webkit-mask: var(--rh-loader-mask) center / contain no-repeat;
	mask: var(--rh-loader-mask) center / contain no-repeat;
}

@keyframes rh-loader-mini {
	to {
		--rh-loader-a: 360deg;
	}
}

/* Auf dunklen Knöpfen: helle Plakette, dunkles R. */
body .single_add_to_cart_button.is-loading::after,
body .wc-block-components-button .wc-block-components-spinner::after,
body .wc-block-components-checkout-place-order-button .wc-block-components-spinner::after {
	--rh-ld-disc: var(--wp--preset--color--base);
	--rh-ld-track: color-mix(in srgb, var(--wp--preset--color--base) 25%, transparent);
}

/* In den Warenkorb (Produktseite): ersetzt den Kreis aus global.css. */
body .single_add_to_cart_button.is-loading::after {
	height: 1.75rem;
	margin: -0.875rem 0 0 -0.875rem;
	width: 1.75rem;
}

/* WooCommerce-Überlagerung (Varianten, klassische Formulare). */
body .woocommerce .blockUI.blockOverlay::before,
body .woocommerce .loader::before {
	font-size: 1rem;
	height: 2.25rem;
	margin: -1.125rem 0 0 -1.125rem;
	width: 2.25rem;
}

/* WooCommerce-Blöcke (Warenkorb, Kasse, Mini-Warenkorb). */
body .wc-block-components-spinner::after {
	height: 2em;
	left: 50%;
	margin: -1em 0 0 -1em;
	top: 50%;
	width: 2em;
}

/* Weitere Produkte laden. */
.rh-more.is-loading .rh-more__btn {
	position: relative;
}

body .rh-more.is-loading .rh-more__btn::after {
	height: 1.5rem;
	margin-top: -0.75rem;
	position: absolute;
	right: 1rem;
	top: 50%;
	width: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.rh-loader__halo,
	.rh-loader__mark::after,
	.rh-loader__inner,
	.rh-loader .rh-loader__r {
		animation: none;
	}

	body .single_add_to_cart_button.is-loading::after,
	body .woocommerce .blockUI.blockOverlay::before,
	body .woocommerce .loader::before,
	body .wc-block-components-spinner::after,
	body .rh-more.is-loading .rh-more__btn::after {
		animation-duration: 3s;
	}
}