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

/* /Components/Shared/EmptyState.razor.rz.scp.css */
.empty-state__icon[b-qe27x6dvib] {
    font-size: 48px;
}
/* /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);
}

/* Arrangement context header — what the member is enrolling in (name + dates + info toggle). */
.bs-enrollment__arrangement[b-jj0fz7r49a] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.bs-enrollment__arrangement-name[b-jj0fz7r49a] {
    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);
    /* Rendered as <h2> for document structure; reset the UA heading margin. */
    margin: 0;
}

.bs-enrollment__arrangement-dates[b-jj0fz7r49a] {
    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);
}

.bs-enrollment__arrangement-info-toggle[b-jj0fz7r49a] {
    align-self: flex-start;
    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);
}

/* 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/CompanionPicker.razor.rz.scp.css */
/*
 * CompanionPicker — component-scoped styles (MEM-7895).
 *
 * BEM block: bs-companion-picker
 * Colors are customer-provided via CSS custom properties — no hardcoded hex values.
 * Spacing follows the 8px grid; rem for typography. Mobile-first single column;
 * the name fields promote to two columns at >=768px.
 */

.bs-companion-picker[b-ndtdjoy5ou] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Committed companions collapse to compact pills that wrap onto shared rows, so a
   participant with several companions stays scannable (Concept-C chips). */
.bs-companion-picker__chips[b-ndtdjoy5ou] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Surface (pill shape + primary-container background, WCAG pair) comes from the shared
   global .bs-pill utility on the same element. Only the asymmetric padding is
   component-specific: tighter on the right so the inline action buttons sit neatly. */
.bs-companion-picker__chip[b-ndtdjoy5ou] {
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
}

/* Single line; a long companion name truncates with an ellipsis rather than wrapping
   the pill onto multiple lines (matches the dashboard card-title pattern). The chip can
   shrink (min-width:0) so it never forces horizontal scroll on a narrow viewport. */
.bs-companion-picker__chip-label[b-ndtdjoy5ou] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-family, Roboto, sans-serif);
    min-width: 0;
    overflow: hidden;
}

.bs-companion-picker__chip-type[b-ndtdjoy5ou] {
    flex-shrink: 0;
    font-size: var(--font-caption-md-size, 0.875rem);
    line-height: var(--font-caption-md-line-height, 1.5);
    color: var(--color-primary-default);
    font-weight: 600;
}

.bs-companion-picker__chip-name[b-ndtdjoy5ou] {
    font-size: var(--font-caption-md-size, 0.875rem);
    line-height: var(--font-caption-md-line-height, 1.5);
    color: var(--color-neutrals-pressed);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.bs-companion-picker__chip-actions[b-ndtdjoy5ou] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Compact pill actions: 44px-tall tap target preserved via min-height, kept tight
   horizontally so they sit neatly inside the chip. */
.bs-companion-picker__chip-action[b-ndtdjoy5ou] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    background: none;
    border: none;
    border-radius: 100px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-caption-md-size, 0.875rem);
    line-height: var(--font-caption-md-line-height, 1.5);
    font-weight: 500;
    color: var(--color-primary-default);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.bs-companion-picker__chip-action:hover[b-ndtdjoy5ou] {
    background: var(--color-primary-container-hover);
    color: var(--color-primary-hover);
}

.bs-companion-picker__chip-action:focus-visible[b-ndtdjoy5ou] {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 2px;
}

.bs-companion-picker__chip-action--remove[b-ndtdjoy5ou] {
    color: var(--color-error-default);
}

.bs-companion-picker__chip-action--remove:hover[b-ndtdjoy5ou] {
    background: var(--color-error-container);
    color: var(--color-error-default);
}

.bs-companion-picker__chip-action--remove:focus-visible[b-ndtdjoy5ou] {
    outline: 2px solid var(--color-error-default);
    outline-offset: 2px;
}

/* The add/edit form reads as an inline guided panel: a subtly tinted surface with a
   primary-tinted edge to set it apart from the surrounding card. */
.bs-companion-picker__form[b-ndtdjoy5ou] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-primary-container-hover);
    border-radius: 0.5rem;
    background: var(--color-neutrals-container-focused);
}

.bs-companion-picker__field[b-ndtdjoy5ou] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bs-companion-picker__field-row[b-ndtdjoy5ou] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .bs-companion-picker__field-row[b-ndtdjoy5ou] {
        flex-direction: row;
    }

    .bs-companion-picker__field-row > *[b-ndtdjoy5ou] {
        flex: 1 1 0;
    }
}
/* /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;
}

/* Keeps the room name and the mandatory badge on one line (the <h5> is block-level). */
.bs-hotel-room-card__name-row[b-p8sgwcn7js] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.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;
}

/* The select toggle (checkbox + label) aligns on a single baseline-centred row.
   Inter-control spacing comes from __controls' gap. */
