@layer pages {
/* Pay package page (/pay/<uri>?v=2). Package detail + client actions.
   Mirrors the pay order page shell (psw-pay-order.css). */

.psw-pay-package-page {
    min-height: 100vh;
    background: var(--color-white);
    /* Reserve scroll space for the fixed mobile footer (psw-footer is mobile-only;
       the page always renders it, so the reserve is unconditional). Cleared on
       desktop below where the footer is hidden. */
    padding-bottom: calc(var(--psw-footer-height) + var(--space-6));
}

.psw-pay-package-page__form {
    width: 100%;
    min-height: 100vh;
}

/* Column owns horizontal inset (same shell as .psw-pay-order / .psw-receipts).
   24px gap between the card and the sections below it (40px on desktop). No
   bottom padding on mobile — the page reserve above already carries the
   design's 24px above the fixed footer; the desktop @media adds 40px, where
   that reserve is zeroed and this is the gap to the in-flow powered-by. */
.psw-pay-package {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;
    max-width: 442px;
    margin: 0 auto;
    padding-inline: var(--space-4);
    background: var(--color-white);
}

.psw-pay-package > .psw-avatar-banner {
    height: 120px;
    margin-inline: calc(-1 * var(--space-4));
}

/* Detail-section divider spacing: 24px above/below on mobile, 40px on desktop
   (the stack centres the hairline within --psw-stack-gap). */
.psw-pay-package__detail-stack {
    --psw-stack-gap: var(--space-6);
}

.psw-pay-package .psw-key-transaction-info__header-top {
    align-items: flex-start;
    gap: var(--space-6);
}

.psw-pay-package .psw-key-transaction-info__header-main {
    max-width: calc(100% - 80px - var(--space-6));
}

.psw-pay-package .psw-key-transaction-info__header-bnpl {
    flex-wrap: nowrap;
}

.psw-pay-package-page .psw-avatar-banner--top-left {
    padding-block: 0 40px;
}

.psw-pay-package__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;
    margin-top: calc(-40px - var(--space-6));
    padding: var(--space-4);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

/* The card's 24px column gap owns the space above these CTAs — no extra
   margin-top (that doubled the gap to 48px). */
.psw-pay-package__head-actions {
    display: none;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.psw-pay-package__head-actions .psw-btn {
    width: 100%;
}

.psw-pay-package__divider {
    border: none;
    border-top: 1px solid var(--color-gray-200);
    margin: 0;
}

.psw-pay-package__detail-stack .psw-receipts__item {
    gap: var(--space-4);
}

.psw-pay-package__payment-body {
    gap: var(--space-4);
}

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

.psw-pay-package__detail-stack > .psw-receipts__paid-on {
    margin-top: var(--psw-stack-gap);
}

.psw-pay-package-page__footer {
    width: 100%;
    max-width: 442px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-4);
}

/* Mobile pins powered-by in the sticky footer, so the in-flow branding is
   desktop-only (restored in the @media block below). */
.psw-pay-package-page__footer--desktop {
    display: none;
}

/* Desktop — mirror psw-pay-order.css column width (744px) and spacing. */
@media (min-width: 769px) {
    .psw-pay-package-page {
        background: var(--color-gray-100);
        padding-bottom: 0;   /* no fixed footer on desktop */
    }

    .psw-pay-package-page__footer--desktop {
        display: block;
    }

    .psw-pay-package {
        max-width: 744px;
        gap: 40px;
        padding-inline: var(--space-8);
        padding-bottom: var(--space-10);  /* 40px below "Sent on X" */
    }

    .psw-pay-package__detail-stack {
        --psw-stack-gap: 40px;
    }

    .psw-pay-package > .psw-avatar-banner {
        height: 140px;
        margin-inline: calc(-1 * var(--space-8));
    }

    .psw-pay-package__card {
        margin-top: calc(-44px - 40px);
        padding: var(--space-6);
    }

    .psw-pay-package .psw-key-transaction-info__header-main {
        max-width: calc(100% - 116px - var(--space-6));
    }

    .psw-pay-package__head-actions {
        display: flex;
    }

    .psw-pay-package-page__footer {
        max-width: 744px;
        padding: var(--space-10) var(--space-8);
    }
}
}