/* Featured Cars Styles */
.featured-cars-section {
  @apply py-20 bg-white;
}

.featured-cars-container {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.featured-cars-header {
  @apply text-center mb-16;
}

.featured-cars-title {
  @apply text-4xl md:text-5xl font-bold text-gray-900 mb-4;
}

.featured-cars-subtitle {
  @apply text-xl text-gray-600 max-w-3xl mx-auto mb-8;
}

.featured-cars-filters {
  @apply flex flex-wrap justify-center gap-4;
}

.filter-button {
  @apply px-6 py-2 rounded-full text-sm font-medium transition-colors;
}

.filter-button-active {
  @apply bg-blue-600 text-white hover:bg-blue-700;
}

.filter-button-inactive {
  @apply bg-gray-100 text-gray-700 hover:bg-gray-200;
}

.featured-cars-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8;
}

.car-card {
  @apply bg-white rounded-xl border border-gray-200 hover:border-gray-300 hover:shadow-lg transition-all duration-300 overflow-hidden group cursor-pointer;
}

.car-image-container {
  @apply relative h-56 overflow-hidden;
  /* 确保容器有背景色，避免显示黑色 */
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.car-image {
  @apply w-full h-full object-cover;
  /* 图片加载时显示背景色而不是黑色 */
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.car-placeholder {
  @apply w-full h-full flex items-center justify-center;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.car-placeholder-icon {
  @apply w-16 h-16 text-gray-400;
}

.car-price-badge {
  @apply absolute top-4 right-4 bg-white/90 backdrop-blur-sm text-gray-900 px-3 py-1 rounded-lg text-sm font-bold shadow-sm;
}

.car-brand-badge {
  @apply absolute top-4 left-4 bg-blue-600 text-white px-2 py-1 rounded text-xs font-medium;
}

.car-info {
  @apply p-5;
}

.car-title {
  @apply text-lg font-bold text-gray-900 mb-3 line-clamp-1;
}

.car-details {
  @apply space-y-2 mb-4;
}

.car-detail {
  @apply flex items-center text-gray-600 text-sm;
}

.car-detail-icon {
  @apply w-4 h-4 mr-2 text-gray-400;
}

.car-footer {
  @apply flex justify-between items-center pt-3 border-t border-gray-100;
}

.car-transmission {
  @apply text-sm text-gray-500;
}

.car-view-button {
  @apply bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors duration-200 text-sm font-medium;
}

.no-cars-container {
  @apply text-center py-16;
}

.no-cars-icon {
  @apply w-24 h-24 text-gray-300 mx-auto mb-4;
}

.no-cars-title {
  @apply text-2xl font-semibold text-gray-500 mb-2;
}

.no-cars-subtitle {
  @apply text-gray-400;
}

.view-more-container {
  @apply text-center mt-16;
}

.view-more-button {
  @apply bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold text-lg hover:bg-blue-700 transition-colors duration-200 shadow-sm hover:shadow-md;
}

.car-image {
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease-in-out;
}

.car-image.loaded {
  opacity: 1;
}

/* For images that already have src (not lazy loaded) */
.car-image[src]:not([src=""]) {
  opacity: 1;
}