/* 精品推荐页面样式 */
.recommend-car-list {
  width: 100%;
  box-sizing: border-box;
  
  /* 滚动条样式 */
  &::-webkit-scrollbar {
    width: 6rpx;
  }
  
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3rpx;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3rpx;
    
    &:hover {
      background: #a8a8a8;
    }
  }
}

/* 车辆卡片样式 */
.recommend-car-list .bg-white {
  background-color: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 24rpx;
  transition: all 0.3s ease;
}

.recommend-car-list .bg-white:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
  border-color: #e5e7eb;
}

.recommend-car-list .bg-white:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* 车辆图片容器 */
.recommend-car-list .w-32 {
  width: 200rpx;
  height: 150rpx;
  flex-shrink: 0;
}

.recommend-car-list image {
  border-radius: 12rpx;
  object-fit: cover;
}

/* 推荐标识样式优化 */
.recommend-car-list .absolute.bottom-3.right-3 {
  background: linear-gradient(45deg, #ef4444, #dc2626);
  box-shadow: 0 2rpx 4rpx rgba(239, 68, 68, 0.3);
  border-radius: 8rpx;
  padding: 4rpx 8rpx;
  font-size: 20rpx;
  font-weight: 600;
}

/* 车辆信息区域 */
.recommend-car-list .flex-1 {
  flex: 1;
  min-width: 0;
}

/* 收藏按钮样式 */
.recommend-car-list .absolute {
  transition: transform 0.2s ease;
}

.recommend-car-list .absolute:active {
  transform: scale(0.9);
}

/* 价格样式 */
.recommend-car-list .text-orange-500 {
  color: #f97316;
  font-weight: bold;
}

/* 推荐理由样式 */
.recommend-car-list .text-green-600 {
  color: #10b981;
  font-weight: 500;
}

/* 文字省略 */
.recommend-car-list .font-medium {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 加载状态样式 */
.loading-container {
  padding: 32rpx 0 100rpx 0; /* 增加底部间距避免被TabBar遮挡 */
  text-align: center;
  
  .loading-text {
    color: #9ca3af;
    font-size: 28rpx;
  }
}

/* 无更多数据样式 */
.no-more-container {
  padding: 32rpx 0 100rpx 0; /* 增加底部间距避免被TabBar遮挡 */
  text-align: center;
  
  text {
    color: #d1d5db;
    font-size: 24rpx;
  }
}

/* 动画效果 */
.recommend-car-list .bg-white {
  animation: fadeInUp 0.3s ease-out;
}

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

/* 响应式适配 */
@media screen and (max-width: 750rpx) {
  .recommend-car-list .w-32 {
    width: 180rpx;
    height: 135rpx;
  }

  .recommend-car-list .text-xl {
    font-size: 32rpx;
  }

  .recommend-car-list .text-sm {
    font-size: 24rpx;
  }

  .recommend-car-list .text-xs {
    font-size: 20rpx;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .recommend-car-list .bg-white {
    background-color: #1f2937;
    border-color: #374151;
  }

  .recommend-car-list .text-gray-600 {
    color: #9ca3af;
  }

  .recommend-car-list .text-gray-500 {
    color: #6b7280;
  }

  .recommend-car-list .text-gray-400 {
    color: #9ca3af;
  }
}

/* NutUI组件样式覆盖 */
:deep(.nut-sticky) {
  z-index: 999;
}

:deep(.nut-searchbar) {
  .nut-searchbar__content {
    border-radius: 50rpx;
    background: #fff;
    
    .nut-searchbar__input {
      font-size: 28rpx;
      color: #374151;
      
      &::placeholder {
        color: #9ca3af;
      }
    }
  }
}

:deep(.nut-menu) {
  background: #fff;
  border-bottom: 1rpx solid #e5e7eb;
  
  .nut-menu__item {
    font-size: 28rpx;
    color: #374151;
    
    &.active {
      color: #f97316;
    }
  }
  
  .nut-menu__title {
    font-size: 28rpx;
    
    &::after {
      border-color: #9ca3af;
    }
  }
}

:deep(.nut-toast) {
  .nut-toast__inner {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 16rpx;
    font-size: 28rpx;
  }
}

/* 响应式适配 */
@media (max-width: 750rpx) {
  .car-image-container {
    width: 200rpx;
    height: 150rpx;
    padding: 12rpx;
  }
  
  .car-info {
    padding: 20rpx;
    
    .car-name {
      font-size: 26rpx;
    }
    
    .car-details {
      font-size: 22rpx;
    }
    
    .car-price {
      font-size: 28rpx;
    }
    
    .car-school {
      font-size: 20rpx;
    }
    
    .listing-time {
      font-size: 20rpx;
    }
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .car-card {
    background: #1f2937;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
    
    &:hover {
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.4);
    }
  }
  
  .car-info {
    .car-name {
      color: #f9fafb;
    }
    
    .car-details {
      color: #d1d5db;
    }
    
    .car-school {
      color: #9ca3af;
    }
  }
  
  .loading-container .loading-text {
    color: #6b7280;
  }
  
  .no-more-container text {
    color: #4b5563;
  }
}