/* ==========================================================================
   BUTTON LOADING ANIMATION STYLES (PREMIUM UX)
   ========================================================================== */

@keyframes btnSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes btnPulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

@keyframes btnShimmer {
    0% {
        transform: translateX(-100%) skewX(-15deg);
    }
    100% {
        transform: translateX(200%) skewX(-15deg);
    }
}

@keyframes btnFadeIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Base button spin SVG */
.btn-spinner {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
    animation: btnSpin 0.75s linear infinite;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.btn-spinner circle {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-dasharray: 45;
    stroke-dashoffset: 15;
}

/* Loading state applied to button elements */
button.is-loading,
input[type="submit"].is-loading,
.premium-button.is-loading,
.btn-submit.is-loading,
.btn-save.is-loading {
    position: relative !important;
    pointer-events: none !important;
    cursor: wait !important;
    opacity: 0.88 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    user-select: none !important;
    overflow: hidden !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: btnPulseGlow 1.6s infinite ease-in-out !important;
    letter-spacing: 0.01em;
}

/* Shimmer Light Reflection effect */
button.is-loading::after,
input[type="submit"].is-loading::after,
.premium-button.is-loading::after,
.btn-submit.is-loading::after,
.btn-save.is-loading::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    animation: btnShimmer 1.4s infinite ease-in-out !important;
    pointer-events: none !important;
}

/* Content animation container inside loading button */
.btn-loading-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    animation: btnFadeIn 0.2s ease-out forwards;
}