/* =====================================================================
   style.css — التنسيقات المشتركة لموقع جدارجو الإخباري
   ملف واحد تستهلكه كل الصفحات: index.php / article.php / category.php
   --------------------------------------------------------------------
   الفهرس:
     1) متغيّرات التصميم (الوضع النهاري والليلي)
     2) أساسيات
     3) الشريط العلوي + لوحة البحث
     4) الهيدر وشريط الأقسام (مع قائمة «المزيد» المنسدلة)
     5) شريط الأخبار العاجلة (Ticker)
     6) بطاقات الأخبار
     7) البطاقة البارزة (Hero) + سلايدر الأخبار البارزة
     8) عناوين الأقسام
     9) الشريط الجانبي
    10) التذييل وزر الصعود
    11) الترقيم الصفحي (Pagination)
    12) صفحة الخبر (article)
    13) صفحة القسم (category)
    14) حالات فارغة وحالات الخطأ
    15) الاستجابة للشاشات الصغيرة
   ===================================================================== */

/* =====================================================================
   1) متغيّرات التصميم — قيم واحدة تنقلب تلقائياً مع الوضع الليلي
   ===================================================================== */
:root {
    --brand:        #0a4d8c;
    --brand-2:      #06305c;
    --accent:       #c8102e;
    --radius:       14px;
    --shadow-sm:    0 2px 10px rgba(16, 24, 40, .06);
    --shadow-md:    0 12px 32px rgba(16, 24, 40, .13);
    --header-h:     116px; /* ارتفاع الهيدر الثابت: صف الشعار + شريط الأقسام */
}
[data-bs-theme="light"] {
    --page-bg:      #f2f4f7;
    --card-bg:      #ffffff;
    --text-main:    #16202b;
    --text-muted:   #67768a;
    --border:       #e5e9ef;
    --header-bg:    #ffffff;
}
[data-bs-theme="dark"] {
    --page-bg:      #0d1117;
    --card-bg:      #161b22;
    --text-main:    #e6edf3;
    --text-muted:   #97a3b1;
    --border:       #262d36;
    --header-bg:    #11161d;
    --shadow-sm:    0 2px 10px rgba(0, 0, 0, .4);
    --shadow-md:    0 12px 32px rgba(0, 0, 0, .55);
}

/* =====================================================================
   2) أساسيات
   ===================================================================== */
body {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, system-ui, sans-serif;
    background-color: var(--page-bg);
    color: var(--text-main);
}
a { text-decoration: none; }
.text-muted-2 { color: var(--text-muted) !important; }
img { max-width: 100%; }

/* =====================================================================
   3) الشريط العلوي (التاريخ / الوقت / الطقس / روابط الأدوات / الوضع الليلي)
   ===================================================================== */
.topbar {
    background: linear-gradient(90deg, var(--brand-2), var(--brand));
    color: #fff;
    font-size: .82rem;
    padding: .35rem 0;
}
.topbar a { color: rgba(255, 255, 255, .9); }
.topbar a:hover { color: #fff; }

/* الصف: [التاريخ والوقت والطقس] [روابط الأدوات] [التواصل واللغة والوضع الليلي] */
.topbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .5rem .9rem;
}
.topbar__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
.topbar__item {
    display: inline-flex; align-items: center; gap: .35rem;
    white-space: nowrap;
}
.topbar__item i { opacity: .85; }
.topbar__sep { opacity: .32; }
.topbar__utils { display: flex; align-items: center; gap: .1rem; }
.topbar__side { display: flex; align-items: center; gap: .5rem; }

.topbar__link {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .24rem .5rem;
    background: transparent; border: 0;
    color: rgba(255, 255, 255, .9);
    font-size: .82rem; font-weight: 600;
    border-radius: 7px; white-space: nowrap;
    transition: background-color .2s, color .2s;
}
.topbar__link:hover { background: rgba(255, 255, 255, .17); color: #fff; }
.topbar__link--lang { border: 1px solid rgba(255, 255, 255, .38); }
.topbar__social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    transition: background-color .2s;
}
.topbar__social:hover { background: rgba(255, 255, 255, .17); }

