/* design · structure: checkout two-panel (Stripe composition) · paper: dark ·
   display: Archivo grotesk · data voice: IBM Plex Mono · accent: gold #F5B301 ·
   ZOLT pay page re-skin (preview): slim bar, summary left / payment right,
   receipt states centred. All JS from pay.html is untouched; this sheet only
   re-paints its markup. Tokens are the v359 site tokens.
   Self-critique after the render pass (11 states screenshotted):
   P8 H8 E8 S7 R9 V6 — the page title row stays (the frozen script
   rewrites it per mode). v360: when the Worker sends credits /
   per_credit_php / total_php with the session (v13.55), the summary
   swaps its plain price block for true order-summary rows (pack ·
   credits, per-credit, save line, Total) above the steps; sessions
   without the fields keep the preview's block unchanged. */

/* ============ CHROME — slim bar + fine print ============ */
.paybar{
  position:relative; z-index:600;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.paybar-in{
  max-width:1080px; margin:0 auto; padding:0 24px; height:62px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.paybar-right{display:flex; align-items:center; gap:18px; flex:none;}
.paybar-back{
  font-size:14px; font-weight:500; color:var(--body);
  text-decoration:none; white-space:nowrap;
}
.paybar-back:hover{color:var(--ink);}
.payfine{
  max-width:1080px; margin:0 auto; padding:30px 24px 38px;
  display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap;
  text-align:center; font-size:12.5px; color:var(--grey2);
}
.payfine a{color:var(--body); text-decoration:none;}
.payfine a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px;}

/* ============ SHELL + TITLE ROW ============ */
body.paypro .pay-section{padding:34px 20px 0;}
body.paypro .pay-shell{max-width:1080px; padding:0 0 48px;}
body.paypro .pay-head-row{margin-bottom:26px; align-items:flex-end;}
body.paypro #payH1{font-size:30px; margin-top:8px;}
body.paypro .pay-h1 .hl{color:inherit;}
body.paypro #paySub{font-size:14.5px; max-width:420px;}

/* Panels sit above the grain layer (z 345) so their surfaces stay clean;
   the page background keeps the grain. */
body.paypro #payBody > div,
body.paypro #payBody > div > div{position:relative; z-index:400;}
body.paypro .modal-wrap{z-index:500;}

/* ============ WAITING — the two-panel grid ============
   Active only while a live session's grid is on screen (not solo,
   grid not hidden). #payBody / #payGrid / #payMain and the scan
   card are flattened with display:contents so the frozen JS
   markup's pieces become grid items directly. */
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])){
  display:grid;
  grid-template-columns:minmax(0,440px) minmax(0,1fr);
  column-gap:24px; row-gap:18px; align-items:start;
}
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) > .pay-head-row{grid-column:1 / -1; grid-row:1; margin-bottom:4px;}
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payGrid,
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payMain,
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payMain > div,
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payMain > div > div:last-child,
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payBelow{display:contents;}
/* the loud pieces go: marquee banner, tape strips, starburst badge */
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payBody > div:first-child{display:none;}
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payMain > div > span{display:none;}
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payMain > div > [class*="top_-30px"]{display:none;}
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) [class*="anim_pop"]{animation:none;}

/* placements — left column: summary, then the exact-amount note.
   right column: status, label, QR, countdown, claim. */
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payMain > div > div:last-child > div:last-child{grid-column:1; grid-row:2 / 5;}
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payBelow > div{grid-column:1; grid-row:5;}
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payBelow > p{grid-column:2; grid-row:2;}
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payMain > div > p{grid-column:2; grid-row:3;}
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payMain > div > div:last-child > div:first-child{grid-column:2; grid-row:4;}
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payBody > div:nth-child(2){grid-column:2; grid-row:5;}
body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #claimCard{grid-column:2; grid-row:6; margin-top:0;}

/* --- summary panel (the scan card's details block) --- */
body.paypro #payMain > div > div:last-child > div:last-child{
  background:#0D0D0F; border:1px solid var(--line); border-radius:16px;
  padding:28px; position:relative; z-index:400;
  align-items:flex-start; text-align:left;
}
body.paypro #payMain > div > div:last-child > div:last-child > div:first-child{
  font-size:21px; font-weight:700; letter-spacing:-0.01em; color:var(--ink);
}
body.paypro #payMain [class*="fs_clamp"]{
  font-family:var(--fonts-mono); font-size:34px; font-weight:600;
  letter-spacing:-0.01em; line-height:1.1; color:var(--ink); margin:8px 0 4px;
}
body.paypro #payMain ol{margin-top:18px; gap:12px;}
body.paypro #payMain ol li{font-size:14px; line-height:1.55; color:var(--body);}
body.paypro #payMain ol li > span:first-child{
  width:24px; height:24px; flex:none; margin-top:1px;
  border:1px solid var(--line); border-radius:50%;
  background:var(--panel2); color:var(--gold);
  font-family:var(--fonts-mono); font-size:12px; font-weight:600;
  box-shadow:none;
}

