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

/* /Components/Shared/EmptyState.razor.rz.scp.css */
.empty-state__icon[b-qe27x6dvib] {
    font-size: 48px;
}
/* /Components/Shared/EventParticipationCard.razor.rz.scp.css */
/*
 * EventParticipationCard: component-scoped overrides on the shared event-detail-module block
 * (BrandSync/Components.css). The date, place and payer lines are body text on My participations,
 * so they read at the 16px body size; the icon-button labels and the date-tile month stay captions.
 */

.event-detail-module__meta-row[b-a3nbfqfhsd] {
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
}

/* The group link is a real link: underlined so it reads as one without relying on colour, and tall
   enough to tap on a phone. */
.event-participation-card__group-link[b-a3nbfqfhsd] {
    min-height: 2.75rem;
    text-decoration: underline;
}

/* The details sit on a row of their own under the content and the actions at every width. */
.event-participation-card__details-body[b-a3nbfqfhsd] {
    padding-top: 0.5rem;
}

/* Beside the title, a wide action row is capped so it wraps instead of crushing the title column. */
@media (min-width: 768px) {
    .event-participation-card__content[b-a3nbfqfhsd] {
        flex: 1 1 16rem;
    }

    .event-participation-card__actions[b-a3nbfqfhsd] {
        max-width: 50%;
    }
}
/* /Components/Shared/ParticipationOverviewContent.razor.rz.scp.css */
/*
 * ParticipationOverviewContent: one column on mobile; a line's text and amount sit side by side as soon
 * as they fit and wrap under each other when they do not. Colours come from the customer's semantic
 * tokens, never from literals.
 */

.participation-overview[b-8089fsxa2z] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.participation-overview__category[b-8089fsxa2z],
.participation-overview__empty[b-8089fsxa2z] {
    margin: 0;
}

.participation-overview__label[b-8089fsxa2z] {
    color: var(--color-neutrals-hover);
}

.participation-overview__heading[b-8089fsxa2z] {
    margin: 0 0 0.5rem;
    font-size: var(--font-body-md-regular-size, 1rem);
    line-height: var(--font-body-md-regular-line-height, 1.5rem);
    font-weight: 600;
}

.participation-overview__lines[b-8089fsxa2z] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.participation-overview__line[b-8089fsxa2z],
.participation-overview__total[b-8089fsxa2z] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 1rem;
}

.participation-overview__total[b-8089fsxa2z] {
    margin: 0.5rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-neutrals-container-hover);
    font-weight: 600;
}

.participation-overview__line-text[b-8089fsxa2z] {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.participation-overview__line-detail[b-8089fsxa2z] {
    display: block;
    color: var(--color-neutrals-hover);
}

.participation-overview__amount[b-8089fsxa2z] {
    white-space: nowrap;
}

.participation-overview__payment[b-8089fsxa2z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.participation-overview__invoice-link[b-8089fsxa2z] {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    text-decoration: underline;
}
/* /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 (add-services-modal__): mobile-first; colors are customer-provided semantic tokens,
   spacing on the 8px grid in rem. Hotel rooms and companions render the enrollment flow's own cards. */

.add-services-modal__groups[b-pd7fqs0cfh] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 24px */
}

.add-services-modal__group[b-pd7fqs0cfh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12px */
}

.add-services-modal__group-title[b-pd7fqs0cfh] {
    margin: 0;
    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);
}

.add-services-modal__list[b-pd7fqs0cfh],
.add-services-modal__hotel[b-pd7fqs0cfh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
}

.add-services-modal__row[b-pd7fqs0cfh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem; /* 16px */
    padding: 0.75rem 1rem; /* 12px 16px */
    border: 1px solid var(--bs-border-color, var(--color-neutrals-container-hover));
    border-radius: var(--brand-border-radius, 0.5rem);
    background-color: var(--color-neutrals-container);
}

.add-services-modal__row-text[b-pd7fqs0cfh],
.add-services-modal__receipt-text[b-pd7fqs0cfh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.add-services-modal__row-name[b-pd7fqs0cfh] {
    font-weight: 600;
    color: var(--color-neutrals-pressed);
    overflow-wrap: anywhere;
}

.add-services-modal__row-price[b-pd7fqs0cfh],
.add-services-modal__row-existing[b-pd7fqs0cfh] {
    font-size: var(--font-caption-md-size, 0.875rem);
    line-height: var(--font-caption-md-line-height, 1.3125rem);
    color: var(--color-neutrals-default);
}

.add-services-modal__existing-line[b-pd7fqs0cfh] {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem; /* 8px */
    margin: 0;
}

.add-services-modal__receipt[b-pd7fqs0cfh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
}

.add-services-modal__receipt-line[b-pd7fqs0cfh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem; /* 16px */
    padding: 0.75rem 1rem; /* 12px 16px */
    border-radius: var(--brand-border-radius, 0.5rem);
    background-color: var(--color-neutrals-container);
}

.add-services-modal__receipt-amount[b-pd7fqs0cfh] {
    flex-shrink: 0;
    min-width: 4rem; /* 64px */
    text-align: end;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-neutrals-pressed);
}

