/* ============================================================
   mobile-fix.css — 手机端「瘦身」补丁（5 页通用）
   目标：只压缩顶部品牌介绍 / 信任三栏 / FAQ 的高度，让充值码输入框 +
        「验证并继续」按钮在手机上更快出现、不被屏幕底边截断。
   原则：① 不改变元素顺序 ② 不影响桌面端（全部在 @media 内）
        ③ 不改任何品牌配色 ④ 纯增量、可一键删除还原。
   ============================================================ */

/* 防止页面被某个超宽元素撑出横向滚动条 */
body { overflow-x: hidden; }

/* ---------------- 手机 (≤768px) ---------------- */
@media (max-width: 768px) {
    /* 顶部留白，避免固定导航 / 语言切换压住内容顶部 */
    .container.py-4 { padding-top: 3.2rem !important; }

    /* —— 品牌介绍区瘦身 —— */
    .hero-card .card-body { padding: 1rem 0.9rem !important; }
    .hero-card .text-center.mb-3 { margin-bottom: 0.6rem !important; }
    .brand-badge { font-size: 0.62rem; padding: 0.2rem 0.6rem; }
    .claude-logo, .grok-logo, .x-logo, .max-logo { font-size: 1.32rem !important; }
    .price-tag { margin-top: 0.5rem !important; padding: 0.32rem 0.8rem !important; }
    .price-amount { font-size: 1.38rem !important; }

    /* 信任三栏更紧凑、更矮（仍保持一行三列） */
    .trust-features { margin-bottom: 0.6rem !important; }
    .trust-features .text-center { padding: 0.5rem 0.3rem !important; }
    .trust-features .text-center div:first-child { font-size: 1.15rem !important; margin-bottom: 0.2rem !important; }

    /* FAQ（card-body 内最后一块）压缩上边距与行距 */
    .hero-card .card-body > div:last-child { margin-top: 0.6rem !important; padding-top: 0.6rem !important; }
    .hero-card .card-body > div:last-child > div { margin-bottom: 0.45rem !important; }

    /* 步骤进度条贴近上方、缩小与下方卡片间距 */
    .steps-container { padding: 0.5rem 0 !important; margin-bottom: 1rem !important; }

    /* 行动按钮足够大；底部留安全区，避免贴边被浏览器工具栏 / 手势条遮挡 */
    .btn-lg { min-height: 50px; }
    body { padding-bottom: env(safe-area-inset-bottom); }
    .footer { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important; }
}

/* ---------------- 小屏 (≤480px) ---------------- */
@media (max-width: 480px) {
    .hero-card .card-body { padding: 0.85rem 0.8rem !important; }
    .price-amount { font-size: 1.3rem !important; }
    .trust-features .text-center div:last-child { font-size: 0.66rem !important; line-height: 1.25; }
    .hero-card .card-body > div:last-child > div { margin-bottom: 0.4rem !important; }
}

/* ---------------- 触摸设备：按压即时反馈 ---------------- */
@media (hover: none) and (pointer: coarse) {
    .btn:active { transform: scale(0.98); opacity: 0.92; }
    .form-control:focus { animation: none; }
}