/* Waiting UI (unified spinner system) */

/* Global overlay (full page) */
.waiting-global {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.waiting-global-center {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Unified spinner - used everywhere (global, overlay, inline, buttons) */
.waiting-spinner {
    display: inline-block;
    vertical-align: middle;
    box-sizing: content-box;
    width: 28px;
    height: 28px;
    aspect-ratio: 1/1;
    border: 3px solid var(--color-border, #ddd);
    border-top-color: var(--color-primary, #3498db);
    border-radius: 50%;
    animation: wg-spin 0.6s linear infinite;
    flex-shrink: 0;
}

.waiting-message {
    font-family: var(--font-sans);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

@keyframes wg-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Spinner in buttons - smaller size */
button .waiting-spinner,
.btn .waiting-spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

/* Overlay (for cards, forms, modals) */
.waiting-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 0.95rem;
    color: var(--color-text, #222);
    z-index: 10;
    border-radius: inherit;
}

.waiting-overlay .waiting-message {
    margin-top: 0.5em;
}

.is-waiting {
    pointer-events: none;
}

.waiting-global .waiting-message {
    margin-top: 0.75em;
    font-weight: 500;
}

[data-wait-progress] {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-left: 0.25em;
}

progress.waiting-progress {
    width: 100%;
    height: 6px;
}

/* Skeleton Mode */
.waiting-skeleton {
    position: relative;
}

.waiting-skeleton .skeleton-wrapper {
    display: block;
    width: 100%;
}

.skeleton-block {
    position: relative;
    background: linear-gradient(90deg, #eee 8%, #f5f5f5 18%, #eee 33%);
    background-size: 800px 104px;
    animation: skeleton-shimmer 1.1s linear infinite;
    border-radius: 4px;
    margin: 0.4em 0;
    height: 0.9em;
    overflow: hidden;
}

.skeleton-line {
    width: var(--skeleton-width, 100%);
}

.skeleton-media {
    width: 100%;
    height: 140px;
    margin-bottom: 0.75em;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: -468px 0;
    }
    100% {
        background-position: 468px 0;
    }
}