.add-services-modal__summary[b-pd7fqs0cfh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem; /* 8px 16px */
    background-color: var(--color-neutrals-container);
    border-radius: 0.5rem; /* 8px */
    font-size: var(--font-body-md-regular-size, 1rem);
    color: var(--color-neutrals-default);
}

.add-services-modal__skeleton-price[b-pd7fqs0cfh] {
    width: 3.75rem; /* 60px */
}

.add-services-modal__skeleton-stepper[b-pd7fqs0cfh] {
    width: 7.5rem; /* 120px */
    height: 2.5rem; /* 40px */
    border-radius: 0.5rem; /* 8px */
}
/* /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. The card is not a
   target itself, so it has no hover state; shadow and radius come from bs-card. The scroll margin keeps
   a card that is scrolled or focused into view clear of the sticky month strip and month heading. */
.coming-event-card[b-6bbvpm929l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    background-color: var(--color-neutrals-container);
    padding: 0.75rem; /* 12px */
    scroll-margin-top: var(--coming-events-sticky-clearance);
}

.coming-event-card__name[b-6bbvpm929l],
.coming-event-card__toggle[b-6bbvpm929l],
.coming-event-card[b-6bbvpm929l]  a,
.coming-event-card[b-6bbvpm929l]  button {
    scroll-margin-top: var(--coming-events-sticky-clearance);
}

/* Phone: the fixed menu button sits in the bottom right corner, where the card has its actions, so a
   card or control that takes focus is scrolled clear of it. */
@media (max-width: 47.9375rem) { /* below 768px */
    .coming-event-card[b-6bbvpm929l],
    .coming-event-card__toggle[b-6bbvpm929l],
    .coming-event-card[b-6bbvpm929l]  a,
    .coming-event-card[b-6bbvpm929l]  button {
        scroll-margin-bottom: var(--coming-events-menu-button-clearance);
    }
}

/* The card takes focus when it is the first one added by "load more". */
.coming-event-card:focus-visible[b-6bbvpm929l] {
    outline: 0.125rem solid var(--color-primary-focused); /* 2px */
    outline-offset: 0.125rem;
}

/* Summary row: date tile, the main text column and the expand control. Horizontal at every width. */
.coming-event-card__summary[b-6bbvpm929l] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem; /* 12px */
}

/* Expand control in the title row: a 44px target. WCAG pair: --color-primary-default icon on the
   card's --color-neutrals-container surface, and on --color-neutrals-container-hover when hovered. */
.coming-event-card__toggle[b-6bbvpm929l] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem; /* 44px */
    height: 2.75rem; /* 44px */
    padding: 0;
    border: none;
    border-radius: 0.5rem; /* 8px */
    background-color: transparent;
    color: var(--color-primary-default);
    cursor: pointer;
}

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

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

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

.coming-event-card__main[b-6bbvpm929l] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* 4px */
    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-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);
    /* A minimum, so the tile grows by one line when it also carries a year. */
    min-height: var(--coming-events-date-box-size);
    padding: 0.125rem 0; /* 2px */
    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-text);
}

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

.coming-event-card__date-year[b-6bbvpm929l] {
    font-size: 0.75rem; /* 12px */
    line-height: 1rem;
    font-weight: 500;
    color: var(--color-primary-text);
}

.coming-event-card__name[b-6bbvpm929l] {
    margin: 0;
    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);
}

/* Weekday, time and place: at most two lines, cut with an ellipsis; the full text is the title. */
.coming-event-card__meta-row--summary[b-6bbvpm929l] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

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

/* One line under the summary: category chips and status to the left, the enroll action to the right.
   When they do not fit side by side the chips wrap among themselves next to the action, which stays
   on the last line to the right; the action only takes a line of its own when it leaves the chips
   less than 8rem. */
.coming-event-card__footer[b-6bbvpm929l] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem; /* 8px */
}

/* Taxonomy chips (BsChip) and the status share this wrapping row; the gap keeps interactive chips
   at least 8px apart. */
.coming-event-card__chips[b-6bbvpm929l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem; /* 8px */
    flex: 1 1 8rem; /* 128px */
    min-width: 0;
}

/* The basis is measured against the card, not the viewport, so a narrow desktop column behaves like
   a phone. */
.coming-event-card__chips--wide[b-6bbvpm929l] {
    flex-basis: 16rem; /* 256px */
}

/* The details open in place, inside the card, under a divider. */
.coming-event-card__details[b-6bbvpm929l] {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px */
    padding-top: 0.5rem; /* 8px */
    border-top: 0.0625rem solid var(--color-neutrals-container-pressed); /* 1px */
}

.coming-event-card__details[hidden][b-6bbvpm929l] {
    display: none;
}

/* Actions (.coming-event-card__actions) are rendered by ComingEventsCta (WrapperClass parameter), so
   their layout rules live in ComingEventsCta.razor.css. */
