/* ============================================================
   消防服务撮合平台 · 业务页样式（service.css）
   依赖 css/style.css 的暗色变量：--bg-2 --ink --ink-2 --line --red 等
   ============================================================ */

/* ============================================================
   对比度修复（2026-09-21）—— 作用域级文字变量重定义
   问题：style.css 的 --ink / --ink-2 / --ink-3 是「暗色主题（ROBOTICS DARK）」
        的主/次/弱文字色（#eef2fa 近白 / #9aa8bf / #8695a9），而业务页
        （service-*、providers、provider-join、provider-home）通体白底，
        直接沿用会出现「近白字落在白底上」几乎不可见：
          实测 .svc-flow h5 对比度 1.04、.svc-cta h3 对比度 1.12（WCAG 要求 ≥4.5）
   方案：在本文件作用域内把三个文字变量改写为深墨色；
        仅深色容器（城市选择弹窗 .cpk-dlg）内部还原为原暗色值。
   ============================================================ */
/* ============================================================
   对比度修复（2026-09-21）—— 浅底容器作用域文字变量覆盖
   问题：style.css 的 --ink / --ink-2 / --ink-3 是「暗色主题（ROBOTICS DARK）」
        的主/次/弱文字色（#eef2fa 近白 / #9aa8bf / #8695a9）。业务页深浅混排：
        hero / .svc-cover .cc / .svc-prov / footer / .cpk-dlg 是深色底（用原值正确），
        而下面这些容器是白底，沿用近白字就变成「白字落白底」几乎不可见：
          实测 .svc-flow h5 对比度 1.04、.svc-cta h3 对比度 1.12（WCAG 要求 ≥4.5）
   ⚠️ 教训：不要图省事用 :root 全局重定义 —— 深色区文字会立刻变成隐形
        （实测改完新增 20 类 cr≈1.2 的新问题）。必须按容器作用域覆盖。
   ============================================================ */
.svc-crumb, .svc-flow, .svc-cta, .svc-form, .svc-side, .svc-chips {
  --ink: #12263c;      /* 主文字：白底对比度 ≈ 13.4 */
  --ink-2: #4a5c74;    /* 次级文字：白底对比度 ≈ 6.8 */
  --ink-3: #5f7288;    /* 弱文字：白底对比度 ≈ 4.8（12px 小字也达标） */
}
/* 侧栏价格用 --gold(#f4a825)：白底对比度仅 2.0，换深金色 ≈4.2（30px 大字阈值 3.0） */
.svc-side { --gold: #a8700a; }

/* 白底区内的 .btn-ghost：官网 style.css 的 .btn-ghost 是深色 hero 专用
   （白字 + 半透明白底），落在白底卡片上会「白字白底」完全不可见（实测对比度 1.0）。
   深色 hero 内的 .btn-ghost 保持原样。 */
.svc-cta .btn-ghost, .svc-side .btn-ghost {
  background: #fff; color: #12325c; border: 1px solid #ccd7e6;
  backdrop-filter: none; box-shadow: 0 1px 3px rgba(16, 42, 74, .05);
}
.svc-cta .btn-ghost:hover, .svc-side .btn-ghost:hover {
  background: #fff5f5; color: #c1121f; border-color: #f0b6bc;
}

/* 白底 CTA 区内的 .btn-ghost：官网 style.css 的 .btn-ghost 是深色 hero 专用
   （白字 + 半透明白底），落在 .svc-cta 的白底卡片上会「白字白底」完全不可见
   （实测对比度 1.0）。深色 hero 内的 .btn-ghost 保持不变。 */
.svc-cta .btn-ghost {
  background: #fff; color: #12325c; border: 1px solid #ccd7e6;
  backdrop-filter: none; box-shadow: 0 1px 3px rgba(16, 42, 74, .05);
}
.svc-cta .btn-ghost:hover {
  background: #fff5f5; color: #c1121f; border-color: #f0b6bc;
}

/* ---------- 面包屑 ---------- */
.svc-crumb { padding: 16px 0 0; font-size: 12.5px; color: var(--ink-3); }
.svc-crumb a { color: var(--ink-2); }
.svc-crumb a:hover { color: var(--red); }
.svc-crumb span { margin: 0 7px; color: var(--ink-3); opacity: 1; }

/* ---------- 城市条 ---------- */
.svc-citybar {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(255, 255, 255, .04); font-size: 13px; color: var(--ink-2);
}
.svc-citybar b { color: var(--ink); font-weight: 700; }
.svc-citybar button {
  border: 0; background: none; color: var(--blue-hi); cursor: pointer;
  font-size: 12.5px; padding: 0; text-decoration: underline; text-underline-offset: 3px;
}
.svc-citybar button:hover { color: var(--red-hi); }

/* ---------- 通用区块标题（沿用 sec-ta） ---------- */
.svc-tag { font-size: 11.5px; letter-spacing: .18em; color: var(--red-hi); font-weight: 800; }

/* ---------- 服务内容卡片 ---------- */
.svc-cover { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc-cover .cc {
  padding: 20px 20px 22px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2); transition: .22s var(--ease);
}
.svc-cover .cc:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.svc-cover .cc h4 {
  margin: 0 0 9px; font-size: 15.5px; color: var(--ink); font-weight: 700;
  display: flex; align-items: center; gap: 9px;
}
.svc-cover .cc h4::before {
  content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--grad-red); flex: 0 0 auto;
}
.svc-cover .cc p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--ink-2); }