/* --- order summary rows (v360: swapped in by pay.html when the
   Worker sends credits / per_credit_php / total_php with the
   session; the plain price block stays for older sessions) --- */
body.paypro #payMain .ordsum{width:100%; align-self:stretch; margin-top:16px;}
body.paypro #payMain .ord-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  font-size:14px; color:var(--body); padding:2px 0;
}
body.paypro #payMain .ord-v{
  font-family:var(--fonts-mono); font-size:14px; font-weight:500; color:var(--ink);
}
body.paypro #payMain .ordsum > p{margin-top:6px; text-align:left;}
body.paypro #payMain .ord-total{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  border-top:1px solid var(--line); margin-top:10px; padding-top:12px;
  font-size:14px; color:var(--body);
}
body.paypro #payMain .ord-total-v{
  font-family:var(--fonts-mono); font-size:30px; font-weight:600;
  letter-spacing:-0.01em; line-height:1.1; color:var(--ink);
}

/* --- status line (waiting line) --- */
body.paypro #payBelow > p{
  font-family:var(--fonts-mono); font-size:12px; font-weight:500;
  letter-spacing:.05em; color:var(--body);
  justify-content:flex-start; gap:8px; margin:0; text-align:left;
}
body.paypro #payBelow > p svg{display:none;}
body.paypro #payBelow > p::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--gold); animation:paypulse 2.2s ease-in-out infinite;
}
@keyframes paypulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* --- SCAN & PAY label --- */
body.paypro #payMain > div > p{
  background:transparent; color:var(--gold); box-shadow:none;
  transform:none; border-radius:0; padding:0; margin:2px 0 10px;
  justify-self:start;
}

/* --- QR panel --- */
body.paypro #payMain > div > div:last-child > div:first-child{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:26px; position:relative; z-index:400;
}
body.paypro #payMain [class*="bg-c_#FFFFFF"]{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:16px; box-shadow:none; margin:2px auto 0; width:fit-content;
}
body.paypro #payMain img{
  width:280px; height:auto; max-width:100%;
  border:0; border-radius:4px; display:block;
}
body.paypro #payMain > div > div:last-child > div:first-child > p{
  margin-top:16px; font-size:14px; color:var(--body); text-align:center;
}
body.paypro #payMain > div > div:last-child > div:first-child > p b{color:var(--ink);}
body.paypro #payMain > div > div:last-child > div:first-child > p b:nth-of-type(2){
  font-family:var(--fonts-mono); font-size:20px; font-weight:600; letter-spacing:.01em;
}

/* --- exact-amount note (below card) --- */
body.paypro #payBelow > div{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:none; padding:16px 18px; position:relative; z-index:400;
}
body.paypro #payBelow > div > div:first-child{display:none;}
body.paypro #payBelow > div p{text-align:left; margin:0; padding:0;}
body.paypro #payBelow > div p:first-of-type{font-size:14px; font-weight:600; color:var(--ink);}
body.paypro #payBelow > div p:last-of-type{font-size:12.5px; color:var(--body); margin-top:4px; line-height:1.55;}

/* --- countdown strip --- */
body.paypro #payBody [role="progressbar"]{
  height:4px; border:0; border-radius:999px; padding:0;
  background:var(--panel2); box-shadow:none; overflow:hidden;
}
body.paypro #payBarFill{background:var(--gold); border:0;}
body.paypro #payBarFill > span{display:none;}
body.paypro #payBody > div:nth-child(2) > p{
  background:transparent; border:1px solid var(--line); border-radius:999px;
  color:var(--body); box-shadow:none; transform:none;
  padding:6px 12px; font-size:12px; white-space:nowrap;
}
body.paypro #payTimer{color:var(--ink); font-weight:600;}

/* ============ GENERATED CARDS — delivered / parked / top-up / not-found ============ */
body.paypro .bd_3\.5px_solid_\#17130A{
  border:1px solid var(--line); border-radius:16px;
  background:var(--panel); box-shadow:none; padding:26px;
}
body.paypro [class*="trf_rotate"]{transform:none;}
body.paypro #payBody [class*="anim_glowpulse"]{animation:none;}
body.paypro #payBody [class*="grid-tc_minmax(0,1fr)_minmax(0,1fr)"]{
  grid-template-columns:minmax(0,1fr); max-width:640px; margin:0 auto; gap:16px;
  overflow:visible;
}
/* the base sheet's marquee rules force #payBody's first-child children
   into a max-content flex row — that is what scrambles the receipt
   cards; the receipt's cards go back to plain blocks. */
body.paypro #payBody > div[class*="grid-tc_minmax(0,1fr)_minmax(0,1fr)"] > div{
  display:block; width:auto;
}
/* the YOUR KEY pill becomes a plain mono label (p only — the COPY
   button also carries a c_gold2 class and must keep its gold fill) */
