/* ═══════════════════════════════════════════════════════════
   SINGLE NEWS — single.php  |  هوية موقع الخبير التقني
   ═══════════════════════════════════════════════════════════ */
:root {
    --n-primary: #c62828;
    --n-primary-dark: #a61f1f;
    --n-text: #1f1f1f;
    --n-muted: #6b7280;
    --n-border: #e5e7eb;
}

/* ── Layout grid (محتوى + شريط جانبي) — نفس بنية صفحة الموبيل ── */
.n-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
    direction: rtl;
}
.n-page .n-main {
    background: #fff;
    padding: 15px 0;
    min-width: 0;
}
.n-page .n-sidebar {
    min-width: 0;
}
/* ترتيب أقسام الشريط الجانبي على الديسكتوب/Smart TV:
   أحدث الأخبار ← الماركات ← أحدث الهواتف */
@media (min-width: 993px) {
    .n-page .n-sidebar {
        display: flex;
        flex-direction: column;
    }
    .n-page .n-sidebar .n-sb-news    { order: 1; }
    .n-page .n-sidebar .m-brands-box { order: 2; }
    .n-page .n-sidebar .n-sb-mobiles { order: 3; }
}
@media (max-width: 992px) {
    .n-page {
        grid-template-columns: 1fr;
    }
}

/* ── Top align (عنوان + ميتا + breadcrumb) ── */
.n-top-align {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 16px 0;
    box-sizing: border-box;
    direction: rtl;
}
/* محاذاة علوية موحّدة مع صفحة الموبيل (نفس الـ datum) */
.m-top-align {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}
.m-top-align .m-meta-bar,
.m-top-align .n-meta-bar {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.m-top-align .post-meta,
.m-top-align .single-post-meta {
    margin: 0 0 14px !important;
    padding: 0 !important;
}
.m-top-align .post-meta::before,
.m-top-align .post-meta::after,
.m-top-align .single-post-meta::before,
.m-top-align .single-post-meta::after {
    display: none !important;
    content: none !important;
}
/* البريدكرامب داخل .m-top-align */
.m-top-align nav.ek-breadcrumb {
    margin: 4px 0 0px !important;
    direction: rtl;
}
.n-cat-badge { margin-bottom: 10px; }
.n-cat-badge a {
    display: inline-block;
    background: var(--n-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 4px;
    text-decoration: none;
}
.n-cat-badge a:hover { background: var(--n-primary-dark); }
.n-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--n-text);
    margin: 0 0 12px;
}
.n-top-align .n-meta-bar {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.n-top-align .n-meta-bar .post-meta,
.n-top-align .n-meta-bar .single-post-meta {
    margin: 0 0 12px !important;
    padding: 0 !important;
}
.n-top-align .n-meta-bar .post-meta::before,
.n-top-align .n-meta-bar .post-meta::after {
    display: none !important;
    content: none !important;
}

/* ── الصورة البارزة ── */
.n-featured {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    background: #f5f5f5;
}
.n-featured img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* ✨ تأثير اللمعة العابرة (Shine) على الصورة البارزة */
.n-featured::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 3;
    width: 50%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.55) 50%,
        rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    opacity: 0;
}
.n-featured:hover::after {
    animation: n-shine .85s ease;
}
@keyframes n-shine {
    0%   { left: -75%; opacity: 0; }
    20%  { opacity: 1; }
    100% { left: 125%; opacity: 0; }
}

/* ── حجز مساحة إعلانات Advanced Ads داخل المقال (بند Layout shift culprits) ──
   كل إعلانات Advanced Ads جوه محتوى المقال (قبل المحتوى، بعد الفقرة التالتة،
   بعد الفقرة الخامسة، قبل نهاية المحتوى) بتتحط جوه غلاف بنفس الكلاس ده.
   أعلى إعلان منهم قسناه فعليًا كان 280px، فبنحجز نفس المساحة تقريبًا مقدمًا
   قبل ما سكريبت أدسنس يوصل ويحسب حجمه الفعلي — عشان لما يوصل ياخد المساحة
   المحجوزة له من غير ما يزحزح الفقرات اللي تحته. لو المستخدم عنده أدبلوكر
   أو الإعلان ملوش مخزون، هيفضل فراغ ثابت بدل قفزة في المحتوى — تريد أوف
   موصى بيه رسميًا من جوجل لمشكلة الـ CLS دي بالظبط. */
.elkha-entity-placement {
    min-height: 280px;
    transition: min-height 0.3s ease;
}

