@layer components {
/* Key transaction info composite. The card shell owns only the outer surface;
   individual rows are composed from existing widget primitives server-side. */

.psw-key-transaction-info {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    padding: var(--space-4);
    background: var(--color-white);
    border: var(--border-width-sm) solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

/* Borderless variant — the card surface is owned by a parent (e.g. the
   success_shell content card, or the gift page's header card), so drop our own
   border/padding/background and let the rows sit flush. */
.psw-key-transaction-info--borderless {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.psw-key-transaction-info .psw-stack {
    width: 100%;
    min-width: 0;
}

/* Every top-level section sits on a 16px mobile / 24px desktop rhythm around
   its divider (Figma 1850:13128 appointment + 2256:81877 / 2257:85533 others).
   The divider margin/padding are set explicitly rather than via --psw-stack-gap
   because a nested section stack (info rows, booking dates) would otherwise
   resolve the divider gap against its OWN gap, leaving it at the child's
   spacing (e.g. the 16px info-rows stack stayed 16px on desktop). */
.psw-key-transaction-info > .psw-stack--with-dividers > * + * {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
}

/* Progress belongs visually to the header (Figma payment-plan card), so it
   keeps the header-to-progress spacing but does not draw the generic row
   divider before the bar. */
.psw-key-transaction-info > .psw-stack--with-dividers > .psw-key-transaction-info__progress {
    padding-top: 0;
    border-top: 0;
}

.psw-key-transaction-info__progress {
    width: 100%;
    min-width: 0;
}

/* Item-summary header: leading item avatar + title over a muted subtitle
   (e.g. "Three Hundred" / "Gift certificate · $300.00"). */
.psw-key-transaction-info__summary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    min-width: 0;
}

.psw-key-transaction-info__summary-avatar {
    flex-shrink: 0;
    display: inline-flex;
}

.psw-key-transaction-info__summary-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.psw-key-transaction-info__summary-title {
    color: var(--color-content-high);
    font-family: var(--font-sans);
    font-size: var(--text-label-md);
    font-weight: var(--font-weight-bold);
    line-height: var(--text-label-md--line-height);
    overflow-wrap: anywhere;
}

.psw-key-transaction-info__summary-subtitle {
    color: var(--color-gray-600);
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-sm);
    line-height: var(--text-paragraph-sm--line-height);
    overflow-wrap: anywhere;
}

/* Generic info row — "[icon] Label: value", left-aligned. Shares the
   subaccount row's structure so balance/total/payment read consistently.
   flex-start (not center) so a value that wraps keeps the icon + label on
   its first line instead of floating them to the vertical middle; the
   heading's 24px min-height matches the value's 24px line-height, so
   single-line rows render identically either way. */
.psw-key-transaction-info__info-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    width: 100%;
    min-width: 0;
}

.psw-key-transaction-info__info-row-heading {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-3);
    min-height: 24px;
}

.psw-key-transaction-info__info-row-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: var(--color-gray-500);
}

/* .psw-icon ships with `color: var(--theme-primary, --theme-primary-default)`, which
   would override the inherited gray. Force currentColor so the icon takes the
   wrapper's gray-500 (the same workaround psw-btn / psw-field / the receipt
   page use). */
.psw-key-transaction-info__info-row-icon .psw-icon {
    color: currentColor;
}

.psw-key-transaction-info__info-row-icon .psw-payment-icon {
    display: block;
    height: 24px;
    width: auto;
}

.psw-key-transaction-info__info-row-label {
    color: var(--color-gray-700);
    font-family: var(--font-sans);
    font-size: var(--text-label-md);
    font-weight: var(--font-weight-bold);
    line-height: var(--text-label-md--line-height);
    white-space: nowrap;
}

.psw-key-transaction-info__info-row-value {
    flex: 1 1 0;
    min-width: 0;
    color: var(--color-gray-600);
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--text-paragraph-md--line-height);
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Credit (e.g. a discount) renders green, matching the receipt view. */
.psw-key-transaction-info__info-row-value--credit {
    color: var(--color-success-500);
}

.psw-key-transaction-info__loose-stack.psw-stack--loose {
    --psw-stack-gap: var(--space-4);
}

/* Primary action buttons seated in the card (the `actions` slot). A column so a
   secondary CTA stacks under the primary at a tight 12px rhythm. */
.psw-key-transaction-info__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

/* Header (Figma 1757:195102): a status pill at the top-left, then the title +
   optional subtitle in a left column, with an optional trailing ribbon icon.

   A COLUMN, not a row: the text and the trailing mark share the top row, and
   the BNPL installment line sits under both. Figma (2150:217820) runs that line
   the full width of the card — it passes under the trailing mark, which is only
   80px tall and has ended by the time the line is reached. Kept inside the text
   column, "4 payments of $42.50" plus its three provider marks need 248px and
   the column is 213px, so the marks wrapped to a line of their own. */