body.paypro #payBody p[class*="c_gold2"]{
  background:transparent; color:var(--gold); box-shadow:none;
  transform:none; border-radius:0; padding:0; border:0;
}
body.paypro #payKeyText{
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
}
body.paypro #payCopy{
  background:var(--gold); color:var(--gold-ink);
  border:1px solid var(--gold); border-radius:999px;
  box-shadow:none; height:50px; transform:none;
}
body.paypro #payBody a[class*="h_48px"]{
  border:1px solid var(--line); border-radius:999px;
  box-shadow:none; height:50px; transform:none;
}
body.paypro #payBody a[class*="bg-c_gold"]{
  background:var(--gold); color:var(--gold-ink); border-color:var(--gold);
}
body.paypro #payBody code{
  background:var(--panel2); border:1px solid var(--line);
  color:var(--ink); border-radius:6px; padding:1px 6px;
}
/* quiet loader in the setup state */
body.paypro [class*="anim_boltsplit"]{animation:none;}
/* single result cards (parked / top-up / not-found / incomplete) sit at
   receipt width, centred — their own max-width utility does not apply */
body.paypro .pay-shell:not(:has(> #payGrid:not([hidden]))) #payBody > div{
  max-width:640px; margin-left:auto; margin-right:auto;
}
/* the result cards' check-ring wrapper: its size utilities do not
   apply, so size it here; and rest the ring/check strokes at their
   drawn end state so the mark shows even with motion off (the draw
   animation still plays over this where motion is allowed) */
body.paypro #payBody [class*="w_72px"]{width:72px; height:72px;}
body.paypro #payBody [class*="anim_ringdraw"],
body.paypro #payBody [class*="anim_checkdraw"]{stroke-dashoffset:0;}

/* ============ CLAIM CARD (static markup) ============ */
body.paypro .pay-panel{border-radius:16px; padding:26px; position:relative; z-index:400;}
body.paypro .claim-head-wrap{text-align:left; margin:0 0 4px;}
body.paypro .claim-head{
  font-family:var(--fonts-sans); font-size:18px; font-weight:700;
  letter-spacing:-0.01em; text-transform:none; color:var(--ink);
  text-align:left; margin:0 0 4px; width:auto; background:transparent; padding:0;
}
body.paypro .pay-panel .pay-note{text-align:left;}
body.paypro .fld-input{border-radius:10px;}
body.paypro #claimRef{letter-spacing:.06em;}
body.paypro #claimWeb{margin-top:18px;}
body.paypro .link-btn{margin-top:10px; display:inline-block;}
body.paypro .find-box{background:var(--panel2); border-radius:10px;}
body.paypro .support-row{
  border:0; border-top:1px solid var(--line); border-radius:0;
  margin-top:18px; padding:14px 2px 0; justify-content:flex-start;
}
body.paypro .coupon-box{
  border:1px solid var(--line); border-radius:10px;
  background:transparent; margin-top:18px;
}
body.paypro .key-box{
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
}
body.paypro .claimkey.show{flex-direction:column; gap:10px; margin-top:16px;}
body.paypro .stat-line{margin-top:12px;}
body.paypro .verify-title{font-size:20px;}
body.paypro .verify-bolt{width:54px; height:54px;}

/* ============ PHONE — summary becomes a compact bar ============ */
@media (max-width:999px){
  body.paypro .pay-section{padding:22px 14px 0;}
  .paybar-in{padding:0 16px;}
  body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])){
    grid-template-columns:minmax(0,1fr); row-gap:14px;
  }
  body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) > .pay-head-row{grid-column:1; grid-row:1;}
  body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payMain > div > div:last-child > div:last-child{grid-column:1; grid-row:2;}
  body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payBelow > p{grid-column:1; grid-row:3;}
  body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payMain > div > p{grid-column:1; grid-row:4;}
  body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payMain > div > div:last-child > div:first-child{grid-column:1; grid-row:5;}
  body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payBody > div:nth-child(2){grid-column:1; grid-row:6;}
  body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #claimCard{grid-column:1; grid-row:7;}
  body.paypro .pay-shell:not(.solo):has(> #payGrid:not([hidden])) #payBelow > div{grid-column:1; grid-row:8;}
  /* compact summary bar: name left, price right, steps away */
  body.paypro #payMain > div > div:last-child > div:last-child{
    padding:18px 20px; flex-direction:row; flex-wrap:wrap;
    align-items:baseline; column-gap:14px;
  }
  body.paypro #payMain > div > div:last-child > div:last-child > div:first-child{font-size:16px; order:1;}
  body.paypro #payMain [class*="fs_clamp"]{font-size:24px; margin:0 0 0 auto; order:2;}
  body.paypro #payMain > div > div:last-child > div:last-child > p{order:3; flex-basis:100%;}
  body.paypro #payMain > div > div:last-child > div:last-child > p.ff_mono{order:4;}
  body.paypro #payMain ol{display:none;}
  /* order summary wraps under the bar's name line, full width */
  body.paypro #payMain .ordsum{order:5; flex-basis:100%; width:100%; margin-top:12px;}
  body.paypro #payMain .ord-total-v{font-size:24px;}
  body.paypro #payMain img{width:min(280px,76vw);}
  body.paypro .pay-panel{padding:20px;}
  body.paypro #payH1{font-size:26px;}
}

@media (prefers-reduced-motion: reduce){
  body.paypro #payBelow > p::before{animation:none;}
}