@import '_content/Membercare.SelfService.Web.Components/Membercare.SelfService.Web.Components.7163fy0pzz.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__) — mobile-first; colors are customer-provided semantic
   tokens (never hardcoded hex); all sizes in rem on the 8px grid. */

/* WCAG pair: --color-neutrals-default text on --color-neutrals-container surface. */
.coming-event-card[b-6bbvpm929l] {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px */
    background-color: var(--color-neutrals-container);
    border-radius: var(--brand-border-radius, 1rem);
    box-shadow: var(--shadow-card);
    padding: 1rem; /* 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));
}

/* Summary row: compact date badge + the main text column. Horizontal at every width — the badge is
   small enough to sit beside the text on the narrowest phone. */
.coming-event-card__summary[b-6bbvpm929l] {
    display: flex;
    align-items: flex-start;
    gap: 1rem; /* 16px */
}

.coming-event-card__main[b-6bbvpm929l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    flex: 1 1 auto;
    /* min-width:0 lets long content wrap instead of overflowing the grid track. Note: no
       overflow:hidden here — it would clip the bottom chip row's focus ring and 44px tap-target
       overlay. Long text is instead kept in-bounds by wrapping (see __name and __meta-row). */
    min-width: 0;
}

/* WCAG pair: --color-primary-default text on --color-primary-container. */
.coming-event-card__date[b-6bbvpm929l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--coming-events-date-box-size);
    min-width: var(--coming-events-date-box-size);
    height: var(--coming-events-date-box-size);
    background-color: var(--color-primary-container);
    border-radius: 0.5rem; /* 8px */
}

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

.coming-event-card__date-month[b-6bbvpm929l] {
    font-size: 0.75rem; /* 12px */
    line-height: var(--font-caption-md-line-height, 1.25rem);
    font-weight: 500;
    color: var(--color-primary-default);
    text-transform: uppercase;
}

.coming-event-card__name[b-6bbvpm929l] {
    font-size: var(--font-body-md-size, 1rem);
    line-height: var(--font-body-md-line-height, 1.5rem);
    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: 0.5rem; /* 8px */
    min-width: 0; /* allow the row to shrink so its text wraps rather than forcing h-scroll at 360px */
    overflow-wrap: anywhere;
    font-size: var(--font-caption-md-size, 0.875rem);
    line-height: var(--font-caption-md-line-height, 1.25rem);
    color: var(--color-neutrals-default);
}

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

/* Taxonomy chips (BsChip) + status badges share this wrapping row. */
.coming-event-card__chips[b-6bbvpm929l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem; /* 8px — also keeps interactive chips ≥8px apart (WCAG) */
}

/* Status badges only (taxonomy uses BsChip). WCAG pair: --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, 0.875rem);
    line-height: var(--font-caption-md-line-height, 1.25rem);
    font-weight: 500;
    padding: 0.25rem 0.5rem; /* 4px 8px */
    border-radius: 6.25rem; /* pill (100px) */
    white-space: nowrap;
}

/* WCAG pair: --color-warning-default on --color-warning-container. */
.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;
}

/* Flatten the nested BsCollapsibleCard (MEM-8380 review): the accordion draws its own
   background/shadow, which reads as a card-in-card inside the already-shadowed
   .coming-event-card. Drop its chrome and align its padding with the rest of this card so it
   reads as a section of this card, not a nested one. */
.coming-event-card[b-6bbvpm929l]  .coming-event-card__collapsible {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
}

.coming-event-card[b-6bbvpm929l]  .coming-event-card__collapsible .bs-collapsible-card__header {
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.coming-event-card[b-6bbvpm929l]  .coming-event-card__collapsible .bs-collapsible-card__body {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

/* "Vis mere" is a card-level affordance, not a section heading — the shared accordion styles it at
   h6 (20px), which overpowers the card's own type scale (MEM-8577). 1rem is the BrandSync body
   minimum, so this is the smallest compliant step. */
.coming-event-card[b-6bbvpm929l]  .coming-event-card__collapsible .bs-collapsible-card__header-title {
    font-size: var(--font-body-md-size, 1rem);
    line-height: var(--font-body-md-line-height, 1.5rem);
    font-weight: 600;
}

.coming-event-card__details[b-6bbvpm929l] {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px */
}

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

.coming-event-card__place[b-6bbvpm929l] {
    display: flex;
    flex-direction: column;
    font-size: var(--font-caption-md-size, 0.875rem);
    line-height: var(--font-caption-md-line-height, 1.25rem);
    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, 1rem);
    line-height: var(--font-body-md-line-height, 1.5rem);
    color: var(--color-neutrals-default);
    overflow-wrap: anywhere;
}

/* One label per stacked text section (MEM-8567 — replaces the old two hard-coded description
   blocks). Reset the browser default h3 margin/size so it reads as a section heading within this
   card's own type scale, not a page-level heading. */
.coming-event-card__description-label[b-6bbvpm929l] {
    margin: 0 0 0.5rem; /* 8px */
    font-size: var(--font-caption-md-size, 0.875rem);
    line-height: var(--font-caption-md-line-height, 1.25rem);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
}

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

/* Actions (.coming-event-card__actions): rendered by ComingEventsCta now (WrapperClass parameter — MEM-8573
   review), so its layout rules live in ComingEventsCta.razor.css instead of here — the class name is
   unchanged, only which component's scoped stylesheet owns it. */

@media (min-width: 48rem) { /* 768px */
    /* Expanding reveals addresses and rich descriptions that read badly in one narrow grid track, so
       an expanded card takes two tracks (= the full row at the 2-column breakpoint) (MEM-8577). */
    .coming-event-card--expanded[b-6bbvpm929l] {
        grid-column: span 2;
    }
}
/* /Pages/Events/ComingEvents.razor.rz.scp.css */
/* Coming Events page (coming-events__) — mobile-first; colors are customer-provided semantic tokens
   (never hardcoded hex); all sizes in rem on the 8px grid. */

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

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

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

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

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

/* Adaptive grouping (§4.4) adds a count next to each heading — kept visually secondary to the headline. */
.coming-events__group-count[b-dkfkgr49ge] {
    font-size: var(--font-caption-md-size, 0.875rem);
    font-weight: 400;
    color: var(--color-neutrals-hover, var(--color-neutrals-default));
    margin-left: 0.5rem; /* 8px */
}

/* Mobile-first grid: single column on phones, adding columns at each breakpoint. */
.coming-events__grid[b-dkfkgr49ge] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem; /* 16px */
    margin-top: 2rem; /* 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, 1rem);
    box-shadow: var(--shadow-card);
    padding: 1rem; /* 16px */
}

