/**
 * 轮播图修复样式
 * 解决移动端和桌面端轮播图显示问题
 */

/* 确保轮播图容器正确显示 */
.carousel-container {
  position: relative !important;
  width: 100% !important;
  height: 450px !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  z-index: 1 !important;
}

/* Hero区域特殊样式 */
.hero-carousel.carousel-container {
  width: 90% !important;
  max-width: 1200px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  height: 450px !important;
  margin: 20px auto !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

/* 确保轮播图轨道正确显示 */
.carousel-track {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

/* 确保轮播图项目正确显示 */
.carousel-item {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease-in-out !important;
  z-index: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

/* 确保轮播图链接正确显示 */
.carousel-item a {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 确保活动轮播图项目正确显示 */
.carousel-item.active {
  opacity: 1 !important;
  z-index: 2 !important;
}

/* 确保轮播图图片正确显示 */
.carousel-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.5s ease !important;
}

/* 确保轮播图控制按钮正确显示 */
.carousel-control {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  cursor: pointer !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.3s ease !important;
}

/* 确保轮播图控制按钮悬停效果正确显示 */
.carousel-control:hover {
  background: rgba(255, 255, 255, 0.8) !important;
}

/* 确保轮播图上一张按钮正确显示 */
.carousel-control.prev {
  left: 15px !important;
}

/* 确保轮播图下一张按钮正确显示 */
.carousel-control.next {
  right: 15px !important;
}

/* 确保轮播图指示器正确显示 */
.carousel-indicators {
  position: absolute !important;
  bottom: 15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 3 !important;
}

/* 确保轮播图指示器按钮正确显示 */
.carousel-indicator {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.3s ease !important;
}

/* 确保轮播图指示器活动按钮正确显示 */
.carousel-indicator.active {
  background: white !important;
  transform: scale(1.2) !important;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .carousel-container {
    height: 250px !important;
  }
  
  .hero-carousel.carousel-container {
    width: 95% !important;
    height: 280px !important;
    border-radius: 6px !important;
  }
  
  .carousel-control {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }
  
  .carousel-indicators {
    bottom: 10px !important;
  }
  
  .carousel-indicator {
    width: 8px !important;
    height: 8px !important;
  }
}

/* 手机端适配 */
@media (max-width: 480px) {
  .carousel-container {
    height: 200px !important;
  }
  
  .hero-carousel.carousel-container {
    width: 100% !important;
    height: 230px !important;
    border-radius: 0 !important;
    margin: 10px auto !important;
  }
  
  .carousel-control {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }
  
  .carousel-indicators {
    bottom: 5px !important;
  }
  
  .carousel-indicator {
    width: 6px !important;
    height: 6px !important;
  }
}