h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
.account-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 0 1rem;
}

.account-label {
    display: block;
    margin: 0.75rem 0 0.25rem;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.account-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font: inherit;
}

.account-input:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 0;
}

.account-validation {
    color: var(--mud-palette-error);
    font-size: 0.8rem;
}

.account-check {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
}

.signup-rules {
    margin: 0.75rem 0 0.25rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: 0.5rem 0.75rem;
}

.signup-rules summary {
    cursor: pointer;
    color: var(--mud-palette-primary);
}

.signup-rules-text {
    max-height: 16rem;
    overflow-y: auto;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.captcha-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.captcha-image {
    display: block;
    max-width: calc(100% - 3rem);
    height: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.captcha-refresh {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--mud-palette-text-primary);
    background: transparent;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 50%;
    cursor: pointer;
}

.captcha-refresh:hover:not(:disabled) {
    border-color: var(--mud-palette-primary);
}

.captcha-refresh:disabled {
    opacity: 0.5;
    cursor: wait;
}

.account-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
    font-size: 0.875rem;
}

.account-links a {
    color: var(--mud-palette-primary);
}

.recovery-code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 0.75rem;
    border: 1px dashed var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius);
    user-select: all;
}

.manage-form {
    max-width: 480px;
}

.conversation {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 420px;
    overflow-y: auto;
}

.conversation-message {
    max-width: 85%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-gray);
    white-space: pre-wrap;
}

.conversation-mine {
    align-self: flex-end;
    border: 1px solid var(--mud-palette-primary);
}

.conversation-theirs {
    align-self: flex-start;
}

.conversation-meta {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.25rem;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.site-logo {
    max-height: 36px;
    max-width: 160px;
}

.account-welcome {
    white-space: pre-wrap;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 1rem;
}

.content-page img {
    max-width: 100%;
    height: auto;
}

.content-page table {
    border-collapse: collapse;
}

.content-page td,
.content-page th {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.25rem 0.5rem;
}

.content-page a {
    color: var(--mud-palette-primary);
}

/* MudBlazor's reset zeroes list padding, which pushes numbers and bullets outside the box. Restore the same
   indent in the editor, the stored preview, content pages and chat messages so they all look alike. */
.rz-html-editor-content ul,
.rz-html-editor-content ol,
.content-page ul,
.content-page ol,
.conversation-html ul,
.conversation-html ol {
    padding-left: 2em;
    margin: 0.4em 0;
    list-style-position: outside;
}

.rz-html-editor-content ul,
.content-page ul,
.conversation-html ul {
    list-style-type: disc;
}

.rz-html-editor-content ol,
.content-page ol,
.conversation-html ol {
    list-style-type: decimal;
}

.rz-html-editor-content li,
.content-page li,
.conversation-html li {
    margin: 0.15em 0;
}

.rz-html-editor-content p {
    margin: 0 0 0.5em;
}

.content-page p {
    margin: 0 0 0.75em;
}

.content-page h1,
.content-page h2,
.content-page h3,
.content-page h4 {
    margin: 0.75em 0 0.4em;
}

.content-page > :first-child {
    margin-top: 0;
}

.color-swatch {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
}

/* Radzen's "-base" theme leaves colours to the host app; use the MudBlazor palette so editor text is readable. */
.rz-html-editor {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-default);
}

.rz-html-editor-content {
    color: var(--mud-palette-text-primary);
    caret-color: var(--mud-palette-primary);
}

.rz-html-editor-content a {
    color: var(--mud-palette-primary);
}

.service-image {
    max-width: 100%;
    max-height: 320px;
    border-radius: var(--mud-default-borderradius);
}

.catalog-card {
    height: 100%;
}

/* Chat: column-reverse keeps the newest messages in view without script. */
.chat-scroll {
    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto;
    max-height: 460px;
    min-height: 120px;
}

.chat-scroll .conversation {
    max-height: none;
    overflow: visible;
}

.conversation-deleted {
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.chat-typing {
    min-height: 1.25rem;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

/* Admin log viewer */
.log-view {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--mud-palette-background-gray);
    padding: 0.5rem;
    border-radius: var(--mud-default-borderradius);
}

.log-line {
    padding: 2px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.log-select {
    margin-right: 6px;
    vertical-align: middle;
    accent-color: var(--mud-palette-primary);
}

.log-wrn {
    color: var(--mud-palette-warning);
}

.log-err, .log-ftl {
    color: var(--mud-palette-error);
}

/* CopyableText: a long value on one line, cut with an ellipsis, plus a copy button. */
.copyable {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    min-width: 0;
    vertical-align: middle;
}

.copyable-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Tables are often in half-width cards: keep the value short enough that the copy button always stays visible. */
td .copyable {
    max-width: min(13rem, 100%);
}

/* A long list that scrolls inside its own box (recent pages, sign-in attempts); the sticky header row stays visible. */
.scroll-box {
    max-height: 420px;
    overflow-y: auto;
    border-radius: 4px;
}

/* The table's own container must not scroll (it would capture the sticky header); the box does the scrolling. */
.scroll-box .mud-table-container {
    overflow: visible;
}

.scroll-box thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
}

/* Branding page: current logo and favicon. */
.brand-preview {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 8px 12px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 4px;
}

.brand-preview img {
    max-height: 48px;
    max-width: 100%;
}

.brand-preview.favicon img {
    width: 32px;
    height: 32px;
}

/* Notification API payload examples */
.payload-example {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 12px;
    overflow-x: auto;
    font-size: 0.85rem;
}

/* Formatted chat messages: keep paragraphs compact inside a bubble. */
.conversation-html p {
    margin: 0 0 0.4em;
}

.conversation-html p:last-child {
    margin-bottom: 0;
}

.conversation-html a {
    color: var(--mud-palette-primary-lighten);
}

.message-editor .rz-html-editor-content {
    min-height: 80px;
}

/* Printing an invoice: only the invoice itself. */
@media print {
    .mud-appbar,
    .mud-drawer,
    .no-print {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
    }
}

/* Wallet address with its QR code (Step 23). The white quiet zone keeps phone scanners reliable on the dark theme. */
.wallet-address {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.wallet-qr {
    display: block;
    margin: 0.5rem 0;
    padding: 6px;
    background: #fff;
    border-radius: 6px;
}

/* Advertising banners on member pages (Step 24). */
.ad-banner {
    margin: 0.75rem auto 0;
    max-width: 1280px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: linear-gradient(90deg, rgba(198, 40, 40, 0.18), rgba(198, 40, 40, 0.04));
}

.ad-banner-footer {
    margin: 0 auto 1rem;
}

.ad-banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

a.ad-banner-content:hover .ad-banner-text {
    text-decoration: underline;
}

.ad-banner-image {
    max-height: 56px;
    max-width: 100%;
    object-fit: contain;
}

.ad-banner-text {
    font-weight: 500;
}

/* Copyright line pinned to the bottom of the side menu (the drawer content is a flex column); hidden while the
   drawer is collapsed to icons. */
.nav-copyright {
    margin-top: auto;
    padding: 12px 16px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    border-top: 1px solid var(--mud-palette-lines-default);
    overflow-wrap: anywhere;
}

.mud-drawer--closed .nav-copyright {
    display: none;
}

/* Rules, About us and Contact us: readable line length inside the card. */
.content-card {
    max-width: 900px;
}

/* Service editor: the chosen image. */
.service-image-preview {
    display: block;
    max-width: 100%;
    max-height: 160px;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-lines-default);
}

/* The price before a discount, crossed out next to the discounted price. */
.price-was {
    margin-right: 0.4em;
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
    text-decoration-thickness: 1.5px;
}