.coming-events__skeleton-date[b-dkfkgr49ge] {
    width: var(--coming-events-date-box-size);
    min-width: var(--coming-events-date-box-size);
    height: var(--coming-events-date-box-size);
    border-radius: 0.5rem; /* 8px */
}

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

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

.coming-events__load-more[b-dkfkgr49ge] {
    display: flex;
    justify-content: center;
    margin-top: 2rem; /* 32px */
}

/* Tablet: two columns. */
@media (min-width: 48rem) { /* 768px */
    .coming-events__grid[b-dkfkgr49ge] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Small laptop: three columns. */
@media (min-width: 64rem) { /* 1024px */
    .coming-events__grid[b-dkfkgr49ge] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Desktop: four columns. */
@media (min-width: 90rem) { /* 1440px */
    .coming-events__grid[b-dkfkgr49ge] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* /Pages/Events/ComingEventsCalendarView.razor.rz.scp.css */
/* Calendar layout (coming-events-calendar__) — mobile-first; colors are customer-provided semantic
   tokens (never hardcoded hex); all sizes in rem on the 8px grid. */

.coming-events-calendar__nav[b-jz8z9o7de7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem; /* 16px */
    margin-bottom: 1.5rem; /* 24px */
}

.coming-events-calendar__month-title[b-jz8z9o7de7] {
    font-size: var(--font-h6-size, 1.25rem);
    line-height: var(--font-h6-line-height, 2rem);
    font-weight: 600;
    color: var(--color-neutrals-default);
    margin: 0;
    text-align: center;
    flex: 1 1 auto;
}

/* 44px minimum tap target (§5.0). */
.coming-events-calendar__navbtn[b-jz8z9o7de7] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem; /* 44px */
    height: 2.75rem;
    border-radius: 50%;
    background-color: var(--color-neutrals-container);
    border: 1px solid var(--color-neutrals-container-pressed);
    color: var(--color-primary-default);
}

.coming-events-calendar__navbtn:disabled[b-jz8z9o7de7] {
    opacity: 0.4;
    cursor: not-allowed;
}

.coming-events-calendar__truncated-alert[b-jz8z9o7de7] {
    margin-bottom: 1rem; /* 16px */
}

/* Wrapper carries the horizontal-scroll guard so a narrow viewport never overflows the page (§5.5). */
.coming-events-calendar__grid-wrapper[b-jz8z9o7de7] {
    overflow-x: auto;
}

.coming-events-calendar__table[b-jz8z9o7de7] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.coming-events-calendar__table th[b-jz8z9o7de7] {
    font-size: var(--font-caption-md-size, 0.875rem);
    font-weight: 600;
    color: var(--color-neutrals-default);
    text-align: center;
    padding-bottom: 0.5rem; /* 8px */
}

.coming-events-calendar__table td[b-jz8z9o7de7] {
    padding: 0.25rem; /* 4px */
    text-align: center;
}

.coming-events-calendar__day[b-jz8z9o7de7],
.coming-events-calendar__day--empty[b-jz8z9o7de7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem; /* 4px */
    width: 100%;
    min-height: 2.75rem; /* 44px — tap target */
    border-radius: 0.5rem; /* 8px */
    background: none;
    border: 1px solid transparent;
    color: var(--color-neutrals-default);
}

button.coming-events-calendar__day[b-jz8z9o7de7] {
    cursor: pointer;
}

.coming-events-calendar__day--empty[b-jz8z9o7de7] {
    color: var(--color-neutrals-hover, var(--color-neutrals-default));
    opacity: 0.5;
}

.coming-events-calendar__day--today[b-jz8z9o7de7] {
    border-color: var(--color-primary-default);
    font-weight: 600;
}

.coming-events-calendar__day--sel[b-jz8z9o7de7] {
    background-color: var(--color-primary-container);
    border-color: var(--color-primary-default);
}

.coming-events-calendar__day-number[b-jz8z9o7de7] {
    font-size: var(--font-body-md-size, 1rem);
}

.coming-events-calendar__day-dots[b-jz8z9o7de7] {
    display: flex;
    gap: 0.125rem; /* 2px */
}

.coming-events-calendar__day-dot[b-jz8z9o7de7] {
    width: 0.25rem; /* 4px */
    height: 0.25rem;
    border-radius: 50%;
    background-color: var(--color-primary-default);
}

.coming-events-calendar__day-pill[b-jz8z9o7de7] {
    font-size: 0.75rem; /* 12px — BrandSync caption floor; this pill is the day's only ">=4 events" signal */
    font-weight: 600;
    line-height: 1;
    padding: 0.125rem 0.375rem; /* 2px 6px */
    border-radius: 6.25rem; /* pill */
    background-color: var(--color-primary-default);
    color: var(--color-primary-container);
}

.coming-events-calendar__day-panel[b-jz8z9o7de7] {
    margin-top: 1.5rem; /* 24px */
}

.coming-events-calendar__day-empty[b-jz8z9o7de7] {
    color: var(--color-neutrals-default);
    margin-bottom: 1rem; /* 16px */
}

.coming-events-calendar__rows[b-jz8z9o7de7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
}

.coming-events-calendar__row[b-jz8z9o7de7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12px */
    background-color: var(--color-neutrals-container);
    border-radius: var(--brand-border-radius, 1rem);
    box-shadow: var(--shadow-card);
    padding: 1rem; /* 16px */
}

.coming-events-calendar__row-main[b-jz8z9o7de7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
}

.coming-events-calendar__row-time[b-jz8z9o7de7] {
    font-size: var(--font-body-md-size, 1rem);
    font-weight: 700;
    color: var(--color-primary-default);
}

.coming-events-calendar__row-name[b-jz8z9o7de7] {
    font-size: var(--font-body-md-size, 1rem);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    overflow-wrap: anywhere;
}

.coming-events-calendar__row-meta[b-jz8z9o7de7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    font-size: var(--font-caption-md-size, 0.875rem);
    color: var(--color-neutrals-default);
}

.coming-events-calendar__row-meta i[b-jz8z9o7de7] {
    width: 1rem; /* 16px */
    text-align: center;
    color: var(--color-primary-default);
}

.coming-events-calendar__row-chips[b-jz8z9o7de7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem; /* 8px */
}

/* Status badge only (taxonomy uses BsChip) — mirrors ComingEventCard's __badge. WCAG pair:
   --color-primary-default text on --color-primary-container. */
.coming-events-calendar__row-badge[b-jz8z9o7de7] {
    background-color: var(--color-primary-container);
    color: var(--color-primary-default);
    font-size: var(--font-caption-md-size, 0.875rem);
    line-height: var(--font-caption-md-line-height, 1.25rem);
    font-weight: 500;
    padding: 0.25rem 0.5rem; /* 4px 8px */
    border-radius: 6.25rem; /* pill (100px) */
    white-space: nowrap;
}

/* WCAG pair: --color-warning-default on --color-warning-container. */
.coming-events-calendar__row-badge--warning[b-jz8z9o7de7] {
    background-color: var(--color-warning-container, var(--color-primary-container));
    color: var(--color-warning-default, var(--color-primary-default));
    white-space: normal;
}

/* Tablet and up: taller day cells, matching the prototype's 4rem row height. */
@media (min-width: 38.75rem) { /* 620px */
    .coming-events-calendar__day[b-jz8z9o7de7],
    .coming-events-calendar__day--empty[b-jz8z9o7de7] {
        min-height: 4rem; /* 64px */
    }
}
/* /Pages/Events/ComingEventsCta.razor.rz.scp.css */
/* Shared enrollment CTA (coming-events-cta__) used by the explore and calendar layouts. */

.coming-events-cta[b-3lxczig3ut] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem; /* 8px */
}

.coming-events-cta__info[b-3lxczig3ut] {
    font-size: var(--font-caption-md-size, 0.875rem);
    line-height: var(--font-caption-md-line-height, 1.25rem);
    font-weight: 500;
    color: var(--color-neutrals-default);
}

/* ComingEventCard passes WrapperClass="coming-event-card__actions" to reuse its own card-specific
   responsive layout (moved here from ComingEventCard.razor.css — MEM-8573 review): stacked on mobile so
   the CTA (and any explanatory line) go full-width for an easy tap target, margin-top:auto to pin it to
   the bottom of the card's flex column. */
.coming-event-card__actions[b-3lxczig3ut] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem; /* 8px */
}

