/* /assets/css/app.css — Public frontend styles */

/* Alpine.js cloak */
[x-cloak] { display: none !important; }

/* Smooth transitions for Alpine */
.slide-enter { transform: translateY(-10px); opacity: 0; }
.slide-enter-active { transition: all 0.2s ease-out; }

/* Price styling */
.price-tag { color: #1e40af; font-weight: 700; }
.price-original { text-decoration: line-through; color: #9ca3af; }

/* Card hover lift effect */
.card-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(0,0,0,0.12); }

/* Toast animations */
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

/* Cart badge flip/bounce animation */
@keyframes cartBadgeBump {
    0% { transform: scale(1) rotateY(0); }
    30% { transform: scale(1.4) rotateY(90deg); }
    60% { transform: scale(1.1) rotateY(180deg); }
    80% { transform: scale(1.2) rotateY(270deg); }
    100% { transform: scale(1) rotateY(360deg); }
}
.cart-badge-bump { animation: cartBadgeBump 0.5s ease-in-out; }
.toast-in { animation: slideIn 0.3s ease-out; }
.toast-out { animation: slideOut 0.3s ease-in forwards; }