@layer components {
/* Widget list item renderer. The choice variants keep state on native inputs:
   radio/grid are single-select radios, checkbox is multi-select. */

.psw-list-item-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.psw-list-item-grid {
    --psw-list-item-grid-max-width: 344px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-3);
    row-gap: var(--space-3);
    width: min(100%, var(--psw-list-item-grid-max-width));
}

.psw-list-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    min-height: 64px;
    padding: 15px;
    color: var(--color-content-high);
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.psw-list-item--rich {
    cursor: default;
}

.psw-list-item--rich,
.psw-list-item--radio,
.psw-list-item--checkbox {
    justify-content: flex-start;
}

.psw-list-item--grid {
    min-height: 0;
    /* Fill the (grid-stretched) cell so a title-only tile matches the height
       of tiles that also show a subtitle. */
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px 12px;
}

.psw-list-item--radio {
    min-height: 58px;
    gap: var(--space-4);
    padding: 17px;
    border-radius: var(--radius-lg);
}

.psw-list-item--checkbox {
    min-height: 56px;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
}

/* Hover washes gated on (hover: hover): touch browsers keep :hover latched
   on the last-tapped element, which left the just-selected row stuck in the
   gray wash. The :active rules still give touch its pressed feedback. */
@media (hover: hover) {
    .psw-list-item:not(.psw-list-item--disabled):hover {
        cursor: pointer;
        background:
            linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)),
            var(--color-white);
    }
}

/* Pressed: deepen the hover overlay (0.04 -> 0.08), matching button/choice-card. */
.psw-list-item:not(.psw-list-item--disabled):active {
    background:
        linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)),
        var(--color-white);
}

.psw-list-item:has(.psw-list-item__input:not(:disabled):focus-visible) {
    border-color: transparent;
    box-shadow: 0 0 0 3px var(--theme-primary, var(--theme-primary-default));
}

.psw-list-item:has(.psw-list-item__input:checked) {
    border-color: var(--color-gray-300);
    outline: var(--border-width-md) solid var(--theme-primary, var(--theme-primary-default));
    outline-offset: calc(-1 * var(--border-width-sm));
    background: var(--color-white);
}

.psw-list-item-field--error .psw-list-item:has(.psw-list-item__input:checked),
.psw-list-item:has(.psw-list-item__input:user-invalid:checked) {
    outline-color: var(--color-danger-400);
}

@media (hover: hover) {
    .psw-list-item:not(.psw-list-item--disabled):has(.psw-list-item__input:checked):hover {
        background:
            linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)),
            var(--color-white);
    }
}

/* Checked + pressed: needs its own rule to out-specify the checked:hover
   above (which also matches while pressing). */
.psw-list-item:not(.psw-list-item--disabled):has(.psw-list-item__input:checked):active {
    background:
        linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)),
        var(--color-white);
}

.psw-list-item-field--error .psw-list-item:has(.psw-list-item__input:not(:disabled):focus-visible),
.psw-list-item:has(.psw-list-item__input:user-invalid:not(:disabled):focus-visible) {
    border-color: transparent;
    box-shadow: 0 0 0 3px var(--color-danger-400);
}

.psw-list-item-field--error .psw-field__radio-input,
.psw-list-item-field--error .psw-field__checkbox-input,
.psw-field__radio-input:user-invalid,
.psw-field__checkbox-input:user-invalid {
    border-color: var(--color-danger-400);
}

.psw-list-item-field--error .psw-field__radio-input:checked,
.psw-field__radio-input:user-invalid:checked {
    background-image: radial-gradient(circle,
        var(--color-danger-400) 5.5px,
        transparent 6.5px);
}

.psw-list-item-field--error .psw-field__checkbox-input:checked,
.psw-field__checkbox-input:user-invalid:checked {
    background-color: var(--color-danger-400);
    border-color: var(--color-danger-400);
}

.psw-list-item-field--error .psw-field__radio-input:not(:disabled):focus-visible,
.psw-list-item-field--error .psw-field__checkbox-input:not(:disabled):focus-visible,
.psw-field__radio-input:user-invalid:not(:disabled):focus-visible,
.psw-field__checkbox-input:user-invalid:not(:disabled):focus-visible {
    box-shadow: 0 0 0 3px var(--color-danger-400);
}

.psw-list-item-field--disabled .psw-list-item,
.psw-list-item--disabled {
    color: var(--color-content-disabled);
    border-color: var(--color-border-disabled);
    cursor: not-allowed;
}

/* Disabled + selected: fade the selection stroke instead of dropping it to the
   disabled border — a locked choice still has to read as the chosen one. 50%
   of the theme color over white is exactly what the radio/checkbox glyph fades
   to (it dims via opacity: 0.5 on white), so stroke and glyph agree. */
.psw-list-item-field--disabled .psw-list-item:has(.psw-list-item__input:checked),
.psw-list-item--disabled:has(.psw-list-item__input:checked) {
    outline-color: color-mix(in srgb, var(--theme-primary, var(--theme-primary-default)) 50%, var(--color-white));
    border-color: var(--color-border-disabled);
}

.psw-list-item__media {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    color: var(--color-content-medium);
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
}

/* Icon avatars carry the static entity treatment (Gray 200 circle + Gray 600
   glyph) regardless of the Pro's primary/secondary theme color. (Figma 2747:167492) */
.psw-list-item--rich .psw-list-item__media {
    color: var(--color-gray-600);
    background: var(--color-gray-200);
    border-radius: var(--radius-max);
}