/* Tablet and up: actions sit on one wrapping row; the CTA is pushed right (see the auto-margin rule
   below), other content (the enrollment info line) keeps its natural left alignment. */
@media (min-width: 48rem) { /* 768px */
    .coming-event-card__actions[b-3lxczig3ut] {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem; /* 16px */
    }

    /* Right-align the CTA. The two only co-occur in the external-no-link branch, where the disabled
       button precedes the info line in markup — the auto margin there pushes both flush right as a
       group, which is the intended pairing for that branch. */
    .coming-event-card__actions[b-3lxczig3ut]  .bs-button {
        margin-left: auto;
    }
}
/* /Pages/Events/ComingEventsExploreView.razor.rz.scp.css */
/* Explore layout (coming-events-explore__) — mobile-first; colors are customer-provided semantic tokens
   (never hardcoded hex); all sizes in rem on the 8px grid. No adaptive grouping — one flat grid (§5.4). */

.coming-events-explore__hero[b-b2wc1oa1zp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    background-color: var(--color-neutrals-container);
    border-inline-start: 0.25rem solid var(--color-primary-default); /* 4px */
    border-radius: var(--brand-border-radius, 1rem);
    box-shadow: var(--shadow-card);
    padding: 1.5rem; /* 24px */
    margin-bottom: 2rem; /* 32px */
}

.coming-events-explore__hero-label[b-b2wc1oa1zp] {
    font-size: var(--font-caption-md-size, 0.875rem);
    font-weight: 600;
    color: var(--color-primary-default);
    text-transform: uppercase;
}

.coming-events-explore__hero-body[b-b2wc1oa1zp] {
    display: flex;
    align-items: flex-start;
    gap: 1rem; /* 16px */
}

/* WCAG pair: --color-primary-default text on --color-primary-container. */
.coming-events-explore__hero-date[b-b2wc1oa1zp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4.5rem; /* 72px */
    height: 4.5rem;
    background-color: var(--color-primary-container);
    border-radius: 0.5rem; /* 8px */
}

.coming-events-explore__hero-date-day[b-b2wc1oa1zp] {
    font-size: 1.5rem; /* 24px */
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-primary-default);
}

