@import '_content/Membercare.SelfService.Web.Components/Membercare.SelfService.Web.Components.qkkzwdq64y.bundle.scp.css';
@import '_content/Membercare.Shared.Blazor.Components/Membercare.Shared.Blazor.Components.gc5csiose7.bundle.scp.css';

/* /Components/Shared/UnionMemberCard.razor.rz.scp.css */
.union-member-card + .union-member-card[b-rilu4y1xwu] {
    border-top: 1px solid var(--bs-border-color);
}
/* /Pages/Events/ComingEventCard.razor.rz.scp.css */
/* Coming Events card (coming-event-card__) — colors are customer-provided semantic tokens. */

.coming-event-card[b-6bbvpm929l] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: var(--color-neutrals-container);
    border-radius: var(--brand-border-radius, 16px);
    box-shadow: var(--shadow-card);
    padding: 16px;
    transition: box-shadow 0.15s, background-color 0.15s;
}

.coming-event-card:hover[b-6bbvpm929l] {
    background-color: var(--color-neutrals-container-hover, var(--color-neutrals-container));
    box-shadow: var(--shadow-card-hover, var(--shadow-card));
}

.coming-event-card__date[b-6bbvpm929l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    min-width: 48px;
    height: 48px;
    background-color: var(--color-primary-container);
    border-radius: 8px;
}

.coming-event-card__date-day[b-6bbvpm929l] {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-primary-default);
}

.coming-event-card__date-month[b-6bbvpm929l] {
    font-size: 12px;
    line-height: var(--font-caption-md-line-height, 20px);
    font-weight: 500;
    color: var(--color-primary-default);
}

.coming-event-card__name[b-6bbvpm929l] {
    font-size: var(--font-body-md-size, 16px);
    line-height: var(--font-body-md-line-height, 24px);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    overflow-wrap: anywhere;
}

.coming-event-card__meta-row[b-6bbvpm929l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    color: var(--color-neutrals-default);
}

.coming-event-card__meta-icon[b-6bbvpm929l] {
    width: 16px;
    text-align: center;
    color: var(--color-primary-default);
}

.coming-event-card__badges[b-6bbvpm929l] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* WCAG note: badge uses --color-primary-default on --color-primary-container */
.coming-event-card__badge[b-6bbvpm929l] {
    background-color: var(--color-primary-container);
    color: var(--color-primary-default);
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 100px;
    white-space: nowrap;
}

.coming-event-card__badge--warning[b-6bbvpm929l] {
    background-color: var(--color-warning-container, var(--color-primary-container));
    color: var(--color-warning-default, var(--color-primary-default));
    white-space: normal;
}

.coming-event-card__tag[b-6bbvpm929l] {
    border: none;
    background-color: var(--color-neutrals-container-variant, var(--color-primary-container));
    color: var(--color-neutrals-default);
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 100px;
    white-space: nowrap;
    cursor: pointer;
}

.coming-event-card__tag:hover[b-6bbvpm929l] {
    text-decoration: underline;
}

.coming-event-card__tag:focus-visible[b-6bbvpm929l] {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

.coming-event-card__tag--static[b-6bbvpm929l] {
    cursor: default;
}

.coming-event-card__tag--static:hover[b-6bbvpm929l] {
    text-decoration: none;
}

.coming-event-card__details[b-6bbvpm929l] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-top: 1px solid var(--color-neutrals-hover);
    padding-top: 16px;
}

