/* ============================================================
   XindaPay 收银台主题 · 蓝色渐变 + 白色卡片
   ============================================================ */

:root {
  --xd-primary: #1677ff;
  --xd-primary-dark: #0d5cd6;
  --xd-aside: #001529;
  --xd-success: #22c55e;
  --xd-warning: #f59e0b;
  --xd-danger: #e74c3c;
  --xd-text: #1f2d3d;
  --xd-text-mute: #6b7280;
  --xd-border: #e5eaf3;
  --xd-bg: #f5f7fa;
}

/* ---------- 全局背景 ---------- */
body,
.cashier-shell {
  background: var(--xd-bg) !important;
  color: var(--xd-text) !important;
}

/* ---------- 顶栏：一条蓝色渐变 ---------- */
.cashier-topbar {
  background: linear-gradient(90deg, #0d5cd6 0%, #1677ff 100%) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(13,92,214,.25) !important;
  color: #fff !important;
  border-radius: 0 !important;
  padding: 14px 24px !important;
}
.cashier-topbar .brand-mark,
.cashier-topbar .brand-mark strong,
.cashier-topbar .brand-mark span {
  color: #fff !important;
}
.brand-symbol {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

/* 顶栏右侧按钮 */
.cashier-topbar .support-link,
.cashier-topbar .language-toggle,
.cashier-topbar .theme-button {
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
  border-radius: 8px !important;
}
.cashier-topbar .support-link:hover,
.cashier-topbar .language-toggle:hover,
.cashier-topbar .theme-button:hover {
  background: rgba(255,255,255,.28) !important;
}

/* ---------- 主卡片 ---------- */
.checkout-card {
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  border: none !important;
  padding: 28px !important;
}

/* ---------- 顶部"安全支付 / 等待付款" ---------- */
.eyebrow {
  color: var(--xd-primary) !important;
  font-weight: 600 !important;
}
.checkout-status {
  background: #f0f7ff !important;
  color: var(--xd-primary) !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  border: 1px solid #cfe4ff !important;
}
.status-dot {
  background: var(--xd-primary) !important;
}

/* ---------- 步骤条 ---------- */
.checkout-step {
  background: #fff !important;
  border: 2px solid var(--xd-border) !important;
  border-radius: 10px !important;
  color: var(--xd-text) !important;
}
.checkout-step span {
  background: #e8eef8 !important;
  color: var(--xd-text-mute) !important;
}
.checkout-step.active {
  background: linear-gradient(90deg, #0d5cd6 0%, #1677ff 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.checkout-step.active span {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
}

/* ---------- 子卡片（订单信息、网络选择） ---------- */
.order-console,
.method-console,
.checkout-aside,
.transfer-console,
.qr-console {
  background: #f9fbfe !important;
  border: 1px solid var(--xd-border) !important;
  border-radius: 12px !important;
}

/* ---------- 订单信息 ---------- */
.order-strip dt {
  color: var(--xd-text-mute) !important;
  font-weight: 500 !important;
}
.order-strip dd {
  color: var(--xd-text) !important;
  font-weight: 600 !important;
}
.amount-slab {
  background: linear-gradient(90deg, #f0f7ff 0%, #e6f1ff 100%) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
}
.amount-slab strong {
  color: var(--xd-primary) !important;
  font-size: 26px !important;
}

/* ---------- 下拉选择器 ---------- */
.custom-select-button {
  background: #fff !important;
  border: 1px solid var(--xd-border) !important;
  border-radius: 8px !important;
}
.custom-select-button:hover,
.custom-select-button[aria-expanded="true"] {
  border-color: var(--xd-primary) !important;
  box-shadow: 0 0 0 3px rgba(22,119,255,.1) !important;
}
.custom-options {
  border-radius: 8px !important;
  border: 1px solid var(--xd-border) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.08) !important;
}
.custom-option:hover,
.custom-option.active {
  background: #f0f7ff !important;
  color: var(--xd-primary) !important;
}

/* ---------- 右侧"需支付"卡片 ---------- */
.pay-number strong {
  color: var(--xd-primary) !important;
  font-size: 26px !important;
}
.pay-number span,
.pay-number small {
  color: var(--xd-text-mute) !important;
}

/* ---------- 主按钮 ---------- */
.button.primary,
.button.primary.full {
  background: linear-gradient(90deg, #0d5cd6 0%, #1677ff 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(22,119,255,.28) !important;
}
.button.primary:hover {
  box-shadow: 0 6px 20px rgba(22,119,255,.4) !important;
  transform: translateY(-1px);
}
.button.secondary {
  background: #fff !important;
  border: 1px solid var(--xd-border) !important;
  color: var(--xd-text) !important;
  border-radius: 10px !important;
}
.button.secondary:hover {
  border-color: var(--xd-primary) !important;
  color: var(--xd-primary) !important;
}
.button:disabled,
.button.primary:disabled {
  background: #cfd8e3 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* ---------- 二维码区 ---------- */
.qr-code canvas,
.qr-code img {
  border-radius: 10px !important;
  border: 1px solid var(--xd-border) !important;
  padding: 12px !important;
  background: #fff !important;
}
.transfer-summary strong {
  color: var(--xd-primary) !important;
}
.transfer-summary span,
.transfer-summary small {
  color: var(--xd-text-mute) !important;
}

/* ---------- 收款地址 ---------- */
.address-box {
  background: #f0f7ff !important;
  border: 1px solid #cfe4ff !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
}
.address-box label {
  color: var(--xd-primary) !important;
  font-weight: 600 !important;
}
.address-box code {
  color: var(--xd-text) !important;
  font-size: 13px !important;
  word-break: break-all !important;
}
.copy-button {
  background: var(--xd-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
}
.copy-button:hover {
  background: var(--xd-primary-dark) !important;
}

/* ---------- 步骤说明（01/02/03） ---------- */
.instruction-grid > div {
  background: #fff !important;
  border: 1px solid var(--xd-border) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
}
.instruction-grid > div > span {
  background: var(--xd-primary) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}
.instruction-grid p {
  color: var(--xd-text) !important;
}

/* ---------- 倒计时 ---------- */
.countdown {
  background: #f0f7ff !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  color: var(--xd-primary) !important;
}
.countdown strong {
  color: var(--xd-primary) !important;
  font-weight: 700 !important;
}

/* ---------- 页脚 ---------- */
.checkout-footer {
  color: var(--xd-text-mute) !important;
  border-top: 1px solid var(--xd-border) !important;
  padding-top: 16px !important;
  margin-top: 24px !important;
}
.checkout-footer a {
  color: var(--xd-primary) !important;
}

/* ---------- 移动端适配 ---------- */
@media (max-width: 680px) {
  .checkout-card {
    padding: 16px !important;
    border-radius: 10px !important;
  }
  .cashier-topbar {
    padding: 12px 16px !important;
  }
  .amount-slab strong,
  .pay-number strong {
    font-size: 22px !important;
  }
  .address-box code {
    font-size: 12px !important;
  }
  .button.primary,
  .button.secondary {
    width: 100% !important;
  }
}

/* ============================================================
   客服按钮 · 顶栏 + 备注框
   ============================================================ */

/* 顶栏右上角客服：变成带文字的按钮 */
.cashier-topbar .support-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  height: auto !important;
  width: auto !important;
}
.cashier-topbar .support-link:hover {
  background: rgba(255,255,255,.3) !important;
  transform: translateY(-1px) !important;
}
.cashier-topbar .support-link svg {
  width: 16px !important;
  height: 16px !important;
}
.cashier-topbar .support-link::after {
  content: "联系客服";
  white-space: nowrap;
}

/* 移动端：只显示图标，节省空间 */
@media (max-width: 680px) {
  .cashier-topbar .support-link::after {
    content: "";
  }
  .cashier-topbar .support-link {
    padding: 8px 10px !important;
  }
}

/* 备注框里的客服按钮：做得更大更醒目 */
.pay-notice-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 12px !important;
  padding: 10px 22px !important;
  background: linear-gradient(90deg, #0d5cd6 0%, #1677ff 100%) !important;
  color: #fff !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  box-shadow: 0 4px 12px rgba(22,119,255,.3) !important;
  transition: all .2s !important;
}
.pay-notice-btn:hover {
  box-shadow: 0 6px 18px rgba(22,119,255,.4) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
@media (max-width: 680px) {
  .pay-notice-btn {
    display: flex !important;
    width: 100% !important;
  }
}

/* 底部客服按钮 */
.pay-notice-bottom {
  display: block !important;
  width: fit-content !important;
  margin: 16px auto 0 !important;
}
@media (max-width: 680px) {
  .pay-notice-bottom {
    width: 100% !important;
    margin: 14px 0 0 !important;
  }
}

/* ============================================================
   第二版：参考专业收银台设计（白色极简）
   ============================================================ */

/* 顶栏改白色 */
.cashier-topbar {
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
.cashier-topbar .brand-mark,
.cashier-topbar .brand-mark strong,
.cashier-topbar .brand-mark span {
  color: #333 !important;
}
.brand-symbol {
  background: #f5f5f5 !important;
  color: #333 !important;
}

/* 主卡片：去掉花哨边框，纯白 */
.checkout-card {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.05) !important;
  padding: 24px !important;
}

/* 支付金额红色大字 */
.amount-slab strong,
.pay-number strong,
.transfer-summary strong {
  color: #e74c3c !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -.5px !important;
}

/* TRC20 红色标签 */
.address-box label {
  display: inline-block !important;
  background: #e74c3c !important;
  color: #fff !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* 倒计时橙色胶囊 */
.countdown {
  background: #fff7e6 !important;
  color: #d97706 !important;
  border: 1px solid #ffd591 !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.countdown strong {
  color: #d97706 !important;
  font-weight: 700 !important;
}

/* 二维码放大居中 */
.qr-code {
  text-align: center !important;
  padding: 20px 0 !important;
}
.qr-code canvas,
.qr-code img {
  width: 220px !important;
  height: 220px !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
  border-radius: 12px !important;
}

/* 客服按钮：低调样式 */
.pay-notice-btn {
  background: #f5f7fa !important;
  color: #1677ff !important;
  box-shadow: none !important;
  border: 1px solid #e5eaf3 !important;
}
.pay-notice-btn:hover {
  background: #f0f7ff !important;
  color: #1677ff !important;
  box-shadow: none !important;
  transform: none !important;
}