/* Block-level Callout Boxes for Multiline Content in Quill Editor */

/* Callout box base styles - simple box without icons */
.ql-editor .callout-box {
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    border-left: 4px solid #a8d5ce;
    border-radius: 4px;
    position: relative;
    min-height: 2.5rem;
    background-color: #e3f2ef;
    color: #212529;
}

/* Callout box variants */
.ql-editor .callout-info {
    background-color: #d1ecf1;
    border-left-color: #0c5460;
    color: #0c5460;
}

.ql-editor .callout-success {
    background-color: #e3f2ef;
    border-left-color: #a8d5ce;
    color: #212529;
}

.ql-editor .callout-warning {
    background-color: #fff3cd;
    border-left-color: #856404;
    color: #856404;
}

.ql-editor .callout-danger {
    background-color: #f8d7da;
    border-left-color: #721c24;
    color: #721c24;
}

.ql-editor .callout-custom {
    border-left-color: #6c757d;
    color: #212529;
}

/* Rendered content (outside editor) */
.ql-content .callout-box {
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    border-left: 4px solid #a8d5ce;
    border-radius: 4px;
    position: relative;
    min-height: 2.5rem;
    background-color: #e3f2ef;
    color: #212529;
}

.ql-content .callout-info {
    background-color: #d1ecf1;
    border-left-color: #0c5460;
    color: #0c5460;
}

.ql-content .callout-success {
    background-color: #e3f2ef;
    border-left-color: #a8d5ce;
    color: #212529;
}

.ql-content .callout-warning {
    background-color: #fff3cd;
    border-left-color: #856404;
    color: #856404;
}

.ql-content .callout-danger {
    background-color: #f8d7da;
    border-left-color: #721c24;
    color: #721c24;
}

.ql-content .callout-custom {
    border-left-color: #6c757d;
    color: #212529;
}

/* Toolbar button styling */
.ql-snow .ql-picker.ql-callout .ql-picker-label::before {
    content: '📦';
}

.ql-snow .ql-picker.ql-callout .ql-picker-item[data-value="info"]::before {
    content: 'ℹ️ Info Box';
}

.ql-snow .ql-picker.ql-callout .ql-picker-item[data-value="success"]::before {
    content: 'Multiline Box';
}

.ql-snow .ql-picker.ql-callout .ql-picker-item[data-value="warning"]::before {
    content: '⚠️ Warning Box';
}

.ql-snow .ql-picker.ql-callout .ql-picker-item[data-value="danger"]::before {
    content: '❌ Danger Box';
}

.ql-snow .ql-picker.ql-callout .ql-picker-item[data-value="custom"]::before {
    content: '🎨 Custom Box';
}