/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Indikator prekida veze: nevidljiv dok je sve u redu */
.ap-reconnect[b-lnejxa4f62] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
}

/* Tanka traka na vrhu, kao kod učitavanja stranice */
.ap-reconnect__bar[b-lnejxa4f62] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    overflow: hidden;
    opacity: 0;
    transition: opacity .3s;
}

.ap-reconnect__bar[b-lnejxa4f62]::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    border-radius: 3px;
    background: var(--ap-red, #D7262E);
    animation: ap-reconnect-slide-b-lnejxa4f62 1.2s ease-in-out infinite;
}

.ap-reconnect.is-slow .ap-reconnect__bar[b-lnejxa4f62] {
    opacity: 1;
}

/* Kod dužeg prekida: blago zatamnjenje i krug, bez teksta. Stranica se tada ne može klikati,
   jer dodiri ionako ne bi stigli do servera. */
.ap-reconnect__overlay[b-lnejxa4f62] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(246, 246, 247, .72);
    opacity: 0;
    transition: opacity .35s;
}

.ap-reconnect.is-stuck[b-lnejxa4f62] {
    pointer-events: auto;
}

.ap-reconnect.is-stuck .ap-reconnect__overlay[b-lnejxa4f62] {
    opacity: 1;
}

/* Krug stoji na beloj pločici sa senkom, da se vidi i preko belih i preko tamnih delova stranice */
.ap-reconnect__spinner[b-lnejxa4f62] {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 30px rgba(14, 14, 16, .18);
}

.ap-reconnect__spinner[b-lnejxa4f62]::after {
    content: "";
    position: absolute;
    inset: 16px;
    border: 4px solid rgba(215, 38, 46, .18);
    border-top-color: var(--ap-red, #D7262E);
    border-radius: 50%;
    animation: ap-reconnect-spin-b-lnejxa4f62 .8s linear infinite;
}

@keyframes ap-reconnect-slide-b-lnejxa4f62 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

@keyframes ap-reconnect-spin-b-lnejxa4f62 {
    to { transform: rotate(360deg); }
}