.coming-event-card__places[b-6bbvpm929l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.coming-event-card__place[b-6bbvpm929l] {
    display: flex;
    flex-direction: column;
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    color: var(--color-neutrals-default);
    white-space: pre-line;
}

.coming-event-card__place-name[b-6bbvpm929l] {
    font-weight: 600;
}

.coming-event-card__description[b-6bbvpm929l] {
    font-size: var(--font-body-md-size, 16px);
    line-height: var(--font-body-md-line-height, 24px);
    color: var(--color-neutrals-default);
    overflow-wrap: anywhere;
}

.coming-event-card__description[b-6bbvpm929l]  img {
    max-width: 100%;
    height: auto;
}

.coming-event-card__actions[b-6bbvpm929l] {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.coming-event-card__expand-button[b-6bbvpm929l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    padding: 8px 0;
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    font-weight: 500;
    color: var(--color-primary-default);
    cursor: pointer;
}

.coming-event-card__expand-button:hover[b-6bbvpm929l] {
    text-decoration: underline;
}

.coming-event-card__expand-button:focus-visible[b-6bbvpm929l] {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

/* WCAG note: button uses --color-on-primary (customer-defined) on --color-primary-default */
.coming-event-card__signup-button[b-6bbvpm929l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    background-color: var(--color-primary-default);
    color: var(--color-on-primary, var(--color-neutrals-container));
    font-size: var(--font-caption-md-size, 14px);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s;
}

.coming-event-card__signup-button:hover[b-6bbvpm929l] {
    background-color: var(--color-primary-hover, var(--color-primary-default));
    color: var(--color-on-primary, var(--color-neutrals-container));
}

.coming-event-card__signup-button:active[b-6bbvpm929l] {
    background-color: var(--color-primary-pressed, var(--color-primary-default));
}

.coming-event-card__signup-button:focus-visible[b-6bbvpm929l] {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

.coming-event-card__enroll-info[b-6bbvpm929l] {
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    font-weight: 500;
    color: var(--color-neutrals-default);
}
/* /Pages/Events/ComingEvents.razor.rz.scp.css */
/* Coming Events page (coming-events__) — colors are customer-provided semantic tokens. */

.coming-events[b-dkfkgr49ge] {
    font-family: var(--font-family, Roboto, sans-serif);
}

.coming-events__header[b-dkfkgr49ge] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.coming-events__header-icon[b-dkfkgr49ge] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    color: var(--color-primary-default);
    font-size: 20px;
}

/* WCAG note: title uses --color-primary-default on the page background */
.coming-events__title[b-dkfkgr49ge] {
    font-size: var(--font-h5-size, 24px);
    line-height: var(--font-h5-line-height, 36px);
    font-weight: 600;
    color: var(--color-primary-default);
}

.coming-events__month-headline[b-dkfkgr49ge] {
    font-size: var(--font-h6-size, 20px);
    line-height: var(--font-h6-line-height, 32px);
    font-weight: 600;
    color: var(--color-neutrals-default);
    margin: 32px 0 16px 0;
}

.coming-events__grid[b-dkfkgr49ge] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.coming-events__month-headline + .coming-events__grid[b-dkfkgr49ge] {
    margin-top: 0;
}

.coming-events__skeleton-card[b-dkfkgr49ge] {
    background-color: var(--color-neutrals-container);
    border-radius: var(--brand-border-radius, 16px);
    box-shadow: var(--shadow-card);
    padding: 16px;
}

.coming-events__skeleton-date[b-dkfkgr49ge] {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 8px;
}

.coming-events__empty[b-dkfkgr49ge] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background-color: var(--color-neutrals-container);
    border-radius: var(--brand-border-radius, 16px);
    box-shadow: var(--shadow-card);
    padding: 48px 24px;
    margin-top: 32px;
    font-size: var(--font-body-md-size, 16px);
    line-height: var(--font-body-md-line-height, 24px);
    color: var(--color-neutrals-default);
}

.coming-events__empty-icon[b-dkfkgr49ge] {
    font-size: 32px;
    color: var(--color-primary-default);
}

.coming-events__load-more[b-dkfkgr49ge] {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
/* /Pages/Events/ComingEventsFilters.razor.rz.scp.css */
/* Coming Events filter panel (coming-events-filters__) — colors are customer-provided semantic tokens. */

.coming-events-filters[b-o8i02v25yj] {
    background-color: var(--color-neutrals-container);
    border-radius: var(--brand-border-radius, 16px);
    box-shadow: var(--shadow-card);
    padding: 16px 24px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.coming-events-filters__grid[b-o8i02v25yj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.coming-events-filters__org-summary[b-o8i02v25yj] {
    cursor: pointer;
    font-size: var(--font-body-md-size, 16px);
    line-height: var(--font-body-md-line-height, 24px);
    font-weight: 500;
    color: var(--color-neutrals-default);
    display: flex;
    align-items: center;
    gap: 8px;
}

.coming-events-filters__org-summary:hover[b-o8i02v25yj] {
    color: var(--color-neutrals-hover, var(--color-neutrals-default));
}

.coming-events-filters__org-summary:focus-visible[b-o8i02v25yj] {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

.coming-events-filters__org-list[b-o8i02v25yj] {
    max-height: 240px;
    overflow-y: auto;
    padding: 8px 0;
}

.coming-events-filters__clear-button[b-o8i02v25yj] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    padding: 8px 0;
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    font-weight: 500;
    color: var(--color-primary-default);
    cursor: pointer;
}

.coming-events-filters__clear-button:hover[b-o8i02v25yj] {
    color: var(--color-primary-hover, var(--color-primary-default));
    text-decoration: underline;
}

.coming-events-filters__clear-button:focus-visible[b-o8i02v25yj] {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}
/* /Pages/Events/Enroll/EventEnrollment.razor.rz.scp.css */
/*
 * EventEnrollment — flow-local overrides.
 *
 * MEM-7557 #7: align the shared LoadingSpinnerButton's btn-primary with the BrandSync customer
 * primary token so the flow's buttons match its themed mode tabs/cards instead of Bootstrap blue.
 * Scoped to the enrollment flow only (::deep reaches the child-component buttons under .bs-enrollment).
 */

.bs-enrollment[b-jj0fz7r49a]  .btn-primary {
    background-color: var(--color-primary-default);
    border-color: var(--color-primary-default);
    color: var(--color-primary-on-color);
}

.bs-enrollment[b-jj0fz7r49a]  .btn-primary:hover,
.bs-enrollment[b-jj0fz7r49a]  .btn-primary:focus {
    background-color: var(--color-primary-hover, var(--color-primary-default));
    border-color: var(--color-primary-hover, var(--color-primary-default));
    color: var(--color-primary-on-color);
}

/* MEM-7557 #4: collapsed step-header selection summary (subtitle under the title). */
.bs-enrollment[b-jj0fz7r49a]  .bs-enrollment__step-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
}

.bs-enrollment[b-jj0fz7r49a]  .bs-enrollment__step-header-summary {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    color: var(--color-neutrals-hover);
}
/* /Pages/Events/Enroll/Steps/EnrollmentStepHeader.razor.rz.scp.css */
/* Collapsed-header progress UI for the enrollment accordion.
   Provides a circled step index + title row with consistent flex/gap so the
   header layout is robust against string-length variance across the four
   supported languages (da/en/nb/sv). */

.bs-enrollment__step-header[b-dtbe36odtj] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    text-align: start;
}

.bs-enrollment__step-header-index[b-dtbe36odtj] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-body-color, inherit);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
}

.bs-enrollment__step-header-title[b-dtbe36odtj] {
    flex: 1 1 auto;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    overflow-wrap: anywhere;
}
/* /Pages/Events/Enroll/Steps/HotelRoomCard.razor.rz.scp.css */
/*
 * HotelRoomCard — component-scoped styles.
 *
 * BEM block: bs-hotel-room-card
 * Colors are customer-provided via CSS custom properties — no hardcoded hex values.
 * Spacing follows the 8px grid (12px allowed for component padding).
 * Mobile-first: arrival/departure pickers stack on mobile, side by side at >=768px.
 *
 * Foreground / background token pairs (for customer WCAG validation):
 *   name / price text      : var(--color-neutrals-pressed)            on var(--color-neutrals-container)
 *   description / nights   : var(--color-neutrals-hover)              on var(--color-neutrals-container)
 *   validation message     : var(--color-feedback-error-default)      on var(--color-neutrals-container)
 */

.bs-hotel-room-card[b-p8sgwcn7js] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 16px;
}

