/* In-place page updates (assets/js/sellers/ajax-region.js): top progress bar and skeleton building blocks. */
.ajax-progress {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2000;
    height: 3px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, var(--colorSecondary), var(--colorMain));
    transform: scaleX(0);
    transform-origin: right center;
    transition: opacity .2s;
}
.ajax-progress.active { opacity: 1; animation: ajax-progress 1.6s cubic-bezier(.2, .7, .2, 1) forwards; }
.ajax-progress.done { opacity: 0; transform: scaleX(1); animation: none; transition: transform .15s, opacity .3s .1s; }
@keyframes ajax-progress {
    0% { transform: scaleX(0); }
    40% { transform: scaleX(.6); }
    100% { transform: scaleX(.9); }
}

/* skeleton pieces: grey blocks with a soft shimmer */
.sk {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, #eee 25%, #f6f6f6 37%, #eee 63%);
    background-size: 400% 100%;
    animation: sk-shimmer 1.3s ease infinite;
}
.sk-line { height: 12px; margin-bottom: 10px; }
.sk-line.lg { height: 16px; }
.sk-btn { height: 44px; border-radius: 6px; }
@keyframes sk-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

[data-ajax-region].is-loading { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
    .ajax-progress.active, .sk { animation: none; }
}