/* على الجوال: روابط الأدوات في شريط يُسحب أفقياً */
.topbar__strip {
    display: flex; align-items: center; gap: .15rem;
    margin-top: .4rem; padding-top: .4rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.topbar__strip::-webkit-scrollbar { display: none; }

/* لوحة البحث المنسدلة أسفل الشريط العلوي */
.topbar-search {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    padding: .75rem 0;
}
.topbar-search .search-form { max-width: 620px; margin-inline: auto; }
.topbar-search .search-form .form-control { background-color: var(--page-bg); }

/* ---------------------------------------------------------------------
   الشريط الترويجي (نص يُدار من لوحة التحكم > الإعدادات > الهيدر)
   --------------------------------------------------------------------- */
.promo-bar {
    background: linear-gradient(90deg, var(--brand-2), var(--brand));
    color: #fff;
    font-size: .85rem; font-weight: 600;
    padding: .4rem 0;
    text-align: center;
}
.promo-bar a { color: #fff; text-decoration: underline; }
.promo-bar a:hover { color: #ffe9a8; }
.promo-bar i { color: #ffd76e; }
.theme-toggle {
    width: 30px; height: 30px; padding: 0;
    display: inline-grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%; background: transparent; color: #fff;
    transition: background .2s, transform .2s;
}
.theme-toggle:hover { background: rgba(255, 255, 255, .18); transform: rotate(-15deg); }

/* =====================================================================
   4) الهيدر وقائمة التنقل
   بنية من صفّين لتفادي تجاوز عرض الشاشة:
     الصف 1 : الشعار + البحث + زر القائمة (الجوال)
     الصف 2 : شريط الأقسام المتحرك أفقياً عند الحاجة
   ===================================================================== */
.header-sticky {
    position: sticky; top: 0; z-index: 1030;
    transition: box-shadow .3s ease;
}
.header-sticky.scrolled { box-shadow: 0 8px 24px rgba(16, 24, 40, .14); }
[data-bs-theme="dark"] .header-sticky.scrolled { box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }

.site-navbar {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border);
    padding-block: .5rem;
}
/* شريط الأقسام: القائمة الأساسية + قائمة «المزيد» المنسدلة */
.catnav {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border);
}
.catnav .container {
    display: flex; align-items: stretch; gap: .35rem;
}
.catnav__list {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-wrap: nowrap; gap: .1rem;
    margin: 0; padding: 0; list-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* إخفاء شريط التمرير ليبقى ارتفاع الشريط ثابتاً وأنيقاً */
    scrollbar-width: none;
}
.catnav__list::-webkit-scrollbar { display: none; }
.catnav__link {
    display: block; white-space: nowrap;
    padding: .62rem .85rem;
    font-size: .92rem; font-weight: 700;
    color: var(--text-main);
    border-bottom: 2px solid transparent;
    transition: color .2s, background-color .2s, border-color .2s;
}
.catnav__link:hover { color: var(--brand); background-color: rgba(10, 77, 140, .06); }
.catnav__link.is-active { color: var(--brand); border-bottom-color: var(--brand); }

/* زر «المزيد»: ثابت في طرف الشريط ولا يتحرّك مع سحب القائمة */
.catnav__more {
    flex: 0 0 auto; display: flex; align-items: center;
    position: relative;
    margin-inline-start: .25rem;
    box-shadow: -10px 0 12px -8px rgba(0, 0, 0, .18);
}
[data-bs-theme="dark"] .catnav__more { box-shadow: -10px 0 12px -8px rgba(0, 0, 0, .6); }
.catnav__link--more {
    display: inline-flex; align-items: center; gap: .3rem;
    background: transparent; border: 0; cursor: pointer;
}
.catnav__link--more i { font-size: .85rem; opacity: .8; }
.catnav__link--more.show { color: var(--brand); border-bottom-color: var(--brand); }
.catnav__dropdown {
    min-width: 235px;
    padding: .35rem;
    border-radius: 12px;
    border-color: var(--border);
    box-shadow: var(--shadow-md);
}
.catnav__dropdown .dropdown-item {
    display: flex; align-items: center; gap: .45rem;
    border-radius: 8px;
    font-size: .9rem; font-weight: 600;
    padding: .45rem .6rem;
}
.catnav__dropdown .dropdown-item i { font-size: .75rem; opacity: .4; }
.catnav__dropdown .dropdown-item:hover,
.catnav__dropdown .dropdown-item:focus { background-color: rgba(10, 77, 140, .08); color: var(--brand); }
.catnav__dropdown .dropdown-item.active { background-color: var(--brand); color: #fff; }
.catnav__dropdown .dropdown-item.active i { opacity: .9; }

/* قسم «المزيد» داخل قائمة الجوال */
.mobile-more {
    margin-top: .85rem; padding-top: .6rem;
    border-top: 1px dashed var(--border);
}
.mobile-more__title {
    display: block;
    font-size: .78rem; font-weight: 800;
    color: var(--text-muted);
    margin-bottom: .2rem; padding-inline-start: .55rem;
}

.navbar-brand { display: flex; align-items: center; gap: .65rem; }

/* ----- شعار الموقع المرفوع من اللوحة (نهاري / ليلي) ----- */
.brand-logo {
    height: var(--logo-h, 48px);
    width: auto;
    max-width: 260px;
    object-fit: contain;
    display: block;
}
/* يظهر شعار النهار في الوضع النهاري وشعار الليل في الوضع الليلي */
[data-bs-theme="light"] .brand-logo--dark { display: none; }
[data-bs-theme="dark"] .brand-logo--light { display: none; }
/* على الجوال نقلّل ارتفاع الشعار قليلاً ليبقى الهيدر أنيقاً */
@media (max-width: 575.98px) {
    .brand-logo { height: calc(var(--logo-h, 48px) * .78); max-width: 170px; }
}
.brand-mark {
    width: 44px; height: 44px; flex: 0 0 44px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff; font-weight: 800; font-size: 1.3rem;
    box-shadow: 0 4px 12px rgba(10, 77, 140, .35);
}
.brand-text strong { display: block; font-size: 1.22rem; font-weight: 800; line-height: 1.15; color: var(--text-main); }
.brand-text small { display: block; font-size: .7rem; color: var(--text-muted); }
.site-navbar .nav-link {
    font-weight: 600; font-size: .93rem; color: var(--text-main);
    padding: .55rem .72rem; border-radius: 8px;
    transition: color .2s, background-color .2s;
}
.site-navbar .nav-link:hover { color: var(--brand); background-color: rgba(10, 77, 140, .07); }
.site-navbar .nav-link.active { color: var(--brand); }
.site-navbar .nav-link.active::after {
    content: ""; display: block; height: 2px; margin-top: 3px;
    background: var(--brand); border-radius: 2px;
}
.search-form { max-width: 255px; width: 100%; }
.search-form .form-control {
    background-color: var(--page-bg);
    border: 1px solid var(--border);
    font-size: .87rem;
    border-start-start-radius: 999px;
    border-end-start-radius: 999px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}
.search-form .form-control:focus { border-color: var(--brand); box-shadow: none; }
.search-form .btn {
    background: var(--brand); color: #fff; border: 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: 999px;
    border-end-end-radius: 999px;
    padding-inline: .95rem;
}
.search-form .btn:hover { background: var(--brand-2); }

/* نموذج البحث داخل صفحة البحث (أوسع من نموذج الهيدر) */
.search-page-form { max-width: 640px; margin: 0 auto 1.5rem; }
.search-page-form .search-form { max-width: 100%; }
.search-term { font-weight: 800; }

/* =====================================================================
   5) شريط الأخبار العاجلة (Ticker)
   ---------------------------------------------------------------------
   آلية الحلقة اللانهائية (Infinite Loop):
     • المسار (track) مثبّت بـ position:absolute; right:0 فيلتصق طرفه
       الأيمن بحافة الشريط ويخرج محتواه إلى اليسار (اتجاه RTL).
     • يُكرَّر محتوى الأخبار مرتين متطابقتين تماماً، فيبلغ عرض المسار
       ضعف عرض نسخة واحدة (50% لكل نسخة).
     • نُحرّك المسار إلى اليمين بمقدار 50% من عرضه — أي مسافة نسخة
       واحدة بالضبط — فيدخل الخبر التالي من اليسار ويخرج السابق من
       اليمين بلا فجوة ولا قفزة، ثم يعيد المتصفح الحركة إلى نقطة
       البداية فتكون الحلقة مستمرة إلى ما لا نهاية.
     • شرط عدم ظهور فراغ: أن يكون عرض النسخة الواحدة أكبر من عرض
       الشريط، لذلك يكرّر قالب الهيدر الأخبار حتى 9 عناصر لكل نسخة.
   ===================================================================== */
.ticker {
    display: flex; align-items: stretch;
    background: var(--accent);
    color: #fff;
    overflow: hidden;
    min-height: 42px;
}
.ticker__label {
    display: flex; align-items: center; gap: .35rem;
    background: #8f0b21;
    padding: .5rem 1rem;
    font-weight: 800; font-size: .85rem;
    white-space: nowrap;
    flex: 0 0 auto;
    z-index: 2;
}
.ticker__viewport { position: relative; overflow: hidden; flex: 1 1 auto; }
/* التتبّع: يبدأ من اليمين ويتحرّك يميناً (انعكاس الشريط الإنجليزي) */
.ticker__track {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex; align-items: center;
    width: max-content;
    direction: rtl;
    animation-name: ticker-scroll;
    animation-duration: 90s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
    backface-visibility: hidden;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}
.ticker__item {
    direction: rtl;
    display: inline-flex; align-items: center; gap: .5rem;
    padding-inline: 1.25rem;
    color: #fff; font-weight: 600; font-size: .9rem;
    white-space: nowrap;
}
.ticker__item:hover { color: #fff; text-decoration: underline; }
.ticker__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #ffd7dd; flex: 0 0 7px;
}
.ticker__time { font-size: .74rem; opacity: .8; font-weight: 400; }
@media (prefers-reduced-motion: reduce) {
    .ticker__track { animation: none; }
}

/* =====================================================================
   6) بطاقات الأخبار
   ===================================================================== */
.news-card {
    display: flex; flex-direction: column;
    height: 100%;
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.thumb {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 16 / 9; background-color: var(--border);
}
.thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .6s ease;
}
.news-card:hover .thumb img { transform: scale(1.06); }
.card-body-custom {
    display: flex; flex-direction: column; gap: .45rem;
    padding: .85rem 1rem 1rem; flex: 1 1 auto;
}
.card-title-custom {
    margin: 0; font-size: 1.03rem; font-weight: 700; line-height: 1.6;
    overflow-wrap: break-word;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-title-custom a { color: var(--text-main); }
.card-title-custom a:hover { color: var(--brand); }
.meta-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
    font-size: .75rem; color: var(--text-muted);
}
.meta-row--light { color: rgba(255, 255, 255, .82); }
.cat-badge {
    display: inline-block; font-size: .72rem; font-weight: 700;
    background: var(--brand); color: #fff;
    padding: .18rem .6rem; border-radius: 6px;
}
.cat-badge:hover { background: var(--brand-2); color: #fff; }
.badge-breaking {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .7rem; font-weight: 700;
    background: var(--accent); color: #fff;
    padding: .2rem .55rem; border-radius: 6px;
}

/* البطاقة الأفقية (صورة صغيرة + عنوان) */
.news-card--h { flex-direction: row; }
.news-card--h .thumb {
    flex: 0 0 138px; width: 138px;
    aspect-ratio: auto; align-self: stretch;
}
.news-card--h .thumb img { height: 100%; }
.news-card--h .card-body-custom { padding: .6rem .85rem; gap: .35rem; }
.news-card--h .card-title-custom {
    font-size: .93rem; -webkit-line-clamp: 3;
}
.news-card--h .meta-row { font-size: .71rem; gap: .55rem; }

/* =====================================================================
   7) البطاقة الرئيسية البارزة (Hero) — الصفحة الرئيسية
   ===================================================================== */
.hero-card {
    position: relative; display: block;
    min-height: 350px; height: 100%;
    border-radius: var(--radius); overflow: hidden;
}
.hero-card img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .8s ease;
}
.hero-card:hover img { transform: scale(1.04); }
.hero-card__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(3, 10, 20, .94) 0%,
        rgba(3, 10, 20, .6) 42%,
        rgba(3, 10, 20, .05) 78%);
}
.hero-card__content {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 350px; height: 100%;
    padding: 1.35rem; color: #fff;
}
.hero-card__title {
    font-size: clamp(1.15rem, 2.3vw, 1.62rem);
    font-weight: 800; line-height: 1.55;
    color: #fff; margin: .55rem 0;
    overflow-wrap: break-word;
}
.hero-card:hover .hero-card__title { text-decoration: underline; }
.hero-card__excerpt {
    font-size: .9rem; line-height: 1.7; margin: 0;
    color: rgba(255, 255, 255, .85);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* =====================================================================
   7.b) سلايدر الأخبار البارزة + قائمة العناوين الجانبية
   ---------------------------------------------------------------------
   يعمل بمكوّن Bootstrap 5 Carousel (يتقلّب تلقائياً كل 6 ثوانٍ)
   مع قائمة جانبية تتنقّل بين الشرائح بالنقر وتُبرز الشريحة الحالية.
   ===================================================================== */
.hero-slider { position: relative; border-radius: var(--radius); overflow: hidden; }
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next {
    width: 44px; opacity: .9; z-index: 3;
}
.hero-slider .carousel-control-prev-icon,
.hero-slider .carousel-control-next-icon {
    width: 34px; height: 34px; border-radius: 50%;
    background-color: rgba(3, 10, 20, .5);
    background-size: 50%;
    transition: background-color .2s;
}
.hero-slider .carousel-control-prev:hover .carousel-control-prev-icon,
.hero-slider .carousel-control-next:hover .carousel-control-next-icon { background-color: var(--brand); }

.featured-list {
    display: flex; flex-direction: column; gap: .5rem;
    margin: 0; padding: 0; list-style: none; height: 100%;
}
.featured-list__item {
    display: flex; align-items: flex-start; gap: .6rem;
    height: 100%;
    padding: .6rem .7rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-main);
    transition: border-color .2s, background-color .2s, transform .2s, box-shadow .2s;
}
.featured-list__item:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-sm);
    transform: translateX(-3px);
}
.featured-list__item.is-active {
    border-color: var(--brand);
    background-color: rgba(10, 77, 140, .07);
}
.featured-list__num {
    flex: 0 0 26px; width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 8px;
    background-color: var(--page-bg);
    color: var(--brand);
    font-size: .8rem; font-weight: 800;
}
.featured-list__item.is-active .featured-list__num { background-color: var(--brand); color: #fff; }
.featured-list__body { display: block; min-width: 0; }
.featured-list__title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .9rem; font-weight: 700; line-height: 1.6;
    margin: 0;
}
.featured-list__meta {
    display: flex; align-items: center; gap: .5rem;
    margin-top: .2rem;
    font-size: .72rem; color: var(--text-muted);
}
.featured-list__meta .cat-badge { font-size: .68rem; padding: .05rem .45rem; }

