/* QZWL checkout presentation. Original payment runtime remains unchanged. */
:root {
  color-scheme: light;
  --brand-blue-50: #edf6fb;
  --brand-blue-700: #286b91;
  --brand-blue-900: #205473;
  --brand-blue-950: #24435b;
  --brand-red-50: #fff0f2;
  --brand-red-600: #b3324b;
  --text-main: #24435b;
  --text-muted: #52697b;
  --line-soft: #d7e5ed;
  --shadow-card: 0 12px 34px rgb(74 105 133 / 7%);
}

html {
  min-height: 100%;
  background: #edf6fc;
}

body {
  min-height: 100dvh;
  margin: 0;
  font-family:
    "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  background:
    radial-gradient(ellipse at 95% 12%, #ffe9ef 0, transparent 36%),
    linear-gradient(180deg, #e8f4fe 0%, #f6faff 57%, #fff3f6 100%);
  color: var(--text-main);
}

/* Stationary clouds and petals keep decoration outside the scan surface. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(ellipse 130px 38px at 5% 15%, #fff 98%, transparent),
    radial-gradient(ellipse 66px 48px at 4% 12%, #fff 98%, transparent),
    radial-gradient(ellipse 72px 53px at 9% 13%, #fff 98%, transparent),
    radial-gradient(ellipse 160px 44px at 96% 68%, #fff 98%, transparent),
    radial-gradient(ellipse 78px 58px at 94% 64%, #fff 98%, transparent),
    radial-gradient(ellipse 64px 47px at 99% 65%, #fff 98%, transparent);
  opacity: 0.75;
}

body::after {
  background:
    radial-gradient(ellipse 6px 12px at 3% 34%, #f6bfce 98%, transparent),
    radial-gradient(ellipse 5px 10px at 12% 72%, #f3c3d1 98%, transparent),
    radial-gradient(ellipse 7px 14px at 93% 20%, #efbdcf 98%, transparent),
    radial-gradient(ellipse 5px 10px at 97% 43%, #f6bfce 98%, transparent),
    radial-gradient(ellipse 6px 12px at 87% 88%, #f3c3d1 98%, transparent),
    radial-gradient(ellipse 5px 11px at 7% 94%, #f6bfce 98%, transparent);
  opacity: 0.65;
}

#app {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.page-shell {
  min-height: 100dvh;
  padding: 32px 24px 48px;
}

.page-container {
  width: min(1060px, 100%);
}

.page-header {
  min-height: 52px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom-color: #cadde9;
}

.brand-name {
  font-size: 20px;
  font-weight: 700;
}

.brand-divider {
  background: #bed4e1;
}

.payment-grid {
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 24px;
}

.cashier-grid {
  gap: 24px;
}

.section-stack,
.side-stack {
  gap: 18px;
}

.app-card,
.payment-panel {
  background: #fff;
  border-color: #dce8ef;
  border-radius: 22px;
  box-shadow: var(--shadow-card);
}

.app-card {
  padding: 22px;
}

.payment-panel {
  padding: 26px 28px;
  gap: 22px;
}

.order-summary-head-card {
  padding: 16px 22px;
}

.order-summary__eyebrow,
.info-label,
.receipt-guide-main span,
.receipt-countdown-card span {
  color: #52697b;
}

.order-summary__merchant {
  font-size: 20px;
  line-height: 1.4;
}

.order-summary__grid {
  background: #f5f9fc;
  border: 0;
  border-radius: 14px;
  padding: 18px;
  gap: 16px;
}

.info-value {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
}

.status-badge {
  padding: 7px 12px;
  font-size: 13px;
}

.status-badge--warning {
  color: #815000;
  background: #fff5df;
}

.status-badge--success {
  color: #176242;
  background: #e8f6ed;
}

.status-badge--neutral {
  color: #52647a;
  background: #eef2f7;
}

.status-badge--danger {
  color: #a92e48;
  background: #fff0f2;
}

.payment-method-chip {
  border-radius: 14px;
  background: #f1f8fc;
  border-color: #e4eff5;
  margin-bottom: 14px;
}

.payment-title {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 700;
}

.payment-desc {
  max-width: 480px;
  margin: 8px auto 0;
}

.qrcode-shell {
  box-sizing: content-box;
  width: 220px;
  height: 220px;
  padding: 20px;
  margin-top: 22px;
  border: 1px solid #d7e5ed;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 18px rgb(56 95 123 / 5%);
}

.qrcode-image,
.qrcode-empty {
  width: 220px;
  height: 220px;
  flex-shrink: 0;
}

.payment-amount {
  margin-top: 18px;
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.receipt-pay-tip {
  max-width: 470px;
  margin: 10px auto 0;
  color: #52697b;
  font-size: 13px;
}

.receipt-guide-card {
  width: min(100%, 520px);
  border: 1px solid #dceaf2;
  border-radius: 16px;
  background: #f2f8fc;
  grid-template-columns: minmax(0, 1fr) 122px;
  padding: 16px;
  gap: 16px;
}

.receipt-guide-main strong {
  font-variant-numeric: tabular-nums;
  font-size: 22px;
}

.receipt-countdown-card {
  border-color: #dceaf2;
  border-radius: 12px;
  padding: 12px 8px;
  background: #fff;
}

.receipt-countdown-card strong {
  font-variant-numeric: tabular-nums;
  font-size: 23px;
  line-height: 1.4;
}

.page-link,
.btn-primary,
.btn-secondary,
.bank-transfer-copy {
  min-height: 44px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 18px;
  cursor: pointer;
}

.btn-secondary,
.page-link {
  color: #286b91;
  border-color: #bfd6e5;
  background: #fff;
}

.btn-secondary:hover,
.page-link:hover {
  color: #205473;
  background: #edf6fb;
  border-color: #77a9c5;
}

.btn-primary:hover {
  transform: none;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid #286b91;
  outline-offset: 4px;
}

.method-card,
.notice-box,
.info-tile,
.payment-brief,
.app-dialog {
  border-radius: 14px;
}

.amount-hero {
  color: #24435b;
  background: #edf6fb;
  border-radius: 16px;
}

.amount-hero__label {
  color: #52697b;
}

.error-panel {
  background: #fff;
  border-color: #f1c6cf;
}

.success-panel {
  background: #fff;
  border-color: #bfdfce;
}

.success-panel .payment-label {
  color: #176242;
  font-size: 18px;
}

.error-panel .payment-title,
.text-red-600 {
  color: #a92e48;
}

.success-panel,
.error-panel {
  min-height: 220px;
  align-content: center;
}

@media (width <= 900px) {
  .payment-grid,
  .cashier-grid {
    grid-template-columns: 1fr;
  }

  .page-container {
    max-width: 620px;
  }
}

@media (width <= 640px) {
  .page-shell {
    padding: 20px 14px 32px;
  }

  .page-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    min-height: 42px;
  }

  .brand-name {
    font-size: 18px;
  }

  .app-card,
  .payment-panel {
    padding: 20px 18px;
    border-radius: 18px;
  }

  .order-summary-head-card {
    padding: 12px 18px;
  }

  .order-summary-head {
    gap: 10px;
    min-height: 54px;
  }

  .order-summary__merchant {
    font-size: 18px;
  }

  .payment-title {
    font-size: 22px;
  }

  .payment-desc {
    font-size: 13px;
  }

  .qrcode-shell {
    padding: 16px;
    margin-top: 18px;
  }

  .payment-amount {
    font-size: 34px;
  }

  .receipt-guide-card {
    grid-template-columns: minmax(0, 1fr) 100px;
    gap: 10px;
    padding: 14px;
  }

  .receipt-countdown-card {
    min-height: 72px;
    padding: 10px 6px;
  }

  .receipt-countdown-card strong {
    font-size: 21px;
  }

  .receipt-guide-main strong {
    font-size: 20px;
  }

  .receipt-guide-main p {
    font-size: 12px;
  }

  .action-row {
    gap: 12px;
  }
}

@media (width <= 350px) {
  .page-shell {
    padding-inline: 10px;
  }

  .app-card,
  .payment-panel {
    padding-inline: 14px;
  }

  .qrcode-shell {
    padding: 12px;
  }

  .receipt-guide-card {
    grid-template-columns: 1fr;
  }

  .receipt-countdown-card {
    min-height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* Adapted from lizhipay/mcy-shop (MIT): local illustrated background, floating white checkout surface. */
html,body { background:#d9ecf5; }
body::before { background:linear-gradient(90deg,transparent 25%,#e4f0f84d 65%,#e4f0f8b3),url('/cashier/assets/mcy-bg-v20.jpg') center center / cover no-repeat; opacity:1; }
body::after { display:none; }
.page-shell { padding:28px 30px 40px clamp(380px,40vw,690px); }
.page-container { width:min(880px,100%); }
.page-header { padding:14px 18px; margin-bottom:18px; background:#fffffff0; border:1px solid #fff; border-radius:12px; backdrop-filter:blur(12px); }
.payment-grid { grid-template-columns:minmax(0,1fr) 245px; gap:18px; }
.app-card,.payment-panel { background:#fffffff5; border-radius:12px; border:1px solid #fff; box-shadow:0 14px 38px #294c6b12; }
.order-summary-head-card { padding:14px 18px; }
.payment-panel { position:relative; padding:24px 20px; overflow:hidden; }
.payment-panel::before { content:''; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,#649bc7,#a2bbda); }
.payment-title { font-size:24px; color:#24435b; }
.payment-method-chip { border-radius:6px; color:#286b91; background:#edf6fb; border-color:#d7e5ed; }
.qrcode-shell { background:#fff; border-radius:8px; border:1px solid #dce2ee; box-shadow:none; margin-top:18px; }
.qrcode-image { border-radius:0; }
.payment-amount { color:#24435b; font-size:36px; margin-top:14px; }
.receipt-guide-card { border-radius:8px; background:#f1f7fb; border-color:#d7e5ed; padding:12px; grid-template-columns:minmax(0,1fr) 104px; }
.receipt-countdown-card { border-radius:6px; }
.order-summary__grid { background:#f4f8fb; border-radius:6px; padding:14px; }
.btn-primary { background:#286b91; border-color:#286b91; color:white; }
.btn-primary:hover { background:#205473; }
.btn-secondary,.page-link { border-radius:6px; }
@media (width >= 1800px) { .page-shell { padding-right:max(30px,calc((100vw - 1600px)/2)); } }
@media (width <= 1300px) { .page-shell { padding-left:36vw; } .payment-grid { grid-template-columns:1fr; } }
@media (width <= 800px) { .page-shell { padding:24px 18px 32px; } .page-container { width:min(540px,100%); } body::before { background:linear-gradient(#e5f1f680,#e5f1f6d9),url('/cashier/assets/mcy-bg-v20.jpg') 38% top / auto 100dvh no-repeat; } .page-header { margin-bottom:14px; } .section-stack,.side-stack { gap:14px; } .app-card { padding:18px; } .payment-panel { padding:22px 18px; } }
@media (width <= 350px) { .page-shell { padding-inline:10px; } .payment-panel { padding-inline:14px; } .receipt-guide-card { grid-template-columns:1fr; } }