/* ============================================================================
   MAGNETIQ V2 . assets/css/pay.css
   ----------------------------------------------------------------------------
   pay.html: the payment page. Reuses the process page hero (.pc-hero,
   .pc-facts, .pc-hero-grid) from inner.css and the shared tokens, buttons and
   .field form styling from core.css. Everything below is page specific and
   prefixed .py-, except the currency toggle, which is copied byte for byte
   from packages.css because that page owns it and this page shows the same
   control. If the toggle is ever restyled, both files change together.
   ========================================================================== */

/* ---- the hidden rule ------------------------------------------------------
   The panels on this page are toggled with el.hidden. An author `display`
   value beats the user agent's [hidden] rule, so .py-bank-rows (grid) and
   .py-receipt (flex) stayed fully visible while marked hidden: the empty bank
   form and a "payment received" receipt were both on screen before anyone had
   paid anything. This one line is what actually hides them. */
body[data-page="pay"] [hidden]{ display:none !important; }

/* ---- currency toggle (mirror of packages.css) ---------------------------- */
.cur{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:999px;
  flex:none;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
}
.cur-btn{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1;
  padding:9px 14px;
  border-radius:999px;
  color:var(--fg-dim);
  transition:color .3s var(--e-out), background-color .3s var(--e-out);
}
.cur-btn:hover{ color:var(--fg); }
.cur-btn[aria-pressed="true"]{ color:var(--bg); background:var(--fg); }

.cur-wrap{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.cur-note{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
  padding:5px 11px;
  border-radius:999px;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
}
.price{ white-space:nowrap; font-variant-numeric:lining-nums tabular-nums; }


/* ---- hero ---------------------------------------------------------------- */
.py-hero-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  margin-bottom:clamp(18px,3vh,34px);
}
.py-h1{ max-width:15ch; }


/* ---- step one: the form -------------------------------------------------- */
.py-form{
  margin-top:clamp(34px,5vh,60px);
  display:grid; gap:clamp(24px,3vh,38px);
  padding:clamp(24px,3vw,40px);
  border:1px solid var(--line);
  background:var(--card);
  border-radius:var(--r-lg);
}
.py-field{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.py-lbl{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-dim);
}
.py-hint{ font-size:12.5px; line-height:1.5; color:var(--fg-dim); }

.py-packs{
  display:grid; gap:10px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.py-pack{
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  text-align:left; min-width:0;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:transparent;
  color:var(--fg-dim);
  cursor:pointer;
  transition:border-color .3s var(--e-out), color .3s var(--e-out), background-color .3s var(--e-out);
}
.py-pack b{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:600; color:var(--fg);
}
.py-pack .price{ font-family:var(--serif); font-size:21px; line-height:1; }
.py-pack .mono-sm{ font-size:10px; line-height:1.4; }
.py-pack:hover{ border-color:color-mix(in srgb,var(--fg) 38%,transparent); }
.py-pack[aria-pressed="true"]{
  border-color:var(--volt); color:var(--fg);
  box-shadow:inset 0 0 0 1px var(--volt);
}
.py-pack:focus-visible{ outline:2px solid var(--volt); outline-offset:3px; }

.py-two{ display:grid; gap:clamp(18px,2.4vw,30px); grid-template-columns:repeat(2,minmax(0,1fr)); }

.py-total{
  display:grid; gap:8px;
  padding-top:clamp(20px,3vh,30px);
  border-top:1px solid var(--line);
}
.py-total-lbl{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-dim);
}
.py-total-nums{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.py-total-usd{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.4rem,5vw,3.6rem); line-height:1;
  letter-spacing:-.01em; color:var(--fg);
  white-space:nowrap; font-variant-numeric:lining-nums tabular-nums;
}
.py-total-alt{
  font-family:var(--serif); font-size:clamp(1.2rem,2.2vw,1.7rem);
  color:var(--fg-dim); white-space:nowrap;
}
.py-total-note{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-dim);
}


/* ---- step two: the methods ----------------------------------------------
   Two columns by default, because QRIS is off until the owner drops his code
   into assets/qris/. pay.js adds .py-grid-3 when the QRIS card is showing and
   the row becomes three. Both collapse to one column on a phone. */
.py-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(34px,5vh,60px);
  align-items:start;
}
.py-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.py-card{
  display:flex; flex-direction:column; gap:22px;
  padding:clamp(24px,2.6vw,38px);
  border:1px solid var(--line);
  background:var(--card);
  border-radius:var(--r-lg);
  min-width:0;
}
.py-card-head{ display:flex; flex-direction:column; gap:12px; }
.py-n{ color:var(--volt-2); }
.py-card h3{ font-size:clamp(1.5rem,2.3vw,2.1rem); margin:0; letter-spacing:-.02em; }
.py-card-head p{ color:var(--fg-dim); font-size:14.5px; line-height:1.6; margin:0; max-width:42ch; }

