/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-32m793kygq] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-32m793kygq] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-m6ahw4limt],
.components-reconnect-repeated-attempt-visible[b-m6ahw4limt],
.components-reconnect-failed-visible[b-m6ahw4limt],
.components-pause-visible[b-m6ahw4limt],
.components-resume-failed-visible[b-m6ahw4limt],
.components-rejoining-animation[b-m6ahw4limt] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-m6ahw4limt],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-m6ahw4limt],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-m6ahw4limt],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-m6ahw4limt],
#components-reconnect-modal.components-reconnect-retrying[b-m6ahw4limt],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-m6ahw4limt],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-m6ahw4limt],
#components-reconnect-modal.components-reconnect-failed[b-m6ahw4limt],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-m6ahw4limt] {
    display: block;
}


#components-reconnect-modal[b-m6ahw4limt] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-m6ahw4limt 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-m6ahw4limt 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-m6ahw4limt 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-m6ahw4limt]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-m6ahw4limt 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-m6ahw4limt {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-m6ahw4limt {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-m6ahw4limt {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-m6ahw4limt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-m6ahw4limt] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-m6ahw4limt] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-m6ahw4limt] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-m6ahw4limt] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-m6ahw4limt] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-m6ahw4limt] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-m6ahw4limt 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-m6ahw4limt] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-m6ahw4limt {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Checkout.razor.rz.scp.css */
/* FP-265-addon — payment-provider logo (wwwroot static asset) next to the option label,
   constrained to the text height. */
.payment-provider-logo[b-dw2jk83da3] {
    height: 20px;
    width: auto;
    display: block;
}
/* /Components/Pages/Policies/SchoolAgreementTerms.razor.rz.scp.css */
.terms-doc[b-p9ma5jeeeo] {
    overflow: hidden;
    border-radius: 12px;
}

.terms-doc__loading[b-p9ma5jeeeo] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

/* Brand-coloured strip along the top of the card. Colour comes from the school's config via an inline
   style; this is the fallback width/colour when no config is available. */
.terms-doc__accent[b-p9ma5jeeeo] {
    height: 6px;
    width: 100%;
    background: var(--mud-palette-primary);
}

.terms-doc__body[b-p9ma5jeeeo] {
    padding: 2rem 2.25rem 2.5rem;
}

@media (max-width: 599.98px) {
    .terms-doc__body[b-p9ma5jeeeo] {
        padding: 1.25rem 1.25rem 1.75rem;
    }
}

.terms-doc__brand[b-p9ma5jeeeo] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1.5rem;
}

.terms-doc__logo[b-p9ma5jeeeo] {
    max-height: 48px;
    max-width: 160px;
    object-fit: contain;
}

.terms-doc__school[b-p9ma5jeeeo] {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
}

.terms-doc__title[b-p9ma5jeeeo] {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.terms-doc__meta[b-p9ma5jeeeo] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
}

.terms-doc__divider[b-p9ma5jeeeo] {
    margin: 1rem 0 1.5rem;
}

/* Readable legal copy. ::deep so the rules reach the HTML injected via MarkupString. */
.legal-content[b-p9ma5jeeeo] {
    color: var(--mud-palette-text-primary);
    line-height: 1.7;
    font-size: 0.95rem;
}

.legal-content[b-p9ma5jeeeo]  h1,
.legal-content[b-p9ma5jeeeo]  h2,
.legal-content[b-p9ma5jeeeo]  h3 {
    margin: 1.5rem 0 0.5rem;
    line-height: 1.3;
    font-weight: 600;
}

.legal-content[b-p9ma5jeeeo]  p {
    margin: 0 0 1rem;
}

.legal-content[b-p9ma5jeeeo]  ul,
.legal-content[b-p9ma5jeeeo]  ol {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

.legal-content[b-p9ma5jeeeo]  li {
    margin-bottom: 0.35rem;
}

.legal-content[b-p9ma5jeeeo]  a {
    color: var(--mud-palette-primary);
}
/* /Components/Pages/ProductList.razor.rz.scp.css */
/* FP-164-addon — product-listing sort toolbar. The sort control sits right-aligned on its own row,
   visually separated from the category filter above and the product grid below; full-width on mobile. */
.listing-toolbar[b-bpa7xycx68] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 4px 0 20px;
}

.listing-toolbar__sort[b-bpa7xycx68] {
    width: 240px;
}

@media (max-width: 600px) {
    .listing-toolbar__sort[b-bpa7xycx68] {
        width: 100%;
    }
}

