@charset "UTF-8";
/* ============================================================================
   在线留言页（page-leave-message.php）
   ----------------------------------------------------------------------------
   与「联系我们」页共用视觉语言：大留白、发丝线、无圆角、字号分层。
   ★ 只写本页独有的结构（.msg-*），复用的部分一律不重写：
     · 小横幅    → style.css 的 .page-banner（全站统一，不动）
     · 底部行动条 → style.css 的 .ct-cta / .ct-btn（联系页同款，直接复用）
     · 表单本身  → lead-form.css（与首页同一份）

   ★★★ 2026-10-29 改版：双栏 → 单栏居中
   ----------------------------------------------------------------------------
   原版面：grid 两列（左 1fr 说明 + 右 480px 表单卡）+ gap 80。
   现在：单列，卡片固定 600px 居中。

   为什么是 600 而不是原表单宽 400/415：
     ① 双栏时卡片宽 480 - 40*2 padding = 400，输入框偏窄，长材料名会挤；
     ② 单栏后整页只有这一块，若还用 400，两侧各留 400px 空白会显得空荡、
        像一个没做完的页面；600 在 1200 容器里左右各 300，留白够但不空旷；
     ③ 600 是「一屏能看清所有字段」的宽度上限 —— 再宽，视线从
        标签到输入框末端的水平移动距离就过长了。
     ★ 不用百分比：百分比在 1200 以下会跟着缩，导致手机断点前出现
       「比平板还窄」的怪异中间态。固定 600 + max-width:100% 更可控。

   ★ 卡片仍用浅灰底（--bg-soft + 发丝线）：
     表单是「只有底线的极简输入」，直接铺在纯白页面上会发散、没有边界。
     浅灰块等于给它一个"工作台"，视线自然收进去。
     这是站内已有语言（产品参数表头、提示块都在用），不是新造风格。
   ============================================================================ */

/* ===== ① 主区 ===== */
.msg-main{
  background:#fff;
  /* 上下留白比双栏时更收敛一点：单栏页面的重心是那块卡片，
     上方留太多会把卡片推到首屏之外（原来 64px 是为了和左栏标题对齐） */
  padding:56px 0 72px;
}

/* 单栏网格：唯一的列宽 600，在 .wrap 内容盒里水平居中 */
.msg-grid{
  display:grid;
  grid-template-columns:minmax(0,600px);
  justify-content:center;
  /* ★ align-items 必须是 start 而不是默认的 stretch：
     单列时只有一个子元素，stretch 会把它拉到与网格行等高；
     start 则按内容高度走（成功态塌陷问题由文件末尾的 min-height 兜住）。 */
  align-items:start;
}
/* 卡片撑满那一列（列本身已经 600 且居中，这里不需要再居中一次） */
.msg-col,
.msg-card{
  width:100%;
}
.msg-col{min-width:0;}

/* ============================================================================
   ★★★ 抵消「爱番番悬浮条」造成的右侧内边距不对称（2026-10-29 修）

   [现象] 视口 769~1330 之间，卡片整体向右偏 52px，1440 与 768 及以下正常。

   [根因] 不是本主题的 CSS。爱番番悬浮条会往 <head> 注入一段内联样式：

       @media (min-width:769px) and (max-width:1330px){
         .w1200, .wrap, .site-footer > .wrap, .site-footer > .w1200,
         .ft-wrap{ padding-right:72px !important; }
       }

   意图是让内容避开右侧那条 64px 宽的 fixed 悬浮条（72 = 64 + 8 空隙）。
   对**双栏/多栏**页面这是对的：内容只是整体左移，重心仍在中间。
   但本页是**单栏居中**（.msg-grid 600px 唯一列 + justify-content:center），
   居中是按「内容盒」算的 —— 左右 padding 一旦不等（20 / 72），
   内容盒中心就比视口中心偏左 26px，列再在内容盒里居中，结果整体右偏
   (72-20)/2 = 26 ... 实测偏 52 = 72 - 20，两者是同一个差值，只是参照不同。

   [修法] 在这段区间把 .msg-grid 的左右**一起**设成 72px：
     · 内容盒重新以视口为中心 → 卡片真正居中；
     · 右侧仍是 72px，悬浮条避让不受影响（这才是那条规则的本意）；
     · 代价是左侧多用 52px 留白，单栏页面上完全可接受，总比偏 52px 好。

   [为什么必须 !important + 双类] 注入的那条带 !important，且内联 <style>
   与主题 <link> 的先后顺序不由我们控制；用 .msg-grid.wrap（两个类）
   在特异性上压过 .wrap（一个类），再加 !important 才稳。

   [区间为何是 769~1330] 与注入规则完全一致：<=768 悬浮条切成底部横条、
   不再占右侧竖带，那段注入规则本身就不生效；>1330 容器右沿已让开悬浮条，
   内容无需避让，也就没有不对称。
   ========================================================================== */
