/* ═══════════════════════════════════════════════════════
   mobile.css — leapmac 中文站移动端专属样式
   覆盖页面：index.html / pricing.html / purchase.html / blog/

   规则约束：
   ① 本文件只增强移动端体验，不改动 768px 以上的桌面端
   ② 特定组件类（#mobile-menu-overlay / .mobile-bottom-bar）
      本身已通过 HTML class 控制在移动端可见
   ③ 所有宽泛的布局 override 均包裹于 @media (max-width: 767px)
   ═══════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   1. 移动端菜单背景遮罩
   #mobile-menu-overlay：点击可关闭菜单的半透明蒙层
   默认隐藏，js 添加 .active 类后显示
   ────────────────────────────────────────────────────── */
#mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 45;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

#mobile-menu-overlay.active {
    display: block;
    animation: overlayFadeIn 0.2s ease;
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ──────────────────────────────────────────────────────
   2. 语言切换按钮 — 移动端点击展开
   lang-switch.js 在移动端改为 click 触发，添加 .lang-open 类
   ────────────────────────────────────────────────────── */
.lang-open > .absolute {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* ──────────────────────────────────────────────────────
   3. 移动端底部悬浮操作栏
   .mobile-bottom-bar / .mbb-price / .mbb-label / .mbb-amount / .mbb-btn
   用于 pricing.html (#pricing-mobile-bar) 及 index.html (#pricing-mobile-bar)
   元素本身已有 md:hidden / lg:hidden，仅在移动端出现
   ────────────────────────────────────────────────────── */
.mobile-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    /* iPhone 底部安全区适配 */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
}

.mbb-price {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 2px;
}

.mbb-label {
    font-size: 11px;
    color: #71717a;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.mbb-amount {
    font-size: 19px;
    font-weight: 700;
    color: #18181b;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mbb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0071e3;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none !important;
    transition: background 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.3);
    line-height: 1;
}

.mbb-btn:hover {
    background: #0066cc;
}

.mbb-btn:active {
    transform: scale(0.97);
}