.bs-hotel-room-card__main[b-p8sgwcn7js] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bs-hotel-room-card__name[b-p8sgwcn7js] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    margin: 0;
}

.bs-hotel-room-card__description[b-p8sgwcn7js] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 21px);
    color: var(--color-neutrals-hover);
    margin: 0;
}

.bs-hotel-room-card__price[b-p8sgwcn7js] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.bs-hotel-room-card__controls[b-p8sgwcn7js] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---- arrival / departure: stacked on mobile, side by side at >=768px ---- */
.bs-hotel-room-card__dates[b-p8sgwcn7js] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
}

.bs-hotel-room-card__dates > *[b-p8sgwcn7js] {
    min-width: 0;
}

@media (min-width: 768px) {
    .bs-hotel-room-card__dates[b-p8sgwcn7js] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .bs-hotel-room-card__dates > *[b-p8sgwcn7js] {
        flex: 1 1 200px;
    }
}

.bs-hotel-room-card__nights[b-p8sgwcn7js] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    color: var(--color-neutrals-hover);
    margin: 0;
}

.bs-hotel-room-card__validation[b-p8sgwcn7js] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 21px);
    color: var(--color-feedback-error-default, var(--color-neutrals-pressed));
    margin: 0;
}
/* /Pages/Events/Enroll/Steps/ParticipantCandidateList.razor.rz.scp.css */
/*
 * ParticipantCandidateList — component-scoped styles for the shared candidate list.
 *
 * BEM block: bs-participant-picker (list/item elements).
 * These rules must live here, not on the parent pickers: Blazor scoped CSS does not reach
 * child-component markup, so the <ul>/<li> rendered by this component is only styled from its
 * own scope. Colors are customer-provided via CSS custom properties — no hardcoded hex values.
 */

