/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-w9w66vfndl] {
    display: none;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Blazor reconnect overlay styling - restyled on brand. The
   framework toggles class names on the <dialog> to switch between
   "reconnecting" / "retrying" / "failed" / "paused" states; this
   CSS hides the elements by default and shows the right ones per
   state. Only the visuals are our own now; the plumbing in
   ReconnectModal.razor.js still drives which elements are visible. */

.components-reconnect-first-attempt-visible[b-ma3bqfejwv],
.components-reconnect-repeated-attempt-visible[b-ma3bqfejwv],
.components-reconnect-failed-visible[b-ma3bqfejwv],
.components-pause-visible[b-ma3bqfejwv],
.components-resume-failed-visible[b-ma3bqfejwv],
.components-rejoining-animation[b-ma3bqfejwv] {
    display: none;
}

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

/* The PayDamLoader-shaped animation block needs flex layout so the
   arrow PNG + wordmark PNG layer correctly. Override the generic
   `display: block` from the rule above for this one element. */
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-ma3bqfejwv],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-ma3bqfejwv] {
    display: inline-flex;
}


#components-reconnect-modal[b-ma3bqfejwv] {
    background-color: #ffffff;
    width: 22rem;
    margin: 20vh auto;
    padding: 2.25rem 1.75rem;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(15, 27, 44, 0.18);
    opacity: 0;
    transition: display 0.24s allow-discrete, overlay 0.24s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-ma3bqfejwv 0.24s both;

    /* Originally a 1.5s slideUp + 0.5s fade with a 0.3s delay - that's
       1.8s before the dialog settles and reads as both delayed and
       overly bouncy. Tightened to a single 280ms entrance with a
       softer ease-out so the connection-dropped moment feels prompt. */
    &[open] {
        animation: components-reconnect-modal-slideUp-b-ma3bqfejwv 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
                   components-reconnect-modal-fadeInOpacity-b-ma3bqfejwv 220ms ease-out;
        animation-fill-mode: both;
    }
}

#components-reconnect-modal[b-ma3bqfejwv]::backdrop {
    background-color: rgba(15, 27, 44, 0.45);
    animation: components-reconnect-modal-fadeInOpacity-b-ma3bqfejwv 0.24s ease-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-ma3bqfejwv {
    0%   { transform: translateY(14px) scale(0.97); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-ma3bqfejwv {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-ma3bqfejwv {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

.components-reconnect-container[b-ma3bqfejwv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: #1e3a8a;
}

#components-reconnect-modal p[b-ma3bqfejwv] {
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: #172033;
    letter-spacing: 0;
}

#components-reconnect-modal button[b-ma3bqfejwv] {
    border: 0;
    background-color: #137b74;        /* PayDam teal - same as primary CTA */
    color: #ffffff;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease;
}

#components-reconnect-modal button:hover[b-ma3bqfejwv]  { background-color: #0e5a55; }
#components-reconnect-modal button:active[b-ma3bqfejwv] { background-color: #0a3f3c; }