/* /Components/Admin/Pages/Listings/ListingMedia.razor.rz.scp.css */
.listing-media-thumb[b-15kl4rpqlz] {
    position: relative;
    border-top-left-radius: var(--radius-md, 0.5rem);
    border-top-right-radius: var(--radius-md, 0.5rem);
}

.listing-media-cover-badge[b-15kl4rpqlz] {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background-color: var(--bs-primary, #0d6efd);
    border-radius: var(--radius-pill, 50rem);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.listing-media-cover-badge i[b-15kl4rpqlz] {
    font-size: 0.9375rem;
}
/* /Components/Admin/Shared/NotificationBell.razor.rz.scp.css */
/* ============================================================
   Notification bell — topbar island
   Tokens only (brand/theme/light/dark). No hardcoded colours: a literal here would look correct in one
   theme and unreadable in the other, which is exactly the bug the token system exists to prevent.
   ============================================================ */

.notif-bell[b-1z1scypmst] {
    position: relative;
}

/* Badge: compact pill pinned to the icon corner. Sized in rem so it tracks the user's font scaling
   instead of drifting off the glyph. */
.notif-badge[b-1z1scypmst] {
    position: absolute;
    top: 0.15rem;
    inset-inline-end: 0.15rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.25rem;
    border-radius: var(--radius-pill);
    background: var(--badge-danger-bg);
    color: var(--badge-danger-fg);
    font-size: 0.6rem;
    font-weight: var(--fw-medium);
    line-height: 1.05rem;
    text-align: center;
    pointer-events: none;
}

.notif-menu[b-1z1scypmst] {
    width: min(360px, calc(100vw - var(--space-4) * 2));
    padding: 0;
    overflow: hidden;
    background: var(--surface-overlay);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.notif-header[b-1z1scypmst] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.notif-title[b-1z1scypmst] {
    flex: 1 1 auto;
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}

.notif-action[b-1z1scypmst] {
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-link);
    font-size: var(--fs-xs);
    cursor: pointer;
}

    .notif-action:hover:not(:disabled)[b-1z1scypmst] {
        color: var(--text-link-hover);
    }

    .notif-action:disabled[b-1z1scypmst] {
        color: var(--text-muted);
        cursor: default;
    }

/* The scroll lives on the list, not the menu, so the header and footer stay pinned while the items move. */
.notif-list[b-1z1scypmst] {
    max-height: min(420px, 60vh);
    overflow-y: auto;
}

.notif-item[b-1z1scypmst] {
    display: flex;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

    .notif-item:last-child[b-1z1scypmst] {
        border-bottom: 0;
    }

    .notif-item:hover[b-1z1scypmst],
    .notif-item:focus-visible[b-1z1scypmst] {
        background: var(--surface-hover);
    }

.notif-icon[b-1z1scypmst] {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    font-size: var(--fs-md);
}

.sev-info[b-1z1scypmst] {
    color: var(--icon-tint-info-fg);
}

.sev-success[b-1z1scypmst] {
    color: var(--color-success);
}

.sev-warning[b-1z1scypmst] {
    color: var(--color-warning);
}

.sev-error[b-1z1scypmst] {
    color: var(--color-danger);
}

.notif-body[b-1z1scypmst] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0; /* lets the truncation below actually apply inside a flex child */
    flex: 1 1 auto;
}

.notif-item-title[b-1z1scypmst] {
    color: var(--text-primary);
    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-item-message[b-1z1scypmst] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    /* Two lines, then ellipsis: enough for a useful message without one verbose notification pushing the
       rest of the list out of view. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-item-time[b-1z1scypmst] {
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

/* Unread is carried by weight AND the dot, never by colour alone — colour-only would be invisible to a
   colour-blind user and washes out in dark mode. */
.is-unread .notif-item-title[b-1z1scypmst] {
    font-weight: var(--fw-medium);
}

.is-read .notif-item-title[b-1z1scypmst],
.is-read .notif-item-message[b-1z1scypmst] {
    color: var(--text-muted);
}

.notif-dot[b-1z1scypmst] {
    flex: 0 0 auto;
    align-self: center;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--brand-500);
}

.notif-empty[b-1z1scypmst] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-3);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

    .notif-empty .bi[b-1z1scypmst] {
        font-size: var(--fs-xl);
    }

.notif-footer[b-1z1scypmst] {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border-subtle);
    text-align: center;
}

    .notif-footer a[b-1z1scypmst] {
        color: var(--text-link);
        font-size: var(--fs-xs);
        text-decoration: none;
    }

        .notif-footer a:hover[b-1z1scypmst] {
            color: var(--text-link-hover);
            text-decoration: underline;
        }

