/* ==========================================================================
   转让站内容页（关于我们 / 服务项目 / 新闻资讯 / 联系我们）
   外壳（顶栏、页头、页脚）复用 zrlist.css 里的 .z-top / .z-hero / .z-hd / .z-foot，
   本文件只放内容页特有的部分，避免把两套样式复制一遍。
   ========================================================================== */

/* ---------- 内页页头：比列表页的 hero 矮一些，带面包屑 ---------- */
.z-ph{background:linear-gradient(135deg,#1b49b8 0%,#2f7fff 100%);padding-bottom:26px}
.z-ph .z-hd{padding:14px 0 0}
.z-ph .z-hd h1{font-size:25px;margin-bottom:0}
.z-ph .z-crumb{font-size:13px;color:#bcd4ff;margin:0 0 10px}
.z-ph .z-crumb a{color:#d6e4ff}
.z-ph .z-crumb a:hover{color:#fff}
.z-ph .z-crumb i{font-style:normal;margin:0 7px;color:#8fb0ee}

/* ---------- 内容区 ---------- */
.z-sec{padding:30px 0}
.z-panel{background:#fff;border-radius:10px;padding:30px 34px;margin-bottom:18px;border:1px solid #eceef2}
.z-panel>h2{margin:0 0 8px;font-size:19px;font-weight:700;color:#1d232b}
.z-panel>h2 em{font-style:normal;font-size:13px;font-weight:400;color:#9aa2ad;margin-left:10px}
.z-panel>h3{margin:22px 0 8px;font-size:15px;font-weight:600;color:#1d232b}
.z-prose{margin:0;font-size:14px;line-height:1.95;color:#4a5361}
.z-prose+.z-prose{margin-top:12px}
.z-prose b{color:#1d232b}
.z-panel ul.z-plain{margin:10px 0 0;padding-left:20px;font-size:14px;line-height:2;color:#4a5361}
.z-panel ul.z-plain li::marker{color:#2f7fff}
.z-panel hr{border:none;border-top:1px solid #f0f2f5;margin:24px 0}

/* ---------- 数据行 ---------- */
.z-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.z-stat{background:#fff;border:1px solid #eceef2;border-radius:10px;padding:22px 10px;text-align:center}
.z-stat b{display:block;font-size:30px;font-weight:800;color:#2f7fff;line-height:1;letter-spacing:-.5px}
.z-stat b i{font-style:normal;font-size:15px;font-weight:600;margin-left:2px}
.z-stat span{display:block;margin-top:8px;font-size:13px;color:#8b939f}

/* ---------- 卡片网格 ---------- */
.z-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.z-card{
  background:#fff;border:1px solid #eceef2;border-radius:10px;padding:20px 22px;
  transition:box-shadow .18s,border-color .18s;
}
.z-card:hover{box-shadow:0 6px 20px rgba(20,50,110,.09);border-color:#cfe0fd}
.z-card .ico{
  width:40px;height:40px;border-radius:10px;background:#eef4ff;color:#2f7fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:13px;font-size:18px;font-weight:800;
}
.z-card h3{margin:0 0 7px;font-size:15.5px;font-weight:600;color:#1d232b}
.z-card p{margin:0;font-size:13px;line-height:1.8;color:#7c858f}

/* 服务项一行式（18 项，密度高，不适合用大卡片） */
.z-svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.z-svc{
  display:flex;align-items:center;gap:11px;background:#fafbfd;border:1px solid #eef0f4;
  border-radius:8px;padding:12px 14px;
}
.z-svc .d{width:8px;height:8px;border-radius:50%;background:#2f7fff;flex:0 0 8px}
.z-svc b{font-size:14px;font-weight:600;color:#2b333d;white-space:nowrap}
/* min-width:0 必须显式给：flex 子项默认 min-width:auto，不加的话 nowrap 的文字
   会拒绝收缩，把格子顶宽，进而把整个页面撑出横向滚动。 */
.z-svc span{font-size:12px;color:#9aa2ad;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 流程步骤 ---------- */
.z-steps{display:flex;flex-wrap:wrap;gap:10px}
.z-step{
  flex:1 1 150px;background:#fafbfd;border:1px solid #eef0f4;border-radius:8px;
  padding:14px 14px;display:flex;align-items:center;gap:10px;
}
.z-step i{
  font-style:normal;width:24px;height:24px;border-radius:50%;background:#2f7fff;color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 24px;
}
.z-step b{font-size:13.5px;font-weight:600;color:#2b333d}

/* ---------- 新闻列表 ---------- */
.z-news{background:#fff;border-radius:10px;border:1px solid #eceef2;overflow:hidden}
.z-nitem{
  display:flex;align-items:center;gap:16px;padding:17px 24px;border-bottom:1px solid #f2f4f7;
}
.z-nitem:last-child{border-bottom:none}
.z-nitem:hover{background:#fafbfd}
.z-ndate{flex:0 0 100px;font-size:13px;color:#9aa2ad;font-variant-numeric:tabular-nums}
.z-nwrap{flex:1;min-width:0}
.z-ntitle{display:block;font-size:15px;color:#2b333d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.z-nitem:hover .z-ntitle{color:#2f7fff}
.z-ngo{flex:0 0 auto;font-size:13px;color:#c2c8d1}
.z-nitem:hover .z-ngo{color:#2f7fff}
.z-nsum{display:block;font-size:12.5px;color:#9aa2ad;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 联系我们 ---------- */
.z-cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.z-cbox{background:#fafbfd;border:1px solid #eef0f4;border-radius:10px;padding:20px 22px}
.z-cbox h4{margin:0 0 9px;font-size:13px;font-weight:600;color:#8b939f;letter-spacing:.5px}
.z-cbox p{margin:0;font-size:16px;font-weight:600;color:#1d232b;line-height:1.6}
.z-cbox p.sm{font-size:13.5px;font-weight:400;color:#5f6875;margin-top:6px}
.z-cbox a{color:#2f7fff}

/* ---------- 表单 ---------- */
.z-form{max-width:560px}
.z-fld{margin-bottom:15px}
.z-fld label{display:block;font-size:13px;color:#6b7480;margin-bottom:7px}
.z-fld input,.z-fld select,.z-fld textarea{
  width:100%;height:44px;border:1px solid #dfe3e9;border-radius:6px;padding:0 13px;
  font-size:14px;font-family:inherit;color:#333;outline:none;background:#fff;
}
.z-fld textarea{height:104px;padding:11px 13px;resize:vertical;line-height:1.7}
.z-fld input:focus,.z-fld select:focus,.z-fld textarea:focus{border-color:#2f7fff}
.z-fld.row2{display:flex;gap:13px}
.z-fld.row2>div{flex:1}
.z-submit{
  height:46px;padding:0 38px;border:none;border-radius:6px;background:#2f7fff;color:#fff;
  font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;
}
.z-submit:hover{background:#1e5fc4}
.z-submit:disabled{background:#a9c7f5;cursor:not-allowed}
.z-fmsg{font-size:13px;padding:10px 0 0;min-height:22px}
.z-fmsg.err{color:#ff3b30}
.z-fmsg.ok{color:#16a34a}
.z-tip{font-size:12.5px;color:#9aa2ad;line-height:1.8;margin-top:14px}

/* ---------- 委托发布表单（/zr/publish.html）----------
   字段集与校验方式对齐同类站：必填星号、成立年限单选、电话国码前缀、免责声明、双按钮。 */
.z-form.wide{max-width:760px}
.z-fld .req{color:#ff3b30;margin-left:2px}
.z-fld .hintx{font-size:12px;color:#b9bfc8;margin-top:5px;line-height:1.6}

/* 发布方式 / 我要什么 的分段切换 */
.z-tabs{display:inline-flex;background:#eef1f6;border-radius:22px;padding:4px;gap:4px;margin-bottom:6px}
.z-tabs button{
  border:none;background:transparent;border-radius:18px;padding:8px 22px;
  font-size:14px;color:#6b7480;
}
.z-tabs button.on{background:#fff;color:#2f7fff;font-weight:600;box-shadow:0 1px 4px rgba(20,50,110,.12)}

/* 单选组（成立年限） */
.z-radio{display:flex;flex-wrap:wrap;gap:10px 22px;padding-top:3px}
.z-radio label{
  display:inline-flex;align-items:center;gap:7px;font-size:14px;color:#4a5361;margin:0;
  cursor:pointer;line-height:1.2;
}
.z-radio input{width:16px;height:16px;margin:0;accent-color:#2f7fff;cursor:pointer}
.z-radio label.on{color:#2f7fff;font-weight:600}

/* 电话：国码前缀 + 号码 */
.z-phone{display:flex}
.z-phone .cc{
  flex:0 0 76px;height:44px;line-height:44px;text-align:center;font-size:14px;color:#5f6875;
  background:#f6f8fb;border:1px solid #dfe3e9;border-right:none;border-radius:6px 0 0 6px;
}
.z-phone input{border-radius:0 6px 6px 0}

/* 免责声明 */
.z-note{
  background:#fff9ec;border:1px solid #ffe6b8;border-radius:6px;padding:11px 14px;
  font-size:12.5px;color:#a1780f;line-height:1.75;margin:4px 0 18px;
}
.z-note b{color:#8a6205}

/* 按钮行 */
.z-actions{display:flex;gap:12px;flex-wrap:wrap}
.z-btn{
  flex:0 0 200px;height:48px;border-radius:6px;font-size:16px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;
}
.z-btn.solid{background:#ff7a1a;color:#fff}
.z-btn.solid:hover{background:#ea6a0c}
.z-btn.solid:disabled{background:#ffc79a;cursor:not-allowed}
.z-btn.line{background:#fff;color:#ff7a1a;border-color:#ffb87a}
.z-btn.line:hover{background:#fff6ef}

/* 顶部真实统计行 */
.z-statline{font-size:13.5px;color:#7c858f;margin:0 0 20px}
.z-statline b{color:#ff3b30;font-weight:800;font-size:16px;margin:0 2px}

/* 表单 + 右侧说明栏。
   只放表单的话，右侧会空掉一大片（表单实际用到 760px，面板有 1130px）——
   填一栏"发布须知 + 保障"既补全版面，也是委托流程里用户真正要确认的事。 */
.z-pub{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start}
.z-pubside{display:flex;flex-direction:column;gap:14px}
.z-sidecard{background:#f8fafc;border:1px solid #eef1f6;border-radius:8px;padding:18px 18px}
.z-sidecard h4{margin:0 0 12px;font-size:14px;color:#2b333d;font-weight:600}
.z-sidecard ul{margin:0;padding:0;list-style:none}
.z-sidecard li{
  position:relative;padding-left:16px;font-size:13px;color:#6b7480;line-height:1.85;
}
.z-sidecard li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:#2f7fff;
}
.z-sidecard li b{color:#2b333d;font-weight:600}
.z-tlist{display:flex;flex-direction:column;gap:11px}
.z-tlist .it{display:flex;align-items:flex-start;gap:10px}
.z-tlist .ic{
  flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:#eef4ff;color:#2f7fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
}
.z-tlist b{display:block;font-size:13.5px;color:#2b333d;font-weight:600}
.z-tlist span{display:block;font-size:12px;color:#9aa2ad;line-height:1.6;margin-top:1px}

@media(max-width:1100px){
  .z-pub{grid-template-columns:1fr}
  .z-pubside{order:2}
}

@media(max-width:900px){
  .z-actions{flex-direction:column}
  .z-btn{flex:1 1 auto;width:100%}
  .z-phone .cc{flex:0 0 64px}
  .z-tabs{display:flex;width:100%}
  .z-tabs button{flex:1}
}

/* ---------- 行动条 ---------- */
.z-cta{
  background:linear-gradient(90deg,#1a5fd6,#2f7fff);border-radius:10px;color:#fff;
  padding:28px 34px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.z-cta .t{flex:1;min-width:220px}
.z-cta h3{margin:0 0 6px;font-size:19px}
.z-cta p{margin:0;font-size:13.5px;opacity:.9}
.z-cta a{
  display:inline-flex;align-items:center;height:44px;padding:0 30px;border-radius:22px;
  background:#fff;color:#2f5fd6;font-size:15px;font-weight:600;white-space:nowrap;
}
.z-cta a:hover{background:#eef3ff}

/* ---------- 窄屏 ---------- */
@media(max-width:900px){
  .z-ph .z-hd h1{font-size:20px}
  .z-panel{padding:22px 18px}
  .z-stats{grid-template-columns:1fr 1fr;gap:10px}
  .z-stat b{font-size:24px}
  .z-cards{grid-template-columns:1fr}
  .z-svcs{grid-template-columns:1fr}
  .z-cgrid{grid-template-columns:1fr}
  .z-ndate{flex:0 0 76px;font-size:12px}
  .z-nitem{padding:14px 16px;gap:11px}
  .z-step{flex:1 1 100%}
  /* 并排的两个输入框在窄屏必须竖排：两列各有 min-width:auto，
     并排时会互相顶住不肯收缩，把页面撑宽。 */
  .z-fld.row2{flex-direction:column;gap:0}
  .z-cta{padding:22px 20px;gap:16px}
  .z-cta .t{min-width:0;flex:1 1 100%}
  .z-cta a{width:100%;justify-content:center}
}