/* brand-slider-fixed-final.css */

/* 独立作用域 - 避免影响全局布局 */
.brand-slider-wrapper {
    /* 创建一个独立的CSS上下文 */
    all: initial;
    display: block;
    /* 重置可能继承的样式 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    box-sizing: border-box;
}

/* 确保内部元素不会继承外部样式 */
.brand-slider-wrapper *,
.brand-slider-wrapper *::before,
.brand-slider-wrapper *::after {
    box-sizing: border-box;
}

/* 轮播图容器样式 - 透明背景 */
.brand-slider-wrapper .brand-slider-container {
    max-width: 1400px; /* 增加最大宽度以容纳更多品牌 */
    margin: 0 auto;
    padding: 2rem 1rem;
    background-color: transparent; /* 透明背景 */
}

/* 标题样式 */
.brand-slider-wrapper .section-title {
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 600;
    font-size: 2rem;
    color: #333;
}

/* 连续轮播容器 */
.brand-slider-wrapper .continuous-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    background-color: transparent;
    padding: 1rem 0;
}

.brand-slider-wrapper .continuous-slider:active {
    cursor: grabbing;
}

/* 轮播轨道 */
.brand-slider-wrapper .slider-track {
    display: flex;
    align-items: center;
    transition: transform 0.5s ease-out;
    will-change: transform;
    width: max-content; /* 根据内容自动调整宽度 */
}

/* 商标项目样式 - 固定宽度，每行8个 */
.brand-slider-wrapper .brand-item {
    flex: 0 0 150px; /* 固定宽度，确保每行8个 */
    text-align: center;
    padding: 0.5rem;
    margin: 0 0.5rem;
    transition: transform 0.3s ease;
    min-width: 0; /* 防止flex项目溢出 */
}

.brand-slider-wrapper .brand-item:hover {
    transform: translateY(-5px);
}

.brand-slider-wrapper .brand-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
}

/* 品牌图标 - 随机颜色 */
.brand-slider-wrapper .brand-logo {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* 为不同的品牌图标设置不同颜色 - 使用循环的8种颜色 */
.brand-slider-wrapper .brand-item[data-color="1"] .brand-logo {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}
.brand-slider-wrapper .brand-item[data-color="2"] .brand-logo {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.brand-slider-wrapper .brand-item[data-color="3"] .brand-logo {
    background: linear-gradient(135deg, #fc466b 0%, #3f5efb 100%);
}
.brand-slider-wrapper .brand-item[data-color="4"] .brand-logo {
    background: linear-gradient(135deg, #f46b45 0%, #eea849 100%);
}
.brand-slider-wrapper .brand-item[data-color="5"] .brand-logo {
    background: linear-gradient(135deg, #5f2c82 0%, #49a09d 100%);
}
.brand-slider-wrapper .brand-item[data-color="6"] .brand-logo {
    background: linear-gradient(135deg, #f857a6 0%, #ff5858 100%);
}
.brand-slider-wrapper .brand-item[data-color="7"] .brand-logo {
    background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);
}
.brand-slider-wrapper .brand-item[data-color="0"] .brand-logo {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.brand-slider-wrapper .brand-item:hover .brand-logo {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.brand-slider-wrapper .brand-name {
    margin-top: 0.5rem;
    font-weight: 500;
    color: #333;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 响应式调整 */
@media (max-width: 1400px) {
    .brand-slider-wrapper .brand-item {
        flex: 0 0 130px; /* 中等屏幕调整宽度 */
    }
    
    .brand-slider-wrapper .brand-logo {
        width: 90px;
        height: 90px;
        font-size: 2.2rem;
    }
}

@media (max-width: 1200px) {
    .brand-slider-wrapper .brand-slider-container {
        max-width: 1000px;
    }
    
    .brand-slider-wrapper .brand-item {
        flex: 0 0 110px; /* 小桌面调整宽度 */
    }
    
    .brand-slider-wrapper .brand-logo {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
}

@media (max-width: 992px) {
    .brand-slider-wrapper .brand-slider-container {
        max-width: 800px;
    }
    
    .brand-slider-wrapper .brand-item {
        flex: 0 0 90px; /* 平板调整宽度，每行8个 */
    }
    
    .brand-slider-wrapper .brand-logo {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }
    
    .brand-slider-wrapper .section-title {
        font-size: 1.8rem;
    }
    
    .brand-slider-wrapper .brand-name {
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .brand-slider-wrapper .brand-slider-container {
        max-width: 600px;
    }
    
    .brand-slider-wrapper .brand-item {
        flex: 0 0 70px; /* 小平板调整宽度，每行8个 */
    }
    
    .brand-slider-wrapper .brand-logo {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .brand-slider-wrapper .section-title {
        font-size: 1.5rem;
    }
    
    .brand-slider-wrapper .brand-name {
        font-size: 0.7rem;
    }
}

@media (max-width: 576px) {
    .brand-slider-wrapper .brand-item {
        flex: 0 0 60px; /* 手机调整宽度，每行8个 */
    }
    
    .brand-slider-wrapper .brand-logo {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
    
    .brand-slider-wrapper .section-title {
        font-size: 1.3rem;
    }
    
    .brand-slider-wrapper .brand-name {
        font-size: 0.6rem;
    }
}