/* Overlay indikatora učitavanja.

   Zaseban fajl, a ne deo site.css, jer ga koriste oba layouta, dok site.css pored njega nosi i
   globalna pravila (html font-size, body margin-bottom) koja su neophodna za identity-login.css
   ali bi razbila dashboard.

   Imena keyframe-ova su globalna kroz sve učitane stilove i razrešavaju se po principu
   "poslednja deklaracija pobeđuje", pa idu sa prefiksom da ih neki budući @keyframes spin
   u dashboard.css ne preotme. */

.custom-loader-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

    .custom-loader-overlay.fullscreen {
        position: fixed;
    }

.custom-loader {
    width: 70px;
    height: 70px;
    position: relative;
}

    .custom-loader::before,
    .custom-loader::after {
        content: "";
        position: absolute;
        border-radius: 50%;
    }

    .custom-loader::before {
        inset: 0;
        border: 4px solid rgba(107, 53, 117, 0.15);
    }

    .custom-loader::after {
        inset: 0;
        border: 4px solid transparent;
        border-top-color: #6b3575;
        border-right-color: #6b3575;
        box-shadow: 0 0 15px rgba(107, 53, 117, 0.4);
        animation: pd-loader-spin 0.9s linear infinite;
    }

.custom-loader-center {
    position: absolute;
    inset: 18px;
    background: #6b3575;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(107, 53, 117, 0.5), 0 0 30px rgba(107, 53, 117, 0.25);
    animation: pd-loader-pulse 1.5s ease-in-out infinite;
}

@keyframes pd-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pd-loader-pulse {
    0%, 100% {
        transform: scale(0.9);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* Spinner koji stoji ne znači ništa, pa se animacija usporava umesto da se gasi. */
@media (prefers-reduced-motion: reduce) {
    .custom-loader::after,
    .custom-loader-center {
        animation-duration: 3s;
    }
}