/* 码支付 · 收银台模板共用基础样式
 * 只含跨模板必须一致的行为性样式（toast / 官方通道取码区 / 提示块），
 * 视觉样式全部由各模板自带，避免互相污染。
 */
.pay-toast {
  position: fixed; left: 50%; top: 76px; transform: translateX(-50%);
  background: rgba(17, 24, 39, .92); color: #fff; font-size: 13px;
  padding: 9px 18px; border-radius: 999px; z-index: 99999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  pointer-events: none; animation: payToastIn .18s ease;
}
@keyframes payToastIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* 官方通道取码区：内容由 pay.js 填充 */
.of-box { display: none; }
[data-of-loading] { padding: 30px 0; font-size: 14px; }
[data-of-loading][data-kind="wait"] { color: #b45309; }
[data-of-loading][data-kind="err"]  { color: #e11d48; }
[data-of-qr] img { display: block; width: 240px; height: 240px; margin: 0 auto; }
.of-qr-err {
  width: 240px; height: 240px; margin: 0 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #e11d48; font-size: 13px; text-align: center;
  border: 1px dashed #fecdd3; border-radius: 12px; background: #fff5f5;
}
.of-qr-err span { color: #94a3b8; font-size: 12px; margin-top: 6px; }
[data-of-redirect] { text-align: center; font-size: 14px; }
.of-go {
  display: inline-block; margin-top: 12px; padding: 11px 26px; background: #1677ff; color: #fff;
  border: 0; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer;
  text-decoration: none; font-family: inherit;
}
.of-warn { color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; padding: 10px 14px; border-radius: 8px; font-size: 13px; }

/* 官方通道 loading 转圈 */
.of-spin {
  display: inline-block; width: 28px; height: 28px; vertical-align: -6px; margin-right: 8px;
  border: 3px solid rgba(120, 130, 150, .25); border-top-color: #07c160; border-radius: 50%;
  animation: ofSpin .8s linear infinite;
}
@keyframes ofSpin { to { transform: rotate(360deg); } }

/* 未支付 / 已支付 / 已过期 三态统一切换（各模板只需在自身 CSS 里定义 .pending/.paid/.expired 的样式） */
[data-official-area] { display: none; }
body[data-mode="official"] [data-official-area] { display: block; }
body[data-mode="qr"]       [data-qr-only]       { display: revert; }