/* naa_loading.css — Unified loading states */

.naa-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.9rem;
}

.naa-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--muted);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: naa-spin 0.6s linear infinite;
}

.naa-spinner--sm { width: 14px; height: 14px; border-width: 1.5px; }
.naa-spinner--lg { width: 28px; height: 28px; border-width: 3px; }

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

@media (prefers-reduced-motion: reduce) {
    .naa-spinner { animation: none; opacity: 0.6; }
}

/* Overlay loading for containers */
.naa-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    z-index: 10;
    border-radius: inherit;
}

/* Button loading state */
button.naa-btn-loading,
.btn.naa-btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

button.naa-btn-loading::after,
.btn.naa-btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: naa-spin 0.6s linear infinite;
    color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
    button.naa-btn-loading::after,
    .btn.naa-btn-loading::after {
        animation: none;
        opacity: 0.6;
    }
}