/* =========================================================
   MMosaad Global CKEditor + Rich Content Styling
   Fixes:
   1. CKEditor toolbar overflow / sticky overlay issue
   2. Dark mode dropdowns and panels
   3. Theme colors integration
   4. H1-H6 realistic typography
   5. Lists, tables, images, code, quotes, mobile
   ========================================================= */

/* =========================================================
   01) Theme Variables
   ========================================================= */

:root {
  --rte-primary: var(--color-primary, var(--mx-primary, #2563eb));
  --rte-primary-dark: var(--color-primary-dark, var(--mx-primary-dark, #1d4ed8));
  --rte-accent: var(--color-accent, var(--mx-accent, #f59e0b));

  --rte-bg: var(--mx-surface-strong, #ffffff);
  --rte-bg-soft: var(--mx-surface, #f8fafc);
  --rte-page-bg: var(--page-bg, var(--mx-bg, #f8fafc));

  --rte-text: var(--page-text, var(--mx-text, #0f172a));
  --rte-heading: var(--mx-text, #0f172a);
  --rte-muted: var(--mx-muted, #64748b);

  --rte-border: var(--mx-border, rgba(37, 99, 235, 0.18));
  --rte-border-strong: var(--mx-border-strong, rgba(37, 99, 235, 0.32));

  --rte-font: var(--app-font-family, "Noto Kufi Arabic", system-ui, sans-serif);
  --rte-code-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --rte-radius: 22px;
  --rte-radius-sm: 14px;

  --rte-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
  --rte-dropdown-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
}

html.dark,
.dark {
  --rte-bg: var(--mx-surface-strong, #0f172a);
  --rte-bg-soft: var(--mx-surface, #111827);
  --rte-page-bg: var(--page-bg, var(--mx-bg, #020617));

  --rte-text: var(--page-text, var(--mx-text, #f8fafc));
  --rte-heading: var(--mx-text, #f8fafc);
  --rte-muted: var(--mx-muted, #cbd5e1);

  --rte-border: var(--mx-border, rgba(96, 165, 250, 0.25));
  --rte-border-strong: var(--mx-border-strong, rgba(96, 165, 250, 0.42));

  --rte-shadow: 0 16px 42px rgba(0, 0, 0, 0.35);
  --rte-dropdown-shadow: 0 24px 54px rgba(0, 0, 0, 0.48);
}

/* =========================================================
   02) CKEditor Layout Fixes
   يمنع المحرر يطلع برا الصفحة أو يركب على الناف/السايدبار
   ========================================================= */

.rich-text-editor {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  border-radius: var(--rte-radius) !important;
}

.rich-text-editor .ck.ck-editor,
.ck.ck-editor {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  border-radius: var(--rte-radius) !important;
  border: 1px solid var(--rte-border) !important;
  background: var(--rte-bg) !important;
  color: var(--rte-text) !important;
  box-shadow: var(--rte-shadow) !important;
}

/* مهم جدًا: إلغاء Sticky Toolbar بتاع CKEditor لأنه بيطلع فوق الناف */
.ck.ck-sticky-panel,
.ck.ck-sticky-panel__content,
.ck.ck-sticky-panel__content_sticky {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  z-index: 2 !important;
}

.ck.ck-sticky-panel__placeholder {
  display: none !important;
  height: 0 !important;
}

.ck.ck-editor__top,
.ck.ck-editor__main {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.ck.ck-toolbar {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  padding: 11px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rte-border) !important;
  background: var(--rte-bg-soft) !important;
  color: var(--rte-text) !important;
  border-radius: var(--rte-radius) var(--rte-radius) 0 0 !important;
}

.ck.ck-toolbar__items {
  flex-wrap: wrap !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.ck.ck-editor__main > .ck-editor__editable {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: var(--rte-min-height, 360px) !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  padding: clamp(18px, 2.2vw, 32px) !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: var(--rte-bg) !important;
  color: var(--rte-text) !important;
  font-family: var(--rte-font) !important;
  font-size: 16px !important;
  line-height: 2.05 !important;
  direction: rtl !important;
  text-align: right !important;
  caret-color: var(--rte-primary) !important;
  border-radius: 0 0 var(--rte-radius) var(--rte-radius) !important;
}

.ck.ck-editor__main > .ck-editor__editable:focus {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rte-primary) 42%, transparent) !important;
}

/* Source Editing Area */
.ck-source-editing-area,
.ck-source-editing-area textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--rte-min-height, 360px) !important;
  background: var(--rte-bg) !important;
  color: var(--rte-text) !important;
  border: 0 !important;
  font-family: var(--rte-code-font) !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  direction: ltr !important;
  text-align: left !important;
}

/* =========================================================
   03) CKEditor Toolbar Buttons
   ========================================================= */

.ck.ck-button,
.ck.ck-dropdown__button {
  min-height: 34px !important;
  border-radius: 12px !important;
  color: var(--rte-text) !important;
  background: transparent !important;
}

.ck.ck-button .ck-button__label,
.ck.ck-dropdown__button .ck-button__label {
  color: inherit !important;
}

.ck.ck-button .ck-icon,
.ck.ck-dropdown__button .ck-icon {
  color: inherit !important;
}

.ck.ck-button:hover,
.ck.ck-button.ck-on,
.ck.ck-button.ck-off:hover,
.ck.ck-dropdown__button:hover,
.ck.ck-dropdown__button.ck-on {
  background: color-mix(in srgb, var(--rte-primary) 16%, transparent) !important;
  color: var(--rte-primary) !important;
}

.ck.ck-button.ck-on {
  background: color-mix(in srgb, var(--rte-primary) 22%, transparent) !important;
}

.ck.ck-button:focus,
.ck.ck-dropdown__button:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rte-primary) 28%, transparent) !important;
}

.ck.ck-toolbar .ck.ck-toolbar__separator {
  background: var(--rte-border) !important;
}

.ck.ck-toolbar .ck.ck-toolbar__line-break {
  display: block !important;
  width: 100% !important;
}

/* =========================================================
   04) CKEditor Dropdowns / Panels Dark Mode Fix
   يحل مشكلة القائمة البيضاء في الوضع الليلي
   ========================================================= */

.ck.ck-dropdown__panel,
.ck.ck-balloon-panel,
.ck.ck-dialog,
.ck.ck-list,
.ck.ck-reset_all,
.ck.ck-reset_all *,
.ck.ck-labeled-field-view,
.ck.ck-form__row,
.ck.ck-input,
.ck.ck-textarea {
  font-family: var(--rte-font) !important;
}

.ck.ck-dropdown__panel,
.ck.ck-balloon-panel,
.ck.ck-dialog {
  z-index: 999999 !important;
  background: var(--rte-bg) !important;
  color: var(--rte-text) !important;
  border: 1px solid var(--rte-border-strong) !important;
  border-radius: 16px !important;
  box-shadow: var(--rte-dropdown-shadow) !important;
  overflow: hidden !important;
}

.ck.ck-dropdown__panel * {
  color: inherit;
}

.ck.ck-list {
  background: var(--rte-bg) !important;
  color: var(--rte-text) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.ck.ck-list__item {
  background: var(--rte-bg) !important;
  color: var(--rte-text) !important;
}

.ck.ck-list__item .ck-button {
  width: 100% !important;
  color: var(--rte-text) !important;
  background: var(--rte-bg) !important;
  border-radius: 0 !important;
}

.ck.ck-list__item .ck-button .ck-button__label {
  color: var(--rte-text) !important;
}

.ck.ck-list__item .ck-button:hover,
.ck.ck-list__item .ck-button.ck-on {
  background: color-mix(in srgb, var(--rte-primary) 18%, var(--rte-bg)) !important;
  color: var(--rte-primary) !important;
}

.ck.ck-list__item .ck-button:hover .ck-button__label,
.ck.ck-list__item .ck-button.ck-on .ck-button__label {
  color: var(--rte-primary) !important;
}

.ck.ck-input,
.ck.ck-labeled-field-view__input-wrapper input,
.ck.ck-textarea {
  background: var(--rte-bg-soft) !important;
  color: var(--rte-text) !important;
  border-color: var(--rte-border) !important;
  border-radius: 12px !important;
}

.ck.ck-input:focus,
.ck.ck-textarea:focus {
  border-color: var(--rte-primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rte-primary) 25%, transparent) !important;
}

.ck.ck-label {
  color: var(--rte-muted) !important;
}

/* Dropdown width fix */
.ck.ck-dropdown__panel {
  min-width: 230px !important;
}

.ck.ck-dropdown__panel .ck-list {
  max-height: 330px !important;
  overflow-y: auto !important;
}

/* =========================================================
   05) Global Rich Content Base
   انسخ هذا الجزء مع العناوين للواجهة الأمامية أيضًا
   ========================================================= */

.ck-content,
.cms-content,
.rich-content,
.prose,
.article-content,
.page-content,
.service-content,
.lesson-content,
.blog-content,
.content-body,
.post-content,
.editor-content {
  max-width: 100%;
  color: var(--rte-text);
  font-family: var(--rte-font);
  line-height: 2.05;
  word-break: normal;
  overflow-wrap: anywhere;
  direction: rtl;
  text-align: right;
}

.ck-content *,
.cms-content *,
.rich-content *,
.prose *,
.article-content *,
.page-content *,
.service-content *,
.lesson-content *,
.blog-content *,
.content-body *,
.post-content *,
.editor-content * {
  box-sizing: border-box;
  max-width: 100%;
}

.ck-content p,
.cms-content p,
.rich-content p,
.prose p,
.article-content p,
.page-content p,
.service-content p,
.lesson-content p,
.blog-content p,
.content-body p,
.post-content p,
.editor-content p {
  margin: 0 0 1.15em;
  color: var(--rte-text);
  font-size: 1rem;
  line-height: 2.05;
}

/* =========================================================
   06) H1 - H6 Typography
   هذا الجزء منفصل للعناوين من H1 إلى H6
   ========================================================= */

.ck-content h1,
.cms-content h1,
.rich-content h1,
.prose h1,
.article-content h1,
.page-content h1,
.service-content h1,
.lesson-content h1,
.blog-content h1,
.content-body h1,
.post-content h1,
.editor-content h1 {
  position: relative;
  margin: 1.75em 0 0.85em;
  padding-bottom: 0.45em;
  font-size: clamp(2.15rem, 5vw, 4rem);
  line-height: 1.22;
  font-weight: 950;
  letter-spacing: -0.045em;
  color: var(--rte-heading);
}

.ck-content h1::after,
.cms-content h1::after,
.rich-content h1::after,
.prose h1::after,
.article-content h1::after,
.page-content h1::after,
.service-content h1::after,
.lesson-content h1::after,
.blog-content h1::after,
.content-body h1::after,
.post-content h1::after,
.editor-content h1::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 96px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rte-primary), var(--rte-accent));
}

.ck-content h2,
.cms-content h2,
.rich-content h2,
.prose h2,
.article-content h2,
.page-content h2,
.service-content h2,
.lesson-content h2,
.blog-content h2,
.content-body h2,
.post-content h2,
.editor-content h2 {
  position: relative;
  margin: 1.65em 0 0.8em;
  padding-right: 1rem;
  font-size: clamp(1.75rem, 3.5vw, 2.85rem);
  line-height: 1.32;
  font-weight: 950;
  letter-spacing: -0.035em;
  color: var(--rte-heading);
}

.ck-content h2::before,
.cms-content h2::before,
.rich-content h2::before,
.prose h2::before,
.article-content h2::before,
.page-content h2::before,
.service-content h2::before,
.lesson-content h2::before,
.blog-content h2::before,
.content-body h2::before,
.post-content h2::before,
.editor-content h2::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0.2em;
  width: 5px;
  height: 1.2em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--rte-primary), var(--rte-accent));
}

.ck-content h3,
.cms-content h3,
.rich-content h3,
.prose h3,
.article-content h3,
.page-content h3,
.service-content h3,
.lesson-content h3,
.blog-content h3,
.content-body h3,
.post-content h3,
.editor-content h3 {
  margin: 1.5em 0 0.7em;
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  line-height: 1.42;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--rte-heading);
}

.ck-content h3::after,
.cms-content h3::after,
.rich-content h3::after,
.prose h3::after,
.article-content h3::after,
.page-content h3::after,
.service-content h3::after,
.lesson-content h3::after,
.blog-content h3::after,
.content-body h3::after,
.post-content h3::after,
.editor-content h3::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-top: 0.45em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rte-primary) 70%, transparent);
}

.ck-content h4,
.cms-content h4,
.rich-content h4,
.prose h4,
.article-content h4,
.page-content h4,
.service-content h4,
.lesson-content h4,
.blog-content h4,
.content-body h4,
.post-content h4,
.editor-content h4 {
  margin: 1.35em 0 0.55em;
  font-size: clamp(1.22rem, 2vw, 1.55rem);
  line-height: 1.55;
  font-weight: 900;
  color: var(--rte-heading);
}

.ck-content h4::before,
.cms-content h4::before,
.rich-content h4::before,
.prose h4::before,
.article-content h4::before,
.page-content h4::before,
.service-content h4::before,
.lesson-content h4::before,
.blog-content h4::before,
.content-body h4::before,
.post-content h4::before,
.editor-content h4::before {
  content: "";
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  margin-left: 0.45em;
  border-radius: 999px;
  background: var(--rte-accent);
  vertical-align: middle;
}

.ck-content h5,
.cms-content h5,
.rich-content h5,
.prose h5,
.article-content h5,
.page-content h5,
.service-content h5,
.lesson-content h5,
.blog-content h5,
.content-body h5,
.post-content h5,
.editor-content h5 {
  margin: 1.25em 0 0.5em;
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.7;
  font-weight: 850;
  color: var(--rte-primary);
}

.ck-content h6,
.cms-content h6,
.rich-content h6,
.prose h6,
.article-content h6,
.page-content h6,
.service-content h6,
.lesson-content h6,
.blog-content h6,
.content-body h6,
.post-content h6,
.editor-content h6 {
  margin: 1.15em 0 0.45em;
  font-size: 0.92rem;
  line-height: 1.75;
  font-weight: 850;
  letter-spacing: 0.02em;
  color: var(--rte-muted);
  text-transform: none;
}

/* No huge margin if heading is first child */
.ck-content > h1:first-child,
.ck-content > h2:first-child,
.ck-content > h3:first-child,
.cms-content > h1:first-child,
.cms-content > h2:first-child,
.cms-content > h3:first-child,
.rich-content > h1:first-child,
.rich-content > h2:first-child,
.rich-content > h3:first-child,
.prose > h1:first-child,
.prose > h2:first-child,
.prose > h3:first-child,
.article-content > h1:first-child,
.article-content > h2:first-child,
.article-content > h3:first-child,
.page-content > h1:first-child,
.page-content > h2:first-child,
.page-content > h3:first-child,
.service-content > h1:first-child,
.service-content > h2:first-child,
.service-content > h3:first-child,
.lesson-content > h1:first-child,
.lesson-content > h2:first-child,
.lesson-content > h3:first-child,
.blog-content > h1:first-child,
.blog-content > h2:first-child,
.blog-content > h3:first-child,
.content-body > h1:first-child,
.content-body > h2:first-child,
.content-body > h3:first-child,
.post-content > h1:first-child,
.post-content > h2:first-child,
.post-content > h3:first-child,
.editor-content > h1:first-child,
.editor-content > h2:first-child,
.editor-content > h3:first-child {
  margin-top: 0;
}

/* =========================================================
   07) Lists / Numbering
   ========================================================= */

.ck-content ul,
.cms-content ul,
.rich-content ul,
.prose ul,
.article-content ul,
.page-content ul,
.service-content ul,
.lesson-content ul,
.blog-content ul,
.content-body ul,
.post-content ul,
.editor-content ul,
.ck-content ol,
.cms-content ol,
.rich-content ol,
.prose ol,
.article-content ol,
.page-content ol,
.service-content ol,
.lesson-content ol,
.blog-content ol,
.content-body ol,
.post-content ol,
.editor-content ol {
  margin: 1.1em 0 1.45em;
  padding-right: 1.55rem;
  padding-left: 0;
  line-height: 2.05;
}

.ck-content ul,
.cms-content ul,
.rich-content ul,
.prose ul,
.article-content ul,
.page-content ul,
.service-content ul,
.lesson-content ul,
.blog-content ul,
.content-body ul,
.post-content ul,
.editor-content ul {
  list-style: disc;
}

.ck-content ol,
.cms-content ol,
.rich-content ol,
.prose ol,
.article-content ol,
.page-content ol,
.service-content ol,
.lesson-content ol,
.blog-content ol,
.content-body ol,
.post-content ol,
.editor-content ol {
  list-style: decimal;
}

.ck-content li,
.cms-content li,
.rich-content li,
.prose li,
.article-content li,
.page-content li,
.service-content li,
.lesson-content li,
.blog-content li,
.content-body li,
.post-content li,
.editor-content li {
  margin: 0.45em 0;
  padding-right: 0.25rem;
  color: var(--rte-text);
}

.ck-content li::marker,
.cms-content li::marker,
.rich-content li::marker,
.prose li::marker,
.article-content li::marker,
.page-content li::marker,
.service-content li::marker,
.lesson-content li::marker,
.blog-content li::marker,
.content-body li::marker,
.post-content li::marker,
.editor-content li::marker {
  color: var(--rte-primary);
  font-weight: 950;
}

.ck-content ul ul,
.cms-content ul ul,
.rich-content ul ul,
.prose ul ul,
.article-content ul ul,
.page-content ul ul,
.service-content ul ul,
.lesson-content ul ul,
.blog-content ul ul,
.content-body ul ul,
.post-content ul ul,
.editor-content ul ul {
  list-style: circle;
  margin-top: 0.35em;
  margin-bottom: 0.35em;
}

.ck-content ol ol,
.cms-content ol ol,
.rich-content ol ol,
.prose ol ol,
.article-content ol ol,
.page-content ol ol,
.service-content ol ol,
.lesson-content ol ol,
.blog-content ol ol,
.content-body ol ol,
.post-content ol ol,
.editor-content ol ol {
  list-style: lower-alpha;
  margin-top: 0.35em;
  margin-bottom: 0.35em;
}

/* =========================================================
   08) Links / Quotes / Tables / Media / Code
   ========================================================= */

.ck-content a,
.cms-content a,
.rich-content a,
.prose a,
.article-content a,
.page-content a,
.service-content a,
.lesson-content a,
.blog-content a,
.content-body a,
.post-content a,
.editor-content a {
  color: var(--rte-primary);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--rte-primary) 38%, transparent);
}

.ck-content a:hover,
.cms-content a:hover,
.rich-content a:hover,
.prose a:hover,
.article-content a:hover,
.page-content a:hover,
.service-content a:hover,
.lesson-content a:hover,
.blog-content a:hover,
.content-body a:hover,
.post-content a:hover,
.editor-content a:hover {
  color: var(--rte-primary-dark);
  border-color: var(--rte-primary-dark);
}

.ck-content strong,
.cms-content strong,
.rich-content strong,
.prose strong,
.article-content strong,
.page-content strong,
.service-content strong,
.lesson-content strong,
.blog-content strong,
.content-body strong,
.post-content strong,
.editor-content strong {
  font-weight: 950;
  color: var(--rte-heading);
}

.ck-content blockquote,
.cms-content blockquote,
.rich-content blockquote,
.prose blockquote,
.article-content blockquote,
.page-content blockquote,
.service-content blockquote,
.lesson-content blockquote,
.blog-content blockquote,
.content-body blockquote,
.post-content blockquote,
.editor-content blockquote {
  margin: 1.6em 0;
  padding: 1.25rem 1.35rem;
  border-right: 5px solid var(--rte-primary);
  border-left: 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--rte-primary) 10%, transparent);
  color: var(--rte-text);
  font-weight: 700;
  line-height: 2;
}

.ck-content table,
.cms-content table,
.rich-content table,
.prose table,
.article-content table,
.page-content table,
.service-content table,
.lesson-content table,
.blog-content table,
.content-body table,
.post-content table,
.editor-content table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  margin: 1.5em 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--rte-bg);
  color: var(--rte-text);
}