.coming-events-explore__hero-date-month[b-b2wc1oa1zp] {
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    color: var(--color-primary-default);
}

.coming-events-explore__hero-main[b-b2wc1oa1zp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    flex: 1 1 auto;
    min-width: 0;
}

.coming-events-explore__hero-name[b-b2wc1oa1zp] {
    font-size: var(--font-h6-size, 1.25rem);
    line-height: var(--font-h6-line-height, 2rem);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    margin: 0;
}

.coming-events-explore__meta-row[b-b2wc1oa1zp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--font-caption-md-size, 0.875rem);
    line-height: var(--font-caption-md-line-height, 1.25rem);
    color: var(--color-neutrals-default);
}

.coming-events-explore__meta-icon[b-b2wc1oa1zp] {
    width: 1rem; /* 16px */
    text-align: center;
    color: var(--color-primary-default);
}

.coming-events-explore__chips[b-b2wc1oa1zp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* 8px */
}

.coming-events-explore__hero-details[b-b2wc1oa1zp] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12px */
    font-size: var(--font-caption-md-size, 0.875rem);
    color: var(--color-neutrals-default);
}

.coming-events-explore__place[b-b2wc1oa1zp] {
    display: flex;
    flex-direction: column;
    white-space: pre-line;
}

.coming-events-explore__place-name[b-b2wc1oa1zp] {
    font-weight: 600;
}

.coming-events-explore__description-label[b-b2wc1oa1zp] {
    margin: 0 0 0.5rem; /* 8px */
    font-size: var(--font-caption-md-size, 0.875rem);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
}

.coming-events-explore__description[b-b2wc1oa1zp]  img {
    max-width: 100%;
    height: auto;
}

.coming-events-explore__heading[b-b2wc1oa1zp] {
    font-size: var(--font-h6-size, 1.25rem);
    line-height: var(--font-h6-line-height, 2rem);
    font-weight: 600;
    color: var(--color-neutrals-default);
    margin: 0 0 1rem 0; /* 16px */
}

.coming-events-explore__cards[b-b2wc1oa1zp] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem; /* 16px */
}

.coming-events-explore__card[b-b2wc1oa1zp] {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px */
    background-color: var(--color-neutrals-container);
    border-radius: var(--brand-border-radius, 1rem);
    box-shadow: var(--shadow-card);
    padding: 1rem; /* 16px */
}

.coming-events-explore__card-top[b-b2wc1oa1zp] {
    display: flex;
    align-items: flex-start;
    gap: 1rem; /* 16px */
}

.coming-events-explore__card-date[b-b2wc1oa1zp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem; /* 48px */
    height: 3rem;
    background-color: var(--color-primary-container);
    border-radius: 0.5rem; /* 8px */
    color: var(--color-primary-default);
}

.coming-events-explore__card-date-month[b-b2wc1oa1zp] {
    font-size: 0.75rem; /* 12px — BrandSync caption floor; matches __hero-date-month */
    font-weight: 500;
    text-transform: uppercase;
}

.coming-events-explore__card-date-day[b-b2wc1oa1zp] {
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: 1.2;
}

.coming-events-explore__card-main[b-b2wc1oa1zp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    flex: 1 1 auto;
    min-width: 0;
}

.coming-events-explore__card-name[b-b2wc1oa1zp] {
    font-size: var(--font-body-md-size, 1rem);
    line-height: var(--font-body-md-line-height, 1.5rem);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    overflow-wrap: anywhere;
}

.coming-events-explore__card[b-b2wc1oa1zp]  .coming-events-cta {
    margin-top: auto;
}

/* Tablet: 2 columns. */
@media (min-width: 38.75rem) { /* 620px */
    .coming-events-explore__cards[b-b2wc1oa1zp] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Small laptop: 3 columns. */
@media (min-width: 62.5rem) { /* 1000px */
    .coming-events-explore__cards[b-b2wc1oa1zp] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .coming-events-explore__hero-body[b-b2wc1oa1zp] {
        align-items: center;
    }
}
/* /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/EnrollmentArrangementHeader.razor.rz.scp.css */
/*
 * EnrollmentArrangementHeader — component-scoped styles.
 *
 * Moved here from EventEnrollment.razor.css (MEM-8246): the markup was extracted into this
 * child component in MEM-7957, and Blazor CSS isolation cannot reach child-component elements
 * without ::deep — the rules were dead in the parent's stylesheet.
 *
 * The arrangement name uses the shared .bs-heading-sm utility and the date range the shared
 * .bs-body-text-muted utility (both in BrandSync/Components.css).
 */

.bs-enrollment__arrangement[b-aq5f0zo8tg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.bs-enrollment__arrangement-info-toggle[b-aq5f0zo8tg] {
    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);
}
/* /Pages/Events/Enroll/EnrollmentPaymentSuccess.razor.rz.scp.css */
/* MEM-8268: QuickPay enrollment payment landing (success / processing states).
   MEM-8316 added the waitlisted state (same layout, warning-toned icon).
   Component-local layout only — colors come from the customer stylesheet / Bootstrap tokens. */

.bs-enrollment-payment-landing[b-ts7naagjni] {
    text-align: center;
    padding: 1.5rem 1rem;
}

.bs-enrollment-payment-landing__icon[b-ts7naagjni] {
    font-size: 3rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.bs-enrollment-payment-landing__icon--success[b-ts7naagjni] {
    color: var(--bs-success);
}

.bs-enrollment-payment-landing__icon--warning[b-ts7naagjni] {
    color: var(--bs-warning);
}

.bs-enrollment-payment-landing__title[b-ts7naagjni] {
    margin-bottom: 1rem;
}

.bs-enrollment-payment-landing__text[b-ts7naagjni] {
    margin-bottom: 1.5rem;
}
/* /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);
}

/* The arrangement context header styles live in EnrollmentArrangementHeader.razor.css and the
   collapsed step-header summary styles in EnrollmentStepHeader.razor.css (moved in MEM-8246 —
   the markup was extracted into those child components in MEM-7957, and non-::deep rules here
   were dead under Blazor CSS isolation). */
/* /Pages/Events/Enroll/Steps/CompanionPicker.razor.rz.scp.css */
/*
 * CompanionPicker — component-scoped styles (MEM-7895, Concept-B inline catalog MEM-7893).
 *
 * BEM block: bs-companion-picker
 * Colors are customer-provided via CSS custom properties — no hardcoded hex values.
 * Spacing on the 8px grid, expressed in rem.
 *
 * Mobile-first: base styles are a single fluid column — one type per row, one form field
 * per row. At >=48rem the type catalog promotes to three columns and the field grid to two.
 *
 * Foreground / background token pairs (for customer WCAG validation):
 *   committed row text/details : var(--color-neutrals-pressed|hover) on var(--color-neutrals-container)
 *   type badge                 : var(--color-primary-default)        on var(--color-primary-container)
 *   type option (unselected)   : var(--color-neutrals-pressed)       on var(--color-neutrals-container)
 *   type option (selected)     : var(--color-primary-default)        on var(--color-primary-container)
 *   remove action              : var(--color-error-default)          on var(--color-neutrals-container)
 *
 * Field-level error styling is NOT defined here: the messages live in the form's EditContext, so
 * BsInputText/BsInputNumber render them with the shared .bs-input--error / .bs-input__feedback--error
 * rules from BrandSync/Components.css.
 */

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

/* ---- committed companions: one full-width row each (Concept B) ---- */
.bs-companion-picker__rows[b-ndtdjoy5ou] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bs-companion-picker__row[b-ndtdjoy5ou] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-radius: 0.5rem;
    background: var(--color-neutrals-container);
}

.bs-companion-picker__row-badge[b-ndtdjoy5ou] {
    flex: none;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    border: 1px solid var(--color-primary-container-hover);
    background: var(--color-primary-container);
    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.3125rem);
    font-weight: 500;
    color: var(--color-primary-default);
}

