/********************************************************************
 * 统一轮播图指示器样式文件
 * 功能：统一所有轮播图指示器为标准样式
 * 创建时间：2025-08-08
 * 作者：开发团队
 ********************************************************************/

/********************************************************************
 * 基础指示器样式 - 统一所有轮播图指示器
 ********************************************************************/

/* 指示器容器基础样式 */
.carousel-indicators {
    position: absolute !important;
    right: 0 !important;
    bottom: 20px !important;
    left: 0 !important;
    z-index: 15 !important;
    display: flex !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
    list-style: none !important;
}

/* 指示器按钮统一样式 */
.carousel-indicators button,
.carousel-indicators [data-bs-slide-to] {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    margin: 0 8px !important;
    background-color: rgba(255, 255, 255, 0.6) !important; /* 增加透明度 */
    border: 3px solid rgba(255, 255, 255, 0.9) !important; /* 增加边框宽度和透明度 */
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; /* 添加阴影增强可见性 */
}

/* 指示器激活状态 */
.carousel-indicators button.active,
.carousel-indicators [data-bs-slide-to].active {
    background-color: #fff !important;
    transform: scale(1.3) !important; /* 增大激活状态的缩放 */
    border-color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; /* 增强激活状态的阴影 */
}

/* 指示器悬停状态 */
.carousel-indicators button:hover,
.carousel-indicators [data-bs-slide-to]:hover {
    background-color: rgba(255, 255, 255, 0.8) !important; /* 增加悬停透明度 */
    transform: scale(1.2) !important; /* 增大悬停缩放 */
    border-color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important; /* 增强悬停阴影 */
}

/* 指示器焦点状态 */
.carousel-indicators button:focus,
.carousel-indicators [data-bs-slide-to]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5) !important;
}

/********************************************************************
 * 针对不同轮播图容器的特定样式
 ********************************************************************/

/* 主横幅轮播图指示器 */
#heroCarousel .carousel-indicators {
    bottom: 30px !important;
}

/* 产品轮播图指示器 */
.productCarousel .carousel-indicators,
#c38Carousel .carousel-indicators,
#c72sCarousel .carousel-indicators,
#x01Carousel .carousel-indicators,
#w19Carousel .carousel-indicators,
#f11Carousel .carousel-indicators,
#t66Carousel .carousel-indicators,
#productCarousel .carousel-indicators,
#c02ProductCarousel .carousel-indicators,
.modal-carousel .carousel-indicators {
    bottom: 15px !important;
}

/* 覆盖style.css中的特定样式 */
#productCarousel .carousel-indicators button {
    width: 20px !important;
    height: 20px !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    opacity: 0.8 !important;
    margin: 0 5px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

#productCarousel .carousel-indicators button.active {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

#productCarousel .carousel-indicators button:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.2) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
}

/* 覆盖c02-carousel-styles.css中的特定样式 */
#c02ProductCarousel .carousel-indicators [data-bs-target] {
    width: 20px !important;
    height: 20px !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    opacity: 0.8 !important;
    margin: 0 5px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

#c02ProductCarousel .carousel-indicators [data-bs-target].active {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
}

#c02ProductCarousel .carousel-indicators [data-bs-target]:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.2) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
}

/* 模态框内轮播图指示器 */
.modal .carousel-indicators {
    bottom: 10px !important;
}

/********************************************************************
 * 移动端适配
 ********************************************************************/

@media (max-width: 768px) {
    .carousel-indicators {
        bottom: 15px !important;
    }
    
    .carousel-indicators button,
    .carousel-indicators [data-bs-slide-to] {
        width: 16px !important;
        height: 16px !important;
        margin: 0 6px !important;
    }
    
    .carousel-indicators button.active,
    .carousel-indicators [data-bs-slide-to].active {
        transform: scale(1.3) !important;
    }
    
    /* 移动端特定轮播图指示器 */
    #heroCarousel .carousel-indicators {
        bottom: 20px !important;
    }
    
    .productCarousel .carousel-indicators,
    #c38Carousel .carousel-indicators,
    #c72sCarousel .carousel-indicators,
    #x01Carousel .carousel-indicators,
    #w19Carousel .carousel-indicators,
    #f11Carousel .carousel-indicators,
    #t66Carousel .carousel-indicators {
        bottom: 10px !important;
    }
}

