/* Общие стили контента */
.ck-content, .article-content {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    font-size: 1rem;
}

/* Заголовки и текстовые элементы */
.ck-content h2, .article-content h2 {
    font-size: 1.8rem;
    margin: 1.5em 0 0.8em;
    font-weight: bold;
}

.ck-content h3, .article-content h3 {
    font-size: 1.5rem;
    margin: 1.3em 0 0.7em;
}

.ck-content p, .article-content p {
    margin: 1em 0;
}

.ck-content ul, .ck-content ol,
.article-content ul, .article-content ol {
    margin: 1em 0;
    padding-left: 2em;
}

/* Основные стили изображений (единые для редактора и сайта) */
.ck-content figure, .article-content figure {
    margin: 1.5em 0;
    max-width: 100%;
}

.ck-content figure img, .article-content figure img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}

/* Выравнивание изображений */
.ck-content .image-style-align-left,
.article-content .image-style-align-left {
    float: left;
    margin-right: 2em;
    margin-bottom: 1em;
    max-width: 50%;
}

.ck-content .image-style-align-right,
.article-content .image-style-align-right {
    float: right;
    margin-left: 2em;
    margin-bottom: 1em;
    max-width: 50%;
}

/* Стили только для редактора */
.ck.ck-editor__editable {
    /* Стили для виджета ресайза */
    .image .ck-widget__resizer {
        display: block;
        border: 2px solid #4a90e2;
    }
    
    .image .ck-widget__resizer__handle {
        background: #4a90e2;
        border: 1px solid #fff;
        border-radius: 50%;
        width: 10px;
        height: 10px;
    }
    
    /* Временные стили для работы в редакторе */
    .image.image_resized {
        display: block;
        box-sizing: border-box;
        
        & img {
            width: 100%;
        }
    }
}

/* Цветные маркеры и текст */
.ck-content mark, .article-content mark {
    background-color: #fff3cd;
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

.ck-content .marker-green, .article-content .marker-green { background-color: #62f962; }
.ck-content .marker-yellow, .article-content .marker-yellow { background-color: #fdfd77; }
.ck-content .marker-pink, .article-content .marker-pink { background-color: #fc7899; }
.ck-content .marker-blue, .article-content .marker-blue { background-color: #72ccfd; }
.ck-content .pen-red, .article-content .pen-red { color: #e71313; }
.ck-content .pen-green, .article-content .pen-green { color: #128a00; }

/* Блоки и таблицы */
.ck-content blockquote, .article-content blockquote {
    border-left: 3px solid #eee;
    padding-left: 1em;
    margin: 1.5em 0;
    font-style: italic;
    color: #666;
}

.ck-content table, .article-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5em 0;
}

.ck-content table td, .ck-content table th,
.article-content table td, .article-content table th {
    border: 1px solid #ddd;
    padding: 8px;
}

.ck-content table th, .article-content table th {
    background-color: #f2f2f2;
}

/* Чекбоксы */
.ck-content .todo-list, .article-content .todo-list {
    list-style-type: none;
    padding-left: 0;
}

.ck-content .todo-list__label, .article-content .todo-list__label {
    display: flex;
    align-items: center;
    gap: 8px;
    /* cursor: pointer; */
    margin: 0.5em 0;
}

/* Стили для чекбоксов в редакторе и на сайте */
.ck-content .todo-list__label input[type="checkbox"],
.article-content .todo-list__label input[type="checkbox"] {
    /* Скрываем стандартный чекбокс */
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

/* Стиль для отмеченного чекбокса */
.ck-content .todo-list__label input[type="checkbox"]:checked,
.article-content .todo-list__label input[type="checkbox"]:checked {
    background-color: #FFAFCC;
    border-color: #FFAFCC;
}

/* Галочка в чекбоксе */
.ck-content .todo-list__label input[type="checkbox"]:checked::before,
.article-content .todo-list__label input[type="checkbox"]:checked::before {
    content: "✓";
    position: absolute;
    color: white;
    font-size: 12px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Стиль при наведении */
.ck-content .todo-list__label input[type="checkbox"]:hover,
.article-content .todo-list__label input[type="checkbox"]:hover {
    /* border-color: #FFAFCC; */
    cursor: auto;
}

/* Очистка обтекания */
.ck-content::after, .article-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Стили для ресайза изображений */
.ck.ck-editor__editable .image .ck-widget__resizer {
    display: block !important;
    border: 2px solid #4a90e2 !important;
}

.ck.ck-editor__editable .image .ck-widget__resizer__handle {
    background: #4a90e2 !important;
    border: 1px solid #fff !important;
    border-radius: 50% !important;
    width: 10px !important;
    height: 10px !important;
}

/* Обязательные стили для работы ресайза */
.ck.ck-editor__editable .image.image_resized {
    display: block !important;
    box-sizing: border-box !important;
}

.ck.ck-editor__editable .image.image_resized img {
    width: 100% !important;
}