@import '_content/Membercare.SelfService.Web.Components/Membercare.SelfService.Web.Components.vlreq3ksk2.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/AddServicesModal.razor.rz.scp.css */
.add-services-modal__service-row[b-pd7fqs0cfh] {
    padding: 8px 16px;
    background-color: var(--color-neutrals-container);
    border-radius: 8px;
}

.add-services-modal__summary[b-pd7fqs0cfh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background-color: var(--color-neutrals-container);
    border-radius: 8px;
    font-size: var(--font-body-md-regular-size, 16px);
    color: var(--color-neutrals-default);
}
/* /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);
    padding: 1rem; /* 16px */
    /* shadow/radius/hover elevation come from bs-card bs-card--interactive; this transition
       replaces the modifier's, so it restates box-shadow alongside background-color */
    transition: box-shadow 0.15s, background-color 0.15s;
}

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

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

/* Full-width block below the summary row: location + chips span the whole card instead of being
   indented under the date badge (MEM-8989). Tighter gap than the card's own 1rem so the block
   still reads as part of the summary. */
.coming-event-card__body[b-6bbvpm929l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    margin-top: -0.5rem; /* pull toward the summary: card gap 1rem − 0.5rem = 8px visual gap */
}

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

/* Waiting-list notice: a full sentence, so it renders as a full-width rounded notice block
   instead of a chip pill stretched around four lines of text (MEM-8990).
   WCAG pair: --color-warning-default on --color-warning-container. */
.coming-event-card__notice[b-6bbvpm929l] {
    flex-basis: 100%;
    background-color: var(--color-warning-container, var(--color-primary-container));
    color: var(--color-warning-default, 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.5rem 0.75rem; /* 8px 12px */
    border-radius: 0.5rem; /* 8px */
}

/* 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 spans the full row at every multi-column breakpoint — a partial span left the
       detail content and enroll buttons ambiguously straddling neighbour cards on 3/4-column grids. */
    .coming-event-card--expanded[b-6bbvpm929l] {
        grid-column: 1 / -1;
    }
}
/* /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;
}

/* 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__organizations[b-o8i02v25yj] {
    min-width: 0;
}

/* From tablet up the grid resolves to several narrow columns; a single one truncates every token to a
   few characters, so the multi-value filter takes the full grid width instead. */
@media (min-width: 48rem) {
    .coming-events-filters__organizations[b-o8i02v25yj] {
        grid-column: 1 / -1;
    }
}

.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/CompanionServiceSection.razor.rz.scp.css */
.add-services-modal__companion-section[b-uk2y9qsx7a] {
    padding: 8px 16px;
    background-color: var(--color-neutrals-container);
    border-radius: 8px;
}
/* /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/EnrollmentPaymentCancelled.razor.rz.scp.css */
/* QuickPay enrollment cancel landing — same layout as the success landing
   (EnrollmentPaymentSuccess.razor.css); scoped CSS does not cross pages, so the shared
   classes are declared here too. Component-local layout only — colors come from the
   customer stylesheet / Bootstrap tokens. */

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

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

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

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

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

/* MEM-9109: live indicator while the page polls a pending payment. */
.bs-enrollment-payment-landing__polling[b-ts7naagjni] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
/* /Pages/Events/Enroll/EventEnrollment.razor.rz.scp.css */
/*
 * EventEnrollment — flow-local overrides.
 *
 * Vertical rhythm: the flow root stacks its children (heading, arrangement header, reservation
 * countdown, waitlist banner, error banners, accordion) as a flex column so the spacing between
 * them comes from one `gap` instead of per-child margins. Banners that are not currently shown
 * render no element at all, so they contribute no empty row.
 *
 * 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). */

.bs-enrollment[b-jj0fz7r49a] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* The column gap owns the spacing below the heading; the browser default margin would add to it.
   MEM-9059: color matches the customer primary token, same as ComingEvents/MyParticipations. */
.bs-enrollment__heading[b-jj0fz7r49a] {
    margin-bottom: 0;
    color: var(--color-primary-default);
}

/* Terminal-state banner (enrollment closed / already enrolled): separates the message from the
   link back to the member's own participations. */
