@layer pages {
/* Direct-payment (cash) widget (/cash/<uri>?v=2) layout — .psw-cash-amount
   (centered single column), .psw-cash (two-column register/source scaffold +
   mobile summary sheet), .psw-cash-complete (success_shell). Layout-only. */

/* ── Shared bottom-clearance for the mobile sticky footer (matches psw-record). */
.psw-cash,
.psw-cash-amount {
    /* The footer's own height (psw-footer.css) + the 24px of content-to-footer
       air every mobile screen keeps. */
    --cash-footer-clearance: calc(var(--psw-footer-height) + var(--space-6));
    min-height: 100vh;
    background: var(--color-white);
}

/* ════════════════════════════════════════════════════════════════════════
   Amount step (.psw-cash-amount) — centered single column.
   ════════════════════════════════════════════════════════════════════════ */
/* The amount step hosts the absolutely-positioned Back control, so it is its
   containing block. */
.psw-cash-amount {
    position: relative;
}

/* Referer-driven Back control overlaid on the banner's top-left, shown only
   when an external site embedded/linked the widget. Vertically centered in the
   82px banner; mobile chevron, desktop square + label. Mirrors suitelink. */
.psw-cash-amount__back {
    position: absolute;
    top: 0;
    left: var(--space-1);          /* chevron's optical edge ≈ the 16px page gutter */
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: 82px;                  /* = bottom-center banner height -> vertical centering */
    cursor: pointer;
}

/* Strip the tertiary white fill/ring so only the themed glyph shows on the gray
   banner; the 48px md footprint stays as the touch target. */
.psw-cash-amount__back .psw-btn--icon-only {
    background-color: transparent;
    border-color: transparent;
}

.psw-cash-amount__back-label {
    display: none;                 /* label is desktop-only */
}

/* The avatar banner lives outside the form (full-bleed); the form's 24px top
   padding is the space between the avatar's lower edge and the title. The 40px
   gap is the space below the "Send payment" subtitle (and above the Next
   button on desktop, where the inline action is the form's last child). */
.psw-cash-amount__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: var(--space-6) var(--space-4) var(--cash-footer-clearance);
}

.psw-cash-amount__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
}

.psw-cash-amount__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-heading-sm);
    line-height: var(--text-heading-sm--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
    overflow-wrap: anywhere;
}

.psw-cash-amount__subtitle {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-lg);
    line-height: var(--text-paragraph-lg--line-height);
    color: var(--color-content-medium);
}

.psw-cash-amount__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Desktop submits inline below the fields; hidden on mobile (sticky footer). */
.psw-cash-amount__desktop-action {
    display: none;
}

.psw-cash-amount__desktop-branding {
    margin-top: var(--space-6);
}

/* ════════════════════════════════════════════════════════════════════════
   Register + source steps (.psw-cash) — two-column scaffold.
   ════════════════════════════════════════════════════════════════════════ */
.psw-cash__form {
    padding: 0 var(--space-4) var(--cash-footer-clearance);
}

/* The mobile "View summary" header action (list icon, hidden >=769px by the
   workflow-header itself) renders blue per Figma 3409:74013; the icon inherits
   the button color via .psw-btn .psw-icon { color: currentColor }. */
.psw-cash .psw-workflow-header__trail .psw-btn {
    color: var(--color-info-400);
}

/* Let the content column shrink within the grid instead of blowing it out. */
.psw-cash__main {
    min-width: 0;
}

/* Pro-authored intro line above the fields ("Prior to checking out…"). */
.psw-cash__intro {
    margin: 0 0 var(--space-6);
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
    color: var(--color-content-medium);
    overflow-wrap: anywhere;
}

/* Mobile: the desktop right-rail summary is hidden (footer carries the submit,
   the header summary action opens the sheet). */
.psw-cash__aside {
    display: none;
}

/* Summary card (desktop): payment breakdown over the submit. White card, 1px
   gray-200 border, 8px radius. */
.psw-cash__summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6);
    border: var(--border-width-sm) solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

/* ── Payment step: the Stripe card / Link entry revealed under the picker. */
.psw-cash__card-fields,
.psw-cash__link-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

/* The class's display:flex outweighs the UA [hidden] rule, so the JS toggle
   needs this to actually hide the inactive Stripe element (card vs Link). */
.psw-cash__card-fields[hidden],
.psw-cash__link-fields[hidden] {
    display: none;
}

/* Divider between the Stripe entry and the privacy note. */
.psw-cash__divider {
    width: 100%;
    margin: 0;
    border: none;
    border-top: 1px solid var(--color-gray-200);
}