.bs-participant-picker__list[b-q7vw1xj4k0] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bs-participant-picker__item[b-q7vw1xj4k0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
}

.bs-participant-picker__item:last-child[b-q7vw1xj4k0] {
    border-bottom: none;
}

/* Selected variant — row is already in the parent's selection basket; subtle highlight
   using customer-defined tokens (no hardcoded colors). */
.bs-participant-picker__item--selected[b-q7vw1xj4k0] {
    background: var(--color-primary-container, var(--color-neutrals-container));
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 8px;
}

.bs-participant-picker__details[b-q7vw1xj4k0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

/* WCAG pair: --color-neutrals-pressed on --color-neutrals-container background */
.bs-participant-picker__name[b-q7vw1xj4k0] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    font-weight: 500;
    color: var(--color-neutrals-pressed);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* WCAG pair: --color-neutrals-hover on --color-neutrals-container background */
.bs-participant-picker__email[b-q7vw1xj4k0],
.bs-participant-picker__debtor[b-q7vw1xj4k0],
.bs-participant-picker__info[b-q7vw1xj4k0] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    color: var(--color-neutrals-hover);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Pages/Events/Enroll/Steps/ParticipantCandidatePicker.razor.rz.scp.css */
/*
 * ParticipantCandidatePicker — component-scoped styles.
 *
 * BEM block: bs-participant-picker
 * Colors are customer-provided via CSS custom properties — no hardcoded hex values.
 */

.bs-participant-picker[b-2k5lujjdtm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---- message (coming soon / error) ---- */
.bs-participant-picker__message[b-2k5lujjdtm] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
}

/* ---- empty state ---- */
.bs-participant-picker__empty[b-2k5lujjdtm] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    color: var(--color-neutrals-hover);
    margin: 0;
}

/* The candidate list (__list/__item/__details/__name/__email/…) is styled in
   ParticipantCandidateList.razor.css — that markup lives in the child component, which scoped
   CSS here cannot reach. */
/* /Pages/Events/Enroll/Steps/ParticipantSelectionStep.razor.rz.scp.css */
/*
 * ParticipantSelectionStep — component-scoped styles.
 *
 * BEM block: bs-participant-step
 * Colors are customer-provided via CSS custom properties — no hardcoded hex values.
 * Spacing follows the 8px grid system (multiples of 8px).
 */

/* ---- block root ---- */
.bs-participant-step[b-dcguhq639q] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---- heading ---- */
.bs-participant-step__heading[b-dcguhq639q] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-heading-sm-size, 24px);
    line-height: var(--font-heading-sm-line-height, 32px);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    margin: 0;
}

/* ---- empty state (no modes available) ---- */
.bs-participant-step__empty[b-dcguhq639q] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    color: var(--color-neutrals-hover);
    margin: 0;
}

/* ---- auto-select self description ---- */
.bs-participant-step__auto-self[b-dcguhq639q] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    margin: 0;
}

/* ---- action wrapper (auto-self confirm button area) ---- */
.bs-participant-step__action[b-dcguhq639q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* ---- category notice (full / waitlist hint near confirm button) ---- */
.bs-participant-step__category-notice[b-dcguhq639q] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    color: var(--color-neutrals-hover);
    margin: 0;
}

/* ---- mode tab list ---- */
.bs-participant-step__modes[b-dcguhq639q] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bs-participant-step__mode-tab[b-dcguhq639q] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    padding: 8px 16px;
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    background: var(--color-neutrals-container);
    color: var(--color-neutrals-default);
    cursor: pointer;
    border-radius: 4px;
}

.bs-participant-step__mode-tab--active[b-dcguhq639q] {
    background: var(--color-primary-default);
    color: var(--color-primary-on-color);
    border-color: var(--color-primary-default);
}