/* ---------- 服务流程 ---------- */
.svc-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.svc-flow .fs {
  position: relative; padding: 22px 16px 20px; border: 1px solid var(--line);
  border-radius: var(--r); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
}
.svc-flow .fs .no {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-red); color: #fff; font-size: 13px; font-weight: 800; margin-bottom: 12px;
  font-family: var(--f-num);
}
.svc-flow .fs h5 { margin: 0 0 7px; font-size: 14.5px; color: var(--ink); font-weight: 700; }
.svc-flow .fs p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.svc-flow .fs:not(:last-child)::after {
  content: ""; position: absolute; right: -10px; top: 36px; width: 8px; height: 8px;
  border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2);
  transform: rotate(45deg);
}

/* ---------- 适用对象 chips ---------- */
.svc-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-chips span {
  padding: 8px 15px; border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 13px; color: var(--ink-2); background: rgba(255,255,255,.03);
}
.svc-chips span:hover { color: var(--ink); border-color: var(--red); }

/* ---------- 交付物 + 法规 ---------- */
.svc-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.svc-panel {
  padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2);
}
.svc-panel h3 { margin: 0 0 14px; font-size: 16px; color: var(--ink); font-weight: 700; }
.svc-panel ul { margin: 0; padding: 0; list-style: none; }
.svc-panel li {
  padding: 8px 0 8px 22px; position: relative; font-size: 13.5px; color: var(--ink-2); line-height: 1.7;
  border-bottom: 1px dashed var(--line);
}
.svc-panel li:last-child { border-bottom: 0; }
.svc-panel li::before {
  content: ""; position: absolute; left: 4px; top: 15px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--blue);
}
.svc-law li::before { background: var(--gold); }
.svc-law li b { color: var(--ink); font-weight: 700; }

/* ---------- FAQ ---------- */
.svc-faq { max-width: 900px; margin: 0 auto; }
.svc-faq details {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2);
  margin-bottom: 10px; overflow: hidden;
}
.svc-faq summary {
  cursor: pointer; padding: 15px 20px; font-size: 14.5px; color: var(--ink); font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; list-style: none;
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after {
  content: "+"; font-size: 18px; color: var(--red-hi); font-weight: 700; flex: 0 0 auto;
  transition: .2s var(--ease);
}
.svc-faq details[open] summary::after { content: "−"; }
.svc-faq details[open] summary { border-bottom: 1px solid var(--line); }
.svc-faq .ans { padding: 14px 20px 18px; font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }

/* ---------- CTA ---------- */
.svc-cta {
  padding: 40px 0 56px; text-align: center;
}
.svc-cta .box {
  padding: 36px 28px; border: 1px solid var(--line-2); border-radius: 14px;
  background: linear-gradient(135deg, rgba(217,43,63,.14), rgba(59,130,246,.08));
}
.svc-cta h3 { margin: 0 0 10px; font-size: 22px; color: var(--ink); font-weight: 800; }
.svc-cta p { margin: 0 0 20px; font-size: 14px; color: var(--ink-2); }
.svc-cta .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- 列表页 ---------- */
.svc-filter {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2); margin-bottom: 18px;
}
.svc-filter .lb { font-size: 13px; color: var(--ink-3); }
.svc-filter select, .svc-filter input {
  padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: rgba(255,255,255,.05); color: var(--ink); font-size: 13px; font-family: var(--f-body);
}
.svc-filter select:focus, .svc-filter input:focus { outline: none; border-color: var(--red); }
.svc-filter .sp { flex: 1 1 auto; }
.svc-filter .cnt { font-size: 13px; color: var(--ink-3); }
.svc-filter .cnt b { color: var(--red-hi); font-family: var(--f-num); }

