/* /Components/Layout/ActiveSessions.razor.rz.scp.css */
/* Активни сесии — chip во хедерот + hover ролетна (само надредени ја имаат во DOM). */
.presence-wrap[b-czslee28ak] {
    position: relative;
    display: flex;
    align-items: center;
}

.presence-chip[b-czslee28ak] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

.presence-dot[b-czslee28ak] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 5px #22c55e;
}

.presence-sep[b-czslee28ak] { opacity: 0.45; }

.presence-menu[b-czslee28ak] {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 400;
    min-width: 230px;
    max-height: 340px;
    overflow-y: auto;
    background: #1e2430;
    color: #eef1f6;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    padding: 8px 10px;
}

/* Mouse-over ја отвора; останува отворена додека курсорот е врз chip-от ИЛИ менито. */
.presence-wrap:hover .presence-menu[b-czslee28ak] { display: block; }

.presence-menu-title[b-czslee28ak] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.6;
    margin-bottom: 4px;
}

.presence-row[b-czslee28ak] {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 12.5px;
    padding: 2.5px 0;
}

.presence-role[b-czslee28ak] { opacity: 0.55; font-size: 11.5px; }
.presence-empty[b-czslee28ak] { opacity: 0.4; }

/* Мобилен: бројките остануваат, ролетната е hover-базирана и без hover не пречи. */
@media (max-width: 640px) {
    .presence-chip[b-czslee28ak] { padding: 3px 7px; font-size: 11.5px; }
}
/* /Components/Layout/ClientPortalLayout.razor.rz.scp.css */
/* B2B client portal app chrome (prototype #clientSidebarNav + the client viewport). The sidebar is
   REAL app chrome on the left — not inside the page body — so a client (and the staff preview) gets a
   self-contained client application, never the backoffice with an empty staff menu. */
.cportal-app[b-1okcwiv07t] {
    display: flex;
    min-height: 100vh;
    background: var(--mud-palette-background);
}

.cportal-sidebar[b-1okcwiv07t] {
    flex: 0 0 248px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
}

/* Never scrolls away: the logo is how a studio knows whose portal it is looking at, and on a laptop the
   menu underneath is taller than the screen. */
.cportal-brand[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 14px;
    flex: 0 0 auto;
}

.cportal-brand-logo[b-1okcwiv07t] {
    height: 30px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* The menu is what scrolls, not the sidebar: the sidebar is exactly one screen tall and the brand stays
   pinned at the top of it. Without this the list was simply cut off at the bottom edge — on a laptop the
   last modules of My Web were unreachable, and nothing said they were there (Igor, 20.09.2026).

   min-height:0 is the part that does the work: a flex child will not shrink below its content otherwise,
   so the overflow never engages and the list runs off the screen. */
.cportal-nav[b-1okcwiv07t] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;

    /* Room under the last module so it does not sit flush against the edge. */
    padding-bottom: 12px;

    /* The list is the only thing that scrolls — a wheel over it must not carry on into the page behind. */
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* Section header — tinted with the section's signature colour (set inline per section). */
.cportal-nav-section[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 12px 12px 4px;
}

.cnav-sec-ic[b-1okcwiv07t] {
    font-size: .9rem;
    line-height: 1;
}

.cportal-nav-divider[b-1okcwiv07t] {
    border-top: 1px solid var(--mud-palette-lines-default);
    margin: 8px 12px;
}

/* A module sub-link: a section-coloured bullet + icon + label, with the cart badge / "soon" chip pushed right. */
.cportal-link[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px 8px 14px;
    border-radius: 8px;
    font-size: .86rem;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    user-select: none;
}

.cportal-link:hover[b-1okcwiv07t] {
    background: color-mix(in srgb, var(--cp-accent, var(--mud-palette-success)) 9%, transparent);
}

.cportal-link.active[b-1okcwiv07t] {
    background: color-mix(in srgb, var(--cp-accent, var(--mud-palette-success)) 15%, transparent);
    color: var(--cp-accent, var(--mud-palette-success));
    font-weight: 700;
}

/* A My Web module waiting on the Website builder. Dimmed and inert, still in its place in the order. */
.cportal-link.is-locked[b-1okcwiv07t] {
    opacity: .45;
    cursor: not-allowed;
}

.cportal-link.is-locked:hover[b-1okcwiv07t] {
    background: transparent;
}

.cnav-lock[b-1okcwiv07t] {
    flex: 0 0 auto;
    font-size: .72rem;
    line-height: 1;
}

/* Submenu bullet in the section's colour (dim until active/hover, solid when active). */
.cnav-bullet[b-1okcwiv07t] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cp-accent, var(--mud-palette-success));
    opacity: .45;
}

.cportal-link:hover .cnav-bullet[b-1okcwiv07t],
.cportal-link.active .cnav-bullet[b-1okcwiv07t] {
    opacity: 1;
}

.cnav-ic[b-1okcwiv07t] {
    font-size: 1.02rem;
    line-height: 1;
}

