/*
   Checkout refinement — P9-22.

   The order summary row, the QR well and the display-size payable. A banking app makes the
   customer TYPE the payable figure including centavos, so the figure gets the largest type
   on the page and sits beside copy buttons; the well gives the QR a framed home instead of
   a bare image floating in a stack.

   Token-only, like plans.css: every colour, radius and spacing here is a var() from
   tokens.css with no exception, and nothing is positioned, so the source-level pins that
   guard plans.css - no hex digits, no literal colour function, no positioned rules, no
   stretched width - can be pointed at this file unchanged. Do not restate those pins in
   this comment using the spellings they search for; a source scan matches prose as
   readily as code. Loaded through an is_file-guarded link tag in layout.php, the same
   staging guard lightbox.css and plans.css use.
*/

.checkout-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.checkout-summary__plan {
    font-size: var(--fs-title);
    font-weight: var(--fw-semibold);
}

/* QR beside the payment detail on anything wider than a phone; the well sizes to the
   code so the frame never stretches into a blank field. */
.checkout-pay {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-5);
    align-items: start;
}

.checkout-qrwell {
    margin: 0;
    display: grid;
    justify-items: center;
    gap: var(--s-3);
    padding: var(--s-4);
    background: var(--surface-container-high);
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-lg);
}

/* The code is a button: no chrome of its own, just the zoom cursor and a visible focus
   ring, so the well stays a frame and the affordance lives where the pointer is. */
.checkout-qrwell__zoom {
    display: grid;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: var(--r-md);
}

.checkout-qrwell__zoom:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: var(--s-1);
}

.checkout-qrwell__hint {
    color: var(--on-surface-variant);
    font-size: var(--fs-label);
}

/* P11-05: the well's failure voice - narrow, centred, and pointing at the links below,
   so an undisplayable code still leaves the customer a way to pay. */
.checkout-qrwell__missing {
    color: var(--on-surface-variant);
    font-size: var(--fs-label);
    max-inline-size: 22ch;
    text-align: center;
}

.checkout-qrwell__links {
    display: grid;
    gap: var(--s-2);
    justify-items: stretch;
}

/* P9-27: the receipt panel. Hairline dividers between labelled rows, no divider under the
   last row, and the total row carrying the display-size figure - the shape every payment
   page a customer trusts already uses. */
.checkout-receipt {
    display: grid;
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-md);
    background: var(--surface-container);
}

.checkout-receipt__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--outline-variant);
}

.checkout-receipt__row:last-child {
    border-bottom: 0;
}

.checkout-receipt__label {
    color: var(--on-surface-variant);
    font-size: var(--fs-body);
}

.checkout-receipt__value {
    font-weight: var(--fw-medium);
}

.checkout-receipt__row--total .checkout-receipt__label {
    color: inherit;
    font-weight: var(--fw-semibold);
}

.checkout-amountrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}

.checkout-amount {
    font-size: var(--fs-display);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
}

.checkout-refrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
}

.checkout-ref {
    font-size: var(--fs-body);
    color: var(--on-surface-variant);
}

/* Countdown and check-now share a row so the chip stays a chip; in a flex row nothing
   stretches it into the full-width bar the first pass shipped. */
.checkout-receipt__row--status {
    justify-content: space-between;
}

.checkout-fineprint {
    max-inline-size: 64ch;
}

/* P9-28: the mint-failure panel sits where the recovery action is needed - top of the
   payment detail - and carries the gateway's own refusal sentence plus the retry. */
.checkout-mintfail {
    display: grid;
    gap: var(--s-2);
    padding: var(--s-4);
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-md);
    background: var(--surface-container);
}

.checkout-mintfail__title {
    font-weight: var(--fw-semibold);
}

.checkout-mintfail__actions {
    display: flex;
    gap: var(--s-2);
}

.checkout-expired__cta {
    margin-inline-start: var(--s-2);
}

@media (max-width: 640px) {
    .checkout-pay {
        grid-template-columns: 1fr;
    }
}