/* ==========================================================================
   天合正独立站 · 前台样式 —— 36-inquiry.css

   询盘转化组件（2026-10-12 第 25 轮新增）

   背景：业主嫌「每个页面底部都一个大大的发送询盘表格」。
   现在把表单收进原生 <dialog> 弹窗，页面里只留一条紧凑 CTA 带。

   注意：这些类是全站共用的（首页/产品列表/产品详情/关于/联系/FAQ/定制），
   所以放在 36 号共享件里，不再散在 30-page-home.css。
   ========================================================================== */

/* ---------- 询盘 CTA 带 ---------- */
.inquiry-cta { background: var(--secondary); color: var(--on-accent); }

.inquiry-cta__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.inquiry-cta__text { min-inline-size: 0; flex: 1 1 320px; }
.inquiry-cta__title {
  margin: 0 0 6px;
  font-size: clamp(1.25rem, 3.2vw, 1.75rem);
  line-height: 1.3;
  color: var(--on-accent);
}
.inquiry-cta__sub {
  margin: 0;
  max-inline-size: 52ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}
.inquiry-cta__ops {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
}
/* 深色底上「主按钮」用白底反色，比橙色更跳、且不受站点主色影响 */
.inquiry-cta__ops .btn--primary {
  background: var(--on-accent);
  color: var(--secondary);
}
.inquiry-cta__ops .btn--primary:hover { filter: brightness(.94); }
/* 次要按钮：描边用半透明白，深色底上才看得见 */
.inquiry-cta__ops .btn--outline {
  border-color: rgba(255, 255, 255, .55);
  color: var(--on-accent);
}
.inquiry-cta__ops .btn--outline:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--on-accent);
}
@media (max-width: 640px) {
  /* 手机上按钮占满整行更好点，别挤成两个小豆腐块 */
  .inquiry-cta__ops { inline-size: 100%; }
  .inquiry-cta__ops .btn { flex: 1 1 100%; }
}

/* ---------- 询盘弹窗（原生 dialog） ----------
   用原生 <dialog> 的理由：自带焦点陷阱 / ESC 关闭 / ::backdrop 遮罩，
   手写一套 focus trap 既啰嗦又容易把键盘用户困住。 */
.modal {
  --modal-pad: 22px;
  inline-size: min(560px, calc(100vw - 32px));
  max-block-size: min(90vh, 860px);
  padding: 0;                       /* 内边距交给 head/body，滚动时不带走标题 */
  border: 0;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(16, 24, 40, .24);
  overflow: hidden;                 /* 由 .modal__body 自己滚 */
}
.modal::backdrop { background: rgba(16, 24, 40, .5); }

/* 降级：浏览器不支持 <dialog> 时 front.js 改用 .is-open（fixed 定位） */
.modal.is-open {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: var(--modal-pad) var(--modal-pad) 0;
}
.modal__title { margin: 0; font-size: 1.125rem; line-height: 1.4; }
.modal__sub {
  margin: 6px 0 0;
  padding: 0 var(--modal-pad);
  font-size: .8125rem;
  color: var(--ink-3);
}
.modal__close {
  flex: 0 0 auto;
  /* 触控目标 ≥ 44px（Apple HIG 下限） */
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  margin-block-start: -8px;         /* 贴近卡片右上角，视觉上与标题齐平 */
  margin-inline-end: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 26px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
}
.modal__close:hover { color: var(--ink); background: var(--bg-soft); }

.modal__body {
  padding: 16px var(--modal-pad) var(--modal-pad);
  max-block-size: calc(min(90vh, 860px) - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* 弹窗里的表单不需要再限宽/居中 */
.modal__body .form { max-inline-size: none; }

/* ---------- 询盘弹窗里的「需要产品目录？」（第 129 轮） ----------
   ★ 业主原话：「在发送询盘单的弹窗中，显著提示其是否需要产品目录文件」。
     「显著」靠三件事，不是靠字号堆：
       ① 与表单其余部分不同的底色块（浅品牌色）+ 左侧 3px 主色竖条；
       ② 图标 + 粗标题，扫视时能立刻抓住；
       ③ 一个明确的按钮 —— 光有文字没有动作等于没说。
   ★ 不用 `<dialog>`、不弹二次窗：客户正在写询盘，打断他就等于丢单。
   ★ 按钮里的 ↗ 提示"会打开新标签页"（已登录时），避免他担心丢内容。 */
.inq-catalog {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  margin-block: 4px 14px;
  border: 1px solid var(--primary-border);
  border-inline-start: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
}
.inq-catalog__ico {
  flex: 0 0 auto;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--primary-hover);
}
.inq-catalog__body { display: grid; gap: 4px; min-inline-size: 0; }
.inq-catalog__title { font-size: .9375rem; color: var(--ink); }
.inq-catalog__msg {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.inq-catalog__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 6px;
}