/* ========================================
   安心付 - 移动端全局适配样式
   自动适应各种手机版本
   ======================================== */

/* 1. 触摸优化 - 消除300ms点击延迟 */
html {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

/* 2. 防止iOS橡皮筋效果导致的意外滚动 */
body {
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
}

/* 3. 安全区域适配 - 刘海屏/打孔屏/动态岛 */
body {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* 固定头部扩展安全区域 */
.sticky.top-0,
header.sticky {
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
}

/* 4. 底部导航栏安全区域适配 */
.bottom-nav,
nav.fixed.bottom-0 {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 底部内容区为导航+安全区留空间 */
main.pb-safe,
.pb-safe {
    padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* 5. 修复底部导航图标和文字大小 - 原来3.5px~7px太小 */
.bottom-nav .fa,
nav.fixed.bottom-0 .fa {
    font-size: 18px !important;
}

.bottom-nav span,
nav.fixed.bottom-0 span {
    font-size: 10px !important;
}

/* 6. 移动端最小触控区域 44x44px (Apple HIG标准) */
button, 
a.btn, 
.nav-btn,
input[type="submit"],
input[type="button"],
.clickable {
    min-width: 44px;
    min-height: 44px;
}

/* 小按钮例外 */
button.btn-sm,
a.btn-sm {
    min-width: 36px;
    min-height: 36px;
}

/* 7. 防止iOS输入框自动缩放 */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important; /* 阻止iOS Safari在聚焦时自动缩放 */
    }
}

/* 8. 响应式容器 - 适配各种手机宽度 */
.container-mobile {
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* 小屏手机 (320-374px) */
@media screen and (max-width: 374px) {
    .container-mobile {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    /* 小屏减小间距 */
    .grid {
        gap: 0.5rem;
    }
    
    /* 小屏卡片减小内边距 */
    .card, .glass-card, .stat-card, .product-card {
        padding: 0.75rem !important;
    }
}

/* 中屏手机 (375-413px) - iPhone 6/7/8/SE */
@media screen and (min-width: 375px) and (max-width: 413px) {
    .container-mobile {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* 大屏手机 (414-428px) - iPhone Plus/Pro Max */
@media screen and (min-width: 414px) and (max-width: 428px) {
    .container-mobile {
        max-width: 428px;
    }
}

/* 9. 横屏适配 */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .bottom-nav,
    nav.fixed.bottom-0 {
        display: none; /* 横屏小高度时隐藏底部导航 */
    }
    
    main.pb-safe {
        padding-bottom: 1rem !important;
    }
    
    .container-mobile {
        max-width: 100%;
    }
}

/* 10. 平板/大屏适配 */
@media screen and (min-width: 768px) {
    .container-mobile {
        max-width: 480px; /* 保持手机宽度，居中显示 */
    }
}

/* 11. 全局横向溢出防护增强 */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* 12. 图片自适应 */
img {
    max-width: 100%;
    height: auto;
}

/* 13. 模态框/弹窗安全区域适配 */
.modal,
.modal-overlay,
.fixed.inset-0 {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 14. Toast/通知安全区域 */
.toast {
    top: calc(20px + env(safe-area-inset-top, 0px)) !important;
}

/* 15. 禁用iOS橡皮筋过度滚动（可选） */
@media screen and (max-width: 768px) {
    html, body {
        position: relative;
        height: 100%;
    }
}

/* 16. 动画性能优化 */
.animate-slide-up,
.animate-fade-in,
.card-hover,
.feature-btn,
.icon-btn-circle {
    will-change: transform, opacity;
    -webkit-transform: translateZ(0); /* 启用GPU加速 */
}