.cnav-label[b-1okcwiv07t] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cart count marker (mirrors the prototype header's cart badge) — in the B2B section colour. */
.cnav-badge[b-1okcwiv07t] {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--cp-accent, var(--mud-palette-success));
    color: #06210f;
    font-size: .68rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

/* "soon" chip on not-yet-built modules. */
.cnav-soon[b-1okcwiv07t] {
    flex: 0 0 auto;
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
    border-radius: 5px;
    padding: 1px 5px;
}

/* Client viewport: a slim header + the section content area. */
.cportal-viewport[b-1okcwiv07t] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cportal-header[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Staff preview/session client-identity chip (left of the search). */
.cportal-header-context[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Centered global search (prototype #global-search). */
.cportal-search-wrap[b-1okcwiv07t] {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    position: relative;
    min-width: 0;
}

.cportal-search-box[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 460px;
    padding: 7px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-background);
}

.cportal-search-box:focus-within[b-1okcwiv07t] {
    border-color: var(--mud-palette-success);
}

.cportal-search-ic[b-1okcwiv07t] {
    font-size: .82rem;
    opacity: .7;
}

.cportal-search-input[b-1okcwiv07t] {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-size: .85rem;
    min-width: 0;
}

.cportal-search-kbd[b-1okcwiv07t] {
    font-family: var(--font-mono, monospace);
    font-size: .62rem;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 1px 5px;
}

.cportal-search-results[b-1okcwiv07t] {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 460px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
    padding: 6px;
    z-index: 1300;
}

.cportal-search-item[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.cportal-search-item:hover[b-1okcwiv07t] {
    background: var(--mud-palette-action-default-hover);
}

.cportal-search-item-label[b-1okcwiv07t] {
    flex: 1 1 auto;
    font-size: .85rem;
    font-weight: 600;
}

.cportal-search-item-kind[b-1okcwiv07t] {
    font-size: .68rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cportal-header-actions[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Shared transparent click-away backdrop for the manual dropdowns (search + user-menu). */
.cportal-menu-backdrop[b-1okcwiv07t] {
    position: fixed;
    inset: 0;
    z-index: 1290;
}

/* Client user-menu (prototype renderClientUserMenu / toggleUserMenu): avatar + name + role + caret. */
.cportal-user-wrap[b-1okcwiv07t] {
    position: relative;
}

.cportal-user[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.cportal-user:hover[b-1okcwiv07t] {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-success);
}

.cportal-avatar[b-1okcwiv07t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mud-palette-success);
    color: #06231f;
    font-size: .74rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.cportal-user-meta[b-1okcwiv07t] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.cportal-user-name[b-1okcwiv07t] {
    font-size: .78rem;
    font-weight: 700;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cportal-user-role[b-1okcwiv07t] {
    font-size: .66rem;
    font-family: var(--font-sans);
    color: var(--mud-palette-text-secondary);
}

.cportal-user-caret[b-1okcwiv07t] {
    font-size: .7rem;
    opacity: .6;
}

.cportal-user-pop[b-1okcwiv07t] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
    padding: 6px;
    z-index: 1300;
}

.cportal-menu-item[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
}

.cportal-menu-item:hover[b-1okcwiv07t] {
    background: var(--mud-palette-action-default-hover);
}

.cportal-menu-item.logout[b-1okcwiv07t] {
    color: var(--mud-palette-error);
}

.cportal-content[b-1okcwiv07t] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 20px 24px;
}

/* Staff read-only client-portal PREVIEW banner (prototype #clientPreviewBanner · lines 1613-1616):
   a full-width bar across the top of the previewed client shell. */
.cportal-preview-banner[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: rgba(34, 197, 94, .10);
    border: 1px solid var(--mud-palette-success);
    border-radius: 10px;
    padding: 10px 16px;
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cportal-preview-banner .cpb-tag[b-1okcwiv07t] {
    color: var(--mud-palette-text-secondary);
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 400;
}

.cportal-preview-banner .cpb-sub[b-1okcwiv07t] {
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-weight: 400;
    margin-top: 2px;
}

.cportal-preview-banner .cpb-exit[b-1okcwiv07t] {
    cursor: pointer;
    white-space: nowrap;
    font-weight: 700;
    color: var(--mud-palette-success);
    user-select: none;
}

/* Authorised on-behalf SESSION banner (prototype showImpersonationBanner / directClientSession): a stronger,
   solid green bar — distinct from the muted read-only preview — signalling the portal is WRITABLE. */
.cportal-session-banner[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: rgba(34, 197, 94, .18);
    border: 1px solid var(--mud-palette-success);
    border-radius: 10px;
    padding: 10px 16px;
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.cportal-session-banner .cpb-exit[b-1okcwiv07t] {
    cursor: pointer;
    white-space: nowrap;
    font-weight: 700;
    color: var(--mud-palette-success);
    user-select: none;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The layout chrome (app bar, drawer, content) is MudLayout / MudAppBar / MudDrawer,
   which theme with MudThemeProvider. The old template rules (.page, main, .sidebar,
   .top-row) are no longer emitted by this component, so they were dead — and their
   hardcoded colors (e.g. the blue→purple .sidebar gradient, #f7f7f7 top-row) ignored
   the theme. Only the Blazor error banner below is still used. */

#blazor-error-ui[b-t91lzwixjr] {
    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-t91lzwixjr] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Sidebar styling — ported from the prototype's #mainSidebarNav (v2.174.0). Uses the shared design
   tokens already defined in app.css (--zenic-green, --surface-*, --text-*, --border, --font-mono). */

.zenic-sidebar[b-06gizxygol] {
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;
}

/* ── section header (collapsible, with − toggle + attention dot) ── */
.sidebar-section-label[b-06gizxygol] {
    font-family: var(--font-sans);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-secondary);
    padding: 20px 16px 6px;
    font-weight: 700;
}

.sidebar-section-label.collapsible[b-06gizxygol] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

.sidebar-section-label.collapsible:hover[b-06gizxygol] {
    color: var(--text-primary);
}

.sidebar-section-label .sec-toggle[b-06gizxygol] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-muted);
    background: var(--surface-3);
    transition: all 0.15s;
    flex-shrink: 0;
}

.sidebar-section-label.collapsible:hover .sec-toggle[b-06gizxygol] {
    color: var(--text-primary);
    background: var(--surface-2);
}

.sidebar-section-label .sec-label-text[b-06gizxygol] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.sec-attention-dot[b-06gizxygol] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger-strong);
    box-shadow: 0 0 0 2px var(--surface-1);
    display: none;
    flex-shrink: 0;
}

.sec-attention-dot.show[b-06gizxygol] {
    display: inline-block;
}

/* ── nav item ── */
.nav-link[b-06gizxygol] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    margin: 1px 8px;
    border-radius: 7px;
    border-left: 3px solid transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.nav-link:hover[b-06gizxygol] {
    background: var(--surface-3);
    color: var(--text-primary);
}

.nav-link svg[b-06gizxygol] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* active state (prototype .active-nav) */
.nav-link.active-nav[b-06gizxygol] {
    background: linear-gradient(90deg, var(--zenic-green-dim), transparent);
    color: var(--text-primary);
    font-weight: 700;
    border-left: 3px solid var(--zenic-green);
}

/* ── attention badge (prototype .nav-attention-badge): a red approval count on a nav item
   that needs the viewer's review. Hidden by default; .show reveals it with a subtle pulse. ── */
.nav-attention-badge[b-06gizxygol] {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--danger-strong);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    font-family: var(--font-sans); font-variant-numeric: tabular-nums;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.nav-attention-badge.show[b-06gizxygol] {
    display: inline-flex;
    animation: attnPulse-b-06gizxygol 1.8s ease-in-out infinite;
}

@keyframes attnPulse-b-06gizxygol {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

.nav-caret[b-06gizxygol] {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.5;
    transition: transform 0.15s;
}

/* Collapsed group: the caret points right (prototype parity). */
.nav-link.is-collapsed .nav-caret[b-06gizxygol] {
    transform: rotate(-90deg);
}

/* ── submenu ── */
.nav-submenu[b-06gizxygol] {
    display: flex;
    flex-direction: column;
}

.nav-submenu.group-collapsed[b-06gizxygol] {
    display: none !important;
}

.nav-sublink[b-06gizxygol] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 44px;
    font-size: 12.5px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s;
    border-left: 2px solid transparent;
    font-weight: 500;
    text-decoration: none;
}

.nav-sublink:hover[b-06gizxygol] {
    color: var(--text-primary);
    background: var(--surface-2);
}

.nav-sublink.active-sub[b-06gizxygol] {
    color: var(--text-primary);
    font-weight: 700;
    border-left-color: var(--zenic-green);
    background: var(--surface-2);
}

.nav-sublink .sub-dot[b-06gizxygol] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    /* --sub-dot-color is set per submenu to the section's signature colour (NavMenu.razor); falls back to text colour. */
    background: var(--sub-dot-color, currentColor);
    opacity: 0.9;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-l6rri1qrza],
.components-reconnect-repeated-attempt-visible[b-l6rri1qrza],
.components-reconnect-failed-visible[b-l6rri1qrza],
.components-pause-visible[b-l6rri1qrza],
.components-resume-failed-visible[b-l6rri1qrza],
.components-rejoining-animation[b-l6rri1qrza] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-l6rri1qrza {
    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/Portal.razor.rz.scp.css */
/* B2B client self-service portal — the page renders only the active cview-* SECTION CONTENT; the
   sidebar + header + preview banner are the layout's chrome (ClientPortalLayout). */
.cportal-main[b-o7eice7ugh] {
    flex: 1 1 auto;
    min-width: 0;
}

.cportal-pay-opt[b-o7eice7ugh] {
    text-transform: none;
    padding: 14px;
    text-align: left;
    justify-content: flex-start;
}

/* Support ticket reply thread — staff replies tinted with the Support (teal) accent, client replies neutral. */
.ctk-reply[b-o7eice7ugh] {
    border-radius: 8px;
    padding: 7px 10px;
    margin-bottom: 6px;
    border: 1px solid var(--mud-palette-lines-default);
}

.ctk-reply.ctk-staff[b-o7eice7ugh] {
    background: color-mix(in srgb, var(--accent-teal) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-teal) 35%, transparent);
}

.ctk-reply.ctk-client[b-o7eice7ugh] {
    background: var(--mud-palette-surface);
}

/* My Profile (prototype renderClientProfile) — card titles, key/value rows, shipping-address rows. */
.cprof-title[b-o7eice7ugh] {
    font-size: .8rem;
    font-weight: 700;
    color: var(--mud-palette-success);
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.cprof-row[b-o7eice7ugh] {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: .85rem;
}

.cprof-row:last-child[b-o7eice7ugh] {
    border-bottom: none;
}

.cprof-key[b-o7eice7ugh] {
    color: var(--mud-palette-text-secondary);
    min-width: 140px;
}

.cprof-ship[b-o7eice7ugh] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}

/* ── Builder: editor beside its preview ───────────────────────────────────────────────────────────────
   The preview is sticky and as tall as the viewport allows, because it is a reference the studio glances
   at while working the column next to it — a panel that scrolled away with the form would be a screenshot.
   One column below the drawer breakpoint: side-by-side on a phone gives two things too narrow to use. */
.cportal-builder-split[b-o7eice7ugh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

/* The CMS keeps almost all of its width. Its editors are dense forms and tables — the very things the 14"
   responsive pass was about — and halving them to make room for a preview that is 390px wide by default would
   be trading the screen a studio types on for space the frame does not use. The builder's own column is a
   short form and can afford an even split; this one cannot. */
.cportal-builder-split.is-cms[b-o7eice7ugh] { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }

/* The CMS's editors stacked with the same distance as the panels of every other module; they touched. */
.cportal-builder-edit[b-o7eice7ugh] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cportal-builder-preview[b-o7eice7ugh] {
    min-width: 0;
    position: sticky;

    /* Under the portal's own sticky header, not beneath it. At top: 0 the header slid over the panel once the
       page scrolled and took the toolbar with it — the device sizes, refresh and full screen, the controls the
       studio reaches for mid-scroll. The height leaves the panel's foot on screen at the same offset. */
    top: 72px;
    height: min(calc(100vh - 88px), 900px);
}

/* The split asks how much room it actually HAS, not how wide the window is. The two are not the same here:
   the portal's sidebar takes some 380px, so a 1280px laptop leaves this column under 900px — wide enough for
   a media query to keep two columns, and nowhere near wide enough to put an editor and a preview in them.
   Measuring the wrong thing is how a split that reads well on a designer's monitor ends up with the editor
   narrower than the preview beside it.

   1040px is the smallest width at which the CMS's tables and a phone-width frame can both be themselves. The
   builder's own form would fit in less, but one rule both halves obey is worth more than the hundred pixels a
   second breakpoint would win back. */
.cportal-split-frame[b-o7eice7ugh] {
    container-type: inline-size;
    container-name: cportal;
}

/* container-type brings layout containment with it, and layout containment makes this element the containing
   block for any fixed-position descendant — which would trap the preview's full-screen shell in this column
   instead of letting it cover the window. Dropping the containment while it is full is what lets inset: 0
   mean the viewport again. The same shape of trap as the sticky one noted below, in a different disguise. */
.cportal-split-frame:has(.sp-shell.is-full)[b-o7eice7ugh] { container-type: normal; }

/* Site settings: the footer and SEO editors, folded under one line on Website content. The summary is the
   whole row — a heading and what is inside — so it reads as a place to open, not as a stray caption. */
.cms-site-settings[b-o7eice7ugh] {
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
}

.cms-site-settings > summary[b-o7eice7ugh] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
}

.cms-site-settings > summary[b-o7eice7ugh]::-webkit-details-marker { display: none; }

.cms-site-settings > summary[b-o7eice7ugh]::before {
    content: "▸";
    color: var(--text-muted);
    transition: transform .15s ease;
}

.cms-site-settings[open] > summary[b-o7eice7ugh]::before { transform: rotate(90deg); }

.cms-site-settings > summary:focus-visible[b-o7eice7ugh] {
    outline: 2px solid var(--info);
    outline-offset: 2px;
}

.cms-site-settings-title[b-o7eice7ugh] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cms-site-settings-hint[b-o7eice7ugh] {
    flex-basis: 100%;
    padding-left: 18px;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.cms-site-settings[open] > summary[b-o7eice7ugh] {
    border-bottom: 1px solid var(--mud-palette-lines-default, var(--border-bright));
}

.cms-site-settings-body[b-o7eice7ugh] {
    padding: 12px 16px 8px;
}

/* "Your products are in What you offer" — where a panel used to be, one quiet line and the way there. */
.cportal-moved[b-o7eice7ugh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 10px 14px;
    border: 1px dashed var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    font-size: .82rem;
    color: var(--text-muted);
}

/* The inbox on its own: a reading column, not the full width of a wide screen. */
.cportal-inbox-frame[b-o7eice7ugh] {
    max-width: 820px;
}

@media (prefers-reduced-motion: reduce) {
    .cms-site-settings > summary[b-o7eice7ugh]::before { transition: none; }
}

@container cportal (max-width: 1040px) {
    .cportal-builder-split[b-o7eice7ugh],
    .cportal-builder-split.is-cms[b-o7eice7ugh] { grid-template-columns: minmax(0, 1fr); }
    .cportal-builder-preview[b-o7eice7ugh] { position: static; height: 70vh; }
}

/* position: sticky creates a stacking context even with z-index: auto — a quiet rule, and the reason the
   panel's own z-index: 1300 could not lift it over a header sitting at 5: it was competing inside this
   column's context, not in the root. Dropping sticky while the panel is full-screen lets its fixed shell
   escape to the root, where its z-index means what it says. Static only while full, so the column still
   follows the editor's scroll the rest of the time. */
.cportal-builder-preview:has(.sp-shell.is-full)[b-o7eice7ugh] { position: static; }
/* /Components/Shared/MeetingSlotPicker.razor.rz.scp.css */
/* Слот-пикер (компактен): час + траење како дропдауни; зафатен термин = посив и прецртан. */
.msp-error[b-w01haskdjl] {
    font-size: 12.5px;
    color: var(--mud-palette-error);
    padding: 4px 0;
}
/* /Components/Sites/SiteBookingRules.razor.rz.scp.css */
/* How the diary behaves. Two settings above everything they govern, so they read as rules rather than as
   another list to fill in. */

.br-intro[b-tq9qhj8a0a] {
    margin: 0 0 12px;
    max-width: 68ch;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* The step: its word above the box and the explanation under it, like every labelled field in My Web. */
.br-field[b-tq9qhj8a0a] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.br-hint[b-tq9qhj8a0a] {
    max-width: 60ch;
    font-size: .76rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* The approval rule: its question, then the two answers on one line. A fieldset because it IS one question
   with two answers — screen readers announce the legend with each option. */
.br-approval[b-tq9qhj8a0a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.br-approval > .br-label[b-tq9qhj8a0a] {
    flex-basis: 100%;
    padding: 0;
    margin-bottom: 2px;
}

.br-label[b-tq9qhj8a0a] {
    font-size: .82rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.br-check[b-tq9qhj8a0a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.br-check input[b-tq9qhj8a0a] {
    accent-color: var(--zenic-green);
}

/* The rules are still editable with bookings off — they are simply not reached. Quiet, because nothing here
   is wrong: the studio switched the site's bookings off on purpose. */
.br-off[b-tq9qhj8a0a] {
    margin: 10px 0 0;
    max-width: 68ch;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--text-muted);
}
/* /Components/Sites/SiteCms.razor.rz.scp.css */
/* The CMS section list. Same story as the wizard: the markup carried these class names from the start and
   the rules never got written, so a studio was handed its sections as a run of bare words with two arrows
   and a button loose beside them, and no way to tell where one row ended and the next began.

   What the rules have to answer is small: which sections there are, which one is open, and what the two
   arrows act on. Everything below is that and nothing else. */

.site-cms[b-8uri2fpojf] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ── One page of the site ───────────────────────────────────────────────────────────────────────────
   A small label over the sections that page draws. Quiet on purpose: it groups the rows, and the rows are
   still what a studio reads down. */
.cms-page[b-8uri2fpojf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cms-page-title[b-8uri2fpojf] {
    margin: 0 0 2px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* A row and, when it is the open one, its form straight under it. */
.cms-item[b-8uri2fpojf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Scrolled to the top when opened; the margin keeps it clear of the portal's sticky top bar. */
.cms-item > .cms-row[b-8uri2fpojf] {
    scroll-margin-top: 88px;
}

.cms-row.is-open[b-8uri2fpojf] {
    border-color: var(--mud-palette-primary);
}

.cms-item > .cms-editor[b-8uri2fpojf] {
    border-left-color: var(--mud-palette-primary);
}

/* ── One section ────────────────────────────────────────────────────────────────────────────────────
   A row, not a list item: the name takes the space, and the controls sit at the end where the eye can
   run down them in a column instead of hunting for them at a different offset on every line. */
.cms-row[b-8uri2fpojf] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-1);
}

.cms-name[b-8uri2fpojf] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* ── Where each section stands (21.09.2026) ─────────────────────────────────────────────────────────
   In words, and a colour only as a second signal: "sample" is the one that matters, and it has to be
   readable by somebody who does not tell amber from green. */
.cms-status[b-8uri2fpojf] {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: var(--radius-pill, 999px);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cms-status.is-written[b-8uri2fpojf] {
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
    color: var(--mud-palette-success);
}

/* What the preview shows here is ours, not the studio's — and a visitor sees none of it. */
.cms-status.is-sample[b-8uri2fpojf] {
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
    color: color-mix(in srgb, var(--mud-palette-warning) 80%, var(--mud-palette-text-primary));
}

.cms-status.is-empty[b-8uri2fpojf] {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    color: var(--text-muted);
}

.cms-status.is-greekonly[b-8uri2fpojf] {
    background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent);
    color: var(--mud-palette-info);
}

/* How far along a page is, beside its name. */
.cms-page-count[b-8uri2fpojf] {
    margin-left: 8px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.cms-page-count.is-done[b-8uri2fpojf] {
    color: var(--mud-palette-success);
}

/* Said once, above the list, while any section is still showing the template's example. */
.cms-sample-note[b-8uri2fpojf] {
    margin: 0 0 14px;
    padding: 10px 12px;
    max-width: 72ch;
    border-radius: var(--radius-md, 8px);
    background: color-mix(in srgb, var(--mud-palette-warning) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 28%, transparent);
    font-size: .8rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

/* "Use the sample as a start": the button, and beside it what it takes and what it leaves behind. */
.cms-adopt[b-8uri2fpojf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 4px 0 12px;
}

.cms-adopt-hint[b-8uri2fpojf] {
    flex: 1 1 260px;
    max-width: 64ch;
    font-size: .76rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.cms-row[b-8uri2fpojf]  [data-edit] {
    flex: 0 0 auto;
    margin-left: 8px;
}

/* ── The open section ───────────────────────────────────────────────────────────────────────────────
   Indented and boxed so it reads as belonging to the row above it rather than as a second screen that
   happens to have appeared underneath the list. */
.cms-editor[b-8uri2fpojf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: 12px;
    padding: 16px 18px 18px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-left-width: 3px;
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-0);
}

.cms-editor > h4[b-8uri2fpojf] {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* ── The section's photograph ───────────────────────────────────────────────────────────────────────
   The thumbnail, the file picker and the size it should be, on one line while there is room for one.
   The hint wraps rather than the row scrolling: it is a sentence, and a sentence cut off mid-word is
   worse than a sentence on two lines. */
.cms-hero-photo[b-8uri2fpojf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.cms-hero-thumb[b-8uri2fpojf] {
    flex: 0 0 auto;
    width: 96px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
}

.cms-hint[b-8uri2fpojf] {
    flex: 1 1 220px;
    font-size: .78rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* ── Narrow ─────────────────────────────────────────────────────────────────────────────────────────
   Measured on the split frame, not on the window: this sits in half a split screen, so the window being
   wide says nothing about how much room the row actually has. Below the frame width at which the split
   folds to one column, the name takes a line of its own and the controls fall under it — the only way the
   two arrows and the button stay large enough to hit. */
@container cportal (max-width: 560px) {
    .cms-row[b-8uri2fpojf] {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .cms-name[b-8uri2fpojf] {
        flex: 1 0 100%;
    }

    .cms-editor[b-8uri2fpojf] {
        margin-left: 0;
        padding: 12px 14px 14px;
    }
}
/* /Components/Sites/SiteContactInbox.razor.rz.scp.css */
/* The enquiries left on the site's contact page. Class names without rules again: the name, the time, the
   address and the message all ran together as one paragraph per enquiry, which is the one thing an inbox
   must not do — a studio scanning for who wrote and when could not find either.

   Read-only by design, so there is nothing here to click except the address and the phone number. Those
   two are the whole point of the screen and are styled as what they are: the way to answer. */

.site-contact-inbox[b-dvd6wrybf0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 18px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-1);
}

.site-contact-inbox > h4[b-dvd6wrybf0] {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.sci-message[b-dvd6wrybf0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
}

/* Who, and when — on one line, the time pushed to the far end. Both are what a studio reads first, and
   neither is what it reads second. */
.sci-head[b-dvd6wrybf0] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

/* The time at the far end, whether or not a "New" chip sits beside the name. */
.sci-head .sci-when[b-dvd6wrybf0] {
    margin-left: auto;
}

.sci-name[b-dvd6wrybf0] {
    font-size: .88rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* Arrived since the last visit. The border says it at a glance; the word says it for anyone who cannot
   tell one colour of border from another. */
.sci-message.is-new[b-dvd6wrybf0] {
    border-color: color-mix(in srgb, var(--info) 55%, transparent);
}

.sci-new[b-dvd6wrybf0] {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--info);
    background: color-mix(in srgb, var(--info) 12%, transparent);
}

.sci-when[b-dvd6wrybf0] {
    font-family: var(--font-mono, monospace);
    font-size: .72rem;
    color: var(--text-muted);
}

/* How to answer. Wrapping rather than truncating: half an email address is no email address. */
.sci-contact[b-dvd6wrybf0] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.sci-contact a[b-dvd6wrybf0] {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.sci-contact a:hover[b-dvd6wrybf0],
.sci-contact a:focus-visible[b-dvd6wrybf0] {
    text-decoration: underline;
}

/* What the visitor typed. Line breaks kept — somebody who wrote three short lines meant three lines —
   but rendered as text, never as markup. */
.sci-body[b-dvd6wrybf0] {
    margin: 0;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Components/Sites/SiteFooterSettings.razor.rz.scp.css */
/* The footer's social links and the payment marks. Class names without rules again: a bare <label> wrapping
   a <span> and an <input> lays out inline, so every platform's name ran into the box beside it and the next
   platform started on whatever was left of the same line. Eight of them did that at once.

   A grid fixes it properly rather than by nudging: the names line up in one column whatever their length,
   which is what makes the list scannable in Greek and English both. */

.site-footer-settings[b-fh4uilg5od] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px 18px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-1);
}

.site-footer-settings > h4[b-fh4uilg5od] {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.site-footer-settings h5[b-fh4uilg5od] {
    margin: 0 0 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label, .08em);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Social profiles ────────────────────────────────────────────────────────────────────────────────
   One row per platform. The name column is sized to the longest of them rather than to each row's own
   text, so the boxes start at the same place down the list. */
.sf-social[b-fh4uilg5od] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.sf-social h5[b-fh4uilg5od] {
    grid-column: 1 / -1;
}

.sf-row[b-fh4uilg5od] {
    display: grid;
    grid-template-columns: minmax(88px, max-content) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.sf-label[b-fh4uilg5od] {
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
}

.sf-input[b-fh4uilg5od] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .85rem;
}

.sf-input[b-fh4uilg5od]::placeholder {
    color: var(--text-muted);
}

.sf-input:focus-visible[b-fh4uilg5od] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* ── Payment marks ──────────────────────────────────────────────────────────────────────────────────
   A statement about what the studio accepts, not a switch that turns a payment on — so they read as a
   set of ticks, wrapping across the width rather than running down thirteen lines. */
.sf-payments[b-fh4uilg5od] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.sf-payments h5[b-fh4uilg5od] {
    flex: 1 0 100%;
    margin-bottom: 0;
}

.sf-check[b-fh4uilg5od] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

/* ── Narrow ─────────────────────────────────────────────────────────────────────────────────────────
   Measured on the split frame: below the width at which the editor stops sharing the screen with the
   preview, a name column and a box on the same line leave the box too short to read a URL in. */
@container cportal (max-width: 560px) {
    .sf-row[b-fh4uilg5od] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}
/* /Components/Sites/SiteLocations.razor.rz.scp.css */
/* The studio's branches and when each one opens. Class names without rules again: six unstyled inputs in a
   row collapsed to the browser's default width and wrapped mid-way, so a branch read as a jumble of small
   boxes with nothing saying which was the postcode and which the AADE number.

   The placeholders are the only labels these fields have, which is why the boxes have to be wide enough to
   show one. Below, that is what the minimum column width is for. */

.site-locations[b-utav56qj37] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 18px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-1);
}

.site-locations > h4[b-utav56qj37] {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* ── One branch ─────────────────────────────────────────────────────────────────────────────────────
   Boxed, because everything below hangs off it: resources, calendars, stock and fiscal documents all
   name a branch, and a studio editing two of them at once must never be in doubt which it is in. */
.sl-location[b-utav56qj37] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
}

/* The name, and which branch answers for the site. */
.sl-head[b-utav56qj37] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sl-head .sl-input[b-utav56qj37] {
    flex: 1 1 200px;
    font-size: .9rem;
    font-weight: 600;
}

/* Told, not offered: the branch that already answers for the site gets a mark rather than a button that
   would change nothing. */
.sl-primary[b-utav56qj37] {
    padding: 2px 8px;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 45%, transparent);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label, .08em);
    text-transform: uppercase;
    color: var(--mud-palette-success);
}

/* ── Address, contact, AADE number ──────────────────────────────────────────────────────────────────
   As many columns as fit at a width that still shows a placeholder — the placeholder is the only thing
   naming these fields, so a column too narrow to read one leaves them unlabelled. */
.sl-fields[b-utav56qj37] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.sl-input[b-utav56qj37] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-1);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .85rem;
}

.sl-input[b-utav56qj37]::placeholder {
    color: var(--text-muted);
}

.sl-input:focus-visible[b-utav56qj37] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* Save and the opening hours to the left, the delete away at the far end — it is the one control here
   that cannot be undone by typing the old value back in. */
.sl-actions[b-utav56qj37] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sl-active[b-utav56qj37] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.sl-actions[b-utav56qj37]  [data-remove] {
    margin-left: auto;
}

/* ── When it opens ──────────────────────────────────────────────────────────────────────────────────
   Seven rows, one per day, each a name and however many windows that day has. The name column is fixed
   so the times line up down the week — a studio checks its hours by running an eye down that column,
   and it can only do that if Wednesday's opening time sits under Tuesday's. */
.sl-hours[b-utav56qj37] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default, var(--border-bright));
}

.sl-day[b-utav56qj37] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.sl-day-name[b-utav56qj37] {
    flex: 0 0 96px;
    font-size: .8rem;
    color: var(--mud-palette-text-primary);
}

/* No window at all is what closed means. It is said in words rather than left as a gap, so an empty day
   reads as a decision instead of as something that failed to load. */
.sl-closed[b-utav56qj37] {
    font-size: .78rem;
    font-style: italic;
    color: var(--text-muted);
}

/* Open, closed over lunch, open again — so a day holds more than one of these. */
.sl-window[b-utav56qj37] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 6px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-1);
}

.sl-time[b-utav56qj37] {
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 8px);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-family: var(--font-mono, monospace);
    font-size: .8rem;
}

.sl-time:focus-visible[b-utav56qj37] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* ── Narrow ─────────────────────────────────────────────────────────────────────────────────────────
   The day name takes its own line rather than squeezing the times, which are the part being read. */
@container cportal (max-width: 560px) {
    .sl-day-name[b-utav56qj37] {
        flex: 1 0 100%;
    }
}

/* ── On the map ─────────────────────────────────────────────────────────────────────────────────────
   The frame the contact page will draw, what placed it, and one box to correct it. */
.sl-map[b-utav56qj37] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sl-map-title[b-utav56qj37] {
    font-size: .78rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.sl-map-frame[b-utav56qj37] {
    width: 100%;
    height: 220px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
}

.sl-map-status[b-utav56qj37],
.sl-map-help[b-utav56qj37] {
    margin: 0;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

.sl-map-paste[b-utav56qj37] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sl-map-paste .sl-input[b-utav56qj37] {
    flex: 1 1 280px;
}

/* Where the first branch's details came from, and which of them to check. Quiet: it explains, it does not
   warn — nothing here is wrong, the address on a company card is simply not always the shop's. */
.sl-prefilled[b-utav56qj37] {
    margin: 0;
    max-width: 68ch;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Where the branch's name is read. On its own line under the box, so the head keeps its row. */
.sl-name-hint[b-utav56qj37] {
    flex-basis: 100%;
    max-width: 68ch;
    font-size: .76rem;
    line-height: 1.45;
    color: var(--text-muted);
}
/* /Components/Sites/SiteOffer.razor.rz.scp.css */
/* What you offer: a sentence on what it is, three tabs, and under each the same stacked panels as every other
   My Web module. */

.site-offer[b-k3kte0kdte] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.so-intro[b-k3kte0kdte] {
    margin: 0;
    max-width: 72ch;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* The tabs as wide as their words, not stretched across the page: three short labels spread over a wide
   screen read as a toolbar rather than as the three parts of one thing. */
.site-offer[b-k3kte0kdte]  .so-tabs .mud-tabs-tabbar {
    background: transparent;
    border-bottom: 1px solid var(--mud-palette-lines-default, var(--border-bright));
}

.site-offer[b-k3kte0kdte]  .so-tabs .mud-tab {
    min-width: 0;
    flex: 0 0 auto;
    padding-inline: 18px;
    text-transform: none;
    font-weight: 600;
}

.site-offer[b-k3kte0kdte]  .so-panel {
    padding-top: 16px;
}

/* The panels under a tab, the same distance apart as panels anywhere else in My Web. */
.so-stack[b-k3kte0kdte] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
/* /Components/Sites/SitePackages.razor.rz.scp.css */
/* The package's picture: a thumbnail, the file picker and the way to remove it on one wrapping row — the same
   slot the products screen has, cropped wide because the Offers card is. */
.pk-picture[b-c0sw12gy93] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
}

.pk-thumb[b-c0sw12gy93] {
    width: 128px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    flex: none;
}
/* /Components/Sites/SitePageEditor.razor.rz.scp.css */
/* The pages a studio writes itself — About, the legal pages, delivery, the loyalty scheme. As with the
   section list next door, the class names were in the markup from the start and the rules were never
   written, which is why every page name in the row of buttons read as ABOUT USEMPTY: the badge saying
   the page has nothing in it yet was a bare inline word sitting flush against the name.

   That badge is the reason this row exists at all — it is how a studio sees, at a glance, which of its
   pages are still blank. It has to read as a separate thing from the name. */

.page-editor[b-q4v1abcqns] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Its name and what it is for (22.09.2026). The panel opened on a row of page buttons and nothing else, so
   "Terms of use · empty" read as a fault rather than as a page nobody had written yet. */
.page-editor > h4[b-q4v1abcqns] {
    margin: 0;
    font-family: var(--font-sans);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.pe-intro[b-q4v1abcqns] {
    margin: -6px 0 0;
    max-width: 68ch;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ── Which page ─────────────────────────────────────────────────────────────────────────────────────
   Wrapping rather than scrolling: there are six or seven of these and they are the navigation of this
   editor. A page pushed off the end of a scroller is a page a studio does not know it has. */
.pe-pages[b-q4v1abcqns] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pe-empty[b-q4v1abcqns] {
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label, .08em);
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ── The page being written ─────────────────────────────────────────────────────────────────────────
   Boxed, for the same reason the open section is: so it reads as what the button above it opened. */
.pe-body[b-q4v1abcqns] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 18px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-0);
}

/* ── One block ──────────────────────────────────────────────────────────────────────────────────────
   A paragraph, a heading, a list item, a picture or an embed. They stack, they are reordered by the
   arrows at the foot of each, and the whole point of the border is that a studio can see where the
   block it is about to move up actually ends. */
.pe-block[b-q4v1abcqns] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-1);
}

/* Which kind of block this is. Quiet: it labels the box, it is not part of what the studio wrote. */
.pe-block-kind[b-q4v1abcqns] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label, .08em);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* The plain controls — a native select, a text input, the textarea. Deliberately not MudBlazor (the
   editor has to keep working on a slow phone), which is exactly why they need dressing by hand: left
   bare they inherit the browser's white box and sit in a dark panel glowing. */
.pe-input[b-q4v1abcqns] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
    color: var(--mud-palette-text-primary);
    font: inherit;
    line-height: 1.5;
}

.pe-input:focus-visible[b-q4v1abcqns] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

textarea.pe-input[b-q4v1abcqns] {
    resize: vertical;
    min-height: 72px;
}

/* B and I, above the text they act on. */
.pe-toolbar[b-q4v1abcqns] {
    display: flex;
    gap: 2px;
}

/* Move up, move down, delete — at the end of the block's own row, away from the toolbar above so the
   delete is nowhere near the buttons a studio presses while writing. */
.pe-block-actions[b-q4v1abcqns] {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
}

/* Said at the moment it matters: an embed loads a third party's script on the studio's page. */
.pe-note[b-q4v1abcqns] {
    font-size: .75rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.pe-add[b-q4v1abcqns] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* /Components/Sites/SitePreviewPanel.razor.rz.scp.css */
/*
    The preview panel.

    What the device buttons change is the WIDTH of the frame, and only the width. That is the honest control:
    a template answers to the viewport width, so 390px here produces the same layout a 390px phone produces.
    Height simply fills the panel — pinning it to 844px would draw a prettier picture of a phone while showing
    less of the site, and the studio is here to see the site.
*/

.sp-shell[b-75k3r9fz9e] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
}

/* Full screen without a dialog: nothing to trap focus in, nothing to restore, and the editor underneath
   keeps its scroll position for when the studio folds it back down. */
.sp-shell.is-full[b-75k3r9fz9e] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    border-radius: 0;
    border: none;
}

/* Wraps rather than squeezes: in the template picker the bar carries the content switch and three named
   colours as well as the widths and the buttons, and on a laptop or a tablet that does not fit on one line.
   Squeezed, the colour names would be cut to nothing — which is the problem they were added to solve. */
.sp-bar[b-75k3r9fz9e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    flex-shrink: 0;
}

/* What the screen around the panel puts in its bar — the picker's switch and colours. */
.sp-extras[b-75k3r9fz9e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.sp-devices[b-75k3r9fz9e], .sp-actions[b-75k3r9fz9e] { display: flex; align-items: center; gap: 4px; }

.sp-device[b-75k3r9fz9e], .sp-btn[b-75k3r9fz9e] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 28px;
    border: 1px solid transparent; border-radius: var(--radius-md, 8px);
    background: transparent; color: var(--text-muted);
    font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
    transition: color .15s, background .15s, border-color .15s;
}

.sp-device:hover[b-75k3r9fz9e], .sp-btn:hover[b-75k3r9fz9e] { color: var(--text-primary); background: var(--surface-3); }

.sp-device.is-on[b-75k3r9fz9e] {
    color: var(--zenic-green-mid);
    background: color-mix(in srgb, var(--zenic-green-mid) 14%, transparent);
    border-color: color-mix(in srgb, var(--zenic-green-mid) 40%, transparent);
}

.sp-device:focus-visible[b-75k3r9fz9e], .sp-btn:focus-visible[b-75k3r9fz9e] {
    outline: 2px solid var(--zenic-green-mid);
    outline-offset: 1px;
}

/* The one worded control on the bar, because it leaves the panel: an icon here would read as one more way to
   resize the frame. */
.sp-site[b-75k3r9fz9e] {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-md, 8px);
    background: transparent;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.sp-site:hover[b-75k3r9fz9e] { background: var(--surface-3); border-color: var(--zenic-green-mid); }

.sp-site:focus-visible[b-75k3r9fz9e] {
    outline: 2px solid var(--zenic-green-mid);
    outline-offset: 1px;
}

/* The stage is the neutral surround a device sits on, and it scrolls sideways rather than squeezing the
   frame: a desktop preview inside a narrow panel must stay a desktop preview. */
.sp-stage[b-75k3r9fz9e] {
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: center;
    padding: 12px;
    background: var(--surface-0);
    overflow: auto;
}

.sp-frame[b-75k3r9fz9e] {
    display: flex;
    flex-shrink: 0;
    height: 100%;
    min-height: 320px;
    background: #fff;
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

/* Widths a real device reports to CSS, not the hardware pixel counts. */
.sp-frame.is-phone[b-75k3r9fz9e]   { width: 390px; }
.sp-frame.is-tablet[b-75k3r9fz9e]  { width: 834px; }
.sp-frame.is-desktop[b-75k3r9fz9e] { width: 100%; min-width: 0; }

.sp-iframe[b-75k3r9fz9e] {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.sp-empty[b-75k3r9fz9e] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* Below the drawer breakpoint the panel is the whole screen when open; a device frame inside a phone is a
   picture of a phone on a phone. */
@media (max-width: 860px) {
    .sp-stage[b-75k3r9fz9e] { padding: 0; }
    .sp-frame[b-75k3r9fz9e], .sp-frame.is-phone[b-75k3r9fz9e], .sp-frame.is-tablet[b-75k3r9fz9e] { width: 100%; border: none; border-radius: 0; }
    .sp-devices[b-75k3r9fz9e] { display: none; }
}
/* /Components/Sites/SitePublishPanel.razor.rz.scp.css */
/* The publish panel. The markup carried these class names from the start and no rule ever existed for them,
   so the last screen before a salon goes live listed what was stopping it as a plain bulleted list — the same
   gap the wizard had.

   The two lists here say different things and so must not look the same: one is a refusal, the other is a
   note. A studio that reads a warning as a blocker goes looking for something to fix that is not broken; one
   that reads a blocker as a warning presses publish and is refused. */

.sp-status[b-gthmj1qzlr] {
    margin: 0 0 12px;
    font-family: var(--font-mono, monospace);
    font-size: .82rem;
    letter-spacing: var(--tracking-label, .08em);
    text-transform: uppercase;
    color: var(--text-muted);
}

.sp-blockers[b-gthmj1qzlr],
.sp-warnings[b-gthmj1qzlr] {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-blockers li[b-gthmj1qzlr],
.sp-warnings li[b-gthmj1qzlr] {
    padding: 9px 12px 9px 34px;
    position: relative;
    border-radius: var(--radius-md, 8px);
    font-size: .85rem;
    line-height: 1.45;
}

/* Stopped. Stated twice over — the colour and the mark — so it does not depend on seeing the difference
   between red and amber, which is the most common colour blindness there is. */
.sp-blockers li[b-gthmj1qzlr] {
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
    color: var(--mud-palette-text-primary);
}

.sp-blockers li[b-gthmj1qzlr]::before {
    content: "✕";
    position: absolute;
    inset-inline-start: 12px;
    color: var(--mud-palette-error);
    font-weight: 700;
}

/* Not stopped — worth knowing. Quieter on purpose: this list is normal on a site that is still being
   written, and a panel that shouts at every ordinary state stops being read. */
.sp-warnings li[b-gthmj1qzlr] {
    background: color-mix(in srgb, var(--mud-palette-warning) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 30%, transparent);
    color: var(--mud-palette-text-secondary, var(--text-muted));
}

.sp-warnings li[b-gthmj1qzlr]::before {
    content: "!";
    position: absolute;
    inset-inline-start: 14px;
    color: var(--mud-palette-warning);
    font-weight: 700;
}
/* /Components/Sites/SiteReadiness.razor.rz.scp.css */
/* Before your site goes live: a short list at the top of Website content. Quiet by default — it is a list of
   what is left, not an alarm — with the one thing that is a hole in the site set apart. */

.site-readiness[b-ti26imqikv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
}

.site-readiness h4[b-ti26imqikv] {
    margin: 0;
}

.rd-group[b-ti26imqikv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rd-group h5[b-ti26imqikv] {
    margin: 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.rd-list[b-ti26imqikv] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rd-item[b-ti26imqikv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--radius-sm, 5px);
    font-size: .84rem;
}

.rd-mark[b-ti26imqikv] {
    flex: 0 0 18px;
    text-align: center;
    font-weight: 700;
}

.rd-text[b-ti26imqikv] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    color: var(--mud-palette-text-primary);
}

.rd-count[b-ti26imqikv] {
    font-size: .76rem;
    color: var(--text-muted);
}

/* Why the missing thing matters, in one line under its name: "your Treatments page has nothing on it". */
.rd-why[b-ti26imqikv] {
    flex-basis: 100%;
    font-size: .76rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.rd-item.is-ok .rd-mark[b-ti26imqikv] {
    color: var(--mud-palette-success);
}

/* A hole in the site. Amber rather than red: nothing is broken, it is simply not built yet. */
.rd-item.is-missing[b-ti26imqikv] {
    background: color-mix(in srgb, var(--mud-palette-warning) 9%, transparent);
}

.rd-item.is-missing .rd-mark[b-ti26imqikv] {
    color: var(--mud-palette-warning);
}

.rd-item.is-optional .rd-mark[b-ti26imqikv] {
    color: var(--text-muted);
}

/* Folded down to one line once there is nothing left in it. */
.site-readiness.is-done[b-ti26imqikv] {
    padding: 10px 14px;
    border-color: color-mix(in srgb, var(--mud-palette-success) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-success) 7%, transparent);
}

.rd-done[b-ti26imqikv] {
    margin: 0;
    font-size: .84rem;
    color: var(--mud-palette-text-primary);
}
/* /Components/Sites/SiteSectionItems.razor.rz.scp.css */
/* The repeating content of a section — team members, gallery photos, testimonials, carousel slides. One
   component for all four, and the last of the CMS editors to be carrying class names with no rules behind
   them: an entry's photograph, its title, its role line and its paragraph all ran together with nothing
   saying where one team member ended and the next began.

   This is NOT a panel card. It opens INSIDE the section editor, which is already a card, and a card drawn
   inside a card reads as a second screen rather than as the contents of the one already open. */

.section-items[b-cmj393ll3i] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── One entry ──────────────────────────────────────────────────────────────────────────────────────
   Stacked, not a row: an entry holds a photograph, a name, a role and a paragraph, and laying those
   along one line is what made four team members read as one run of text. A step lighter than the
   editor around it, which is the only thing separating the list from its container. */
.si-item[b-cmj393ll3i] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-1);
}

/* ── Its photograph ─────────────────────────────────────────────────────────────────────────────────
   Thumbnail, file picker and the size it should be, on one line while there is room. The hint wraps
   rather than the row scrolling — it is a sentence, and half a sentence helps nobody. */
.si-photo[b-cmj393ll3i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.si-thumb[b-cmj393ll3i] {
    flex: 0 0 auto;
    width: 96px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
}

/* What the picture has to be, said before a file is chosen rather than after one is refused. Also the
   line saying how many entries the design is drawn around. */
.si-hint[b-cmj393ll3i] {
    font-size: .78rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* ── Its words ──────────────────────────────────────────────────────────────────────────────────────
   Plain native controls, like everywhere else in this editor, and dressed by hand for the same reason:
   left bare they take the browser's white box and glow inside a dark card. */
.si-input[b-cmj393ll3i] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .85rem;
    line-height: 1.5;
}

.si-input[b-cmj393ll3i]::placeholder {
    color: var(--text-muted);
}

.si-input:focus-visible[b-cmj393ll3i] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

textarea.si-input[b-cmj393ll3i] {
    resize: vertical;
    min-height: 64px;
}

/* ── Its controls ───────────────────────────────────────────────────────────────────────────────────
   Move up, move down, save — and the delete away at the far end, because it is the only one here that
   cannot be undone by typing the old value back in. */
.si-actions[b-cmj393ll3i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.si-actions[b-cmj393ll3i]  [data-remove] {
    margin-left: auto;
}

/* The button that adds one more entry. A column stretches its children, which
   turned "Add an entry" into a full-width bar reading as the most important
   thing in the list — and it is the least. Only the direct child: the arrows
   and the save inside an entry sit in a row and are already aligned there. */
.section-items[b-cmj393ll3i] >  .mud-button-root {
    align-self: flex-start;
}
/* /Components/Sites/SiteSeoEditor.razor.rz.scp.css */
/* What search engines are told, and the studio's own measurement ids. Class names without rules again.

   This screen has a problem the others do not: nothing on it is visible on the studio's own site, so the
   only feedback it can give is on the screen itself. That is what the character count is for, and a count
   sitting flush against the box it counts is a count nobody reads — it needs to be where the eye lands
   when the typing stops, which is the right-hand end of the field. */

.site-seo[b-gbsxethlyn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 18px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-1);
}

.site-seo > h4[b-gbsxethlyn] {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.site-seo h5[b-gbsxethlyn] {
    margin: 0 0 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label, .08em);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Which page's meta text ─────────────────────────────────────────────────────────────────────────
   Plain buttons, so they take their whole appearance from here. Wrapping, not scrolling: a page pushed
   off the end is a page whose title nobody ever writes. */
.seo-pages[b-gbsxethlyn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.seo-page[b-gbsxethlyn] {
    padding: 5px 12px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-0);
    color: var(--text-muted);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.seo-page:hover[b-gbsxethlyn] {
    color: var(--mud-palette-text-primary);
}

/* The one being edited. Everything on this screen is invisible elsewhere, so which page is open has to
   be unmistakable here — otherwise a studio writes the home page's title onto the contact page. */
.seo-page.is-selected[b-gbsxethlyn] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.seo-page:focus-visible[b-gbsxethlyn] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* ── A field, and how much room is left in it ───────────────────────────────────────────────────────
   The count is placed under the box at its right-hand end: that is where a line of text ends, so it is
   where the eye already is at the moment the count starts to matter. */
.seo-field[b-gbsxethlyn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.seo-field > span:first-child[b-gbsxethlyn] {
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
}

.seo-input[b-gbsxethlyn] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .85rem;
    line-height: 1.5;
}

textarea.seo-input[b-gbsxethlyn] {
    resize: vertical;
}

.seo-input[b-gbsxethlyn]::placeholder {
    color: var(--text-muted);
}

.seo-input:focus-visible[b-gbsxethlyn] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.seo-count[b-gbsxethlyn] {
    align-self: flex-end;
    font-family: var(--font-mono, monospace);
    font-size: .72rem;
    color: var(--text-muted);
}

/* What the page will carry whether or not the studio words it. Quiet, and monospaced because it is the
   literal string that will be sent — not a sentence about it. */
.seo-effective[b-gbsxethlyn] {
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
    font-family: var(--font-mono, monospace);
    font-size: .74rem;
    line-height: 1.45;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

/* ── The studio's own measurement ids ───────────────────────────────────────────────────────────────
   Set apart from the meta text above: this is somebody else's script on the studio's page, and it is
   governed by what the visitor agreed to. Not the same kind of decision as wording a title. */
.seo-analytics[b-gbsxethlyn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--mud-palette-lines-default, var(--border-bright));
}

.seo-analytics h5[b-gbsxethlyn] {
    margin-bottom: 0;
}
/* /Components/Sites/SiteShopProducts.razor.rz.scp.css */
/* The product's picture beside its name. A thumbnail, not the photograph: uploads arrive at up to 2000px on the
   long edge, and drawn at their own size one picture would push the rest of the shop off the screen. */
.sp-picture[b-tlr8ydxv39] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
}

.sp-thumb[b-tlr8ydxv39] {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 6px;
    flex: none;
}
/* /Components/Sites/SiteTemplatePicker.razor.rz.scp.css */
/* Choosing a template, on a screen of its own: the nine in a rail down the left, the template filling
   everything else. One control behind two doors — the builder's button and the Template module — because
   they were asking the same question in two different widths.

   ── The screen ──────────────────────────────────────────────────────────────────────────────────── */

.tp-overlay[b-bxpoyqpkk9] {
    position: fixed;
    inset: 0;
    z-index: 1400;   /* over the portal's own chrome; under MudBlazor's dialogs and snackbars */

    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 16px;
    background: var(--mud-palette-background);
}

.tp-head[b-bxpoyqpkk9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
}

.tp-head h4[b-bxpoyqpkk9] {
    margin: 0 0 2px;
}

.tp-close[b-bxpoyqpkk9] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
    color: var(--mud-palette-text-primary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.tp-close:hover[b-bxpoyqpkk9] {
    border-color: var(--mud-palette-primary);
}

/* The rail and the stage, side by side and both inside one screen height: the page itself never scrolls,
   which is what keeps the template on screen while the nine are being walked. */
.tp-body[b-bxpoyqpkk9] {
    display: flex;
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Nine cards do not fit down the side of a 14" laptop, so the RAIL scrolls rather than the page — the
   same min-height:0 the portal's own menu needed, and for the same reason: a flex child will not shrink
   below its content, so without it the overflow never engages and the last three templates are simply
   unreachable. */
.tp-rail[b-bxpoyqpkk9] {
    flex: 0 0 268px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-inline-end: 4px;
}

.tp-stage[b-bxpoyqpkk9] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 0;
}

/* The preview takes whatever the effects list leaves. */
.tp-stage > :first-child[b-bxpoyqpkk9] {
    flex: 1 1 auto;
    min-height: 0;
}

/* ── What the preview is showing ────────────────────────────────────────────────────────────────────
   In the preview's own bar, over the page they change. */
.tp-content[b-bxpoyqpkk9] {
    display: inline-flex;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-pill, 999px);
    overflow: hidden;
}

.tp-content-btn[b-bxpoyqpkk9] {
    padding: 4px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.tp-content-btn.is-on[b-bxpoyqpkk9] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text, #fff);
}

.tp-colours[b-bxpoyqpkk9] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

/* A swatch and its name in words, as one thing to press: the whole label opens the picker, so the word is
   as good a target as the square — which matters with a thumb. */
.tp-colour[b-bxpoyqpkk9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.tp-colour-name[b-bxpoyqpkk9] {
    font-size: .72rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.tp-colour input[type="color"][b-bxpoyqpkk9] {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-sm, 5px);
    background: none;
    cursor: pointer;
}

.tp-colour-reset[b-bxpoyqpkk9] {
    border: none;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: .72rem;
    text-decoration: underline;
    cursor: pointer;
}

/* On a phone the rail lies down: a column of cards beside a preview would leave neither enough room to
   be read. */
@media (max-width: 900px) {
    .tp-body[b-bxpoyqpkk9] {
        flex-direction: column;
    }

    .tp-rail[b-bxpoyqpkk9] {
        flex: 0 0 auto;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 6px;
    }

    .tp-rail .tpl-card[b-bxpoyqpkk9] {
        flex: 0 0 210px;
    }
}

.tpl-intro[b-bxpoyqpkk9] {
    margin: 0;
    max-width: 68ch;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ── The nine ─────────────────────────────────────────────────────────────────────────────────────── */

/* One a row in the rail: the card carries a name, who the template is for and a sentence about it, and
   two of those side by side would leave the sentence two words wide. */
.tpl-card[b-bxpoyqpkk9] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tpl-card:hover[b-bxpoyqpkk9] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}

.tpl-card:focus-visible[b-bxpoyqpkk9] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* The template in use. Marked by a border rather than by a tint, so it stays legible while a DIFFERENT
   card is being considered — the two states have to be tellable apart at a glance, and both are on
   screen at the same time. */
.tpl-card.is-current[b-bxpoyqpkk9] {
    border-color: color-mix(in srgb, var(--mud-palette-success) 60%, transparent);
}

/* The one being considered. Filled, because this is the one the preview beside it is showing. */
.tpl-card.is-candidate[b-bxpoyqpkk9] {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.tpl-thumb[b-bxpoyqpkk9] {
    display: block;
    line-height: 0;
    aspect-ratio: 1440 / 1010;
    overflow: hidden;
    border-radius: var(--radius-sm, 5px);
}

.tpl-thumb img[b-bxpoyqpkk9] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;   /* the header and the hero are what name the template */
}

.tpl-name[b-bxpoyqpkk9] {
    font-size: .92rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* Who it is for, then what it is — the same two lines the wizard's picker shows, because it is the same
   judgement being made a year later. */
.tpl-for[b-bxpoyqpkk9] {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label, .08em);
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.tpl-about[b-bxpoyqpkk9] {
    font-size: .76rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.tpl-current[b-bxpoyqpkk9] {
    align-self: flex-start;
    padding: 1px 7px;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label, .08em);
    text-transform: uppercase;
    color: var(--mud-palette-success);
}

/* ── What it would cost ─────────────────────────────────────────────────────────────────────────────
   Not a dialog. A studio deciding this wants to read the list and look at the preview at the same
   time, and a modal covers the very thing the decision is about. */
.tp-effects[b-bxpoyqpkk9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
}

.tp-effects > h5[b-bxpoyqpkk9] {
    margin: 0;
    font-size: .8rem;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--mud-palette-text-primary);
}

.tpl-effect-list[b-bxpoyqpkk9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Each line is something that stops being drawn. Amber, not red: nothing here is an error and nothing
   is a refusal — the studio may do this, and it is being told what it means. */
.tpl-effect-list li[b-bxpoyqpkk9] {
    position: relative;
    padding: 7px 12px 7px 30px;
    border-radius: var(--radius-md, 8px);
    background: color-mix(in srgb, var(--mud-palette-warning) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 28%, transparent);
    font-size: .82rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
}

.tpl-effect-list li[b-bxpoyqpkk9]::before {
    content: "!";
    position: absolute;
    inset-inline-start: 13px;
    font-weight: 700;
    color: var(--mud-palette-warning);
}

/* "Nothing is deleted" is the opposite of a warning and must not be dressed as one — a studio scanning
   amber boxes reads the reassurance as one more thing going wrong. */
.tpl-effect-list li.is-reassurance[b-bxpoyqpkk9] {
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-success) 30%, transparent);
}

.tpl-effect-list li.is-reassurance[b-bxpoyqpkk9]::before {
    content: "✓";
    color: var(--mud-palette-success);
}

.tpl-actions[b-bxpoyqpkk9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Why the card being considered cannot be chosen yet. Said calmly: it is not an error, it is a rule with a
   reason, and the reason says what to do about it. */
.tp-refusal[b-bxpoyqpkk9] {
    margin: 0;
    padding: 9px 12px;
    max-width: 72ch;
    border-radius: var(--radius-md, 8px);
    background: color-mix(in srgb, var(--mud-palette-info) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 30%, transparent);
    font-size: .82rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}
/* /Components/Sites/SiteTreatments.razor.rz.scp.css */
/* The treatments editor (21.09.2026). The shared My Web panel rules in app.css dress it — fields, ticks,
   type — but they draw every "-item" as one wrapping ROW, which is right for a line and wrong for a record:
   a treatment's name, its description, its group, three numbers, two ticks, two uploads and five buttons all
   ran into one another, and the picture was drawn at the size it was uploaded. This file is the record's own
   layout. Prefixed with the panel so it outranks the shared suffix rules rather than relying on file order. */

.site-treatments .tr-item[b-q0ov05o3o1] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
}

/* A field in a column must not be asked to grow: flex-basis there is height. */
.site-treatments .tr-item > .tr-field > .tr-input[b-q0ov05o3o1] {
    flex: 0 0 auto;
    width: 100%;
}

/* Group, minutes, price, VAT: side by side while they fit, wrapping as whole fields rather than as words.
   The group takes the room a name needs; the three figures only the room a figure needs. */
.site-treatments .tr-grid[b-q0ov05o3o1] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: flex-end;
}

/* Wrapping fields, not a fixed grid: a fixed one asked for more width than a narrow column has and pushed
   the price and the leaflet off the edge of the card. */
.site-treatments .tr-grid > .tr-field[b-q0ov05o3o1] {
    flex: 1 1 110px;
    min-width: 0;
}

.site-treatments .tr-grid > .tr-field:first-child[b-q0ov05o3o1] {
    flex: 2 1 200px;
}

.site-treatments .tr-grid .tr-field > :is(.tr-input, .tr-number)[b-q0ov05o3o1] {
    flex: 0 0 auto;
    width: 100%;
}

.site-treatments .tr-flags[b-q0ov05o3o1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

/* The picture and the leaflet as two slots, each a word over what is in it. */
.site-treatments .tr-media[b-q0ov05o3o1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 12px 20px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default, var(--border-bright));
}

.site-treatments .tr-slot[b-q0ov05o3o1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.site-treatments .tr-slotbody[b-q0ov05o3o1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
}

/* A thumbnail, cropped to the treatment card's shape — never the photograph at its own size. */
.site-treatments .tr-thumb[b-q0ov05o3o1] {
    flex: none;
    width: 112px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
}

/* The browser's own file picker, kept small and inside its slot rather than as wide as its file name. */
.site-treatments .tr-slotbody[b-q0ov05o3o1]  input[type="file"] {
    max-width: 100%;
    min-width: 0;
    font-size: .78rem;
    color: var(--text-muted);
}

.site-treatments .tr-doc[b-q0ov05o3o1] {
    font-size: .8rem;
}

/* The buttons last, on a line of their own under a rule, delete pushed to the far end. */
.site-treatments .tr-actions[b-q0ov05o3o1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--mud-palette-lines-default, var(--border-bright));
}

.site-treatments .tr-spacer[b-q0ov05o3o1] {
    flex: 1 1 auto;
}

/* Branches and questions open under the buttons, set in from the card so they read as part of it. */
.site-treatments .tr-branches[b-q0ov05o3o1],
.site-treatments .tr-faqs[b-q0ov05o3o1] {
    padding: 10px 12px;
    border-radius: var(--radius-md, 8px);
    background: var(--surface-1);
}

/* /Components/Sites/SiteWizard.razor.rz.scp.css */
/* The website-builder wizard. The markup carried these class names from the start; the rules never got
   written, so a studio was handed nine template names run together as one unbroken word and no sign of
   which one it had picked. Everything here exists to answer three questions the bare form could not:
   where am I, what am I choosing, and did that click do anything. */

.site-wizard[b-3roroy5i74] {
    counter-reset: wiz;
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Steps ──────────────────────────────────────────────────────────────────────────────────────────
   The brief's order is logo -> template -> colours -> details -> preview. Numbering them off a CSS
   counter rather than writing the digits in the markup means a step added or reordered renumbers
   itself, and a step hidden behind a feature flag never leaves a gap in the sequence. */
.wiz-step[b-3roroy5i74] {
    background: var(--surface-1);
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-lg, 12px);
    padding: 18px 20px 20px;
}

.wiz-step > h3[b-3roroy5i74] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.wiz-step > h3[b-3roroy5i74]::before {
    counter-increment: wiz;
    content: counter(wiz);
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
    color: var(--mud-palette-success);
    font-family: var(--font-mono, monospace);
    font-size: .72rem;
    font-weight: 700;
}

/* ── The template this site has ─────────────────────────────────────────────────────────────────────
   The nine cards stood here until 20.09.2026, three a row. They are a screen of their own now, and what
   this step shows is the answer: one screenshot, the name, who it is for, and the way back to the
   question. */
.wiz-chosen[b-3roroy5i74] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.wiz-chosen .wiz-swatch[b-3roroy5i74] {
    flex: 0 0 200px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

.wiz-chosen-words[b-3roroy5i74] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

/* The three lines sit flush in this layout: the padding on them is for a card, and here there is none. */
.wiz-chosen-words .wiz-template-name[b-3roroy5i74],
.wiz-chosen-words .wiz-template-for[b-3roroy5i74],
.wiz-chosen-words .wiz-template-about[b-3roroy5i74] {
    padding: 0;
    border: none;
}

@media (max-width: 700px) {
    .wiz-chosen[b-3roroy5i74] {
        flex-direction: column;
    }

    .wiz-chosen .wiz-swatch[b-3roroy5i74] {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ── Template picker (removed 20.09.2026) ───────────────────────────────────────────────────────────
   Kept only for the swatch, which the step above still draws. */
.wiz-templates[b-3roroy5i74] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.wiz-template[b-3roroy5i74] {
    flex: 0 1 calc((100% - 28px) / 3);
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: var(--surface-0);
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.wiz-template:hover[b-3roroy5i74] {
    border-color: color-mix(in srgb, var(--mud-palette-success) 55%, transparent);
    transform: translateY(-2px);
}

.wiz-template:focus-visible[b-3roroy5i74] {
    outline: 2px solid var(--mud-palette-success);
    outline-offset: 2px;
}

/* The screenshot carries the template's own ground, so this box sets no background of its own. position
   is for the selected tick that sits in its corner; the aspect is the pictures' own 1440×1010, so nine
   cards tile without ragged heights. */
.wiz-swatch[b-3roroy5i74] {
    width: 100%;
    aspect-ratio: 1440 / 1010;
    position: relative;
}

/* The name the designers gave the family, set as a name rather than as a code: the mono face and the
   tracking were right while this was a lower-case catalog key, and wrong the moment it became "Atelier". */
.wiz-template-name[b-3roroy5i74] {
    display: block;
    padding: 9px 11px 0;
    font-size: .92rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    border-top: 1px solid var(--mud-palette-lines-default, var(--border-bright));
}

/* Who it is for, in three or four words. The line a studio recognises itself in, so it reads before the
   sentence does — brand colour, small, and above the explanation rather than under it. */
.wiz-template-for[b-3roroy5i74] {
    display: block;
    padding: 2px 11px 0;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label, .08em);
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

/* What it is. Left to wrap to as many lines as it needs: nine cards of equal height with a clipped
   sentence on each would be nine cards nobody reads to the end of. */
.wiz-template-about[b-3roroy5i74] {
    display: block;
    padding: 5px 11px 10px;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* Selected. The click already worked before this rule existed — it set is-selected and saved the choice.
   What was missing was any way for the studio to see that, so it is stated twice over: a ring the eye
   catches across the grid, and a tick that survives being colour-blind to the ring. */
.wiz-template.is-selected[b-3roroy5i74] {
    border-color: var(--mud-palette-success);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-success) 45%, transparent);
}

.wiz-template.is-selected .wiz-swatch[b-3roroy5i74]::after {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill, 999px);
    background: var(--mud-palette-success);
    color: var(--surface-0);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
}

.wiz-template.is-selected .wiz-template-name[b-3roroy5i74] {
    color: var(--mud-palette-success);
    font-weight: 700;
}

/* ── Colours ────────────────────────────────────────────────────────────────────────────────────────
   Two native colour inputs. Sized up because the browser default is a thin strip that reads as a form
   control rather than as the colour it is about to put on the studio's website. */
.wiz-colours[b-3roroy5i74] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

/* Three pickers now, so each says which one it is (design handoff §9.1). Two unlabelled swatches could be
   worked out by trying them; three cannot, and the third one repaints the whole page. */
.wiz-colour[b-3roroy5i74] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.wiz-colour-name[b-3roroy5i74] {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label, .08em);
    color: var(--mud-palette-text-secondary);
}

/* The line under the three, about what the site works out for itself. */
/* Under the name field, flush with its own helper line rather than indented as if under a switch. */
.wiz-hint.wiz-hint-name[b-3roroy5i74] {
    margin: 2px 0 6px;
}

.wiz-hint.wiz-hint-colours[b-3roroy5i74] {
    margin-left: 0;
    margin-top: 10px;
}

.wiz-colours input[type="color"][b-3roroy5i74] {
    inline-size: 62px;
    block-size: 44px;
    padding: 0;
    background: none;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
}

/* Chrome and Firefox each wrap the chosen colour in their own box; both need the padding taken off or
   the swatch floats in a grey frame. */
.wiz-colours input[type="color"][b-3roroy5i74]::-webkit-color-swatch-wrapper { padding: 3px; }
.wiz-colours input[type="color"][b-3roroy5i74]::-webkit-color-swatch { border: none; border-radius: 5px; }
.wiz-colours input[type="color"][b-3roroy5i74]::-moz-color-swatch { border: none; border-radius: 5px; }

/* ── Logo ───────────────────────────────────────────────────────────────────────────────────────────
   The native file input said "Choose File / No file chosen" in English whatever language the portal was
   in, gave no hint of what a logo has to be, and showed the mark on one ground only.

   It is still a native input — the browser's own file dialog and its own drop handling are worth more
   than anything hand-rolled, and they are what a phone knows how to open. It is simply stretched over
   the panel below at zero opacity, so all of that keeps working and none of its wording is ever seen. */
.wiz-logo[b-3roroy5i74] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* The same mark on the two grounds the nine templates are drawn on. A transparent logo in dark ink
   vanishes on Portfolio; a white one vanishes on the other eight. Both are worth finding out here
   rather than after publishing. */
.wiz-logo-on[b-3roroy5i74] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 64px;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
}

.wiz-logo-on img[b-3roroy5i74] {
    max-height: 100%;
    max-width: 180px;
    object-fit: contain;
}

.wiz-logo-on-light[b-3roroy5i74] { background: #ffffff; }

/* Portfolio's ground, from its own stylesheet, so this is a real answer rather than a generic dark. */
.wiz-logo-on-dark[b-3roroy5i74] { background: #17151a; }

/* The studio's name standing where the logo would, on the same two grounds: this is what the header draws
   while there is no logo, so it is shown rather than described. Set the way a header sets a name — one line,
   a little tracking, no wrapping — so what the studio sees here is what it gets. */
.wiz-wordmark[b-3roroy5i74] {
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.wiz-logo-on-light .wiz-wordmark[b-3roroy5i74] { color: #17151a; }
.wiz-logo-on-dark .wiz-wordmark[b-3roroy5i74] { color: #f3efe9; }

.wiz-drop[b-3roroy5i74] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 16px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-text-primary) 28%, transparent);
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-0);
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
}

.wiz-drop:hover[b-3roroy5i74],
.wiz-drop:focus-within[b-3roroy5i74],
.wiz-drop.is-over[b-3roroy5i74] {
    border-color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 7%, var(--surface-0));
}

.wiz-drop.is-over[b-3roroy5i74] { border-style: solid; }

.wiz-drop.is-busy[b-3roroy5i74] { cursor: progress; }

/* The whole panel is the control. Opacity rather than display:none or visibility:hidden, because both of
   those take it out of the tab order and off the accessibility tree — this way it is still a file input
   a keyboard reaches and a screen reader announces, and :focus-within above is what draws its focus. */
.wiz-drop[b-3roroy5i74]  input[type="file"],
.wiz-drop-input[b-3roroy5i74] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.wiz-drop.is-busy[b-3roroy5i74]  input[type="file"] { cursor: progress; }

.wiz-drop-face[b-3roroy5i74] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;   /* every click belongs to the input underneath */
}

.wiz-drop-icon[b-3roroy5i74] {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--mud-palette-success);
}

.wiz-drop-title[b-3roroy5i74] {
    font-size: .88rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* A line of advice under a step's title, before its controls. */
.wiz-note[b-3roroy5i74] {
    margin: -6px 0 12px;
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
    max-width: 70ch;
}

.wiz-drop-hint[b-3roroy5i74] {
    font-size: .78rem;
    color: var(--text-muted);
    max-width: 46ch;
}

/* ── Errors ─────────────────────────────────────────────────────────────────────────────────────────
   Sits next to the field it is about, which is the whole reason the wizard validates the name locally
   as well as in the API. */
.wiz-error[b-3roroy5i74] {
    margin-top: 8px;
    padding: 8px 11px;
    border-radius: var(--radius-md, 8px);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 40%, transparent);
    color: var(--mud-palette-error);
    font-size: .82rem;
}

/* ── Details + preview ──────────────────────────────────────────────────────────────────────────────
   The MudBlazor controls in these two steps render outside the scope, so their spacing is set through
   ::deep rather than by wrapping each one in a div that exists only to be styled. */
.wiz-step[b-3roroy5i74]  .mud-input-control { margin-bottom: 14px; }
.wiz-step[b-3roroy5i74]  .mud-switch { display: flex; margin-bottom: 6px; }

/* Approval mode: a short label over its two choices, under the slot interval it belongs with. */
.wiz-approval[b-3roroy5i74] { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 4px; }
.wiz-approval-label[b-3roroy5i74] { font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-secondary); }


/* One card a row on a phone rather than two slivers: the handoff's own floor is ~640px, and a screenshot
   shrunk past it stops showing what it was put there to show. */
@media (max-width: 640px) {
    .wiz-step[b-3roroy5i74] { padding: 14px 14px 16px; }
    .wiz-template[b-3roroy5i74] { flex-basis: 100%; }
}

/* ── The screenshot inside a template card ────────────────────────────────────────────────────────────
   Its own ground, so this box holds no colour. object-position:top because the card's aspect may not be
   the picture's to the pixel, and what identifies a family is the header and the hero — crop from the
   bottom, never the top. */
.wiz-swatch[b-3roroy5i74] {
    display: block;
    padding: 0;
    overflow: hidden;
}

.wiz-swatch img[b-3roroy5i74] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* A consequence said beside the switch that causes it, rather than discovered on the live site. Sits under
   its control and reads as belonging to it — indented past the switch, and quiet, because it explains rather
   than warns: nothing here is wrong, it is simply worth knowing before the site is announced abroad. */
.wiz-hint[b-3roroy5i74] {
    margin: -6px 0 4px 36px;
    max-width: 62ch;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ── Start from scratch (DEV ONLY) ──────────────────────────────────────────────────────────────────
   Set apart from the builder rather than sitting in it: a hairline above, the label small and muted,
   and a DEV tag in front of it so nobody on the dev environment mistakes it for something a studio is
   meant to press. It exists on no production build at all. */
.wiz-devreset[b-3roroy5i74] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px dashed var(--mud-palette-lines-default);
}

.wiz-devreset-tag[b-3roroy5i74] {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--mud-palette-error);
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.wiz-devreset-error[b-3roroy5i74] {
    font-size: .78rem;
    color: var(--mud-palette-error);
}