/* 洛阳POS办理咨询网 — 移动端优化补丁 */
/* 在 style.css 之后加载，只覆盖移动端 */

/* ==================== 移动端基础优化 ==================== */
@media (max-width: 768px) {
  /* 防止横向溢出 */
  html, body { overflow-x: hidden; max-width: 100%; }
  * { -webkit-tap-highlight-color: rgba(22,119,255,.1); }

  /* 触摸目标加大 */
  a, button, .area-item, .faq-q { min-height: 44px; }

  .wrap { padding: 0 15px; }

  /* ---- 顶部通栏：两行显示 ---- */
  .topbar { font-size: 12px; padding: 6px 0; }
  .topbar .wrap { flex-direction: column; gap: 3px; text-align: center; }

  /* ---- 头部：简化 ---- */
  .header .wrap { height: 56px; gap: 10px; }
  .logo { font-size: 15px; gap: 7px; }
  .logo .mark { width: 32px; height: 32px; font-size: 14px; border-radius: 7px; }
  /* 头部按钮在手机上藏起来（浮动按钮已足够） */
  .header .btn { display: none; }

  /* 移动端汉堡菜单 */
  .nav-toggle {
    display: flex !important;
    width: 40px; height: 40px; border: none; background: none;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; cursor: pointer; padding: 0;
  }
  .nav-toggle span {
    display: block; width: 22px; height: 2px; background: #1f2329;
    border-radius: 2px; transition: .25s;
  }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav {
    display: none;
    position: absolute; top: 56px; left: 0; right: 0;
    background: #fff; flex-direction: column; gap: 0;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    padding: 8px 0; z-index: 99;
    max-height: calc(100vh - 56px); overflow-y: auto;
  }
  .nav.open { display: flex; }
  .nav a {
    padding: 14px 20px; border-bottom: 1px solid #f0f2f5;
    font-size: 16px; border-left: 3px solid transparent;
  }
  .nav a.active, .nav a:hover {
    border-bottom-color: #f0f2f5;
    border-left-color: var(--primary);
    background: #f5f8ff;
    color: var(--primary);
  }

  /* ---- Hero：紧凑 ---- */
  .hero { padding: 34px 0 30px; }
  .hero::after { width: 220px; height: 220px; right: -70px; top: -70px; }
  .hero h1 { font-size: 22px; line-height: 1.42; margin-bottom: 11px; }
  .hero .sub { font-size: 14.5px; margin-bottom: 18px; line-height: 1.65; }
  .badges { gap: 7px; margin-bottom: 22px; }
  .badge { padding: 5px 11px; font-size: 12.5px; }

  /* 按钮全宽堆叠 */
  .cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .cta-row .btn { width: 100%; padding: 14px 20px; font-size: 16px; }

  /* ---- Section 间距 ---- */
  .section { padding: 34px 0; }
  .section-head { margin-bottom: 24px; }
  .section-head h2 { font-size: 20px; margin-bottom: 8px; }
  .section-head p { font-size: 14px; }

  /* ---- 卡片：单列（手机上两列太挤） ---- */
  .grid-4, .grid-3 { grid-template-columns: 1fr; gap: 14px; }
  .card { padding: 20px 18px; }
  .card .icon { width: 42px; height: 42px; font-size: 21px; margin-bottom: 12px; }
  .card h3 { font-size: 16.5px; margin-bottom: 7px; }
  .card p { font-size: 14px; line-height: 1.65; }

  /* ---- 区县网格：保持两列但优化 ---- */
  .area-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .area-item { padding: 14px 8px; font-size: 14.5px; min-height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .area-item .tag { font-size: 11.5px; margin-top: 3px; }

  /* ---- 表单：全宽大触摸目标 ---- */
  .form-box { padding: 20px 16px; border-radius: 12px; }
  .form-row { margin-bottom: 16px; }
  .form-row label { font-size: 14px; margin-bottom: 6px; }
  .form-row input, .form-row select, .form-row textarea {
    padding: 13px 14px; font-size: 16px;  /* 16px 防 iOS 自动缩放 */
    border-radius: 8px;
  }
  .form-row textarea { min-height: 80px; }
  .form-submit { padding: 16px; font-size: 17px; border-radius: 9px; }
  .form-tip { font-size: 12px; line-height: 1.55; }

  /* ---- 费率表：转卡片式（表格在手机上很难看） ---- */
  .fee-table,
  .fee-table tbody,
  .fee-table tr,
  .fee-table td,
  .fee-table th { display: block; width: 100%; }
  .fee-table thead { display: none; }
  .fee-table tr {
    background: #fff; border: 1px solid var(--border);
    border-radius: 9px; margin-bottom: 11px; padding: 6px 0;
    box-shadow: 0 1px 6px rgba(0,40,120,.05);
  }
  .fee-table th { display: none; }
  .fee-table td {
    border: none; padding: 9px 16px; font-size: 14.5px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; text-align: right;
  }
  .fee-table td:first-child {
    font-weight: 700; color: #0958d9; font-size: 15.5px;
    border-bottom: 1px solid #f0f2f5; padding-bottom: 11px;
    justify-content: flex-start; text-align: left;
  }
  /* 给每个 td 加前置标签（用 data-label） */
  .fee-table td[data-label]::before {
    content: attr(data-label);
    font-weight: 600; color: #646a73; font-size: 14px;
    flex-shrink: 0; text-align: left;
  }

  /* ---- FAQ：触摸友好 ---- */
  .faq-q { padding: 15px 17px; font-size: 15px; }
  .faq-a { font-size: 14.5px; line-height: 1.75; }
  .faq-item.open .faq-a { padding: 0 17px 17px; }

  /* ---- 资讯列表 ---- */
  .news-item { padding: 16px; gap: 8px; }
  .news-item h3 { font-size: 15.5px; line-height: 1.5; }
  .news-item p { font-size: 13.5px; line-height: 1.6; }
  .news-date { font-size: 12.5px; }

  /* ---- 页脚 ---- */
  .footer { padding: 30px 0 20px; }
  .footer-grid { gap: 22px; }
  .footer h4 { font-size: 15px; margin-bottom: 10px; }
  .footer a { font-size: 14px; padding: 5px 0; }
  .footer-bottom { font-size: 12px; }

  /* ---- 浮动按钮 ---- */
  .float-bar { right: 12px; bottom: 16px; gap: 8px; }
  .float-btn { width: 50px; height: 50px; font-size: 21px; }

  /* ---- 面包屑 ---- */
  .breadcrumb { font-size: 13px; padding: 10px 0; }

  /* ---- 文章详情 ---- */
  .wrap h1 { font-size: 21px !important; line-height: 1.45 !important; }
}

/* ==================== 小屏手机 ==================== */
@media (max-width: 380px) {
  .hero h1 { font-size: 20px; }
  .area-grid { gap: 8px; }
  .area-item { font-size: 13.5px; padding: 12px 6px; }
  .section-head h2 { font-size: 18.5px; }
  .logo { font-size: 14px; }
  .logo .mark { width: 29px; height: 29px; font-size: 12.5px; }
}

/* ==================== 横屏 / 平板 ==================== */
@media (min-width: 561px) and (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .area-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 桌面端默认隐藏汉堡按钮 */
.nav-toggle { display: none; }

/* ==================== 移动端「精简模式」 ==================== */
/* 目标：缩短页面长度，减少滚动疲劳 */
@media (max-width: 768px) {

  /* ---- 1. 大幅收紧 section 间距 ---- */
  .section { padding: 22px 0 !important; }
  .section-head { margin-bottom: 16px !important; }
  .section-head h2 { font-size: 18px !important; margin-bottom: 4px !important; }
  .section-head p { font-size: 13px !important; }

  /* ---- 2. Hero 压缩 ---- */
  .hero { padding: 26px 0 22px !important; }
  .hero h1 { font-size: 20px !important; line-height: 1.38 !important; margin-bottom: 8px !important; }
  .hero .sub { font-size: 13.5px !important; margin-bottom: 14px !important; line-height: 1.6 !important; }
  .badges { gap: 5px !important; margin-bottom: 16px !important; }
  .badge { padding: 4px 9px !important; font-size: 11.5px !important; }
  .cta-row { gap: 8px !important; }
  .cta-row .btn { padding: 12px 18px !important; font-size: 15px !important; }

  /* ---- 3. 优势卡片：grid 横排（icon 左，文字右）---- */
  .grid-4 { gap: 9px !important; }
  .card {
    padding: 13px 14px !important;
    display: grid !important;
    grid-template-columns: 38px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 11px !important;
    row-gap: 2px !important;
    align-items: start !important;
  }
  .card .icon {
    width: 38px !important; height: 38px !important;
    font-size: 19px !important; margin: 0 !important;
    border-radius: 9px !important;
    grid-row: 1 / 3 !important;
    grid-column: 1 !important;
    align-self: center !important;
  }
  .card h3 { font-size: 15px !important; margin: 0 !important; grid-column: 2 !important; grid-row: 1 !important; }
  .card p { font-size: 12.5px !important; line-height: 1.5 !important; margin: 0 !important;
            grid-column: 2 !important; grid-row: 2 !important; }

  /* ---- 4. 区县网格：3 列更紧凑 ---- */
  .area-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 7px !important; }
  .area-item {
    padding: 11px 4px !important; font-size: 13.5px !important;
    min-height: 48px !important;
  }
  .area-item .tag { font-size: 10.5px !important; }

  /* ---- 5. 表单：整体压缩 ---- */
  .form-box { padding: 16px 14px !important; }
  .form-row { margin-bottom: 12px !important; }
  .form-row label { font-size: 13.5px !important; margin-bottom: 5px !important; }
  .form-row input, .form-row select, .form-row textarea {
    padding: 11px 13px !important; font-size: 16px !important;
  }
  .form-row textarea { min-height: 64px !important; }
  .form-submit { padding: 14px !important; font-size: 16px !important; }
  .form-tip { font-size: 11.5px !important; }

  /* ---- 6. 费率表：更紧凑 ---- */
  .fee-table tr { margin-bottom: 8px !important; padding: 3px 0 !important; }
  .fee-table td { padding: 7px 14px !important; font-size: 13.5px !important; }
  .fee-table td:first-child { font-size: 14.5px !important; padding-bottom: 8px !important; }

  /* ---- 7. FAQ：更紧凑 ---- */
  .faq-item { margin-bottom: 7px !important; }
  .faq-q { padding: 12px 14px !important; font-size: 14px !important; }
  .faq-a { font-size: 13.5px !important; line-height: 1.68 !important; }
  .faq-item.open .faq-a { padding: 0 14px 13px !important; }

  /* ---- 8. 资讯列表：紧凑 ---- */
  .news-item { padding: 12px 14px !important; }
  .news-item h3 { font-size: 14.5px !important; line-height: 1.45 !important; }
  .news-item p {
    font-size: 12.5px !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important; overflow: hidden !important;
  }
  .news-date { font-size: 11.5px !important; }

  /* ---- 9. 微信 CTA：紧凑 ---- */
  .wx-cta-card { padding: 20px 16px !important; gap: 14px !important; }
  .wx-cta-qr { width: 130px !important; }
  .wx-cta-text h3 { font-size: 16.5px !important; margin-bottom: 6px !important; }
  .wx-cta-text p { font-size: 13px !important; line-height: 1.6 !important; margin-bottom: 12px !important; }
  .wx-btn-wx, .wx-btn-tel { padding: 12px !important; font-size: 14.5px !important; }

  /* ---- 10. 页脚：压缩 ---- */
  .footer { padding: 22px 0 16px !important; }
  .footer-grid { gap: 16px !important; }
  .footer h4 { font-size: 14px !important; margin-bottom: 8px !important; }
  .footer a { font-size: 13px !important; padding: 3px 0 !important; }
  .footer p { font-size: 12.5px !important; }
  .footer-bottom { font-size: 11.5px !important; padding-top: 14px !important; }

  /* ---- 11. Hero 徽章：只显示 3 个（省空间） ---- */
  .badge:nth-child(n+4) { display: none !important; }

  /* ---- 12. 隐藏移动端冗余内容 ---- */
  .topbar span:first-child { display: none !important; }  /* 顶部通栏只留电话 */
  .topbar .wrap { flex-direction: row !important; justify-content: center !important; }
}

/* 超小屏进一步压缩 */
@media (max-width: 380px) {
  .section { padding: 18px 0 !important; }
  .hero { padding: 22px 0 18px !important; }
  .hero h1 { font-size: 18.5px !important; }
  .area-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .area-item { font-size: 12.5px !important; padding: 10px 3px !important; }
  .card { padding: 12px 13px !important; }
  .card h3 { font-size: 14.5px !important; }
  .card p { font-size: 12.5px !important; }
}

/* ==================== 移动端最终精简：砍掉冗余板块 ==================== */
@media (max-width: 768px) {

  /* ---- 1. 隐藏「为什么选择我们」板块（优势已在别处体现，手机上冗余）---- */
  .section:has(.grid-4 .card .icon) { }  /* 占位，下面用具体选择器 */

  /* 「为什么选择」板块 = hero 后第一个 section，隐藏 */
  body > .section:nth-of-type(2) { display: none; }

  /* ---- 2. 隐藏「主营POS机型」（手机用户主要关心能不能办，机型详情在 /products/）---- */
  body > .section:nth-of-type(4) { display: none; }

  /* ---- 3. 隐藏「常见问题解答」（太长，且 FAQ 各区县页有）---- */
  body > .section:nth-of-type(8) { display: none; }

  /* ---- 4. 隐藏「最新行业资讯」（首页不需要，/news/ 有完整列表）---- */
  body > .section:nth-of-type(9) { display: none; }

  /* ---- 5. 费率表在手机上只留 3 行核心（押金、费率、到账）---- */
  .fee-table tr:nth-child(5) { display: none; }   /* 隐藏流量费行 */

  /* ---- 6. 微信 CTA 区块简化 ---- */
  .wx-cta-text p { display: none; }  /* 隐藏长文案 */
  .wx-cta-text h3 { font-size: 15px; margin-bottom: 10px; }
  .wx-cta-qr { width: 110px; }
  .wx-cta-card { padding: 16px 14px; gap: 12px; }

  /* ---- 7. 页脚极度精简：只留电话 ---- */
  .footer-grid { grid-template-columns: 1fr; gap: 0; }
  .footer-grid > div:nth-child(2),
  .footer-grid > div:nth-child(3) { display: none; }  /* 隐藏"快速导航"和"热门地区" */
  .footer > .wrap > .footer-grid > div:first-child p { display: none; }  /* 隐藏介绍长文 */
}

/* 保留：Hero、区县网格、费率表(精简)、申请表、微信CTA —— 这 5 块是核心转化路径 */

/* ==================== 移动端：区县保持左右两栏 ==================== */
@media (max-width: 768px) {
  .area-cols {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .area-col h3 {
    font-size: 13.5px !important;
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
  }
  .area-col-list {
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
  }
  .area-mini {
    padding: 9px 3px !important;
    font-size: 12.5px !important;
    min-height: 40px !important;
    border-radius: 7px !important;
  }
}
@media (max-width: 380px) {
  .area-cols { gap: 8px !important; }
  .area-col-list { gap: 4px !important; }
  .area-mini { font-size: 11.5px !important; padding: 8px 2px !important; min-height: 36px !important; }
}