.bs-hotel-room-card__select[b-p8sgwcn7js] {
    display: flex;
    align-items: center;
    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.
 */

/* Client-side filter shown above long candidate lists. */
.bs-participant-picker__filter[b-q7vw1xj4k0] {
    margin-bottom: 1rem;
}

.bs-participant-picker__filter-input[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);
}

.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;
}

/* Already-enrolled variant — the candidate cannot be picked again; dim the row and show a
   non-interactive status label instead of the pick button. */
.bs-participant-picker__item--disabled .bs-participant-picker__details[b-q7vw1xj4k0] {
    opacity: 0.55;
}

.bs-participant-picker__already-enrolled[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);
    white-space: nowrap;
    flex-shrink: 0;
}

.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;
}

/* Right-align the self-path confirm button, matching the basket and the flow's other steps.
   Its parents (.bs-participant-step__self / __action) lay children out in a column, so the
   button needs its own full-width row wrapper to push it to the trailing edge. */
.bs-participant-step__actions[b-dcguhq639q] {
    align-self: stretch;
    display: flex;
    justify-content: flex-end;
}

/* ---- 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;
}

/* ---- already-enrolled info box (self path blocked because user is already enrolled) ---- */
/* Relies on the alert alert-info utility for surface/colour; only the default bottom margin
   is reset so the box spaces via the flex container gap rather than doubling it. */
.bs-participant-step__already-enrolled[b-dcguhq639q] {
    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;
}

/* Mirror the primary button's on-primary tokens exactly: --color-primary-on-color is not a
   defined token, so the active tab text rendered with no reliable colour (weaker contrast than
   the primary "Fortsæt" button). Use the same --color-neutrals-container text the primary button uses. */
.bs-participant-step__mode-tab--active[b-dcguhq639q] {
    background: var(--color-primary-default);
    color: var(--color-neutrals-container);
    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);
}

/* Right-align the basket's primary continue button, matching the flow's other steps.
   The basket lays its children out flex-start, so the button needs its own full-width
   row wrapper to push it to the trailing edge. */
.bs-participant-step__basket-actions[b-dcguhq639q] {
    align-self: stretch;
    display: flex;
    justify-content: flex-end;
}

.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;
}

/* Left column of a basket row: participant name plus, when several categories exist,
   the per-participant category selector. Mobile-first: the name and selector stack
   vertically; from the tablet breakpoint up they sit on one line so the row reads as
   "<name> — <category>" without the selector consuming the full row width. */
.bs-participant-step__basket-info[b-dcguhq639q] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

@media (min-width: 768px) {
    .bs-participant-step__basket-info[b-dcguhq639q] {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }

    /* On the shared row the name takes the remaining space and the selector keeps its bounded width. */
    .bs-participant-step__basket-info .bs-participant-step__basket-name[b-dcguhq639q] {
        flex: 1 1 auto;
    }
}

.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;
}

/* The per-participant category selector. Full width when stacked on mobile; bounded to a
   sensible width once it shares the row with the name at >=768px so it does not full-bleed. */
.bs-participant-step__basket-category[b-dcguhq639q] {
    width: 100%;
}

@media (min-width: 768px) {
    .bs-participant-step__basket-category[b-dcguhq639q] {
        flex: 0 1 auto;
        width: auto;
        min-width: 200px;
        max-width: 280px;
    }
}

.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/QuestionsStep.razor.rz.scp.css */
/*
 * QuestionsStep — component-scoped styles.
 *
 * BEM block: bs-questions-step
 * Colors are customer-provided via CSS custom properties — no hardcoded hex values.
 * Spacing follows the 8px grid system (multiples of 8px).
 * Mirrors ServicesStep so both steps share the same heading scale, outlined participant
 * card, section rhythm and navigation-row treatment.
 *
 * Foreground / background token pairs (for customer WCAG validation):
 *   step / participant headings : var(--color-neutrals-pressed)  on  page / card background
 *   participant card surface    : var(--color-neutrals-default)  on  var(--color-neutrals-container)
 *   empty-state text            : var(--color-neutrals-hover)    on  page background
 */

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