.py-bank-rows{ display:grid; gap:0; margin:0; }
.py-bank-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:14px 0;
  border-top:1px solid var(--line);
}
.py-bank-row:last-child{ border-bottom:1px solid var(--line); }
.py-bank-row dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-dim);
}
.py-bank-row dd{
  margin:0; font-size:16px; color:var(--fg); font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;
  word-break:break-word; min-width:0;
}
.py-bank-copy{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.py-copy{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:600;
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); color:var(--fg-dim);
  cursor:pointer;
  transition:color .3s var(--e-out), border-color .3s var(--e-out);
}
.py-copy:hover{ color:var(--fg); border-color:color-mix(in srgb,var(--fg) 45%,transparent); }
.py-copy.is-done{ color:var(--acid); border-color:var(--acid); }
.py-bank-note{ margin:0; font-size:13px; line-height:1.55; color:var(--fg-dim); }

/* The QRIS list drops rows as the total changes (the amount row goes when the
   total is over the QRIS cap), so the closing hairline lives on the list
   itself and not on whichever row happens to be last. */
.py-rows-cap{ border-bottom:1px solid var(--line); }
.py-rows-cap .py-bank-row:last-child{ border-bottom:0; }

.py-soon{
  margin:0; padding:18px 20px;
  border:1px dashed var(--line);
  border-radius:var(--r);
  font-size:14px; line-height:1.6; color:var(--fg-dim);
}

/* ---- the QRIS code ------------------------------------------------------
   A QR needs a white quiet zone around it or a phone camera struggles, and
   this card sits on a dark surface, so the plate is always white whatever the
   surface is, exactly like the PayPal button plate above. */
.py-qr{
  align-self:flex-start;
  display:inline-flex;
  padding:14px;
  background:#FFFFFF;
  border-radius:var(--r);
  line-height:0;
}
.py-qr img{
  display:block;
  width:220px; max-width:100%; height:auto;
}
.py-cap{
  margin:0; padding:14px 16px;
  border:1px dashed var(--line);
  border-radius:var(--r);
  font-size:13px; line-height:1.55; color:var(--fg-dim);
}
.py-fine{ margin:0; font-size:12px; line-height:1.55; color:var(--fg-dim); }

.py-pp-slot{ min-height:52px; }
/* PayPal renders its own iframe here. It sits on a light plate whatever the
   surface is, because the brand buttons are drawn for a light background. */
.py-pp-buttons{
  background:#FFFFFF;
  border-radius:var(--r);
  padding:14px 14px 4px;
  min-height:52px;
}
.py-pp-busy{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-dim);
  padding:16px 0;
}
.py-pp-busy::before{
  content:''; width:9px; height:9px; border-radius:50%;
  background:var(--volt-2);
  animation:pyPulse 1.1s var(--e-io) infinite;
}
@keyframes pyPulse{ 0%,100%{ opacity:.25; transform:scale(.7); } 50%{ opacity:1; transform:scale(1); } }

.py-err{
  margin:0; padding:16px 18px;
  border:1px solid var(--flare);
  border-radius:var(--r);
  font-size:14px; line-height:1.6; color:var(--fg);
}

.py-receipt{ display:flex; flex-direction:column; gap:14px; }
.py-ok{ color:var(--acid); }
.py-receipt h4{ margin:0; font-size:clamp(1.3rem,2vw,1.7rem); letter-spacing:-.02em; }
.py-receipt p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--fg-dim); }


/* ---- closing: guarantee, full payment, help ----------------------------- */
.py-guar{
  display:flex; flex-direction:column; gap:14px; align-items:flex-start;
  padding-top:clamp(18px,3vh,28px);
  border-top:1px solid var(--line);
}
.py-guar p{ margin:0; max-width:60ch; color:var(--fg-dim); }
.py-full{
  margin:clamp(28px,4vh,44px) 0 0;
  max-width:60ch; color:var(--fg-dim);
}
.py-help{
  margin-top:clamp(40px,6vh,72px);
  padding-top:clamp(28px,4vh,44px);
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:16px; align-items:flex-start;
}
.py-help h3{ margin:0; font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:-.025em; }
.py-help p{ margin:0; max-width:56ch; color:var(--fg-dim); }


/* ---- responsive ---------------------------------------------------------- */
@media (max-width:1180px){
  .py-grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1000px){
  .py-grid,
  .py-grid-3{ grid-template-columns:1fr; }
  .py-packs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px){
  .py-two{ grid-template-columns:1fr; }
  .py-hero-top{ flex-direction:column; align-items:flex-start; }
  .cur-wrap{ align-items:flex-start; }
}
@media (max-width:480px){
  .py-packs{ grid-template-columns:1fr; }
  .py-pack{ flex-direction:row; align-items:baseline; justify-content:space-between; gap:12px; }
  .py-bank-row{ flex-direction:column; align-items:flex-start; gap:6px; }
}