@layer pages {
/* Payment receipt page (/pay/<uri>/receipt). Full-screen page (never
   embedded), so it lives in the pages layer. Figma 125:23683. */

.psw-receipt-page {
    min-height: 100vh;
    background: var(--color-white);
}

/* Pages that pin the state's CTA + powered-by to the mobile sticky `footer`
   component (gift, estimate, payment receipt) must reserve bottom scroll space
   so the fixed bar doesn't cover the last in-flow content — psw-footer.css
   requires this of every consumer. The bar is mobile-only (hidden ≥769px,
   where the in-flow --desktop branding takes over), so the reserve is cleared
   on desktop below. Reuses the pay pages' --psw-footer-height token. */
.psw-receipt-page--sticky-footer {
    padding-bottom: calc(var(--psw-footer-height) + var(--space-6));
}

/* The column owns its horizontal inset so the banner can break out to a
   full-bleed band; the page surface must NOT add its own.

   No bottom padding on mobile: --sticky-footer above already reserves the
   footer's height + the design's 24px, and a second bottom box here stacks
   onto it. The desktop @media adds it back, where that reserve is zeroed and
   this padding is the gap down to the in-flow powered-by block. */
.psw-receipt-page .psw-receipts {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);              /* 24px between top-level blocks / dividers (Figma 858:83602); desktop bumps to 40px */
    max-width: 442px;
    margin: 0 auto;
    padding-inline: var(--space-4);
    background: var(--color-white);
}

/* Full-bleed banner band — negative inline margin cancels the column's padding
   so the gray spans edge-to-edge; the card below overlaps its lower 40px. */
.psw-receipts > .psw-avatar-banner {
    height: 120px;
    margin-inline: calc(-1 * var(--space-4));
}

/* The shared avatar-banner uses symmetric vertical padding (centers the
   avatar+title pair in the band). The receipt layout's band is intentionally
   40px taller than the visible avatar/title zone — the card below overlaps
   the lower 40px — so reserve that 40px as bottom padding to exclude the
   overlap region from flex centering. Scoped to .psw-receipt-page so other
   consumers of avatar-banner keep their defaults. */
.psw-receipt-page .psw-avatar-banner--top-left {
    padding-block: 0 40px;
}

/* Receipt card — overlaps the banner's lower 40px (card top at 80px, banner
   120px). The negative margin also cancels the column gap above. */
.psw-receipts__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    margin-top: calc(-40px - var(--space-6));
    padding: var(--space-6);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-white);   /* opaque over the gray banner it overlaps */
}

.psw-receipts__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
}

.psw-receipts__headline {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);              /* 8px between Receipt / refnum / amount */
    min-width: 0;
}

.psw-receipts__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-heading-lg);          /* bold 32/40 */
    line-height: var(--text-heading-lg--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
}

.psw-receipts__refnum {
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);        /* regular 16/24, gray */
    line-height: var(--text-paragraph-md--line-height);
    color: var(--color-gray-600);
    overflow-wrap: anywhere;
}

.psw-receipts__amount {
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-lg);        /* regular 18/28, gray (Figma) */
    line-height: var(--text-paragraph-lg--line-height);
    color: var(--color-gray-600);
}

/* Receipt ribbon mark: an 80px gray circle holding the receipt icon, pinned
   top-right of the card head (Figma mobile). Desktop bumps to 116px. */
.psw-receipts__ribbon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--color-gray-200);    /* #F0F0F0 */
    color: var(--color-gray-600);         /* icon stroke #545454 */
}

/* lg widget icon scaled up to keep the icon-to-circle ratio. Desktop bumps to 48. */
.psw-receipts__ribbon .psw-icon {
    width: 32px;
    height: 32px;
    color: currentColor;
}

/* Download CTA renders twice in the template — desktop shows --card, mobile
   shows --bottom. Both carry data-receipts-download-href so the JS binds via
   querySelectorAll. */
.psw-receipts__download {
    width: 100%;
}

.psw-receipts__download--card {
    display: none;          /* mobile default; desktop @media flips it. */
}