.svc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.svc-item {
  display: flex; flex-direction: column; padding: 22px 24px 20px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2);
  transition: .22s var(--ease);
}
.svc-item:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.svc-item .hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.svc-item h4 { margin: 0; font-size: 16px; color: var(--ink); font-weight: 700; }
.svc-item .tag {
  flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: rgba(59,130,246,.16); color: var(--blue-hi); border: 1px solid rgba(59,130,246,.3);
}
.svc-item .tag.hot { background: rgba(217,43,63,.16); color: var(--red-hi); border-color: rgba(217,43,63,.32); }
.svc-item .desc { margin: 10px 0 14px; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
.svc-item .meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; }
.svc-item .meta i { font-style: normal; color: var(--ink-2); }
.svc-item .cov { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.svc-item .cov em {
  font-style: normal; padding: 4px 9px; border-radius: 4px; font-size: 11.5px;
  background: rgba(255,255,255,.05); color: var(--ink-2); border: 1px solid var(--line);
}
.svc-item .ft { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.svc-item .price { font-size: 13px; color: var(--ink-2); }
.svc-item .price b { font-family: var(--f-num); font-size: 20px; color: var(--gold); }
.svc-item .price .lock { font-size: 12.5px; color: var(--ink-3); }

.svc-empty {
  grid-column: 1 / -1; padding: 54px 20px; text-align: center;
  border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--ink-3); font-size: 14px;
}
.svc-empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 8px; }

/* ---------- 详情页 ---------- */
.svc-detail { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.svc-main { padding: 28px 30px 32px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.svc-main h1 { margin: 0 0 8px; font-size: 26px; color: var(--ink); font-weight: 800; line-height: 1.4; }
.svc-main .sub { margin: 0 0 22px; font-size: 14px; color: var(--ink-2); line-height: 1.8; }
.svc-main h3 { margin: 26px 0 12px; font-size: 16px; color: var(--ink); font-weight: 700; }
.svc-main ul { margin: 0; padding: 0; list-style: none; }
.svc-main ul li {
  padding: 9px 0 9px 22px; position: relative; font-size: 13.5px; color: var(--ink-2);
  border-bottom: 1px dashed var(--line); line-height: 1.7;
}
.svc-main ul li:last-child { border-bottom: 0; }
.svc-main ul li::before {
  content: ""; position: absolute; left: 4px; top: 16px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--red);
}
.svc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.svc-table th, .svc-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.svc-table th { width: 120px; color: var(--ink-3); font-weight: 500; }
.svc-table td { color: var(--ink); }

.svc-side { position: sticky; top: 20px; }
.svc-side .card {
  padding: 24px 22px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.svc-side .pz { font-size: 12.5px; color: var(--ink-3); }
.svc-side .pz b { display: block; font-family: var(--f-num); font-size: 30px; color: var(--gold); line-height: 1.2; margin-top: 4px; }
.svc-side .pz .lock { font-size: 15px; color: var(--ink-2); }
.svc-side .acts { margin-top: 18px; display: grid; gap: 10px; }
.svc-side .note { margin-top: 14px; font-size: 12px; color: var(--ink-3); line-height: 1.7; }

/* ---------- 服务商入驻：分级 ---------- */
.svc-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc-level {
  padding: 24px 22px 22px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2); display: flex; flex-direction: column;
}
.svc-level .lv {
  font-family: var(--f-num); font-size: 26px; font-weight: 800; color: var(--red-hi); line-height: 1;
}
.svc-level h4 { margin: 10px 0 4px; font-size: 16px; color: var(--ink); font-weight: 700; }
.svc-level .sc {
  display: inline-block; align-self: flex-start; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: rgba(244,168,37,.14); color: var(--gold);
  border: 1px solid rgba(244,168,37,.3); margin-bottom: 12px;
}
.svc-level .rg { font-size: 13px; color: var(--ink-2); line-height: 1.7; margin: 0 0 14px; }
.svc-level ul { margin: 0 0 16px; padding: 0; list-style: none; }
.svc-level li {
  padding: 6px 0 6px 20px; position: relative; font-size: 12.5px; color: var(--ink-2); line-height: 1.65;
}
.svc-level li::before {
  content: "✓"; position: absolute; left: 0; color: var(--green); font-size: 11px;
}
.svc-level .tm {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--ink-3);
}
.svc-level .tm b { color: var(--ink); font-family: var(--f-num); }

