/*
 * Rebel Farms — sticky checkout bar (.floating-checkout).
 *
 * Laadstatus voor de "Bestel nu"-knop. Na de klik wordt het product op de
 * achtergrond aan de cart toegevoegd en daarna doorgestuurd naar de checkout;
 * dat duurt even. Zolang dat loopt krijgt de knop een spinner en is hij
 * geblokkeerd, zodat de klant ziet dat er iets gebeurt en niet dubbel klikt.
 *
 * Standalone stylesheet (NIET onderdeel van de sass/CodeKit build).
 * Enqueued vanuit functions.php → rebel_checkout_bar_assets().
 * Wordt aangestuurd door js/custom.js (klasse `is-loading` op #buy-now-btn).
 */

.bar-button.is-loading {
	position: relative;
	/* Label onzichtbaar maar wél aanwezig: de knop houdt zo zijn breedte en
	   screenreaders lezen de tekst nog steeds. JS zet daarnaast een min-width
	   gelijk aan de gemeten breedte op het moment van klikken. */
	color: transparent !important;
	pointer-events: none;
	cursor: default;
}

.bar-button.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	box-sizing: border-box;
	border: 2px solid rgba(92, 67, 77, 0.28);
	border-top-color: var(--main-dark, #5C434D);
	border-radius: 50%;
	animation: rebel-btn-spin 0.6s linear infinite;
}

@keyframes rebel-btn-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Bewegingsgevoelige bezoekers: geen rondtollende ring, wel een zichtbare
   pulserende indicatie dat de knop bezig is. */
@media (prefers-reduced-motion: reduce) {
	.bar-button.is-loading::after {
		animation: rebel-btn-pulse 1s ease-in-out infinite;
		border-top-color: rgba(92, 67, 77, 0.28);
		background-color: var(--main-dark, #5C434D);
	}

	@keyframes rebel-btn-pulse {
		0%, 100% { opacity: 0.35; }
		50% { opacity: 1; }
	}
}