/* pay.css — payment bottom-sheet (checkout) and the SUCCESS/DELIVERY screen. */

.pay-backdrop { position: fixed; inset: 0; background: rgba(26, 22, 20, .44); animation: fadeIn 180ms ease both; z-index: 20; }
.pay-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; top: 52px; z-index: 21; max-width: 520px; margin: 0 auto;
  background: var(--surface); border-radius: 24px 24px 0 0; box-shadow: 0 -12px 40px -14px rgba(26, 22, 20, .4);
  display: flex; flex-direction: column; animation: sheetUp 240ms cubic-bezier(.2, .8, .2, 1) both; overflow: hidden;
}
/* two single-line, ellipsis-clamped subtitle rows (product line, memo line)
   instead of one wrapping .hero-sub — a wrapped "× N" reads as a typo. */
.pay-hero .hero-sub-line {
  font-size: var(--fs-caption); opacity: .92; color: #fff; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.pay-hero .hero-sub-line:first-child { margin-top: 3px; }
.pay-hero .hero-sub-line b { font-family: var(--font-mono); font-weight: 600; }
.pay-hero .pill { flex: none; }
.hero-pills { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.pay-body { flex: 1; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
/* Flexbox pitfall: a flex item whose own overflow isn't 'visible' (like
   .pay-rows below, overflow:hidden for its rounded corners) gets an
   automatic min-height of 0 per spec, so when .pay-body's children exceed
   its available height it silently crushes that one item instead of
   scrolling. flex-shrink:0 on every direct child forces the intended
   behavior: the body scrolls, nothing gets invisibly squashed. */
.pay-body > * { flex-shrink: 0; }

.notice { padding: 13px; border-radius: var(--r2); display: flex; gap: 10px; font-size: var(--fs-note); line-height: var(--lh-normal); }
.notice.warn { background: var(--warn-50); border: 1px solid #F3E0BC; color: var(--warn-fg); }
.notice.dan { background: var(--dan-50); border: 1px solid #F6D2D2; color: var(--dan-fg); }
.notice.neutral { background: #F5F1EC; border: 1px solid var(--line); color: var(--ink-soft); }

.qr-block { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.qr-amount { text-align: center; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-price-lg); letter-spacing: -.6px; color: var(--brand-d); }
.qr-frame { padding: 10px; background: #fff; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--sh1); }
.qr-frame img { width: 148px; height: 148px; display: block; border-radius: 4px; background: var(--neutral-50); }
.qr-hint { font-size: var(--fs-caption); color: var(--muted); text-align: center; line-height: 1.4; }

/* countdown pill: default (unused standalone now) + hero variant, a compact
   chip that sits next to the status pill instead of under the QR — keeps
   the fold above the transfer card short. */
.countdown-pill { display: flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: var(--brand-50); border: 1px solid var(--brand-100); }
.countdown-pill span { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-body); color: var(--brand-d); }
.countdown-pill.hero { padding: 4px 10px; gap: 5px; background: rgba(255, 255, 255, .92); border: none; }
.countdown-pill.hero span { font-size: var(--fs-small); color: var(--brand-d); }

.paid-block { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 12px; }
.paid-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--ok-50); display: grid; place-items: center; }
.paid-title { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-title); }
.paid-note { font-size: var(--fs-label); color: var(--muted); text-align: center; line-height: var(--lh-relaxed); max-width: 280px; }
.paid-busy { display: flex; align-items: center; gap: 8px; font-size: var(--fs-note); color: var(--brand-d); font-weight: 600; }

.pay-rows { overflow: hidden; }
.pay-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 13px; border-top: 1px solid var(--line); }
.pay-row:first-child { border-top: none; }
.pay-row .info { min-width: 0; flex: 1; }
.pay-row .label { font-size: var(--fs-pill); color: var(--muted); }
.pay-row .value { font-size: var(--fs-amount); font-weight: 600; margin-top: 2px; }
.pay-row .value.mono { font-family: var(--font-mono); letter-spacing: .4px; }
/* "Nội dung CK" row — must stand out, it's the one field that has to match
   exactly for the poller to auto-confirm the payment. */
.pay-row.emphasized { background: var(--brand-50); border-top: 1px solid var(--brand-100); border-bottom: 1px solid var(--brand-100); }
.pay-row.emphasized .label { color: var(--brand-d); font-weight: 700; }
.pay-row.emphasized .value { color: var(--brand-d); }
.pay-warn-note { padding: 12px 13px; border-radius: var(--r1); background: #FCFAF8; border: 1px dashed #E0D8CF; font-size: var(--fs-caption); color: var(--ink-soft); line-height: var(--lh-relaxed); }

.pay-actions { display: flex; flex-direction: column; gap: 6px; }
.pay-actions .dl-qr { width: 100%; }
.pay-secondary-link { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: center; color: var(--brand-d); font-weight: 600; font-size: var(--fs-note); }
.pay-secondary-link:hover { background: #F6F2EE; border-radius: var(--r1); }

.pay-footer { flex: none; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.pay-footer .link-cancel { width: 100%; min-height: 44px; border-radius: var(--r1); color: var(--muted); font-weight: 600; font-size: var(--fs-label); text-align: center; display: flex; align-items: center; justify-content: center; }
.pay-footer .link-cancel:hover { background: #F6F2EE; }

/* full-page variant: pay is its own route (no screen to sheet over) */
.pay-page.pay-sheet { position: static; inset: auto; flex: 1; border-radius: 0; box-shadow: none; animation: none; max-width: none; }

/* ---- success / delivery ---- */
.succ-hero {
  flex: none; padding: 20px 18px 22px; color: #fff; position: relative; overflow: hidden;
}
.succ-hero::before { content: ''; position: absolute; inset: 0; opacity: .15; background: repeating-linear-gradient(115deg, #fff 0 1px, transparent 1px 13px); }
.succ-hero.ok { background: linear-gradient(140deg, #0E8F63, #17A97A 60%, #4CC79B); }
.succ-hero.wait { background: linear-gradient(140deg, var(--brand), #FF8A3D 65%, #FFB067); }
.succ-hero-row { position: relative; display: flex; align-items: center; gap: 12px; }
.succ-badge { width: 44px; height: 44px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .22); display: grid; place-items: center; }
.succ-hero h2 { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-heading); margin: 0; }
.succ-hero .sub { font-size: var(--fs-label); opacity: .93; margin-top: 2px; }
.succ-hero .plain { position: relative; }
.succ-hero .plain h2 { font-size: var(--fs-heading); }
.succ-hero .plain .sub { margin-top: 3px; }

.succ-scroll { flex: 1; padding: 16px 16px 96px; display: flex; flex-direction: column; gap: 14px; }
.succ-codes-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.succ-codes-head .label { font-weight: 600; font-size: var(--fs-body); }
.succ-codes-list { display: flex; flex-direction: column; gap: 9px; }
.code-card { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; }
.code-card .info { flex: 1; min-width: 0; }
.code-card .code { font-family: var(--font-mono); font-size: var(--fs-amount-sm); font-weight: 600; letter-spacing: .6px; word-break: break-all; }
.code-card .note { font-size: var(--fs-pill); color: var(--muted); margin-top: 3px; }

.howto-box { padding: 14px; border-radius: var(--r2); background: #FCFAF8; border: 1px solid var(--line); font-size: var(--fs-note); color: var(--ink-soft); line-height: var(--lh-loose); }
.howto-box .title { font-weight: 600; color: var(--text); margin-bottom: 5px; font-size: var(--fs-label); }

.backorder-card { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.backorder-row { display: flex; justify-content: space-between; font-size: var(--fs-label); }
.backorder-row .k { color: var(--muted); }
.backorder-row .v { font-weight: 600; }

/* bank-app deeplinks (same-phone payment) — collapsed to MB Bank + 3 more,
   the rest behind a native <details> expander so this block stays short. */
.bank-apps-card { padding: 12px 12px 10px; }
.bank-apps-title { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-body-lg); margin-bottom: 8px; }
/* caption under the bank-app row — same size/colour as .qr-hint so the two
   "how this works" hints on the checkout screen read as one caption style. */
.bank-apps-sub { font-size: var(--fs-caption); color: var(--muted); text-align: center; margin-top: 8px; line-height: 1.4; }
.bank-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bank-apps.compact { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bank-apps.compact .bank-app { min-height: 38px; font-size: var(--fs-pill); padding: 4px 2px; }
.bank-app { min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg);
  font-weight: 600; font-size: var(--fs-note); text-align: center; padding: 6px 4px; color: var(--text); }
.bank-app:first-child { border-color: var(--brand); color: var(--brand-d); background: var(--brand-50); }
.bank-app:active { transform: scale(.97); }
.bank-more summary { cursor: pointer; list-style: none; margin-top: 8px; font-size: var(--fs-caption); color: var(--brand-d); font-weight: 600; }
.bank-more summary::-webkit-details-marker { display: none; }
.bank-more[open] summary { margin-bottom: 8px; }