/*
 * CKEditor 5 content styles
 * Based on CKEditor 5 v37 content CSS
 * Scoped under .ck-content or .editor-content for safety
 */

.ck-content figure.image,
.editor-content figure.image {
    display: table;
    clear: both;
    text-align: center;
    margin: 0.9em auto;
    min-width: 50px;
}

/* Legacy data fallback: bare block-level images (figure wrapper was stripped
   by the old sanitizer) — render them centered like CKEditor's default block
   image instead of a right-floating inline element in RTL. */
.ck-content > img,
.editor-content > img {
    display: block;
    margin: 0.9em auto;
    max-width: 100%;
    height: auto;
}

.ck-content p:only-child img,
.editor-content p:only-child img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}

/* CKEditor 5 image resize: width is set inline on the figure, the img fills it */
.ck-content figure.image.image_resized,
.editor-content figure.image.image_resized {
    display: block;
    box-sizing: border-box;
}

.ck-content figure.image.image_resized img,
.editor-content figure.image.image_resized img {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.ck-content figure.image img,
.editor-content figure.image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-width: 100%;
}

.ck-content figure.image > figcaption,
.editor-content figure.image > figcaption {
    display: block;
    position: relative;
    max-width: 400px;
    margin: 0.9em auto 0;
    padding: 0.9em 0;
    text-align: center;
    font-size: 0.85em;
    color: hsl(0, 0%, 47%);
}

/* Image styles - block */
.ck-content .image-style-block,
.editor-content .image-style-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}

/* Image styles - side (float) */
.ck-content .image-style-side,
.editor-content .image-style-side {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 0.5em;
    max-width: 50%;
}

/* Image styles - align left */
.ck-content .image-style-align-left,
.editor-content .image-style-align-left {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 0.5em;
}

/* Image styles - align center */
.ck-content .image-style-align-center,
.editor-content .image-style-align-center {
    margin-left: auto;
    margin-right: auto;
}

/* Image styles - align right */
.ck-content .image-style-align-right,
.editor-content .image-style-align-right {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 0.5em;
}

/* Image styles - align left with a caption */
.ck-content .image-style-align-left > img,
.editor-content .image-style-align-left > img {
    display: inline-block;
}

/* Wide and full-width images */
.ck-content .image-style-wide,
.editor-content .image-style-wide {
    max-width: 100%;
}

.ck-content .image-style-full-width,
.editor-content .image-style-full-width {
    clear: both;
    max-width: none;
}

/* Wrapped (in-line) image */
.ck-content figure.image-inline,
.editor-content figure.image-inline {
    display: inline-block;
    position: relative;
    max-width: 100%;
    margin: 0;
    vertical-align: bottom;
    text-align: center;
}

.ck-content figure.image-inline img,
.editor-content figure.image-inline img {
    display: inline-block;
    max-width: 100%;
    min-width: 100%;
    margin: 0 auto;
}

.ck-content figure.image-inline figcaption,
.editor-content figure.image-inline figcaption {
    position: relative;
    max-width: 400px;
    margin: 0.9em auto 0;
    padding: 0.9em 0;
    text-align: center;
    font-size: 0.85em;
    color: hsl(0, 0%, 47%);
}

/* Media embed */
.ck-content figure.media,
.editor-content figure.media {
    clear: both;
    display: table;
    margin: 0.9em auto;
    min-width: 15em;
    text-align: center;
}

.ck-content figure.media > oembed,
.editor-content figure.media > oembed {
    display: block;
}

.ck-content figure.media[contenteditable="false"] > iframe,
.editor-content figure.media[contenteditable="false"] > iframe {
    display: block;
    width: 100%;
    min-width: 20em;
    height: 20em;
    border: 1px solid #ccc;
}

/* HTML embed (raw HTML widget) */
.ck-content .raw-html-embed,
.editor-content .raw-html-embed {
    position: relative;
    margin: 1.5em;
    padding: 1em;
    background: hsl(30, 1%, 98%);
    border: 1px dashed hsl(30, 1%, 70%);
    border-radius: 4px;
}

/* Page break */
.ck-content .page-break,
.editor-content .page-break {
    position: relative;
    clear: both;
    padding: 5px 0;
    height: 5px;
}

/* Code block */
.ck-content pre,
.editor-content pre {
    background: hsl(30, 1%, 98%);
    border: 1px solid hsl(30, 1%, 85%);
    border-radius: 4px;
    padding: 1em;
    margin: 1.5em 0;
    overflow: auto;
    white-space: pre-wrap;
}

.ck-content pre code,
.editor-content pre code {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 0.85em;
    white-space: pre-wrap;
}

/* Inline code */
.ck-content code,
.editor-content code {
    background: hsl(30, 1%, 98%);
    border: 1px solid hsl(30, 1%, 85%);
    border-radius: 4px;
    padding: 0.15em 0.3em;
    font-size: 0.85em;
}

/* Highlight */
.ck-content .highlight,
.editor-content .highlight {
    background: hsl(52, 100%, 50%);
}

/* Todo list */
.ck-content .todo-list,
.editor-content .todo-list {
    list-style: none;
    padding-left: 0;
}

.ck-content .todo-list li,
.editor-content .todo-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
}

.ck-content .todo-list li input[type="checkbox"],
.editor-content .todo-list li input[type="checkbox"] {
    margin-top: 0.25em;
}

/* Tables */
.ck-content table,
.editor-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.9em auto;
}

.ck-content table th,
.ck-content table td,
.editor-content table th,
.editor-content table td {
    border: 1px solid hsl(0, 0%, 80%);
    padding: 0.4em 0.8em;
    min-width: 2em;
}

.ck-content table th,
.editor-content table th {
    font-weight: 700;
    background: hsl(0, 0%, 96%);
}

.ck-content table caption,
.editor-content table caption {
    caption-side: bottom;
    padding: 0.4em;
    font-size: 0.85em;
    color: hsl(0, 0%, 47%);
}

/* Blockquote */
.ck-content blockquote,
.editor-content blockquote {
    border-left: 4px solid hsl(0, 0%, 80%);
    margin: 1.5em 0;
    padding: 0.5em 1em;
    color: hsl(0, 0%, 47%);
    background: hsl(0, 0%, 100%);
}

/* Horizontal rule */
.ck-content hr,
.editor-content hr {
    border: none;
    border-top: 1px solid hsl(0, 0%, 80%);
    margin: 1.5em 0;
}

/* Generic figure */
.ck-content figure,
.editor-content figure {
    display: table;
    margin: 1em auto;
}

/* Ensure images respect RTL in product description context */
[dir="rtl"] .ck-content figure.image-style-side,
[dir="rtl"] .editor-content figure.image-style-side,
[dir="rtl"] .description-content figure.image-style-side {
    float: left;
    margin-left: 0;
    margin-right: 1.5em;
}

[dir="rtl"] .ck-content .image-style-align-left,
[dir="rtl"] .editor-content .image-style-align-left,
[dir="rtl"] .description-content .image-style-align-left {
    float: left;
    margin-left: 0;
    margin-right: 1.5em;
}

[dir="rtl"] .ck-content .image-style-align-right,
[dir="rtl"] .editor-content .image-style-align-right,
[dir="rtl"] .description-content .image-style-align-right {
    float: right;
    margin-left: 1.5em;
    margin-right: 0;
}