/* DialogSuccess —— 「预约成功」弹窗（Figma 1914:8681）。
   遮罩黑 60% 铺满整页；弹窗 295 宽水平居中、垂直居中偏上（设计 y265，页面高 812）。
   白卡是设计稿给的矢量（圆角 12 + 底部尖角，白→#E2FFED 渐变）；
   顶部插画 114×114 居中压在卡片上沿。 */

/* 弹窗默认隐藏：加 [open] 才显示 */
.mzh-dialog[hidden],
.mzh-dialog:not([open]) {
  display: none;
}

.mzh-dialog {
  --dialog-card-image: none;
  --dialog-illus-image: none;
  position: absolute;
  inset: 0;
  z-index: var(--booking-dialog-z);
  display: flex;
  align-items: center;
  /* 设计的弹窗框 40,265 295×282 → 中心正好是页面中心（406 = 812/2），居中即可 */
  justify-content: center;
  padding: 0 var(--booking-dialog-x);
}

.mzh-dialog__scrim {
  position: absolute;
  inset: 0;
  background: var(--booking-dialog-scrim);
}

.mzh-dialog__card {
  position: relative;
  width: var(--booking-dialog-card-w);
  flex: none;
  /* 弹窗框高 282（设计值），卡片高 241.219 位于框内 top 40。
     外层 box 占满 282，卡片绝对定位在 top 40 —— 直接对应设计数值。 */
  height: var(--booking-dialog-box-h);
}

/* 白卡本体（圆角 12 + 底部尖角）用设计稿给的矢量 */
.mzh-dialog__card-bg {
  position: absolute;
  left: 0;
  top: var(--booking-dialog-card-top);
  width: var(--booking-dialog-card-w);
  height: var(--booking-dialog-card-h);
  background-image: var(--dialog-card-image);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.mzh-dialog__illus {
  position: absolute;
  /* 用 inset 居中（left/right 0 + margin auto）而不是 50% + translate —— 避开硬编码百分比 */
  left: 0;
  right: 0;
  top: var(--booking-dialog-group-y);
  width: var(--booking-dialog-illus-w);
  height: var(--booking-dialog-illus-h);
  margin: 0 auto;
  overflow: visible;
  pointer-events: none;
}
.mzh-dialog__illus-img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--booking-dialog-illus-w);
  height: var(--booking-dialog-illus-w);
  margin: auto;
  object-fit: contain;
  /* ⚠️ 这里既不加 border-radius 也不加 box-shadow（两版都试过，都会出问题）：
     · 加圆角 → 阴影被裁在圆内，形成一圈圆环（用户反馈「有圆形边框」）
     · 只留阴影不加圆角 → 阴影按**方形图片框**画，在插画左右各溢出 1px
       形成两条竖直的「方块边」（x129/x244 实测比卡片底暗 10/255，用户反馈「有方块边」）
     设计稿实测：插画左右边缘与卡片底色**完全一致**（无投影），
     下缘 y370-371 的暗纹是插画图案内自带的。
     源 PNG 本身就是带 alpha 的圆形图（四角 alpha=0，仅 36.4% 像素不透明），
     直接显示即可，不需要任何圆角/阴影修饰。 */
}

.mzh-dialog__title {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--booking-dialog-title-y);
  text-align: center;
  font-size: var(--typography-subtitle-font-size);
  line-height: var(--typography-subtitle-line-height);
  font-weight: var(--typography-weight-medium);
  color: var(--color-text-brand);
}

.mzh-dialog__desc {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--booking-dialog-desc-y);
  text-align: center;
  font-size: var(--typography-body-font-size);
  line-height: var(--typography-body-line-height);
  color: var(--color-text-secondary);
}

.mzh-dialog__actions {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--booking-dialog-actions-y);
  display: flex;
  justify-content: center;
  gap: var(--booking-dialog-btn-gap);
}

.mzh-dialog__btn {
  flex: none;
  width: var(--booking-dialog-btn-w);
  height: var(--booking-dialog-btn-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--typography-body-font-size);
  line-height: var(--typography-body-line-height);
  cursor: pointer;
  padding: 0;
  /* ⚠️ 不要留 border: 1px solid transparent —— 按钮有圆角，透明边框在
     部分渲染下会露出深色边（实测「查看案例」左缘多了一条竖线）。
     设计稿的 padding 是 p-px，内容居中即可，不需要用边框占位。 */
  border: 0;
}

/* 次要：**透明底**（透出卡片的白→#E2FFED 渐变）+ 品牌绿描边 + 绿字。
   设计稿实测：按钮内 (245,254,249) 与同高度卡片空白完全一致 → 没有独立底色，
   描边是 1px 品牌绿 + 半透明（顶边实测 (106,195,139) ≈ 绿 40% 叠在渐变上）。 */
.mzh-dialog__btn--ghost {
  background: transparent;
  outline: var(--border-width-default) solid var(--color-text-brand);
  outline-offset: -1px;
  color: var(--color-text-brand);
}

/* 主要：绿渐变底 + 白字（设计 linear-gradient 93.08deg #01B946 → #009538） */
.mzh-dialog__btn--primary {
  background: var(--booking-dialog-primary-bg);
  color: var(--color-text-inverse);
}

.mzh-dialog__btn:active {
  opacity: var(--opacity-pressed);
}