/* Phones: the dropdown becomes a near-full-width sheet anchored to the topbar, because a 360px menu
   anchored to the right edge of a 360px viewport would hang off the screen. */
@media (max-width: 575.98px) {
    .notif-menu[b-1z1scypmst] {
        position: fixed;
        inset-inline: var(--space-2);
        width: auto;
    }
}
/* /Components/Admin/Shared/SupportSessionBanner.razor.rz.scp.css */
.support-banner[b-xe94xi6u6h] {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-5qaf3pdozn] {
    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-5qaf3pdozn] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-nvpvn0lnjv],
.components-reconnect-repeated-attempt-visible[b-nvpvn0lnjv],
.components-reconnect-failed-visible[b-nvpvn0lnjv],
.components-pause-visible[b-nvpvn0lnjv],
.components-resume-failed-visible[b-nvpvn0lnjv],
.components-rejoining-animation[b-nvpvn0lnjv] {
    display: none;
}

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


#components-reconnect-modal[b-nvpvn0lnjv] {
    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-nvpvn0lnjv 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-nvpvn0lnjv {
    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/Storefront/Pay/PayIsland.razor.rz.scp.css */
/* Same scoped contrast bump and card elevation as the signup island (SignupIsland.razor.css): the storefront's
   global --bs-border-color reads too faint for form fields on a white card. Neutral gray only; the storefront is
   light-only, so there is no dark variant. ::deep reaches the inputs/selects rendered inside this component. */

[b-u74a82bswd] .form-control,
[b-u74a82bswd] .form-select {
    border-color: rgba(0, 0, 0, 0.42);
}

[b-u74a82bswd] .form-control:hover,
[b-u74a82bswd] .form-select:hover {
    border-color: rgba(0, 0, 0, 0.55);
}

[b-u74a82bswd] .form-check-input:not(:checked) {
    border-color: rgba(0, 0, 0, 0.42);
}

.pay-card[b-u74a82bswd] {
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.14);
}
/* /Components/Storefront/Signup/SignupIsland.razor.rz.scp.css */
/* Scoped contrast bump for the self-serve signup form only.
   The storefront's global --bs-border-color (#bdbdbd) reads too faint for form fields on the white
   signup card (owner, 2026-09). The storefront-wide token pass is a separate owner-flagged Deferred item
   (Receiving: Storefront - contrast); this rule is deliberately scoped to the signup island so it does
   not silently restyle every other storefront form. Neutral gray only (no brand hue), storefront is
   light-only so there is no dark variant to keep in step.

   ::deep is REQUIRED here: the fields are rendered by <InputText>/<InputSelect>/<InputNumber> child
   components, so the plain-element scope attribute never lands on the <input>/<select> itself. ::deep
   matches on the scoped ANCESTOR (the form card in this component's own markup) instead, which does carry
   the scope attribute, so the descendant controls are reached across the component boundary. */

[b-jazlm6zuuk] .form-control,
[b-jazlm6zuuk] .form-select {
    border-color: rgba(0, 0, 0, 0.42);
}

[b-jazlm6zuuk] .form-control:hover,
[b-jazlm6zuuk] .form-select:hover {
    border-color: rgba(0, 0, 0, 0.55);
}

[b-jazlm6zuuk] .input-group-text {
    border-color: rgba(0, 0, 0, 0.42);
}

/* The unchecked checkbox ("I need an invoice") uses the same faint global border and almost disappears on the
   white card; give it the field border. The checked state keeps Bootstrap's primary fill. */
[b-jazlm6zuuk] .form-check-input:not(:checked) {
    border-color: rgba(0, 0, 0, 0.42);
}

/* The card carried `border-0 shadow-sm`, which reads as a floating white block with no edge on the white
   page (owner, 2026-09). Give it a real (but neutral) border and a fuller elevation. The card is a plain
   element in THIS component's markup, so it already carries the scope attribute - no ::deep needed here. */
.signup-card[b-jazlm6zuuk] {
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.14);
}