/* Grows to fill the row and may shrink to nothing, so a long name never forces
   horizontal scroll on a narrow viewport. */
.bs-companion-picker__row-info[b-ndtdjoy5ou] {
    flex: 1 1 10rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.bs-companion-picker__row-name[b-ndtdjoy5ou] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    font-weight: 500;
    color: var(--color-neutrals-pressed);
    overflow-wrap: anywhere;
}

.bs-companion-picker__row-details[b-ndtdjoy5ou] {
    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.3125rem);
    color: var(--color-neutrals-hover);
    overflow-wrap: anywhere;
}

.bs-companion-picker__row-price[b-ndtdjoy5ou] {
    flex: none;
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

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

.bs-companion-picker__row-action[b-ndtdjoy5ou] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    background: none;
    border: none;
    border-radius: 0.375rem;
    padding: 0.25rem 0.75rem;
    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.3125rem);
    font-weight: 500;
    color: var(--color-primary-default);
    transition: background-color 0.15s ease, color 0.15s ease;
}

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

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

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

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

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

/* ---- always-visible type catalog ---- */
.bs-companion-picker__catalog[b-ndtdjoy5ou] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px dashed var(--color-primary-container-hover);
    border-radius: 0.5rem;
    background: var(--color-neutrals-container-hover);
}

.bs-companion-picker__catalog-label[b-ndtdjoy5ou] {
    margin: 0;
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    font-weight: 500;
    color: var(--color-neutrals-pressed);
}

.bs-companion-picker__types[b-ndtdjoy5ou] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

@media (min-width: 48rem) {
    .bs-companion-picker__types[b-ndtdjoy5ou] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.bs-companion-picker__type[b-ndtdjoy5ou] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-height: 2.75rem;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-radius: 0.5rem;
    background: var(--color-neutrals-container);
    text-align: start;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.bs-companion-picker__type:hover:not([aria-disabled="true"])[b-ndtdjoy5ou] {
    border-color: var(--color-primary-container-hover);
    box-shadow: var(--shadow-card);
}

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

/* aria-disabled, not the native disabled attribute: an unavailable type stays focusable and
   readable to assistive tech (the reason it is rendered at all rather than filtered out). */
.bs-companion-picker__type[aria-disabled="true"][b-ndtdjoy5ou] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* The inset ring reads as "checked" without relying on color alone. */
.bs-companion-picker__type--selected[b-ndtdjoy5ou] {
    border-color: var(--color-primary-default);
    background: var(--color-primary-container);
    box-shadow: inset 0 0 0 1px var(--color-primary-default);
}

.bs-companion-picker__type-name[b-ndtdjoy5ou] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    font-weight: 500;
    color: var(--color-neutrals-pressed);
}

.bs-companion-picker__type-price[b-ndtdjoy5ou] {
    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.3125rem);
    color: var(--color-neutrals-hover);
    font-variant-numeric: tabular-nums;
}

.bs-companion-picker__type--selected .bs-companion-picker__type-price[b-ndtdjoy5ou] {
    color: var(--color-primary-default);
}

/* ---- inline detail form, expanded under the selected type ---- */
.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);
}

/* Focus target when a type is picked; the outline would otherwise be invisible on a
   tabindex="-1" container that is not itself an interactive control. */
.bs-companion-picker__form-fields[b-ndtdjoy5ou] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

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

@media (min-width: 48rem) {
    .bs-companion-picker__form-fields[b-ndtdjoy5ou] {
        grid-template-columns: 1fr 1fr;
    }
}

.bs-companion-picker__field[b-ndtdjoy5ou] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 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, var(--color-neutrals-container-hover));
    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;
}

