:root {
    --tp-loader-color: var(--tp-primary, #0070c0);
}

body.tp-loader-active {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.tp-global-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease, visibility 120ms ease;
    isolation: isolate;
}

.tp-global-loader.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tp-global-loader[hidden] {
    display: none !important;
}

.tp-global-loader-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(245, 249, 252, 0.08);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}

.tp-global-loader-spinner {
    position: relative;
    width: 54px;
    height: 54px;
}

.tp-global-loader-spinner span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px;
    border-radius: 50%;
    background: var(--tp-loader-color);
    opacity: 0.18;
    transform: rotate(calc(var(--tp-loader-dot) * 45deg)) translateY(-21px);
    animation: tp-loader-dot 0.9s linear infinite;
    animation-direction: reverse;
    animation-delay: calc(var(--tp-loader-dot) * -0.1125s);
}

@keyframes tp-loader-dot {
    0%, 20% { opacity: 1; }
    55%, 100% { opacity: 0.18; }
}

@media (prefers-reduced-motion: reduce) {
    .tp-global-loader-spinner span {
        animation-duration: 1.8s;
    }
}