/**
 * =========================================================================
 * PAGEDINX LOADING SPINNER
 * Smoothly displays during page transitions and dynamic content loading.
 * =========================================================================
 */

.spinnerDiv {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shown during page transition or manual .active trigger (e.g. channels) */
body.pdx-loading .spinnerDiv,
.spinnerDiv.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Delay spinner appearance during page transition so it fades in smoothly
   only after the old content has faded out (~0.3s) */
body.pdx-loading .spinnerDiv {
    transition-delay: 0.3s;
}

/* Immediately fade out without delay when loading finishes */
body:not(.pdx-loading) .spinnerDiv:not(.active) {
    transition-delay: 0s;
}

/* LOADING SPINNER */
.spinner {
    box-sizing: border-box;
    width: 110px;
    height: 110px;
    padding: 3px;
    overflow: visible;
    color: var(--custom1-color);
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.18));
}

.spinner>circle {
    fill: none;
    stroke: currentColor;
    cx: 50%;
    cy: 50%;
    r: 50%;
    stroke-width: 6px;
    stroke-linecap: round;
    transform-origin: center;
}