/* MEM-7557 #4: collapsed step-header selection summary (subtitle under the title).
   Moved here from EventEnrollment.razor.css (MEM-8246) — the elements live in this
   component, so the rules belong in its own scoped stylesheet. */
.bs-enrollment__step-header-text[b-dtbe36odtj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
}

.bs-enrollment__step-header-summary[b-dtbe36odtj] {
    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/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;
    }
}

/* The nights counter uses the shared .bs-body-text-muted utility (BrandSync/Components.css). */

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

/* §5.6: "X af Y personer" / "Y personer" counter above the list. */
.bs-participant-picker__count[b-q7vw1xj4k0] {
    margin: 0 0 0.5rem;
}

/* §5.6: scroll container so a long candidate list doesn't push the rest of the wizard step
   arbitrarily tall. rem units per BrandSync mobile-first rules. */
.bs-participant-picker__scroll[b-q7vw1xj4k0] {
    max-height: 20rem;
    overflow-y: auto;
}

.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.
   §5.7: ONE secondary line ("meta") across every mode — replaces the old separate
   __email/__info spans. __debtor stays separate (SearchAndEnrollPicker only, PII rule). */
.bs-participant-picker__debtor[b-q7vw1xj4k0],
.bs-participant-picker__meta[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;
}

/* §5.12: "tilføjet" chip replacing the old remove-toggle button on an already-selected row. */
[b-q7vw1xj4k0] .bs-participant-picker__added-chip {
    flex-shrink: 0;
}
/* /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);
}

/* The empty state uses the shared .bs-body-text-muted utility (BrandSync/Components.css). */

/* ---- MEM-8346: server-side name search (Network/Committee, BoardMemberSearchForMembersToEnrollWithPaging) ---- */
.bs-participant-picker__search[b-2k5lujjdtm] {
    margin-bottom: 0.5rem;
}

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

.bs-participant-picker__load-more[b-2k5lujjdtm] {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}

/* 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), expressed in rem.
 * Mobile-first: base rules target a narrow viewport; wider layouts scale up via min-width.
 */

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

/* Heading uses the shared .bs-heading-sm utility; the empty-modes state uses the shared
   .bs-body-text-muted utility (both in BrandSync/Components.css). */

/* ---- add-source button row (§3) ---- */
.bs-participant-step__add-row[b-dcguhq639q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ---- add panel: at most one visible at a time (§5.1) ---- */
.bs-participant-step__panel[b-dcguhq639q] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-radius: 0.25rem;
    background: var(--color-neutrals-container);
}

/* Panels stay mounted after first open and are hidden (not removed) on close, so loaded
   candidates / search text survive a reopen — see ParticipantSelectionStep.razor.cs. */
.bs-participant-step__panel[hidden][b-dcguhq639q] {
    display: none;
}

.bs-participant-step__panel-header[b-dcguhq639q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

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

/* ---- participant list ---- */
.bs-participant-step__participant-list[b-dcguhq639q] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The no-participants hint uses the shared .bs-body-text-muted utility. */

/* ---- continue button ---- */
.bs-participant-step__actions[b-dcguhq639q] {
    display: flex;
    justify-content: flex-end;
}

/* The not-forwardable inline error uses the shared alert / alert-danger utilities. */
/* /Pages/Events/Enroll/Steps/ParticipantServicesCard.razor.rz.scp.css */
/*
 * ParticipantServicesCard — component-scoped styles (MEM-7893).
 *
 * BEM block: bs-participant-card. Extracted from ServicesStep's per-participant markup
 * (Blazor CSS isolation is per component, so the rules move with the markup); the block
 * was renamed from bs-services-step__participant* to match the component that owns it.
 *
 * Colors are customer-provided via CSS custom properties — no hardcoded hex values.
 * Spacing on the 8px grid, expressed in rem. Mobile-first: a single fluid column at every
 * width; no fixed pixel widths, so no horizontal scroll on a narrow viewport.
 *
 * Foreground / background token pairs (for customer WCAG validation):
 *   card surface              : var(--color-neutrals-default)          on  var(--color-neutrals-container)
 *   header divider            : var(--bs-border-color / --color-neutrals-container-hover)
 *   subtotal pill             : var(--color-primary-default)           on  var(--color-primary-container)
 *   group headings            : var(--color-neutrals-pressed)          on  var(--color-neutrals-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)
 *
 * Elevation uses the shared --shadow-card token (no hardcoded shadows).
 */

.bs-participant-card[b-e9nqslzqwk] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-radius: var(--brand-border-radius, 1rem);
    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-participant-card__header[b-e9nqslzqwk] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
}

.bs-participant-card__name[b-e9nqslzqwk] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-lg-size, 1.125rem);
    line-height: var(--font-body-lg-line-height, 1.6875rem);
    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-participant-card__subtotal[b-e9nqslzqwk] {
    align-items: baseline;
}

.bs-participant-card__subtotal-label[b-e9nqslzqwk] {
    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.3125rem);
    color: var(--color-primary-default);
}

.bs-participant-card__subtotal-value[b-e9nqslzqwk] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    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-participant-card__group[b-e9nqslzqwk] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bs-participant-card__group-title[b-e9nqslzqwk] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    margin: 0;
}

/* Muted helper line inside a group (e.g. the "no companions yet" empty state). */
.bs-participant-card__hint[b-e9nqslzqwk] {
    margin: 0;
    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.3125rem);
    color: var(--color-neutrals-hover);
}

