/* Shared button loading: brand-colored rotating ring + gray frozen face + grayed inactive peers */

@property --muveup-btn-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

button.muveup-btn-loading,
button[type="submit"].muveup-btn-loading,
.muveup-btn-loading.popup-button,
.muveup-btn-loading.action-btn,
.muveup-btn-loading.applicant-btn,
.muveup-btn-loading.master-planung-primary-btn,
.muveup-btn-loading.card-btn,
.muveup-btn-loading.submit-button,
.muveup-btn-loading.finalize-button,
button.muveup-btn-loading.btn {
    position: relative;
    cursor: wait !important;
    pointer-events: none !important;
    color: transparent !important;
    background: transparent !important;
    border-color: transparent !important;
    overflow: hidden !important;
    min-width: var(--muveup-btn-min-width, auto);
    min-height: var(--muveup-btn-min-height, auto);
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.muveup-btn-loading.popup-button {
    white-space: nowrap;
}

/* Layer 1: rotating ring in brand colors (visible in the inset gap) */
.muveup-btn-loading-ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-sizing: border-box;
    --muveup-btn-angle: 0deg;
    background: conic-gradient(
        from var(--muveup-btn-angle),
        var(--muveup-btn-spin-base, #e38722) 0deg 120deg,
        var(--muveup-btn-spin-light, #f5b06a) 120deg 240deg,
        var(--muveup-btn-spin-dark, #c96f10) 240deg 360deg
    );
    animation: muveup-btn-orbit-spin 0.85s linear infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes muveup-btn-orbit-spin {
    to {
        --muveup-btn-angle: 360deg;
    }
}

/* Layer 2: gray frozen face + loading label (ring stays in brand colors) */
.muveup-btn-loading-face {
    position: absolute;
    inset: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-weight: inherit;
    line-height: 1.2;
    z-index: 1;
    padding: 0 6px;
    border-radius: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #eef0f3;
    color: #4b5563;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    pointer-events: none;
}

/* Variant: primary / orange — spin colors only (face is always gray) */
.muveup-btn-loading--primary,
.muveup-btn-loading.popup-button.btn-orange {
    --muveup-btn-spin-base: #e38722;
    --muveup-btn-spin-light: #f5b06a;
    --muveup-btn-spin-dark: #c96f10;
}

/* Variant: danger */
.muveup-btn-loading--danger,
.muveup-btn-loading.popup-button.btn-danger,
.muveup-btn-loading.action-btn.delete-btn {
    --muveup-btn-spin-base: #ef4444;
    --muveup-btn-spin-light: #f87171;
    --muveup-btn-spin-dark: #dc2626;
}

/* Variant: secondary (light buttons) — stronger ring contrast on gray face */
.muveup-btn-loading--secondary,
.muveup-btn-loading.popup-button.btn-secondary,
.muveup-btn-loading.action-btn.hide-btn {
    --muveup-btn-spin-base: #9ca3af;
    --muveup-btn-spin-light: #e5e7eb;
    --muveup-btn-spin-dark: #6b7280;
}

/* Variant: purple action buttons */
.muveup-btn-loading--purple,
.muveup-btn-loading.action-btn:not(.hide-btn):not(.delete-btn) {
    --muveup-btn-spin-base: #815da7;
    --muveup-btn-spin-light: #a67fd4;
    --muveup-btn-spin-dark: #6b4890;
}

.muveup-btn-loading.action-btn.master-write-action {
    --muveup-btn-spin-base: #e38722;
    --muveup-btn-spin-light: #f5b06a;
    --muveup-btn-spin-dark: #c96f10;
}

/* Green/blue inline master buttons */
.muveup-btn-loading.action-btn[style*='22c55e'],
.muveup-btn-loading.master-planung-primary-btn[style*='22c55e'] {
    --muveup-btn-spin-base: #22c55e;
    --muveup-btn-spin-light: #4ade80;
    --muveup-btn-spin-dark: #16a34a;
}

.muveup-btn-loading.action-btn[style*='3b82f6'],
.muveup-btn-loading.master-planung-primary-btn[style*='3b82f6'] {
    --muveup-btn-spin-base: #3b82f6;
    --muveup-btn-spin-light: #60a5fa;
    --muveup-btn-spin-dark: #2563eb;
}

/* Card buttons on organizer dashboard */
.muveup-btn-loading.card-btn {
    --muveup-btn-spin-base: #e38722;
    --muveup-btn-spin-light: #f5b06a;
    --muveup-btn-spin-dark: #c96f10;
}

.muveup-btn-loading.card-btn.btn-reject {
    --muveup-btn-spin-base: #ef4444;
    --muveup-btn-spin-light: #fca5a5;
    --muveup-btn-spin-dark: #dc2626;
}

.muveup-btn-loading.card-btn.btn-reject .muveup-btn-loading-face {
    color: #b91c1c;
}

.sle-artist-card .muveup-btn-loading.card-btn.btn-interested {
    --muveup-btn-spin-base: #22c55e;
    --muveup-btn-spin-light: #86efac;
    --muveup-btn-spin-dark: #16a34a;
}

.sle-artist-card .muveup-btn-loading.card-btn.btn-profile {
    --muveup-btn-spin-base: #e38722;
    --muveup-btn-spin-light: #f5b06a;
    --muveup-btn-spin-dark: #c96f10;
}

/* Inactive peer buttons (siblings while one button loads) */
.muveup-btn-loading-peer,
.modal-buttons:has(.muveup-btn-loading) .popup-button:not(.muveup-btn-loading),
.modal-actions:has(.muveup-btn-loading) .popup-button:not(.muveup-btn-loading),
.modal-buttons:has(.muveup-btn-loading) .action-btn:not(.muveup-btn-loading),
.modal-actions:has(.muveup-btn-loading) .action-btn:not(.muveup-btn-loading) {
    pointer-events: none !important;
    opacity: 0.4 !important;
    filter: grayscale(0.85);
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}

/* Prevent modal footers and inquiry modals from clipping the ring */
.modal-buttons:has(.muveup-btn-loading),
.modal-actions:has(.muveup-btn-loading) {
    overflow: visible;
}

.modal-content.inquiry-confirm:has(.muveup-btn-loading),
.modal-content.inquiry-confirm:has(.muveup-btn-loading) .modal-buttons {
    overflow: visible;
}

/* Page-specific submit/CTA rules often set background, shadow, or scale — neutralize while loading */
button[type="submit"].muveup-btn-loading,
.muveup-btn-loading.submit-button,
.muveup-btn-loading.finalize-button,
button.muveup-btn-loading.btn {
    transform: none !important;
    filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .muveup-btn-loading-ring {
        animation-duration: 1.4s;
    }
}