/* Logo组件样式 */

/* Logo容器 - 水平排列多Logo */
.brand-container {
    display: flex;
    align-items: center;
    height: 36px;
    gap: 15px; /* Logo之间的间距 */
    flex-wrap: nowrap; /* 不换行，在一行内显示 */
    overflow-x: auto; /* 启用横向滚动 */
    scroll-snap-type: x mandatory; /* 磁性吸附效果 */
    -webkit-overflow-scrolling: touch; /* iOS 滑动平滑 */
    scrollbar-width: none; /* Firefox 隐藏滚动条 */
    -ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
}

/* 隐藏滚动条 */
.brand-container::-webkit-scrollbar {
    display: none;
}

/* 美化滚动条 - 已禁用，改为隐藏 */
/*
.brand-container::-webkit-scrollbar {
    height: 3px;
}

.brand-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.brand-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.brand-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
*/

/* Logo单项 */
.brand-item {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* 防止Logo被压缩 */
    scroll-snap-align: start; /* 磁性吸附起始位置 */
    scroll-snap-stop: always; /* 总是停在吸附点 */
}

/* Logo链接样式 */
.brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.brand-link:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* Logo图片样式 */
.brand-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.2s ease;
}

.brand-logo:hover {
    transform: scale(1.05);
}

/* 默认Logo占位符样式 */
.brand-placeholder {
    display: flex;
    align-items: center;
    height: 36px;
}

.default-logo {
    opacity: 0.7;
}

.default-logo:hover {
    opacity: 1;
    transform: none;
}

/* 响应式设计 */

/* 平板设备 */
@media (max-width: 992px) {
    .brand-container {
        gap: 12px;
    }
}

/* 移动设备 */
@media (max-width: 768px) {
    .brand-container {
        height: 30px;
        gap: 10px;
    }

    .brand-logo {
        height: 30px;
    }

    .brand-placeholder {
        height: 30px;
    }
}

/* 小屏移动设备 */
@media (max-width: 576px) {
    .brand-container {
        gap: 8px;
        padding: 0 4px; /* 添加左右内边距，防止Logo贴边 */
        position: relative; /* 为滑动提示定位提供参考 */
    }

    /* 允许Logo压缩以适应屏幕，确保4个Logo能完全显示 */
    .brand-item {
        flex-shrink: 1;
        min-width: 40px;
    }

    /* 确保图片自适应，使用高优先级选择器覆盖默认样式 */
    .brand-container .brand-logo {
        height: auto;
        max-height: 30px;
        max-width: 100%;
    }

    /* 移除隐藏Logo的规则，改为支持横向滚动 */
    /* .brand-item:nth-child(n+4) 规则已删除 */

    /* 隐藏滚动条但保持滚动功能 */
    .brand-container {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    .brand-container::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    /* 可选：显示滑动提示 */
    .brand-container::after {
        content: "← 滑动查看更多 →";
        display: none; /* 默认隐藏，可通过JavaScript在有滚动时显示 */
        font-size: 10px;
        color: #999;
        white-space: nowrap;
        opacity: 0.6;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.8);
        padding: 2px 6px;
        border-radius: 10px;
        pointer-events: none;
    }

    /* 当有滚动时显示提示（通过JavaScript添加类） */
    .brand-container.scroll-hint::after {
        display: block;
    }
}

/* Logo加载状态 */
.brand-loading {
    display: flex;
    align-items: center;
    height: 36px;
    color: #6c757d;
    font-size: 14px;
}

/* Logo错误状态 */
.brand-error {
    display: flex;
    align-items: center;
    height: 36px;
    color: #dc3545;
    font-size: 14px;
}

/* Logo为空时的样式 */
.brand-empty {
    display: flex;
    align-items: center;
    height: 36px;
    color: #6c757d;
    font-size: 14px;
    font-style: italic;
}

/* Logo动画效果 */
@keyframes logoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.brand-item {
    animation: logoFadeIn 0.3s ease-out;
}

/* 为每个Logo添加不同的延迟，创造渐进显示效果 */
.brand-item:nth-child(1) { animation-delay: 0.1s; }
.brand-item:nth-child(2) { animation-delay: 0.15s; }
.brand-item:nth-child(3) { animation-delay: 0.2s; }
.brand-item:nth-child(4) { animation-delay: 0.25s; }
.brand-item:nth-child(5) { animation-delay: 0.3s; }

/* Logo工具提示样式 */
.brand-link[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}

/* 确保Logo容器在导航栏中的正确位置 */
.navbar-brand .brand-container {
    margin: 0;
    padding: 0;
}