/* Loader animado */
.ajax-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

/* Notificación de éxito */
.ajax-success {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    animation: fadeInOut 3s ease-in-out;
}

/* Animación para desaparecer la notificación */
@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    10%, 90% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Estado mientras está cargando */
/* Estado normal (color inicial) */
.htheme_single_product_add_button {
    background-color: #FFB535 !important; /* Color inicial */
    color: #fff !important; /* Texto blanco */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Estado mientras está cargando */
.htheme_single_product_add_button.loading {
    background-color: #bb7b11 !important; /* Color de carga (más oscuro) */
    color: #fff !important; /* Texto blanco */
    pointer-events: none; /* Deshabilita el clic mientras carga */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Estado cuando se ha agregado con éxito */
.htheme_single_product_add_button.added {
    background-color: #28A745 !important; /* Verde oscuro */
    color: #fff !important; /* Texto blanco */
    pointer-events: none; /* Deshabilita el clic */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Imagen voladora */
.flying-image {
    pointer-events: none; /* Evita interacciones con la imagen */
    border-radius: 50%; /* Hace que la imagen tenga bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Efecto de sombra para resaltar */
    opacity: 1;
}

/* Contenedor del producto mientras se procesa */
.product-item-wrap.processing {
    border: 6px solid #dcdcdc !important; /* Borde de procesamiento */
    transition: border 0.3s ease; /* Suaviza el cambio */
}

/* Estado normal del contenedor */
.product-item-wrap {
    border: 2px solid transparent; /* Borde inicial (o ajústalo a tu diseño actual) */
    transition: border 0.3s ease; /* Suaviza el cambio de vuelta */
}