/* ============================================================
   matrix-pay-widget.css · callguard.cn 全站通用付费挂件 v1.0
   2026-09-29
   用法（两行，任意子站页面 </body> 前）：
     <link rel="stylesheet" href="/shared/css/matrix-pay-widget.css?v=20260929a">
     <script src="/shared/js/matrix-pay-widget.js?v=20260929a" data-site="XX" defer></script>
   CSP: default-src 'self' / style-src 'self' → 本文件是唯一样式来源，页面零内联
   定位：左下角（避开右下的 .cg-fab 矩阵键与 ai-assistant 挂件）
   ============================================================ */

.mxp, .mxp * { box-sizing: border-box; }
.mxp { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; }
.mxp-hidden { display: none !important; }

/* ---------- 悬浮入口 ---------- */
.mxp-fab {
  position: fixed; left: 14px; bottom: 18px; z-index: 99998;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 15px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
  letter-spacing: 1px; cursor: pointer; opacity: .94;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s, transform .15s;
}
.mxp-fab:hover, .mxp-fab:active { opacity: 1; transform: translateY(-1px); }
.mxp-fab-i { font-size: 15px; line-height: 1; }
@media (max-width: 640px) { .mxp-fab { left: 10px; bottom: 14px; padding: 9px 12px; font-size: 12px; } }
@media print { .mxp-fab { display: none; } }

/* ---------- 遮罩 ---------- */
.mxp-mask { position: fixed; inset: 0; z-index: 99998; background: rgba(15, 23, 42, .5); }

/* ---------- 主面板 ---------- */
.mxp-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999;
  max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; color: #0f172a;
  border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .28);
}
@media (min-width: 721px) {
  .mxp-panel { left: auto; right: 14px; bottom: 14px; width: 440px; max-height: 84vh; border-radius: 16px; }
}