/* ---------- 入驻表单 ---------- */
.svc-form { max-width: 720px; margin: 0 auto; }
.svc-form .fg { margin-bottom: 16px; }
.svc-form label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 7px; }
/* 必填星号：--red-hi(#ff4d5e) 在白底上对比度仅 3.24，改用 --red(#d92b3f) 约 4.8 达标 */
.svc-form label em { color: var(--red); font-style: normal; }
.svc-form input, .svc-form select, .svc-form textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: rgba(255,255,255,.05); color: var(--ink); font-size: 14px; font-family: var(--f-body);
  box-sizing: border-box;
}
.svc-form textarea { min-height: 92px; resize: vertical; }
.svc-form input:focus, .svc-form select:focus, .svc-form textarea:focus { outline: none; border-color: var(--red); }
.svc-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.svc-form .hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.6; }
.svc-form .msg { margin-top: 14px; font-size: 13.5px; display: none; padding: 11px 14px; border-radius: var(--r-sm); }
.svc-form .msg.ok { display: block; background: rgba(52,211,153,.12); color: var(--green); border: 1px solid rgba(52,211,153,.3); }
.svc-form .msg.err { display: block; background: rgba(217,43,63,.12); color: var(--red-hi); border: 1px solid rgba(217,43,63,.3); }

/* ---------- 服务商卡片 ---------- */
.svc-prov { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc-prov .pv {
  padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2); transition: .22s var(--ease);
}
.svc-prov .pv:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.svc-prov .pv .th { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.svc-prov .pv .av {
  width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
  background: var(--grad-blue); color: #fff; font-weight: 800; font-size: 17px; flex: 0 0 auto;
}
.svc-prov .pv h4 { margin: 0; font-size: 15px; color: var(--ink); font-weight: 700; }
.svc-prov .pv .lv { font-size: 11.5px; color: var(--gold); margin-top: 3px; }
.svc-prov .pv p { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.svc-prov .pv .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-prov .pv .tags em {
  font-style: normal; padding: 3px 8px; border-radius: 4px; font-size: 11px;
  background: rgba(255,255,255,.05); color: var(--ink-2); border: 1px solid var(--line);
}

/* ---------- 城市选择弹窗（js/city-picker.js） ---------- */
.cpk-mask {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: rgba(3, 6, 12, .62); backdrop-filter: blur(3px); padding: 20px;
}
.cpk-dlg {
  width: min(660px, 100%); max-height: 78vh; display: flex; flex-direction: column;
  border: 1px solid var(--line-2); border-radius: 14px; background: #0b1220;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.cpk-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--line);
}
.cpk-hd b { font-size: 15.5px; color: var(--ink); }
.cpk-x {
  border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 15px; padding: 4px 6px;
}
.cpk-x:hover { color: var(--red-hi); }
.cpk-top { padding: 13px 18px; border-bottom: 1px solid var(--line); }
.cpk-kw {
  width: 100%; box-sizing: border-box; padding: 10px 13px; font-size: 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .05); color: var(--ink); font-family: var(--f-body);
}
.cpk-kw:focus { outline: none; border-color: var(--red); }
.cpk-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 18px 18px; }
.cpk-load { padding: 40px 0; text-align: center; color: var(--ink-3); font-size: 13.5px; }
.cpk-sec { padding-top: 14px; }
.cpk-sec > b, .cpk-prov > b {
  display: block; font-size: 12px; color: var(--ink-3); font-weight: 600; margin-bottom: 9px;
}
.cpk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cpk-cs { display: flex; flex-wrap: wrap; gap: 8px; }
.cpk-chips button, .cpk-cs button {
  padding: 7px 13px; border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .04); color: var(--ink-2); font-size: 13px; font-family: var(--f-body);
  transition: .16s var(--ease);
}
.cpk-chips button:hover, .cpk-cs button:hover { color: var(--ink); border-color: var(--red); background: rgba(217, 43, 63, .1); }
.cpk-list { margin-top: 8px; }
.cpk-prov { padding: 12px 0 4px; border-top: 1px dashed var(--line); }
.cpk-prov:first-child { border-top: 0; }
.cpk-body::-webkit-scrollbar { width: 8px; height: 8px; }
.cpk-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 8px; }
.cpk-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .28); }
.cpk-body::-webkit-scrollbar-track { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  .cpk-body { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .svc-cover, .svc-levels, .svc-prov { grid-template-columns: repeat(2, 1fr); }
  .svc-flow { grid-template-columns: repeat(3, 1fr); }
  .svc-detail { grid-template-columns: 1fr; }
  .svc-side { position: static; }
}
@media (max-width: 720px) {
  .svc-cover, .svc-levels, .svc-prov, .svc-list, .svc-2col { grid-template-columns: 1fr; }
  .svc-flow { grid-template-columns: 1fr 1fr; }
  .svc-flow .fs:not(:last-child)::after { display: none; }
  .svc-form .row2 { grid-template-columns: 1fr; }
  .svc-main { padding: 22px 18px 26px; }
  .svc-main h1 { font-size: 21px; }
}