/* Ensure Ladda spinner is visible when loading */
.ladda-button[data-loading] .ladda-spinner {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Busy but not disabled — allows :hover while loading (see loader-btn.js) */
.ladda-button.ladda-busy {
    cursor: wait;
    pointer-events: auto;
}

@keyframes ladda-spinner-line-fade {
    0%, 100% {
        opacity: 0.25;
    }
    50% {
        opacity: 1;
    }
}

/* Outline buttons: black spinner at rest, white on hover (matches blue hover fill) */
.ladda-button.btn-outline[data-loading] .ladda-spinner > div {
    background: rgba(0, 0, 0, 0.22) !important;
}

.ladda-button.btn-outline[data-loading] .ladda-spinner > div > div {
    background-color: #000000 !important;
}

.ladda-button.btn-outline[data-loading]:hover .ladda-spinner > div,
.ladda-button.btn-outline[data-loading]:focus-visible .ladda-spinner > div {
    background: rgba(255, 255, 255, 0.22) !important;
}

.ladda-button.btn-outline[data-loading]:hover .ladda-spinner > div > div,
.ladda-button.btn-outline[data-loading]:focus-visible .ladda-spinner > div > div {
    background-color: #ffffff !important;
}

/* Light buttons: keep dark spinner even on hover */
.ladda-button.btn-light[data-loading]:hover .ladda-spinner > div > div,
.ladda-button.btn-light[data-loading]:focus-visible .ladda-spinner > div > div {
    background-color: #000000 !important;
}

.ladda-button.btn-light[data-loading]:hover .ladda-spinner > div,
.ladda-button.btn-light[data-loading]:focus-visible .ladda-spinner > div {
    background: rgba(0, 0, 0, 0.22) !important;
}

/* Filled / dark buttons: white spinner while loading */
.ladda-button.btn-primary[data-loading] .ladda-spinner > div > div,
.ladda-button.btn-secondary[data-loading] .ladda-spinner > div > div,
.ladda-button.btn-success[data-loading] .ladda-spinner > div > div,
.ladda-button.btn-danger[data-loading] .ladda-spinner > div > div,
.ladda-button.btn-info[data-loading] .ladda-spinner > div > div,
.ladda-button.btn-warning[data-loading] .ladda-spinner > div > div,
.ladda-button.btn-dark[data-loading] .ladda-spinner > div > div {
    background-color: #ffffff !important;
}

.ladda-button.btn-primary[data-loading] .ladda-spinner > div,
.ladda-button.btn-secondary[data-loading] .ladda-spinner > div,
.ladda-button.btn-success[data-loading] .ladda-spinner > div,
.ladda-button.btn-danger[data-loading] .ladda-spinner > div,
.ladda-button.btn-info[data-loading] .ladda-spinner > div,
.ladda-button.btn-warning[data-loading] .ladda-spinner > div,
.ladda-button.btn-dark[data-loading] .ladda-spinner > div {
    background: rgba(255, 255, 255, 0.22) !important;
}