/* Title-only rich rows carry a compact 36px icon avatar — the single-line
   treatment (Figma 2747:167758). Two-line (subtitle) rows keep the 48px
   avatar. The glyph itself is sized by the partial, which renders the 16px
   asset here (psw-icon--sm) rather than scaling the 24px one down. */
.psw-list-item--rich.psw-list-item--title-only .psw-list-item__media--circle {
    width: 36px;
    height: 36px;
}

.psw-list-item__media--sm {
    width: 24px;
    height: 24px;
}

.psw-list-item__media--md {
    width: 36px;
    height: 36px;
}

.psw-list-item__media--lg {
    width: 48px;
    height: 48px;
}

.psw-list-item-field--disabled .psw-list-item--rich .psw-list-item__media,
.psw-list-item--rich.psw-list-item--disabled .psw-list-item__media {
    color: var(--color-content-disabled);
    background: var(--color-bg-disabled);
}

.psw-list-item--rich .psw-list-item__media--plain {
    width: auto;
    height: auto;
    overflow: visible;
    background: transparent;
    border-radius: 0;
}

.psw-list-item--rich .psw-list-item__media--plain:has(.psw-payment-icon) {
    width: 34px;
    height: 24px;
}

/* Avatar leading slot — an optional circular profile indicator in place of the
   icon/image media box. The avatar carries its own size/shape (psw-avatar), so
   the slot only reserves space and stays out of the row's growth. On the radio
   variant the native input keeps its left position by default; pull it to the
   trailing edge (matching the rich variant) so the avatar can lead. */
.psw-list-item__avatar {
    flex: 0 0 auto;
    display: inline-flex;
}

.psw-list-item--has-avatar .psw-list-item__input {
    order: 3;
}

.psw-list-item__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.psw-list-item--radio .psw-list-item__media--badge {
    color: var(--color-gray-600);
    background: var(--color-gray-200);
    border-radius: var(--radius-max);
}

.psw-list-item--radio:has(.psw-list-item__media) {
    padding: 25px;
}

.psw-list-item-field--disabled .psw-list-item--rich .psw-list-item__image,
.psw-list-item--rich.psw-list-item--disabled .psw-list-item__image {
    opacity: 0.45;
}

.psw-list-item .psw-icon {
    color: currentColor;
}

.psw-list-item__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.psw-list-item--grid .psw-list-item__body {
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}

.psw-list-item__title-row {
    display: inline-flex;
    align-items: center;
    column-gap: var(--space-2);
    min-width: 0;
}

.psw-list-item__title {
    min-width: 0;
    font-size: var(--text-label-md);
    line-height: var(--text-label-md--line-height);
    font-weight: var(--font-weight-bold);
    overflow-wrap: anywhere;
}

.psw-list-item--radio .psw-list-item__title {
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
    font-weight: var(--font-weight-regular);
}

.psw-list-item--checkbox .psw-list-item__title {
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
    font-weight: var(--font-weight-regular);
}

/* A rich row with only a title (no subtitle) reads as regular body copy rather
   than a bold label. A list that mixes subtitled and subtitle-less rows passes
   title_bold to keep every title bold and aligned. (Figma 2747:167492) */
.psw-list-item--rich.psw-list-item--title-only:not(.psw-list-item--title-bold) .psw-list-item__title {
    font-weight: var(--font-weight-regular);
    line-height: var(--text-paragraph-md--line-height);
}

.psw-list-item__title-icons {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
    color: var(--color-content-medium);
}

.psw-list-item__title-icons .psw-icon,
.psw-list-item__title-icons .psw-payment-icon {
    width: 20px;
    height: 20px;
}

.psw-payment-icon {
    display: block;
    object-fit: contain;
}

.psw-list-item__subtitles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.psw-list-item__subtitle {
    display: block;
    font-size: var(--text-paragraph-sm);
    line-height: var(--text-paragraph-sm--line-height);
    color: var(--color-content-medium);
    overflow-wrap: anywhere;
}

.psw-list-item__subtitle--with-media {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
}

.psw-list-item__subtitle-media {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.psw-list-item__subtitle-media .psw-payment-icon {
    width: 34px;
    height: 24px;
}

.psw-list-item__subtitle-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.psw-list-item-field--disabled .psw-list-item__subtitle,
.psw-list-item--disabled .psw-list-item__subtitle,
.psw-list-item-field--disabled .psw-list-item__title-icons,
.psw-list-item--disabled .psw-list-item__title-icons {
    color: var(--color-content-disabled);
}

.psw-list-item__input {
    flex-shrink: 0;
}

/* Card checkboxes are the 24px lg size, matching the 24px radio beside them. */
.psw-list-item .psw-field__checkbox-input {
    width: 24px;
    height: 24px;
    background-size: 16px 16px;
}

.psw-list-item--rich .psw-list-item__input,
.psw-list-item--radio:has(.psw-list-item__media) .psw-list-item__input {
    order: 3;
}

.psw-list-item__input--grid {
    position: absolute;
}

/* ── Medium size (desktop) ──────────────────────────────────────────────────
   The redesign's "medium" list item: 24px padding on all sides (vs the base
   ~16px) once there is desktop room. Keyed to the viewport rather than a caller
   prop so every list — including the payment / gratuity / gift pickers — adopts
   it on desktop automatically. Avatar/media stay 48px. (Figma 2747:167492) */
@media (min-width: 769px) {
    .psw-list-item,
    .psw-list-item--radio,
    .psw-list-item--checkbox,
    .psw-list-item--grid,
    .psw-list-item--radio:has(.psw-list-item__media) {
        padding: var(--space-6);
    }
}
}