/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT RENDER — Beautiful rich-text styles for public pages & admin preview
   Used by: .content-render wrapper on any WYSIWYG output
   ═══════════════════════════════════════════════════════════════════════════ */

.content-render {
  font-size: 1.05rem;
  line-height: 1.9;
  color: #475569;
  word-break: break-word;
}

/* ── Headings ──────────────────────────────────────────────────────────────── */
.content-render h1,
.content-render h2 {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 800;
  color: #1B3A8C;
  margin: 2.75rem 0 1.25rem;
  padding: 0 0 18px 22px;
  position: relative;
  border-bottom: 1.5px solid rgba(37, 99, 235, .08);
  line-height: 1.3;
}
.content-render h1::before,
.content-render h2::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 5px;
  border-radius: 10px;
  background: linear-gradient(180deg, #2563EB 0%, #7C3AED 100%);
}

.content-render h3 {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 700;
  color: #1B3A8C;
  margin: 2.25rem 0 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
}
.content-render h3::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563EB 0%, #F97316 100%);
  box-shadow: 0 2px 8px rgba(37, 99, 235, .3);
}

.content-render h4 {
  font-size: .8rem;
  font-weight: 800;
  color: #2563EB;
  margin: 2rem 0 .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.content-render h4::after {
  content: '';
  display: block;
  width: 32px; height: 2px;
  background: linear-gradient(90deg, #2563EB, transparent);
  margin-top: 6px;
  border-radius: 2px;
}

.content-render h5 {
  font-size: 1rem;
  font-weight: 700;
  color: #334155;
  margin: 1.5rem 0 .6rem;
}
.content-render h6 {
  font-size: .9rem;
  font-weight: 700;
  color: #64748b;
  margin: 1.25rem 0 .5rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* First heading needs less top margin */
.content-render > *:first-child { margin-top: 0 !important; }
.content-render > *:last-child  { margin-bottom: 0 !important; }

/* ── Paragraphs ──────────────────────────────────────────────────────────── */
.content-render p {
  margin: 0 0 1.35rem;
  color: #475569;
}

/* ── Lists ───────────────────────────────────────────────────────────────── */
.content-render ul,
.content-render ol {
  padding-left: 0;
  margin: 0 0 1.75rem;
  list-style: none;
}

/* Unordered — gradient bullet */
.content-render ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: #475569;
  line-height: 1.75;
}
.content-render ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  box-shadow: 0 2px 6px rgba(37, 99, 235, .25);
}

/* Second-level ul */
.content-render ul ul { margin: 8px 0 8px 4px; }
.content-render ul ul li::before {
  width: 6px; height: 6px;
  top: 13px;
  background: #F97316;
  box-shadow: 0 2px 6px rgba(249,115,22,.3);
}

/* Third-level ul */
.content-render ul ul ul li::before {
  width: 5px; height: 5px;
  border-radius: 2px;
  background: #10B981;
}

/* Ordered — gradient numbered circle */
.content-render ol {
  counter-reset: cr-ol;
}
.content-render ol li {
  position: relative;
  padding-left: 44px;
  margin-bottom: 12px;
  color: #475569;
  line-height: 1.75;
  counter-increment: cr-ol;
}
.content-render ol li::before {
  content: counter(cr-ol);
  position: absolute;
  left: 0; top: 2px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .25);
  line-height: 1;
}

/* List inside list — no double counter for ol in ul */
.content-render ul ol li { padding-left: 44px; }
.content-render ul ol { counter-reset: cr-ol; }

/* ── Blockquote ──────────────────────────────────────────────────────────── */
.content-render blockquote {
  position: relative;
  margin: 2.25rem 0;
  padding: 28px 32px 28px 36px;
  background: linear-gradient(135deg, rgba(37,99,235,.04) 0%, rgba(124,58,237,.04) 100%);
  border: 1px solid rgba(37,99,235,.1);
  border-left: 5px solid #2563EB;
  border-radius: 0 16px 16px 0;
  font-style: italic;
  color: #334155;
  font-size: 1.05rem;
  line-height: 1.85;
  overflow: hidden;
}
.content-render blockquote::before {
  content: '\201C';
  position: absolute;
  top: -20px; left: 16px;
  font-size: 7rem;
  font-style: normal;
  color: rgba(37,99,235,.1);
  line-height: 1;
  pointer-events: none;
}
.content-render blockquote p { color: inherit; margin-bottom: 0; }

/* ── Code ────────────────────────────────────────────────────────────────── */
.content-render code {
  background: rgba(37,99,235,.07);
  color: #2563EB;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: .87em;
  font-family: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 500;
  border: 1px solid rgba(37,99,235,.12);
  word-break: break-all;
}

.content-render pre {
  background: #0f172a;
  padding: 24px 28px;
  border-radius: 14px;
  overflow-x: auto;
  margin: 1.75rem 0;
  border-left: 4px solid #2563EB;
  position: relative;
  box-shadow: 0 8px 32px rgba(15,23,42,.2);
}
.content-render pre::before {
  content: 'CODE';
  position: absolute;
  top: 12px; right: 16px;
  font-size: .65rem;
  font-weight: 800;
  color: rgba(37,99,235,.5);
  letter-spacing: .12em;
}
.content-render pre code {
  background: none; border: none;
  color: #cbd5e1;
  padding: 0;
  font-size: .88rem;
  line-height: 1.75;
  word-break: normal;
}

