/* Pace preloader — همان الگوی قبلی، ظاهر بهتر + رنگ برند */

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.pace .pace-progress {
    background: linear-gradient(
        90deg,
        var(--brand-primary, #3d8bfd) 0%,
        var(--brand-accent, #20c997) 55%,
        color-mix(in srgb, var(--brand-primary, #3d8bfd) 70%, #fff) 100%
    ) !important;
    position: fixed;
    z-index: 10050;
    top: 0;
    right: 100%;
    width: 100%;
    height: 3px;
    box-shadow:
        0 0 12px color-mix(in srgb, var(--brand-primary, #3d8bfd) 55%, transparent),
        0 0 2px color-mix(in srgb, var(--brand-accent, #20c997) 40%, transparent);
    transition: transform 0.12s linear, opacity 0.25s ease;
}

.pace-inactive .pace-progress {
    display: none;
}

.pace .pace-activity {
    display: block;
    position: fixed;
    z-index: 10050;
    top: 0;
    right: 0;
    width: 132px;
    height: 132px;
    background: linear-gradient(
        145deg,
        var(--brand-primary, #3d8bfd),
        var(--brand-accent, #20c997)
    ) !important;
    box-shadow: -6px 8px 28px color-mix(in srgb, var(--brand-primary, #3d8bfd) 35%, transparent);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateX(100%) translateY(-100%) rotate(45deg);
    pointer-events: none;
}

.pace.pace-active .pace-activity {
    transform: translateX(48%) translateY(-48%) rotate(45deg);
}

.pace .pace-activity::after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    display: block;
    bottom: 18px;
    left: 58px;
    width: 18px;
    height: 18px;
    border: solid 2px transparent;
    border-top-color: #fff;
    border-left-color: #fff;
    border-radius: 50%;
    animation: pace-spinner 0.55s linear infinite;
}

.pace .pace-activity::before {
    content: "";
    position: absolute;
    bottom: 14px;
    left: 54px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    opacity: 0.7;
}

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

@media (prefers-reduced-motion: reduce) {
    .pace .pace-activity::after {
        animation: none;
    }
    .pace .pace-progress {
        transition: none;
    }
}