.bs-questions-step__heading[b-cz9d0em2yx] {
    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-questions-step__empty[b-cz9d0em2yx] {
    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 (matches ServicesStep) ---- */
.bs-questions-step__participant[b-cz9d0em2yx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-radius: 12px;
    background: var(--color-neutrals-container);
}

.bs-questions-step__participant-name[b-cz9d0em2yx] {
    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;
}

/* ---- list of question renderers — no browser bullets ---- */
.bs-questions-step__list[b-cz9d0em2yx] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bs-questions-step__list-item[b-cz9d0em2yx] {
    margin: 0;
}

/* ---- step navigation — buttons keep an 8px+ gap if they ever wrap ---- */
.bs-questions-step__nav[b-cz9d0em2yx] {
    gap: 16px;
}
/* /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 ----
   Mobile-first: medlemsnummer and fødselsdag stack; from the tablet breakpoint up they share
   one row, each taking an equal half. */
.bs-search-and-enroll__fields[b-85q79bltqc] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .bs-search-and-enroll__fields[b-85q79bltqc] {
        flex-direction: row;
    }

    .bs-search-and-enroll__field[b-85q79bltqc] {
        flex: 1 1 0;
    }
}

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

/* 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)
 *   participant header divider: var(--bs-border-color / --color-neutrals-container-hover)
 *   subtotal pill           : var(--color-primary-default)        on  var(--color-primary-container)
 *   receipt header band     : var(--color-neutrals-pressed)       on  var(--color-primary-container)
 *   receipt line text/amount : var(--color-neutrals-default|pressed) on var(--color-neutrals-container)
 *   summary total bar       : var(--color-neutrals-pressed)       on  var(--color-primary-container)
 *
 * Elevation uses the shared --shadow-card token (no hardcoded shadows).
 */

.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;
}

/* ---- elevated 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: var(--brand-border-radius, 16px);
    background: var(--color-neutrals-container);
    box-shadow: var(--shadow-card);
}

/* The card header reads as a distinct band so each participant group is easy to
   scan: name on the left, running subtotal on the right. */
.bs-services-step__participant-header[b-ogdz3iok5u] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
}

.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;
}

/* Surface (pill shape + primary-container background) comes from the shared global
   .bs-pill utility on the same element; this only sets baseline alignment so the
   label and value sit on a shared baseline. */
.bs-services-step__participant-subtotal[b-ogdz3iok5u] {
    align-items: baseline;
}

.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-primary-default);
}

.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: 700;
    color: var(--color-primary-default);
    font-variant-numeric: tabular-nums;
}

/* ---- service group; sits in the flex gap, no own divider (the header band and
   the card gap already separate the first group, and the gap separates the rest) ---- */
.bs-services-step__group[b-ogdz3iok5u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.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);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bs-services-step__list-item:hover[b-ogdz3iok5u] {
    border-color: var(--color-primary-container-hover);
    box-shadow: var(--shadow-card);
}

/* ---- 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(--color-primary-container-hover);
    border-radius: var(--brand-border-radius, 16px);
    background: var(--color-primary-container);
    box-shadow: var(--shadow-card);
}

@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;
    }
}

/* ---- per-participant priced receipt (MEM-7895 Phase 2) ----
   Presented as a distinct, lightly tinted block so the confirmed server-priced
   breakdown stands apart from the editable cards above it. The title acts as a
   receipt header band (light primary surface + dark text — no all-caps). */
.bs-services-step__receipt[b-ogdz3iok5u] {
    gap: 0;
    border: 1px solid var(--color-primary-container-hover);
    border-radius: 8px;
    background: var(--color-neutrals-container);
    overflow: hidden;
}

/* WCAG pair: --color-neutrals-pressed text on --color-primary-container background */
.bs-services-step__receipt .bs-services-step__group-title[b-ogdz3iok5u] {
    padding: 8px 16px;
    background: var(--color-primary-container);
    color: var(--color-neutrals-pressed);
}

.bs-services-step__receipt-lines[b-ogdz3iok5u] {
    list-style: none;
    margin: 0;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bs-services-step__receipt-line[b-ogdz3iok5u] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    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);
}

/* Dotted leader between description and amount makes each line easy to read across. */
.bs-services-step__receipt-line:not(:last-child)[b-ogdz3iok5u] {
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--color-neutrals-container-pressed);
}

.bs-services-step__receipt-line-amount[b-ogdz3iok5u] {
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- step navigation — buttons keep an 8px+ gap if they ever wrap (matches Payer/Questions) ---- */
.bs-services-step__nav[b-ogdz3iok5u] {
    gap: 16px;
}
/* /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/ManualPaymentRefundsCards.razor.rz.scp.css */
/* Outer arrangement card */
.card[b-r2vgeqo9gv] {
    box-shadow: var(--shadow-card);
    border-radius: var(--brand-border-radius, 16px);
    border: none;
}

.manual-refund-card[b-r2vgeqo9gv] {
    border: 1px solid var(--color-border, var(--bs-border-color));
    border-radius: 8px;
    overflow: hidden;
}

/* Desktop: single row — info grows, amount / button / chevron stay right */
.manual-refund-card__header[b-r2vgeqo9gv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    cursor: pointer;
    user-select: none;
}

.manual-refund-card__header:hover[b-r2vgeqo9gv] {
    background-color: var(--bs-primary-bg-subtle);
}

.manual-refund-card__header--active[b-r2vgeqo9gv] {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-emphasis);
}

