/* Luxury Pace Loader Styles */
.pace {
    pointer-events: none;
    user-select: none;
    z-index: 2000;
}

.pace-inactive {
    display: none;
}

/* Progress Bar */
.pace .pace-progress {
    background: linear-gradient(90deg, #5e72e4, #00d2ff, #ff6ec4);
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(94, 114, 228, 0.7), 0 0 8px rgba(0, 210, 255, 0.5);
    transition: all 0.3s ease-out;
}

.pace .pace-progress-inner {
    display: block;
    position: absolute;
    right: 0;
    width: 120px;
    height: 100%;
    box-shadow: 0 0 15px #5e72e4, 0 0 8px #00d2ff, 0 0 5px #ff6ec4;
    opacity: 1;
    transform: rotate(3deg) translate(0, -4px);
}

/* Activity Spinner */
.pace .pace-activity {
    display: block;
    position: fixed;
    z-index: 2000;
    top: 15px;
    right: 15px;
    width: 24px;
    height: 24px;
    border: solid 3px transparent;
    border-top-color: #5e72e4;
    border-left-color: #00d2ff;
    border-radius: 50%;
    animation: pace-spinner 0.6s linear infinite;
    box-shadow: 0 0 12px #5e72e4, 0 0 12px #00d2ff, 0 0 6px #ff6ec4;
}

/* Spinner Animations */
@keyframes pace-spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Optional: Add a subtle glow pulse */
.pace .pace-activity::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(94, 114, 228, 0.4), 0 0 12px rgba(0, 210, 255, 0.4), 0 0 6px rgba(255, 110, 196, 0.3);
    animation: pulse 1.2s infinite ease-in-out;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.4;
    }
    100% {
        transform: scale(1);
        opacity: 0.7;
    }
}