/* assets/css/components/modal.css — 弹窗：预约演示、微信二维码、方案咨询共用一套。
   原生 <dialog> 承载：焦点陷阱、Esc 关闭、惰性背景都是浏览器给的，不自己实现。
   Safari 15.4+ / Chrome 37+ / Firefox 98+ 支持 <dialog>，覆盖 evergreen 基线。 */

.modal{
  width:min(560px, calc(100vw - 40px));
  /* 高度约束是必需的：预约表单在 720px 高的笔记本上会超出视口，
     没有 max-height 时 <dialog> 上下都会溢出屏幕且无法滚动。
     overscroll-behavior 防止弹窗滚到底后把滚动传给背后的页面。 */
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0; border:1px solid var(--line-dark); border-radius:0;
  background:var(--surface); color:var(--ink);
}
.modal::backdrop{ background:rgba(15,35,56,.55); }
.modal[open]{ animation:modalIn .2s ease; }
@keyframes modalIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.modal-in{ padding:32px 32px 28px; }
.modal-head{ display:flex; align-items:flex-start; gap:16px; margin-bottom:20px; }
/* flex:1 必须给这个包裹层，不是给 h2——h2 不是 .modal-head 的 flex item，
   写在 h2 上不生效，关闭按钮就会紧贴标题而不是停在右边缘。 */
.modal-head > div{ flex:1; min-width:0; }
.modal-head h2{ font-size:22px; font-weight:700; }
.modal-head p{ margin-top:8px; font-size:14.5px; color:var(--muted); }
.modal-close{
  flex:none; width:32px; height:32px; display:grid; place-items:center;
  color:var(--muted); transition:color .15s ease;
}
.modal-close:hover{ color:var(--ink); }

/* 弹窗里的表单：与联系区共用 .field 排版 */
.modal .field{ margin-top:16px; }
.modal-foot{ margin-top:22px; }
.modal-note{ margin-top:14px; font-size:13px; color:var(--muted); }
.modal-note a{ color:var(--cinnabar); text-decoration:none; border-bottom:1px solid var(--line-dark); }

/* 结果提示：提交后原地反馈，不跳页 */
.form-msg{ margin-top:14px; padding:11px 14px; font-size:14px; background:var(--ok-s); color:var(--ok-on-light); }
.form-msg[hidden]{ display:none; }
.form-msg--err{ background:var(--cinnabar-s); color:var(--cinnabar); }