/* Shared premium rich-text (marketing banners + CMS). Loaded globally — not Blazor scoped. */
.q-rich-text {
    --q-rt-fg: var(--color-fg, #152028);
    --q-rt-muted: var(--color-muted, #5a6878);
    --q-rt-surface: var(--color-surface, #ffffff);
    --q-rt-border: var(--color-border, rgb(21 32 40 / 0.12));
    --q-rt-accent: var(--color-accent, var(--mud-palette-primary, #009fc4));
    --q-rt-soft: color-mix(in srgb, var(--q-rt-accent) 12%, transparent);
    overflow: hidden;
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--q-rt-border) 88%, transparent);
    border-radius: 14px;
    background: var(--q-rt-surface);
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--q-rt-fg) 4%, transparent),
        0 10px 28px -22px rgb(15 23 32 / 0.35);
}

.q-rich-text:focus-within {
    border-color: color-mix(in srgb, var(--q-rt-accent) 55%, var(--q-rt-border));
    box-shadow:
        0 0 0 3px var(--q-rt-soft),
        0 12px 32px -20px rgb(15 23 32 / 0.4);
}

.q-rich-text__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--q-rt-border) 90%, transparent);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--q-rt-surface) 92%, var(--q-rt-fg) 8%) 0%,
            color-mix(in srgb, var(--q-rt-surface) 97%, var(--q-rt-fg) 3%) 100%
        );
}

.q-rich-text__group {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem;
    border: 1px solid color-mix(in srgb, var(--q-rt-border) 80%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--q-rt-surface) 88%, transparent);
}

.q-rich-text__group--controls {
    gap: 0.35rem;
    padding: 0.2rem 0.35rem;
}

.q-rich-text__sep {
    width: 1px;
    height: 1.55rem;
    background: color-mix(in srgb, var(--q-rt-border) 90%, transparent);
}

.q-rich-text__btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.05rem;
    height: 2.05rem;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--q-rt-fg);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        color 140ms ease;
}

.q-rich-text__btn:hover {
    background: color-mix(in srgb, var(--q-rt-fg) 6%, transparent);
    border-color: color-mix(in srgb, var(--q-rt-border) 70%, transparent);
}

.q-rich-text__btn.is-active,
.q-rich-text__btn:focus-visible {
    color: var(--q-rt-accent);
    background: var(--q-rt-soft);
    border-color: color-mix(in srgb, var(--q-rt-accent) 32%, transparent);
    outline: none;
}

.q-rich-text__underline {
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.q-rich-text__color {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.05rem;
    height: 2.05rem;
    border: 1px solid color-mix(in srgb, var(--q-rt-border) 85%, transparent);
    border-radius: 8px;
    cursor: pointer;
    background: color-mix(in srgb, var(--q-rt-surface) 90%, transparent);
}

.q-rich-text__color-swatch {
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--q-rt-fg) 18%, transparent);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
}

.q-rich-text__color input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.q-rich-text__select--size {
    width: 6.5rem;
}

.q-rich-text__select--family {
    width: 7.25rem;
}

.q-rich-text__select.mud-input-control {
    margin: 0 !important;
}

.q-rich-text__select .mud-input-control-input-container {
    margin: 0 !important;
}

.q-rich-text__select .mud-input.mud-input-outlined {
    min-height: 2.05rem !important;
    background: color-mix(in srgb, var(--q-rt-surface) 94%, transparent) !important;
}

.q-rich-text__select .mud-input.mud-input-outlined .mud-input-slot,
.q-rich-text__select .mud-select-input {
    min-height: 2.05rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}

.q-rich-text__select .mud-input-outlined-border {
    border-color: color-mix(in srgb, var(--q-rt-border) 88%, transparent) !important;
    border-radius: 8px !important;
}

.q-rich-text__content {
    min-height: 8.5rem;
    padding: 1rem 1.05rem 1.15rem;
    color: var(--q-rt-fg);
    font-family: var(--font-family-base, "Manrope", "Segoe UI", sans-serif);
    font-size: 1rem;
    line-height: 1.62;
    outline: none;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--q-rt-surface) 100%, transparent) 0%,
            color-mix(in srgb, var(--q-rt-surface) 98%, var(--q-rt-fg) 2%) 100%
        );
}

.q-rich-text.is-compact .q-rich-text__content {
    min-height: 10.5rem;
    max-height: min(26rem, 48vh);
    overflow: auto;
}

.q-rich-text__content:empty::before {
    color: var(--q-rt-muted);
    content: attr(data-placeholder);
    pointer-events: none;
    font-weight: 450;
}

.q-rich-text__content p {
    margin: 0 0 0.65rem;
}

.q-rich-text__content p:last-child {
    margin-bottom: 0;
}

.q-rich-text__content ul,
.q-rich-text__content ol {
    margin: 0.35rem 0 0.75rem;
    padding-left: 1.4rem;
}

.q-rich-text__content ul {
    list-style: disc;
}

.q-rich-text__content ol {
    list-style: decimal;
}

.q-rich-text-popover,
body:has(.cms-gc-inspector) .q-rich-text-popover {
    z-index: 1700 !important;
}

.cms-gc-inspector .q-rich-text {
    --q-rt-fg: var(--cms-gc-fg, var(--color-fg));
    --q-rt-muted: var(--cms-gc-muted, var(--color-muted));
    --q-rt-surface: var(--cms-gc-surface, var(--color-surface));
    --q-rt-border: var(--cms-gc-border, var(--color-border));
    --q-rt-accent: var(--cms-gc-accent, var(--color-accent));
}