/* FP-164-addon — keep the sort control understated: a quiet neutral grey rather than the school's
   brand colour, in every state, so it reads as a secondary listing tool. MudSelect normally paints the
   outlined border + label with the theme primary on focus/open; we override that with !important since
   the intent is to deviate from the theme for this one control. A neutral-but-visible focus ring is
   kept via :focus-within on our own wrapper (WCAG 2.4.7), independent of MudBlazor's focus classes. */
.listing-toolbar__sort[b-bpa7xycx68]  .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs) !important;
    border-width: 1px !important;
}

.listing-toolbar__sort:focus-within[b-bpa7xycx68]  .mud-input-outlined-border {
    border-color: var(--mud-palette-text-secondary) !important;
    border-width: 2px !important;
}

.listing-toolbar__sort[b-bpa7xycx68]  .mud-input-label {
    color: var(--mud-palette-text-secondary) !important;
}

.listing-toolbar__sort[b-bpa7xycx68]  .mud-input-adornment .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/ShopHome.razor.rz.scp.css */
/* FP-261-addon — full-bleed shop-home hero.
   The background spans the full viewport width and sits flush under the fixed
   Dense AppBar, while the heading/subtitle stay in the MudContainer's normal
   flow so they align with the product grid below. The bleed is done with a
   ::before layer (not by moving the text) precisely to keep that alignment. */
.shop-hero[b-t74qnrbc2b] {
    position: relative;
    /* Own stacking context so the ::before background layer (z-index:-1) sits
       behind the heading/subtitle without escaping behind the page background —
       and without needing a child selector (scoped CSS can't tag MudText). */
    isolation: isolate;
    /* Pull flush under the AppBar: cancel the MudContainer's py-4 top padding
       (16px) plus the residual gap between MudMainContent's pt-16 (64px) and the
       48px Dense AppBar (16px). Coupled to the layout's Dense AppBar + pt-16. */
    margin-top: -32px;
    margin-bottom: 24px;
    padding: 88px 0;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.shop-hero[b-t74qnrbc2b]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    background: var(--shop-hero-bg);
    z-index: -1;
}

@media (max-width: 600px) {
    .shop-hero[b-t74qnrbc2b] {
        padding: 48px 0;
        min-height: 180px;
    }
}
/* /Components/Pages/WidgetPreview.razor.rz.scp.css */
/* FP-116-addon-2 — chrome for the simulated "school's own website" the widget is previewed on.
   Deliberately plain and neutral: nothing here should read as Optima's design, or the preview stops
   showing what a third-party page actually looks like with the widget on it. Colours come from the
   school's storefront config via inline style, never hardcoded. */

.widget-preview[b-6nuvfgv6r5] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 12px 48px;
}

.widget-preview__notice[b-6nuvfgv6r5],
.widget-preview__error[b-6nuvfgv6r5] {
    margin-bottom: 16px;
}

/* The frame that stands in for the school's site — a hairline so it is obvious where the host page
   ends and the widget begins. */
.widget-preview__site[b-6nuvfgv6r5] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.widget-preview__site-header[b-6nuvfgv6r5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    /* Fallback only — the real colours arrive as an inline style from the school's config. */
    background: var(--mud-palette-surface);
}

.widget-preview__logo[b-6nuvfgv6r5] {
    height: 32px;
    max-width: 160px;
    object-fit: contain;
}

.widget-preview__site-name[b-6nuvfgv6r5] {
    font-size: 1.125rem;
    font-weight: 600;
}

.widget-preview__site-nav[b-6nuvfgv6r5] {
    margin-left: auto;
    display: flex;
    gap: 20px;
    font-size: 0.875rem;
    opacity: 0.85;
}

.widget-preview__site-body[b-6nuvfgv6r5] {
    padding: 24px 20px 32px;
}

.widget-preview__site-heading[b-6nuvfgv6r5] {
    margin: 0 0 4px;
    font-size: 1.5rem;
    font-weight: 500;
}

.widget-preview__site-intro[b-6nuvfgv6r5] {
    margin: 0 0 24px;
    font-size: 0.9375rem;
}

.widget-preview__loading[b-6nuvfgv6r5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 32px 0;
}

.widget-preview__site-footer[b-6nuvfgv6r5] {
    padding: 16px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.8125rem;
}

@media (max-width: 599.98px) {
    .widget-preview__site-nav[b-6nuvfgv6r5] {
        display: none;
    }
}
/* /Components/Shared/CategoryFilter.razor.rz.scp.css */
/* FP-163-addon — storefront category cards (image + name + description), two-level browse.
   Colour comes from MudBlazor theme variables so it tracks the per-school brand theme. */

