/* Estilos para el indicador de carga */
.bixxus-loading {
    position: relative !important;
    pointer-events: none !important;
    opacity: 0.8 !important;
}

.bixxus-loading::after {
    content: "";
    position: absolute;
    top: calc(50% - 10px);
    right: 10px;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: bixxus-spin 0.8s linear infinite;
}

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

/* Para cuando el botón es pequeño o tiene poco padding */
.bixxus-loading.bixxus-loading-compact::after {
    width: 14px;
    height: 14px;
    right: 8px;
    top: calc(50% - 7px);
}

/* Para botones pequeños o secundarios */
.bixxus-secondary-wizard-button.bixxus-loading::after {
    width: 14px;
    height: 14px;
    right: 6px;
    top: calc(50% - 7px);
}

/* Estilos adicionales para ajustar el texto durante la carga */
.bixxus-loading span.bixxus-btn-text {
    margin-right: 25px; /* Espacio para el spinner */
    display: inline-block;
}

/* Para login modal - spinner centrado */
#bixxus-login-form button.bixxus-loading::after {
    top: calc(50% - 10px);
    right: calc(50% - 30px);
}