/* /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: 1rem; /* 16px */
}

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

/* One section per month. Its heading sticks under the month strip for as long as the section is in
   view, on an opaque band so the cards do not show through.
   WCAG pair: --color-neutrals-pressed text on --color-neutrals-container-hover. */
.coming-events__month-headline[b-dkfkgr49ge] {
    position: sticky;
    top: calc(var(--coming-events-sticky-top) + var(--coming-events-month-strip-height));
    z-index: 1010;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem; /* 8px */
    box-sizing: border-box;
    min-height: var(--coming-events-month-heading-height);
    margin: 1rem 0 0.5rem 0; /* 16px 0 8px */
    padding: 0.5rem 0.75rem; /* 8px 12px */
    border-radius: 0 0 0.5rem 0.5rem; /* 8px */
    background-color: var(--color-neutrals-container-hover);
    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);
}

/* The result count above already provides the gap to the month strip. */
.coming-events__month:first-child .coming-events__month-headline[b-dkfkgr49ge] {
    margin-top: 0;
}

/* The month's count, visually secondary to the month name. */
.coming-events__group-count[b-dkfkgr49ge] {
    flex: none;
    font-size: var(--font-caption-md-size, 0.875rem);
    line-height: var(--font-caption-md-line-height, 1.25rem);
    font-weight: 400;
    color: var(--color-neutrals-default);
}

/* WCAG pair: --color-neutrals-default text on the page background. The line keeps its height while
   empty so the results below do not shift when the count arrives. */
.coming-events__result-count[b-dkfkgr49ge] {
    min-height: var(--font-caption-md-line-height, 1.25rem);
    margin: 2rem 0 0.5rem 0; /* 32px under the filter box, 8px to the results */
    font-size: var(--font-caption-md-size, 0.875rem);
    line-height: var(--font-caption-md-line-height, 1.25rem);
    color: var(--color-neutrals-default);
}

/* In the list layout the count sits right under the month strip, and stays clear of it when it takes
   focus after a filter change. */
.coming-events__result-count--list[b-dkfkgr49ge] {
    margin: 0.5rem 0 0.25rem 0; /* 8px 0 4px */
    scroll-margin-top: calc(var(--coming-events-sticky-top) + var(--coming-events-month-strip-height) + 0.5rem);
}

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

/* List layout: cards keep their own height, so one that expands grows in place and its neighbour in
   the row stays as it is. */
.coming-events__grid--list[b-dkfkgr49ge] {
    align-items: start;
    gap: 0.75rem; /* 12px */
}

/* Loading placeholders, shaped like the filter box and the cards that replace them. */
.coming-events__skeleton-filters[b-dkfkgr49ge] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    background-color: var(--color-neutrals-container);
    border-radius: var(--brand-border-radius, 1rem);
    box-shadow: var(--shadow-card);
    padding: 1rem; /* 16px */
}

.coming-events__skeleton-label[b-dkfkgr49ge] {
    width: 4rem; /* 64px */
}

.coming-events__skeleton-input[b-dkfkgr49ge] {
    height: 2.75rem; /* 44px */
}

.coming-events__skeleton-strip[b-dkfkgr49ge] {
    height: var(--coming-events-month-strip-height);
    margin-top: 0.75rem; /* 12px */
}

.coming-events__skeleton-card[b-dkfkgr49ge] {
    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__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 */
}

.coming-events__skeleton-chip[b-dkfkgr49ge] {
    width: 6rem; /* 96px */
    height: 2rem; /* 32px */
    border-radius: 6.25rem; /* pill (100px) */
}

.coming-events__skeleton-button[b-dkfkgr49ge] {
    height: 3.25rem; /* 52px, the large enroll button */
}

/* 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 */
    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__empty-title[b-dkfkgr49ge] {
    font-weight: 600;
    color: var(--color-neutrals-pressed);
}

.coming-events__empty-criteria[b-dkfkgr49ge] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    text-align: center;
    overflow-wrap: anywhere;
}

.coming-events__empty-criterion-label[b-dkfkgr49ge] {
    font-weight: 600;
}

/* Previous results stay in place while a new search runs, so the page neither collapses nor jumps. */
.coming-events__results[b-dkfkgr49ge] {
    transition: opacity 0.15s ease;
}

.coming-events__results--busy[b-dkfkgr49ge] {
    opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
    .coming-events__results[b-dkfkgr49ge] {
        transition: none;
    }
}

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

/* Phone: the fixed menu button sits in the bottom right corner, so a control that takes focus is
   scrolled clear of it. */
@media (max-width: 47.9375rem) { /* below 768px */
    .coming-events__load-more[b-dkfkgr49ge]  .bs-button {
        scroll-margin-bottom: var(--coming-events-menu-button-clearance);
    }
}