.ck-content figure.table,
.cms-content figure.table,
.rich-content figure.table,
.prose figure.table,
.article-content figure.table,
.page-content figure.table,
.service-content figure.table,
.lesson-content figure.table,
.blog-content figure.table,
.content-body figure.table,
.post-content figure.table,
.editor-content figure.table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 1.5em 0;
}

.ck-content th,
.cms-content th,
.rich-content th,
.prose th,
.article-content th,
.page-content th,
.service-content th,
.lesson-content th,
.blog-content th,
.content-body th,
.post-content th,
.editor-content th {
  background: color-mix(in srgb, var(--rte-primary) 15%, var(--rte-bg));
  color: var(--rte-heading);
  font-weight: 950;
}

.ck-content td,
.cms-content td,
.rich-content td,
.prose td,
.article-content td,
.page-content td,
.service-content td,
.lesson-content td,
.blog-content td,
.content-body td,
.post-content td,
.editor-content td,
.ck-content th,
.cms-content th,
.rich-content th,
.prose th,
.article-content th,
.page-content th,
.service-content th,
.lesson-content th,
.blog-content th,
.content-body th,
.post-content th,
.editor-content th {
  border: 1px solid var(--rte-border);
  padding: 0.9rem 1rem;
  text-align: right;
  vertical-align: top;
  line-height: 1.9;
}

