/* ============================================== */
/*   Forza — Custom Reconnect UI (Blazor Server)   */
/* ============================================== */

#components-reconnect-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 99999;
    display: none; /* Base: oculto, Blazor alterna classes abaixo */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
    color: white;
    font-family: Roboto, sans-serif;
}

    #components-reconnect-modal > div {
        display: none;
        text-align: center;
        background: #1e1e1e;
        padding: 30px 45px;
        border-radius: 14px;
        border: 1px solid #3e3e3e;
        box-shadow: 0 0 30px rgba(0,0,0,0.5);
        animation: fadeIn 0.3s ease-out;
    }

/* Estados oficiais do Blazor Server */
#components-reconnect-modal.components-reconnect-show { display: flex !important; }
#components-reconnect-modal.components-reconnect-failed { display: flex !important; }
#components-reconnect-modal.components-reconnect-rejected { display: flex !important; }
#components-reconnect-modal.components-reconnect-hide { display: none !important; }

#components-reconnect-modal.components-reconnect-show > .reconnecting { display: block; }
#components-reconnect-modal.components-reconnect-failed > .failed { display: block; }
#components-reconnect-modal.components-reconnect-rejected > .rejected { display: block; }

/* Spinner */
.loading-spinner {
    width: 45px;
    height: 45px;
    border: 4px solid #ffffff25;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 18px auto;
}

/* Keyframes */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}