/* ============================================================
   cn-extend.css — /cn/ 站点补充样式
   只补充原站 CSS（style.css / style-xudanet.css / page.css）
   未覆盖的组件，原文件不做任何改动
   ============================================================ */

/* ============================================================
   1. 服务卡片 xd-scard
   参考 xuda.net.cn 的 .service-card 视觉（图片 + 标签组 + 说明 + 预约链接）
   主站 .service-card 是图标卡片、结构与老站不同，故用 xd- 前缀避免冲突
   ============================================================ */

.xd-scard {
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
  padding: 28px;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.xd-scard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--primary, #1565C0);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
  z-index: 2;
}
.xd-scard:hover {
  box-shadow: 0 12px 32px rgba(16, 24, 40, .12);
  transform: translateY(-4px);
  border-color: #dbe3ee;
}
.xd-scard:hover::before { transform: scaleX(1); }
.xd-scard:hover .xd-scard-img img { transform: scale(1.05); }

.xd-scard h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main, #1a2233);
  margin-bottom: 14px;
  letter-spacing: -.2px;
}

.xd-scard-img {
  margin: -28px -28px 18px;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  height: 200px;
}
.xd-scard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}

.xd-scard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.xd-scard-tag {
  font-size: 14px;
  color: #5a6472;
  background: #f0f2f5;
  padding: 6px 12px;
  border-radius: 8px;
  line-height: 1.4;
}

.xd-scard p {
  font-size: 1rem;
  color: var(--text-sub, #5a6b7d);
  line-height: 1.75;
  margin-bottom: 0;
}

.xd-scard-more {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary, #1565C0);
  text-decoration: none;
}
.xd-scard-more:hover { text-decoration: underline; }
.xd-scard-more svg { width: 17px; height: 17px; }

/* ---------- 卡片栅格 ---------- */
.xd-scard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 900px) {
  .xd-scard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 600px) {
  .xd-scard-grid { grid-template-columns: 1fr; }
  .xd-scard { padding: 20px; }
  .xd-scard-img { margin: -20px -20px 14px; height: 160px; }
}

/* ============================================================
   2. 价格表（原站 CSS 未定义裸 table 样式，会显示成无样式表格）
   ============================================================ */
