/* ═══════════════════════════════════════════════════════════════════════════
   LOADING OVERRIDE — Remove círculo grande e deixa só o pequeno
   ═══════════════════════════════════════════════════════════════════════════ */

/* Remove qualquer estilo do site.css que possa estar criando um círculo grande */
.loading-state,
.loading-state * {
    width: auto !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
}

/* Loading state - container limpo */
.loading-state {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 60vh !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 2rem !important;
}

/* APENAS o ::before cria o círculo pequeno */
.loading-state::before {
    content: '' !important;
    width: 32px !important;
    height: 32px !important;
    border: 3px solid #f3f3f3 !important;
    border-top: 3px solid var(--primary) !important;
    border-radius: 50% !important;
    animation: spin-loading 0.8s linear infinite !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Remove qualquer ::after */
.loading-state::after {
    display: none !important;
    content: none !important;
}

/* Animação */
@keyframes spin-loading {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Remove qualquer filho dentro do loading-state */
.loading-state > * {
    display: none !important;
}

/* Hidden */
.loading-state.hidden {
    display: none !important;
}