@media (min-width: 992px) {
    /* مساواة ارتفاع السلايدر مع ارتفاع القائمة الجانبية */
    .hero-slider,
    .hero-slider .carousel-inner,
    .hero-slider .carousel-item { height: 100%; }
    .hero-slider .hero-card { height: 100%; }
    .featured-list__item { flex: 1 1 0; }
}

/* =====================================================================
   8) عناوين الأقسام
   ===================================================================== */
.section-title {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1rem;
    padding-bottom: .55rem;
    border-bottom: 2px solid var(--border);
}
.section-title h2 {
    position: relative; margin: 0;
    padding-inline-start: .8rem;
    font-size: 1.22rem; font-weight: 800;
}
.section-title h2::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 50%;
    transform: translateY(-50%);
    width: 5px; height: 22px; border-radius: 3px;
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
}
.section-more { font-size: .82rem; font-weight: 700; color: var(--brand); white-space: nowrap; }
.section-more:hover { color: var(--brand-2); }

/* =====================================================================
   9) الشريط الجانبي
   ===================================================================== */
.sidebar-sticky { position: sticky; top: calc(var(--header-h) + 14px); }
.widget {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.widget__head {
    display: flex; align-items: center; gap: .5rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--border);
    font-weight: 800; font-size: .98rem;
}
.widget__head i { color: var(--brand); }
.widget__body { padding: .35rem 1rem .9rem; }
.rank-item {
    display: flex; gap: .7rem; align-items: flex-start;
    padding: .7rem 0;
    border-bottom: 1px dashed var(--border);
}
.rank-item:last-child { border-bottom: 0; padding-bottom: 0; }
.rank-num {
    font-size: 1.5rem; font-weight: 800; line-height: 1;
    color: var(--brand); opacity: .3; min-width: 1.5rem;
}
.rank-title { font-size: .9rem; font-weight: 600; line-height: 1.6; color: var(--text-main); margin: 0; overflow-wrap: break-word; }
.rank-title:hover { color: var(--brand); }
.cat-list-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: .55rem 0; border-bottom: 1px dashed var(--border);
    color: var(--text-main); font-size: .9rem; font-weight: 600;
}
.cat-list-item:last-child { border-bottom: 0; }
.cat-list-item:hover { color: var(--brand); }
.cat-list-item .count {
    font-size: .72rem; font-weight: 700;
    background: var(--page-bg); color: var(--text-muted);
    border: 1px solid var(--border);
    padding: .1rem .5rem; border-radius: 999px;
}

