/* ==========================================================
 * pay.css — 1bao1 繁耀计划支付弹窗样式
 * 源自 business 项目统一支付 UI（PayChooser + QrModal）
 * ========================================================== */

/* ========== 支付方式选择 ========== */
.pay-chooser-mask{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,0.5);z-index:1004;
    align-items:flex-end;justify-content:center;
}
.pay-chooser-mask.show{display:flex;}
.pay-chooser-mask.pc{align-items:center;}
.pay-chooser-sheet{
    width:100%;max-width:750px;background:var(--card);
    border-radius:20px 20px 0 0;padding:8px 0 18px;
    transform:translateY(100%);
    transition:transform .25s cubic-bezier(.22,.61,.36,1);
    box-shadow:0 -4px 24px rgba(0,0,0,.12);
    max-height:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.pay-chooser-sheet.show{transform:translateY(0);}
.pay-chooser-sheet.pc{
    width:340px;max-width:calc(100% - 40px);
    border-radius:18px;padding:18px 0 8px;
    transform:translateY(20px) scale(.95);opacity:0;
    transition:transform .25s ease, opacity .25s ease;
}
.pay-chooser-sheet.pc.show{transform:translateY(0) scale(1);opacity:1;}
.pcs-handle{width:40px;height:4px;margin:0 auto 10px;background:#e3e8f0;border-radius:2px;}
.pay-chooser-sheet.pc .pcs-handle{display:none;}
.pcs-title{text-align:center;font-size:16px;font-weight:700;color:#1a2332;margin-bottom:6px;padding:4px 20px;}
.pcs-list{padding:4px 0;}
.pcs-item{
    display:flex;align-items:center;gap:14px;
    padding:14px 20px;cursor:pointer;
    transition:background .15s;-webkit-tap-highlight-color:transparent;
}
.pcs-item:active{background:#f7f8fa;}
@media(hover:hover){.pcs-item:hover{background:#f7f8fa;}}
.pcs-ic{
    width:44px;height:44px;border-radius:12px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.pcs-ic svg{width:28px;height:28px;display:block;}
.pcs-ic-wx{background:#07C160;}
.pcs-ic-ali{background:#1677FF;}
.pcs-ic-img{width:44px;height:44px;border-radius:12px;display:block;object-fit:cover;background:var(--card);}
.pcs-name{flex:1;min-width:0;}
.pcs-main{font-size:15px;font-weight:700;color:#1a2332;line-height:1.3;}
.pcs-sub{font-size:12px;color:#8b99b0;font-weight:500;margin-top:2px;}
.pcs-arrow{font-size:24px;color:#c3cbd8;font-weight:400;transform:translateY(-1px);}
.pcs-cancel{
    display:block;width:calc(100% - 40px);margin:14px auto 0;
    height:44px;border-radius:12px;border:none;
    background:#f2f4f8;color:#475569;
    font-size:15px;font-weight:600;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:background .15s;
}
.pcs-cancel:active{background:#e6e9ef;}

/* ========== PC 二维码支付弹窗 ========== */
.pay-qr-modal{display:none;position:fixed;inset:0;z-index:1005;align-items:center;justify-content:center;}
.pay-qr-modal.show{display:flex;}
.pqm-mask{position:absolute;inset:0;background:rgba(0,0,0,0.55);}
.pqm-box{
    position:relative;z-index:1;background:var(--card);border-radius:20px;
    width:340px;max-width:calc(100% - 40px);padding:26px 24px 22px;
    box-shadow:0 20px 60px rgba(0,0,0,.2);text-align:center;
    animation:pqmIn .28s cubic-bezier(.22,.61,.36,1);
}
@keyframes pqmIn{from{transform:translateY(14px) scale(.95);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}
.pqm-close{
    position:absolute;top:10px;right:14px;
    width:28px;height:28px;line-height:26px;text-align:center;
    font-size:24px;color:#94a3b8;cursor:pointer;border-radius:50%;
    transition:background .15s, color .15s;
}
.pqm-close:hover{background:#f2f4f8;color:#475569;}
.pqm-title{font-size:18px;font-weight:800;color:#1a2332;margin-bottom:4px;}
.pqm-tip{font-size:13px;color:#64748b;margin-bottom:18px;}
.pqm-qr-wrap{
    position:relative;width:240px;height:240px;margin:0 auto 14px;
    padding:10px;background:var(--card);border-radius:16px;
    border:1.5px solid #eef2f7;box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.pqm-qr{width:100%;height:100%;display:block;border-radius:10px;background:#fafbfc;}
.pqm-logo{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:44px;height:44px;padding:4px;box-sizing:border-box;
    background:var(--card);border-radius:12px;overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
}
.pqm-amount{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:10px;}
.pqm-amount-label{font-size:13px;color:#64748b;font-weight:600;}
.pqm-amount-val{font-family:"Helvetica Neue",Arial,sans-serif;font-size:28px;font-weight:900;color:#EF4444;line-height:1;}
.pqm-status{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13px;color:#64748b;font-weight:600;
    padding:4px 12px;border-radius:12px;background:#f7f8fa;margin-bottom:6px;
}
.pqm-dot{width:8px;height:8px;border-radius:50%;background:#F59E0B;animation:pqmBlink 1.2s ease-in-out infinite;}
@keyframes pqmBlink{0%,100%{opacity:1;}50%{opacity:.35;}}
.pqm-refresh{display:inline-block;margin-top:6px;font-size:12px;color:#64748b;text-decoration:none;transition:color .15s;}
.pqm-refresh:hover{text-decoration:underline;}
@media(max-width:380px){
    .pqm-box{padding:22px 18px 18px;}
    .pqm-qr-wrap{width:210px;height:210px;}
}

/* ============ 深色主题（跟随系统） ============ */
@media (prefers-color-scheme: dark) {
  /* 文字：标题/主副文案/金额标签/状态/关闭/刷新——浅色值在深底上不可读，这里整体翻亮 */
  .pcs-title,.pqm-title{color:#E8EEFB}
  .pcs-main{color:#E8EEFB}
  .pcs-sub,.pqm-tip,.pqm-amount-label,.pqm-status,.pqm-refresh{color:#9FB0CC}
  .pqm-status{background:#1A2540}
  .pcs-arrow{color:#7C8AB0}
  .pcs-cancel{background:#233153;color:#C7D3E8}
  .pqm-close{color:#8FA0BF}
  .pqm-close:hover{background:#233153;color:#E8EEFB}
  .pqm-refresh:hover{color:#E8EEFB}
  .pcs-handle{background:#3A4560}
  .pcs-item:active{background:#1A2540}
  @media(hover:hover){ .pcs-item:hover{background:#1A2540} }
  .pcs-cancel:active{background:#2C3C63;color:#E8EEFB}
  /* 收款二维码/图示保持白底 */
  .pqm-qr-wrap,.pqm-qr,.pqm-logo,.pcs-ic-img{background:#fff !important}
  .pqm-box,.pay-chooser-sheet{border:1px solid #233153}
}