/* ============================================================
   order-pending.css —— 待付款详情页样式（参照淘宝 / Steam 待支付页）
   依赖：base.css
   ============================================================ */

.op-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px 96px; /* 底部留白给固定操作栏 */
  box-sizing: border-box;
}

/* ---- 顶部状态条 ---- */
.op-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 18px;
  border-radius: 12px;
  color: #fff;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.op-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.op-banner-left > i {
  font-size: 30px;
}
.op-banner-title {
  font-size: 19px;
  font-weight: 700;
}
.op-banner-sub {
  font-size: 12px;
  opacity: 0.9;
  margin-top: 2px;
}
.op-banner-amount {
  font-size: 22px;
  font-weight: 700;
}
.op-status-pending { background: linear-gradient(135deg, #ff7a45 0%, #ff4d4f 100%); }
.op-status-paid { background: linear-gradient(135deg, #36cfc9 0%, #1890ff 100%); }
.op-status-closed { background: linear-gradient(135deg, #bfbfbf 0%, #8c8c8c 100%); }

/* ---- 订单关闭倒计时条 ---- */
.op-countdown-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: #FFF7E6;
  border: 1px solid #FFD591;
  color: #AD4E00;
  font-size: 13px;
  line-height: 1.5;
}
.op-countdown-bar > i { color: #FA8C16; }
.op-countdown-num {
  font-family: "DIN Alternate", "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  color: #D4380D;
  padding: 0 2px;
}
.op-countdown-bar.op-countdown-expired {
  background: #FFF1F0;
  border-color: #FFA39E;
  color: #A8071A;
}
.op-countdown-bar.op-countdown-expired > i { color: #CF1322; }

/* ---- 卡片 ---- */
.op-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.op-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2329;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.op-card-title > i { color: #ff7a45; }

/* ---- 账号信息 ---- */
.op-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px dashed #f0f0f0;
  font-size: 14px;
}
.op-account-row:last-child { border-bottom: none; }
.op-account-label { color: #8a8f99; }
.op-account-value { color: #1f2329; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.op-pay-icon { color: #ff7a45; }
.op-muted { color: #bfbfbf; font-weight: 400; }
.op-copy-btn {
  border: 1px solid #ff7a45;
  color: #ff7a45;
  background: #fff;
  border-radius: 6px;
  font-size: 12px;
  padding: 2px 8px;
  cursor: pointer;
}
.op-copy-btn:hover { background: #fff3ec; }

/* ---- 商品信息 ---- */
.op-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #f5f5f5;
}
.op-product-name { font-size: 15px; font-weight: 600; color: #1f2329; }
.op-product-sub { font-size: 12px; color: #8a8f99; margin-top: 4px; }
.op-product-price { font-size: 16px; font-weight: 700; color: #ff4d4f; }
.op-product-meta {
  display: flex;
  gap: 18px;
  margin-top: 12px;
  font-size: 13px;
  color: #595f66;
}

/* ---- 金额明细 ---- */
.op-amount-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  color: #595f66;
}
.op-amount-row.op-discount { color: #ff4d4f; }
.op-amount-row.op-total {
  font-size: 16px;
  font-weight: 700;
  color: #1f2329;
  border-top: 1px dashed #f0f0f0;
  margin-top: 6px;
  padding-top: 12px;
}
.op-amount-row.op-total span:last-child { color: #ff4d4f; }

/* ---- 订单信息 ---- */
.op-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 7px 0;
  border-bottom: 1px dashed #f5f5f5;
}
.op-info-row:last-child { border-bottom: none; }
.op-info-label { color: #8a8f99; }
.op-info-value { color: #1f2329; text-align: right; word-break: break-all; }

/* ---- 支付指引 ---- */
.op-notice { background: #fff8f3; border: 1px solid #ffe0cc; }
.op-notice .op-card-title > i { color: #ff7a45; }
.op-notice-text { font-size: 13px; color: #8a5a2b; line-height: 1.6; margin: 0 0 12px; }
.op-copy-account { margin-top: 4px; }

/* ---- 加载 / 错误 ---- */
.op-loading, .op-error {
  text-align: center;
  padding: 60px 16px;
  color: #8a8f99;
}
.op-loading i { font-size: 28px; margin-bottom: 10px; display: block; }
.op-error-icon { font-size: 40px; color: #ff4d4f; margin-bottom: 10px; }
.op-error-text { margin-bottom: 16px; font-size: 14px; }

/* ---- 底部固定操作栏 ---- */
.op-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  z-index: 50;
  max-width: 720px;
  margin: 0 auto;
  box-sizing: border-box;
}
.op-action-amount { display: flex; align-items: baseline; gap: 6px; }
.op-action-label { font-size: 12px; color: #8a8f99; }
.op-action-value { font-size: 20px; font-weight: 700; color: #ff4d4f; }
.op-action-buttons { display: flex; gap: 10px; }

/* ---- 按钮（仅作用于待付款页 .op-page 内，避免覆盖全站 .btn-primary/.btn-outline） ---- */
.op-action-bar .btn { padding: 9px 18px; font-size: 14px; border-radius: 22px; }
.op-page .btn-primary {
  background: linear-gradient(135deg, #ff7a45 0%, #ff4d4f 100%);
  color: #fff;
  border: none;
}
.op-page .btn-primary:hover { filter: brightness(1.05); }
.op-page .btn-outline {
  background: #fff;
  color: #ff7a45;
  border: 1px solid #ff7a45;
}
.op-page .btn-outline:hover { background: #fff3ec; }

/* ---- 兜底 Toast ---- */
.op-toast {
  position: fixed;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 9999;
  max-width: 80%;
  text-align: center;
}
.op-toast-success { background: rgba(56, 178, 116, 0.92); }
.op-toast-error { background: rgba(245, 77, 79, 0.92); }
.op-toast-info { background: rgba(0, 0, 0, 0.82); }

@media (max-width: 480px) {
  .op-banner { padding: 16px 14px; }
  .op-banner-amount { font-size: 18px; }
  .op-action-bar { padding: 10px 14px; }
  .op-action-bar .btn { padding: 8px 14px; font-size: 13px; }
}