@import '_content/Membercare.SelfService.Web.Components/Membercare.SelfService.Web.Components.ispqu61r2o.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/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/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;
}

.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;
}
/* /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/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/TrustCenter.razor.rz.scp.css */
.terms-scroll-container[b-z1nobwrc2l] {
    max-height: 300px;
    overflow-y: auto;
}