/* 澄观嘉名 · 大师取名表单的迁移后补充样式。
   dashi.css 被 tests/fixtures/baseline-manifest.txt 哈希冻结，故出生地两级下拉的
   样式独立成文件，在 dashi.css 之后加载。不引 cg-api.css：那份带 body 的
   flex 布局全局规则，会改动 dashi 页既有排版。 */

/* 出生地：一个 .field 里放「标签 + 省 + 市」两枚下拉，两者均分剩余宽度 */
.ds-field-place {
  gap: 10px;
}
.ds-field-place select.field-input {
  flex: 1 1 0;
  min-width: 0;
}
/* 省 / 市之间加一道细分隔，避免两枚下拉看起来像一个长控件 */
.ds-field-place select.field-input + select.field-input {
  padding-left: 10px;
  border-left: 1px solid var(--line);
}
/* 未选时用占位色。原生 :invalid 只在 required 下生效，这里由组件挂 is-empty */
.ds-field-place select.field-input.is-empty {
  color: #A2988C;
}
.ds-field-place select.field-input:disabled {
  cursor: not-allowed;
  opacity: .72;
}

@media (max-width: 599px) {
  /* 窄屏 .ds-form-row 变单列，标签 + 两枚下拉挤在一行会截断，改为标签独占一行 */
  .ds-field-place {
    flex-wrap: wrap;
    padding-block: 10px;
    row-gap: 6px;
  }
  .ds-field-place .field-label {
    flex: 0 0 100%;
  }
  .ds-field-place select.field-input {
    flex: 1 1 40%;
  }
}

/* 支付弹窗：骨架复用 styles.css 的 .qr-modal / .qr-modal-box / .qr-code，
   这里只补金额、倒计时与模拟支付按钮几处大师取名专有的排版。 */
.ds-pay-modal .ds-pay-amount {
  display: block;
  margin-top: 6px;
  font-size: 30px;
  line-height: 1.2;
  color: var(--danxia, #C0392B);
}
.ds-pay-modal .ds-pay-timer {
  margin-top: 10px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.ds-pay-modal .ds-pay-mock {
  margin-top: 14px;
}
.ds-pay-modal .ds-pay-error {
  margin-top: 10px;
  font-size: 20px;
  line-height: 1.5;
  color: #C0392B;
}
/* 成功态复用 .qr-code 的方框尺寸，避免二维码换成文案时弹窗高度跳一下 */
.ds-pay-modal .ds-pay-done {
  gap: 10px;
  color: #3F7A62;
}
.ds-pay-modal .ds-pay-done .icon {
  width: 34px;
  height: 34px;
}