/* 轮播容器 - 精简+兼容优化 */
.yd-carousel-container {
  position: relative;
  width: 100%;
  overflow: auto hidden;
  -webkit-scroll-behavior: auto;
  scroll-behavior: auto;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

/* 滚动条样式 - 响应式隐藏 */
.yd-carousel-container::-webkit-scrollbar {
  height: 6px;
}
.yd-carousel-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

/* 轮播包裹层 */
.yd-carousel-wrapper {
  display: flex;
  -ms-touch-action: pan-x;
  touch-action: pan-x pinch-zoom;
}

/* 轮播项 */
.yd-carousel-item {
  flex-shrink: 0;
  padding-right: 0.55555vw;
}

/* 轮播图片 */
.yd-carousel-image {
  width: 100%;
  height: auto;
  max-height: 450px;
  object-fit: cover;
  border-radius: 13px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: zoom-in;
}

/* 轮播视频 */
.yd-carousel-video {
  width: 100%;
  height: auto;
  max-height: 450px;
  object-fit: cover;
  border-radius: 13px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: #000;
}

/* 响应式适配 */
@media (max-width: 850px) {
  .yd-carousel-container::-webkit-scrollbar {
    height: 0px;
  }
  .yd-carousel-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.0);
    border-radius: 0px;
  }
  .yd-carousel-image,
  .yd-carousel-video {
    max-height: 66.6666vw;
  }
}

/* 图片查看器 */
.yd-image-viewer {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  cursor: zoom-out;
}

.yd-image-viewer.active {
  display: flex;
}

/* 查看器内容容器 */
.yd-viewer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  max-height: 100%;
}

.yd-viewer-content img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.yd-viewer-content video {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  background: #000;
}

/* 查看器导航按钮 */
.yd-viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0.7;
}

.yd-viewer-nav:hover {
  opacity: 1;
}

.yd-viewer-nav.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.yd-viewer-prev {
  left: 20px;
}

.yd-viewer-next {
  right: 20px;
}