/* لو أدسنس نفسه علّم الإعلان إنه "مالوش محتوى يعرضه" (unfilled/unfill-optimized —
   قيم رسمية بيحطها أدسنس نفسه على وسم <ins>، موثّقة في صفحة الدعم الرسمية:
   support.google.com/adsense/answer/10762946)، بنلغي المساحة المحجوزة فورًا
   بدل ما تفضل فراغ أبيض دائم. التقنية دي موصى بيها رسميًا من جوجل نفسها
   للتعامل مع المساحات الفاضية — مش بتخفي أي إعلان عنده محتوى فعلي. */
.elkha-entity-placement:has(ins.adsbygoogle[data-ad-status="unfilled"]),
.elkha-entity-placement:has(ins.adsbygoogle[data-ad-status="unfill-optimized"]) {
    min-height: 0;
}

/* ── محتوى المقال ── */
.n-content {
    direction: rtl;
    text-align: right;
    font-size: 18px;
    line-height: 1.9;
    color: #2a2a2a;
}
.n-content p { margin: 0 0 18px; }
.n-content h2 {
    font-size: 23px;
    font-weight: 800;
    color: var(--n-text);
    margin: 32px 0 14px;
    padding-right: 14px;
    border-right: 4px solid var(--n-primary);
    line-height: 1.5;
}
.n-content h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--n-text);
    margin: 26px 0 12px;
}
.n-content h4 {
    font-size: 17px;
    font-weight: 700;
    color: #333;
    margin: 20px 0 10px;
}
.n-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 16px 0;
}
.n-content a { color: var(--n-primary); text-decoration: underline; }
.n-content a:hover { color: var(--n-primary-dark); }
.n-content ul, .n-content ol { margin: 0 16px 18px 0; padding-right: 20px; }
.n-content li { margin-bottom: 8px; }
/* ─── إصلاح 2026-07-16: النقاط والترقيم كانوا مختفيين تمامًا (نفس مشكلة
   صفحة الموبايل بالظبط) — القالب الأب بيصفّر list-style عالميًا، وده
   بيرجّعه بس جوه محتوى الخبر. inherit في الـ ol بيخلي كل قائمة تحترم
   نوع الترقيم اللي اخترته من المحرر (أرقام أو حروف)، مش أرقام مفروضة. ─── */
.n-content ul { list-style: disc; }
.n-content ol { list-style: decimal; }
.n-content ul li { list-style-type: disc; }
.n-content ol li { list-style-type: inherit; }
/* الخط الفاصل — كان مختفي تمامًا لنفس سبب صفحة الموبايل */
.n-content hr {
    background-color: rgba(0, 0, 0, 0.1);
    border: 0;
    height: 1px;
    margin: 1.65em 0;
}
.n-content blockquote {
    border-right: 4px solid var(--n-primary);
    background: #fafafa;
    margin: 18px 0;
    padding: 14px 18px;
    color: #444;
    font-style: italic;
}
.n-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    direction: rtl;
}
.n-content table th,
.n-content table td {
    border: 1px solid var(--n-border);
    padding: 10px 12px;
    text-align: right;
    font-size: 14px;
}
.n-content table th { background: var(--n-primary); color: #fff; font-weight: 700; }
.n-content table tr:nth-child(even) td { background: #fafafa; }

/* ── الوسوم ── */
.n-tags {
    margin: 24px 0 8px;
    direction: rtl;
    font-size: 13px;
}
.n-tags-label { font-weight: 700; color: var(--n-text); margin-left: 6px; }
.n-tags a {
    display: inline-block;
    background: #f0f0f0;
    color: #555;
    padding: 4px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 12px;
    margin: 0 4px 6px 0;
    transition: background .15s, color .15s;
}
.n-tags a:hover { background: var(--n-primary); color: #fff; }

/* ── التعليقات ── */
.n-comments { margin-top: 32px; direction: rtl; }

/* ── مقالات ذات صلة ── */
.n-related { margin-top: 40px; clear: both; }
.n-related-header {
    border-bottom: 4px solid #333;
    padding-top: 10px;
    margin-bottom: 16px;
}
.n-related-header h3 {
    font-size: 18px;
    font-weight: 800;
    color: #333;
    padding: 10px;
    margin: 0;
    text-align: right;
    direction: rtl;
}
.n-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.n-related-card {
    display: block;
    border: 1px solid var(--n-border);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    background: #fff;
    transition: box-shadow .2s, transform .2s;
    direction: rtl;
}
.n-related-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.1);
    transform: translateY(-3px);
}
.n-related-thumb {
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #f0f0f0;
}
.n-related-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}
.n-related-card:hover .n-related-thumb img { transform: scale(1.05); }
.n-related-noimg {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.n-related-body { padding: 12px; }
.n-related-cat {
    display: inline-block;
    color: var(--n-primary);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
}
.n-related-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--n-text);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ═══ الشريط الجانبي ═══ */
.n-sb-box { margin-bottom: 28px; }
.n-sb-title {
    padding: 10px 0;
    font-weight: 800;
    font-size: 18px;
    color: #333;
    direction: rtl;
    border-bottom: 3px solid #333;
    text-align: center;
    margin-bottom: 15px;
}
.n-sb-body { direction: rtl; }

