/* =====================================================================
   contact.css — 客户服务页面（contactus.html）专用
   ---------------------------------------------------------------------
   ● 依赖 base.css 的全局变量(:root)，请先加载 base.css。
   ● 标签页(.tabs/.panel) 复用 company.css 的样式。
   ● 加载顺序：base → layout → … → download → contact → responsive
   ===================================================================== */

/* 上方信息卡片（工作时间 / 售后咨询 等） */
.info-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.info-card{display:flex;align-items:center;gap:26px;border:1px solid var(--line);border-radius:14px;
  background:var(--paper-2);padding:30px 32px;transition:border-color .18s,box-shadow .18s}
.info-card:hover{border-color:var(--steel-2);box-shadow:0 12px 30px rgba(11,22,32,.06)}

/* 图标 */
.info-card .ic-box{width:74px;height:74px;flex:none;display:flex;align-items:center;justify-content:center}
.info-card .ic-box svg{width:100%;height:100%}

/* 竖线分隔 + 文本 */
.info-card .ic-body{display:flex;align-items:center;gap:26px;flex:1;min-width:0}
.info-card .ic-divider{width:1px;align-self:stretch;background:var(--line);flex:none}
.info-card .ic-text{min-width:0}
.info-card h3{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:14px}
.info-card .lines{display:flex;align-items:center;flex-wrap:wrap;gap:0 18px;color:#4A5763;font-size:15.5px}
.info-card .lines span{position:relative;padding-right:18px}
.info-card .lines span:last-child{padding-right:0}
.info-card .lines span+span::before{content:"";position:absolute;left:-18px;top:3px;bottom:3px;width:1px;background:var(--line)}

/* 微信 */
.wechat-box{position:relative;margin-top:28px;display:flex;align-items:center;gap:24px;
  border:1px solid var(--line);border-radius:14px;background:var(--paper-2);padding:28px 32px}
.wechat-box .wc-icon{width:60px;height:60px;flex:none}
.wechat-box .wc-icon svg{width:100%;height:100%}
.wechat-box .wc-main{flex:1;min-width:0}
.wechat-box .wc-main h3{font-size:18px;font-weight:700;margin-bottom:14px}
.wechat-box .wc-body{display:flex;align-items:center;gap:24px}
.wechat-box .wc-id{font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--steel-2);
  display:inline-flex;align-items:center;gap:8px}
.wechat-box .wc-id .lbl{font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--slate)}
.wechat-box .wc-qr{margin-left:auto;width:120px;height:120px;flex:none;border:1px solid var(--line);
  border-radius:10px;background:#fff;padding:6px}
.wechat-box .wc-qr img{width:100%;height:100%;object-fit:contain}

@media(max-width:860px){
  .info-cards{grid-template-columns:1fr}
}
@media(max-width:680px){
  .info-card{flex-direction:column;align-items:flex-start;gap:16px;padding:24px}
  .info-card .ic-body{gap:0}
  .info-card .ic-divider{display:none}
  .info-card .lines{gap:6px 14px}
  .wechat-box{flex-wrap:wrap;padding:24px}
  .wechat-box .wc-qr{margin-left:0;margin-top:8px}
}

/* 二维码：点击可放大 */
.wechat-box .wc-qr{cursor:zoom-in;transition:border-color .18s}
.wechat-box .wc-qr:hover{border-color:var(--steel-2)}


/* ── 负责人姓名 ── */
.cc-name{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px;display:flex;align-items:center;gap:10px}
.cc-name .cc-role{font-size:12px;font-weight:500;color:var(--slate);background:var(--paper);
  border:1px solid var(--line);border-radius:20px;padding:3px 10px}

/* ── 多位负责人：翻页 ── */
.info-card.has-pager,.wechat-box.has-pager{position:relative}
.cc-page{display:none}
.cc-page.on{display:block;animation:ccfade .25s ease}
@keyframes ccfade{from{opacity:0}to{opacity:1}}

.cc-pager{position:absolute;top:16px;right:18px;display:flex;gap:4px}
.cc-pager .cc-dot{min-width:26px;height:26px;padding:0 6px;border:1px solid var(--line);border-radius:7px;
  background:var(--paper-2);color:var(--slate);font-family:var(--font-mono);font-size:12px;font-weight:600;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s}
.cc-pager .cc-dot:hover{border-color:var(--steel-2);color:var(--ink)}
.cc-pager .cc-dot.on{background:var(--ink);color:#fff;border-color:var(--ink)}

@media(max-width:680px){
  .cc-pager{top:12px;right:12px}
  .wechat-box .wc-body{flex-wrap:wrap}
  .wechat-box .wc-qr{margin-left:0;margin-top:6px}
}

/* 有翻页按钮时，为标题预留右侧空间，避免重叠 */
.info-card.has-pager .ic-text h3,
.wechat-box.has-pager .wc-main h3{padding-right:110px}