.banner-carousel-section {
  width: 100%;
  overflow: hidden;
  padding: 60px 0;
}

.banner-carousel-wrapper {
  width: 100%;
  max-width: calc(1420px + 40px);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.banner-carousel-container {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: var(--border-radius, 20px);
  overflow: hidden;
}

.banner-carousel-container.swiper {
  position: relative;
  overflow: hidden;
}

/* Swiper 容器 */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-wrapper {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  box-sizing: content-box;
}

.swiper-slide {
  width: 100% !important;
  height: 100%;
  flex-shrink: 0;
  position: relative;
}

/* 轮播指示器 */
.swiper-pagination {
  position: absolute !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  height: auto !important;
}

.swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  opacity: 1 !important;
  margin: 0 !important;
}

.swiper-pagination-bullet-active {
  width: 24px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 1) !important;
}

/* 轮播箭头 - 隐藏 */
.swiper-button-prev,
.swiper-button-next {
  display: none !important;
}

/* Mobile Responsive - 959px 断点 */
@media (max-width: 959px) {
  .banner-carousel-section {
    padding: 40px 0;
  }

  .banner-carousel-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 16px;
  }

  .banner-carousel-container {
    height: 508px;
  }

  .swiper-pagination {
    bottom: 12px !important;
    gap: 6px !important;
  }

  .swiper-pagination-bullet {
    width: 6px !important;
    height: 6px !important;
  }

  .swiper-pagination-bullet-active {
    width: 18px !important;
  }
}