.ck-content figure,
.cms-content figure,
.rich-content figure,
.prose figure,
.article-content figure,
.page-content figure,
.service-content figure,
.lesson-content figure,
.blog-content figure,
.content-body figure,
.post-content figure,
.editor-content figure {
  max-width: 100%;
  margin: 1.5em auto;
}

.ck-content img,
.cms-content img,
.rich-content img,
.prose img,
.article-content img,
.page-content img,
.service-content img,
.lesson-content img,
.blog-content img,
.content-body img,
.post-content img,
.editor-content img {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  display: block;
  margin: 1.2em auto;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.ck-content figcaption,
.cms-content figcaption,
.rich-content figcaption,
.prose figcaption,
.article-content figcaption,
.page-content figcaption,
.service-content figcaption,
.lesson-content figcaption,
.blog-content figcaption,
.content-body figcaption,
.post-content figcaption,
.editor-content figcaption {
  margin-top: 0.65rem;
  color: var(--rte-muted);
  font-size: 0.875rem;
  text-align: center;
}

.ck-content code,
.cms-content code,
.rich-content code,
.prose code,
.article-content code,
.page-content code,
.service-content code,
.lesson-content code,
.blog-content code,
.content-body code,
.post-content code,
.editor-content code {
  direction: ltr;
  unicode-bidi: plaintext;
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--rte-primary) 11%, transparent);
  color: var(--rte-primary-dark);
  font-family: var(--rte-code-font);
  font-size: 0.9em;
}