/* عنصر خبر في الشريط الجانبي */
.n-sb-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    direction: rtl;
}
.n-sb-item:last-child { border-bottom: none; }
.n-sb-thumb {
    width: 75px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f0f0;
}
.n-sb-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.n-sb-noimg {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.n-sb-item-title {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    color: #333;
    text-align: right;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.n-sb-item:hover .n-sb-item-title { color: var(--n-primary); }

/* شبكة الموبايلات في الشريط الجانبي — مطابقة لكروت صفحة الموبيل */
.n-sb-mobiles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
/* ─── تابلت (بند 2026-07-19) — نفس إصلاح صندوق "أحدث الموبايلات" في صفحة
   مقال الموبايل (mobile-single-extra.css) بالظبط، بنفس الأسباب: الصندوق
   بياخد عرض المحتوى الكامل بعد ما .n-page يتحول لعمود واحد (breakpoint
   992px فوق في نفس الملف)، فعمودين بس كانوا بيخلوا كل كارت ضخم. */
@media (max-width: 992px) and (min-width: 600px) {
    .n-sb-mobiles-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.n-sb-mobiles-grid .m-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 175px;
    transition: box-shadow .2s, transform .2s;
    min-width: 0;
}
.n-sb-mobiles-grid .m-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
    transform: translateY(-2px);
}
/* ✨ تأثير اللمعة العابرة (Shine) */
.n-sb-mobiles-grid .m-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 3;
    width: 50%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.55) 50%,
        rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    opacity: 0;
}
.n-sb-mobiles-grid .m-card:hover::after {
    animation: n-shine .85s ease;
}
.n-sb-mobiles-grid .m-card-link {
    text-decoration: none;
    color: inherit;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.n-sb-mobiles-grid .m-card-thumb-wrap {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 130px !important;
    overflow: hidden;
    background: #fff;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-bottom: 0 !important;
}
.n-sb-mobiles-grid .m-card-thumb-wrap img,
.n-sb-mobiles-grid .m-card-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block;
}
.n-sb-mobiles-grid .m-card-title {
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 1.5;
    color: #111 !important;
    direction: rtl;
    text-align: center;
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ═══ موبايل ═══ */
@media (max-width: 768px) {
    .n-title { font-size: 22px; }
    .n-content { font-size: 18px; }
    .n-content h2 { font-size: 20px; }
    .n-related-grid { grid-template-columns: 1fr; }
}

/* ═══ Smart TV ═══ */
@media (min-width: 1900px) {
    .n-title { font-size: 34px; }
    .n-content { font-size: 18px; }
    .n-content h2 { font-size: 26px; }
    .n-related-title { font-size: 16px; }
    .n-sb-item-title { font-size: 15px; }
}

/* ══ Dark Mode ══ */
html.dark-skin .n-main { background: #1e1e1e; }
html.dark-skin .n-title,
html.dark-skin .n-content h2,
html.dark-skin .n-content h3,
html.dark-skin .n-content h4 { color: #f3f4f6; }
html.dark-skin .n-content { color: #cbd5e1; }
html.dark-skin .n-content blockquote { background: #252525; color: #cbd5e1; }
html.dark-skin .n-sb-title { color: #f3f4f6; border-bottom-color: #444; }
html.dark-skin .n-sb-item { border-bottom-color: #2e2e2e; }
html.dark-skin .n-sb-item-title { color: #e5e7eb; }
html.dark-skin .n-related-card { background: #1e1e1e; border-color: #2e2e2e; }
html.dark-skin .n-related-title { color: #e5e7eb; }
html.dark-skin .n-tags a { background: #252525; color: #cbd5e1; }

/* ═════════════════════════════════════════════════════════════════════════
   إصلاح شورت كود "جنه" (بلجن Jannah Extensions) — 2026-07-16
   نفس السبب الجذري بالضبط (تنسيقات مرتبطة بكلاس .entry بس) — نفس الإصلاح
   المطبّق في صفحة الموبايل، هنا لصفحة الأخبار.
   ═════════════════════════════════════════════════════════════════════════ */
.n-content .tabs-wrapper.container-wrapper {
    padding: 0;
    margin-bottom: 25px;
}
.n-content .tab-content {
    padding: 30px;
}
body.rtl .n-content .last {
    clear: left;
    margin-left: 0;
}