/* ---- list of cards — no browser bullets ---- */
.bs-participant-card__list[b-e9nqslzqwk] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bs-participant-card__list-item[b-e9nqslzqwk] {
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-radius: 0.5rem;
    /* No own fill: the card above already paints --color-neutrals-container, so a second identical
       fill only adds a redundant grey edge (MEM-8580). */
    background: transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bs-participant-card__list-item:hover[b-e9nqslzqwk] {
    border-color: var(--color-primary-container-hover);
    box-shadow: var(--shadow-card);
}

/* ---- blocking session-selection errors (MEM-8559), rendered above the overlap warnings ---- */
.bs-participant-card__session-errors[b-e9nqslzqwk] {
    margin-block-start: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ---- inline overlap warnings beneath the Sessions group ---- */
.bs-participant-card__overlaps[b-e9nqslzqwk] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ---- 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-participant-card__receipt[b-e9nqslzqwk] {
    gap: 0;
    border: 1px solid var(--color-primary-container-hover);
    border-radius: 0.5rem;
    background: var(--color-neutrals-container);
    overflow: hidden;
}

/* WCAG pair: --color-neutrals-pressed text on --color-primary-container background */
.bs-participant-card__receipt .bs-participant-card__group-title[b-e9nqslzqwk] {
    padding: 0.5rem 1rem;
    background: var(--color-primary-container);
    color: var(--color-neutrals-pressed);
}

.bs-participant-card__receipt-lines[b-e9nqslzqwk] {
    list-style: none;
    margin: 0;
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bs-participant-card__receipt-line[b-e9nqslzqwk] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    color: var(--color-neutrals-default);
}

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

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

/* ---- per-session typed companion capture (MEM-7899) ----
   One block per selected session that offers companion services, rendered under the
   SessionPicker so the companions read as belonging to that session. Mobile-first: the
   block is a plain stacked column at every width — the picker inside handles its own
   responsive form layout. */
.bs-participant-card__session-companions[b-e9nqslzqwk] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.bs-participant-card__session-companions-name[b-e9nqslzqwk] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
}
/* /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;
}

/* Heading uses the shared .bs-heading-sm utility; the empty state uses the shared
   .bs-body-text-muted utility (both in BrandSync/Components.css). */

/* ---- 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 spacing comes from the Bootstrap gap-3 utility in the markup
   (buttons keep a 16px gap if they ever wrap). */
/* /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);
}

/* The empty state uses the shared .bs-body-text-muted utility (BrandSync/Components.css). */
/* /Pages/Events/Enroll/Steps/SelectedParticipantRow.razor.rz.scp.css */
/*
 * SelectedParticipantRow — component-scoped styles.
 *
 * BEM block: bs-participant-step (shared block namespace with the parent step — this component
 * IS the "participant row" element of that block).
 * Colors are customer-provided via CSS custom properties — no hardcoded hex values.
 * Spacing follows the 8px grid system, expressed in rem. Mobile-first.
 */

.bs-participant-step__participant-row[b-tj1wwjzo2e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-radius: 0.25rem;
    background: var(--color-neutrals-container);
}

.bs-participant-step__row-header[b-tj1wwjzo2e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.bs-participant-step__row-name[b-tj1wwjzo2e] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
}

.bs-participant-step__row-remove[b-tj1wwjzo2e] {
    margin-left: auto;
    padding: 0;
}

.bs-participant-step__row-meta[b-tj1wwjzo2e] {
    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.25rem);
    color: var(--color-neutrals-hover);
}

.bs-participant-step__category-hint[b-tj1wwjzo2e] {
    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.25rem);
}

.bs-participant-step__waitlist-note[b-tj1wwjzo2e] {
    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.25rem);
    color: var(--color-feedback-warning-default, var(--color-neutrals-hover));
    margin: 0;
}

/* The blocked-row message uses the shared .bs-body-text-muted utility. */

/* ---- category option card (BsRadioGroup ItemTemplate content — authored here, so it carries
   THIS component's scope even though it renders inside BsRadioGroup) ---- */
.bs-participant-step__category-option[b-tj1wwjzo2e] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-radius: 0.25rem;
    min-width: 10rem;
}

.bs-participant-step__category-option--full[b-tj1wwjzo2e] {
    border-color: var(--color-feedback-warning-default, var(--color-neutrals-container-hover));
    background: var(--color-feedback-warning-container, transparent);
}

.bs-participant-step__category-option-header[b-tj1wwjzo2e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bs-participant-step__category-option-name[b-tj1wwjzo2e] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    font-weight: 500;
    color: var(--color-neutrals-pressed);
}

.bs-participant-step__category-option-seats[b-tj1wwjzo2e],
.bs-participant-step__category-option-price[b-tj1wwjzo2e] {
    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.25rem);
    color: var(--color-neutrals-hover);
}

/* ---- descendant-component overrides (::deep — these elements are rendered by BsRadioGroup /
   BsChip, components with their own CSS-isolation scope) ---- */
[b-tj1wwjzo2e] .bs-participant-step__category-options .bs-radio-group__items {
    flex-direction: row;
    flex-wrap: wrap;
}

[b-tj1wwjzo2e] .bs-participant-step__source-chip {
    flex-shrink: 0;
}

[b-tj1wwjzo2e] .bs-participant-step__waitlist-chip {
    flex-shrink: 0;
}

@media (min-width: 48rem) {
    .bs-participant-step__category-option[b-tj1wwjzo2e] {
        min-width: 12rem;
    }
}
/* /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 >=48rem 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: 0.5rem;
    padding: 0.75rem 1rem;
}

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

.bs-service-card__name-row[b-3cjz56u04z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    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, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    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, 0.875rem);
    line-height: var(--font-caption-md-line-height, 1.3125rem);
    color: var(--color-neutrals-hover);
    margin: 0;
}

/* Cap explanation (MEM-7893) — only rendered when the ceiling actually binds. Reads as a
   quiet caption under the name; turns into a warning tone while the row is flashing after
   a clamp, so the number that just changed is the thing the eye lands on. */
