/* ═══════════════════════════════════════════════════════════════
   Editor Paste & Rendering v1.0
   ───────────────────────────────────────────────────────────────
   CSS موحّد للمحتوى من Jodit في كل الصفحات.
   Defensive — يـ override أي remnant inline styles.
   Responsive — يعمل من 320px لـ 4K.
   ═══════════════════════════════════════════════════════════════ */

.editor-content,
.editor-content * {
    /* إجبار الـ font على فونت الموقع (يمنع Calibri/Arial من Word) */
    font-family: var(--ds-font-primary, 'NumericCairo', 'Tajawal', 'Cairo', sans-serif) !important;
    /* أزل أي color من Word (نخلي CSS يحدّد الـ color حسب الـ theme) */
    color: inherit;
}

.editor-content {
    color: var(--ds-text-primary, #ffffff);
    font-size: 1rem;
    line-height: 1.85;
    direction: rtl;
    text-align: right;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

/* Override أي remnant inline color (defensive ضد Word) */
.editor-content [style*="color"] { color: inherit !important; }
.editor-content [style*="background-color"]:not(td):not(th):not(.editor-content blockquote) {
    background-color: transparent !important;
}
.editor-content [style*="font-family"] {
    font-family: var(--ds-font-primary, sans-serif) !important;
}
.editor-content [style*="font-size"] {
    font-size: inherit !important;
}

/* احترام text-align فقط من المحرر */
.editor-content [style*="text-align: center"],
.editor-content [style*="text-align:center"] { text-align: center !important; }
.editor-content [style*="text-align: left"],
.editor-content [style*="text-align:left"]   { text-align: left !important; }
.editor-content [style*="text-align: right"],
.editor-content [style*="text-align:right"]  { text-align: right !important; }
.editor-content [style*="text-align: justify"],
.editor-content [style*="text-align:justify"]{ text-align: justify !important; }

/* ───────────────────────────────────────────────────────────────
   Paragraphs
   ─────────────────────────────────────────────────────────────── */
.editor-content p {
    margin: 0 0 1.1rem 0;
    line-height: 1.85;
}
.editor-content p:last-child { margin-bottom: 0; }
.editor-content p:empty { display: none; }

/* ───────────────────────────────────────────────────────────────
   Headings — responsive sizes
   ─────────────────────────────────────────────────────────────── */
.editor-content h1,
.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5,
.editor-content h6 {
    color: var(--ds-text-primary, #ffffff) !important;
    font-weight: 700;
    line-height: 1.35;
    margin: 1.5em 0 0.65em 0;
    letter-spacing: -0.01em;
}
.editor-content h1:first-child,
.editor-content h2:first-child,
.editor-content h3:first-child,
.editor-content h4:first-child,
.editor-content h5:first-child,
.editor-content h6:first-child { margin-top: 0; }

.editor-content h1 { font-size: clamp(1.5rem, 3.5vw, 1.875rem); }
.editor-content h2 { font-size: clamp(1.35rem, 3vw, 1.625rem); }
.editor-content h3 { font-size: clamp(1.2rem, 2.5vw, 1.375rem); }
.editor-content h4 { font-size: clamp(1.1rem, 2.2vw, 1.2rem); }
.editor-content h5 { font-size: 1.05rem; font-weight: 600; }
.editor-content h6 {
    font-size: 0.95rem; font-weight: 600;
    color: var(--ds-text-secondary, #cbd5e1) !important;
}

/* ───────────────────────────────────────────────────────────────
   Lists — RTL indent
   ─────────────────────────────────────────────────────────────── */
.editor-content ul,
.editor-content ol {
    margin: 0 0 1.1rem 0;
    /* MED-A5-22: logical properties بدلاً من padding-right/left (RTL/LTR safe). */
    padding-inline-start: 1.5rem;
    padding-inline-end: 0;
    line-height: 1.85;
}
.editor-content ul { list-style-type: disc; }
.editor-content ol { list-style-type: decimal; }
.editor-content ul ul, .editor-content ol ul { list-style-type: circle; }
.editor-content ul ul ul { list-style-type: square; }

.editor-content li {
    margin-bottom: 0.4rem;
    padding-right: 0.25rem;
}
.editor-content li::marker {
    color: var(--ds-primary, #6366f1);
    font-weight: 600;
}
.editor-content li > ul,
.editor-content li > ol {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

/* ───────────────────────────────────────────────────────────────
   Links
   ─────────────────────────────────────────────────────────────── */
.editor-content a {
    color: var(--ds-accent, #38bdf8) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
    word-break: break-word;
}
.editor-content a:hover,
.editor-content a:focus {
    color: var(--ds-primary, #6366f1) !important;
    text-decoration-thickness: 2px;
}

/* ───────────────────────────────────────────────────────────────
   Emphasis
   ─────────────────────────────────────────────────────────────── */
.editor-content strong, .editor-content b {
    font-weight: 700;
    color: var(--ds-text-primary, #ffffff) !important;
}
.editor-content em, .editor-content i { font-style: italic; }
.editor-content u { text-decoration: underline; text-underline-offset: 2px; }
.editor-content s, .editor-content del { text-decoration: line-through; opacity: 0.75; }
.editor-content sub { vertical-align: sub; font-size: 0.75em; }
.editor-content sup { vertical-align: super; font-size: 0.75em; }
.editor-content small {
    font-size: 0.875em;
    color: var(--ds-text-secondary, #cbd5e1) !important;
}

/* ───────────────────────────────────────────────────────────────
   Blockquote
   ─────────────────────────────────────────────────────────────── */
.editor-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    /* MED-A5-21: border-inline-start (RTL يعطي border-right، LTR border-left). */
    border-inline-start: 4px solid var(--ds-primary, #6366f1);
    background: var(--ds-surface, rgba(30, 41, 59, 0.5)) !important;
    border-radius: var(--ds-radius-md, 12px);
    color: var(--ds-text-secondary, #cbd5e1) !important;
    font-style: italic;
}
.editor-content blockquote p:last-child { margin-bottom: 0; }

/* ───────────────────────────────────────────────────────────────
   Code / Pre
   ─────────────────────────────────────────────────────────────── */
.editor-content code {
    background: rgba(99, 102, 241, 0.12) !important;
    color: var(--ds-accent, #38bdf8) !important;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-family: var(--ds-font-mono, 'Fira Code', 'Courier New', monospace) !important;
    font-size: 0.9em;
    direction: ltr;
    display: inline-block;
    word-break: break-all;
}
.editor-content pre {
    background: rgba(2, 6, 23, 0.6) !important;
    border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--ds-radius-md, 12px);
    padding: 1rem;
    margin: 1.25rem 0;
    overflow-x: auto;
    direction: ltr;
    text-align: left;
}
.editor-content pre code {
    background: transparent !important;
    padding: 0;
    color: var(--ds-text-primary, #ffffff) !important;
    display: block;
    border-radius: 0;
    white-space: pre;
}

/* ───────────────────────────────────────────────────────────────
   HR
   ─────────────────────────────────────────────────────────────── */
.editor-content hr {
    border: 0;
    height: 1px;
    background: var(--ds-border, rgba(255, 255, 255, 0.1));
    margin: 2rem 0;
}

/* ───────────────────────────────────────────────────────────────
   Images — fully responsive
   ─────────────────────────────────────────────────────────────── */
.editor-content img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    border-radius: var(--ds-radius-md, 12px);
    margin: 1rem auto;
    display: block;
}
.editor-content figure {
    margin: 1.25rem 0;
    text-align: center;
    max-width: 100%;
}
.editor-content figure img { margin: 0 auto; }
.editor-content figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--ds-text-secondary, #cbd5e1) !important;
    text-align: center;
}

/* ───────────────────────────────────────────────────────────────
   Tables — responsive scroll wrapper
   ─────────────────────────────────────────────────────────────── */
.editor-content table {
    width: 100%;
    max-width: 100%;
    margin: 1.25rem 0;
    border-collapse: collapse;
    background: var(--ds-surface, rgba(30, 41, 59, 0.5)) !important;
    border-radius: var(--ds-radius-md, 12px);
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.editor-content table thead {
    background: rgba(99, 102, 241, 0.15);
}
.editor-content table th,
.editor-content table td {
    padding: 0.75rem 1rem;
    text-align: right;
    border-bottom: 1px solid var(--ds-border, rgba(255, 255, 255, 0.1));
    vertical-align: top;
    min-width: 100px;
    color: var(--ds-text-primary, #ffffff) !important;
}
.editor-content table th {
    font-weight: 700;
    background: rgba(99, 102, 241, 0.18);
}
.editor-content table tr:last-child td { border-bottom: none; }
.editor-content table tr:hover td {
    background: var(--ds-surface-hover, rgba(51, 65, 85, 0.4));
}

/* ───────────────────────────────────────────────────────────────
   Iframes — YouTube/Vimeo/Maps responsive
   ─────────────────────────────────────────────────────────────── */
.editor-content iframe {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: var(--ds-radius-md, 12px);
    margin: 1.25rem 0;
    display: block;
}

/* ───────────────────────────────────────────────────────────────
   Responsive — كل أحجام الشاشات
   ─────────────────────────────────────────────────────────────── */

/* Mobile small (320px - 480px) */
@media (max-width: 480px) {
    .editor-content {
        font-size: 0.9375rem;
        line-height: 1.7;
    }
    .editor-content h1 { font-size: 1.25rem; }
    .editor-content h2 { font-size: 1.15rem; }
    .editor-content h3 { font-size: 1.05rem; }
    .editor-content h4 { font-size: 1rem; }
    .editor-content h5,
    .editor-content h6 { font-size: 0.95rem; }
    .editor-content ul,
    .editor-content ol { padding-right: 1.15rem; }
    .editor-content blockquote {
        padding: 0.75rem 1rem;
        margin: 1rem 0;
    }
    .editor-content table th,
    .editor-content table td {
        padding: 0.5rem 0.65rem;
        font-size: 0.85rem;
        min-width: 80px;
    }
    .editor-content pre {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
}

/* Mobile (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .editor-content {
        font-size: 0.95rem;
        line-height: 1.75;
    }
    .editor-content h1 { font-size: 1.4rem; }
    .editor-content h2 { font-size: 1.25rem; }
    .editor-content h3 { font-size: 1.15rem; }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .editor-content { font-size: 1rem; }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    .editor-content { font-size: 1.0625rem; }
}

/* Large desktop (1920px+) */
@media (min-width: 1920px) {
    .editor-content { font-size: 1.125rem; }
}

/* ───────────────────────────────────────────────────────────────
   Special cases per page
   ─────────────────────────────────────────────────────────────── */
.faq-answer.editor-content { font-size: 0.975rem; }
.faq-answer.editor-content > *:first-child { margin-top: 0; }
.faq-answer.editor-content > *:last-child { margin-bottom: 0; }

.pd-description.editor-content { padding: 0.5rem 0; }

/* Light-theme variant (لو احتاج لاحقاً) */
.editor-content--on-light {
    color: #1f2937 !important;
}
.editor-content--on-light h1,
.editor-content--on-light h2,
.editor-content--on-light h3,
.editor-content--on-light h4,
.editor-content--on-light h5,
.editor-content--on-light h6,
.editor-content--on-light strong,
.editor-content--on-light b { color: #111827 !important; }
.editor-content--on-light blockquote {
    background: #f9fafb !important;
    color: #4b5563 !important;
}
.editor-content--on-light table { background: #ffffff !important; }
.editor-content--on-light table th,
.editor-content--on-light table td { color: #111827 !important; }

/* L-01: padding mobile لـ Terms section (كان padding-t-120 = 25% من viewport على mobile). */
@media (max-width: 575.98px) {
    .contact.padding-t-120 { padding-top: 60px !important; }
    .contact.padding-b-60 { padding-bottom: 30px !important; }
}

/* ───────────────────────────────────────────────────────────────
   H-A4-03: Print styles لـ terms/privacy/return + أي صفحة editor-content.
   يحوّل النص لـ أسود على أبيض + يخفي gradients/backgrounds مرئية فقط للشاشة.
   ─────────────────────────────────────────────────────────────── */
@media print {
    body, .editor-content, .editor-content * {
        background: #fff !important;
        color: #000 !important;
        text-shadow: none !important;
        box-shadow: none !important;
    }
    .editor-content a { color: #0000ee !important; text-decoration: underline; }
    .editor-content blockquote {
        background: transparent !important;
        border-inline-start: 4px solid #666 !important;
        color: #000 !important;
    }
    /* أخفِ gradients + decorative imagery + breadcrumb backgrounds. */
    .bg--gradient, .breadcrumb-two img, [class*="pattern-"], .breadcrumb-two::before, .breadcrumb-two::after {
        display: none !important;
    }
    .breadcrumb-two, .breadcrumb {
        padding: 0 !important;
        background: #fff !important;
    }
}

/* ───────────────────────────────────────────────────────────────
   Editor Paste & Rendering v1.0 END
   ─────────────────────────────────────────────────────────────── */