/* ===== Font Families in Editor Output ===== */
.ql-font-arial {
    font-family: Arial, Helvetica, sans-serif;
}

.ql-font-serif {
    font-family: Georgia, "Times New Roman", serif;
}

/* ===== Font Dropdown Labels ===== */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before {
    content: "Arial";
    font-family: Arial, Helvetica, sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    content: "Serif";
    font-family: Georgia, "Times New Roman", serif;
}

/* ===== Show custom size values in Quill size picker dropdown and label ===== */
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value]::before {
  content: attr(data-value) !important;
  color: #222 !important;
  font-size: inherit !important;
  background: none !important;
}

/* ===== Read-only / disabled editor state (quill.enable(false)) ===== */
.ql-container.ql-disabled .ql-editor {
    background-color: #f5f5f5;
    cursor: default;
    color: #555;
}

.ql-container.ql-disabled {
    border-color: #ddd;
}

/* Visually disable toolbar buttons when editor is read-only */
.ql-editor-readonly .ql-toolbar.ql-snow {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
    background-color: #f5f5f5;
}