/* ===== NiuqiCMS 统一支付组件 pay-ui.css =====
   用途：全站支付入口共用（订单确认弹窗 / 整页收银台 / 渠道列表 / 二维码 / 状态）
   命名前缀 nqp-，不依赖任何现有 .dl-modal / .wal-modal / .pm-* 样式
   风格基准：手机收银台 npay-* 与手机商品详情 msd-* 的渐变头卡 + 上浮白卡
   ================================================================ */
:root{
  --nqp-primary:#3466ff;
  --nqp-primary-2:#6a58ef;
  --nqp-grad:linear-gradient(135deg,#3466ff 0%,#5a62f5 52%,#7b52e8 100%);
  --nqp-wx:#07c160;
  --nqp-ali:#1677ff;
  --nqp-bal:#f0a020;
  --nqp-money:#e2493c;
  --nqp-ok:#0fae66;
  --nqp-bg:#f4f6fb;
  --nqp-surface:#ffffff;
  --nqp-surface-2:#f7f8fc;
  --nqp-text:#1b2233;
  --nqp-sub:#7c8598;
  --nqp-line:rgba(27,34,51,.09);
  --nqp-shadow:0 18px 50px rgba(24,39,92,.16);
  --nqp-r-lg:20px;
  --nqp-r-card:16px;
  --nqp-r-btn:14px;
  --nqp-z:3000;
}
[data-theme="dark"]{
  --nqp-bg:#111520;
  --nqp-surface:#1b2130;
  --nqp-surface-2:#232b3d;
  --nqp-text:#eef2fb;
  --nqp-sub:#98a3b8;
  --nqp-line:rgba(255,255,255,.10);
  --nqp-shadow:0 18px 50px rgba(0,0,0,.5);
  --nqp-money:#ff6b5e;
  --nqp-bal:#ffb648;
  --nqp-ok:#3ddc97;
}

/* --- 遮罩与容器 --- */
.nqp-mask{
  position:fixed;inset:0;z-index:var(--nqp-z);
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(15,20,35,.52);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;
}
.nqp-mask.nqp-show{opacity:1;visibility:visible}
.nqp-modal{
  width:400px;max-width:100%;max-height:calc(100vh - 40px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--nqp-surface);border-radius:var(--nqp-r-lg);
  box-shadow:var(--nqp-shadow);
  transform:translateY(10px) scale(.985);transition:transform .2s ease;
}
.nqp-mask.nqp-show .nqp-modal{transform:none}

/* 整页收银台：复用同一个弹窗作为卡片 */
.nqp-page{min-height:100vh;background:var(--nqp-bg);padding:28px 20px}
.nqp-page .nqp-modal{box-shadow:0 10px 34px rgba(24,39,92,.10)}

/* --- 渐变头卡 --- */
.nqp-hero{
  position:relative;flex:none;padding:18px 20px 20px;
  background:var(--nqp-grad);color:#fff;overflow:hidden;
}
.nqp-hero::after{
  content:"";position:absolute;right:-46px;top:-58px;width:180px;height:180px;
  border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none;
}
.nqp-hero.nqp-hero-ok{background:linear-gradient(135deg,#10b56d,#0a9a5c)}
.nqp-hero-top{display:flex;align-items:flex-start;gap:12px;position:relative;z-index:1}
.nqp-hero-ico{
  flex:none;width:40px;height:40px;border-radius:12px;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:500;line-height:1;
}
.nqp-hero-tt{flex:1;min-width:0;padding-top:2px}
.nqp-hero-tt b{display:block;font-size:16px;font-weight:500;letter-spacing:.2px}
.nqp-hero-tt small{display:block;font-size:12px;opacity:.85;margin-top:4px;line-height:1.5}
.nqp-close{
  flex:none;width:30px;height:30px;border:0;border-radius:50%;
  background:rgba(255,255,255,.2);color:#fff;font-size:19px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.nqp-close:hover{background:rgba(255,255,255,.32)}
.nqp-hero-money{
  position:relative;z-index:1;margin-top:14px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
}
.nqp-hero-money .nqp-cur{font-size:19px;font-weight:500;opacity:.9}
.nqp-hero-money .nqp-num{font-size:34px;font-weight:500;letter-spacing:-.5px;line-height:1.1}
.nqp-hero-money .nqp-old{
  font-size:13px;opacity:.72;position:relative;padding-left:2px;
}
.nqp-hero-money .nqp-old::after{
  content:"";position:absolute;left:0;right:0;top:52%;height:1.5px;
  background:rgba(255,255,255,.85);border-radius:2px;
}
.nqp-hero-tag{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;
  margin-top:12px;padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22);
  font-size:11.5px;line-height:1.4;
}
.nqp-hero-note{position:relative;z-index:1;margin-top:10px;font-size:12px;opacity:.88;line-height:1.6}

/* --- 内容区 --- */
.nqp-body{padding:14px 20px 10px;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.nqp-card{
  background:var(--nqp-surface-2);border:1px solid var(--nqp-line);
  border-radius:var(--nqp-r-card);padding:4px 14px;margin-bottom:12px;
}
.nqp-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:7px 0;font-size:13px;line-height:1.5;
}
.nqp-row + .nqp-row{border-top:1px solid var(--nqp-line)}
.nqp-row .k{flex:none;color:var(--nqp-sub)}
.nqp-row .v{text-align:right;color:var(--nqp-text);font-weight:500}
.nqp-row .v.hi{color:var(--nqp-money);font-size:15px}
.nqp-row .v.discount{color:var(--nqp-bal)}
.nqp-row .v.muted{color:var(--nqp-sub);font-weight:400}
.nqp-sec-title{
  margin:0 0 8px;font-size:12px;color:var(--nqp-sub);
  letter-spacing:.4px;display:flex;align-items:center;gap:8px;
}
.nqp-sec-title::after{content:"";flex:1;height:1px;background:var(--nqp-line)}

/* --- 统一渠道行 --- */
.nqp-ch{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:10px 12px;margin-bottom:8px;text-align:left;
  background:var(--nqp-surface);border:1.5px solid var(--nqp-line);
  border-radius:var(--nqp-r-btn);color:var(--nqp-text);
  cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease;
  font-family:inherit;
}
.nqp-ch:hover{border-color:rgba(52,102,255,.45)}
.nqp-ch:active{transform:scale(.995)}
.nqp-ch.on{border-color:var(--nqp-primary);background:rgba(52,102,255,.06)}
.nqp-ch.off{opacity:.45;cursor:not-allowed}
.nqp-ch.off:hover{border-color:var(--nqp-line)}
.nqp-ch-ico{
  flex:none;width:40px;height:40px;border-radius:12px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:500;line-height:1;
}
.nqp-ch-ico.wx{background:var(--nqp-wx)}
.nqp-ch-ico.ali{background:var(--nqp-ali)}
.nqp-ch-ico.bal{background:var(--nqp-bal)}
.nqp-ch-txt{flex:1;min-width:0}
.nqp-ch-txt b{display:block;font-size:14px;font-weight:500;line-height:1.35}
.nqp-ch-txt small{display:block;font-size:11.5px;color:var(--nqp-sub);margin-top:3px;line-height:1.45}
.nqp-radio{
  flex:none;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--nqp-line);position:relative;
}
.nqp-ch.on .nqp-radio{border-color:var(--nqp-primary)}
.nqp-ch.on .nqp-radio::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--nqp-primary);
}

