/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ── Visibility rules (must match Blazor's class names exactly) ── */
.rcm-spinner-wrap[b-vtm2ujqf7f],
.components-reconnect-first-attempt-visible[b-vtm2ujqf7f],
.components-reconnect-repeated-attempt-visible[b-vtm2ujqf7f],
.components-reconnect-failed-visible[b-vtm2ujqf7f],
.components-pause-visible[b-vtm2ujqf7f],
.components-resume-failed-visible[b-vtm2ujqf7f] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .rcm-spinner-wrap[b-vtm2ujqf7f],
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-vtm2ujqf7f],
#components-reconnect-modal.components-reconnect-retrying .rcm-spinner-wrap[b-vtm2ujqf7f],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-vtm2ujqf7f],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-vtm2ujqf7f],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-vtm2ujqf7f],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-vtm2ujqf7f] {
    display: block;
}

#components-reconnect-modal.components-reconnect-retrying[b-vtm2ujqf7f],
#components-reconnect-modal.components-reconnect-failed[b-vtm2ujqf7f] {
    display: block;
}

/* ── Dialog shell ── */
#components-reconnect-modal[b-vtm2ujqf7f] {
    border: none;
    padding: 0;
    background: transparent;
    width: 360px;
    margin: 18vh auto;
    border-radius: 24px;
    opacity: 0;
    transition: display 0.35s allow-discrete, overlay 0.35s allow-discrete;
    animation: rcm-fade-out-b-vtm2ujqf7f 0.35s both;
}

#components-reconnect-modal[open][b-vtm2ujqf7f] {
    animation: rcm-slide-up-b-vtm2ujqf7f 0.45s cubic-bezier(.05, .89, .25, 1.02) 0.08s,
               rcm-fade-in-b-vtm2ujqf7f  0.35s ease-out 0.08s;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-vtm2ujqf7f]::backdrop {
    background: linear-gradient(135deg,
        rgba(15, 32, 39, 0.80) 0%,
        rgba(32, 58, 67, 0.80) 50%,
        rgba(21, 101, 192, 0.60) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: rcm-fade-in-b-vtm2ujqf7f 0.35s ease-out;
}

/* ── Card ── */
.rcm-card[b-vtm2ujqf7f] {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow:
        0 32px 80px rgba(15, 32, 39, 0.22),
        0 8px 24px  rgba(21, 101, 192, 0.12),
        0 0 0 1px   rgba(21, 101, 192, 0.08);
    position: relative;
    overflow: hidden;
}

/* Top accent bar */
.rcm-card[b-vtm2ujqf7f]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1565C0 0%, #10B981 100%);
    border-radius: 24px 24px 0 0;
}

/* ── Logo ── */
.rcm-logo-wrap[b-vtm2ujqf7f] {
    margin-top: 4px;
}

.rcm-logo-img[b-vtm2ujqf7f] {
    display: block;
    filter: drop-shadow(0 6px 18px rgba(21, 101, 192, 0.30));
    border-radius: 16px;
}

/* ── Brand name ── */
.rcm-brand-name[b-vtm2ujqf7f] {
    font-family: 'Roboto', 'Inter', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #0B1D35;
    letter-spacing: 0.3px;
}

/* ── Spinner (dual-ring) ── */
.rcm-spinner-wrap[b-vtm2ujqf7f] {
    margin: 8px 0 4px;
}

.rcm-ring[b-vtm2ujqf7f] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #1565C0, #10B981, #1565C0);
    animation: rcm-spin-b-vtm2ujqf7f 1.1s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 0 rgba(21, 101, 192, 0.4);
    animation: rcm-spin-b-vtm2ujqf7f 1.1s linear infinite, rcm-pulse-b-vtm2ujqf7f 2s ease-in-out infinite;
}

.rcm-ring-inner[b-vtm2ujqf7f] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
}

/* ── Status label (large) ── */
.rcm-status-label[b-vtm2ujqf7f] {
    font-family: 'Roboto', 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #0B1D35;
    margin: 4px 0 0;
    text-align: center;
}

/* ── Messages ── */
.rcm-msg[b-vtm2ujqf7f] {
    margin: 0;
    font-family: 'Roboto', 'Inter', sans-serif;
    font-size: 0.8125rem;
    color: #6B7280;
    text-align: center;
    line-height: 1.6;
    max-width: 260px;
}

.rcm-msg-error[b-vtm2ujqf7f] {
    color: #DC2626;
    font-weight: 500;
}

.rcm-countdown[b-vtm2ujqf7f] {
    font-weight: 700;
    color: #1565C0;
    font-size: 1rem;
}

/* ── Button ── */
.rcm-btn[b-vtm2ujqf7f] {
    margin-top: 6px;
    padding: 10px 28px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #1565C0, #0D47A1);
    color: #ffffff;
    font-family: 'Roboto', 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 16px rgba(21, 101, 192, 0.30);
}

.rcm-btn:hover[b-vtm2ujqf7f]  { opacity: 0.88; transform: translateY(-1px); }
.rcm-btn:active[b-vtm2ujqf7f] { opacity: 1;    transform: translateY(0); }

/* ── Footer caption ── */
.rcm-footer[b-vtm2ujqf7f] {
    margin: 6px 0 0;
    font-family: 'Roboto', 'Inter', sans-serif;
    font-size: 0.6875rem;
    color: #B0BEC5;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ── Keyframes ── */
@keyframes rcm-spin-b-vtm2ujqf7f {
    to { transform: rotate(360deg); }
}

@keyframes rcm-pulse-b-vtm2ujqf7f {
    0%, 100% { box-shadow: 0 0 0 0 rgba(21, 101, 192, 0.25); }
    50%       { box-shadow: 0 0 0 8px rgba(21, 101, 192, 0); }
}

@keyframes rcm-slide-up-b-vtm2ujqf7f {
    from { transform: translateY(28px) scale(0.96); }
    to   { transform: translateY(0)    scale(1); }
}

@keyframes rcm-fade-in-b-vtm2ujqf7f {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes rcm-fade-out-b-vtm2ujqf7f {
    from { opacity: 1; }
    to   { opacity: 0; }
}