/**
 * BotPulse — Enterprise Button Loading System v1.0
 * Pixel-perfect circular animated SVG spinner for async operations.
 * 750ms linear rotation • 270° arc • Zero layout shift • Responsive • Accessible
 */

@keyframes bp-button-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes bp-button-pulse-reduced {
    0%, 100% {
        opacity: 0.45;
    }
    50% {
        opacity: 1;
    }
}

/* ==========================================================================
   01. SPINNER BASE CONTAINER & TRANSITION
   ========================================================================== */
.bp-btn-spinner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    width: 0 !important;
    max-width: 0 !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    transition:
        width 150ms cubic-bezier(0.4, 0, 0.2, 1),
        max-width 150ms cubic-bezier(0.4, 0, 0.2, 1),
        margin-right 150ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bp-btn-spinner svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    transform-origin: center center !important;
    animation: bp-button-spin 750ms linear infinite !important;
    will-change: transform;
}

.bp-btn-spinner circle,
.bp-btn-spinner path {
    transform-origin: center center;
}

/* Arc & Track defaults */
.bp-btn-spinner__track {
    stroke: currentColor !important;
    stroke-opacity: 0.22 !important;
}

.bp-btn-spinner__arc {
    stroke: currentColor !important;
    stroke-linecap: round !important;
}

/* ==========================================================================
   02. ACTIVE LOADING STATE ON BUTTONS
   ========================================================================== */
:is(button, a, [role="button"]).is-loading,
:is(button, a, [role="button"])[aria-busy="true"] {
    cursor: wait !important;
    pointer-events: none !important;
    user-select: none !important;
    position: relative !important;
}

/* Maintain exact dimensions, borders, and gradients while slightly toning hover */
:is(button, a, [role="button"]).is-loading:hover,
:is(button, a, [role="button"])[aria-busy="true"]:hover {
    transform: none !important;
    filter: brightness(0.97) !important;
}

/* Spinner visibility and standard sizing (16px) */
:is(button, a, [role="button"]).is-loading .bp-btn-spinner,
:is(button, a, [role="button"])[aria-busy="true"] .bp-btn-spinner {
    width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
    margin-right: 8px !important;
}

/* ==========================================================================
   03. SIZE VARIANTS: SMALL (13px) & LARGE (18px)
   ========================================================================== */

/* --- SMALL (13px) --- */
.bp-btn-spinner.bp-btn-spinner--sm {
    height: 13px !important;
}

.bp-btn-spinner.bp-btn-spinner--sm svg,
:is(button, a, [role="button"]).bp-button--sm .bp-btn-spinner svg,
:is(button, a, [role="button"])[data-size="sm"] .bp-btn-spinner svg,
:is(button, a, [role="button"]).bp-btn--sm .bp-btn-spinner svg {
    width: 13px !important;
    height: 13px !important;
}

:is(button, a, [role="button"]).is-loading .bp-btn-spinner.bp-btn-spinner--sm,
:is(button, a, [role="button"])[aria-busy="true"] .bp-btn-spinner.bp-btn-spinner--sm,
:is(button, a, [role="button"]).bp-button--sm.is-loading .bp-btn-spinner,
:is(button, a, [role="button"]).bp-button--sm[aria-busy="true"] .bp-btn-spinner,
:is(button, a, [role="button"])[data-size="sm"].is-loading .bp-btn-spinner,
:is(button, a, [role="button"])[data-size="sm"][aria-busy="true"] .bp-btn-spinner,
:is(button, a, [role="button"]).bp-btn--sm.is-loading .bp-btn-spinner,
:is(button, a, [role="button"]).bp-btn--sm[aria-busy="true"] .bp-btn-spinner {
    width: 13px !important;
    max-width: 13px !important;
    height: 13px !important;
    margin-right: 6px !important;
}

/* --- LARGE (18px) --- */
.bp-btn-spinner.bp-btn-spinner--lg {
    height: 18px !important;
}

.bp-btn-spinner.bp-btn-spinner--lg svg,
:is(button, a, [role="button"]).bp-button--lg .bp-btn-spinner svg,
:is(button, a, [role="button"])[data-size="lg"] .bp-btn-spinner svg,
:is(button, a, [role="button"]).bp-v40-main-cta .bp-btn-spinner svg,
:is(button, a, [role="button"]).bp-v40-order-now-btn .bp-btn-spinner svg,
:is(button, a, [role="button"]).bp-v40-btn-gradient .bp-btn-spinner svg,
:is(button, a, [role="button"]).bp-v16-btn-primary .bp-btn-spinner svg {
    width: 18px !important;
    height: 18px !important;
}

:is(button, a, [role="button"]).is-loading .bp-btn-spinner.bp-btn-spinner--lg,
:is(button, a, [role="button"])[aria-busy="true"] .bp-btn-spinner.bp-btn-spinner--lg,
:is(button, a, [role="button"]).bp-button--lg.is-loading .bp-btn-spinner,
:is(button, a, [role="button"]).bp-button--lg[aria-busy="true"] .bp-btn-spinner,
:is(button, a, [role="button"])[data-size="lg"].is-loading .bp-btn-spinner,
:is(button, a, [role="button"])[data-size="lg"][aria-busy="true"] .bp-btn-spinner,
:is(button, a, [role="button"]).bp-v40-main-cta.is-loading .bp-btn-spinner,
:is(button, a, [role="button"]).bp-v40-main-cta[aria-busy="true"] .bp-btn-spinner,
:is(button, a, [role="button"]).bp-v40-order-now-btn.is-loading .bp-btn-spinner,
:is(button, a, [role="button"]).bp-v40-order-now-btn[aria-busy="true"] .bp-btn-spinner,
:is(button, a, [role="button"]).bp-v40-btn-gradient.is-loading .bp-btn-spinner,
:is(button, a, [role="button"]).bp-v40-btn-gradient[aria-busy="true"] .bp-btn-spinner,
:is(button, a, [role="button"]).bp-v16-btn-primary.is-loading .bp-btn-spinner,
:is(button, a, [role="button"]).bp-v16-btn-primary[aria-busy="true"] .bp-btn-spinner {
    width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
}

/* ==========================================================================
   04. SPECIAL BUTTON INTEGRATIONS
   ========================================================================== */
/* In the V40 main CTA button with bolt and arrow: hide decorative icons during loading so text remains clean */
.bp-v40-main-cta.is-loading .bp-v40-main-cta__bolt,
.bp-v40-main-cta[aria-busy="true"] .bp-v40-main-cta__bolt {
    display: none !important;
}

/* Ensure button label is always visible and perfectly aligned */
[data-button-label],
.bp-btn-label {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* ==========================================================================
   05. ACCESSIBILITY: PREFERS-REDUCED-MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .bp-btn-spinner svg {
        animation: bp-button-pulse-reduced 1.8s ease-in-out infinite !important;
        transform: none !important;
    }
}