.psw-key-transaction-info__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
    min-width: 0;
}

/* The header's top row: the text column + the trailing ribbon / item images. */
.psw-key-transaction-info__header-top {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    min-width: 0;
}

/* The appointment titlebar has no second row — the item-type label and the
   status tag are the whole header, side by side. */
.psw-key-transaction-info__header--titlebar {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
}

/* The text column stacks tag -> title -> subtitle at 4px on mobile; desktop
   opens it back up to 8px (as does the header's own row gap). */
.psw-key-transaction-info__header-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

/* Centered variant (estimate view): pill + amount + estimate-number stacked
   and centered, no trailing ribbon. */
.psw-key-transaction-info__header--centered .psw-key-transaction-info__header-main {
    align-items: center;
    text-align: center;
}

/* …and its installment line, now a sibling of the text column, centers too. */
.psw-key-transaction-info__header--centered .psw-key-transaction-info__header-bnpl {
    justify-content: center;
}

/* Status pill: small on mobile, medium on desktop. A tag's size is fixed per
   class, so both are pre-rendered and one is hidden — the pill's chrome stays
   the tag component's business (see the ribbon/item-images views below, which
   toggle the same way). */
.psw-key-transaction-info__header-status,
.psw-key-transaction-info__header-status-view {
    display: inline-flex;
}

.psw-key-transaction-info__header-status-view--desktop {
    display: none;
}

/* Appointment/booking header (Figma 1850:13128): the item-type label fills the
   row and the status tag sits at the trailing edge, on the base __header's
   center-aligned 16px-gap row. A muted Label/Medium type, so the date below
   reads as the card's prominent line. */
.psw-key-transaction-info__header-type {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--color-gray-600);
    font-family: var(--font-sans);
    font-size: var(--text-label-md);
    font-weight: var(--font-weight-bold);
    line-height: var(--text-label-md--line-height);
    overflow-wrap: anywhere;
}

.psw-key-transaction-info__header-title {
    color: var(--color-content-high);
    font-family: var(--font-sans);
    font-size: var(--text-heading-sm);          /* bold 24/32 (mobile) */
    line-height: var(--text-heading-sm--line-height);
    font-weight: var(--font-weight-bold);
    overflow-wrap: anywhere;
}

/* The centered header's title is the amount ($319.00) — the card's hero, so it
   runs a size up from a package/order title even on mobile. */
.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-key-transaction-info__header-subtitle {
    color: var(--color-gray-600);
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);        /* regular 16/24 (mobile) */
    line-height: var(--text-paragraph-md--line-height);
    overflow-wrap: anywhere;
}

/* BNPL installment line under the subtitle: "N payments of $X" + provider
   marks, left-aligned. Mirrors the summary composite's BNPL row. */
.psw-key-transaction-info__header-bnpl {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.psw-key-transaction-info__header-bnpl-text {
    color: var(--color-gray-600);
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
}

.psw-key-transaction-info__header-bnpl-marks {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.psw-key-transaction-info__header-bnpl-marks .psw-payment-icon {
    display: block;
    height: 20px;
    width: auto;
}

/* Ribbon mark: the icon avatar (gray disc + glyph), pinned to the header's
   trailing edge and aligned to its top. The avatar owns the disc and glyph
   sizing — 80px/40px at xl (mobile), 116px/56px at xxl (desktop). */
.psw-key-transaction-info__header-ribbon {
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
}

.psw-key-transaction-info__header-ribbon-view--desktop {
    display: none;
}

/* Item-images stack (Figma 1590:223757): the transaction's items as an
   overlapping avatar_stack pinned to the header's trailing edge, in the
   ribbon's place. Mobile shows the lg stack; desktop swaps to the xxl stack
   (see the media query). Both are pre-rendered and toggled here because avatar
   member sizes are fixed per size class, so one stack can't flex sizes. */
.psw-key-transaction-info__header-images {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.psw-key-transaction-info__header-images-view {
    display: inline-flex;
    align-items: center;
}

.psw-key-transaction-info__header-images-view--desktop {
    display: none;
}

.psw-key-transaction-info__subaccount,
.psw-key-transaction-info__class-row {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    width: 100%;
    min-width: 0;
}

.psw-key-transaction-info__video-conference {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3);
    row-gap: 10px;
    width: 100%;
    min-width: 0;
}

.psw-key-transaction-info__subaccount-heading,
.psw-key-transaction-info__class-heading {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-3);
    min-height: 24px;
}

.psw-key-transaction-info__video-conference-heading {
    display: contents;
}

.psw-key-transaction-info__subaccount-icon,
.psw-key-transaction-info__class-icon,
.psw-key-transaction-info__video-conference-icon {
    flex-shrink: 0;
    color: var(--color-gray-500);
}

.psw-key-transaction-info__class-avatar {
    flex-shrink: 0;
}

.psw-key-transaction-info__video-conference-icon {
    grid-column: 1;
    grid-row: 1;
}

.psw-key-transaction-info__subaccount-type,
.psw-key-transaction-info__class-label,
.psw-key-transaction-info__video-conference-label {
    color: var(--color-gray-700);
    font-family: var(--font-sans);
    font-size: var(--text-label-md);
    font-weight: var(--font-weight-bold);
    line-height: var(--text-label-md--line-height);
    white-space: nowrap;
}

.psw-key-transaction-info__video-conference-label {
    grid-column: 2;
    grid-row: 1;
}

.psw-key-transaction-info__subaccount-name,
.psw-key-transaction-info__class-value {
    min-width: 0;
    color: var(--color-gray-600);
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--text-paragraph-md--line-height);
    overflow-wrap: anywhere;
}