.category-cards[b-4dsqr9dake] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.category-card[b-4dsqr9dake] {
    display: flex;
    flex-direction: column;
    width: 160px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.category-card:hover[b-4dsqr9dake] {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--mud-elevation-4);
    transform: translateY(-2px);
}

/* Keyboard focus keeps a clearly visible ring (the cards are role="button" divs). */
.category-card:focus-visible[b-4dsqr9dake] {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--mud-elevation-4);
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Selected state is conveyed by a checkmark badge (a shape cue — WCAG 1.4.1, not colour alone) plus a
   thin brand border and a brand-coloured label. No heavy ring. aria-pressed carries it for assistive tech. */
.category-card--active[b-4dsqr9dake] {
    border-color: var(--mud-palette-primary);
}
.category-card--active .category-card__name[b-4dsqr9dake] {
    /* Weight (not colour) reinforces selection — brand colour as text on white can fall below 4.5:1.
       The check badge is the primary cue. */
    font-weight: 700;
}

/* Uniform media band — image OR brand-tinted placeholder, so every card is the same shape regardless
   of whether it (or any sibling) has an image. */
.category-card__media[b-4dsqr9dake] {
    position: relative;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Selected-card checkmark badge — a brand-filled circle with a white check in the media corner. */
.category-card__check[b-4dsqr9dake] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    box-shadow: var(--mud-elevation-3);
}
.category-card__check[b-4dsqr9dake]  .mud-icon-root {
    font-size: 1rem;
}

.category-card__img[b-4dsqr9dake] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Bias the crop toward the upper-middle so portrait subjects (faces) show, not the bottom of the image. */
    object-position: center 25%;
    display: block;
}

/* Image-less placeholder: a soft diagonal brand tint with a monogram / icon. The monogram uses the
   AA-safe brand-on-light colour (the darkened brand) at full opacity so it stays clearly visible on the
   pale tile even when the brand colour itself is light (a faint translucent brand would vanish). */
.category-card__placeholder[b-4dsqr9dake] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--storefront-brand-on-light, var(--mud-palette-primary));
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mud-palette-primary) 18%, var(--mud-palette-surface)),
        color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)));
}

.category-card__placeholder[b-4dsqr9dake]  .mud-icon-root {
    font-size: 2rem;
}

.category-card__body[b-4dsqr9dake] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.7rem;
}

.category-card__name[b-4dsqr9dake] {
    font-weight: 600;
    line-height: 1.2;
}

.category-card__desc[b-4dsqr9dake] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    /* Keep cards uniform: clamp the description to two lines. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Sub-category pills (second level) ────────────────────────────────────────
   The sub-level reuses each category's image as a small round thumbnail inside a
   compact pill, so the image is no longer wasted — without a second wall of large
   tiles. Image-less subs get a brand monogram; the parent "all" chip gets a grid
   icon. Rendered in API order (SortOrder), so priority is preserved. */
.category-subfilter[b-4dsqr9dake] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.sub-chip[b-4dsqr9dake] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.25rem 0.85rem 0.25rem 0.3rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.sub-chip:hover[b-4dsqr9dake] {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--mud-elevation-2);
}

.sub-chip:focus-visible[b-4dsqr9dake] {
    border-color: var(--mud-palette-primary);
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Selected sub-chip: brand border + inset ring + bold label. Weight (not colour
   alone) is the non-colour cue; aria-pressed carries it for assistive tech. */
.sub-chip--active[b-4dsqr9dake] {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}
.sub-chip--active .sub-chip__label[b-4dsqr9dake] {
    font-weight: 700;
}

.sub-chip__label[b-4dsqr9dake] {
    padding-right: 0.15rem;
}

/* 28px round media on the left of every pill — image, monogram, or "all" icon —
   so every pill is the same shape regardless of whether the sub has an image. */
.sub-chip__thumb[b-4dsqr9dake],
.sub-chip__mono[b-4dsqr9dake],
.sub-chip__all[b-4dsqr9dake] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sub-chip__thumb[b-4dsqr9dake] {
    object-fit: cover;
    /* Match the card crop bias so faces/subjects show, not the bottom of the image. */
    object-position: center 25%;
}

.sub-chip__mono[b-4dsqr9dake] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--storefront-brand-on-light, var(--mud-palette-primary));
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mud-palette-primary) 22%, var(--mud-palette-surface)),
        color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface)));
}

.sub-chip__all[b-4dsqr9dake] {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
}
.sub-chip__all[b-4dsqr9dake]  .mud-icon-root {
    font-size: 1.05rem;
}

/* Mobile: cards go full-width-ish so they stay tappable (>= 44px tall). */
@media (max-width: 599px) {
    .category-card[b-4dsqr9dake] {
        width: calc(50% - 0.375rem);
    }
}