/* 首页banner的css样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: #f5f5f5;
}

/* banner 容器 - 普通文档流，不再fixed，移除视差 */
.banner-container {
    position: relative;
    width: 100%;
    background-color: #1a1a1a;
    z-index: 5;
    /* 新增：定义颜色变量，方便JS动态赋值适配 */
    --banner-arrow-color: #fff;
    --banner-dot-color: #fff;
}

/* swiper 主体 */
.banner-swiper {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.banner-swiper .swiper-slide {
    width: 100%;
    height: auto;
    background-color: #222;
    position: relative;
    overflow: hidden;
}

.banner-container.banner-aspect-locked {
    aspect-ratio: var(--banner-module-ratio);
}

.banner-container.banner-aspect-locked .banner-swiper,
.banner-container.banner-aspect-locked .swiper-wrapper,
.banner-container.banner-aspect-locked .banner-swiper .swiper-slide {
    height: 100%;
}

.banner-container.banner-aspect-locked .banner-swiper .swiper-slide {
    padding-top: 0;
}

/* 媒体元素 (图片/视频) 绝对定位填满slide */
.banner-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Give the parser-created video a visible box before configuration loads. */
.banner-swiper .banner-bootstrap-slide {
    padding-top: 100vh;
}

.banner-swiper .swiper-slide img.banner-media {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transform: translateZ(0);
}

.banner-video {
    object-fit: cover;
    pointer-events: none;
    /* 避免点击视频控件 */
}

/* 箭头通用样式 — 智能颜色计算后动态设置color */
.banner-container .banner-arrow { /* 提升选择器权重 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
    cursor: pointer;
    z-index: 200;
    transition: color 0.2s ease;
    color: var(--banner-arrow-color); /* 改用变量，适配动态赋值 */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    pointer-events: auto;
    will-change: color, transform;
    /* 新增：确保基础颜色可被JS覆盖，同时hover优先级更高 */
}

/* 强制hover颜色生效，覆盖所有内联/动态样式 */
.banner-container .banner-arrow:hover {
    color: #fdd212 !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)); /* 增强悬浮视觉 */
}

.banner-arrow-left {
    left: 60px;
}

.banner-arrow-right {
    right: 60px;
}

.banner-arrow svg {
    width: 64px;
    height: 64px;
    fill: currentColor;
    display: block;
}

.banner-wechat-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 210;
    width: 68px;
    height: 68px;
    transform: translate(-50%, -50%);
    border: 2px solid #fdd212;
    background: rgba(0, 0, 0, 0.28);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.banner-wechat-play[hidden] {
    display: none;
}

.banner-wechat-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-38%, -50%);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 18px solid #fdd212;
}

/* 圆点指示器容器 */
.banner-pagination {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    gap: 12px;
    pointer-events: auto;
    transform: translate(0%, 20px); /* 初始下沉+透明 */
    opacity: 0;
    animation: dotFloat 0.4s ease 0.6s forwards;
}

/* 提升圆点选择器权重，改用变量适配动态颜色 */
.banner-container .banner-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: var(--banner-dot-color); /* 变量适配 */
    opacity: 0.75;
    transition: all 0.2s;
    margin: 0 4px;
    cursor: pointer;
    /* 新增：防止JS内联样式完全覆盖 */
    background-color: var(--banner-dot-color) !important; 
}

.banner-container .banner-pagination .swiper-pagination-bullet-active {
    width: 28px;
    opacity: 1;
    /* 激活态也继承变量，保证适配 */
    background-color: var(--banner-dot-color) !important;
}

/* 圆点悬浮效果：强制覆盖所有动态样式 */
.banner-container .banner-pagination .swiper-pagination-bullet:hover {
    background: #fdd212 !important;
    opacity: 1;
}

/* 移动端适配 (宽度 < 1080px 或移动端) */
@media (max-width: 719px) {
    .banner-swiper .banner-bootstrap-slide {
        padding-top: 133.333%;
    }

    .banner-arrow-left,
    .banner-arrow-right {
        display: none;
    }
    .banner-pagination {
        bottom: 20px;
    }
    /* 移动端圆点适配 */
    .banner-container .banner-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }
    .banner-container .banner-pagination .swiper-pagination-bullet-active {
        width: 24px;
    }
}
/* Banner圆点上浮+显隐 */
@keyframes dotFloat {
    to {
        transform: translate(0%, 0%);
        opacity: 1;
    }
}

/* Keep mobile browsers from displaying native video controls. */
.banner-video::-webkit-media-controls,
.banner-video::-webkit-media-controls-enclosure,
.banner-video::-webkit-media-controls-panel,
.banner-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}