@layer components {
/* Composite: summary — order-review body. Figma desktop 2620:220476 /
   923:117813, mobile 2620:211666. A 16px-gap column: item rows (avatar or
   icon + label + price) -> 1px divider ->
   charges (receipt_view) -> divider -> total (bold + "Total due now" +
   optional BNPL). Heading, close, and CTA are page chrome. Container-driven. */

.psw-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);          /* 16px between rows / dividers / sections */
    width: 100%;
    margin: 0;
    background: var(--color-white);
}

/* Desktop: the body sits in a bordered card (Figma 2620:220476) — white fill,
   1px gray-200 border, 8px radius, 24px padding. On mobile it's a bare
   full-width body (the page provides the surface). */
@media (min-width: 769px) {
    .psw-summary {
        padding: var(--space-6);
        border: 1px solid var(--color-gray-200);
        border-radius: var(--radius-lg);
    }
}

/* --- leading date/time header (Figma desktop 2620:209272 / mobile
   2620:212956): bold date + gray time. The delete control attaches here. --- */
.psw-summary__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);          /* mobile: date/time -> "Delete" button */
    width: 100%;
}

.psw-summary__header-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);          /* 4px date -> time */
    min-width: 0;
}

.psw-summary__header-date {
    font-family: var(--font-sans);
    font-size: var(--text-label-lg);        /* bold 18/24 */
    line-height: var(--text-label-lg--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
}

.psw-summary__header-time {
    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);
}

/* --- delete control (attaches to the header): full-width "Delete" button on
   mobile, a bordered trash circle on desktop (Figma mobile 2620:212956 /
   desktop 2620:209272 / 2620:221558). Both are the button component's secondary
   variant — fill, border, themed glyph, hover/pressed and the circle's 36px sm
   diameter all come from psw-btn. Only the breakpoint each one belongs to lives
   here. --- */

/* Mobile shows the button; the desktop trash circle is hidden. */
.psw-summary__delete-icon {
    display: none;
}

@media (min-width: 769px) {
    .psw-summary__delete-button {
        display: none;
    }
    .psw-summary__delete-icon {
        display: inline-flex;
    }
    /* In the header, the trash circle straddles the card's right border
       (horizontally centered on it) and is vertically centered on the
       date/time block. -24px ≈ cancels the card's 24px right padding so the
       circle's center lands on the border; translate re-centers it. */
    .psw-summary__header {
        position: relative;
    }
    .psw-summary__header .psw-summary__delete-icon {
        position: absolute;
        top: 50%;
        right: calc(-1 * var(--space-6));
        transform: translate(50%, -50%);
    }
}

/* --- reservation session: check-in / check-out two-column block with a
   vertical divider (Figma 2620:213201) --- */
.psw-summary__session {
    display: flex;
    align-items: stretch;
    gap: var(--space-4);
    width: 100%;
}

.psw-summary__session-col,
.psw-summary__session-single {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);          /* 4px between the label / date / time rows */
}

/* Service "Multiple sessions": a single bold date + gray time row, no icon
   (Figma "Service - Multiple sessions"). */
.psw-summary__session-single {
    width: 100%;
}

.psw-summary__session-col--end {
    align-items: flex-end;
    text-align: right;
}

.psw-summary__session-divider {
    flex: 0 0 auto;
    align-self: stretch;
    width: 1px;
    background: var(--color-gray-200);
}

.psw-summary__session-label,
.psw-summary__session-time {
    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);
}

