/* ============================================================
* css/paypanel.css —— 站点级收银台面板样式（单一真源）
* ============================================================
* ⛔ 为什么独立成文件（治模式，不治孤例）：
* 本文件是 /js/checkout.js 的**配套样式**。checkout.js 会被多个页面复用
* （checkout.html / breach-notice.html，以及任何引 /js/checkout.js 的页）。
* 历史上 breach-notice.html 只从 checkout.html 抄了**一半**样式
* （抄了 #paySheet/.ps-qr/.ps-hint/.ps-url/.ps-mock/.pay-tip，
* 漏了 25 个 .ps-* 规则）⇒ 表单退化成浏览器默认控件、
* 对公转账面板无层次、错误提示浅色压白底看不见、
* 「提交登记」点下去像没反应。
* ⇒ 样式必须**只存一份**，页面一律 引用，不得再各抄一份。
* 改样式只改本文件；新增 .ps-* 规则请先加到本文件。
*
* 依赖：本文件自带配色变量，不依赖宿主页面的 CSS 变量
* （breach-notice.html 无 --gold/--paper 等变量，
* checkout.html 有 —— 故此处一律用固定色 + 本文件自定义变量）。
*
* 使用：
* ============================================================ */
:root {
--pp-sheet-bg: linear-gradient(180deg, rgba(20,32,45,.96), rgba(10,18,28,.99));
--pp-gold: #d4af37;
--pp-gold-dark: #b8952e;
--pp-ink: #241f26; /* 深墨：白底卡上的正文色 */
--pp-ink-soft: #6b5a1e; /* 次级说明色（仍与白底有足够对比） */
--pp-danger: #8a2b2b;
--pp-danger-soft: #a33030;
--pp-card-bg: rgba(212,175,55,.12);
--pp-card-border: rgba(160,130,40,.45);
}
/* ---------- 贴底悬浮收银面板：无全屏遮罩（禁弹窗纪律） ---------- */
#paySheet {
position: fixed; left: 0; right: 0; bottom: 0;
background: var(--pp-sheet-bg);
border-top: 1px solid rgba(212,175,55,.5);
border-radius: 16px 16px 0 0;
padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
transform: translateY(110%); transition: .28s ease;
z-index: 900; max-width: 520px; margin: 0 auto;
max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
}
#paySheet.open { transform: translateY(0); }
.ps-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ps-name { color: #ffd479; font-size: 15px; font-weight: 700; line-height: 1.5; }
.ps-close { background: none; border: none; color: #e8ecf8; font-size: 20px; cursor: pointer; opacity: .7; }
.ps-close:hover { opacity: 1; }
/* 白底收款卡：其内所有文字必须是【深墨】，否则浅色压白底 = 看不见 */
.ps-qr {
min-height: 150px; display: flex; align-items: center; justify-content: center;
margin: 10px 0; background: rgba(255,255,255,.92);
border-radius: 12px; padding: 8px; overflow: auto;
color: var(--pp-ink);
}
.ps-qr img { width: 220px; height: 220px; }
.ps-hint { color: var(--pp-ink); font-size: 14px; padding: 40px 10px; text-align: center; }
.ps-url { color: var(--pp-ink); font-size: 12px; word-break: break-all; }
.ps-mock {
display: none; background: var(--pp-gold); color: var(--pp-ink);
border: none; border-radius: 8px; padding: 8px 16px; font-size: 14px; cursor: pointer;
}
/* 浮层提示条 */
.pay-tip {
position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
background: rgba(12,20,30,.92); border: 1px solid rgba(212,175,55,.6);
color: #f4ead8; padding: 10px 18px; border-radius: 20px; font-size: 14px;
opacity: 0; transition: .3s; pointer-events: none; z-index: 950; max-width: 92vw;
}
/* ---------- __v56 人工收款通道（微信收款码 + 对公转账） ---------- */
.ps-err {
background: rgba(200,40,40,.08); border: 1px solid rgba(200,40,40,.45);
color: var(--pp-danger-soft); border-radius: 8px; padding: 8px 10px;
font-size: 12px; line-height: 1.7; margin-bottom: 8px;
}
/* 人工通道容器: 承载 页签 + 各面板 + 订单号 + 页脚 */
.ps-manual { display: block; text-align: left; color: var(--pp-ink); }
/* 各通道面板(wepay / bank / claim / corpform)共用同一盒模型 */
.ps-mp-pane { display: block; text-align: left; color: var(--pp-ink); }
.ps-mp-pane[style*="display:none"] { display: none; }
.ps-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.ps-tab {
flex: 1; background: none; border: 1px solid rgba(160,130,40,.55);
color: var(--pp-ink-soft); border-radius: 8px; padding: 8px 0;
font-size: 14px; cursor: pointer; font-family: inherit;
}
.ps-tab.ps-tab-on { background: var(--pp-gold); color: var(--pp-ink); font-weight: 700; }
.ps-mp-note { text-align: center; font-size: 12px; color: var(--pp-ink-soft); margin: 6px 0; }
.ps-steps { margin: 8px 0 4px 20px; font-size: 13px; color: var(--pp-ink); line-height: 1.75; }
.ps-steps b { color: var(--pp-danger); }
.ps-bank {
font-size: 13px; color: var(--pp-ink); line-height: 1.85;
background: var(--pp-card-bg); border: 1px solid var(--pp-card-border);
border-radius: 8px; padding: 8px 10px;
}
.ps-bank span { display: inline-block; width: 96px; opacity: .7; }
.ps-bank b { word-break: break-all; }
.ps-orderno { margin-top: 10px; font-size: 13px; color: var(--pp-ink); text-align: center; }
.ps-orderno b { color: var(--pp-danger); letter-spacing: 1px; }
.ps-copy {
margin-left: 8px; background: var(--pp-gold); border: none; color: var(--pp-ink);
border-radius: 6px; padding: 2px 10px; font-size: 12px; cursor: pointer;
}
.ps-mp-foot { margin-top: 8px; font-size: 11px; color: var(--pp-ink-soft); line-height: 1.6; opacity: .95; }
/* ---------- __v57 支付确认 / 开票 / 委托登记窗（贴面板内渲染，可自由 ✕ 关闭） ---------- */
.ps-claim-btn {
width: 100%; margin-top: 10px; background: var(--pp-gold);
border: 1px solid var(--pp-gold-dark); color: var(--pp-ink);
border-radius: 8px; padding: 9px 10px; font-size: 14px; font-weight: 700;
cursor: pointer; font-family: inherit;
}
.ps-claim-btn:hover { filter: brightness(1.06); }
/* 表单窗：白底卡内的深墨面板 */
.ps-fm-pane {
text-align: left; background: var(--pp-card-bg);
border: 1px solid var(--pp-card-border); border-radius: 10px;
padding: 10px 12px; margin-top: 10px; color: var(--pp-ink);
}
.ps-fm-head {
display: flex; justify-content: space-between; align-items: center;
color: var(--pp-ink); font-size: 14px; margin-bottom: 6px;
}
.ps-fm-x {
background: none; border: 1px solid rgba(107,90,30,.5); color: var(--pp-ink-soft);
border-radius: 6px; padding: 2px 8px; font-size: 12px; cursor: pointer;
font-family: inherit; flex: none;
}
.ps-fm-note { font-size: 12px; color: var(--pp-ink-soft); margin-bottom: 6px; line-height: 1.7; }
.ps-fm-note b { color: var(--pp-danger); }
/* 表单行：标签定宽右对齐 + 输入框自适应（原来缺这段 ⇒ 全是浏览器默认控件） */
.ps-fm { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ps-fm label { min-width: 76px; font-size: 12px; color: var(--pp-ink); opacity: .78; flex: none; }
.ps-fm input, .ps-fm textarea {
flex: 1; border: 1px solid rgba(107,90,30,.45); border-radius: 6px;
padding: 6px 8px; font-size: 13px; font-family: inherit;
color: var(--pp-ink); background: #fff; min-width: 0;
}
.ps-fm input:focus, .ps-fm textarea:focus {
outline: none; border-color: var(--pp-gold-dark);
box-shadow: 0 0 0 2px rgba(212,175,55,.25);
}
.ps-fm input[readonly] { background: #f0e8d2; }
.ps-fm-ck {
display: flex; gap: 6px; align-items: center; margin-top: 8px;
font-size: 12px; color: var(--pp-ink); cursor: pointer;
}
.ps-fm-ck input { flex: none; width: auto; }
/* 校验提示：必须醒目（原来无规则 ⇒ 浅色压白底 = 看不见 = 用户以为「点了没反应」） */
.ps-fm-msg {
min-height: 18px; font-size: 12.5px; font-weight: 700;
color: var(--pp-danger-soft); margin-top: 6px; line-height: 1.6;
}
.ps-fm-msg:empty { min-height: 0; margin-top: 0; }
.ps-fm-go {
width: 100%; margin-top: 6px; background: var(--pp-danger); border: none;
color: #fff; border-radius: 8px; padding: 10px; font-size: 14px; font-weight: 700;
cursor: pointer; font-family: inherit;
}
.ps-fm-go:hover { filter: brightness(1.08); }
.ps-fm-go:disabled { opacity: .55; cursor: wait; }
.ps-fm-skip {
width: 100%; margin-top: 6px; background: none; border: 1px solid rgba(107,90,30,.5);
color: var(--pp-ink-soft); border-radius: 8px; padding: 7px 10px;
font-size: 13px; cursor: pointer; font-family: inherit;
}
.ps-fm-foot { margin-top: 6px; font-size: 11px; color: var(--pp-ink-soft); line-height: 1.6; opacity: .95; }
.ps-fm-done { font-size: 13px; color: var(--pp-ink); line-height: 1.8; padding: 6px 2px; }
.ps-fm-done b { color: var(--pp-danger); }
.ps-paid-ok { text-align: center; font-size: 14px; color: #1d7a3e; font-weight: 700; margin-bottom: 8px; }
/* 已开通状态条 */
.svc-status {
background: rgba(29,122,62,.16); border: 1px solid rgba(29,122,62,.45);
color: #bfe8cc; border-radius: 10px; padding: 10px 12px;
font-size: 13px; line-height: 1.7; margin-top: 12px;
}
/* 窄屏：标签与输入框改为上下堆叠，避免挤压 */
@media (max-width: 460px) {
.ps-fm { flex-direction: column; align-items: stretch; gap: 4px; }
.ps-fm label { min-width: 0; }
.ps-bank span { display: block; width: auto; }
}