.psw-estimate__cta-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.psw-receipt-page__footer {
    display: flex;
    justify-content: center;
    padding: var(--space-10) var(--space-4);
}

/* Terminal receipt pages (e.g. the canceled contract) are too short to push an
   in-flow footer to the bottom, so they render this branding on desktop only
   and pair it with a mobile sticky `footer` component. Hidden on mobile to
   avoid a duplicate; the desktop @media below restores it. */
.psw-receipt-page__footer--desktop {
    display: none;
}

/* --- key-info rows (Paid / Payment for / Payment): leading mark + bold label
   + gray value, all on one left-aligned line --- */
.psw-receipts__key-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.psw-receipts__key-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.psw-receipts__key-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-gray-500);
}

.psw-receipts__key-icon .psw-icon {
    color: currentColor;
}

.psw-receipts__key-icon .psw-payment-icon {
    display: block;
    height: 24px;
    width: auto;
}

.psw-receipts__key-text {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
    overflow-wrap: anywhere;
}

.psw-receipts__key-label {
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
}

.psw-receipts__key-label::after {
    content: ":";
}

.psw-receipts__key-value {
    color: var(--color-gray-600);
}

/* --- sections (Items / Payment details / Payment method / Memo) --- */
.psw-receipts__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;
}

.psw-receipts__section-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.psw-receipts__section-heading {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-heading-xs);          /* bold 20/28 (mobile) */
    line-height: var(--text-heading-xs--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
}

/* Item rows live in components/psw-receipt-item-row.css (receipt_item_row). */

/* --- Total row (page-owned; receipt_view has none) --- */
.psw-receipts__total {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
}

.psw-receipts__total-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
}

.psw-receipts__total-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-content-high);
}

.psw-receipts__total-icon .psw-icon {
    color: currentColor;
}

.psw-receipts__total-label {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--text-label-lg);            /* bold 18/24 — the transaction-detail Total pattern */
    line-height: var(--text-label-lg--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
}

.psw-receipts__total-value {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: var(--text-heading-sm);          /* bold 24/32 — the headline total */
    line-height: var(--text-heading-sm--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
}

/* --- Payment method row --- */
.psw-receipts__method {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
}

.psw-receipts__method-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    color: var(--color-gray-500);
}

.psw-receipts__method-icon .psw-icon {
    color: currentColor;
}

.psw-receipts__method-icon .psw-payment-icon {
    display: block;
    height: 24px;
    width: auto;
}

.psw-receipts__method-label {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
    color: var(--color-content-high);
    overflow-wrap: anywhere;
}

.psw-receipts__method-amount {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
    color: var(--color-content-high);
}

/* --- Memo --- */
.psw-receipts__memo {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
    color: var(--color-gray-600);
    overflow-wrap: anywhere;
    white-space: pre-line;          /* preserve memo line breaks */
}

/* --- "Paid on <date>" footer line: label gray, date bold/dark --- */
.psw-receipts__paid-on {
    margin: 0;
    text-align: center;
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
    color: var(--color-gray-600);
}

.psw-receipts__paid-on-date {
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
}

/* --- receipt-page-only deltas (Figma 125:23683 checklist) ---
   The .psw-receipts__* classes are shared with the estimate / invoice / order /
   gift / royalty pages, which were QA'd at the base values above — these
   overrides scope the receipt page's own spec to .psw-receipt-page. */

.psw-receipt-page .psw-receipts__refnum {
    font-size: var(--text-paragraph-lg);
    line-height: var(--text-paragraph-lg--line-height);
}

.psw-receipt-page .psw-receipts__headline {
    gap: var(--space-1);
}

.psw-receipt-page .psw-receipts__card {
    padding: var(--space-4);
}

.psw-receipt-page .psw-receipts__key-info {
    gap: var(--space-4);
}

/* Glyph fills half the circle: 40px in the 80px mobile circle,
   56px in the 116px desktop one. */
.psw-receipt-page .psw-receipts__ribbon .psw-icon {
    width: 40px;
    height: 40px;
}

