/**
 * Directe knop-feedback voor WooCommerce AJAX add-to-cart-knoppen
 * (shop-/categorie-/uitgelicht-/gerelateerde kaarten).
 *
 * Doel: bij klikken direct een spinner ("Bezig…") en daarna kort "Toegevoegd"
 * IN de knop tonen, ZONDER dat de knop van afmeting verandert. De originele
 * knopgrootte wordt in JS als min-width/min-height vastgezet; hier centreren we
 * de inhoud en blokkeren we verdere kliks tijdens het laden.
 *
 * Merkpalet (blauw): accent #35a5de, accent-dark #2891c8.
 * Eigen klassen (.lts-atc-*) — raakt de kaart-styling (filter.css) niet aan.
 */

/* Actieve feedback-status: inhoud gecentreerd, geen layout-shift.
   De knop houdt zijn breedte/hoogte via de in JS gezette min-width/min-height. */
.add_to_cart_button.lts-atc-loading,
.add_to_cart_button.lts-atc-done {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-align: center;
}

/* Tijdens "bezig": knop niet nogmaals aanklikbaar, subtiel gedimd. */
.add_to_cart_button.lts-atc-loading {
	pointer-events: none;
	cursor: default;
	opacity: .92;
}

/* Label naast de spinner/vink — erft de knopkleur (wit op blauwe knop). */
.lts-atc-label {
	font-weight: 600;
	line-height: 1;
	color: inherit;
}

/* Spinner — subtiel, past bij de blauwe knoppen. Rand in de knopkleur
   (meestal wit) met één transparante zijde die ronddraait. */
.lts-atc-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	box-sizing: border-box;
	animation: lts-atc-spin .6s linear infinite;
	flex: 0 0 auto;
}

@keyframes lts-atc-spin {
	to { transform: rotate(360deg); }
}

/* "Toegevoegd"-vinkje — getekend met currentColor, zelfde formaat als spinner. */
.lts-atc-check {
	display: inline-block;
	width: 14px;
	height: 14px;
	position: relative;
	flex: 0 0 auto;
}
.lts-atc-check::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 0;
	width: 5px;
	height: 10px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	box-sizing: border-box;
}

/* Toegankelijkheid: geen animatie voor wie reduced-motion verkiest. */
@media (prefers-reduced-motion: reduce) {
	.lts-atc-spinner {
		animation-duration: 1.4s;
	}
}