/* The link is the button component's tertiaryLink variant — theme color, bold
   Label/Medium, underline and the hover/pressed overlays all come from psw-btn.
   What's left is placing it in the row and letting a long URL wrap inside its
   cell instead of centering and overflowing (psw-btn centers, since a button's
   label is short). */
.psw-key-transaction-info__video-conference-link {
    grid-column: 2;
    grid-row: 2;
    /* Take the row's remaining width on desktop, where the link is a flex item:
       psw-btn is inline-flex, so left to itself it would shrink to min-content
       and — with `anywhere` breaking — spill the URL down one character per
       line. Ignored in the mobile grid, where the cell sizes it. */
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    text-align: left;
    overflow-wrap: anywhere;
}

@media (min-width: 769px) {
    /* Scoped to the bordered (standalone-card) variant — the borderless variant
       sits inside a parent card that already owns the 24px padding, so it must
       stay flush (otherwise the desktop padding doubles up). */
    .psw-key-transaction-info:not(.psw-key-transaction-info--borderless) {
        padding: var(--space-6);
    }

    /* Section rhythm bumps to 24px on desktop (Figma 2256:81877). */
    .psw-key-transaction-info > .psw-stack--with-dividers > * + * {
        margin-top: var(--space-6);
        padding-top: var(--space-6);
    }

    .psw-key-transaction-info__loose-stack.psw-stack--loose {
        --psw-stack-gap: var(--space-6);
    }

    .psw-key-transaction-info__header,
    .psw-key-transaction-info__header-main {
        gap: var(--space-2);
    }

    /* The titlebar's gap is the space between the type label and the status
       tag, not a stack rhythm — it stays 16px. */
    .psw-key-transaction-info__header--titlebar {
        gap: var(--space-4);
    }

    /* The item-type label ("Service") reads a step up from the mobile 16px. */
    .psw-key-transaction-info__header-type {
        font-size: var(--text-label-lg);
        line-height: var(--text-label-lg--line-height);
    }

    .psw-key-transaction-info__header-title {
        font-size: var(--text-heading-lg);
        line-height: var(--text-heading-lg--line-height);
    }

    /* The centered header's title is the amount ($319.00) — the card's hero, so
       it runs larger than a package/order title. */
    .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);
    }

    .psw-key-transaction-info__header-subtitle,
    .psw-key-transaction-info__header-bnpl-text {
        font-size: var(--text-paragraph-lg);
        line-height: var(--text-paragraph-lg--line-height);
    }

    /* Swap the small status pill for the medium one on desktop. */
    .psw-key-transaction-info__header-status-view--mobile {
        display: none;
    }

    .psw-key-transaction-info__header-status-view--desktop {
        display: inline-flex;
    }

    /* Swap the xl ribbon avatar for the xxl one on desktop. */
    .psw-key-transaction-info__header-ribbon-view--mobile {
        display: none;
    }

    .psw-key-transaction-info__header-ribbon-view--desktop {
        display: inline-flex;
    }

    /* Swap the lg item-images stack for the xxl one on desktop. */
    .psw-key-transaction-info__header-images-view--mobile {
        display: none;
    }

    .psw-key-transaction-info__header-images-view--desktop {
        display: inline-flex;
    }

    .psw-key-transaction-info__video-conference {
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

    .psw-key-transaction-info__video-conference-heading {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        gap: var(--space-3);
        min-height: 24px;
    }

    .psw-key-transaction-info__video-conference-icon,
    .psw-key-transaction-info__video-conference-label,
    .psw-key-transaction-info__video-conference-link {
        grid-column: auto;
        grid-row: auto;
    }
}
}