/* ══════════════════════════════════════════════════════
   以下所有规则仅作用于手机端（< 768px）
   ══════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ──────────────────────────────────────────────────
       4. 全局触摸交互优化
       ────────────────────────────────────────────────── */

    /* 消除 iOS 点击高亮 */
    a, button, [role="button"], label, summary,
    .home-plan-option, .pricing-option, .period-pill {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* 最小触摸目标 44×44px（Apple HIG 标准） */
    button:not(.mbb-btn),
    .period-pill,
    header nav a,
    #mobile-menu a,
    #mobile-menu button {
        min-height: 44px;
    }

    /* 所有输入框字体 ≥ 16px，防止 iOS 自动缩放视口 */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* 禁止全页横向溢出 */
    body {
        overflow-x: hidden !important;
    }

    /* 长单词 / URL 自动折行 */
    p, li, td, th, h1, h2, h3, h4, h5, span, a, label {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* touch 设备禁用 hover 悬浮动画，避免布局抖动 */
    @media (hover: none) {
        .card-hover:hover,
        .feature-img-card:hover {
            transform: none !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
        }
    }

    /* ──────────────────────────────────────────────────
       5. 顶部导航栏
       ────────────────────────────────────────────────── */

    /* Hamburger 按钮增大点击区域 */
    header button.md\:hidden {
        width: 44px;
        height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }

    /* 语言按钮在手机端：隐藏文字只保留地球图标 */
    header .relative.group > button #current-lang {
        display: none;
    }

    header .relative.group > button svg:last-child {
        display: none;
    }

    header .relative.group > button {
        padding: 8px;
        gap: 0;
    }

    /* ──────────────────────────────────────────────────
       6. 主内容区 — 首页 Hero 区域
       ────────────────────────────────────────────────── */

    /* 首页主标题字号调整 */
    #page-home h1 {
        font-size: 2rem !important;   /* 32px */
        line-height: 1.15 !important;
    }

    /* 副标题 */
    #page-home .text-sm.md\:text-lg {
        font-size: 0.875rem !important;
        line-height: 1.65 !important;
    }

    /* 描述段落最大宽度放开 */
    #page-home .max-w-2xl {
        max-width: 100% !important;
    }

    /* CTA 按钮组：手机上堆叠且全宽 */
    #page-home .flex.flex-col.sm\:flex-row.gap-4.justify-center {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    #page-home .flex.flex-col.sm\:flex-row.gap-4.justify-center > a,
    #page-home .flex.flex-col.sm\:flex-row.gap-4.justify-center > button {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Hero 展示图片区域：收窄圆角 */
    .hero-showcase {
        border-radius: 1rem;
    }

    /* Hero 图覆盖 badge：字体缩小 */
    .hero-showcase .text-\[11px\] {
        font-size: 10px !important;
    }

    /* ──────────────────────────────────────────────────
       7. 首页各 section 间距收紧
       ────────────────────────────────────────────────── */

    #page-home .mt-24 {
        margin-top: 3.5rem !important;
    }

    #page-home .mb-20 {
        margin-bottom: 3rem !important;
    }

    #page-home .mb-12 {
        margin-bottom: 2rem !important;
    }

    /* 各 section 标题 */
    #page-home h2.text-2xl,
    #page-home h2.text-3xl {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }

    /* ──────────────────────────────────────────────────
       8. 首页特惠方案卡片（.home-offer-card）
       ────────────────────────────────────────────────── */

    .home-offer-card {
        padding: 1.125rem !important;
    }

    /* 方案选项行：价格不折行 */
    .home-plan-option {
        padding: 0.55rem 0.75rem;
        min-height: 44px;
    }

    .home-plan-option > span:last-child {
        font-size: 11.5px;
        text-align: right;
    }

    /* 机房选择器全宽 */
    .home-offer-footer select {
        width: 100% !important;
    }

    /* ──────────────────────────────────────────────────
       9. 关键指标 2×2 格子（grid-cols-2 md:grid-cols-4）
       ────────────────────────────────────────────────── */

    .glassmorphism .grid.grid-cols-2 .text-2xl,
    .glassmorphism .grid.grid-cols-2 .text-3xl {
        font-size: 1.35rem !important;
    }

    .glassmorphism .grid.grid-cols-2 .text-xs {
        font-size: 11px !important;
    }

    /* ──────────────────────────────────────────────────
       10. 全球机房 5 列 → 2 列
       ────────────────────────────────────────────────── */

    .grid.lg\:grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ──────────────────────────────────────────────────
       11. 三步部署流程连接线隐藏
       ────────────────────────────────────────────────── */

    .hidden.md\:block.absolute.top-10 {
        display: none !important;
    }

    /* ──────────────────────────────────────────────────
       12. 底部 CTA 渐变区域
       ────────────────────────────────────────────────── */

    .max-w-3xl .rounded-3xl,
    .rounded-3xl.overflow-hidden.bg-gradient-to-br {
        padding: 2rem 1.25rem !important;
        border-radius: 1.5rem !important;
    }

    /* ──────────────────────────────────────────────────
       13. 页脚
       ────────────────────────────────────────────────── */

    /* 内部链接组：2列 → 2列（保留，避免折成1列太稀疏） */
    footer .grid.grid-cols-2.sm\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    footer .lg\:col-span-4 {
        margin-bottom: 0.5rem;
    }

    /* 邮件链接不折行 */
    footer a[href^="mailto"] {
        font-size: 13px;
    }

    /* ──────────────────────────────────────────────────
       14. pricing.html — 算力定价页
       ────────────────────────────────────────────────── */

    /* 方案卡片价格数字缩小 */
    .home-offer-card .text-4xl {
        font-size: 2.25rem !important;
    }

    /* 规格对比表：压缩列宽 */
    .data-table th,
    .data-table td {
        padding: 7px 10px !important;
        font-size: 12px !important;
    }

    /* 规格对比表第一列宽度固定 */
    .data-table th:first-child,
    .data-table td:first-child {
        white-space: nowrap;
    }

    /* "即将推出"卡片在小屏：不强制双列，保持单列 */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 > article.opacity-75 {
        grid-column: span 1 !important;
    }

    /* 扩展选配 3列 → 单列（手机宽度不够） */
    .grid.grid-cols-1.sm\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* 扩展选配价格卡：金额字号缩小 */
    .glassmorphism .text-2xl.font-black {
        font-size: 1.5rem !important;
    }

    /* 定价页主内容底部留出底部栏空间 */
    main:has(~ #pricing-mobile-bar) {
        padding-bottom: 80px !important;
    }

    /* FAQ summary 箭头 */
    details.glassmorphism > summary {
        gap: 0.5rem;
    }

    /* ──────────────────────────────────────────────────
       15. purchase.html — 购买配置页
       ────────────────────────────────────────────────── */

    /* 主内容底部留出底部栏空间 */
    #purchase-page main {
        padding-bottom: 96px !important;
    }

    /* 机房网格 3列 → 2列 */
    #region-options {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 租期网格 4列 → 2列 */
    #duration-options {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 价格汇总区标签 */
    #summary-model {
        font-size: 12px !important;
        text-align: right;
    }

    /* 右侧订单汇总固定栏在移动端改为普通流 */
    .lg\:sticky.lg\:top-24 {
        position: static !important;
    }

    /* 步骤引导 badge 在小屏可能折行 */
    .flex.flex-wrap.justify-center.gap-2 .step-badge {
        font-size: 10px;
    }

    /* ──────────────────────────────────────────────────
       16. index.html 定价子页（#page-pricing）
       ────────────────────────────────────────────────── */

    /* 型号选择 radio label 字号 */
    #pricing-model-options .pricing-option,
    #page-pricing .pricing-option {
        padding: 0.625rem 0.75rem;
        min-height: 44px;
    }

    /* 型号标题不折行 */
    #pricing-model-options .font-bold {
        font-size: 12px !important;
    }

    /* 周期选择 pill 在小屏全行铺满 */
    #global-period-tabs {
        gap: 0.375rem !important;
    }

    #global-period-tabs .period-pill {
        padding: 0.4rem 0.75rem;
        font-size: 11.5px;
    }

    /* ──────────────────────────────────────────────────
       17. index.html — 控制台（#page-console）
       ────────────────────────────────────────────────── */

    /* SSH / VNC 代码块字号 */
    #instance-details .bg-zinc-900 {
        font-size: 12px !important;
        padding: 0.875rem !important;
    }

    /* 实例规格指标 4 列 → 2 列 */
    #instance-details .grid.grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 电源操作按钮行 */
    #instance-details .flex.gap-2.shrink-0 {
        flex-wrap: wrap !important;
    }

    /* 控制台面板内边距缩小 */
    .console-panel-inner {
        padding: 0 12px 14px !important;
    }

    .console-panel-header {
        padding: 12px 14px !important;
    }

    /* 控制台 tab 按钮 */
    .console-tab-btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    /* 订单 / 工单表格 */
    .data-table th {
        font-size: 10px !important;
        padding: 6px 8px !important;
    }

    .data-table td {
        font-size: 12px !important;
        padding: 8px 8px !important;
    }

    /* ──────────────────────────────────────────────────
       18. 模态框（登录/支付/联系/关于）
       ────────────────────────────────────────────────── */

    /* 居中模态框：全宽展示，顶部留出导航栏空间 */
    .fixed.inset-0.z-50.flex.items-center.justify-center > .relative,
    .fixed.inset-0.z-50.flex.items-start.justify-center > .relative {
        width: calc(100vw - 2rem) !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 5rem) !important;
        overflow-y: auto !important;
        border-radius: 1.5rem !important;
        margin-top: 4.5rem !important;
    }

    /* 模态框内 padding 缩小 */
    .fixed.inset-0.z-50 .p-6 {
        padding: 1.25rem !important;
    }

    .fixed.inset-0.z-50 .p-8 {
        padding: 1.5rem !important;
    }

    /* 支付二维码容器 */
    #modal-payment .bg-white canvas,
    #modal-payment .bg-white img {
        max-width: 180px !important;
        height: auto !important;
    }

    /* ──────────────────────────────────────────────────
       19. Toast 通知 — 移动端样式
       ────────────────────────────────────────────────── */

    /* 首页内置 toast（fixed 居中变全宽顶部） */
    #toast {
        left: 1rem !important;
        right: 1rem !important;
        max-width: calc(100vw - 2rem) !important;
        transform: none !important;
        top: 5rem !important;
        font-size: 13px !important;
        padding: 10px 14px !important;
        border-radius: 1rem !important;
    }

    /* ──────────────────────────────────────────────────
       20. 博客列表页（blog/index.html）
       ────────────────────────────────────────────────── */

    /* 博客卡片圆角统一 */
    .rounded-2xl {
        border-radius: 1rem;
    }

    /* 博客侧边栏（已有 hidden lg:block，这里保险起见） */
    aside.hidden.lg\:block {
        display: none !important;
    }

    /* 分页按钮 */
    #blog-pagination button {
        min-width: 36px;
        min-height: 36px;
        font-size: 13px;
    }

    /* ──────────────────────────────────────────────────
       21. 博客文章页
       ────────────────────────────────────────────────── */

    /* 文章正文字号 */
    article.prose {
        font-size: 15px !important;
        line-height: 1.75 !important;
    }

    /* 文章代码块横向滚动 */
    article pre,
    article .not-prose pre {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        font-size: 13px !important;
    }

}

