/* ===== SimpleEditor (ProseMirror) — SelfService subset ===== */

/* Base ProseMirror reset */
.ProseMirror {
    outline: none;
    cursor: text;
}

/* Override default ProseMirror paragraph margin — ad templates need tight spacing */
.simple-rich-text-editor .ProseMirror p {
    margin: 0;
}

/* Editor content area */
.simple-rich-text-editor .ProseMirror {
    min-height: 20px;
    outline: none;
}

.simple-rich-text-editor .se-editor-wrapper {
    position: relative;
}

/* Toolbar base */
.se-toolbar {
    display: flex;
    flex-direction: column;
}

.se-toolbar-row {
    align-items: center;
    display: flex;
    gap: 3px;
    padding: 4px 5px;
}

/* Inline toolbar (floating on selection) */
.se-toolbar-inline {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
    position: absolute;
    z-index: 9100;
}

/* Separator between button groups */
.se-toolbar-separator {
    background: transparent;
    display: inline-block;
    height: 16px;
    margin: 0 2px;
    width: 1px;
}

/* Toolbar buttons — fully rounded, matches .rounded-button from side toolbar */
.se-toolbar-btn {
    align-items: center;
    background: rgba(0, 0, 0, 0.07);
    border: none;
    border-radius: 50%;
    color: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 13px;
    height: 28px;
    justify-content: center;
    transition: background-color 0.15s, color 0.15s, transform 0.15s;
    width: 28px;
}

.se-toolbar-btn:hover {
    background: color-mix(in srgb, var(--theme-secondary, #B7DD7E) 28%, white);
    color: var(--theme-secondary, #B7DD7E);
    transform: scale(1.06);
}

.se-toolbar-btn-active {
    background: color-mix(in srgb, var(--theme-secondary, #B7DD7E) 15%, white);
    border: 1px solid color-mix(in srgb, var(--theme-secondary, #B7DD7E) 30%, white);
    color: var(--theme-secondary, #B7DD7E);
}

.se-toolbar-btn-active:hover {
    background: color-mix(in srgb, var(--theme-secondary, #B7DD7E) 25%, white);
    color: var(--theme-secondary, #B7DD7E);
}

.se-toolbar-btn:focus {
    outline: none;
}

/* Symbol button active when icon picker panel is open */
body:has(.panel-marker-icons) .se-toolbar-inline [data-btn="symbols"] {
    background: color-mix(in srgb, var(--theme-secondary, #B7DD7E) 20%, white) !important;
    border: 1px solid color-mix(in srgb, var(--theme-secondary, #B7DD7E) 35%, white) !important;
    color: var(--theme-secondary, #B7DD7E) !important;
}

/* Hide the "more" toggle in flat mode */
.se-toolbar-more-btn {
    display: none;
}

/* Secondary row — hidden in flat mode */
.se-toolbar-secondary {
    display: none;
}

/* ===== SpanPairEditor ===== */
.span-pair-editor {
    display: flex;
    width: 100%;
}

.span-pair-inline {
    flex-direction: row;
    gap: 12px;
}

.span-pair-stacked {
    flex-direction: column;
}

.span-pair-input {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    outline: none;
    padding: 0;
    text-align: inherit;
    width: 100%;
}

.span-pair-input:focus {
    outline: none;
}