/* =====================================================================
   在线留言 · 页面独立样式 liuyan.css
   模块原创设计：左表单右深色联系栏双栏 / 自定义表单控件 / 三格隐私承诺 / 响应时效步骤
   ===================================================================== */

/* ---------- 页面横幅 ---------- */
.banner-liuyan{background-image:url('../images/banner-liuyan.jpg')}

/* ---------- 表单双栏 ---------- */
.form-sec{background:var(--c-ice-2)}
.form-wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:30px;align-items:start}
.form-box{background:#fff;border-radius:var(--radius-lg);padding:40px 38px;box-shadow:var(--shadow)}
.form-box h2{font-size:22px;margin-bottom:8px}
.form-box .form-tip{color:var(--c-text-2);font-size:14px;margin-bottom:28px}
.form-tip em{color:#EF4444;font-style:normal}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.f-field{margin-bottom:18px}
.f-field label{display:block;font-size:14px;font-weight:600;color:var(--c-text);margin-bottom:8px}
.f-field label em{color:#EF4444;font-style:normal;margin-left:3px}
.f-field input,.f-field select,.f-field textarea{
  width:100%;border:1.5px solid var(--c-line);border-radius:10px;padding:13px 16px;
  font-size:15px;color:var(--c-text);background:var(--c-ice-2);transition:border-color var(--trans),background var(--trans);
}
.f-field textarea{min-height:150px;resize:vertical}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  outline:none;border-color:var(--c-accent);background:#fff;
}
.f-submit{
  width:100%;background:var(--c-grad);color:#fff;font-size:17px;font-weight:700;
  padding:16px;border-radius:10px;letter-spacing:2px;transition:transform var(--trans),box-shadow var(--trans);
}
.f-submit:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(37,99,235,.35)}
.f-note{margin-top:14px;font-size:12.5px;color:var(--c-muted);text-align:center}

/* 右侧深色联系栏 */
.aside-card{
  background:var(--c-dark);border-radius:var(--radius-lg);padding:38px 30px;color:#fff;
  background-image:radial-gradient(circle at 90% 0%,rgba(37,99,235,.45),transparent 55%);
}
.aside-card h3{color:#fff;font-size:20px;margin-bottom:6px}
.aside-card .a-desc{color:#9FB2D4;font-size:14px;margin-bottom:26px;line-height:1.7}
.a-item{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.a-item:last-of-type{border-bottom:none}
.a-item .a-ic{
  width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.12);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.a-item .a-ic svg{width:22px;height:22px;fill:#9CC2FF}
.a-item b{display:block;font-size:16px;color:#fff}
.a-item span{font-size:12.5px;color:#9FB2D4}

/* ---------- 留言承诺 ---------- */
.promise-sec{background:#fff}
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.promise-item{
  display:flex;gap:16px;align-items:flex-start;background:var(--c-ice-2);border-radius:var(--radius-lg);
  padding:26px 24px;border:1px solid var(--c-line);
}
.promise-item svg{width:30px;height:30px;fill:#10B981;flex-shrink:0;margin-top:3px}
.promise-item h3{font-size:16.5px;margin-bottom:6px}
.promise-item p{color:var(--c-text-2);font-size:13.5px;line-height:1.7}

/* ---------- 响应时效 ---------- */
.response-sec{background:var(--c-ice)}
.response-band{max-width:860px;margin:0 auto;text-align:center}
.response-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.r-step{background:#fff;border-radius:var(--radius-lg);padding:28px 22px;box-shadow:var(--shadow)}
.r-step b{display:block;font-size:26px;font-weight:800;color:var(--c-accent);margin-bottom:8px}
.r-step h3{font-size:16px;margin-bottom:6px}
.r-step p{font-size:13.5px;color:var(--c-text-2);line-height:1.7}
.response-band .r-h2{margin-top:10px}
.r-note{
  max-width:720px;margin:30px auto 0;background:#fff;border-radius:var(--radius-lg);
  padding:22px 28px;color:var(--c-text-2);font-size:14.5px;line-height:1.9;
  box-shadow:var(--shadow);border-left:4px solid var(--c-accent);text-align:left;
}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .form-wrap{grid-template-columns:1fr}
  .promise-grid{grid-template-columns:1fr}
  .response-steps{grid-template-columns:1fr}
}
@media (max-width:640px){
  .f-row{grid-template-columns:1fr}
  .form-box{padding:28px 22px}
}