.ck-content pre,
.cms-content pre,
.rich-content pre,
.prose pre,
.article-content pre,
.page-content pre,
.service-content pre,
.lesson-content pre,
.blog-content pre,
.content-body pre,
.post-content pre,
.editor-content pre {
  direction: ltr;
  text-align: left;
  overflow-x: auto;
  margin: 1.5em 0;
  padding: 1.2rem;
  border-radius: 18px;
  background: #020617;
  color: #e2e8f0;
  font-family: var(--rte-code-font);
  line-height: 1.8;
}

.ck-content pre code,
.cms-content pre code,
.rich-content pre code,
.prose pre code,
.article-content pre code,
.page-content pre code,
.service-content pre code,
.lesson-content pre code,
.blog-content pre code,
.content-body pre code,
.post-content pre code,
.editor-content pre code {
  display: block;
  padding: 0;
  background: transparent;
  color: inherit;
  border-radius: 0;
}

.ck-content hr,
.cms-content hr,
.rich-content hr,
.prose hr,
.article-content hr,
.page-content hr,
.service-content hr,
.lesson-content hr,
.blog-content hr,
.content-body hr,
.post-content hr,
.editor-content hr {
  border: 0;
  height: 1px;
  margin: 2em 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--rte-primary) 48%, transparent),
    transparent
  );
}

