/**
 * effects.css — Loading states
 * Apenas efeitos realmente usados no site.
 * .btn-ripple esta em core/css/buttons.css (nao duplicar aqui).
 */

/* Loading overlay for containers */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 10;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid var(--som-border);
    border-top-color: var(--som-primary);
    border-radius: 50%;
    animation: spinner 0.8s linear infinite;
    z-index: 11;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Small loading */
.loading-sm::after {
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-width: 2px;
}

/* Large loading */
.loading-lg::after {
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border-width: 4px;
}

/* Dark mode loading */
@media (prefers-color-scheme: dark) {
    .loading::before {
        background: rgba(26, 26, 46, 0.7);
    }
}

/* Inline spinner */
.spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner 0.8s linear infinite;
    vertical-align: middle;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .loading::after,
    .spinner {
        animation: none;
    }
}