/* ---- mode panel ---- */
.bs-participant-step__mode-panel[b-dcguhq639q] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---- self panel ---- */
.bs-participant-step__self[b-dcguhq639q] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---- per-category capacity panel ---- */
.bs-participant-step__category-capacities[b-dcguhq639q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bs-participant-step__category-capacity[b-dcguhq639q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 16px;
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-radius: 4px;
    background: var(--color-neutrals-container);
}

/* Available variant — no special colour treatment; uses container default */
.bs-participant-step__category-capacity--available[b-dcguhq639q] {
    /* intentionally inherits the base .bs-participant-step__category-capacity styles */
}

/* Full variant — subtle visual distinction using customer-defined semantic token */
.bs-participant-step__category-capacity--full[b-dcguhq639q] {
    border-color: var(--color-feedback-warning-default, var(--color-neutrals-container-hover));
    background: var(--color-feedback-warning-container, var(--color-neutrals-container));
}

.bs-participant-step__category-capacity__name[b-dcguhq639q] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    font-weight: 500;
    color: var(--color-neutrals-pressed);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-participant-step__category-capacity__status[b-dcguhq639q] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 20px);
    color: var(--color-neutrals-hover);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- selection basket (multi-participant picker modes) ---- */
.bs-participant-step__basket[b-dcguhq639q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-radius: 4px;
    background: var(--color-neutrals-container);
}

.bs-participant-step__basket-heading[b-dcguhq639q] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    margin: 0;
}

.bs-participant-step__basket-hint[b-dcguhq639q] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    color: var(--color-neutrals-hover);
    margin: 0;
}

.bs-participant-step__basket-list[b-dcguhq639q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-self: stretch;
}

.bs-participant-step__basket-item[b-dcguhq639q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.bs-participant-step__basket-name[b-dcguhq639q] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    color: var(--color-neutrals-default);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-participant-step__basket-remove[b-dcguhq639q] {
    flex-shrink: 0;
    padding: 0;
}

.bs-participant-step__include-self[b-dcguhq639q] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
}
/* /Pages/Events/Enroll/Steps/SearchAndEnrollPicker.razor.rz.scp.css */
/*
 * SearchAndEnrollPicker — component-scoped styles.
 *
 * BEM block: bs-search-and-enroll (form + results)
 * Reuses bs-participant-picker__* classes for the result list (BEM mix).
 * Colors are customer-provided via CSS custom properties — no hardcoded hex values.
 */

.bs-search-and-enroll[b-85q79bltqc] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---- form layout ---- */
.bs-search-and-enroll__fields[b-85q79bltqc] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bs-search-and-enroll__field[b-85q79bltqc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* WCAG pair: --color-neutrals-default on --color-neutrals-container background */
.bs-search-and-enroll__label[b-85q79bltqc] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-weight: 500;
    font-size: var(--font-caption-lg-size, 16px);
    line-height: var(--font-caption-lg-line-height, 24px);
    color: var(--color-neutrals-default);
}

.bs-search-and-enroll__input[b-85q79bltqc] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
}

.bs-search-and-enroll__actions[b-85q79bltqc] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- error banner ---- */
.bs-search-and-enroll__error[b-85q79bltqc] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
}

/* ---- empty state ---- */
.bs-search-and-enroll__empty[b-85q79bltqc] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    color: var(--color-neutrals-hover);
    margin: 0;
}
/* /Pages/Events/Enroll/Steps/ServiceCard.razor.rz.scp.css */
/*
 * ServiceCard — component-scoped styles.
 *
 * BEM block: bs-service-card
 * Colors are customer-provided via CSS custom properties — no hardcoded hex values.
 * Spacing follows the 8px grid (12px allowed for component padding).
 *
 * Mobile-first: base styles stack the card into a single column (name/description,
 * then a price + stepper row). At >=768px it becomes the side-by-side row layout
 * (name/description | price | quantity stepper).
 *
 * Foreground / background token pairs (for customer WCAG validation):
 *   name / description text  : var(--color-neutrals-pressed|hover)  on  var(--color-neutrals-container)
 *   unit price text          : var(--color-neutrals-pressed)        on  var(--color-neutrals-container)
 *   stepper button glyph     : var(--color-neutrals-default)        on  var(--color-neutrals-container)
 *   "Included" text          : var(--color-neutrals-hover)          on  var(--color-neutrals-container)
 */

/* ---- mobile-first base: single stacked column ---- */
.bs-service-card[b-3cjz56u04z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
}

.bs-service-card__main[b-3cjz56u04z] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bs-service-card__name-row[b-3cjz56u04z] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bs-service-card__name[b-3cjz56u04z] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    font-weight: 500;
    color: var(--color-neutrals-pressed);
}

.bs-service-card__description[b-3cjz56u04z] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 21px);
    color: var(--color-neutrals-hover);
    margin: 0;
}

