/* Ocultar scrollbar pero permitir scroll */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Animaciones del Modal */
@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#checkout-modal:not(.hidden) #modal-backdrop {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Ajustes para input de números tipo "Spinbox" */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* --- Animaciones para las Notificaciones --- */

/* Animación de entrada suave (Fade In) */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Animación de escala (Pop up) */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.animate-scale-in {
    animation: scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; /* Efecto rebote suave */
}

/* Pequeño rebote para el icono */
@keyframes bounceShort {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-bounce-short {
    animation: bounceShort 1s ease-in-out infinite;
}