@media (max-width: 576px) {
    .carousel-indicators {
        bottom: 10px !important;
    }
    
    .carousel-indicators button,
    .carousel-indicators [data-bs-slide-to] {
        width: 14px !important;
        height: 14px !important;
        margin: 0 4px !important;
    }
}

/********************************************************************
 * 覆盖原有样式 - 确保统一性
 ********************************************************************/

/* 覆盖自定义选择器样式 */
.custom-carousel-selector,
.selector-container,
.selector-item,
.selector-thumb {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* 覆盖其他CSS文件中的指示器样式 */
.carousel-indicators button[style*="background-color"],
.carousel-indicators [data-bs-slide-to][style*="background-color"] {
    background-color: rgba(255, 255, 255, 0.4) !important;
}

.carousel-indicators button[style*="border"],
.carousel-indicators [data-bs-slide-to][style*="border"] {
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
}

/* 确保所有轮播图使用统一样式 */
* .carousel-indicators {
    all: unset !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 20px !important;
    left: 0 !important;
    z-index: 15 !important;
    display: flex !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
    list-style: none !important;
}

/********************************************************************
 * 辅助功能增强
 ********************************************************************/

/* 屏幕阅读器支持 */
.carousel-indicators button::after {
    content: "" !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 50% !important;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .carousel-indicators button,
    .carousel-indicators [data-bs-slide-to] {
        border-width: 3px !important;
    }
    
    .carousel-indicators button.active,
    .carousel-indicators [data-bs-slide-to].active {
        border-width: 4px !important;
    }
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
    .carousel-indicators button,
    .carousel-indicators [data-bs-slide-to] {
        transition: none !important;
    }
}

/* 覆盖其他CSS文件中的特定样式 */
/* 覆盖mobile-layout-fix.css中的样式 */
#w19Modal #w19Carousel .carousel-indicators button,
#f11Modal #f11Carousel .carousel-indicators button,
#w19Modal #w19Carousel .carousel-indicators [data-bs-target],
#f11Modal #f11Carousel .carousel-indicators [data-bs-target] {
    width: 20px !important;
    height: 20px !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    opacity: 0.8 !important;
    margin: 0 5px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

#w19Modal #w19Carousel .carousel-indicators button.active,
#f11Modal #f11Carousel .carousel-indicators button.active,
#w19Modal #w19Carousel .carousel-indicators [data-bs-target].active,
#f11Modal #f11Carousel .carousel-indicators [data-bs-target].active {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* 覆盖w19-mobile-styles.css中的样式 */
#w19Carousel .carousel-indicators button {
    width: 20px !important;
    height: 20px !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    opacity: 0.8 !important;
    margin: 0 5px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

#w19Carousel .carousel-indicators button.active {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* 覆盖c72s-x01-carousel-indicators-fix.css中的样式 */
#c72sModal #c72sCarousel .carousel-indicators button,
#x01Modal #x01Carousel .carousel-indicators button {
    width: 20px !important;
    height: 20px !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    opacity: 0.8 !important;
    margin: 0 5px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

#c72sModal #c72sCarousel .carousel-indicators button.active,
#x01Modal #x01Carousel .carousel-indicators button.active {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* 覆盖x01-carousel-fix.css中的样式 */
#x01Modal #x01Carousel .carousel-indicators button {
    width: 20px !important;
    height: 20px !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    opacity: 0.8 !important;
    margin: 0 5px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* 覆盖carousel-slide-animation.css中的样式 */
.carousel-indicators [data-bs-target] {
    width: 20px !important;
    height: 20px !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    opacity: 0.8 !important;
    margin: 0 5px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.carousel-indicators [data-bs-target].active {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* 覆盖enhanced-carousel-hover.css中的样式 */
.carousel .carousel-indicators [data-bs-target] {
    width: 20px !important;
    height: 20px !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    opacity: 0.8 !important;
    margin: 0 5px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.carousel .carousel-indicators [data-bs-target].active {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}