.manual-refund-card__info[b-r2vgeqo9gv]   { flex: 1 1 0; min-width: 0; }
.manual-refund-card__name[b-r2vgeqo9gv]   { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manual-refund-card__amount[b-r2vgeqo9gv] { flex-shrink: 0; order: 2; }
.manual-refund-card__btn[b-r2vgeqo9gv]    { flex-shrink: 0; order: 3; }
.manual-refund-card__chevron[b-r2vgeqo9gv]{ order: 4; }

/*
 * Mobile: three rows
 * Row 1: [info ................... chevron]
 * Row 2: [amount]
 * Row 3: [button full-width]
 */
@media (max-width: 575px) {
    .manual-refund-card__header[b-r2vgeqo9gv]  { flex-wrap: wrap; align-items: flex-start; }
    .manual-refund-card__info[b-r2vgeqo9gv]    { flex: 1 1 auto; order: 1; }
    .manual-refund-card__chevron[b-r2vgeqo9gv] { order: 2; align-self: center; }
    .manual-refund-card__amount[b-r2vgeqo9gv]  { order: 3; width: 100%; }
    .manual-refund-card__btn[b-r2vgeqo9gv]     { order: 4; width: 100%; }
}

.manual-refund-card__body.expanded[b-r2vgeqo9gv] {
    border-top: var(--bs-border-width) solid var(--color-border, var(--bs-border-color));
}
/* /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.expanded[b-dpbsgpyu2o] {
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

.payer-participants__inner > div + div[b-dpbsgpyu2o] {
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}
/* /Pages/Membership/MyMemberships.razor.rz.scp.css */
/* /Pages/MyCompany/FeeAmountRegistration.razor.rz.scp.css */
.fee-amount-registration__company-toggle[b-ziowp8upvm] {
    color: inherit;
}

.fee-amount-registration__current-period-card[b-ziowp8upvm] {
    border-width: 2px !important;
}
/* /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/MyFamily/MyFamilyRelations.razor.rz.scp.css */
.my-family-relations__header[b-9ov7e665a5] {
    margin-bottom: 24px;
}

.my-family-relations__title[b-9ov7e665a5] {
    font-size: 24px;
    line-height: 36px;
    font-weight: 600;
    margin: 0;
}

.my-family-relations__list[b-9ov7e665a5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Card header: name + badge inline */

.my-family-relations__card-header[b-9ov7e665a5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.my-family-relations__card-name[b-9ov7e665a5] {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    margin: 0;
}

.my-family-relations__badge[b-9ov7e665a5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 16px;
    padding: 2px 8px;
    border-radius: 12px;
    background-color: var(--color-neutrals-container);
    color: var(--color-neutrals-subtle);
}

.my-family-relations__badge--warning[b-9ov7e665a5] {
    background-color: var(--color-warning-container);
    color: var(--color-warning-on-container);
}

.my-family-relations__end-date[b-9ov7e665a5] {
    margin-bottom: 16px;
}

/* Contact info list */

.my-family-relations__contact-list[b-9ov7e665a5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .my-family-relations__list[b-9ov7e665a5] {
        align-items: flex-start;
    }

    .my-family-relations__contact-list[b-9ov7e665a5] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 24px;
    }
}

.my-family-relations__contact-item[b-9ov7e665a5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 24px;
}

.my-family-relations__contact-item--full-row[b-9ov7e665a5] {
    flex-basis: 100%;
}

.my-family-relations__contact-item i[b-9ov7e665a5] {
    color: var(--color-primary);
    font-size: 16px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

/* Address section */

.my-family-relations__address-section[b-9ov7e665a5] {
    margin-top: 8px;
}

.my-family-relations__address-toggle[b-9ov7e665a5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary);
    cursor: pointer;
    line-height: 24px;
}

.my-family-relations__address-toggle:hover[b-9ov7e665a5] {
    text-decoration: underline;
}

.my-family-relations__address[b-9ov7e665a5] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    font-size: 14px;
    line-height: 24px;
}

.my-family-relations__address i[b-9ov7e665a5] {
    color: var(--color-primary);
    font-size: 16px;
    flex-shrink: 0;
}

/* Skeleton loading */

.my-family-relations__skeleton-card[b-9ov7e665a5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    border-radius: 4px;
    background-color: var(--color-neutrals-container);
}

.skeleton-line[b-9ov7e665a5] {
    height: 16px;
    border-radius: 4px;
    background-color: var(--color-neutrals-border);
    animation: skeleton-pulse-b-9ov7e665a5 1.4s ease-in-out infinite;
}

.skeleton-line--short[b-9ov7e665a5] {
    width: 40%;
}

.skeleton-line--medium[b-9ov7e665a5] {
    width: 65%;
}

@keyframes skeleton-pulse-b-9ov7e665a5 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-line[b-9ov7e665a5] {
        animation: none;
    }
}

/* /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;
}