.section table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
  font-size: 15px;
}
.section table thead th {
  background: #f7f9fc;
  color: var(--text-main, #1a2233);
  font-weight: 700;
  font-size: 15px;
  text-align: left;
  padding: 16px 22px;
  border-bottom: 1px solid #e6ebf2;
  white-space: nowrap;
}
.section table tbody td {
  padding: 15px 22px;
  border-bottom: 1px solid #f1f4f9;
  color: var(--text-sub, #5a6b7d);
  line-height: 1.6;
  vertical-align: top;
}
.section table tbody tr:last-child td { border-bottom: none; }
.section table tbody tr:hover td { background: #fafbfd; }
.section table tbody td:first-child {
  color: var(--text-main, #1a2233);
  font-weight: 600;
}
.section table tbody td:nth-child(2) {
  color: var(--primary, #1565C0);
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .section table { font-size: 14px; }
  .section table thead th,
  .section table tbody td { padding: 12px 14px; }
}

/* ============================================================
   3. 顶部导航防换行
   原站 .main-nav a 未设置 white-space，靠项数与文字长度正好放下；
   /cn/ 导航项文案较长时会被挤成两行，这里兜底
   ============================================================ */
@media (min-width: 901px) {
  .main-nav a {
    white-space: nowrap;
    padding: 10px 13px;
    font-size: .95rem;
  }
}

/* ============================================================
   5. 移动端页脚优化
   原站 768px 以下把 .footer-grid 设为单列，三组链接纵向堆叠过长
   → 改为两列：品牌区与联系方式跨列，链接组并排
   ============================================================ */
@media (max-width: 768px) {
  /* 移动端 footer 定位：辅助导航 + 版权，不做信息展示区。
     简介文字手机上没有阅读价值，一律隐藏 */
  .footer-about { grid-column: 1 / -1; padding-bottom: 0; }
  .footer-about p { display: none; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    padding-bottom: 10px;
  }
  .footer-col:last-child { grid-column: 1 / -1; }

  .footer-col h4 {
    font-size: .9rem;
    margin-bottom: 7px;
    padding-bottom: 5px;
  }
  .footer-links li {
    font-size: .84rem;
    margin-bottom: 3px;
    line-height: 1.45;
  }

  /* 联系方式：电话/微信/邮箱横排成两行；
     工作时间在桌面端仍显示，移动端不占位置（顶部电话条与预约区已有） */
  .footer-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 16px;
  }
  .footer-contact li {
    font-size: .84rem;
    margin-bottom: 0;
    line-height: 1.45;
  }
  .footer-contact li:last-child { display: none; }

  /* 服务区域：紧凑换行，减少纵向占用 */
  .footer-areas {
    font-size: .75rem;
    gap: 2px 10px;
    padding: 9px 0 2px;
    line-height: 1.6;
  }

  /* 底部留白，避免被悬浮拨号按钮遮挡 */
  .site-footer { padding-bottom: 54px; }
  /* 版权文字右侧留空，避开右下角悬浮按钮；标语在桌面端保留 */
  .footer-bottom { padding: 9px 60px 9px 0; font-size: .76rem; }
  .footer-bottom .ft-tagline { display: none; }
}

@media (max-width: 480px) {
  .footer-grid { gap: 12px 12px; }
  .footer-col h4 { font-size: .9rem; margin-bottom: 7px; }
  .footer-links li,
  .footer-contact li { font-size: .84rem; margin-bottom: 3px; }
  .footer-areas { font-size: .74rem; gap: 2px 8px; }
}

/* ============================================================
   7. 返回顶部按钮
   ⚠ 原站存在类名不匹配：style.css 定义 `.back-to-top.show{display:flex}`，
     但 js/common.js 动态创建时加的是 `.visible`（第 65 行）→ 按钮永不显示。
     原文件不动，这里补 .visible 规则；移动端再与右下角拨号按钮错开。
   ============================================================ */
.back-to-top.visible { display: flex; }

/* 原站为 rgba(16,55,92,.88) 半透明深蓝、无描边、无投影 —— 主色本就偏暗（#10375C），
   半透明后更是发闷，在浅色背景上几乎沉进去。
   → 改为主色实色 + 白色描边 + 投影，让它从内容里跳出来。
   用蓝不用橙：右下角的橙色拨号按钮是转化入口，返回顶部是导航辅助，
   两者同色会混淆，视觉层级上也应让位给拨号按钮。 */
.back-to-top {
  background: var(--primary, #10375C);
  border: 2px solid #fff;
  box-shadow: 0 4px 14px rgba(10, 37, 64, .38);
}
.back-to-top:hover {
  background: var(--primary-dark, #0A2540);
  box-shadow: 0 6px 18px rgba(10, 37, 64, .48);
}

/* ⚠ 箭头默认是深色的：common.js 创建的 svg 是
   `<path d="M18 15l-6-6-6 6"/>`，未指定 fill/stroke，
   SVG 默认 fill=black、stroke=none → 渲染成深色实心三角。
   CSS 的 `color:#fff` 对没有用 currentColor 的 path 无效。
   → 显式改为白色描边箭头（折线路径用 stroke 才是"⌃"形箭头，
     用 fill 会变成实心三角）。 */
.back-to-top svg {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 768px) {
  /* 拨号按钮 bottom:24 高 56（占 24–80），返回顶部上移到其之上，间距 12px */
  .back-to-top { right: 18px; bottom: 92px; width: 42px; height: 42px; }
  .back-to-top svg { width: 20px; height: 20px; }
}

/* ============================================================
   6. 预约区左侧：微信模块
   ============================================================ */
.pg-book-wechat {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(128, 128, 128, .25);
}
.pg-book-wechat img {
  flex-shrink: 0;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
}
.pg-book-wxid {
  margin: 2px 0 4px;
  font-weight: 700;
  font-size: 1.05rem;
  color: inherit;
}
.pg-book-wechat .pg-book-tip {
  margin: 0;
  font-size: .85rem;
  opacity: .8;
}
@media (max-width: 560px) {
  .pg-book-wechat {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ============================================================
   覆盖范围：无链接点位（span）
   ------------------------------------------------------------
   镇级/组合页列该镇真实社区、小区、道路。这些点位页尚未生成，
   若渲染成 <a> 会产生大量 404，故用 span 保留视觉一致性，
   同时去掉 hover 反色与指针，避免「看起来能点却点不动」。
   ============================================================ */
span.pg-town-item {
  cursor: default;
}
span.pg-town-item:hover {
  background: #fff;
  color: #1E2B3A;
  border-color: #E2E9F0;
}

/* ============================================================
   7. 移动端页脚：只留 Logo + 联系方式
   手机上的页脚是「收尾区」，不是导航区。原来带着「快速链接（6）+
   服务项目（10）+ 服务区域（16 区）」三块，页脚被撑到 679px（0.80 屏），
   比首屏还长。

   ⇒ 768px 以下只保留品牌 Logo 与联系方式，其余三块 display:none。
     ⚠️ 只是视觉隐藏，**HTML 里全部保留**：桌面端与搜索引擎看到的仍是
     完整的 10 个服务 + 16 区内链，不影响 SEO 与内链权重。
   ============================================================ */
@media (max-width: 768px) {
  /* 取消两列网格，改为单列纵向 */
  .footer-grid { display: block; }

  /* 先全部隐藏，再放行品牌与联系方式两列 */
  .footer-grid > .footer-col { display: none; }
  .footer-grid > .footer-about,
  .footer-grid > .footer-col:last-child { display: block; }

  /* 品牌：居中，只留 Logo（简介手机上没有阅读价值） */
  .footer-about {
    text-align: center;
    padding: 2px 0 16px;
  }
  .footer-about p { display: none; }
  .footer-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
  }

  /* 联系方式：居中成组，电话单列加重（转化入口） */
  .footer-grid > .footer-col:last-child {
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .footer-grid > .footer-col:last-child h4 { display: none; }

  .footer-contact {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }
  .footer-contact li {
    font-size: .84rem;
    line-height: 1.5;
    margin-bottom: 0;
    opacity: .88;
  }
  .footer-contact li:first-child {
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: .2px;
    margin-bottom: 2px;
    opacity: 1;
  }
  .footer-contact li:last-child { display: none; }   /* 工作时间 */

  /* 服务区域（16 区）移动端隐藏；桌面端完整保留 */
  .footer-areas { display: none; }

  /* 收尾：版权居中，底部留白避开悬浮拨号按钮 */
  .site-footer { padding-bottom: 52px; }
  .footer-bottom {
    text-align: center;
    padding: 12px 0 6px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .76rem;
    opacity: .75;
  }
  .footer-bottom .ft-tagline { display: none; }
}


/* ============================================================
   8. 预约表单：移动端折叠「选填项」
   表单原有 9 个字段（姓名/电话/服务大类/细分服务/所在区/镇街道/
   小区园区/门牌号/留言备注），移动端拉出 2.7 屏。
   手机用户填 9 个字段的成本，远高于直接点一下电话——但表单又不能删
   （桌面端需要、后端接口依赖字段名）。
   ⇒ 把 3 个选填字段收进 <details class="xd-form-more">「补充说明」，
     移动端默认收起（必填 6 个，约 1.9 屏）；桌面端保持展开，一条不少。
   ⚠️ 收起只是 display:none，字段仍在 DOM 里，提交时照常发送。
   ============================================================ */
.xd-form-more {
  margin: 2px 0 16px;
  padding-top: 10px;
  border-top: 1px dashed #E2E9F0;
}
.xd-form-more > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  font-size: .92rem;
  color: #5A6B7C;
  cursor: pointer;
  list-style: none;
}
.xd-form-more > summary::-webkit-details-marker { display: none; }
.xd-form-more > summary::before {
  content: "+";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid #C6D2DE;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  color: #10375C;
}
.xd-form-more[open] > summary::before { content: "\2212"; }
.xd-form-more[open] > summary { margin-bottom: 4px; }

@media (max-width: 768px) {
  /* 字段间距收紧，配合折叠把预约区整体压短 */
  .xd-form-row .xd-form-group { margin-bottom: 12px; }
  .xd-form-more {
    margin-bottom: 12px;
    padding-top: 8px;
  }
  .xd-form-more > summary { padding: 9px 0; }   /* 保证点击区域够手指 */
}

/* ============================================================
   预约表单 v3.8 补充样式（配套 cn-booking.js）
   色值沿用 style-xudanet.css：主色 #1a6fb5→#155a94，深蓝文字 #10375C，
   次要文字 #7c8a99 / #a3afbb，必填标 #e74c3c
   ============================================================ */

/* 分组小标题：一条虚线分隔 + 一根短竖线 + 文字 */
.cnb-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 14px;
  padding-top: 14px;
  border-top: 1px dashed #e2e9f0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #34495e;
  letter-spacing: .3px;
}

.cnb-group::before {
  content: '';
  flex: none;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #1a6fb5, #155a94);
}

/* 「下拉里没有我的需求」的出口提示 —— 常显，默认灰、选中「其他」后变蓝加粗。
   常显是刻意的：让客户在**不打开下拉**的情况下就知道有出路，
   否则看不到想找的选项就直接关页面了。 */
.cnb-hint {
  margin: -4px 0 14px;
  font-size: 0.8rem;
  color: #a3afbb;
  line-height: 1.6;
}

.cnb-hint.is-on {
  color: #1a6fb5;
  font-weight: 600;
}

/* 提交按钮下的一句安心话（消除"填了电话会被骚扰"的顾虑） */
.cnb-safe {
  margin-top: 11px;
  font-size: 0.8rem;
  color: #a3afbb;
  text-align: center;
  line-height: 1.6;
}

.cnb-safe b { color: #7c8a99; font-weight: 600; }

@media (max-width: 768px) {
  .cnb-group {
    margin-bottom: 12px;
    padding-top: 12px;
  }
  .cnb-hint { margin-bottom: 12px; }
}


/* ============================================================
   首页语言入口条（只用在一个地方：cn/index.html 的页头之上）
   ⚠️ 只有站点首页与中文版首页放语言切换；/cn/ 其他页面不要加。
   ============================================================ */
.lang-bar { background: #10375c; }

.lang-bar .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.lang-bar a {
  color: #cfe0f0;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 5px 12px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}

.lang-bar a:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.lang-bar a.is-current { background: #f57c00; color: #fff; font-weight: 600; }

@media (max-width: 768px) {
  .lang-bar .container { justify-content: center; }
}