.ck-content iframe,
.cms-content iframe,
.rich-content iframe,
.prose iframe,
.article-content iframe,
.page-content iframe,
.service-content iframe,
.lesson-content iframe,
.blog-content iframe,
.content-body iframe,
.post-content iframe,
.editor-content iframe,
.ck-content video,
.cms-content video,
.rich-content video,
.prose video,
.article-content video,
.page-content video,
.service-content video,
.lesson-content video,
.blog-content video,
.content-body video,
.post-content video,
.editor-content video {
  max-width: 100%;
  border-radius: 20px;
}

/* =========================================================
   09) Mobile Improvements
   ========================================================= */

@media (max-width: 1024px) {
  .ck.ck-toolbar {
    gap: 6px !important;
    padding: 9px !important;
  }

  .ck.ck-button,
  .ck.ck-dropdown__button {
    min-height: 32px !important;
    min-width: 32px !important;
  }
}

@media (max-width: 768px) {
  .rich-text-editor,
  .ck.ck-editor {
    border-radius: 18px !important;
  }

  .ck.ck-toolbar {
    padding: 8px !important;
    gap: 5px !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .ck.ck-editor__main > .ck-editor__editable {
    padding: 16px !important;
    font-size: 15px !important;
    line-height: 2 !important;
  }

  .ck.ck-dropdown__panel {
    min-width: 210px !important;
    max-width: calc(100vw - 32px) !important;
  }

  .ck-content h1,
  .cms-content h1,
  .rich-content h1,
  .prose h1,
  .article-content h1,
  .page-content h1,
  .service-content h1,
  .lesson-content h1,
  .blog-content h1,
  .content-body h1,
  .post-content h1,
  .editor-content h1 {
    font-size: 2rem;
    line-height: 1.35;
  }

  .ck-content h2,
  .cms-content h2,
  .rich-content h2,
  .prose h2,
  .article-content h2,
  .page-content h2,
  .service-content h2,
  .lesson-content h2,
  .blog-content h2,
  .content-body h2,
  .post-content h2,
  .editor-content h2 {
    font-size: 1.6rem;
    line-height: 1.45;
  }

  .ck-content h3,
  .cms-content h3,
  .rich-content h3,
  .prose h3,
  .article-content h3,
  .page-content h3,
  .service-content h3,
  .lesson-content h3,
  .blog-content h3,
  .content-body h3,
  .post-content h3,
  .editor-content h3 {
    font-size: 1.32rem;
  }

  .ck-content h4,
  .cms-content h4,
  .rich-content h4,
  .prose h4,
  .article-content h4,
  .page-content h4,
  .service-content h4,
  .lesson-content h4,
  .blog-content h4,
  .content-body h4,
  .post-content h4,
  .editor-content h4 {
    font-size: 1.12rem;
  }

  .ck-content table,
  .cms-content table,
  .rich-content table,
  .prose table,
  .article-content table,
  .page-content table,
  .service-content table,
  .lesson-content table,
  .blog-content table,
  .content-body table,
  .post-content table,
  .editor-content table {
    min-width: 520px;
  }
}

/* my css */ 

.mx-title {
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
}

.favorite-button svg {
  stroke-width: 2.4;
}

.favorite-button.is-favorite svg {
  fill: currentColor;
}

.favorite-button:disabled {
  cursor: not-allowed;
}