:root {
    color-scheme: light;
    --brand: #3d0f7a;
    --brand-2: #5a1fa3;
    --ink: #17121f;
    --muted: #6b6478;
    --line: #e9e5f0;
    --bg: #f3f1f7;
    --card: #ffffff;
    --tint: #f8f4fe;
    --ok: #0f7a3d;
    --ok-bg: #c4feda;
    --error: #f01835;
    --error-bg: #fbbebe;
    --warning: #f8f4fe;
    --warning-bg: #f8f4fe;
    --pad-x: clamp(16px, 5vw, 24px);
    --row-y: clamp(5px, 1.35vh, 12px);   /* fallback */
    --gap-y: clamp(6px, 1.8vh, 18px);    /* fallback */
    --desc-lines: 3;                     /* visible lines of a long description before "Show more" */
}
@media (max-height: 660px) { :root { --desc-lines: 2; } }
@media (max-height: 620px) { :root { --desc-lines: 1; } }
@media (min-width: 760px) and (min-height: 560px) { :root { --desc-lines: 5; } }
@media (min-height: 780px) { :root { --desc-lines: 5; } }              /* tall phones have the room */
@supports (height: 1dvh) {
:root {
    --row-y: clamp(5px, 1.35dvh, 12px);
    --gap-y: clamp(6px, 1.8dvh, 18px);
}
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 400 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
-webkit-text-size-adjust: 100%;
}
p, h1, h2, dl, dd { margin: 0; }

/* ---------- Phone (default): edge-to-edge sheet that exactly fills the screen ---------- */
.page {
display: flex;
justify-content: center;
height: 100vh;
height: 100dvh;
}
.card {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
background: var(--card);
overflow: hidden;
}

/* Summary: merchant + amount + status */
.summary {
flex: none;
text-align: center;
padding: calc(var(--gap-y) + env(safe-area-inset-top)) var(--pad-x) var(--gap-y);
background: linear-gradient(var(--tint), var(--card));
}
.merchant-logo {
display: inline-block;
/* height: clamp(22px, 4.2vh, 34px); */
max-height: 80px;
width: auto;
max-width: 72%;
object-fit: contain;
}
.merchant-name {
margin-top: 6px;
color: var(--brand);
font-weight: 600;
font-size: 13px;
text-wrap: balance;
}
.message { color: red; margin: 10px;}
.message-label {
text-align: center;
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
}
.message-value {
font-size: clamp(28px, 3.2vh + 14px, 42px);
font-weight: 750;
line-height: 1.15;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
}