/* Stripe mounts its own iframe; give it the same framed box as a psw field. */
.psw-cash__stripe-element {
    padding: var(--space-3) var(--space-4);
    border: var(--border-width-sm) solid var(--color-gray-500);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

.psw-cash__card-errors {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-sm);
    line-height: var(--text-paragraph-sm--line-height);
    color: var(--color-danger-500, #e11d48);
}

.psw-cash__card-errors:empty {
    display: none;
}

/* ── Mobile summary sheet (Figma 3412:77004) — a bottom sheet, NOT the
   desktop <dialog> modal. Hidden ≥769px where the right rail is always shown. */
.psw-cash__sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: stretch;
}

.psw-cash__sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, 0.4);
}

/* Full-page overlay (Figma 3412:77004): the white panel fills the viewport
   (no rounded sheet corners / visible backdrop), not a partial bottom sheet. */
.psw-cash__sheet-panel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: var(--color-white);
    border-radius: 0;
    padding: calc(var(--space-5) + env(safe-area-inset-top)) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
}

.psw-cash__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

/* The close X is blue per Figma 3412:77004 (icon inherits button color via
   .psw-btn .psw-icon { color: currentColor }). */
.psw-cash__sheet-head .psw-btn {
    color: var(--color-info-400);
}

.psw-cash__sheet-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-heading-sm);
    line-height: var(--text-heading-sm--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
}

/* ════════════════════════════════════════════════════════════════════════
   Desktop (>=769px).
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    /* Align with the redesigned entry pages' container left edge; clamps to the
       24px page gutter on narrower desktops (mirrors .psw-suitelink__back). */
    .psw-cash-amount__back {
        left: max(var(--space-6), calc((100% - 1128px) / 2));
    }
    /* 36px bordered white square with a 20px chevron, matching workflow_header's
       desktop nav button; the circle shape becomes a radius-lg square. */
    .psw-cash-amount__back .psw-btn--icon-only {
        width: 36px;
        height: 36px;
        background-color: var(--color-white);
        border-color: var(--color-border-default);
        border-radius: var(--radius-lg);
    }
    .psw-cash-amount__back .psw-btn--icon-only .psw-icon {
        width: 20px;
        height: 20px;
    }
    .psw-cash-amount__back-label {
        display: block;
        font-family: var(--font-sans);
        font-weight: var(--font-weight-bold);
        font-size: var(--text-heading-sm);
        line-height: var(--text-heading-sm--line-height);
        color: var(--color-content-high);
    }

    /* Amount step: centered column, submit inline (footer hides itself).
       Content column is 580px per design review; 24px top padding
       keeps avatar -> title at 24px under the full-bleed banner. */
    .psw-cash-amount__form {
        max-width: calc(580px + 2 * var(--space-6));
        margin: 0 auto;
        padding: var(--space-6) var(--space-6) var(--space-4);
    }

    /* 32px title over a 16px gap to the subtitle. */
    .psw-cash-amount__intro {
        gap: var(--space-4);
    }

    .psw-cash-amount__title {
        font-size: var(--text-heading-lg);
        line-height: var(--text-heading-lg--line-height);
    }

    /* 32px between the amount and reason fields. */
    .psw-cash-amount__fields {
        gap: var(--space-8);
    }

    .psw-cash-amount__desktop-action {
        display: block;
    }

    /* Register + source: 32px above the heading, 24px side gutter. */
    .psw-cash__form {
        padding: var(--space-8) var(--space-6);
    }

    /* 32px between the intro subtitle and the fields. */
    .psw-cash__intro {
        margin-bottom: var(--space-8);
    }

    /* Heading + grid share a centered 1128px container so their left edges align. */
    .psw-cash__form > .psw-workflow-header,
    .psw-cash__layout {
        max-width: 1128px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Two-column: 638px content + 442px summary card, 48px gutter. */
    .psw-cash__layout {
        display: grid;
        grid-template-columns: minmax(0, 638px) 442px;
        column-gap: 48px;
        margin-top: var(--space-8);
        align-items: start;
    }

    /* Card + branding stack in the right column, sticky as content scrolls. */
    .psw-cash__aside {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
        position: sticky;
        top: var(--space-8);
    }

    /* __summary already draws the desktop card; strip the summary component's
       own card chrome so the breakdown isn't double-bordered (mirrors shop). */
    .psw-cash__summary .psw-summary {
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
    }

    /* The mobile summary sheet never shows on desktop (right rail covers it). */
    .psw-cash__sheet {
        display: none !important;
    }
}
}