/* =====================================================================
   10) التذييل وزر الصعود للأعلى
   ===================================================================== */
.site-footer {
    background: #0b1a2b; color: #c2cedb;
    margin-top: 2.5rem; padding-top: 2.5rem;
    font-size: .9rem;
}
.site-footer h5 { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
.site-footer a { color: #c2cedb; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-about p { line-height: 1.9; color: #9fb0c2; font-size: .87rem; }
/* شعار التذييل (يُرفع من اللوحة) */
.footer-logo { height: 46px; width: auto; max-width: 220px; object-fit: contain; display: block; }
/* أيقونات التواصل في التذييل (تظهر المُعدّ فقط من اللوحة) */
.footer-social { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.footer-social a {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #dbe6f2;
    font-size: 1rem;
    transition: background-color .2s, transform .2s, color .2s;
}
.footer-social a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 1.75rem; padding: 1rem 0;
    font-size: .82rem; color: #93a5b8;
}
[data-bs-theme="dark"] .site-footer { background: #070b10; }
.to-top {
    position: fixed; inset-inline-end: 1rem; bottom: 1rem;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--brand); color: #fff; font-size: 1.1rem;
    opacity: 0; visibility: hidden; z-index: 1030;
    transition: opacity .3s, visibility .3s, transform .3s;
}
.to-top.show { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--brand-2); transform: translateY(-3px); }

/* =====================================================================
   11) الترقيم الصفحي (Pagination) — متوافق مع RTL
   ===================================================================== */
.pagination { margin-bottom: 0; }
.pagination .page-link {
    color: var(--text-main);
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px !important;
    min-width: 40px; text-align: center;
    font-weight: 700; font-size: .9rem;
    padding: .4rem .55rem;
    transition: background-color .2s, color .2s, border-color .2s;
}
.pagination .page-link:hover { background-color: var(--page-bg); color: var(--brand); border-color: var(--brand); }
.pagination .page-item.active .page-link { background-color: var(--brand); border-color: var(--brand); color: #fff; }
.pagination .page-item.disabled .page-link { opacity: .45; background-color: var(--card-bg); }
.pagination .page-item .page-link:focus { box-shadow: 0 0 0 .2rem rgba(10, 77, 140, .18); }
.page-info { font-size: .82rem; color: var(--text-muted); }

/* =====================================================================
   12) صفحة الخبر (article.php)
   ===================================================================== */
.breadcrumb-bar {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .55rem 1rem;
    margin-bottom: 1.25rem;
}
.breadcrumb { margin: 0; font-size: .82rem; }
.breadcrumb-item + .breadcrumb-item::before { content: "‹"; color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .active { color: var(--text-main); font-weight: 600; }

.article-shell {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.article-head { padding: 1.25rem 1.35rem 1rem; }
.article-title {
    font-size: clamp(1.35rem, 3vw, 2.05rem);
    font-weight: 800; line-height: 1.6; margin: .6rem 0 .75rem;
    overflow-wrap: break-word;
}
.article-lead { display: none; } /* غير مستخدم حالياً */

.article-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
    font-size: .8rem; color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: .8rem;
}
.article-figure { margin: 0; }
.article-figure img { width: 100%; max-height: 560px; object-fit: cover; display: block; }

/* تنسيق نص الخبر القادم من محرر لوحة التحكم */
.article-content {
    padding: 1.4rem 1.35rem;
    font-size: 1.06rem; line-height: 2.05;
    overflow-wrap: break-word;
}
.article-content p { margin-bottom: 1.15rem; }
.article-content h1, .article-content h2, .article-content h3,
.article-content h4, .article-content h5, .article-content h6 {
    font-weight: 800; margin: 1.6rem 0 .8rem; line-height: 1.6;
}
.article-content h1 { font-size: 1.6rem; }
.article-content h2 { font-size: 1.4rem; }
.article-content h3 { font-size: 1.2rem; }
.article-content h4,
.article-content h5,
.article-content h6 { font-size: 1.08rem; }
.article-content ul, .article-content ol { padding-inline-start: 1.4rem; margin-bottom: 1.15rem; }
.article-content li { margin-bottom: .45rem; }
.article-content img { border-radius: 10px; height: auto; margin: .6rem 0; }
.article-content p img:only-child { margin-inline: auto; display: block; }
.article-content hr { border: 0; border-top: 1px solid var(--border); margin: 1.8rem 0; }
.article-content pre {
    background-color: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .9rem 1rem;
    overflow-x: auto;
    direction: ltr;
    text-align: left;
    font-size: .92rem;
}
.article-content code {
    background-color: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .1rem .35rem;
    font-size: .92em;
}
.article-content blockquote {
    border-inline-start: 4px solid var(--brand);
    background-color: var(--page-bg);
    padding: .85rem 1.1rem; border-radius: 8px;
    margin: 1.2rem 0; font-weight: 500;
}
.article-content a { color: var(--brand); text-decoration: underline; }
.article-content table { width: 100%; margin-bottom: 1.15rem; }
.article-content th, .article-content td { border: 1px solid var(--border); padding: .5rem .7rem; }
.article-content iframe { max-width: 100%; border-radius: 10px; }

/* أزرار المشاركة */
.share-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding: 1rem 1.35rem 1.25rem;
    border-top: 1px solid var(--border);
}
.share-bar__label { font-size: .85rem; font-weight: 700; color: var(--text-muted); margin-inline-end: .25rem; }
.share-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .42rem .8rem; border-radius: 999px;
    font-size: .83rem; font-weight: 700; color: #fff;
    border: 0; transition: transform .2s, opacity .2s;
}
.share-btn:hover { transform: translateY(-2px); opacity: .92; color: #fff; }
.share-btn--whatsapp { background: #25d366; }
.share-btn--facebook { background: #1877f2; }
.share-btn--x        { background: #000000; }
.share-btn--telegram { background: #229ed9; }
.share-btn--copy     { background: var(--page-bg); color: var(--text-main); border: 1px solid var(--border); }
[data-bs-theme="dark"] .share-btn--x { background: #2a323c; }
.share-btn--copy:hover { color: var(--brand); }

/* =====================================================================
   13) صفحة القسم (category.php)
   ===================================================================== */
.page-hero {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff; border-radius: var(--radius);
    padding: 1.5rem 1.5rem;
    margin-bottom: 1.5rem;
    position: relative; overflow: hidden;
}
.page-hero::after {
    content: ""; position: absolute; inset-inline-end: -40px; top: -40px;
    width: 190px; height: 190px; border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}
.page-hero h1 {
    font-size: clamp(1.4rem, 3.4vw, 2rem);
    font-weight: 800; margin: .3rem 0 .5rem;
    position: relative; z-index: 1;
}
.page-hero p { margin: 0; color: rgba(255, 255, 255, .85); font-size: .92rem; position: relative; z-index: 1; }
.page-hero__crumb { font-size: .8rem; color: rgba(255, 255, 255, .8); position: relative; z-index: 1; }
.page-hero__crumb a { color: rgba(255, 255, 255, .9); }
.page-hero__crumb a:hover { color: #fff; text-decoration: underline; }
.page-hero__count {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(255, 255, 255, .16);
    border-radius: 999px; padding: .25rem .75rem;
    font-size: .78rem; font-weight: 700;
    position: relative; z-index: 1;
}

/* =====================================================================
   13.b) أرشيف الأخبار (archive.php)
   ===================================================================== */
.archive-tabs { display: flex; flex-wrap: wrap; gap: .45rem; }
.archive-tabs__item {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .95rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .85rem; font-weight: 700;
    color: var(--text-main);
    transition: color .2s, background-color .2s, border-color .2s;
}
.archive-tabs__item:hover { border-color: var(--brand); color: var(--brand); }
.archive-tabs__item.is-active { background-color: var(--brand); border-color: var(--brand); color: #fff; }

.archive-months { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.archive-months__label { font-size: .82rem; font-weight: 700; color: var(--text-muted); }
.archive-months__item {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .28rem .7rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .8rem; font-weight: 600;
    color: var(--text-main);
    transition: color .2s, background-color .2s, border-color .2s;
}
.archive-months__item:hover { border-color: var(--brand); color: var(--brand); }
.archive-months__item.is-active { background-color: rgba(10, 77, 140, .1); border-color: var(--brand); color: var(--brand); }
.archive-months__count {
    background-color: rgba(10, 77, 140, .13);
    color: var(--brand);
    border-radius: 999px;
    padding: 0 .4rem;
    font-size: .72rem; font-weight: 800;
}
.archive-months__item.is-active .archive-months__count { background-color: var(--brand); color: #fff; }
.archive-months__reset { font-size: .8rem; font-weight: 700; color: #c0392b; }

/* =====================================================================
   14) حالات فارغة وحالات الخطأ
   ===================================================================== */
.empty-state {
    background-color: var(--card-bg);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 2.5rem 1rem; text-align: center;
    color: var(--text-muted);
}
.empty-state i { color: var(--brand); opacity: .6; }
.error-code {
    font-size: clamp(3.5rem, 12vw, 6rem);
    font-weight: 800; line-height: 1; color: var(--brand); opacity: .22;
}

/* =====================================================================
   15) الاستجابة للشاشات الصغيرة
   ===================================================================== */
@media (max-width: 991.98px) {
    .site-navbar .nav-link { border-radius: 0; padding-block: .6rem; }
    .search-form { max-width: 100%; margin-top: .6rem; }
    .sidebar-sticky { position: static; }
    .hero-card, .hero-card__content, .hero-card img { min-height: 260px; }
    :root { --header-h: 108px; }
    .article-head, .article-content, .share-bar { padding-inline: 1rem; }
    .page-hero { padding: 1.2rem 1.1rem; }
}
@media (max-width: 575.98px) {
    .news-card--h .thumb { flex-basis: 106px; width: 106px; }
    .brand-text small { display: none; }
    .hero-card, .hero-card__content, .hero-card img { min-height: 230px; }
    .section-title h2 { font-size: 1.08rem; }
    .catnav__link { padding-inline: .7rem; font-size: .87rem; }
    .article-content { font-size: 1rem; line-height: 1.95; }
    .share-btn { font-size: .78rem; padding: .4rem .65rem; }
}