/* On mobile, price + stepper share one justified row beneath the name/description. */
.bs-service-card__price-controls[b-3cjz56u04z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.bs-service-card__price[b-3cjz56u04z] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bs-service-card__controls[b-3cjz56u04z] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* ---- grouped quantity stepper ---- */
.bs-service-card__stepper[b-3cjz56u04z] {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-neutrals-container);
}

.bs-service-card__step[b-3cjz56u04z] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-neutrals-default);
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.bs-service-card__step:hover:not(:disabled)[b-3cjz56u04z] {
    background: var(--color-neutrals-container-hover);
}

.bs-service-card__step:focus-visible[b-3cjz56u04z] {
    outline: 2px solid var(--bs-focus-ring-color, var(--color-primary-default));
    outline-offset: -2px;
}

.bs-service-card__step:disabled[b-3cjz56u04z] {
    opacity: 0.4;
    cursor: not-allowed;
}

.bs-service-card__step--decrement[b-3cjz56u04z] {
    border-inline-end: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
}

.bs-service-card__step--increment[b-3cjz56u04z] {
    border-inline-start: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
}

.bs-service-card__quantity[b-3cjz56u04z] {
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    font-variant-numeric: tabular-nums;
}

.bs-service-card__included[b-3cjz56u04z] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    color: var(--color-neutrals-hover);
    white-space: nowrap;
}

/* ---- >=768px: promote to side-by-side row (name/desc | price | stepper) ---- */
@media (min-width: 768px) {
    .bs-service-card[b-3cjz56u04z] {
        display: grid;
        grid-template-columns: 1fr auto auto;
        align-items: center;
        column-gap: 16px;
        row-gap: 8px;
    }

    /* The wrapper dissolves so price and controls drop into their own grid columns. */
    .bs-service-card__price-controls[b-3cjz56u04z] {
        display: contents;
    }

    .bs-service-card__price[b-3cjz56u04z] {
        text-align: end;
    }
}
/* /Pages/Events/Enroll/Steps/ServicesStep.razor.rz.scp.css */
/*
 * ServicesStep — component-scoped styles.
 *
 * BEM block: bs-services-step
 * Colors are customer-provided via CSS custom properties — no hardcoded hex values.
 * Spacing follows the 8px grid (12px allowed for component padding).
 * Mobile-first: single fluid column on mobile; the summary bar promotes to a
 * justified row at >=768px. No fixed pixel widths, so no horizontal scroll at 360px.
 *
 * Foreground / background token pairs (for customer WCAG validation):
 *   step / group headings   : var(--color-neutrals-pressed)      on  page background
 *   participant card surface : var(--color-neutrals-default)      on  var(--color-neutrals-container)
 *   group divider           : var(--bs-border-color / --color-neutrals-container-hover)
 *   summary total text      : var(--color-neutrals-pressed)      on  var(--color-neutrals-container)
 *   subtotal label / value  : var(--color-neutrals-hover|pressed) on  var(--color-neutrals-container)
 */

.bs-services-step[b-ogdz3iok5u] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bs-services-step__heading[b-ogdz3iok5u] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-heading-sm-size, 24px);
    line-height: var(--font-heading-sm-line-height, 32px);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    margin: 0;
}

.bs-services-step__empty[b-ogdz3iok5u] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    color: var(--color-neutrals-hover);
    margin: 0;
}

/* ---- outlined participant card ---- */
.bs-services-step__participant[b-ogdz3iok5u] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-radius: 12px;
    background: var(--color-neutrals-container);
}

.bs-services-step__participant-header[b-ogdz3iok5u] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.bs-services-step__participant-name[b-ogdz3iok5u] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-lg-size, 18px);
    line-height: var(--font-body-lg-line-height, 27px);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    margin: 0;
}

.bs-services-step__participant-subtotal[b-ogdz3iok5u] {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.bs-services-step__participant-subtotal-label[b-ogdz3iok5u] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 21px);
    color: var(--color-neutrals-hover);
}

.bs-services-step__participant-subtotal-value[b-ogdz3iok5u] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    font-variant-numeric: tabular-nums;
}

/* ---- service group with hairline divider above the title ---- */
.bs-services-step__group[b-ogdz3iok5u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
}

/* The first group inside a card sits directly under the header — no extra rule above it. */
.bs-services-step__participant-header + .bs-services-step__group[b-ogdz3iok5u] {
    padding-top: 0;
    border-top: none;
}

.bs-services-step__group-title[b-ogdz3iok5u] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    margin: 0;
}

/* ---- list of cards — no browser bullets ---- */
.bs-services-step__list[b-ogdz3iok5u] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bs-services-step__list-item[b-ogdz3iok5u] {
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-radius: 8px;
    background: var(--color-neutrals-container);
}

