/**
 * TropiTrade UI — shared button-loading spinner
 *
 * Gebruik: voeg tijdens een bezige actie `.tt-btn-loading` toe aan de knop
 * (en zet `disabled`); haal de klasse weg als de actie klaar of mislukt is.
 * Toont een draaiend randje vóór de knoptekst. Werkt op elke knopkleur:
 * de spinner erft currentColor.
 *
 *   btn.classList.add('tt-btn-loading');  btn.disabled = true;
 *   ...
 *   btn.classList.remove('tt-btn-loading'); btn.disabled = false;
 *
 * Source of truth: inc/components/loading.css (enqueue in theme-assets-scripts.php).
 * Niet dupliceren in pagina-CSS. De WooCommerce-shopknop houdt zijn eigen
 * ingebouwde spinner (WooCommerce-icoonfont); dit is de standaard voor al
 * onze eigen knoppen.
 */

.tt-btn-loading {
    position: relative;
    pointer-events: none;
}

.tt-btn-loading::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 9px;
    vertical-align: -0.125em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: tt-btn-spin .8s linear infinite;
}

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