.bs-enrollment__terminal-message[b-jj0fz7r49a] {
    margin-bottom: 1rem;
}
/* /Pages/Events/ParticipationAnswersModal.razor.rz.scp.css */
.participation-answers__question[b-hl6unyk1ul] {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.participation-answers__answer[b-hl6unyk1ul] {
    overflow-wrap: anywhere;
}

.participation-answers__notice[b-hl6unyk1ul] {
    margin-bottom: 1rem;
}
/* /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;
}
/* /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/MyCommunityGroup.razor.rz.scp.css */
/* Cancels MainLayout.razor's shared #page-body-container top padding (pt-3/pt-md-4) on mobile only,
   so the header sits flush with the navbar without changing spacing on any other page. */
@media (max-width: 767.98px) {
    .community-group-page-container[b-caf8vuz2oh] {
        margin-top: -1rem;
    }
}

/* Image on top, name/description below on mobile; side by side returns at 768px+ (same breakpoint
   the photo slot itself steps up at). */
.community-group-header[b-caf8vuz2oh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .community-group-header[b-caf8vuz2oh] {
        flex-direction: row;
    }
}

/* Always-square picture slot so the crop the member sees in the popup matches what's shown here,
   at every breakpoint — only the size changes, never the shape. */
.community-group-photo-slot[b-caf8vuz2oh] {
    width: 8rem;
    height: 8rem;
}

@media (min-width: 768px) {
    .community-group-photo-slot[b-caf8vuz2oh] {
        width: 10rem;
        height: 10rem;
    }
}

@media (min-width: 1024px) {
    .community-group-photo-slot[b-caf8vuz2oh] {
        width: 12.5rem;
        height: 12.5rem;
    }
}

.community-group-photo-editable[b-caf8vuz2oh] {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    line-height: 0;
}

.community-group-photo-editable:focus-visible[b-caf8vuz2oh] {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: 4px;
}

/* Overrides site.css's fixed height:200px — here the photo fills its slot above instead. */
.community-group-photo-slot .CommunityGroupPhoto[b-caf8vuz2oh] {
    width: 100%;
    height: 100%;
}

/* Camera badge on the top-right corner of the group photo — bottom-right overlapped the tab row
   underneath it. Anchored to the photo slot itself (not the header), so it can't drift onto the
   tabs regardless of layout changes elsewhere. Decorative (aria-hidden) since the parent button
   is the click target. Dimmed until the admin hovers/focuses the photo so it doesn't compete with
   the picture at rest; full opacity on hover/focus (and always full on touch devices, which have
   no hover to reveal it). */
.community-group-photo-edit[b-caf8vuz2oh] {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--color-neutrals-container);
    background-color: var(--color-primary-default);
    color: var(--color-neutrals-container);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    opacity: 0.6;
    transition: opacity 0.15s ease-in-out;
}

.community-group-photo-editable:hover .community-group-photo-edit[b-caf8vuz2oh],
.community-group-photo-editable:focus-visible .community-group-photo-edit[b-caf8vuz2oh] {
    opacity: 1;
}

@media (hover: none) {
    .community-group-photo-edit[b-caf8vuz2oh] {
        opacity: 1;
    }
}

.community-group-photo-placeholder[b-caf8vuz2oh] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--color-neutrals-container);
    font-size: 2rem;
}

/* Anchors the settings button to the card (top-right) on mobile instead of the text column, which
   sits below the photo once the header stacks. Bootstrap's .position-relative utility is itself
   !important, so the override has to match it. */
@media (max-width: 767.98px) {
    .community-group-header-content[b-caf8vuz2oh] {
        position: static !important;
    }

    .community-group-settings-button[b-caf8vuz2oh] {
        z-index: 1;
    }
}

/* Icon-only on mobile (space is tight beside the tabs below); desktop gets a visible label too. */
.community-group-settings-button-text[b-caf8vuz2oh] {
    display: none;
}

@media (min-width: 768px) {
    .community-group-settings-button-text[b-caf8vuz2oh] {
        display: inline;
        margin-left: 0.5rem;
    }
}