/* Tablet: two columns; the search and the filter toggle share the placeholder's width. */
@media (min-width: 48rem) { /* 768px */
    .coming-events__skeleton-filters[b-dkfkgr49ge] {
        padding: 1rem 1.5rem 1.5rem; /* 16px 24px 24px */
    }

    .coming-events__grid[b-dkfkgr49ge] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Small laptop: three columns. The list layout stays at two: its card reads well between roughly 320
   and 420px, and three columns would be about 275px each here. */
@media (min-width: 64rem) { /* 1024px */
    .coming-events__grid[b-dkfkgr49ge] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .coming-events__grid--list[b-dkfkgr49ge] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* From 1200px the content area is wide enough for three list columns of about 340px or more. */
@media (min-width: 75rem) { /* 1200px */
    .coming-events__grid--list[b-dkfkgr49ge] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Desktop: four columns. The list layout stays at three, which the page container keeps near 420px. */
@media (min-width: 90rem) { /* 1440px */
    .coming-events__grid[b-dkfkgr49ge] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .coming-events__grid--list[b-dkfkgr49ge] {
        grid-template-columns: repeat(3, 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] {
    /* Phone: 1px at the sides, so a day cell is 44px or wider from a 346px viewport up (48px at 375px). */
    padding: 0.25rem 0.0625rem; /* 4px 1px */
    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.375rem; /* 6px */
    height: 0.375rem;
    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-on-primary);
}

.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] {
    margin: 0;
    line-height: var(--font-body-md-line-height, 1.5rem);
    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 */
}

/* Tablet and up: taller day cells, matching the prototype's 4rem row height. */
@media (min-width: 38.75rem) { /* 620px */
    .coming-events-calendar__table td[b-jz8z9o7de7] {
        padding: 0.25rem; /* 4px */
    }

    .coming-events-calendar__day[b-jz8z9o7de7],
    .coming-events-calendar__day--empty[b-jz8z9o7de7] {
        min-height: 4rem; /* 64px */
    }
}
/* /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);
}

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

/* WCAG pair: --color-primary-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-text);
}

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

.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;
    align-items: center;
    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;
    align-items: start; /* an opened card does not stretch the cards beside it */
    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 */
    /* A minimum, so the tile grows by one line when it also carries a year. */
    min-height: 3rem;
    padding: 0.125rem 0; /* 2px */
    background-color: var(--color-primary-container);
    border-radius: 0.5rem; /* 8px */
    color: var(--color-primary-text);
}

/* Weekday, date, time and place: at most two lines, cut with an ellipsis; the full text is the title. */
.coming-events-explore__meta-row--summary[b-b2wc1oa1zp] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Shared by the hero tile and the card tiles. */
.coming-events-explore__date-year[b-b2wc1oa1zp] {
    font-size: 0.75rem; /* 12px */
    line-height: 1rem;
    font-weight: 500;
    color: var(--color-primary-text);
}

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

.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:focus-visible[b-b2wc1oa1zp] {
    outline: 0.125rem solid var(--color-primary-focused); /* 2px */
    outline-offset: 0.125rem;
}

.coming-events-explore__card-name[b-b2wc1oa1zp] {
    margin: 0;
    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;
}

/* Expand control in the title row: a 44px target. WCAG pair: --color-primary-default icon on the
   card's --color-neutrals-container surface, and on --color-neutrals-container-hover when hovered. */
.coming-events-explore__toggle[b-b2wc1oa1zp] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem; /* 44px */
    height: 2.75rem; /* 44px */
    padding: 0;
    border: none;
    border-radius: 0.5rem; /* 8px */
    background-color: transparent;
    color: var(--color-primary-default);
    cursor: pointer;
}

.coming-events-explore__toggle:hover[b-b2wc1oa1zp] {
    background-color: var(--color-neutrals-container-hover);
}

.coming-events-explore__toggle:active[b-b2wc1oa1zp] {
    background-color: var(--color-neutrals-container-pressed);
}

.coming-events-explore__toggle:focus-visible[b-b2wc1oa1zp] {
    outline: 0.125rem solid var(--color-primary-focused); /* 2px */
    outline-offset: 0.125rem;
}

/* The details open in place, inside the card, under a divider. */
.coming-events-explore__details[b-b2wc1oa1zp] {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px */
    padding-top: 0.5rem; /* 8px */
    border-top: 0.0625rem solid var(--color-neutrals-container-pressed); /* 1px */
}

.coming-events-explore__details[hidden][b-b2wc1oa1zp] {
    display: none;
}

/* 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: 0.75rem 1rem; /* 12px 16px */
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12px */
}

/* Phone first: the search field, its button and the filter toggle share one row; every other filter
   sits behind the toggle and opens on its own row below. */
.coming-events-filters__bar[b-o8i02v25yj] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 0.5rem; /* 12px 8px */
}

.coming-events-filters__search[b-o8i02v25yj] {
    flex: 1 1 0;
    min-width: 0;
}

.coming-events-filters__toggle[b-o8i02v25yj] {
    flex: none;
}

/* Below the laptop layout the row stays one control high: the label and the search hint are kept
   for assistive technology only, and the placeholder repeats the label. */