.mxp-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.mxp-hbox { flex: 1; min-width: 0; }
.mxp-title { font-size: 18px; font-weight: 800; letter-spacing: .5px; }
.mxp-sub { font-size: 12px; color: #64748b; margin-top: 3px; }
.mxp-x {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: #f1f5f9; color: #475569; font-size: 14px; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mxp-x:hover { background: #e2e8f0; }

/* ---------- 状态条 ---------- */
.mxp-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 11px 13px; border-radius: 12px; margin-bottom: 14px; }
.mxp-status-on { background: #ecfdf5; border: 1px solid #a7f3d0; }
.mxp-status-off { background: #f8fafc; border: 1px solid #e2e8f0; }
.mxp-badge { font-size: 12px; font-weight: 700; color: #047857; background: #d1fae5; border-radius: 999px; padding: 3px 9px; }
.mxp-badge-off { color: #64748b; background: #e2e8f0; }
.mxp-status-t { font-size: 13px; font-weight: 600; color: #0f172a; }
.mxp-status-c { font-size: 11px; color: #64748b; width: 100%; letter-spacing: .5px; }

/* ---------- 套餐卡 ---------- */
.mxp-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 400px) { .mxp-plans { grid-template-columns: 1fr; } }
.mxp-plan {
  display: flex; flex-direction: column; gap: 7px;
  border: 1px solid #e2e8f0; border-radius: 14px; padding: 13px 12px;
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.mxp-plan:hover { border-color: #cbd5e1; box-shadow: 0 4px 14px rgba(15, 23, 42, .07); }
.mxp-plan-hot { border-color: #f59e0b; background: #fffbeb; }
.mxp-plan-top { display: flex; align-items: center; gap: 6px; }
.mxp-plan-name { font-size: 14px; font-weight: 700; flex: 1; }
.mxp-plan-tag { font-size: 10px; font-weight: 700; color: #b45309; background: #fef3c7; border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.mxp-plan-price { display: flex; align-items: baseline; gap: 2px; color: #dc2626; }
.mxp-plan-cur { font-size: 13px; font-weight: 700; }
.mxp-plan-num { font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.mxp-plan-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.mxp-plan-ul li { font-size: 11.5px; color: #64748b; line-height: 1.5; padding-left: 12px; position: relative; }
.mxp-plan-ul li::before { content: "·"; position: absolute; left: 3px; color: #94a3b8; font-weight: 700; }

/* ---------- 按钮 ---------- */
.mxp-btn {
  width: 100%; border: 0; border-radius: 10px; padding: 10px 12px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: opacity .15s;
}
.mxp-btn:disabled { opacity: .55; cursor: default; }
.mxp-btn-primary { background: linear-gradient(135deg, #2a6ff3, #5ac8fa); color: #fff; box-shadow: 0 3px 12px rgba(42, 111, 243, .3); }
.mxp-btn-primary:hover { opacity: .92; }
.mxp-btn-ghost { background: #f1f5f9; color: #334155; }
.mxp-btn-ghost:hover { background: #e2e8f0; }

.mxp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mxp-actbox { display: flex; gap: 8px; margin-top: 10px; }
.mxp-input {
  flex: 1; min-width: 0; border: 1px solid #cbd5e1; border-radius: 10px;
  padding: 10px 12px; font-size: 13px; letter-spacing: 1px; color: #0f172a; background: #fff;
}
.mxp-input:focus { outline: 2px solid #93c5fd; outline-offset: 0; border-color: #93c5fd; }
.mxp-actbox .mxp-btn { width: auto; flex: none; padding: 10px 18px; }

.mxp-tip { font-size: 11px; color: #94a3b8; text-align: center; margin-top: 12px; line-height: 1.6; }
.mxp-tip-dim { margin-top: 4px; font-size: 10.5px; color: #cbd5e1; }

/* ---------- 支付弹层 ---------- */
.mxp-pay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, .58); padding: 16px; }
.mxp-paycard {
  position: relative; width: 100%; max-width: 330px; background: #fff; color: #0f172a;
  border-radius: 16px; padding: 22px 18px 18px; text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.mxp-x-pay { position: absolute; top: 10px; right: 10px; }
.mxp-paytitle { font-size: 15px; font-weight: 800; margin-bottom: 14px; }
.mxp-qr { display: flex; align-items: center; justify-content: center; min-height: 200px; margin-bottom: 10px; }
.mxp-qr img, .mxp-qr canvas { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.mxp-qrfallback { font-size: 13px; color: #2a6ff3; word-break: break-all; }
.mxp-amount { font-size: 26px; font-weight: 800; color: #dc2626; margin-bottom: 12px; letter-spacing: -.5px; }
.mxp-openwx {
  display: block; margin: 0 auto 10px; max-width: 220px; padding: 11px 14px;
  border-radius: 10px; background: #07c160; color: #fff; font-size: 13.5px; font-weight: 700;
  text-decoration: none;
}
.mxp-openwx:hover { opacity: .92; color: #fff; }
.mxp-openwx:visited { color: #fff; }
.mxp-paystate { font-size: 12.5px; color: #64748b; }
.mxp-demo { font-size: 11.5px; color: #b45309; background: #fef3c7; border-radius: 8px; padding: 7px 10px; margin-bottom: 10px; line-height: 1.5; }
.mxp-done { margin-top: 4px; }
.mxp-done-t { font-size: 15px; font-weight: 800; color: #047857; margin-bottom: 8px; }
.mxp-done-code { font-size: 15px; font-weight: 800; letter-spacing: 1.5px; color: #0f172a; background: #f1f5f9; border-radius: 10px; padding: 11px; margin-bottom: 11px; word-break: break-all; }

/* ---------- 轻提示 ---------- */
.mxp-toast {
  position: fixed; left: 50%; top: 20px; transform: translateX(-50%);
  z-index: 100001; max-width: 92vw;
  background: rgba(15, 23, 42, .94); color: #fff; font-size: 13px; line-height: 1.5;
  border-radius: 10px; padding: 11px 16px; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}

/* ---------- 会员门控（供各站自行套在按钮上） ---------- */
.mxp-locked { opacity: .55; cursor: pointer; }