/* 轮播容器：强制固定宽度 */
.custom-carousel-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    height: 460px;
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 100%; /* 防止超出视口 */
}

/* 滚动区：自适应子元素但不撑大父容器 */
.custom-carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
    height: 100%;
    width: fit-content;
    min-width: 100%;
}

/* 轮播项：强制固定宽度，禁用所有伸缩 */
.custom-carousel-item {
    flex: 0 0 auto !important;
    padding: 0 5px;
    height: 100%;
    box-sizing: border-box;
    min-width: 0 !important;
}

/* 内容容器：锁死宽度，溢出隐藏 */
.custom-carousel-item-content {
    width: 100% !important;
    height: 100%;
    overflow: hidden !important;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
}

/* 圆点容器 */
.custom-carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 999;
}


/* 圆点样式（增强对比度 + 强制显示，优先级最高） */
.custom-carousel-dot {
    width: 10px ; /* 强制宽度，覆盖全局样式 */
    height: 10px ; /* 强制高度，覆盖全局样式 */
    border-radius: 50% ; /* 强制圆形 */
    background: #666 ;
    cursor: pointer ;
    transition: all 0.3s ease ;
    border: 1px solid rgba(255,255,255,0.3) ;
    display: inline-block ; /* 强制行内块，确保宽高生效 */
    margin: 0 4px ; /* 圆点之间的间距，避免重叠 */
    padding: 0 ; /* 清空内边距，保证圆形完整 */
    box-sizing: border-box ; /* 边框纳入宽高计算 */
}

.custom-carousel-dot.active {
    background: #fff ;
    transform: scale(1.2) ; /* 强制放大 */
    box-shadow: 0 0 5px rgba(255,255,255,0.8) ;
    z-index: 999 ; /* 确保激活态圆点在最上层 */
}

/* 箭头样式 */
.custom-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 60px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 4px;
}
.custom-carousel-arrow.prev { left: 10px; }
.custom-carousel-arrow.next { right: 10px; }
.custom-carousel-container:hover .custom-carousel-arrow { opacity: 1; }
.custom-carousel-arrow:hover { background: rgba(0,0,0,0.7); }

/* hover容器时显示箭头 */
.custom-carousel-container:hover .slider-arrow {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}