@media (max-width: 63.9375rem) { /* below 1024px */
    .coming-events-filters__search[b-o8i02v25yj]  .bs-input__label,
    .coming-events-filters__search[b-o8i02v25yj]  .bs-input__feedback:not(.bs-input__feedback--error) {
        position: absolute;
        width: 0.0625rem;
        height: 0.0625rem;
        padding: 0;
        margin: -0.0625rem;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

.coming-events-filters__panel[b-o8i02v25yj] {
    display: none;
    flex: 1 1 100%;
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); /* 200px */
    gap: 1rem; /* 16px */
    /* Inherits into the Bs* child labels rendered inside — no ::deep needed. */
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual;
}

.coming-events-filters__panel--expanded[b-o8i02v25yj] {
    display: grid;
}

.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[b-o8i02v25yj] {
        padding: 1rem 1.5rem 1.5rem; /* 16px 24px 24px */
    }

    .coming-events-filters__organizations[b-o8i02v25yj] {
        grid-column: 1 / -1;
    }
}

/* Laptop: no disclosure. The search and the filters share one grid whose columns keep a readable
   minimum width, so the row breaks where the width runs out (two rows with every filter on) instead
   of squeezing every chosen value down to a few letters. */
@media (min-width: 64rem) {
    .coming-events-filters__bar[b-o8i02v25yj] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); /* 208px */
        align-items: start;
    }

    .coming-events-filters__toggle[b-o8i02v25yj] {
        display: none;
    }

    /* The label is visible here, so the placeholder that repeats it is not shown. */
    .coming-events-filters__search[b-o8i02v25yj]  .bs-input__control::placeholder {
        color: transparent;
    }

    /* The filters become items of the bar's grid, next to the search. */
    .coming-events-filters__panel[b-o8i02v25yj] {
        display: contents;
    }

    .coming-events-filters__organizations[b-o8i02v25yj] {
        grid-column: span 2; /* a token box needs more room than a select */
    }
}

/* Below 1200px the search button shows its icon alone and leaves the width to the field. The text
   stays in the accessibility tree as the button's name. */
@media (max-width: 74.9375rem) {
    .coming-events-filters__search-text[b-o8i02v25yj] {
        position: absolute;
        width: 0.0625rem;
        height: 0.0625rem;
        padding: 0;
        margin: -0.0625rem;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 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. Mobile-first; the date range uses the
 * shared .bs-body-text-muted utility.
 */

.bs-enrollment__arrangement[b-aq5f0zo8tg] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bs-enrollment__eyebrow[b-aq5f0zo8tg] {
    margin: 0;
    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-default);
}

/* Same heading scale and colour as the ComingEvents page title. */
.bs-enrollment__arrangement-name[b-aq5f0zo8tg] {
    margin: 0;
    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);
    overflow-wrap: anywhere;
}

/* Focused by script on navigation (tabindex="-1") so screen readers start here; it is not an
   interactive control, and Chrome would otherwise draw a ring around it on every page load. */
.bs-enrollment__arrangement-name:focus[b-aq5f0zo8tg] {
    outline: none;
}

.bs-enrollment__arrangement-meta[b-aq5f0zo8tg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

[b-aq5f0zo8tg] .bs-enrollment__arrangement-info {
    min-height: 2.75rem;
    gap: 0.5rem;
}

/* Landscape phone: compact header so the first control stays above the fold. */
@media (max-height: 480px) {
    .bs-enrollment__eyebrow[b-aq5f0zo8tg] {
        display: none;
    }

    .bs-enrollment__arrangement-name[b-aq5f0zo8tg] {
        font-size: var(--font-h6-size, 1.25rem);
        line-height: var(--font-h6-line-height, 2rem);
    }
}
/* /Pages/Events/Enroll/EnrollmentErrorBanners.razor.rz.scp.css */
/* Focusing the message scrolls it into view; the margin keeps it clear of the sticky app bar and
   countdown banner. */
.enrollment-error-banners__focus-target[b-6iw6jnlk03] {
    scroll-margin-top: 10rem;
}
/* /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-on-primary);
}

.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-on-primary-hover, var(--color-on-primary));
}

/* 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). */

/* Mobile-first gutter: the page wrapper has no side padding on a phone, so the flow owns it. */
.bs-enrollment[b-jj0fz7r49a] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-inline: 1rem;
}

/* Flow-wide 44px minimum touch target for every button, including the shared step-body buttons. */
.bs-enrollment[b-jj0fz7r49a]  .bs-button,
.bs-enrollment[b-jj0fz7r49a]  .btn,
.bs-enrollment[b-jj0fz7r49a]  .bs-collapsible-card__header {
    min-height: 2.75rem;
}

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

.bs-enrollment__terminal-message:last-child[b-jj0fz7r49a] {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .bs-enrollment[b-jj0fz7r49a] {
        padding-inline: 0.5rem;
    }
}

/* Form steps stay at a readable line length on wide screens; steps with a side rail (services,
   hotel) are not capped. */