.psw-invoice-page__payment-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}

/* Royalty payment details: 16px between the breakdown rows, the divider, and
   the Total row (tighter than the section's 24px block gap). */
.psw-royalty-page__payment-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}

.psw-estimate-page__items {
    gap: var(--space-6);
}

.psw-estimate-page__payment-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}

/* Card info sits 24px above "Change payment method" (matching the booking,
   order and subscription pages) — this section-body holds only that pair, so
   the override replaces the shared 12px rhythm outright. */
.psw-estimate-page__payment-method .psw-receipts__section-body {
    gap: var(--space-6);
}

@media (max-width: 768px) {
    .psw-gift-page .psw-key-transaction-info__header-top {
        align-items: flex-start;
    }
    .psw-invoice-page--paid .psw-key-transaction-info__header,
    .psw-invoice-page--paid .psw-key-transaction-info__header-main {
        gap: var(--space-1);
    }
    .psw-invoice-page--paid .psw-key-transaction-info__header--centered .psw-key-transaction-info__header-title {
        font-size: var(--text-heading-lg);
        line-height: var(--text-heading-lg--line-height);
    }
    .psw-invoice-page--paid .psw-invoice-page__items {
        gap: var(--space-6);
    }
}

/* --- divider --- */
.psw-receipts__divider {
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-gray-200);
}

/* Desktop overrides — kept at the bottom so they cascade over the base rules
   above without an !important arms race (same-specificity, later wins). */
@media (min-width: 769px) {
    .psw-receipt-page {
        background: var(--color-gray-100);
    }
    /* No fixed footer on desktop (it's mobile-only) — drop the mobile reserve. */
    .psw-receipt-page--sticky-footer {
        padding-bottom: 0;
    }
    .psw-receipt-page__footer--desktop {
        display: flex;
    }
    .psw-receipt-page .psw-receipts {
        max-width: 744px;
        gap: 40px;
        padding-inline: var(--space-8);
        padding-bottom: var(--space-8);   /* down to the in-flow powered-by block */
    }
    .psw-estimate-page .psw-receipts {
        padding-bottom: var(--space-10);
    }
    .psw-gift-page .psw-receipts {
        padding-bottom: var(--space-10);
    }
    .psw-receipts > .psw-avatar-banner {
        height: 140px;
        margin-inline: calc(-1 * var(--space-8));
    }
    .psw-receipts__card {
        gap: var(--space-6);                  /* 24px inside the card (Figma 1550:180689) */
        margin-top: calc(-44px - 40px);
    }
    .psw-receipts__title {
        font-size: var(--text-display-sm);
        line-height: var(--text-display-sm--line-height);
    }
    .psw-receipts__ribbon {
        width: 116px;
        height: 116px;
        aspect-ratio: 1 / 1;                  /* guard against flex shrink on the row */
    }
    .psw-receipts__ribbon .psw-icon {
        width: 48px;
        height: 48px;
    }
    .psw-receipts__section-heading {
        font-size: var(--text-heading-sm);
        line-height: var(--text-heading-sm--line-height);
    }
    /* Flip the Download CTA position from bottom (mobile default) to inside
       the card (desktop). */
    .psw-receipts__download--card {
        display: block;
    }
    .psw-receipts__download--bottom {
        display: none;
    }
    /* Receipt-page mobile overrides restored to the desktop spec. */
    .psw-receipt-page .psw-receipts__headline {
        gap: var(--space-2);
    }
    .psw-receipt-page .psw-receipts__card {
        padding: var(--space-6);
    }
    .psw-receipt-page .psw-receipts__ribbon .psw-icon {
        width: 56px;
        height: 56px;
    }
    .psw-invoice-page--paid .psw-receipts {
        padding-bottom: var(--space-10);
    }
    .psw-invoice-page--paid .psw-key-transaction-info__header--centered .psw-key-transaction-info__header-title {
        font-size: var(--text-display-sm);
        line-height: var(--text-display-sm--line-height);
    }
}
}