/* Cuisine Display Styles */

/* Primary cuisine chip styles */
.cuisine-primary {
    @apply inline-flex items-center rounded-full bg-gradient-to-r from-papaya-orange to-yellow-orange text-white font-medium shadow-sm;
    transition: all 0.3s ease;
}

.cuisine-primary:hover {
    @apply shadow-md;
    transform: translateY(-1px);
}

/* Secondary cuisine chip styles */
.cuisine-secondary {
    @apply inline-flex items-center rounded-full bg-gray-100 text-gray-700 font-medium border border-gray-200;
    transition: all 0.3s ease;
}

.cuisine-secondary:hover {
    @apply bg-gray-200 border-gray-300;
}

/* Responsive sizing for cuisine chips */
.cuisine-chip-sm {
    @apply px-2 py-0.5 text-xs;
}

.cuisine-chip-md {
    @apply px-3 py-1 text-sm;
}

.cuisine-chip-lg {
    @apply px-4 py-2 text-base;
}

/* Cuisine container responsive styles */
.cuisine-container {
    @apply flex flex-wrap items-center gap-2;
}

/* Mobile-first responsive adjustments */
@media (max-width: 640px) {
    .cuisine-container {
        @apply justify-center;
    }
    
    .cuisine-primary {
        @apply px-3 py-1 text-sm;
    }
    
    .cuisine-secondary {
        @apply px-2 py-0.5 text-xs;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .cuisine-primary {
        @apply px-3 py-1 text-sm;
    }
    
    .cuisine-secondary {
        @apply px-2 py-1 text-xs;
    }
}

@media (min-width: 769px) {
    .cuisine-primary {
        @apply px-4 py-2 text-base;
    }
    
    .cuisine-secondary {
        @apply px-3 py-1 text-sm;
    }
}

/* Animation for cuisine chips */
.cuisine-chip-animate {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation for multiple chips */
.cuisine-chip-animate:nth-child(1) { animation-delay: 0s; }
.cuisine-chip-animate:nth-child(2) { animation-delay: 0.1s; }
.cuisine-chip-animate:nth-child(3) { animation-delay: 0.2s; }