.psw-summary__session-date {
    font-family: var(--font-sans);
    font-size: var(--text-label-lg);        /* bold 18/24 */
    line-height: var(--text-label-lg--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
}

/* A reservation block can carry a delete control (the check-out column's trash,
   Figma 2620:221558) that resets the whole stay — a bordered trash circle
   straddling the card's right border, mirroring the header trash. Desktop only:
   the reservation results rail is desktop-only, and mobile resets via the
   calendar's "Clear dates". */
.psw-summary__session--deletable {
    position: relative;
}
.psw-summary__session-delete {
    display: none;
}
@media (min-width: 769px) {
    /* Vertically center the trash against the check-in/check-out block (its
       label/date/time rows) rather than pinning it to the top row. */
    .psw-summary__session-delete {
        display: inline-flex;
        position: absolute;
        top: 50%;
        right: calc(-1 * var(--space-6));
        transform: translate(50%, -50%);
    }
}

/* A drop-in lesson row (single-session shape) can carry a per-lesson trash that
   removes just that lesson (POST /delete {lesson}). Desktop rail only: the
   reused trash circle (.psw-summary__delete-icon, hidden <769px) straddles the
   card's right border centered on the row — the same placement as the header /
   reservation trash (Figma 3117:325976) — so it reads as part of the rail edge;
   the mobile cart overlay strips it (display-only). */
@media (min-width: 769px) {
    .psw-summary__session-single--deletable {
        position: relative;
    }
    .psw-summary__session-single--deletable .psw-summary__delete-icon {
        position: absolute;
        top: 50%;
        right: calc(-1 * var(--space-6));
        transform: translate(50%, -50%);
    }
}

/* --- "Show +N more" session disclosure (Figma 3117:311336): a native
   <details> that folds the sessions past the first two. The toggle is a
   bold primary-color link with a leading chevron; it hides once expanded so
   the revealed rows (and their dividers) stack at the summary's 16px rhythm.
   Mirrors the payment-method-picker "more" disclosure.

   The 16px rhythm lives on the inner `__more-content` wrapper, not the
   <details> itself: browsers that support `::details-content` (Chrome 131+)
   slot the revealed rows into that single pseudo-box, so a `gap` on the
   <details> would only space the <summary> from the box — never the rows
   inside it. Flexing the wrapper restores the gap on every engine. --- */
.psw-summary__more {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.psw-summary__more-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* The toggle carries psw-btn's tertiaryLink classes (see summary.html), so the
   theme color, type, underline and hover/pressed overlays come from there. What
   stays here is what a <summary> needs and a <button> doesn't: no marker, and a
   width that stops the underline at the label. */
.psw-summary__more-toggle {
    width: max-content;
    max-width: 100%;
    list-style: none;
}

/* The toggle survives expansion and reads "Show less", with the chevron
   flipped. Both labels are in the markup; only one is ever shown. */
.psw-summary__more:not([open]) .psw-summary__more-label--less,
.psw-summary__more[open] .psw-summary__more-label--more {
    display: none;
}

.psw-summary__more[open] .psw-summary__more-toggle .psw-icon {
    transform: rotate(180deg);
}

/* A <summary> is always the first child, which would leave "Show less" stranded
   between the visible rows and the revealed ones. Order it last instead. The
   two rules cover both engines: browsers that slot revealed rows into the
   ::details-content pseudo-box (Chrome 131+) and those that leave the wrapper a
   plain flex child. */
.psw-summary__more-toggle {
    order: 2;
}

.psw-summary__more-content,
.psw-summary__more::details-content {
    order: 1;
}

.psw-summary__more-toggle::-webkit-details-marker {
    display: none;
}

.psw-summary__more-toggle::marker {
    content: "";
}

.psw-summary__more-toggle .psw-icon {
    color: currentColor;
    transition: transform 160ms ease;
}

/* --- item & total rows: leading element + text column + trailing amount --- */
.psw-summary__item-main,
.psw-summary__total-main {
    display: flex;
    align-items: center;
    gap: var(--space-4);          /* 16px leading -> text */
    width: 100%;
}

/* Consecutive item rows sit 12px apart — tighter than the 16px rhythm the
   container uses between sections (rows / divider / charges / total). Pulls
   4px back out of that gap, and applies equally to the rows revealed inside
   the "Show more" wrapper, which shares the 16px rhythm. */
.psw-summary__item-main + .psw-summary__item-main {
    margin-top: calc(var(--space-3) - var(--space-4));
}

/* Leading avatar/icon is always 24px, aligned to the row (and the receipt
   icons below it). */
.psw-summary__lead,
.psw-summary__total-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

/* Every item icon is a bare 24px gray glyph — the item's own fallback icon, the
   line's named icon (cash's "Custom amount") and the address marker-pin all read
   the same. Direct child only: a photo lead is an <img>, not an icon. */
.psw-summary__lead > .psw-icon {
    color: var(--color-gray-500);
}

.psw-summary__total-icon {
    color: var(--color-content-high);
}

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

/* Line items are regular (Paragraph/Medium 16/24) — both label and value
   (Figma 2620:221558 / 923:117813). Only the Total row is bold. The label
   takes the remaining width (and truncates) between the lead and the value. */
.psw-summary__item-label--multiline {
    white-space: pre-line;
}

.psw-summary__item-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;      /* break long unbroken labels / addresses */
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
    font-weight: var(--font-weight-regular);
    color: var(--color-content-high);
}

.psw-summary__item-value {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);    /* regular 16/24, like the label */
    line-height: var(--text-paragraph-md--line-height);
    font-weight: var(--font-weight-regular);
    color: var(--color-content-high);
}

/* Label column: holds the line label and, when present, a gray breakdown
   sub-label beneath it (the per-unit × count multiplier — "$100.00 x 6 nights",
   Figma 3111:275251). Takes the remaining width between the lead and the value
   (the single-line case is unchanged — one block in the column). */
.psw-summary__item-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);          /* 4px label -> quantity breakdown */
}

.psw-summary__item-sublabel {
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-sm);    /* regular 14/20, gray */
    line-height: var(--text-paragraph-sm--line-height);
    color: var(--color-gray-600);
}

/* Top-align the leading avatar + trailing amount with the label's first line so
   a long title that wraps (Figma 2620:208648) — or a stacked sub-label breakdown
   (Figma 3111:275251) — doesn't float them to the vertical middle. Single-line
   rows are unaffected (top == center at one line). The Total row above keeps its
   centered alignment (its icon/label/value are always a single line). */
.psw-summary__item-main {
    align-items: flex-start;
}

/* --- total block --- */
.psw-summary__total {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);          /* 4px between total / due-now / BNPL (Figma 2620:208190) */
    width: 100%;
}

.psw-summary__total-label,
.psw-summary__total-value {
    font-family: var(--font-sans);
    font-size: var(--text-label-lg);        /* Label/Large 18/24, bold */
    line-height: var(--text-label-lg--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
}

.psw-summary__total-label {
    flex: 1 1 auto;
    min-width: 0;
}

.psw-summary__total-value {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

/* "Total due now" sub-row: indented 40px (24px icon + 16px gap), muted. */
.psw-summary__subrow {
    display: flex;
    gap: var(--space-4);
    width: 100%;
    padding-left: 40px;
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
    color: var(--color-content-high);
}

.psw-summary__subrow--muted {
    color: var(--color-gray-600);
}

.psw-summary__subrow > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.psw-summary__subrow > span:last-child {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

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

/* --- BNPL line: brand marks pinned left, aligned with the row content (40px
   = 24px icon + 16px gap, matching "Total due now"); "N payments of $X" pinned
   right (Figma 2620:208298) --- */
.psw-summary__bnpl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding-left: 40px;             /* align marks with the row labels above */
    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-summary__bnpl-text {
    text-align: right;
    white-space: nowrap;
}

.psw-summary__bnpl-marks {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);            /* 4px between the brand marks (Figma 2620:208190) */
}

.psw-summary__bnpl-marks .psw-payment-icon {
    display: block;
    height: 20px;
    width: auto;
}
}