@media (min-width:769px) and (max-width:1330px){
  .msg-grid.wrap{
    padding-left:72px !important;
    padding-right:72px !important;
  }
}

/* ===== ② 左栏说明（2026-10-29 已从模板移除，样式保留以便恢复） =====
   ★ 这四段（.msg-head / .msg-lead / .msg-list / .msg-quick）当前页面上
     完全不出现 —— 模板里的结构已删。保留原因：
     用户以后若想恢复双栏，把模板那段结构放回来即可立刻生效，不必重写样式；
     直接删掉的话，下次要恢复就得凭记忆重建。
   ★ 它们不参与布局（没有任何元素带这些 class），不会产生副作用。 */
.msg-head{margin-bottom:26px;}
.msg-head-en{
  display:block;font-size:12px;letter-spacing:1.8px;
  color:#aebecb;margin-bottom:9px;
}
.msg-head h2{
  font-size:22px;margin:0;color:#14222e;font-weight:700;
  padding-bottom:14px;position:relative;line-height:1.6;
}
.msg-head h2::after{
  content:"";position:absolute;left:0;bottom:0;
  width:36px;height:3px;background:var(--primary);border-radius:2px;
}
.msg-lead{
  font-size:15px;line-height:1.95;color:#5c6670;
  margin:0 0 34px;
}
.msg-list{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--border);
}
.msg-list li{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;
  padding:18px 0;
  border-bottom:1px solid var(--border);
}
.msg-list strong{
  font-size:14px;font-weight:600;color:var(--primary);
  letter-spacing:.02em;
}
.msg-list span{
  font-size:14px;line-height:1.85;color:#6b7480;
}
.msg-quick{
  margin-top:34px;padding:20px 22px;
  background:var(--bg-soft);
  border-left:3px solid var(--primary);
  font-size:14px;color:#5c6670;line-height:1.9;
}
.msg-quick a{
  display:block;margin:6px 0 2px;
  font-size:22px;font-weight:600;color:var(--primary);
  letter-spacing:.3px;white-space:nowrap;
}
.msg-quick a:hover{color:var(--primary-light);}
.msg-quick-h{font-size:13px;color:#8496a3;}

/* ===== ③ 表单卡 ===== */
.msg-card{
  background:var(--bg-soft);
  border:1px solid var(--border);
  /* 左右 44、上下 40：单栏后卡片变宽，内边距可以比双栏时（40）略大，
     让「卡片边」和「输入框起点」之间有足够的呼吸，不至于像贴边。
     44 也是 600 宽下让输入框落到 512 的取值 —— 与首页 415 的表单比更舒展。 */
  padding:40px 44px 42px;
  display:flex;flex-direction:column;
}

/* 卡头：小标签 + 主标题 + 规则说明，三层递进 */
.msg-card-head{margin-bottom:4px;}
.msg-card-k{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;color:var(--primary);letter-spacing:.08em;
}
.msg-card-k::before{content:"";width:16px;height:1px;background:var(--primary);flex:none}

/* ★ 新增主标题：删掉左栏后，这个页面失去了「留个联系方式 / 工程师直接联系您」
   那句主文案 —— 表单上方不能只有一行 12px 的小标签，会显得没有头部。
   这里补一个 h2，字号 24（比原左栏 h2 的 22 略大）：
   它是整页唯一的内容标题，需要承担页面主标题的角色。
   不加下方短横（.msg-head h2::after 那套）——那个装饰属于左栏栏目标题，
   这里是页面级标题，加短横反而像栏目。 */
.msg-card-t{
  font-size:24px;line-height:1.5;font-weight:700;color:#14222e;
  margin:14px 0 0;letter-spacing:.01em;
}

.msg-card-sub{
  font-size:13px;color:#6b7480;line-height:1.8;
  /* 与标题拉开 14px，与下方表单的 26px（.lead-form margin-top）形成层级 */
  margin:14px 0 0;
  /* 一条极淡的分隔线，把「说明」和「要填的东西」切开 */
  padding-bottom:20px;border-bottom:1px solid var(--border);
}
.msg-card-sub i{font-style:normal;color:#c8372d;}

/* ★★★ 提交成功态：高度不能塌
   ----------------------------------------------------------------------------
   问题：提交成功后表单的 3 个 lf-row + 按钮全部 display:none，
        卡片只剩 .lf-done（约 102px）。
        用户点完提交，整块突然矮掉一多半，很容易读成「出错了 / 页面坏了」。
   做法：给成功态的卡片设 min-height，锁住「填表时的高度」，
        并让 .lf-done 在这个高度里垂直居中。
   ★ 数值来源：桌面态默认内容高度 ≈ 卡头(标签12+标题两颗≈74+说明≈40) + 表单 359
     + 上下 padding 82 ≈ 570，取 560 留余量。
   ★ 为什么不用 100vh / 百分比：卡片在网格里，没有可参照的高度基准，
     百分比会退化成 auto，等于没设。
   ★ 900px 以下变单列本来就按内容走，取消这个 min-height，
     否则手机会多出一大块空白。 */
.msg-card:has(.lead-form.done){min-height:560px;}
.msg-card .lead-form.done{display:flex;flex-direction:column;flex:1;}
.msg-card .lead-form.done > .lf-done{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:0;
}
.msg-card .lead-form.done > .lf-done p{margin-top:12px;}

/* ★★★ 成功态隐藏卡片顶部那几行标题
   ----------------------------------------------------------------------------
   「在线留言 / 留下联系方式…/ 带 * 的必填」都是**填表前**的指引，
   提交成功后表单已经没了，留着等于在成功提示上方挂一段无关的话，
   还会把垂直居中整体往下推。
   ★ 为什么用 :has()：.done 类打在 form 上，标题是 form 的**兄弟**节点，
     普通选择器选不到父容器再回指。
   ★ 不支持 :has() 的浏览器（Chrome <105 / Safari <15.4）会退化成「标题仍在」，
     可接受的降级，不会崩版。 */
.msg-card:has(.lead-form.done) .msg-card-head{display:none;}

/* ===== ④ 响应式 ===== */
@media(max-width:900px){
  .msg-main{padding:40px 0 52px;}
  /* ★ 手机上卡片要占满可用宽（.wrap 已有 20px padding），
     grid 的 600 固定列在这里会顶出边，改成 1fr */
  .msg-grid{grid-template-columns:minmax(0,1fr);}
  .msg-card{padding:28px 22px 30px;}
  /* ★ 单列时卡片按内容高度走，成功态的 min-height:560 会平白多出一大块空白 */
  .msg-card:has(.lead-form.done){min-height:0;}
  .msg-list li{grid-template-columns:84px minmax(0,1fr);gap:14px;padding:16px 0;}
  .msg-quick{margin-top:28px;padding:18px 18px;}
}
@media(max-width:768px){
  .msg-card-t{font-size:20px;margin-top:12px;}
  .msg-card-sub{font-size:12px;padding-bottom:16px;}
  .msg-head h2{font-size:20px;}
  .msg-lead{font-size:14px;line-height:1.9;margin-bottom:26px;}
  .msg-list strong,.msg-list span{font-size:13px;}
  .msg-quick a{font-size:20px;}
}