/* Enhanced animations and effects for the sugar-free finder app */

@keyframes fizz {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(34, 197, 94, 0.3); }
    50% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.6); }
}

.animate-fizz {
    animation: fizz 2s ease-in-out infinite;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

/* Custom scrollbar for better UX */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #22c55e;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #16a34a;
}

/* Enhanced focus states for accessibility */
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #22c55e;
    outline-offset: 2px;
}

/* Improved loading state for images */
img {
    transition: opacity 0.3s ease;
}

img[src=""] {
    opacity: 0.5;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Energy drink themed elements */
.energy-glow {
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.cola-themed {
    background: linear-gradient(135deg, #dc2626, #991b1b);
}

.pepsi-themed {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.monster-themed {
    background: linear-gradient(135deg, #22c55e, #15803d);
}

/* Responsive improvements */
@media (max-width: 768px) {
    .grid-cols-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    .text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}

/* Print styles for shopping lists */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-friendly {
        background: white !important;
        color: black !important;
    }
}