/* The photo has no top padding, but Bootstrap's .card-body does — without this the title/description
   content starts noticeably lower than the photo instead of lining up with its top edge. */
.card-body[b-caf8vuz2oh] {
    padding-top: 0;
}

/* Caps the title+description block so a long description can't drag the whole card down; "Show
   more" opens the full text in a popup. On mobile the block sits full-width below the photo (see
   .community-group-header above) so the cap is sized on its own instead of tied to
   .community-group-photo-slot the way the side-by-side breakpoints below still are. */
.community-group-content[b-caf8vuz2oh] {
    max-height: 8rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .community-group-content[b-caf8vuz2oh] {
        max-height: 10rem;
    }
}

@media (min-width: 1024px) {
    .community-group-content[b-caf8vuz2oh] {
        max-height: 12.5rem;
    }
}

/* Bounds the title's own height so it can't eat the whole .community-group-content budget on its
   own — a very long group name is clamped to 2 lines with an ellipsis instead of starving the
   description/Edit control of space, at every breakpoint since the cap above now applies at all of
   them too. */
.community-group-title[b-caf8vuz2oh] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The positioning "slot": sizes itself to whatever space is actually left after the title renders
   (flex:1 1 auto + min-height:0 self-corrects — a fixed px/rem height here previously guessed the
   title's real height wrong, missing Bootstrap's .card-title margin, and let content spill out
   below the photo). */
.community-group-description-wrap[b-caf8vuz2oh] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* The actual clip: a flex CHILD of the wrap (flex-grow, not height:100%) — a flex item sized only
   via flex-grow isn't a "definite size" for its own children's percentage-height resolution in the
   spec, so a plain `height: 100%` here silently fell back to the paragraph's full natural height
   instead of the wrap's actual assigned size (measured live: clip rendered 384px tall against a
   163px wrap, so nothing ever appeared to overflow and no truncation ever kicked in). Using
   flex-grow again avoids percentage resolution entirely, the same mechanism that already correctly
   sizes the wrap itself. This is a safety net only — the text rendered inside is already measured
   (see MyCommunityGroup.razor.js measureVisibleWordCount) to fit within this box together with the
   trailing buttons, so it should never actually need to clip anything in normal operation. */
.community-group-description-clip[b-caf8vuz2oh] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.community-group-description[b-caf8vuz2oh] {
    margin: 0;
}

/* Show more/Edit render as the last inline content of the paragraph itself, right after the
   (possibly truncated) text — not an absolutely positioned overlay. Normal text flow then places
   them immediately after the last word on the same line, which is what keeps them from either
   sitting outside/below the clamped block or overlapping earlier lines: the JS measurement already
   reserved exactly this much trailing width on the last line before deciding how much text to show
   (see measureVisibleWordCount's tailReservedPx). */
.community-group-description[b-caf8vuz2oh]  .bs-button {
    margin-left: 0.375rem;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.5rem;
    vertical-align: baseline;
}

/* Off-screen measurement twin of the Show more/Edit buttons (see the markup comment) — laid out
   normally (not display:none, which would report a zero width) but removed from the visible flow
   and from hit-testing. */
.community-group-description-buttons-probe[b-caf8vuz2oh] {
    position: absolute;
    left: -9999px;
    top: 0;
    visibility: hidden;
    white-space: nowrap;
    pointer-events: 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/MyOrganization/BoardMemberSearchResultCard.razor.rz.scp.css */
/*
 * BoardMemberSearchResultCard — one board-member search result rendered as a card.
 * BEM block: bs-board-member-card. Uses the shared .bs-card utility (shadow, rounded,
 * no border — see Components.css) for the card box, BsChip for the board-function badge,
 * and BsProfileAvatar for the avatar (picture if available, initials otherwise — sized here
 * via --profile-avatar-initials-size, which the component reads from its CSS custom property).
 * Colors are customer-provided via CSS custom properties — no hardcoded hex values.
 *
 * Mobile-first: avatar/person/org-details stack in a single column on small screens; from
 * tablet width up they sit side by side, using the available width and keeping the card short.
 */

.bs-board-member-card__layout[b-5b23lmwfej] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Avatar + name/badge/contact stay side by side at every breakpoint (mobile included) — only the
   details column drops below on small screens, via .bs-board-member-card__layout's column stacking. */
.bs-board-member-card__top[b-5b23lmwfej] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 0;
    min-width: 0;
}