@media (min-width: 1024px) {
    .bs-enrollment[b-jj0fz7r49a]  .bs-guest-contact,
    .bs-enrollment[b-jj0fz7r49a]  .bs-otp-verification,
    .bs-enrollment[b-jj0fz7r49a]  .bs-guest-profile,
    .bs-enrollment[b-jj0fz7r49a]  .bs-guest-employment,
    .bs-enrollment[b-jj0fz7r49a]  .bs-participant-step,
    .bs-enrollment[b-jj0fz7r49a]  .bs-payer-step,
    .bs-enrollment[b-jj0fz7r49a]  .bs-questions-step {
        max-width: 45rem;
    }
}

/* Landscape phone: tighter rhythm so the first control is reachable without scrolling. */
@media (max-height: 480px) {
    .bs-enrollment[b-jj0fz7r49a] {
        gap: 0.75rem;
    }
}
/* /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;
    }
}

/* Buy membership panel */

.my-family-relations__buy-membership-section[b-9ov7e665a5] {
    padding-inline-end: var(--selfservice-mobile-menu-clearance);
}

@media (min-width: 768px) {
    .my-family-relations__buy-membership-section[b-9ov7e665a5] {
        padding-inline-end: 0;
    }
}
/* /Pages/MyGroups/MyCommunityGroup.razor.rz.scp.css */
/* Cancels MainLayout.razor's shared #page-body-container top padding (pt-3) on mobile only, so the
   header sits flush with the navbar. The legacy page lifts the whole container as it always has; the
   BrandSync page lifts only the header, so an announcement notice above it keeps the layout's spacing. */
@media (max-width: 767.98px) {
    .community-group-page-container:not(.community-group-page--brandsync)[b-caf8vuz2oh] {
        margin-top: -1rem;
    }

    .community-group-page--brandsync > .community-group-header-card:first-child[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;
    }
}

/* The slot takes the picture's own shape: a fixed height per breakpoint with the width following
   the image's aspect ratio, so a wide banner uploaded from the admin apps (which never crop) shows
   in full instead of being clipped to a square. Capped at half the header from 768px up, where the
   text column sits beside it. flex-start keeps the slot the size of its picture (or initials tile)
   instead of stretching across the column on mobile, so the camera badge stays on the picture. */
.community-group-photo-slot[b-caf8vuz2oh] {
    --community-group-photo-height: 8rem;
    max-width: 100%;
    align-self: flex-start;
}

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

@media (min-width: 1024px) {
    .community-group-photo-slot[b-caf8vuz2oh] {
        --community-group-photo-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 with the breakpoint height above; the width follows the
   image so nothing is cropped. contain (not cover) only matters when the slot's max-width bites on
   a very wide banner — the picture then shrinks to fit rather than losing its edges. */
.community-group-photo-slot .CommunityGroupPhoto[b-caf8vuz2oh] {
    width: auto;
    max-width: 100%;
    height: var(--community-group-photo-height);
    object-fit: contain;
}

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

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

/* No picture yet: the group's initials on a square tile, the same treatment as the dashboard's
   group avatars. Scoped under the slot so its width beats the slot rule's width:auto above.
   WCAG pair: --color-neutrals-container text on --color-primary-default background — customer must ensure 4.5:1 */
.community-group-photo-slot .community-group-photo-placeholder[b-caf8vuz2oh] {
    width: var(--community-group-photo-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-default);
    color: var(--color-neutrals-container);
    font-weight: 600;
    font-size: calc(var(--community-group-photo-height) / 3);
    line-height: 1;
    user-select: none;
}

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

    /* The settings button now sits in the card's top-right corner, and a wide picture spans the
       whole card width here, so the camera badge moves to the picture's bottom-right where the
       two cannot meet. Only the text column follows below it, never the tab row. */
    .community-group-photo-edit[b-caf8vuz2oh] {
        top: auto;
        bottom: 0.5rem;
    }
}

/* 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. Beside the photo (768px+) it matches the photo height. On
   mobile the block sits full-width below the photo (see .community-group-header above), so the cap
   is sized on its own: a two-line title plus two lines of description and the buttons need ~9rem. */
.community-group-content[b-caf8vuz2oh] {
    max-height: 10rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@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;
    /* overflow:hidden gives a flex item a zero minimum size, so without this the column would shrink
       the title itself when title + description exceed the cap, slicing its bottom line. The
       description wrap below is the part that yields. */
    flex-shrink: 0;
}

/* 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;
    position: relative;
    min-height: 0;
    min-width: 0;
}

/* Inline in running text, so the box stays one line tall; the 44px hit area comes from a pseudo-element. */
.community-group-description[b-caf8vuz2oh]  .bs-button::before {
    content: "";
    position: absolute;
    inset: -0.625rem 0;
}

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

/* Section tabs, per the BrandSync Tabs spec. On a phone they keep their natural width and scroll
   sideways, so labels never shrink or wrap; from 1024px they stretch to fill the row. The current tab
   is marked by an underline, not colour alone.
   WCAG pairs the customer must keep:
   - text --color-neutrals-default on --color-neutrals-container, --color-neutrals-container-hover and
     --color-neutrals-container-pressed: 4.5:1
   - underline and current-tab icon --color-primary-default on --color-neutrals-container: 3:1
   - focus ring --color-primary-focused on --color-neutrals-container: 3:1 */
.community-group-tab-nav[b-caf8vuz2oh] {
    display: flex;
    gap: 0.5rem;
    padding: 0 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--color-neutrals-container-hover);
}

