/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Layout styles are handled globally in wwwroot/app.css (design system). */
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Navigation styles are handled globally in wwwroot/app.css (design system). */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* The modal is a <dialog> with no "open" attribute in the initial HTML, so the UA
   stylesheet already hides it. This rule makes the hidden state explicit so the
   reconnect UI can never be painted (or considered visible) before a circuit
   actually drops - the text of this dialog ships in the server-rendered HTML. */
#components-reconnect-modal:not([open])[b-s0i3xz0c4c] {
    display: none;
}

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

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

#components-reconnect-modal[b-s0i3xz0c4c] {
    background: #241640;
    color: #F5F0E8;
    width: 22rem;
    margin: 20vh auto;
    padding: 2.2rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-s0i3xz0c4c 0.5s both;
    font-family: 'Inter', sans-serif;
}

#components-reconnect-modal[open][b-s0i3xz0c4c] {
    animation: components-reconnect-modal-slideUp-b-s0i3xz0c4c 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-s0i3xz0c4c 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-s0i3xz0c4c]::backdrop {
    background-color: rgba(10, 5, 18, 0.75);
    backdrop-filter: blur(6px);
    animation: components-reconnect-modal-fadeInOpacity-b-s0i3xz0c4c 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-s0i3xz0c4c {
    0% { transform: translateY(30px) scale(0.95); }
    100% { transform: translateY(0); }
}

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

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

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

#components-reconnect-modal p[b-s0i3xz0c4c] {
    margin: 0;
    text-align: center;
    line-height: 1.6;
    color: #9B91B0;
}

#components-reconnect-modal button[b-s0i3xz0c4c] {
    border: 0;
    background: linear-gradient(135deg, #C9A227 0%, #E0BC45 55%, #C9A227 100%);
    color: #1A0F2E;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 0.7rem 2rem;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#components-reconnect-modal button:hover[b-s0i3xz0c4c] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(201, 162, 39, 0.4);
}

.components-rejoining-animation[b-s0i3xz0c4c] {
    position: relative;
    width: 80px;
    height: 80px;
}

.components-rejoining-animation div[b-s0i3xz0c4c] {
    position: absolute;
    border: 3px solid #C9A227;
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation-b-s0i3xz0c4c 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2)[b-s0i3xz0c4c] {
    animation-delay: -0.5s;
    border-color: #7B2D8B;
}

@keyframes components-rejoining-animation-b-s0i3xz0c4c {
    0% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; }
    4.9% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; }
    5% { top: 40px; left: 40px; width: 0; height: 0; opacity: 1; }
    100% { top: 0px; left: 0px; width: 80px; height: 80px; opacity: 0; }
}