/* ══════════════════════════════════════════════════════
   超小屏（≤ 375px）— iPhone SE / 老款安卓
   ══════════════════════════════════════════════════════ */

@media (max-width: 375px) {

    /* 首页主标题再缩小 */
    #page-home h1 {
        font-size: 1.75rem !important;
    }

    /* 特惠方案内边距再缩 */
    .home-offer-card {
        padding: 1rem !important;
    }

    /* 底部栏金额缩小 */
    .mbb-amount {
        font-size: 16px;
    }

    .mbb-btn {
        padding: 11px 18px;
        font-size: 13px;
    }

    /* 顶部隐藏语言选择器，节省空间 */
    header .relative.group > button {
        display: none;
    }

    /* 控制台实例卡片名称 */
    .min-w-0 h3.font-bold.text-sm {
        font-size: 13px !important;
    }

    /* 数据表格更紧凑 */
    .data-table th,
    .data-table td {
        padding: 6px 7px !important;
        font-size: 11px !important;
    }

}

/* ══════════════════════════════════════════════════════
   iPhone 横屏模式安全区适配
   ══════════════════════════════════════════════════════ */

@media (max-width: 900px) and (orientation: landscape) {

    .mobile-bottom-bar {
        padding-left: calc(20px + env(safe-area-inset-left, 0px));
        padding-right: calc(20px + env(safe-area-inset-right, 0px));
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    /* 横屏下模态框可能被键盘遮挡，允许滚动 */
    .fixed.inset-0.z-50.flex.items-center.justify-center > .relative {
        max-height: 90dvh !important;
        overflow-y: auto !important;
    }

}

/* ══════════════════════════════════════════════════════
   purchase.html 底部结算栏（使用内联 Tailwind，独立适配）
   ══════════════════════════════════════════════════════ */

#purchase-page .fixed.bottom-0.lg\:hidden {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767px) {
    /* 支付按钮在超小屏可全宽或适当缩小 */
    #purchase-page .fixed.bottom-0.lg\:hidden button {
        min-height: 44px;
        font-size: 13px;
    }
}

/* ══════════════════════════════════════════════════════
   iOS 刘海屏 / 动态岛顶部安全区
   ══════════════════════════════════════════════════════ */

@supports (padding-top: env(safe-area-inset-top)) {
    header.fixed {
        padding-top: env(safe-area-inset-top, 0px);
    }
}