.community-group-tab-nav[b-caf8vuz2oh]::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .community-group-tab-nav[b-caf8vuz2oh] {
        padding: 0 1rem;
    }
}

.community-group-tab-nav__link[b-caf8vuz2oh] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem 0.625rem;
    border-bottom: 0.125rem solid transparent;
    color: var(--color-neutrals-default);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
}

@media (min-width: 1024px) {
    .community-group-tab-nav__link[b-caf8vuz2oh] {
        flex: 1 0 auto;
    }
}

.community-group-tab-nav__link:hover[b-caf8vuz2oh] {
    color: var(--color-neutrals-default);
    background-color: var(--color-neutrals-container-hover);
}

.community-group-tab-nav__link:active[b-caf8vuz2oh] {
    background-color: var(--color-neutrals-container-pressed);
}

/* Inset past the 2px current-tab underline, so the ring never hides which tab is current. */
.community-group-tab-nav__link:focus-visible[b-caf8vuz2oh] {
    outline: 2px solid var(--color-primary-focused);
    outline-offset: -4px;
}

.community-group-tab-nav__link[aria-current="page"][b-caf8vuz2oh] {
    border-bottom-color: var(--color-primary-default);
}

.community-group-tab-nav__icon[b-caf8vuz2oh] {
    width: 1.25em;
    font-size: 1.25rem;
    line-height: 1;
    text-align: center;
}

.community-group-tab-nav__link[aria-current="page"] .community-group-tab-nav__icon[b-caf8vuz2oh] {
    color: var(--color-primary-default);
}