/* ---- inline overlap warnings beneath the Sessions group ---- */
.bs-services-step__overlaps[b-ogdz3iok5u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

/* ---- live total summary bar: stacked on mobile, justified row at >=768px ---- */
.bs-services-step__summary[b-ogdz3iok5u] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 24px;
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-radius: 12px;
    background: var(--color-neutrals-container);
}

@media (min-width: 768px) {
    .bs-services-step__summary[b-ogdz3iok5u] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
}

.bs-services-step__summary-label[b-ogdz3iok5u] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-lg-size, 18px);
    line-height: var(--font-body-lg-line-height, 27px);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
}

.bs-services-step__summary-value[b-ogdz3iok5u] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bs-services-step__summary-amount[b-ogdz3iok5u] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-heading-sm-size, 24px);
    line-height: var(--font-heading-sm-line-height, 32px);
    font-weight: 700;
    color: var(--color-neutrals-pressed);
    font-variant-numeric: tabular-nums;
}

/* Dim the total while a fresh quote is in flight so the value reads as provisional. */
.bs-services-step__summary-amount--stale[b-ogdz3iok5u] {
    opacity: 0.5;
}

.bs-services-step__summary-spinner[b-ogdz3iok5u] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-top-color: var(--color-primary-default);
    border-radius: 50%;
    animation: bs-services-step__spin-b-ogdz3iok5u 0.7s linear infinite;
}

@keyframes bs-services-step__spin-b-ogdz3iok5u {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .bs-services-step__summary-spinner[b-ogdz3iok5u] {
        animation-duration: 2s;
    }
}
/* /Pages/Events/Enroll/Steps/SessionPicker.razor.rz.scp.css */
/*
 * SessionPicker — component-scoped styles.
 *
 * BEM block: bs-session-picker
 * Colors are customer-provided via CSS custom properties — no hardcoded hex values.
 * Spacing follows the 8px grid (12px allowed for component padding).
 *
 * Foreground / background token pairs (for customer WCAG validation):
 *   option name / time / price : var(--color-neutrals-pressed|hover) on var(--color-neutrals-container)
 *   checked option surface     : var(--color-neutrals-default)       on var(--color-primary-container)
 *   sold-out option text       : var(--color-neutrals-hover)         on var(--color-neutrals-container)
 *
 * Sold-out and checked states are conveyed by a text badge + border, never by colour alone.
 */

.bs-session-picker[b-labxg1hgwr] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bs-session-picker__group[b-labxg1hgwr] {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.bs-session-picker__legend[b-labxg1hgwr] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    margin: 0 0 8px 0;
    padding: 0;
    float: none;
    width: auto;
}

.bs-session-picker__required[b-labxg1hgwr] {
    color: var(--color-feedback-error-default, var(--color-neutrals-pressed));
    margin-inline-start: 4px;
}

.bs-session-picker__options[b-labxg1hgwr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---- selectable option card ---- */
.bs-session-picker__option[b-labxg1hgwr] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-radius: 8px;
    background: var(--color-neutrals-container);
    cursor: pointer;
}

.bs-session-picker__option:hover[b-labxg1hgwr] {
    background: var(--color-neutrals-container-hover);
}

.bs-session-picker__option:has(.bs-session-picker__radio:focus-visible)[b-labxg1hgwr] {
    outline: 2px solid var(--bs-focus-ring-color, var(--color-primary-default));
    outline-offset: 2px;
}

.bs-session-picker__option--checked[b-labxg1hgwr] {
    border-color: var(--color-primary-default);
    background: var(--color-primary-container, var(--color-neutrals-container));
}

.bs-session-picker__option--sold-out[b-labxg1hgwr] {
    cursor: not-allowed;
    opacity: 0.6;
}

.bs-session-picker__option--sold-out:hover[b-labxg1hgwr] {
    background: var(--color-neutrals-container);
}

.bs-session-picker__radio[b-labxg1hgwr] {
    margin-top: 4px;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    cursor: inherit;
}

.bs-session-picker__option-body[b-labxg1hgwr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bs-session-picker__option-header[b-labxg1hgwr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bs-session-picker__option-name[b-labxg1hgwr] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    font-weight: 500;
    color: var(--color-neutrals-pressed);
}

.bs-session-picker__option-time[b-labxg1hgwr],
.bs-session-picker__option-description[b-labxg1hgwr] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-caption-md-size, 14px);
    line-height: var(--font-caption-md-line-height, 21px);
    color: var(--color-neutrals-hover);
}