.bs-board-member-card__avatar[b-5b23lmwfej] {
    --profile-avatar-initials-size: 18px;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-primary-default);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bs-board-member-card__person[b-5b23lmwfej],
.bs-board-member-card__details[b-5b23lmwfej] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}

.bs-board-member-card__header[b-5b23lmwfej] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* WCAG pair: --color-neutrals-pressed text on the card's light surface background (the shared
   .bs-card/.card box — no BrandSync background token is applied here, so validate contrast against
   whatever surface color the consuming app renders cards on). */
.bs-board-member-card__name[b-5b23lmwfej] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-lg-size, 18px);
    line-height: var(--font-body-lg-line-height, 28px);
    font-weight: 500;
    color: var(--color-neutrals-pressed);
}

/* WCAG pair: --color-neutrals-hover text on the card's light surface background (see note above). */
.bs-board-member-card__contact[b-5b23lmwfej] {
    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);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* From tablet width up: avatar, person info, and org/board info sit side by side instead of
   stacking, using the available width and keeping the card noticeably shorter. */
@media (min-width: 768px) {
    .bs-board-member-card__layout[b-5b23lmwfej] {
        flex-direction: row;
        align-items: flex-start;
    }

    .bs-board-member-card__details[b-5b23lmwfej] {
        border-left: 1px solid var(--color-neutrals-container-hover);
        padding-left: 24px;
    }
}
/* /Pages/MyOrganization/BoardMemberships.razor.rz.scp.css */
.board-membership-section__title[b-1asbsq8jct] {
    font-size: var(--font-h6-size, 1.25rem);
    font-weight: 600;
    line-height: var(--font-h6-line-height, 2rem);
}

.board-membership-row[b-1asbsq8jct] {
    background-color: var(--color-neutrals-container);
}

@media (min-width: 768px) {
    .board-membership-row__actions[b-1asbsq8jct] {
        min-width: 10rem;
        justify-content: flex-end;
    }
}
/* /Pages/MyOrganization/MembersOrganizationCards.razor.rz.scp.css */
/*
 * MembersOrganizationCards — one member-with-balance row rendered as a card, shared by
 * MembersWithPendingInvoices (Saldoliste) and MembersWithDueAmount (Restanceliste).
 * BEM block: org-members-card. Uses the shared .bs-card utility (shadow, rounded, no border —
 * see Components.css) for the card box, plus the generic .bs-card-header / .bs-card-detail-row /
 * .bs-card-amount classes from Components.css for the layout pieces reusable across cards. Only
 * the identity block (name + debtor account number, specific to this card's content) stays here.
 * Colors are customer-provided via CSS custom properties — no hardcoded hex values.
 */

.org-members-card__identity[b-jljf7yrr99] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* WCAG pair: --color-neutrals-pressed text on the card's light surface background (the shared
   .bs-card/.card box). */
.org-members-card__name[b-jljf7yrr99] {
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-body-lg-size, 18px);
    line-height: var(--font-body-lg-line-height, 28px);
    font-weight: 500;
    color: var(--color-neutrals-pressed);
}

/* WCAG pair: --color-neutrals-hover text on the card's light surface background (the shared
   .bs-card/.card box). */
.org-members-card__debtor-account-number[b-jljf7yrr99] {
    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);
}

.org-members-card__details[b-jljf7yrr99] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}
/* /Pages/MyOrganization/SearchBoardMember.razor.rz.scp.css */
/*
 * SearchBoardMember — board-member search results (card layout, per Jesper's ComingEvents
 * template). Per-card styling lives in BoardMemberSearchResultCard.razor.css (Blazor CSS
 * isolation only scopes styles to markup rendered in the same component file).
 */

.bs-board-member-results__load-more[b-s1beyb2ydq] {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
/* /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;
}