.bs-service-card__cap[b-3cjz56u04z] {
    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.3125rem);
    color: var(--color-neutrals-hover);
}

.bs-service-card__cap--clamped[b-3cjz56u04z] {
    color: var(--color-warning-default);
    font-weight: 500;
}

/* One-shot highlight when a clamp just lowered this row's quantity. The parent clears the
   flag on the next selection change, so the animation can re-run on a later clamp. */
.bs-service-card--clamp-flash[b-3cjz56u04z] {
    animation: bs-service-card__clamp-flash-b-3cjz56u04z 0.9s ease;
}

@keyframes bs-service-card__clamp-flash-b-3cjz56u04z {
    0% { background: var(--color-warning-container); }
    100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .bs-service-card--clamp-flash[b-3cjz56u04z] {
        animation: none;
        background: var(--color-warning-container);
    }
}

/* 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: 1rem;
    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, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    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: 0.5rem;
    overflow: hidden;
    background: var(--color-neutrals-container);
}

.bs-service-card__step[b-3cjz56u04z] {
    min-width: 2.75rem;
    min-height: 2.75rem;
    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: 1.25rem;
    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: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    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, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    color: var(--color-neutrals-hover);
    white-space: nowrap;
}

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

    /* 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
 * The per-participant card markup (and its styles) moved to ParticipantServicesCard
 * (MEM-7893); what remains here is the step chrome: heading, empty state, live total
 * summary bar and navigation.
 *
 * Colors are customer-provided via CSS custom properties — no hardcoded hex values.
 * Spacing on the 8px grid, expressed in rem.
 * Mobile-first: single fluid column on mobile; the summary bar promotes to a
 * justified row at >=48rem. No fixed pixel widths, so no horizontal scroll at 360px.
 *
 * Foreground / background token pairs (for customer WCAG validation):
 *   step heading            : var(--color-neutrals-pressed)      on  page background
 *   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: 1.5rem;
}

/* Heading uses the shared .bs-heading-sm utility; the empty state uses the shared
   .bs-body-text-muted utility (both in BrandSync/Components.css). */

/* Intro paragraph states the per-participant cap rule in words. */
.bs-services-step__intro[b-ogdz3iok5u] {
    margin: 0;
}

/* ---- live total summary bar: stacked on mobile, justified row at >=48rem ----
   Sticky to the bottom of the STEP BODY, not fixed to the viewport: the step renders inside
   MembersiteFlow's accordion panel, so a fixed bar would escape the panel and keep floating
   over the next step. Sticky keeps it in the document flow and inside the accordion. */
.bs-services-step__summary[b-ogdz3iok5u] {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border: 1px solid var(--color-primary-container-hover);
    border-radius: var(--brand-border-radius, 1rem);
    background: var(--color-primary-container);
    box-shadow: var(--shadow-card);
}

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

.bs-services-step__summary-label[b-ogdz3iok5u] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

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

/* Informational people count — never a cap, purely "who is in this order". */
.bs-services-step__summary-headcount[b-ogdz3iok5u] {
    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.3125rem);
    color: var(--color-neutrals-hover);
}

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

.bs-services-step__summary-amount[b-ogdz3iok5u] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-heading-sm-size, 1.5rem);
    line-height: var(--font-heading-sm-line-height, 2rem);
    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;
}

/* One-shot nudge whenever a new total arrives, so a price change is never silent. The
   element is keyed on the change count, so it is re-created and the animation restarts
   on every new total. */
.bs-services-step__summary-amount--bump[b-ogdz3iok5u] {
    animation: bs-services-step__bump-b-ogdz3iok5u 0.3s ease;
}

@keyframes bs-services-step__bump-b-ogdz3iok5u {
    0% { transform: scale(1); }
    40% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.bs-services-step__summary-spinner[b-ogdz3iok5u] {
    width: 1.125rem;
    height: 1.125rem;
    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;
    }

    .bs-services-step__summary-amount--bump[b-ogdz3iok5u] {
        animation: none;
    }
}

/* Step navigation spacing comes from the Bootstrap gap-3 utility in the markup
   (buttons keep a 16px gap if they ever wrap — matches Payer/Questions). */
/* /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);
}

/* ---- typed companion capture for this session (MEM-7899) ---- */
.bs-session-service-picker__companions[b-3dnopl6t2g] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bs-session-service-picker__companions-title[b-3dnopl6t2g] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    margin: 0;
}
/* /Pages/Membership/MyMemberships.razor.rz.scp.css */
/* /Pages/MyCase/MyCaseList.razor.rz.scp.css */
.case-card[b-2q1gpe7oc6] {
    box-shadow: var(--shadow-card);
}

.case-card__info[b-2q1gpe7oc6] {
    flex: 1 1 0;
    min-width: 0;
}

.case-card__meta[b-2q1gpe7oc6] {
    flex-shrink: 0;
    font-size: var(--font-body-sm-size);
    line-height: var(--font-body-sm-line-height);
}

.case-card__chevron[b-2q1gpe7oc6] {
    flex-shrink: 0;
}

[b-2q1gpe7oc6] .bs-button--subtle {
    white-space: normal;
    text-align: left;
    word-break: break-word;
}
/* /Pages/MyCompany/EventParticipations.razor.rz.scp.css */
.event-participations-page[b-7696aj2prx] {
    padding-top: 3rem;
    padding-bottom: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* WCAG pair: --color-neutrals-default text on the page's --color-neutrals-container background */
.event-participations-page__title[b-7696aj2prx] {
    font-size: 24px;
    line-height: 36px;
    font-weight: 600;
    color: var(--color-neutrals-default);
    margin: 0;
}
/* /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-neutrals-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-primary-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__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-neutrals-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-primary-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;
}