/* ============================================================
   _shared/checkout.css — 统一收银台组件样式（CMD-212 第 1 件）

   版式照搬 static/index.html:2019-2380 的保证金支付弹窗（老板 21:3x 指示）：
     · 遮罩 rgba(15,23,42,.55)
     · 白卡片 width:min(92vw,380px) / border-radius:14px / padding:22px 20px
     · 二维码 168×168
     · 底部双按钮：关闭（灰）+ 我已付款（橙 #d97706）

   命名统一 `ck-` 前缀，避免与各页自有样式打架。
   ============================================================ */

/* ---------- 遮罩与卡片 ---------- */
.ck-mask {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .55);
}
.ck-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px 20px;
  width: min(92vw, 380px);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .28);
  font: 14px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #0f172a;
  max-height: 92vh;
  overflow-y: auto;
}

/* ---------- 场景标签 + 标题 + 金额 ---------- */
.ck-scene {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 8px;
}
.ck-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 14px;
}
.ck-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: #475569;
  margin-top: 4px;
}
.ck-row--total {
  font-size: 16px;
}
.ck-row--total .ck-val {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}
.ck-val {
  font-weight: 700;
  color: #0f172a;
}
.ck-sep {
  height: 1px;
  background: #e2e8f0;
  margin: 14px 0;
}

/* ---------- 第一屏：支付方式列表 ---------- */
.ck-methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ck-method {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  background: #fff;
  text-align: left;
  font: inherit;
  color: #0f172a;
}
.ck-method:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}
.ck-method[aria-checked="true"] {
  border-color: #d97706;
  background: #fffbeb;
}
.ck-method__dot {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  position: relative;
}
.ck-method[aria-checked="true"] .ck-method__dot {
  border-color: #d97706;
}
.ck-method[aria-checked="true"] .ck-method__dot::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: #d97706;
}
.ck-method__label {
  font-weight: 600;
}

/* ---------- 收款地址 / 附言 code 块 + 复制 ---------- */
.ck-label {
  margin-top: 14px;
  color: #475569;
}
.ck-codewrap {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 4px;
}
.ck-code {
  flex: 1;
  word-break: break-all;
  font-size: 13px;
  background: #f1f5f9;
  padding: 8px;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ck-copy {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ck-copy:hover {
  background: #f8fafc;
}

/* ---------- 二维码 ---------- */
.ck-qrwrap {
  text-align: center;
  margin: 14px 0 6px;
}
.ck-qr {
  width: 168px;
  height: 168px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

/* CMD-285 第 2 棒：电汇附言必填提示（琥珀底，比 .ck-tip 醒目一档）。
   🛑 只用于电汇分支的「必须填单号」这一句，不要拿去当通用提示框。 */
.ck-memo-req {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #fcd34d;
  background: #fffbeb;
  color: #92400e;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

/* ---------- 状态 / 提示 / 倒计时 ---------- */
.ck-tip {
  color: #64748b;
  font-size: 13px;
  text-align: center;
}
.ck-status {
  margin-top: 12px;
  text-align: center;
  font-weight: 600;
}
.ck-hint {
  margin-top: 4px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.5;
}
.ck-expire {
  margin-top: 4px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
}

/* 换一种支付方式（小文字链） */
.ck-switch {
  display: block;
  margin: 10px auto 0;
  border: 0;
  background: none;
  color: #2563eb;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}
.ck-switch:hover {
  text-decoration: underline;
}

/* ---------- 沙箱（仅测试环境） ---------- */
.ck-mockwrap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #cbd5e1;
}
.ck-mockhint {
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 8px;
}
.ck-mock {
  width: 100%;
  border: 1px dashed #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- 底部双按钮 ---------- */
.ck-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  align-items: stretch;
}
.ck-btn-close {
  flex: 0 0 auto;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: #475569;
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
}
.ck-btn-primary {
  flex: 1;
  border: 0;
  background: #d97706;
  color: #fff;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.ck-btn-primary:disabled {
  opacity: .75;
  cursor: default;
}

/* ---------- 失败红色提示条（留在原页，不跳走） ---------- */
.ck-notice {
  position: fixed;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  z-index: 10000;
  max-width: min(92vw, 520px);
  background: #7f1d1d;
  color: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  font: 14px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .3);
}