.bs-session-picker__option-price[b-labxg1hgwr] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 16px);
    line-height: var(--font-body-md-regular-line-height, 24px);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    font-variant-numeric: tabular-nums;
}
/* /Pages/Events/Enroll/Steps/SessionServicePicker.razor.rz.scp.css */
/*
 * SessionServicePicker — component-scoped styles.
 *
 * BEM block: bs-session-service-picker
 * Sub-course services are indented under the selected session so the visual
 * hierarchy makes their dependency on the session explicit.
 * Spacing follows the 8px grid; no hardcoded colors.
 */

.bs-session-service-picker[b-3dnopl6t2g] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-inline-start: 16px;
    border-inline-start: 2px solid var(--bs-border-color, var(--color-neutrals-container-hover));
}

.bs-session-service-picker__list[b-3dnopl6t2g] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bs-session-service-picker__item[b-3dnopl6t2g] {
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-radius: 8px;
    background: var(--color-neutrals-container);
}
/* /Pages/Events/PendingRefundsCards.razor.rz.scp.css */
.payer-card__header--active[b-dpbsgpyu2o] {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-emphasis);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.payer-participants[b-dpbsgpyu2o] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .payer-participants[b-dpbsgpyu2o] {
        transition: none;
    }
}

.payer-participants.expanded[b-dpbsgpyu2o] {
    grid-template-rows: 1fr;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

.payer-participants__inner[b-dpbsgpyu2o] {
    overflow: hidden;
    min-height: 0;
}

.payer-participants__inner > div + div[b-dpbsgpyu2o] {
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}
/* /Pages/MyCompany/Profile.razor.rz.scp.css */
/* My Company Profile page — BEM block: my-company-profile
 * All spacing on the 8px grid. Colors from CSS token variables only — never hardcode hex.
 */

.my-company-profile[b-jh6vu6xr3c] {
    padding-top: 48px;
    padding-bottom: 48px;
}

.my-company-profile__header[b-jh6vu6xr3c] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.my-company-profile__company-selector[b-jh6vu6xr3c] {
    width: 100%;
}

.my-company-profile__title[b-jh6vu6xr3c] {
    font-size: 24px;
    line-height: 36px;
    font-weight: 600;
    color: var(--color-neutrals-default);
    margin: 0;
}

.my-company-profile__content[b-jh6vu6xr3c] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Section card — used by content sections added in subsequent stories */
.my-company-profile__section[b-jh6vu6xr3c] {
    background-color: var(--color-primary-container);
    border-radius: var(--brand-border-radius, 16px);
    box-shadow: var(--shadow-card);
    padding: 24px;
}

.my-company-profile__section-title[b-jh6vu6xr3c] {
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    color: var(--color-neutrals-default);
    margin: 0 0 16px 0;
}

.my-company-profile__skeleton-card[b-jh6vu6xr3c] {
    background-color: var(--color-2-container);
    border-radius: var(--brand-border-radius, 16px);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.my-company-profile__skeleton-header[b-jh6vu6xr3c] {
    height: 48px;
    background-color: var(--color-1-container);
}

.my-company-profile__skeleton-body[b-jh6vu6xr3c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
}
/* /Pages/MyGroups/MyCommunityGroups.razor.rz.scp.css */
.communitygroup-card-image-max-height[b-1rm18n34b9]{
    height:400px;
}

.communitygroup-card-image-object-fit[b-1rm18n34b9]{
    object-fit:contain;
}
/* /Pages/MyProfile/MyInvoices.razor.rz.scp.css */
.my-invoices__skeleton[b-8ew5upf5l9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.my-invoices__skeleton-card[b-8ew5upf5l9] {
    background: var(--color-2-container);
    border-radius: var(--brand-border-radius, 16px);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.my-invoices__skeleton-header[b-8ew5upf5l9] {
    height: 48px;
    background-color: var(--color-1-container);
}

.my-invoices__skeleton-body[b-8ew5upf5l9] {
    min-height: 464px;
    background: linear-gradient(
        90deg,
        var(--color-neutrals-container-hover) 25%,
        var(--color-neutrals-container-focused) 50%,
        var(--color-neutrals-container-hover) 75%
    );
    background-size: 200% 100%;
    animation: dashboard-shimmer 1.5s infinite;
}
/* /Pages/MyProfile/TrustCenter.razor.rz.scp.css */
.terms-scroll-container[b-z1nobwrc2l] {
    max-height: 300px;
    overflow-y: auto;
}