/* Heading over the card, the same rhythm as the members and meetings tabs. */
.community-group-files[b-caf8vuz2oh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* The native archive carries its own phone gutter (px-3), so the card adds none there. */
@media (max-width: 767.98px) {
    .community-group-files-card--native[b-caf8vuz2oh] {
        padding-inline: 0;
    }
}

/* On the BrandSync page the header is a rounded card like the tab content below it; its corners
   clip the group picture and the tab row. */
.community-group-header-card[b-caf8vuz2oh] {
    overflow: hidden;
}

/* Inset the picture and title together, so they stay top-aligned but clear the card's edge. */
.community-group-header-card .community-group-header[b-caf8vuz2oh] {
    padding: 1rem 1rem 0;
}

@media (min-width: 768px) {
    .community-group-header-card .community-group-header[b-caf8vuz2oh] {
        padding: 1.5rem 1.5rem 0;
    }
}

/* The legacy file manager draws into an empty #file-manager after its scripts load; until it has
   drawn anything, placeholder lines fill the card. */
.community-group-files-card__skeleton[b-caf8vuz2oh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.community-group-files-card:has(#file-manager:not(:empty)) .community-group-files-card__skeleton[b-caf8vuz2oh] {
    display: none;
}

/* Placeholder header while the group loads: the photo slot's height per breakpoint, a title and two
   description lines, and a row of tab-sized lines. The real header replaces it in place. */
.community-group-header-skeleton__header[b-caf8vuz2oh] {
    align-items: flex-start;
}

.community-group-header-skeleton__photo[b-caf8vuz2oh] {
    flex-shrink: 0;
    width: 8rem;
    height: 8rem;
}

.community-group-header-skeleton__text[b-caf8vuz2oh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.community-group-header-skeleton__title[b-caf8vuz2oh] {
    width: 60%;
    height: 1.75rem;
}

/* Same height as the real tab row (link padding, line and borders), so the swap does not shift the page. */
.community-group-header-skeleton__tabs[b-caf8vuz2oh] {
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: 3.0625rem;
    margin-top: 1rem;
}

.community-group-header-skeleton__tab[b-caf8vuz2oh] {
    width: 6rem;
}

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

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

    .community-group-header-skeleton__tabs[b-caf8vuz2oh] {
        justify-content: space-around;
    }
}

/* One phone gutter for the whole BrandSync page, like the dashboard (the container drops Bootstrap's
   p-0 for this). The meetings and members tabs carry their own (px-3) for the legacy page, which is
   taken away here so they don't get two. */
/* Room under the last card on every tab; the layout itself pads the bottom only on phones. */
.community-group-page--brandsync[b-caf8vuz2oh] {
    padding: 0 0 3rem;
}

@media (max-width: 767.98px) {
    .community-group-page--brandsync[b-caf8vuz2oh] {
        padding-inline: 1rem;
    }

    .community-group-page--brandsync[b-caf8vuz2oh]  .meetings.px-3,
    .community-group-page--brandsync[b-caf8vuz2oh]  .members.px-3 {
        padding-inline: 0 !important;
    }
}

.community-group-tabs__item[b-caf8vuz2oh] {
    flex-grow: 1;
    min-width: min-content;
}

.community-group-tabs__label[b-caf8vuz2oh] {
    overflow-wrap: normal;
    word-break: normal;
    -webkit-hyphens: manual;
    hyphens: manual;
}
/* /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/MyPersonalInfo.razor.rz.scp.css */
/* Narrower than the page's own 1280px content cap (bs-content-container) — the heading, hero and
   four cards read as a form, not a dashboard, and stay easier to scan at a narrower column on
   wide screens. No media query needed: max-width only constrains once the container would
   otherwise be wider than 960px, so mobile/tablet layouts are unaffected. */
.my-personal-info__narrow[b-ikumsj2c8j] {
    max-width: 960px;
    margin-inline: auto;
}

/* Loading skeleton — mirrors the hero + four section cards' real shape (banner/avatar, icon+title
   header, label/value field rows) rather than flat placeholder blocks, matching the dashboard's
   PersonalInfoDetailModule skeleton convention (shimmering skeleton-block/skeleton-line pieces
   shaped like the content they stand in for). */
.my-personal-info__skeleton-hero[b-ikumsj2c8j] {
    background-color: var(--color-neutrals-container);
    border-radius: var(--brand-border-radius, 16px);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.my-personal-info__skeleton-banner[b-ikumsj2c8j] {
    width: 100%;
    height: 80px;
    background-color: var(--color-primary-default);
    display: flex;
    justify-content: center;
}

.my-personal-info__skeleton-avatar[b-ikumsj2c8j] {
    width: 96px;
    height: 96px;
    margin-top: 32px;
    margin-bottom: -48px;
    border-radius: 50%;
}

.my-personal-info__skeleton-profile[b-ikumsj2c8j] {
    padding: 64px 24px 24px;
}

.my-personal-info__skeleton-name[b-ikumsj2c8j] {
    width: 10rem;
    height: var(--font-h6-line-height);
}

.my-personal-info__skeleton-card[b-ikumsj2c8j] {
    background-color: var(--color-neutrals-container);
    border-radius: var(--brand-border-radius, 16px);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.my-personal-info__skeleton-header[b-ikumsj2c8j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.my-personal-info__skeleton-icon[b-ikumsj2c8j] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

.my-personal-info__skeleton-title[b-ikumsj2c8j] {
    width: 8rem;
    height: var(--font-body-md-line-height);
}

.my-personal-info__skeleton-body[b-ikumsj2c8j] {
    display: flex;
    flex-direction: column;
    padding: 8px 24px 16px;
}

.my-personal-info__skeleton-row[b-ikumsj2c8j] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
}

.my-personal-info__skeleton-row .skeleton-line[b-ikumsj2c8j] {
    height: 16px;
}

.my-personal-info__skeleton-row .skeleton-line--short[b-ikumsj2c8j] {
    width: 30%;
    height: 12px;
}
/* /Pages/MyProfile/TrustCenter.razor.rz.scp.css */
.terms-scroll-container[b-z1nobwrc2l] {
    max-height: 300px;
    overflow-y: auto;
}
/* /Shared/MainLayout.razor.rz.scp.css */
.main-layout__skip-link:focus[b-zso4d5dqyw] {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 1100;
    padding: .5rem 1rem;
}

.main-layout__main:focus[b-zso4d5dqyw] {
    outline: none;
}

/* Pages with a sticky bar at the bottom (the enrollment total) lift the phone menu button above it
   and reserve room below the content, so the button never covers the page's own controls. */
@media (max-width: 767.98px) {
    .selfservice-mobile-menu-button--lifted[b-zso4d5dqyw] {
        bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }

    #page-content-wrapper.main-layout__content--mobile-menu-lifted[b-zso4d5dqyw] {
        padding-bottom: 10rem;
    }

    /* The expanded total grows upward into the lifted button's height; keep its content clear. */
    #page-content-wrapper.main-layout__content--mobile-menu-lifted[b-zso4d5dqyw]  .bs-services-step__summary--expanded {
        padding-inline-end: var(--selfservice-mobile-menu-clearance);
    }
}
/* /Shared/NotificationToast.razor.rz.scp.css */
.notification-toast__stack[b-shgefwti1t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 !important;
}

.notification-toast__stack:not(:empty) ~ .notification-toast__stack:not(:empty)[b-shgefwti1t] {
    margin-top: 8px !important;
}
/* /Shared/Sidebar.razor.rz.scp.css */
.sidebar__group-toggle[b-zguct5o1cz] {
    display: block;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: start;
    font: inherit;
    color: inherit;
    line-height: inherit;
    text-indent: inherit;
    cursor: pointer;
}

.sidebar__group-toggle:focus-visible[b-zguct5o1cz] {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}