/**
 * 联系我们模块样式（contact/index + contact/simple）
 * 提取自各模板内联 <style>，合并去重后按组件分区
 *
 * 引入方式：<link rel="stylesheet" href="/static/css/contact.css" />
 * 全局基础样式已在 style.css 中定义，此处仅做页面级扩展
 * 注意：动态表单引擎核心样式见 form-renderer.css；此处仅保留联系页特有覆盖
 */

/* ========================================================================
   1. 联系方式卡（contact/index.htm 顶部 4 列卡）
   ======================================================================== */

.contact-method .feature-ico { margin-bottom: 14px; }
.contact-method .cm-value { font-size: 1.15rem; font-weight: 700; color: var(--c-ink); margin-bottom: 4px; word-break: break-all; }
.contact-method .cm-sub { font-size: var(--fs-sm); color: var(--c-muted); }

/* ========================================================================
   2. 联系双栏布局（index + simple 共用）
   ======================================================================== */

.contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }

@media (max-width: 1024px) {
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .contact-form-card { padding: 24px 20px; }
  .qr-card { padding: 18px; }
  .qr-card .qr-img { width: 96px; height: 96px; }
  .qr-card .qr-img svg { width: 60px; height: 60px; }
}

@media (max-width: 480px) {
  .contact-form-card { padding: 20px 16px; }
  .qr-card .qr-row { gap: 14px; }
  .qr-card .qr-img { width: 84px; height: 84px; }
  .qr-card .qr-img svg { width: 52px; height: 52px; }
}

/* ========================================================================
   3. 表单卡片（index + simple 共用）
   ======================================================================== */

.contact-form-card { padding: 36px; }
.contact-form-card .sec-head { text-align: left; margin-bottom: 28px; }
/* 表单渲染容器贴边对齐（覆盖 form-renderer.css 默认 padding） */
.contact-form-card .form-renderer { padding: 0; }

/* ========================================================================
   4. 联系右侧栏（地图 + 二维码 + 营业时间；contact/index.htm）
   ======================================================================== */

.contact-sidebar { display: flex; flex-direction: column; gap: 24px; }
.map-placeholder { aspect-ratio: 4/3; border-radius: var(--r-md); }

/* 二维码卡 */
.qr-card { padding: 24px; }
.qr-card .qr-row { display: flex; gap: 20px; justify-content: center; }
.qr-card .qr { text-align: center; }
.qr-card .qr-img { width: 110px; height: 110px; border-radius: var(--r-sm); background: #fff; display: grid; place-items: center; margin-bottom: 8px; border: 1px solid var(--c-line); }
.qr-card .qr-img svg { width: 70px; height: 70px; color: var(--c-ink); }
.qr-card .qr span { font-size: var(--fs-sm); color: var(--c-text); font-weight: 600; }

/* ========================================================================
   5. 动态表单容器（index + simple 共用；覆盖 form-renderer.css 默认布局）
   说明：form-renderer.css 中已定义 .form-dynamic-loading / .form-dynamic-error，
        此处为联系页特有覆盖（padding、icon 排版与基线略有差异），保留以确保视觉一致
   ======================================================================== */

.form-dynamic-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; color: var(--c-muted); }
.form-dynamic-loading .form-icon { width: 24px; height: 24px; }
.form-dynamic-error { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 0; color: var(--c-muted); }
.form-dynamic-error .form-icon { width: 40px; height: 40px; display: block; margin-bottom: 8px; }