/* 全局通用样式 */

/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 性能优化: GPU加速 */
*,
*::before,
*::after {
    -webkit-font-smoothing: antialiased; /* 字体平滑 */
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: "Alibaba PuHuiTi", "阿里巴巴普惠体", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    background-color: #f5f5f5;
    min-width: 320px; /* 最小宽度,防止过窄 */
    line-height: 1.5; /* 提升可读性 */
    margin: 0;
    padding: 0;
    font-size: 0; /* 消除行内元素间隙 */
}

/* 确俟section没有默认margin */
section {
    margin: 0;
    padding: 0;
    font-size: 16px; /* 恢复字体大小 */
}

/* 确保header没有默认margin */
header {
    margin: 0;
    padding: 0;
    display: block;
    font-size: 16px; /* 恢复字体大小 */
}

/* 图片优化 */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle; /* 消除图片底部空隙 */
}

/* 链接优化 */
a {
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent; /* 移动端点击高亮 */
}

/* 按钮优化 */
button {
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    -webkit-tap-highlight-color: transparent;
}

/* 广告位区域 - 通用样式 */
.ad-section {
    max-width: 1800px;
    margin: 20px auto;
    padding: 0 60px;
}

.ad-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.ad-item {
    display: block;
    width: 100%;
    height: 300px; /* 固定高度,保证图片比例 */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.ad-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.ad-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 裁剪填充,保证清晰度 */
    object-position: center; /* 居中裁剪 */
    display: block;
    image-rendering: -webkit-optimize-contrast; /* 优化图片渲染 */
    image-rendering: crisp-edges; /* 保持图片锁度 */
}

/* 响应式布局 - 广告位 */
@media (max-width: 1200px) {
    .ad-section {
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    .ad-section {
        padding: 0 20px;
    }
    
    .ad-container {
        grid-template-columns: 1fr; /* 移动端单列 */
        gap: 20px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .ad-container {
        grid-template-columns: repeat(2, 1fr); /* 平板端双列 */
    }
}

/* ==================== 搜索框样式 ====================  */

/* Banner轮播区域 */
.banner-carousel {
    position: relative;
    width: 100%;
    max-width: 1920px; /* 与其他页面保持一致 */
    margin: 0 auto; /* 居中 */
    overflow: hidden;
    background-color: #f5f5f5;
    display: block; /* 确保为块级元素 */
    max-height: 230px; /* 与其他页面保持一致 */
}

.banner-slider {
    position: relative;
    width: 100%;
    height: 230px; /* 固定高度230px，与其他页面保持一致 */
}

.banner-slide {
    display: none;
    width: 100%;
    height: 230px; /* 固定高度 */
    overflow: hidden;
}

.banner-slide.active {
    display: block;
}

.banner-slide img {
    width: 100%;
    height: 230px; /* 固定高度 */
    object-fit: contain; /* 等比例缩放，与其他页面保持一致 */
    object-position: center; /* 居中裁剪 */
    display: block;
    background: #f5f5f5;
}

/* 轮播指示器 */
.banner-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 100;
}

.banner-indicators .indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s;
}

.banner-indicators .indicator.active {
    background: #ffffff;
    width: 30px;
    border-radius: 6px;
}

/* Banner搜索区域 */
.banner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* PC端确保 banner 显示 */
@media (min-width: 891px) {
    .banner,
    #banner-container {
        display: block !important;
    }
}

.banner-img {
    width: 100%;
    height: auto;
    display: block;
}

.search-container {
    position: absolute;
    top: calc(50% - 5px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 800px;
    padding: 0 20px;
    z-index: 10;
}

.search-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 6px 6px 6px 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.search-wrapper:hover {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 7px 15px;
    background: transparent;
    color: #fff;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 25px;
    background: linear-gradient(135deg, #951D1D 0%, #c92a2a 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.search-btn:hover {
    background: linear-gradient(135deg, #7a1818 0%, #a82424 100%);
    transform: scale(1.05);
}

.search-icon {
    width: 20px;
    height: 20px;
}

/* 搜索框响应式 */
@media (max-width: 768px) {
    /* Banner高度调整 */
    .banner-carousel {
        max-width: 100%; /* 移动端全屏 */
    }
    
    .banner-slider {
        padding-top: 35%; /* 移动端适度增加高度 */
    }
    
    .search-container {
        max-width: 90%;
    }
    
    .search-wrapper {
        padding: 6px 6px 6px 15px;
    }
    
    .search-input {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    .search-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .search-icon {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .search-input::placeholder {
        font-size: 13px;
    }
    
    .search-btn {
        padding: 10px 15px;
    }
}