/* Search and Filter Styles */
.search-input {
    @apply w-full h-12 pl-12 pr-4 rounded-xl border border-gray-200 focus:outline-none transition-all duration-200;
}

.search-input:focus {
    @apply border-indigo-500 ring-2 ring-indigo-500 ring-opacity-20;
}

/* Category Card Styles */
.category-card {
    @apply flex flex-col items-center p-4 rounded-xl border border-gray-200 hover:border-indigo-500 hover:bg-indigo-50 transition-all duration-200;
}

.category-card i {
    @apply text-2xl text-gray-600 mb-2 transition-all duration-200;
}

.category-card:hover i {
    @apply text-indigo-600 transform scale-110;
}

/* Listing Card Styles */
.listing-card {
    @apply bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-all duration-200;
}

.listing-image {
    @apply w-full h-48 object-cover transition-all duration-200;
}

.listing-card:hover .listing-image {
    @apply transform scale-105;
}

.favorite-button {
    @apply absolute top-3 right-3 w-8 h-8 rounded-full bg-white shadow-md flex items-center justify-center hover:bg-gray-100 transition-all duration-200;
}

.favorite-button i {
    @apply text-gray-600 transition-all duration-200;
}

.favorite-button:hover i {
    @apply text-red-500 transform scale-110;
}

/* Filter Button Styles */
.filter-button {
    @apply px-4 py-2 border border-gray-200 rounded-lg flex items-center gap-2 hover:bg-gray-50 transition-all duration-200;
}

.filter-button i {
    @apply text-gray-600 transition-all duration-200;
}

.filter-button:hover i {
    @apply text-indigo-600;
}

/* Load More Button */
.load-more-button {
    @apply px-6 py-3 border border-gray-300 rounded-xl text-gray-700 hover:bg-gray-50 font-medium transition-all duration-200;
}

.load-more-button:hover {
    @apply border-indigo-500 text-indigo-600 transform -translate-y-0.5;
}

/* Animation for new items loading */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.3s ease-out;
}

/* Price tag animation */
.price-tag {
    @apply text-lg font-bold text-gray-900 transition-all duration-200;
}

.listing-card:hover .price-tag {
    @apply text-indigo-600 transform scale-105;
}

/* Location icon animation */
.location-icon {
    @apply text-gray-500 transition-all duration-200;
}

.listing-card:hover .location-icon {
    @apply text-indigo-600;