/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ---------- state visibility (classes are set by Blazor on the dialog) ---------- */
.components-reconnect-first-attempt-visible[b-4jr5v5jwoh],
.components-reconnect-repeated-attempt-visible[b-4jr5v5jwoh],
.components-reconnect-failed-visible[b-4jr5v5jwoh],
.components-pause-visible[b-4jr5v5jwoh],
.components-resume-failed-visible[b-4jr5v5jwoh] { display: none; }

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

#components-reconnect-modal.components-reconnect-retrying button.components-reconnect-repeated-attempt-visible[b-4jr5v5jwoh],
#components-reconnect-modal.components-reconnect-failed button.components-reconnect-failed-visible[b-4jr5v5jwoh],
#components-reconnect-modal.components-reconnect-paused button.components-pause-visible[b-4jr5v5jwoh],
#components-reconnect-modal.components-reconnect-resume-failed button.components-resume-failed-visible[b-4jr5v5jwoh] { display: inline-flex; }

/* language */
html[lang="en"] .t-ar[b-4jr5v5jwoh] { display: none; }
html:not([lang="en"]) .t-en[b-4jr5v5jwoh] { display: none; }

/* ---------- dialog ---------- */
#components-reconnect-modal[b-4jr5v5jwoh] {
    width: min(92vw, 400px);
    margin: auto;
    padding: 0;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 26px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 80px rgba(20,28,40,.45);
    color: #1E2A3A;
    font-family: 'Cairo', 'Inter', 'Segoe UI', sans-serif;
    text-align: center;
    overflow: hidden;
    opacity: 0;
    transform: translateY(18px) scale(.97);
    transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), display .35s allow-discrete, overlay .35s allow-discrete;
}
#components-reconnect-modal[open][b-4jr5v5jwoh] { opacity: 1; transform: none; }
@starting-style { #components-reconnect-modal[open][b-4jr5v5jwoh] { opacity: 0; transform: translateY(18px) scale(.97); } }
#components-reconnect-modal[b-4jr5v5jwoh]::backdrop { background: rgba(10,14,20,.6); backdrop-filter: blur(6px); }

.components-reconnect-container[b-4jr5v5jwoh] { padding: 28px 28px 0; position: relative; }

.tg-rc-logo[b-4jr5v5jwoh] { display: inline-flex; background: #fff; border-radius: 14px; padding: 6px 12px; box-shadow: 0 10px 24px rgba(30,42,58,.12); margin-bottom: 18px; }
.tg-rc-logo img[b-4jr5v5jwoh] { height: 40px; width: auto; }

/* signal rings */
.tg-rc-signal[b-4jr5v5jwoh] { position: relative; width: 96px; height: 96px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
.tg-rc-ring[b-4jr5v5jwoh] { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(238,122,28,.55); animation: tgRcRing-b-4jr5v5jwoh 2.1s ease-out infinite; }
.tg-rc-ring:nth-child(2)[b-4jr5v5jwoh] { animation-delay: .7s; }
.tg-rc-ring:nth-child(3)[b-4jr5v5jwoh] { animation-delay: 1.4s; }
@keyframes tgRcRing-b-4jr5v5jwoh { 0% { transform: scale(.45); opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }
.tg-rc-core[b-4jr5v5jwoh] { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #EE7A1C, #F59A4B); box-shadow: 0 12px 26px rgba(238,122,28,.45); animation: tgRcPulse-b-4jr5v5jwoh 1.6s ease-in-out infinite; }
@keyframes tgRcPulse-b-4jr5v5jwoh { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
#components-reconnect-modal.components-reconnect-failed .tg-rc-ring[b-4jr5v5jwoh],
#components-reconnect-modal.components-reconnect-resume-failed .tg-rc-ring[b-4jr5v5jwoh] { animation-play-state: paused; opacity: .25; }
#components-reconnect-modal.components-reconnect-failed .tg-rc-core[b-4jr5v5jwoh],
#components-reconnect-modal.components-reconnect-resume-failed .tg-rc-core[b-4jr5v5jwoh] { background: linear-gradient(135deg, #E53935, #FF6F60); box-shadow: 0 12px 26px rgba(229,57,53,.4); animation: none; }
#components-reconnect-modal.components-reconnect-paused .tg-rc-core[b-4jr5v5jwoh] { background: linear-gradient(135deg, #1E2A3A, #3A4B63); animation: none; }

.tg-rc-text h3[b-4jr5v5jwoh] { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; }
.tg-rc-text p[b-4jr5v5jwoh] { margin: 0; color: #5B6675; font-size: .9rem; line-height: 1.6; }
.tg-rc-text b[b-4jr5v5jwoh] { color: #EE7A1C; }
.tg-rc-auto[b-4jr5v5jwoh] { margin-top: 8px !important; font-size: .8rem !important; color: #8F9AAA !important; }

.tg-rc-actions[b-4jr5v5jwoh] { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 18px 0 24px; }
.tg-rc-btn[b-4jr5v5jwoh] { display: none; align-items: center; justify-content: center; gap: 6px; min-width: 130px; padding: 10px 18px; border-radius: 999px; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background .25s ease; }
.tg-rc-btn:hover[b-4jr5v5jwoh] { transform: translateY(-2px); }
.tg-rc-btn-primary[b-4jr5v5jwoh] { border: 0; color: #fff; background: linear-gradient(135deg, #EE7A1C, #F59A4B); box-shadow: 0 10px 24px rgba(238,122,28,.38); }
.tg-rc-btn-outline[b-4jr5v5jwoh] { border: 1.5px solid #EE7A1C; color: #C96210; background: #fff; }

/* bottom progress line while connecting */
.tg-rc-bar[b-4jr5v5jwoh] { height: 4px; background: rgba(30,42,58,.08); overflow: hidden; }
.tg-rc-bar span[b-4jr5v5jwoh] { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, #EE7A1C, #FFB873); border-radius: 4px; animation: tgRcBar-b-4jr5v5jwoh 1.4s ease-in-out infinite; }
@keyframes tgRcBar-b-4jr5v5jwoh { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
#components-reconnect-modal.components-reconnect-failed .tg-rc-bar span[b-4jr5v5jwoh],
#components-reconnect-modal.components-reconnect-resume-failed .tg-rc-bar span[b-4jr5v5jwoh],
#components-reconnect-modal.components-reconnect-paused .tg-rc-bar span[b-4jr5v5jwoh] { animation: none; width: 100%; background: rgba(30,42,58,.12); }

@media (prefers-reduced-motion: reduce) {
    .tg-rc-ring[b-4jr5v5jwoh], .tg-rc-core[b-4jr5v5jwoh], .tg-rc-bar span[b-4jr5v5jwoh] { animation: none !important; }
}