/*
 * 移动端响应式修复CSS
 * 确保所有页面在移动端完美自适应
 */

/* === 全局自适应设置 === */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* === 防止内容溢出 === */
img {
    max-width: 100%;
    height: auto;
}

/* === 搜索框响应式 === */
.gmo-search-bar {
    width: 100%;
    box-sizing: border-box;
}

.gmo-search-input {
    width: 100%;
    box-sizing: border-box;
}

.gmo-search-input input {
    width: 100%;
    box-sizing: border-box;
}

/* === Tab标签响应式 === */
.gmo-tabs {
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* === 项目卡片响应式 === */
.mobile,
.pro_box,
.tier {
    width: 100%;
    box-sizing: border-box;
}

.mobile .tier,
.pro_box .tier {
    width: auto !important;
    margin-left: 0.3rem !important;
    margin-right: 0.3rem !important;
}

/* === 底部导航响应式 === */
.footer-gmo {
    width: 100%;
    box-sizing: border-box;
    left: 0;
    right: 0;
}

/* === 小屏幕优化 (宽度 < 360px) === */
@media screen and (max-width: 360px) {
    /* 字体缩小 */
    .mobile .tier .ib-body .cl-3:nth-child(1) p:first-child,
    .pro_box .tier .ib-body .cl-3:nth-child(1) p:first-child {
        font-size: 0.6rem !important;
    }
    
    /* 搜索图标缩小 */
    .gmo-search-icon {
        width: 0.7rem !important;
        height: 0.7rem !important;
        font-size: 0.32rem !important;
    }
    
    /* 按钮缩小 */
    .mobile .tier::after,
    .pro_box .tier::after {
        padding: 0.1rem 0.4rem !important;
        font-size: 0.26rem !important;
    }
}

/* === 中等屏幕优化 (360px - 414px) === */
@media screen and (min-width: 361px) and (max-width: 414px) {
    /* 保持原尺寸 */
}

/* === 大屏幕优化 (> 414px) === */
@media screen and (min-width: 415px) {
    /* 限制最大宽度 */
    .mobile {
        max-width: 750px;
        margin: 0 auto;
    }
    
    .footer-gmo {
        max-width: 750px;
        margin: 0 auto;
    }
}

/* === 横屏优化 === */
@media screen and (orientation: landscape) and (max-height: 500px) {
    /* 减小间距 */
    .mobile .tier,
    .pro_box .tier {
        margin-bottom: 0.2rem !important;
        padding: 0.2rem !important;
    }
}

/* === iOS Safari 优化 === */
@supports (-webkit-touch-callout: none) {
    body {
        -webkit-text-size-adjust: 100%;
    }
    
    input {
        -webkit-appearance: none;
        border-radius: 0;
    }
}

/* === 防止缩放 === */
input, textarea, select {
    font-size: 16px !important;
}

/* === 清除浮动 === */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* === 确保页面占满屏幕 === */
html, body {
    min-height: 100vh;
    position: relative;
}

.mobile {
    min-height: calc(100vh - 1.5rem);
    padding-bottom: 1.5rem;
}