/* --- 底部固定操作区：主按钮始终可见 --- */
.nqp-foot{flex:none;padding:10px 20px 16px;background:var(--nqp-surface);border-top:1px solid var(--nqp-line)}
.nqp-foot .nqp-note{margin-top:9px}
@media (max-width:640px){
  .nqp-foot{padding:12px 16px 16px}
}

/* --- 主按钮 / 文字链 --- */
.nqp-go{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;height:50px;border:0;border-radius:var(--nqp-r-btn);
  background:var(--nqp-grad);color:#fff;font-size:15px;font-weight:500;
  font-family:inherit;letter-spacing:.3px;cursor:pointer;
  box-shadow:0 8px 20px rgba(52,102,255,.26);
  transition:transform .15s ease,box-shadow .15s ease;
}
.nqp-go:hover{box-shadow:0 10px 24px rgba(52,102,255,.34)}
.nqp-go:active{transform:scale(.99)}
.nqp-go[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.nqp-note{margin:11px 0 0;text-align:center;font-size:11.5px;color:var(--nqp-sub);line-height:1.6}
.nqp-sub-link{color:var(--nqp-sub);font-size:12.5px}
.nqp-link{
  display:block;margin:14px 0 0;text-align:center;font-size:13px;
  color:var(--nqp-primary);cursor:pointer;background:none;border:0;
  width:100%;font-family:inherit;
}

/* --- 二维码与状态 --- */
.nqp-qrbox{
  width:212px;height:212px;margin:2px auto 14px;padding:12px;
  background:#fff;border-radius:16px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 18px rgba(24,39,92,.10);
}
.nqp-qrbox canvas,.nqp-qrbox img{width:188px;height:188px}
.nqp-qrbox img{display:none}
.nqp-state{
  padding:10px 12px;border-radius:11px;text-align:center;
  font-size:12.5px;line-height:1.55;
  background:var(--nqp-surface-2);color:var(--nqp-sub);
}
.nqp-state.ok{background:rgba(15,174,102,.12);color:var(--nqp-ok)}
.nqp-state.err{background:rgba(226,73,60,.10);color:var(--nqp-money);margin-bottom:10px}
.nqp-state.warn{background:rgba(240,160,32,.14);color:var(--nqp-bal)}
.nqp-amount-line{text-align:center;font-size:12.5px;color:var(--nqp-sub);margin:0 0 12px}
.nqp-amount-line b{color:var(--nqp-money);font-size:16px;font-weight:500}

/* --- 业务附加字段（优惠券 / 授权域名 / 充值金额）：紧跟渠道列表 --- */
.nqp-fields{padding:10px 0 2px;margin-top:2px}
.nqp-fields input,.nqp-fields select{width:100%;box-sizing:border-box;font-family:inherit}
.nqp-fields .nqp-hint{font-size:11.5px;color:var(--nqp-sub);margin:6px 0 0;line-height:1.5}

/* --- 输入（充值等需要用户输入金额的场景）--- */
.nqp-input{
  width:100%;height:44px;box-sizing:border-box;
  border:1.5px solid var(--nqp-line);border-radius:12px;
  background:var(--nqp-surface);color:var(--nqp-text);
  padding:0 13px;font-size:15px;font-family:inherit;outline:none;
}
.nqp-input:focus{border-color:var(--nqp-primary)}
.nqp-chips{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.nqp-chip{
  flex:1;min-width:60px;padding:8px 4px;border-radius:10px;
  border:1px solid var(--nqp-line);background:var(--nqp-surface);
  color:var(--nqp-text);font-size:12.5px;font-family:inherit;cursor:pointer;
}
.nqp-chip:hover,.nqp-chip.on{border-color:var(--nqp-primary);color:var(--nqp-primary);background:rgba(52,102,255,.06)}

/* --- 两步流程指示器 --- */
.nqp-steps{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:11.5px;color:var(--nqp-sub)}
.nqp-steps span{display:flex;align-items:center;gap:6px;white-space:nowrap}
.nqp-steps i{
  width:18px;height:18px;border-radius:50%;font-style:normal;font-size:11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--nqp-surface-2);border:1px solid var(--nqp-line);
}
.nqp-steps span.on{color:var(--nqp-primary)}
.nqp-steps span.on i{background:var(--nqp-primary);border-color:var(--nqp-primary);color:#fff}
.nqp-steps em{flex:1;height:1px;background:var(--nqp-line)}

/* --- 手机端第二步：直接唤起客户端 --- */
.nqp-jump{text-align:center;padding:6px 0 2px}
.nqp-jump-ico{
  width:64px;height:64px;margin:0 auto 14px;border-radius:20px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:27px;font-weight:500;line-height:1;
}
.nqp-jump-ico.wx{background:var(--nqp-wx)}
.nqp-jump-ico.ali{background:var(--nqp-ali)}
.nqp-jump-ico.bal{background:var(--nqp-bal)}
.nqp-jump-ico.extra{background:#d8352c}
.nqp-jump-title{font-size:16px;font-weight:500;color:var(--nqp-text)}
.nqp-jump-sub{
  font-size:12px;color:var(--nqp-sub);line-height:1.7;
  margin:8px auto 14px;max-width:290px;
}
.nqp-jump-spin{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  font-size:12px;color:var(--nqp-sub);
}
.nqp-jump-spin span{
  width:14px;height:14px;border-radius:50%;
  border:2px solid var(--nqp-line);border-top-color:var(--nqp-primary);
  animation:nqp-spin .8s linear infinite;
}
@keyframes nqp-spin{to{transform:rotate(360deg)}}
.nqp-jump-tip{
  margin:0 0 14px;padding:10px 12px;border-radius:11px;font-size:12px;line-height:1.6;
  background:rgba(240,160,32,.14);color:var(--nqp-bal);
}
.nqp-ch-ico.extra{background:#d8352c}

/* --- 响应式：手机端同一套 DOM，只改尺寸 --- */
@media (max-width:640px){
  .nqp-mask{padding:14px}
  .nqp-modal{width:100%;max-height:calc(100vh - 28px);border-radius:18px}
  .nqp-hero{padding:18px 18px 22px}
  .nqp-hero-money .nqp-num{font-size:32px}
  .nqp-body{padding:15px 16px 18px}
  .nqp-page{padding:0;background:var(--nqp-surface)}
  .nqp-page .nqp-modal{max-height:none;border-radius:0;box-shadow:none;min-height:100vh}
  .nqp-page .nqp-hero{border-radius:0}
  /* 常见手机屏高下让全部渠道一屏露出，不必滚动才能看到支付宝 */
  .nqp-hero{padding:14px 16px 16px}
  .nqp-hero-ico{width:36px;height:36px;border-radius:11px;font-size:15px}
  .nqp-hero-tt b{font-size:15px}
  .nqp-hero-tt small{margin-top:2px}
  .nqp-hero-money{margin-top:10px}
  .nqp-hero-money .nqp-num{font-size:29px}
  .nqp-hero-tag{margin-top:8px;padding:4px 10px}
  .nqp-body{padding:10px 14px 8px}
  .nqp-steps{margin-bottom:8px}
  .nqp-card{padding:2px 12px;margin-bottom:9px}
  .nqp-row{padding:5px 0;font-size:12.5px}
  .nqp-fields{padding:7px 0 0;margin-top:0}
  .nqp-fields .nqp-sec-title{margin-bottom:6px}
  .nqp-fields .nqp-input{height:40px}
  .nqp-fields .nqp-hint{margin-top:4px}
  .nqp-sec-title{margin-bottom:6px}
  .nqp-ch{padding:8px 10px;margin-bottom:6px;gap:10px}
  .nqp-ch-ico{width:36px;height:36px;border-radius:11px;font-size:15px}
  .nqp-ch-txt b{font-size:13.5px}
  .nqp-ch-txt small{margin-top:1px;font-size:11px}
  .nqp-foot{padding:8px 14px 11px}
  .nqp-go{height:46px}
  .nqp-foot .nqp-note{margin-top:6px;font-size:11px}
}