/* ── Images ──────────────────────────────────────────────────────────────── */
.content-render img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(27,58,140,.1);
  margin: 1.5rem 0;
  display: block;
}

/* ── Links ───────────────────────────────────────────────────────────────── */
.content-render a {
  color: #2563EB;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(37,99,235,.3);
  transition: color .2s, border-color .2s;
  font-weight: 500;
}
.content-render a:hover {
  color: #1B3A8C;
  border-bottom-color: #1B3A8C;
}

/* ── Strong / Em ─────────────────────────────────────────────────────────── */
.content-render strong,
.content-render b {
  font-weight: 700;
  color: #1B3A8C;
}
.content-render em,
.content-render i {
  font-style: italic;
  color: #334155;
}

/* ── Horizontal Rule ─────────────────────────────────────────────────────── */
.content-render hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, #2563EB 30%, #7C3AED 70%, transparent);
  margin: 3rem 0;
  border-radius: 2px;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.content-render table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: .95rem;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(27,58,140,.08);
}
.content-render thead th {
  background: linear-gradient(135deg, #1B3A8C 0%, #2563EB 100%);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 14px 18px;
  text-align: left;
}
.content-render tbody td {
  padding: 13px 18px;
  border-bottom: 1px solid rgba(27,58,140,.06);
  color: #475569;
  transition: background .15s;
}
.content-render tbody tr:last-child td { border-bottom: none; }
.content-render tbody tr:nth-child(even) td { background: rgba(37,99,235,.03); }
.content-render tbody tr:hover td { background: rgba(37,99,235,.06); }

/* ── Intro paragraph (first p after h2) ──────────────────────────────────── */
.content-render h2 + p,
.content-render h3 + p {
  color: #334155;
  font-size: 1.05rem;
}

/* ── RTL overrides ───────────────────────────────────────────────────────── */
[dir="rtl"] .content-render h1,
[dir="rtl"] .content-render h2 {
  padding-left: 0;
  padding-right: 22px;
}
[dir="rtl"] .content-render h1::before,
[dir="rtl"] .content-render h2::before {
  left: auto; right: 0;
}
[dir="rtl"] .content-render h4::after {
  background: linear-gradient(270deg, #2563EB, transparent);
}
[dir="rtl"] .content-render ul li {
  padding-left: 0; padding-right: 26px;
}
[dir="rtl"] .content-render ul li::before {
  left: auto; right: 0;
}
[dir="rtl"] .content-render ul ul { margin: 8px 4px 8px 0; }
[dir="rtl"] .content-render ol li {
  padding-left: 0; padding-right: 44px;
}
[dir="rtl"] .content-render ol li::before {
  left: auto; right: 0;
}
[dir="rtl"] .content-render blockquote {
  border-left: 1px solid rgba(37,99,235,.1);
  border-right: 5px solid #2563EB;
  border-radius: 16px 0 0 16px;
}
[dir="rtl"] .content-render blockquote::before {
  left: auto; right: 16px;
  content: '\201D';
}
[dir="rtl"] .content-render pre {
  border-left: none; border-right: 4px solid #2563EB;
}
[dir="rtl"] .content-render pre::before {
  right: auto; left: 16px;
}
[dir="rtl"] .content-render thead th { text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN PREVIEW MODAL SPECIFIC
   ═══════════════════════════════════════════════════════════════════════════ */
.preview-modal-body {
  padding: 32px;
  background: #fafbff;
}
.preview-lang-switch {
  display: flex; gap: 6px; margin-bottom: 24px;
}
.preview-lang-btn {
  padding: 6px 18px;
  border-radius: 20px;
  border: 1.5px solid rgba(37,99,235,.2);
  background: transparent;
  color: #64748b;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.preview-lang-btn.active {
  background: #2563EB;
  border-color: #2563EB;
  color: #fff;
}
.preview-content-box {
  background: #fff;
  border-radius: 16px;
  padding: 40px 48px;
  box-shadow: 0 4px 32px rgba(27,58,140,.07);
  border: 1px solid rgba(27,58,140,.06);
  min-height: 200px;
}
@media (max-width: 640px) {
  .preview-content-box { padding: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WYSIWYG HTML SOURCE TOGGLE
   ═══════════════════════════════════════════════════════════════════════════ */
.ql-source-btn {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 0 8px !important;
  color: #64748b !important;
  letter-spacing: .04em;
  font-family: monospace !important;
}
.ql-source-btn:hover,
.ql-source-btn.active {
  color: #2563EB !important;
  background: rgba(37,99,235,.07) !important;
  border-radius: 4px;
}
.source-textarea {
  width: 100%;
  min-height: 250px;
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: .82rem;
  line-height: 1.6;
  padding: 16px;
  border: none;
  border-top: 1px solid #e2e8f0;
  background: #0f172a;
  color: #94a3b8;
  resize: vertical;
  outline: none;
}
.source-textarea:focus { color: #e2e8f0; }