.amount { margin-top: var(--gap-y); }
.amount-label {
display: block;
color: var(--muted);
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.amount-value {
font-size: clamp(28px, 3.2vh + 14px, 42px);
font-weight: 750;
line-height: 1.15;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
}
.amount-value .ccy { color: var(--brand-2); font-size: .55em; font-weight: 700; letter-spacing: .02em; }
.meta {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 4px 10px;
font-size: 12.5px;
color: var(--muted);
}
.status_active, .status_paid {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
border-radius: 999px;
background: var(--ok-bg);
color: var(--ok);
font-weight: 700;
font-size: 12px;
}
.status_expired, .status_cancelled {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
border-radius: 999px;
background: var(--error-bg);
color: var(--error);
font-weight: 700;
font-size: 12px;
}
.status_active::before, .status_paid::before, .status_expired::before, .status_cancelled::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.meta time { color: var(--ink); font-weight: 600; }

/* Details: the only region allowed to scroll, and only as a last resort */
.details {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0 var(--pad-x) var(--gap-y);
}
.details.fits { overflow-y: hidden; }
.details h2 {
display: flex;
align-items: center;
gap: 10px;
margin-top: var(--gap-y);
color: var(--muted);
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.details h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: var(--row-y) 0;
}
.row + .row { border-top: 1px solid #f4f1f8; }
.row dt { flex: none; color: var(--muted); }
.row dd {
min-width: 0;
text-align: right;
font-weight: 600;
overflow-wrap: anywhere;
}
/* Long description (up to 1024 chars): label line with a toggle, then a clamped full-width block */
.row.row--stack { flex: none; flex-direction: column; align-items: stretch; gap: 2px; }
.row--stack dt { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.row--stack dd.desc {
text-align: left;
font-weight: 500;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--desc-lines);
line-clamp: var(--desc-lines);
overflow: hidden;
}
.row--stack dd.desc.is-open { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.more {
flex: none;
padding: 0;
border: 0;
background: none;
color: var(--brand-2);
font-family: inherit;
font-size: .86em;
font-weight: 700;
cursor: pointer;
}
.more:focus-visible { outline: 3px solid #b99be6; outline-offset: 2px; border-radius: 4px; }
.row dd.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 13px; letter-spacing: -.01em; }
.row dd.has-copy { display: inline-flex; align-items: center; gap: 6px; }
.copy {
flex: none;
display: inline-grid;
place-items: center;
width: 26px;
height: 24px;
padding: 0;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--card);
color: var(--brand);
cursor: pointer;
}
.copy .i-done, .copy.is-done .i-copy { display: none; }
.copy.is-done .i-done { display: block; color: var(--ok); }
.copy:focus-visible, .pay-btn:focus-visible { outline: 3px solid #b99be6; outline-offset: 2px; }

/* Pay bar: always visible */
.pay {
flex: none;
padding: 10px var(--pad-x) calc(10px + env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
background: var(--card);
}
.pay-btn {
display: block;
width: 100%;
min-height: 48px;
border: 0;
border-radius: 12px;
background: linear-gradient(90deg, var(--brand-2), var(--brand));
color: #fff;
font-family: inherit;
font-size: 16px;
font-weight: 700;
line-height: 1;
cursor: pointer;
box-shadow: 0 6px 16px rgba(61, 15, 122, .25);
}
/* Terms checkbox row */
.terms {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 8px;
font-size: 13px;
line-height: 1.2;
}
.terms input {
flex: none;
width: 18px;
height: 18px;
margin: 0 3px 0 0;
accent-color: var(--brand-2);
cursor: pointer;
}
.terms label { cursor: pointer; }
.terms-link {
padding: 0;
border: 0;
background: none;
color: var(--brand-2);
font: inherit;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.terms.is-error { color: #b42318; }
.terms.is-error input { outline: 2px solid #b42318; outline-offset: 2px; }
.terms input:focus-visible, .terms-link:focus-visible { outline: 3px solid #b99be6; outline-offset: 2px; border-radius: 4px; }
.pay-btn[aria-disabled="true"] { opacity: .20; box-shadow: none; cursor: not-allowed; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Under the button: security line, payment methods, then Powered by */
.secure, .powered {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color: var(--muted);
font-size: 11px;
white-space: nowrap;
}
.secure { margin-top: 8px; padding: 5px;}
.secure svg { flex: none; }
.powered { margin-top: 7px; }
.powered-copyright {
    display: block;
    text-align: center;
}
.provider-logo { display: block; height: 15px; width: auto; }
.methods {
margin-top: 5px;
display: flex;
justify-content: center;
gap: 6px;
list-style: none;
padding: 0;
}
.method {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
padding: 0 8px;
color: var(--muted);
font-size: 10.5px;
font-weight: 600;
white-space: nowrap;
}
.method img { display: block; height: 25px; width: auto; border: 1px solid #8f8a99; border-radius: 5px; background-color: #fff;}
.method--mc img, .method--tall img { height: 18px; }   /* stacked or round marks need more height to read */


/* Phone portrait: no empty band above, below or in the middle.
    Whatever height is left over is shared out between the amount block and the detail rows,
    and type, logo and button grow slightly on taller screens. */
@media (max-width: 559.98px), (max-width: 759.98px) and (min-height: 500.02px) {
body { font-size: clamp(14px, 1.9vh, 16px); }
.summary {
    flex: 3 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.amount { margin-block: auto; padding-top: var(--gap-y); }
.amount-value { font-size: clamp(28px, 3.6vh + 14px, 48px); }
.meta { font-size: .9em; }
.details { flex: 5 1 auto; display: flex; flex-direction: column; padding-bottom: 0; }
/* bottom spacing as a shrinkable spacer, so sub-pixel rounding never makes the area scrollable */
.details::after { content: ""; flex: 0 1 var(--gap-y); min-height: 0; }
.details dl { display: contents; }
.row { flex: 1 0 auto; align-items: center; }
.pay { padding-top: clamp(10px, 1.6vh, 16px); padding-bottom: calc(clamp(10px, 1.6vh, 16px) + env(safe-area-inset-bottom)); }
.pay-btn { min-height: clamp(48px, 6.2vh, 56px); font-size: clamp(16px, 2vh, 17px); }
.terms { margin-bottom: clamp(8px, 1.2vh, 12px); font-size: clamp(13px, 1.7vh, 14px); }
.secure { margin-top: clamp(8px, 1.3vh, 12px); }
}
/* Unusually tall, narrow windows: stop stretching and float the card instead */
@media (max-width: 759.98px) and (min-height: 960px) {
.page { align-items: center; padding: 16px 0; }
.card { height: 900px; max-width: 520px; border-radius: 18px;
        box-shadow: 0 1px 2px rgba(23, 18, 31, .06), 0 10px 30px rgba(23, 18, 31, .10); }
}

/* Shorter phones: the security line is the first nice-to-have to go (the lock stays implied by the card marks) */
@media (max-height: 620px) and (max-width: 559.98px), (min-height: 500.02px) and (max-height: 620px) and (max-width: 759.98px) {
.secure { display: none; }
.methods { margin-top: 8px; }
}

/* Very short phones (e.g. 320×480 with browser bars): drop the nice-to-haves first */
@media (max-height: 560px) and (max-width: 559.98px), (min-height: 500.02px) and (max-height: 560px) and (max-width: 759.98px) {
.methods { display: none; }
.merchant-name { margin-top: 3px; }
.pay { padding-top: 8px; }
.pay-btn { min-height: 44px; }
}

/* Smallest phones with browser bars showing (about 320×450): squeeze the last few pixels */
@media (max-height: 520px) and (max-width: 559.98px) {
:root { --row-y: 4px; --gap-y: 4px; }
.pay { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
}

/* ---------- Desktop, tablet and landscape phones: two columns ---------- */
@media (min-width: 760px), (min-width: 560px) and (max-height: 500px) {
.page { align-items: center; justify-content: center; padding: clamp(8px, 3vh, 32px) 16px; }
.card {
    flex: none;
    width: min(880px, 100%);
    max-height: 100%;
    display: grid;
    grid-template-columns: minmax(280px, 5fr) 6fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "summary details" "pay details";
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(23, 18, 31, .06), 0 12px 40px rgba(23, 18, 31, .10);
}
.summary {
    grid-area: summary;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 4vh, 36px) 28px clamp(8px, 2vh, 16px);
    background: var(--tint);
}
.pay {
    grid-area: pay;
    padding: clamp(8px, 2vh, 16px) 28px clamp(12px, 3.5vh, 28px);
    border-top: 0;
    background: var(--tint);
}
.details {
    grid-area: details;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: safe center;   /* centred when it fits, top-aligned when it scrolls */
    padding: clamp(10px, 3vh, 28px) 32px;
    border-left: 1px solid var(--line);
}
.details h2:first-child { margin-top: 0; }
.terms { justify-content: center; }
}
@media (min-width: 560px) and (max-height: 400px) {
.methods { display: none; }
}

/* Terms & Conditions dialog */
.terms-dialog {
width: min(720px, calc(100vw - 24px));
height: min(760px, calc(100vh - 32px));
max-height: none;
padding: 0;
border: 0;
border-radius: 16px;
background: var(--card);
color: var(--ink);
box-shadow: 0 20px 60px rgba(23, 18, 31, .30);
overflow: hidden;
}
@supports (height: 1dvh) { .terms-dialog { height: min(760px, calc(100dvh - 32px)); } }
.terms-dialog[open] { display: flex; flex-direction: column; }
.terms-dialog::backdrop { background: rgba(23, 18, 31, .55); }
.td-head {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 12px 12px 20px;
border-bottom: 1px solid var(--line);
}
.td-title { min-width: 0; }
.td-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.td-host { margin: 1px 0 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-x {
flex: none;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 0;
border-radius: 50%;
background: none;
color: var(--muted);
cursor: pointer;
}
.td-x:hover { background: var(--tint); color: var(--ink); }
.terms-body { position: relative; flex: 1 1 auto; min-height: 0; background: #fff; }
.td-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.td-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); font-size: 13px; }
.td-loading[hidden] { display: none; }
.td-foot {
flex: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 16px;
padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
}
.td-btn {
min-height: 42px;
padding: 0 20px;
border-radius: 10px;
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.td-btn--ghost { border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.td-btn--primary { border: 0; background: linear-gradient(90deg, var(--brand-2), var(--brand)); color: #fff; }
.td-actions { display: flex; gap: 10px; margin-left: auto; }
.td-newtab { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-2); font-size: 13px; font-weight: 600; text-underline-offset: 2px; }
.td-btn:focus-visible, .td-x:focus-visible, .td-newtab:focus-visible { outline: 3px solid #b99be6; outline-offset: 2px; border-radius: 6px; }
@media (max-width: 479.98px) {
.td-foot { padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
.td-newtab { width: 100%; justify-content: center; }
.td-actions { width: 100%; margin-left: 0; }
.td-actions .td-btn { flex: 1; }
}

@media (prefers-reduced-motion: no-preference) {
.pay-btn { transition: transform .12s ease, box-shadow .12s ease; }
.pay-btn:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(61, 15, 122, .25); }
}

.page { flex-direction: column; }
.card { min-height: 0; }
.page-copyright {
    flex: none;
    margin: 0;
    padding: 5px 16px calc(5px + env(safe-area-inset-bottom));
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.3;
  }
  @media (min-width: 760px), (min-width: 560px) and (max-height: 500px) {
    .card { flex: 0 1 auto; }
    .page-copyright { padding: clamp(6px, 1.6vh, 14px) 16px 0; }
  }
/* On the glass theme it sits on the background image, so it gets its own small dark pill */
  html[data-theme="glass"] .page-copyright {
    align-self: center;
    margin: 6px 0 calc(6px + env(safe-area-inset-bottom));
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(14, 12, 20, .62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #e9e4f2;
  }
  @media (min-width: 760px), (min-width: 560px) and (max-height: 500px) {
    html[data-theme="glass"] .page-copyright { margin: clamp(6px, 1.6vh, 14px) 0 0; }
  }