/* ============================================================
   S24News — main stylesheet (منقول من <b:skin>)
   النقل يجري من أسفل القالب إلى أعلاه، لذلك كل جزء جديد
   يُلصق مباشرة أسفل هذا التعليق.
   ============================================================ */

/* ==========================================================================
   [01] القواعد العامة (Reset / body / a)
   ========================================================================== */

/* ---------- 01.1 تهيئة الصفحة وتدفق العناصر ---------- */
/* السماح بظهور العناصر التي تتجاوز حدود الصفحة (قوائم منسدلة، تلميحات...) */
html {
    overflow: visible;
}

/* ---------- 01.2 حساب أبعاد العناصر الموحد ---------- */
/* Box-sizing الشامل: الحشوة والحدود تُحسب ضمن العرض المحدد للعنصر */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ---------- 01.3 إعدادات الجسم الأساسية للموقع ---------- */
body {
    overflow-x: hidden;
    max-width: 100%;
    background-color: var(--color-main-bg);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    direction: rtl;
    text-align: right;
    transition: background-color 0.3s, color 0.3s;
}

/* ---------- 01.4 تخصيص الروابط وعناصر التنقل ---------- */
/* الروابط: إزالة الخط السفلي والوراثة من لون النص المحيط */
a {
    text-decoration: none;
    color: inherit;
}

/* ---------- 01.5 تنظيف وإخفاء أدوات بلوجر الافتراضية ---------- */
/* إخفاء عناصر Blogger الافتراضية المستبدلة بمكونات مخصصة في القالب */
.post-share-buttons,
.blog-feeds,
.post-footer,
.post-footer-line,
.bg-photo-container,
.post-timestamp,
.post-author,
.post-snippet {
    display: none;
}


/* ==========================================================================
   الخصائص الأساسية للشريط العلوي (تطبيق فلسفة الوحدات النسبية)
========================================================================== */
.top-date-bar { background-color: var(--top-bar-bg, #f9f9f9); color: var(--text-main, #000); font-weight: normal; display: flex; justify-content: center; align-items: center; border-bottom: 0.0625rem solid var(--border-color, #eee); width: 100%; transition: all 0.3s ease; }
.top-bar-inner { width: 100%; max-width: 95rem; padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; margin: 0 auto; }
.date-display {  display: flex; align-items: center; gap: 0.5em; letter-spacing: 0.03em; }
.top-social-icons { display: flex; align-items: center; }
.top-social-icons .widget, .top-social-icons .widget-content { margin: 0; padding: 0; border: none; }
.top-icon { fill: currentColor; transition: all 0.3s ease; }


      /* 4. HEADER (الموضع الفعلي position/top يُضبط حصراً داخل استعلامي الوسائط أدناه:
            fixed لكل الأحجام — الديسكتوب top:40px، الموبايل/التابلت top:0 — لا يوجد
            فراغ بين الاستعلامين (1024px فأكثر / 1023px فأقل) فلا حاجة لقيمة افتراضية هنا) */
      header {
        background-color: var(--header-bg);
        border-bottom: 1px solid var(--border-color);
        height: 100px;

        z-index: 1000;

        display: flex; align-items: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05); width: 100%;
      }
      .header-inner { width: 100%; max-width: 1552px; margin: 0 auto; padding: 0 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; box-sizing: border-box; row-gap: 8px; }
      .right-area { width: 250px; height: 100px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
      .center-area { flex-grow: 1; display: flex; justify-content: center; margin: 0 20px; }
      .left-area { display: flex; align-items: center; gap: 15px; height: 100px; }
      .menu-toggle { font-size: 28px; cursor: pointer; background: none; border: none; padding: 0; color: var(--text-main); display: flex; align-items: center; }
      .logo-sy {background-color: var(--sy-green); width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;text-decoration: none; border-radius: 0; }
      .logo-sy img { width: 100%; height: 100%; object-fit: contain; border-radius: 0;}
      .btn-live { background-color: var(--btn-live-bg); color: var(--color-white); display: flex; align-items: center; justify-content: center; min-width: 4.5rem; min-height: 2rem; padding: 0 1rem; font-size: 0.875rem; font-weight: bold; border-radius: 0.313rem; text-decoration: none; transition: all 0.3s ease; }
      .btn-live:hover { opacity: 0.95; transform: none; }


/* ==========================================================================
   [04] البحث (كمبيوتر / موبايل / Ajax Live Search / لا نتائج)
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.1 بحث الكمبيوتر
   -------------------------------------------------------------------------- */
.search-wrapper {
  position: relative;
  width: 336px;
  max-width: 100%;
  display: flex;
  align-items: center;
}


/* --------------------------------------------------------------------------
   4.2 بحث الموبايل (منسدل)
   -------------------------------------------------------------------------- */
.mobile-search-icon {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-main);
  padding: 5px;
}

#mobile-search-overlay {
  display: none;
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  z-index: 10001;
  padding: 15px 20px;
  box-sizing: border-box;
}

#mobile-search-overlay.main-header__block--search-active {
  display: block;
  animation: slideDownSearch 0.3s ease-out forwards;
}

@keyframes slideDownSearch {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.search-overlay-content {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.mobile-search-form {
  width: 100%;
  margin: 0;
}

.search-input-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.search-form__input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--color-search-form-bg);
  border: .063rem solid transparent;
  border-radius: .5rem;
  color: var(--text-main);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  inline-size: 100%;
  line-height: 1.75rem;
  max-inline-size: 100%;
  outline: none;
  padding-block-end: .875rem;
  padding-block-start: .75rem;
  padding-inline-end: 2.8rem;
  padding-inline-start: .938rem;
  position: relative;
  transition: background-color .3s ease-in-out, border-color .3s ease-in-out;
  z-index: 5;
  box-sizing: border-box;
}

.search-form__input:focus {
  background-color: var(--bg-card);
  border-color: var(--sy-green);
  box-shadow: 0 0 0 3px rgba(119, 189, 29, 0.1);
}

.search-form__submit {
  position: absolute;
  inset-inline-end: 8px;
  background: transparent;
  border: none;
  color: var(--text-sec);
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  transition: color 0.3s;
  padding: 0;
}

.search-form__submit:hover {
  color: var(--sy-green);
}
.search-form__input::-webkit-search-cancel-button,
.search-form__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* --------------------------------------------------------------------------
   4.3 البحث المباشر (Ajax Live Search)
   -------------------------------------------------------------------------- */
.ajax-search-results {
  background-color: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border-color, #ccc);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 999999 !important;
  display: none;
  max-height: 350px;
  overflow-y: auto;
  margin-top: 0;
  padding: 0;
}

.ajax-result-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid var(--border-color, #eee);
  text-decoration: none;
  transition: background 0.2s;
  background-color: var(--bg-card, #ffffff);
}

.ajax-result-item:hover {
  background-color: var(--hover-bg, #f9f9f9);
}

.ajax-result-img {
  width: 60px;
  height: 45px;
  border-radius: 4px;
  object-fit: cover;
  margin-left: 12px;
  flex-shrink: 0;
  border: 1px solid #eee;
  background-color: #ddd;
}

.ajax-result-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: right;
  flex-grow: 1;
}

.ajax-result-title {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-main, #000);
  line-height: 1.4;
  margin-bottom: 3px;
}

.ajax-result-date {
  font-size: 11px;
  color: var(--text-sec, #777);
}

.ajax-view-all {
  display: block;
  text-align: center;
  padding: 12px;
  background-color: var(--hover-bg, #f5f5f5);
  color: var(--sy-green);
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  border-top: 2px solid #eee;
}

.ajax-view-all:hover {
  background-color: var(--sy-green);
  color: #fff;
}

.ajax-loading,
.ajax-no-result {
  padding: 20px;
  text-align: center;
  color: #777;
  font-weight: bold;
  background-color: var(--bg-card, #ffffff);
}

[data-theme="dark"] .ajax-search-results,
[data-theme="dark"] .ajax-result-item,
[data-theme="dark"] .ajax-loading,
[data-theme="dark"] .ajax-no-result {
  background-color: #1e1e1e !important;
  border-color: #333;
}

/* --------------------------------------------------------------------------
   4.4 صفحة "لا توجد نتائج" - البحث المضمن
   -------------------------------------------------------------------------- */
.sy-inline-search {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  direction: rtl;
}

.sy-inline-search input {
  width: 100%;
  height: 50px !important;
  padding: 0 20px 0 55px;
  border: 2px solid var(--border-color);
  border-radius: 30px;
  background: var(--bg-body);
  color: var(--text-main);
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 15px;
  line-height: 50px;
}

.sy-inline-search input:focus {
  border-color: var(--sy-green);
}

.sy-inline-search button {
  position: absolute;
  left: 5px;
  top: 5px !important;
  width: 40px;
  height: 40px;
  background: var(--sy-green);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0 !important;
  display: grid;
  place-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 2;
  transform: none !important;
  margin: 0 !important;
}

.sy-inline-search button:hover {
  background: #5ea000;
}

.sy-inline-search button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  transform: translate(0px, 10px);
}

/* --------------------------------------------------------------------------
   4.5 ترويسة صفحة نتائج البحث
   -------------------------------------------------------------------------- */
.custom-search-page-header {
  padding: 25px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: none !important;
}

.search-page-info h2 {
  margin: 0 0 5px 0;
  font-size: 22px;
  font-weight: 900;
  color: var(--text-main) !important;
}

.search-page-info span {
  font-size: 14px;
  color: var(--text-sec) !important;
  font-weight: bold;
}

.search-page-icon {
  width: 60px;
  height: 60px;
  background-color: rgba(119, 189, 29, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sy-green);
  flex-shrink: 0;
}

.search-page-icon svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  stroke-width: 2;
}

.search-query-text {
  color: var(--sy-green);
  text-decoration: underline;
  text-decoration-color: rgba(119, 189, 29, 0.3);
}

/* ترويسة البحث (نسخة بديلة) */
.custom-search-header {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.search-icon-box {
  width: 50px;
  height: 50px;
  background: rgba(109, 178, 0, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sy-green);
}

.search-icon-box svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.search-title {
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 5px 0;
  color: var(--text-main);
}

.highlight-term {
  color: var(--sy-green);
  text-decoration: underline;
  text-decoration-color: rgba(109, 178, 0, 0.3);
}

.search-count {
  font-size: 14px;
  color: var(--text-sec);
}

/* --------------------------------------------------------------------------
   4.6 تصميم صفحة "لا توجد نتائج" (نسخة نظيفة)
   -------------------------------------------------------------------------- */
body .sy-no-results {
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  padding: 50px 20px;
  text-align: center;
  margin: 30px auto;
  width: 95%;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}

/* 💻 الكمبيوتر (أكبر من 768px) */
@media only screen and (min-width: 768px) {
  body .sy-no-results {
    width: 720px;
    max-width: 720px;
    min-width: 720px;
    margin: 8px auto;
  }
}

.sy-no-results svg {
  width: 80px;
  height: 80px;
  stroke: #ccc;
  stroke-width: 1.5;
  fill: none;
  margin-bottom: 20px;
}

.sy-no-results h3 {
  font-size: 24px;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 10px;
}

.sy-no-results p {
  color: var(--text-sec);
  font-size: 16px;
  margin-bottom: 30px;
}

/* --------------------------------------------------------------------------
   4.7 أيقونات متفرقة
   -------------------------------------------------------------------------- */
.icon-satellite {
  font-size: 24px;
  color: var(--text-main);
  cursor: pointer;
  padding: 5px;
}


/* ================================================= */
/* 🌍 نظام قائمة اللغات المنسدلة (مطابق لـ RT 100%) */
/* ================================================= */

/* 1. الحاوية الرئيسية */
.language-selector {
    position: relative;
    display: inline-flex;
    z-index: 105;
}

/* 2. الزر الأساسي (AR) */
.language-selector__toggler {
    background-color: var(--color-black, #000);
    color: #ffffff;
    width: 72px;  /* العرض الدقيق لموقع RT */
    height: 32px; /* الارتفاع الدقيق */
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 3px; /* انحناء زوايا مطابق لـ RT */
    border: none;
    cursor: pointer;
    outline: none;
    font-family: inherit;
    direction: ltr; /* للحفاظ على السهم يمين النص */
}

/* إزالة الانحناء السفلي عند الفتح للاتصال بالقائمة */
.language-selector.active .language-selector__toggler {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* 3. القائمة المنسدلة (صندوق اللغات) */
.language-selector__list {
    display: none;
    position: absolute;
    inset-block-start: 32px; /* يبدأ تماماً من نهاية الزر (32px) */
    inset-inline-end: 0;
    width: 72px; /* نفس عرض الزر تماماً */

    background-color: #ffffff;
    border: 1px solid #e9e9e9;
    border-top: none;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

    list-style: none;
    padding: 0;
    margin: 0;
    flex-direction: column;
}

/* إظهار القائمة */
.language-selector.active .language-selector__list {
    display: flex;
}

/* 4. عناصر القائمة والخطوط الفاصلة */
.language-selector__item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e9e9e9;
    height: 32px; /* 🔴 السر هنا: إجبار كل لغة على أخذ نفس ارتفاع الزر 32px */
}
.language-selector__item:last-child {
    border-bottom: none;
}

/* 5. الروابط (اللغات) */
.language-selector__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%; /* ملء ارتفاع الـ 32px بالكامل */
    color: #000000;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: background-color 0.2s, color 0.2s;
    font-family: inherit;
}

/* تأثير مرور الماوس (يتحول للأسود مثل RT) */
.language-selector__link:hover {
    background-color: #000000;
    color: #ffffff !important;
}

/* ========================================= */
/* 🌑 دعم الوضع الليلي (Dark Mode) */
/* ========================================= */
[data-theme="dark"] .language-selector__list {
    background-color: #1e1e1e;
    border-color: #333;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
[data-theme="dark"] .language-selector__item {
    border-bottom-color: #333;
}
[data-theme="dark"] .language-selector__link {
    color: #ffffff;
}
[data-theme="dark"] .language-selector__link:hover {
    background-color: var(--sy-green); /* في الليل يصبح أخضر عند المرور */
    color: #ffffff !important;
}


.theme-toggle-wrapper { background-color: var(--color-theme-switcher-bg); width: 52px; height: 28px; border-radius: 14px; display: flex; align-items: center; padding: 2px; cursor: pointer; justify-content: flex-end; border: 1px solid var(--border-color); }
[data-theme="dark"] .theme-toggle-wrapper { justify-content: flex-start; }
.toggle-circle { width: 24px; height: 24px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,0.2); color: var(--sy-green); font-size: 14px; }
.toggle-circle::before { content: '\2600';  display: block;}
[data-theme="dark"] .toggle-circle::before {content: '\263E';}


/* --- 5. BREAKING NEWS - النسخة المعدّلة (بدون قفزة بصرية) --- */

/*
   🟢 التعديل الأهم:
   بدل display:none ثم display:block المفاجئ (الذي يدفع كل الموقع للأسفل
   دفعة واحدة بمقدار 50px)، أصبح الارتفاع محجوزاً دائماً بقيمة max-height: 0
   ثم يتمدد بسلاسة (transition) فقط عند توفر خبر فعلي. النتيجة: لا قفزة
   مفاجئة، والانتقال يصبح حركة ناعمة بدل صدمة بصرية.
*/
.breaking-news-container {
    inline-size: 100%;
    max-height: 0;
    overflow: hidden;
    background-color: var(--breaking-news-bg);
    position: -webkit-sticky;
    position: sticky;
    inset-block-start: var(--sticky-top-offset);
    z-index: 997;
    border-bottom: 0px solid rgba(255,255,255,0.1);
    transition: max-height 0.35s ease, border-bottom-width 0.35s ease;
}

/* عند إضافة هذا الكلاس عبر الجافاسكربت فقط يتمدد الشريط لحجمه الطبيعي */
.breaking-news-container.is-active {
    max-height: 50px;
    border-bottom-width: 1px;
}

.breaking-news-container .widget {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}
.breaking-news-container .widget.active-news { opacity: 1; z-index: 2; }

.breaking-news-container .widget-content {
    background-color: transparent;
    color: var(--color-white);
    padding: 0;
    font-weight: bold;
    font-size: 16px;
    inline-size: 100%;
    block-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.breaking-news-container .widget-content a {
    color: var(--color-white) !important;
    text-decoration: none !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
    position: relative;
    padding: 0 20px;
}
.breaking-news-container .widget-content a:hover { text-decoration: underline !important; }
.breaking-news-container .widget-content a:before { content: ""; position: absolute; inset: 0; z-index: 5; }

/* وضع "تخطيط الصفحة" (Layout) في لوحة تحكم بلوجر - يبقى كما كان */
body#layout .breaking-news-container {
    display: block;
    max-height: none;
    height: auto;
    background-color: var(--color-white);
    padding: 10px;
    border: 2px dashed var(--color-FireEngineRed);
    position: relative;
    top: 0;
}

.breaking-news-container .widget-content a,
.breaking-news-container .widget-content span {
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.5rem;
    outline: none;
    text-decoration: none;
    color: var(--color-white);
}


#LinkList5 > h2.title,
#LinkList5 .title { display: none !important; }


.breaking-title-animated {
    animation: slideUpBreaking 0.5s ease-out;
}
@keyframes slideUpBreaking {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- تنسيقات الموبايل: تبقى كما كانت في الأصل --- */
@media only screen and (max-width: 1023px) {
  .breaking-news-container .widget-content,
  .breaking-news-container .widget-content a,
  .breaking-news-container .widget-content span {
      font-size: 0.875rem !important;
      padding-inline: 10px;
      padding-block: 0;
  }
}

@media only screen and (max-width:768px) {
  .breaking-news-container .widget-content a,
  .breaking-news-container .widget-content span { font-size: 0.85rem; font-weight: 600; }
}


/* --- 6. TOP MENU (تحديث شكل الأزرار - نمط RT) --- */

/* 1. الحاوية الرئيسية للشريط */
section.important-sections {
    background-color: var(--color-main-bg);
    padding: 10px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

/* ================================================= */
/* 🛠️ إصلاح القائمة العلوية (LinkList Fix) */
/* ================================================= */

/* هذا الكود يلغي تأثير حاويات بلوجر الداخلية */
/* ويجبر الروابط على الاستجابة لشريط التمرير مباشرة */

#topMenuScrollContainer .section,
#topMenuScrollContainer .widget,
#topMenuScrollContainer .widget-content {
    display: contents !important;
}


/* ============================================================
   🌟 منظومة الستوريز (دوائر الدخول) — S24 STORIES (نمط RT)
   ============================================================ */
.stories-container { padding: 15px 0 25px 0; width: 100%; max-width: 100vw; overflow: hidden; border-bottom: 1px solid var(--border-color); margin-bottom: 25px; direction: rtl; }
.stories-grid { display: flex; gap: 14px; overflow-x: auto; padding: 0 10px; scroll-padding-inline: 15px; cursor: grab; user-select: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; overscroll-behavior: contain; }
.stories-grid::-webkit-scrollbar { display: none; }
.stories-grid:active { cursor: grabbing; }
.story-item { display: flex; flex-direction: column; align-items: center; width: 100px; min-width: 100px; text-decoration: none; }
.story-item img { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--sy-green); padding: 3px; background: var(--bg-card); object-fit: cover; margin-bottom: 8px; transition: 0.3s ease; }
.story-item.story-seen img { border-color: #c9c9c9 !important; opacity: 0.8; }
.story-caption { font-size: 13px; font-weight: 700; color: var(--text-main); white-space: nowrap; }

/* ============================================================
   🎬 النافذة المنبثقة بأسلوب RT
   ============================================================ */
#story-overlay {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: rgba(10,10,10,0.05) !important;
    backdrop-filter: blur(1px) !important; -webkit-backdrop-filter: blur(1px) !important;
    z-index: 2147483647; display: none; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px;
    transition: background 0.3s ease;
}
#story-overlay.active { display: flex; animation: fadeIn 0.3s ease-out; }

.rt-stories-stage {
    position: relative; width: 100%; max-width: 1600px;
    height: 90vh; max-height: 850px; /* 👈 تمت زيادة الطول هنا */
    display: flex; align-items: center; justify-content: center;
    gap: 12px; overflow: hidden;
}

/* البطاقة النشطة */
.stories-modal__wrapper {
    width: 400px; max-width: 85vw; height: 100%; max-height: 820px; /* 👈 تمت زيادة العرض والطول هنا */
    flex-shrink: 0;
    background-color: #0d0d0d; display: flex; flex-direction: column;
    border-radius: 0; overflow: hidden; position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6); z-index: 10;
}

/* بطاقات المعاينة الجانبية */
.rt-peek-card {
    width: 400px; max-width: 85vw; height: 100%; max-height: 820px; /* 👈 تمت زيادة العرض والطول هنا */
    flex-shrink: 0;
    border-radius: 0; overflow: hidden; opacity: 0;
    background-color: #0d0d0d;
    cursor: pointer; transition: opacity 0.3s ease; display: none;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    position: relative;
}

/* طبقة التعتيم فوق البطاقات الجانبية غير الفعالة */
.rt-peek-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5;
    pointer-events: none;
}
@media (min-width: 1150px) { .rt-peek-card { display: flex; } }

/* بطاقات المعاينة البعيدة (المستوى الثاني) */
.rt-peek-card--far {
    width: 400px; max-width: 85vw; height: 100%; max-height: 820px; /* 👈 تمت زيادة العرض والطول هنا */
    opacity: 0; display: none;
}

@media (min-width: 1620px) { .rt-peek-card--far { display: flex; } }

/* كتلة الهيدر + التصنيف + العنوان */
.rt-peek-top-content { padding: 40px 16px 14px; text-align: center; background: #0d0d0d; }
.rt-peek-header-info { display: flex; align-items: center; justify-content: flex-start; gap: 8px; font-weight: bold; font-size: 13px; color: #fff; opacity: 0.85; margin-bottom: 10px; }
.rt-peek-header-info img { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--sy-green); object-fit: cover; }
.rt-peek-brand-tag { font-size: 11px; font-weight: 900; color: #fff; margin-bottom: 10px; letter-spacing: 0.5px; text-align: center; }
.rt-peek-brand-tag .brand-accent { color: var(--sy-green); }
.rt-peek-title { color: #fff; font-size: 18px; font-weight: 900; line-height: 1.5; margin: 0; text-shadow: none; }

/* منطقة الصورة */
.rt-peek-image { flex-grow: 1; background-size: cover; background-position: center; background-color: #000; }

/* زر المزيد + الفوتر */
.rt-peek-cta-wrap { padding: 14px 16px 48px; background-color: #0d0d0d; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg stroke='%23ffffff' stroke-width='1' fill='none' opacity='0.08'%3E%3Ccircle cx='100' cy='100' r='90'/%3E%3Cellipse cx='100' cy='100' rx='90' ry='45'/%3E%3Cellipse cx='100' cy='100' rx='45' ry='90'/%3E%3Cpath d='M10 100h180M100 10v180'/%3E%3Cellipse cx='100' cy='100' rx='90' ry='75'/%3E%3Cellipse cx='100' cy='100' rx='75' ry='90'/%3E%3C/g%3E%3C/svg%3E"); background-position: center 120%; background-size: 140% auto; background-repeat: no-repeat; }

.rt-peek-main-button {
    display: block; width: 100%; background: var(--sy-green); color: #fff;
    text-align: center; padding: 12px; border-radius: 6px;
    font-weight: 900; font-size: 15px; box-sizing: border-box; pointer-events: none;
}
.rt-peek-footer-inline { padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.rt-peek-footer-icons { display: flex; align-items: center; justify-content: center; gap: 18px; }
.rt-peek-action { display: flex; align-items: center; gap: 6px; color: #fff; opacity: 0.9; font-size: 13px; font-weight: 700; }
.rt-peek-action svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
.rt-peek-hashtags-row { display: flex; direction: ltr; justify-content: space-between; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.7); }

/* شريط التقدم */
.story-progress-container { display: flex; gap: 4px; padding: 14px 14px 8px 14px; position: absolute; top: 0; left: 0; right: 0; z-index: 10; flex-wrap: nowrap; }
.story-segment { flex: 1 1 0; min-width: 0; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.35); overflow: hidden; }
.story-segment.is-current { background: rgba(255,255,255,0.5); }
.story-segment-fill { height: 100%; width: 0%; background-color: #ffffff; border-radius: 3px; }

/* زر الإغلاق للكمبيوتر */
.close-story-btn { background: #fff; border: none; color: rgba(0,0,0,0.4); font-size: 32px; cursor: pointer; position: absolute; top: 2px; left: 24px; z-index: 30; width: 33px; height: 33px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }

/* كتلة الهيدر (البطاقة النشطة) */
.story-top-content { padding: 40px 16px 14px; text-align: center; background: #0d0d0d; }
.story-header-info { display: flex; align-items: center; justify-content: flex-start; gap: 8px; font-weight: bold; font-size: 13px; color: #fff; opacity: 0.85; margin-bottom: 10px; }
.story-header-info img { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--sy-green); object-fit: cover; }
.story-brand-tag { font-size: 11px; font-weight: 900; color: #fff; margin-bottom: 10px; letter-spacing: 0.5px; text-align: center; }
.story-brand-tag .brand-accent { color: var(--sy-green); }

/* منطقة الوسائط (البطاقة النشطة) */
.story-image-area { flex-grow: 1; display: flex; align-items: center; justify-content: center; position: relative; background: #000; overflow: hidden; }
.story-image-full { width: 100%; height: 100%; object-fit: cover; }
.story-video-full { width: 100%; height: 100%; object-fit: cover; border: none; }
.story-loader { position: absolute; color: #fff; font-weight: bold; font-size: 13px; }

/* زر كتم/تشغيل الصوت */
.story-mute-btn { position: absolute; top: 12px; left: 12px; width: 32px; height: 32px; background: rgba(0,0,0,0.55); border-radius: 50%; display: none; align-items: center; justify-content: center; color: #fff; z-index: 6; cursor: pointer; border: none; }
.story-mute-btn.show { display: flex; }
.story-mute-btn svg { width: 18px; height: 18px; fill: #fff; }

/* شعار مائي */
.story-video-watermark { position: absolute; bottom: 10px; left: 10px; z-index: 6; display: none; background: rgba(0,0,0,0.5); color: #fff; font-size: 11px; font-weight: 900; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.5px; }
.story-video-watermark.show { display: block; }

/* العنوان وزر المزيد (البطاقة النشطة) */
.stories-card__title { color: #fff; font-size: 18px; font-weight: 900; line-height: 1.5; margin: 0; text-shadow: none; }
.story-cta-wrap { padding: 14px 16px 48px; background-color: #0d0d0d; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg stroke='%23ffffff' stroke-width='1' fill='none' opacity='0.08'%3E%3Ccircle cx='100' cy='100' r='90'/%3E%3Cellipse cx='100' cy='100' rx='90' ry='45'/%3E%3Cellipse cx='100' cy='100' rx='45' ry='90'/%3E%3Cpath d='M10 100h180M100 10v180'/%3E%3Cellipse cx='100' cy='100' rx='90' ry='75'/%3E%3Cellipse cx='100' cy='100' rx='75' ry='90'/%3E%3C/g%3E%3C/svg%3E"); background-position: center 120%; background-size: 140% auto; background-repeat: no-repeat; }

.stories-card__main-button { display: block; width: 100%; background: var(--sy-green); color: #fff; text-align: center; padding: 12px; border-radius: 6px; font-weight: 900; font-size: 15px; text-decoration: none; box-sizing: border-box; }

/* شريط التفاعل */
.story-footer-inline { padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.story-footer-icons { display: flex; align-items: center; justify-content: center; gap: 18px; }
.rt-story-action { display: flex; align-items: center; gap: 6px; cursor: pointer; color: #fff; opacity: 0.9; font-size: 13px; font-weight: 700; background: none; border: none; padding: 0; }
.rt-story-action svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
.rt-story-action.saved svg { fill: var(--sy-green); stroke: var(--sy-green); }

/* الهاشتاغات */
.rt-story-hashtags-row { display: flex; direction: ltr; justify-content: space-between; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.7); }

/* أسهم التنقل */
.nav-story-btn { position: absolute; top: 50%; width: 36px; height: 36px; background: #fff; border: none; border-radius: 50%; color: rgba(0,0,0,0.4); font-size: 18px; cursor: pointer; z-index: 25; backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; }
.nav-story-btn.prev { right: 12px; transform: translateY(-50%); }
.nav-story-btn.next { left: 12px; transform: translateY(-50%); }
.nav-story-btn.is-disabled { opacity: 0.25; pointer-events: none; }
@media (min-width: 1150px) {
    .rt-stories-stage { gap: 40px; }
    /* 👈 تم دفع الأسهم للخارج (230px بدلاً من 190px) لتناسب العرض الجديد */
    .nav-story-btn.prev { right: auto; left: calc(50% + 220px); transform: translate(-50%, -50%); }
    .nav-story-btn.next { left: calc(50% - 220px); transform: translate(-50%, -50%); }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* =========================================================
   🚀 موبايل — التصميم المكدس المطابق لـ RT (أسود - صورة - أسود)
   ========================================================= */
@media only screen and (max-width: 768px) {
    .story-item { width: 90px; min-width: 90px; }
    .story-item img { width: 85px; height: 85px; border-width: 2px; }
    .story-caption { font-size: 13px; }

    /* الحاوية الأساسية (Stage) تملأ الشاشة بالكامل ومثبتة */
    .rt-stories-stage {
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 2147483647 !important;
    }

    /* كرت القصة النشط - العودة لترتيب العناصر عمودياً (Stacked) */
    .stories-modal__wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        background-color: #0d0d0d !important; /* خلفية سوداء مصمتة */
        display: flex !important;
        flex-direction: column !important;
    }

    /* إخفاء تام لبطاقات المعاينة */
    .rt-peek-card, .rt-peek-card--far {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        width: 0 !important;
    }

    /* 1. الهيدر: يأخذ مكانه الطبيعي في الأعلى بخلفية سوداء */
    .story-top-content {
        position: relative !important;
        background: #0d0d0d !important;
        width: 100% !important;
        z-index: 3 !important;
        padding: 45px 16px 14px !important; /* مساحة علوية لشريط التقدم وزر الإغلاق */
        box-sizing: border-box !important;
    }

    /* 2. منطقة الصورة: تتمدد لملء المنتصف فقط بخلفية سوداء */
    .story-image-area {
        position: relative !important;
        width: 100% !important;
        flex-grow: 1 !important; /* تتمدد بمرونة */
        background-color: #000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    /* جعل الصورة تظهر بالكامل دون قص (احتواء) */
    .story-image-full, .story-video-full {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

/* 3. الفوتر (الزر والتفاعلات): يأخذ مكانه في الأسفل مع شبكة الكرة الأرضية */
    .story-cta-wrap {
        position: relative !important;
        width: 100% !important;
        z-index: 3 !important;
        padding: 14px 15px 40px !important;
        box-sizing: border-box !important;
        background-color: #0d0d0d !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg stroke='%23ffffff' stroke-width='1' fill='none' opacity='0.08'%3E%3Ccircle cx='100' cy='100' r='90'/%3E%3Cellipse cx='100' cy='100' rx='90' ry='45'/%3E%3Cellipse cx='100' cy='100' rx='45' ry='90'/%3E%3Cpath d='M10 100h180M100 10v180'/%3E%3Cellipse cx='100' cy='100' rx='90' ry='75'/%3E%3Cellipse cx='100' cy='100' rx='75' ry='90'/%3E%3C/g%3E%3C/svg%3E") !important;
        background-position: center 120% !important;
        background-size: 140% auto !important;
        background-repeat: no-repeat !important;
    }

    /* شريط التقدم يبقى في أعلى الشاشة المطلق */
    .story-progress-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10 !important;
        padding-top: 15px !important;
    }

    /* زر الإغلاق الجديد المصغر والمثبت */
    .close-story-btn {
        position: absolute !important;
        top: 24px !important;
        left: 15px !important;
        width: 25px !important;
        height: 25px !important;
        font-size: 20px !important;
        z-index: 35 !important;
    }

    /* إخفاء أسهم التنقل للموبايل */
    .nav-story-btn {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* شاشات قصيرة جداً (ارتفاعاً) — تقليص الحشوات لإفساح مجال للصورة */
@media only screen and (max-height: 480px) {
    .story-top-content { padding: 35px 16px 8px !important; }
    .story-brand-tag { margin-bottom: 4px !important; }
    #storyFullTitle { font-size: 15px !important; line-height: 1.3 !important; }
    .story-cta-wrap { padding: 8px 15px 16px !important; }
    .story-footer-inline { gap: 4px !important; }
    .rt-story-hashtags-row { display: none; }
}

/* 8. شبكة الأخبار المميزة */
.special-js-grid-wrapper { width: 100%; margin-bottom: 40px; }
.special-grid-title-home { display: none; }
.special-grid-title-catlist { display: none; }
.special-grid-title-catpage { display: none; }
.special-news-grid { display: flex; flex-direction: column; gap: 25px; width: 100%; }
.sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%; }
.grid-item { position: relative; overflow: visible; background: transparent; cursor: pointer; border-radius: 0; height: auto !important; display: flex; flex-direction: column; aspect-ratio: auto !important; }
.grid-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: all 0.4s ease; border-radius: 8px; filter: brightness(100%) contrast(100%); margin-bottom: 10px; display: block; }
.grid-item:hover img { filter: brightness(110%) contrast(1.05); transform: none !important; opacity: 1; box-shadow: none !important; }
.grid-content { position: static; padding: 0; background: transparent; pointer-events: auto; width: 100%; }
.grid-title { color: var(--text-main); font-weight: 900; margin: 0; line-height: 1.4; text-shadow: none; transition: none; }
.grid-item:hover .grid-title { color: var(--text-main) !important; }
.main-story .grid-title { font-size: 20px; }
.small-story .grid-title { font-size: 15px; }
.grid-tag { background:var(--color-red); color: #fff; font-size: 10px; padding: 3px 8px; position: absolute; top: 10px; right: 10px; z-index: 5; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); pointer-events: none; }
.loading-spinner { padding: 20px; text-align: center; color: var(--text-sec); width: 100%; }
#grid-label-config { display: none; }
body#layout #grid-label-config { display: block; border: 2px dashed orange; background: #fff3e0; padding: 10px; margin: 10px 0; }


      /* 9. MAIN CONTENT & SIDEBARS */
/* ================================================= */
/* 🚀 الحل الشامل والنهائي للقوائم الجانبية (S24News) */
/* ================================================= */

/* 1. تنسيق الحاوية الرئيسية (لجميع الأجهزة) */
.main-layout {
    display: flex;
    width: 100%;
    max-width: 1552px;
    margin: 0 auto;
    padding: 0 0px;
    box-sizing: border-box;
    gap: 1rem;
    align-items: flex-start;
}


/* 2. تنسيق منطقة المقالات الوسطى */
/* 📦 العمود الأوسط (الأساس - شاشات الموبايل والتابلت) */
.main-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-grow: 1;
    box-sizing: border-box;
    margin: 0 auto;
    padding-inline: 15px;
    padding-bottom: 50px;
    transition: padding 0.3s ease;
}
/* ================================================= */
/* 🚀 تنسيقات القوائم الجانبية (الشامل والنهائي) */
/* الهيكل (الثبات) + الجمالية (الأزرار والأيقونات) */
/* ================================================= */

/* 1. التنسيق الهيكلي (للكمبيوتر فقط > 1023px) */


/* 2. ضبط المسافات بين الأدوات الجانبية */
/* تنسيق الأدوات (Widgets) داخل الأعمدة الجانبية بنمط RT */
.main-layout__column .widget {
    margin-bottom: 35px !important;
    padding: 0 !important;
}

#LinkList1 {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

/* 3. تحسين عناوين الأدوات (Widgets Titles) */
.main-layout__column h3.title, .sidebar-left h3.title, .main-layout__column h3.title {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: var(--text-sec);
    text-transform: uppercase;
    margin-bottom: 15px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 5px;
}

/* 4. تنسيق القوائم والروابط (تحويلها لأزرار تفاعلية) */
.main-layout__column ul, .sidebar-left ul, .main-layout__column ul {
    list-style: none; padding: 0; margin: 0; width: 100%
}

.main-layout__column li, .sidebar-left li {
    margin-bottom: 5px; /* مسافة بسيطة بين الروابط */
}

.main-layout__column a, .sidebar-left a, .main-layout__column a {
    display: flex !important;
    align-items: center;
    gap: 0; /* المسافة ستأتي من الأيقونة */

    font-weight: bold;
    color: var(--text-main);
    font-size: 15px;

    /* جعل الرابط يبدو كزر */
    padding: 12px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    text-decoration: none;
    background-color: transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* تأثير التمرير (Hover) الاحترافي */
.main-layout__column a:hover, .sidebar-left a:hover, .main-layout__column a:hover {
    background-color: var(--color-main-nav-toggler-active-bg);
    border-color: transparent;
    opacity: 1; /* التأكد من عدم الشفافية */
}

/* 5. ضبط الأيقونات والمربعات الملونة داخل القائمة */
.sy-sidebar-icon {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-left: 12px; /* مسافة بين الأيقونة والنص */
}
.sy-sidebar-icon svg { width: 22px; height: 22px; fill: var(--text-main); }

.sy-color-box {
    width: 22px; height: 22px;
    border-radius: 4px;
    display: inline-block;
    margin-left: 12px; /* مسافة بين المربع والنص */
    flex-shrink: 0;
}

/* 6. تحسين شكل القائمة المنسدلة (General Info) */
.dropdown-btn {
    background-color: var(--color-white-f7);
    margin-bottom: 5px;
}


/* إصلاح مشكلة المسافة المضاعفة (الفراغات الوهمية) في الحاوية الرئيسية */
.main-layout > .section,
.main-layout > #Ad_Under_Post {
    display: none !important;
}


/* ========================================= */
/* إصلاحات خاصة لصفحات (الأكثر قراءة + المحفوظات) */
/* ========================================= */

body.live-page-mode .main-layout__column,
body.live-page-mode #force-left-sidebar,
body.most-read-page .main-layout__column,
body.most-read-page .main-layout__column,
body.most-read-page #force-left-sidebar {
    flex-grow: 0 !important;
    width: 312px !important;
    min-width: 312px !important;
    max-width: 312px !important;
}


      /* 10. POST CARD */

/* =========================================================
   10. POST CARD (النسخة الموحدة والمصححة)
   الهدف: جعل الحاوية الأم شفافة وتسمح بظهور القوائم المنسدلة،
   بينما العنصر الداخلي (.post.hentry) هو من يحمل الشكل الجمالي.
   ========================================================= */

.post-outer {
    position: relative;
    z-index: 1;
    transition: z-index 0.2s ease;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;

    /* السماح لأدوات المشاركة بالظهور خارج إطار البطاقة */
    overflow: visible !important;

    /* إزالة أي خلفيات أو حواف لأنها ستطبق على العنصر الداخلي */
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* رفع طبقة المقال عند المرور فوقه حتى لا تتغطى القوائم بمقال آخر */
.post-outer:hover {
    z-index: 50;
}

/* العنصر الداخلي هو من يحمل التصميم الجمالي (الألوان والانحناء) */
.post.hentry {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* إضافة الظل النظيف هنا */
}


.post {
    display: flex;
    flex-direction: column;
}

h1.post-title a:hover,
h3.post-title a:hover {
    color: var(--text-main);
}

/* تنسيق جسم المقال الأساسي */
.post-body {
    order: 2;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 0;
    color: transparent;
}
.post-body a {display: inline; cursor: pointer; color: var(--sy-green); text-decoration: none;font-weight: 500;transition: color 0.3s ease;}
.post-body a:hover {opacity: 0.8; text-decoration: none;}


/* جدول محتويات مقالات الموسوعة */
.s24-toc {
  display: flow-root;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--sy-card-radius);
  padding: 16px 20px;
  margin: 20px 0 25px;
  font-family: var(--font-main);
}
.s24-toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 900;
  font-family: var(--font-title);
  color: var(--sy-navy);
  font-size: 16px;
  margin-bottom: 10px;
}
[data-theme="dark"] .s24-toc-header { color: var(--sy-green); }
.s24-toc-toggle {
  background: none;
  border: none;
  color: var(--sy-green);
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
  padding: 0;
}
.s24-toc-list {
  margin: 0;
  padding-inline-start: 22px;
  color: var(--text-main);
}
.s24-toc-list a,
.s24-toc-back {
  color: var(--text-main) !important;
  text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  .s24-toc-list a,
  .s24-toc-back {
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .s24-toc-list a:hover,
  .s24-toc-back:hover {
    color: var(--sy-green) !important;
  }
}
.s24-toc-back {
  display: block;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  margin: 8px 0 22px;
}
#s24-article-toc,
.post-body h2 {
  scroll-margin-top: var(--sticky-top-offset);
}

/* إخفاء الصورة المكررة أصبح يتم عبر JS بفحص فعلي للتطابق — راجع سكربت "إصلاح صور المقالات" */


/* =========================================================
   💬 S24News Comments (Absolute Avatar + Bidi Fix) - النسخة المحدثة
   ========================================================= */
.comments, #comments, .comments-content, .comment-form { background-color: transparent !important; color: var(--text-main) !important; }
.comments .comment-content, .comments p, .comments .comment-header { color: var(--text-main) !important; }
.comments a { color: var(--sy-green) !important; }
body #comments .comment { position: relative !important; display: block !important; padding-right: 55px !important; margin-bottom: 20px !important; clear: both; }
body #comments .avatar-image-container { position: absolute !important; top: 0 !important; right: 0 !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; overflow: hidden; margin: 0 !important; padding: 0 !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 2; }
body #comments .avatar-image-container img { width: 100% !important; height: 100% !important; object-fit: cover !important; border: none !important; }
body #comments .comment-block { background-color: var(--cmt-bubble-bg); border: 1px solid var(--cmt-bubble-brd); border-radius: 18px; padding: 12px 16px; display: block !important; width: fit-content; min-width: 250px; max-width: 100% !important; margin: 0 !important; position: relative; transition: background-color 0.3s ease, border-color 0.3s ease; }
body #comments .comment-header { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 4px 12px !important; margin-bottom: 8px !important; direction: rtl !important; }
body #comments .comment-header .user, body #comments .comment-header .user a { font-style: normal !important; display: inline-block !important; unicode-bidi: isolate !important; font-size: 14px !important; font-weight: 900 !important; color: var(--sy-green) !important; margin: 0 !important; }
body #comments .comment-header .datetime { display: inline-block !important; unicode-bidi: isolate !important; font-size: 12px !important; font-weight: normal !important; color: var(--text-sec) !important; margin: 0 !important; }
body #comments .comment-thread ol { list-style: none; padding: 0; margin: 0; }
body #comments .comment-thread .comment-thread { margin-right: 0 !important; padding-right: 15px; border-right: 2px solid var(--cmt-thread-line); margin-top: 15px; }
body #comments .comment-actions { display: flex; flex-direction: row; gap: 20px; margin-right: 15px; margin-bottom: 15px; margin-top: 5px; }
body #comments .comment-actions a, body #comments .comment-reply-link { font-size: 13px; font-weight: 800; color: var(--cmt-action-text); text-decoration: none; cursor: pointer; transition: color 0.3s ease; }
body #comments .comment-actions a:hover { color: var(--sy-green) !important; text-decoration: underline; }
.comment-form button, .comment-form input[type="button"], .comment-form input[type="submit"], button.submit-button { background-color: var(--sy-green) !important; border: 1px solid var(--sy-green) !important; color: #ffffff !important; border-radius: 4px; font-weight: bold; transition: all 0.3s ease; padding: 8px 15px; }
.comment-form button:hover, .comment-form input[type="button"]:hover, .comment-form input[type="submit"]:hover { background-color: #5ea000 !important; border-color: #5ea000 !important; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
#comment-editor, .comment-form { width: 100% !important; max-width: 100% !important; margin-top: 15px; display: block !important; clear: both; }
.thread-toggle, .thread-chrome.thread-collapsed, .comments .continue, .paging-control-container, .loadmore, .loadmore-wrap, .thread-load-more, #comment-pager, .comment-pagination { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; }
#comment-editor { filter: hue-rotate(-130deg); transition: filter 0.3s ease; }
[data-theme="dark"] #comment-editor { filter: invert(1) hue-rotate(50deg) !important; }

/* ========================================================= */


/* =========================================================
   تنسيق الفوتر ونظام المشاركة (النسخة النهائية المصححة - أفقي)
   ========================================================= */


.post.hentry {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column; /* لضمان نزول الفوتر للأسفل */
}

/* 2. الهيكل الرئيسي للفوتر (فرض الترتيب الأفقي) */
.rt-footer {
    display: flex !important;
    flex-direction: row !important; /* 🟢 السر هنا: إجبار الفوتر ليكون أفقياً */
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 25px;
    background-color: var(--color-content-block-bg);
    border-top: 1px solid var(--border-color);
    box-sizing: border-box;
    margin-top: auto;
    min-height: 60px;
    order: 10;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

/* 3. حاوية الأزرار اليمنى (حفظ، مشاهدات، نسخ) */
.rt-footer-right {
    display: flex !important;
    flex-direction: row !important; /* 🟢 إجبار الأزرار لتكون بجانب بعضها */
    align-items: center !important;
    gap: 20px !important;
}

/* 4. المجموعات الصغيرة (الأيقونة + النص) */
.rt-icon-group {
    display: inline-flex !important;
    flex-direction: row !important; /* 🟢 إجبار الأيقونة والنص أفقياً */
    align-items: center !important;
    gap: 6px;
    color: var(--color-grey-65);
    font-weight: bold;
    font-size: 14px;
    transition: color 0.2s;
    cursor: pointer !important;
}

.rt-icon-group svg { width: 22px; height: 22px; }

.rt-icon-group:hover { color: var(--text-main); }
.rt-icon-group.copy-btn:hover { color: #8e44ad; }
.rt-icon-group.save-btn:hover { color: var(--sy-green); }

.rt-copy-link {
    color: #2980b9;
    font-size: 13px;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer !important;
}

/* 5. قائمة المشاركة المنبثقة (الأيقونات الملونة) */
.share-btn-wrapper {
    position: relative;
    display: inline-flex !important;
    align-items: center;
}

.mini-share-menu {
    display: none;
    position: absolute;
    bottom: 35px; /* تم رفعها قليلاً لتتجاوز الفوتر */
    right: -5px;
    left: auto;
    transform: none;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 6px !important;
    z-index: 9999 !important; /* 🟢 هامة جداً لمنع التداخل مع الصندوق السفلي */
    white-space: nowrap;
    align-items: center;
}

.mini-share-menu.active {
    display: flex !important;
    flex-direction: row !important; /* 🟢 إجبار أيقونات المشاركة أن تكون أفقية */
    animation: popUp 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.mini-share-menu::after {
    display: none !important;
}

/* 6. تنسيق أيقونات المشاركة (التبديل بين الأسود والأبيض) */
.share-icon-link {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: var(--color-black);
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    cursor: pointer !important;
}

.share-icon-link svg {
    width: 14px;
    height: 14px;
    fill: #fff;
    transition: fill 0.3s ease;
}

/* 🌑 الوضع الليلي: أبيض */
[data-theme="dark"] .share-icon-link {
    background-color: #fff !important;
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}

[data-theme="dark"] .share-icon-link svg {
    fill: #000 !important;
}

/* هوفر (مشترك) */
.share-icon-link:hover {
    opacity: 0.9;
    transform: translateY(-3px);
}

.si-fb, .si-x, .si-wa, .si-tg, .si-li,.si-vk, .si-more {
    background-color: #000;
}

/* حركة الظهور */
@keyframes popUp {
    from { opacity: 0; transform: translateY(10px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 10. إقرأ المزيد */
.sy-related-posts-container { margin-top: 1px; padding-top: 20px; border-top: 1px solid var(--border-color, #eee); width: 100%; box-sizing: border-box; }
.sy-related-main-title { padding-right: 10PX; font-family: 'IBM Plex Sans Arabic', sans-serif !important; font-size: 20px; font-weight: 900; color: var(--text-main, #000); margin-bottom: 20px; position: relative; display: inline-block; }
.sy-related-grid { padding-right: 10px; padding-left: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; direction: rtl; }
.sy-related-card { background: var(--bg-card, #fff); border: 1px solid var(--border-color, #eee); border-radius: 8px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; }
.sy-related-card:hover { transform: none; box-shadow: none; border-color: var(--border-color, #eee); }
.sy-related-thumb { width: 100%; height: 160px; overflow: hidden; position: relative; flex-shrink: 0; }
.sy-related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sy-related-info { padding: 15px; flex-grow: 1; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; }
.sy-related-card-title { font-family: 'Readex Pro', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--text-main, #333); margin: 0; transition: color 0.3s ease; }
.sy-related-card:hover .sy-related-card-title { color: #555555; }


/* 11. MAINTENANCE V2 - DESIGN */
/* 11. MAINTENANCE V2 - DESIGN (متوافق مع ألوان القالب تلقائياً) */
#maintenance-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 🟢 استخدام لون خلفية الموقع مباشرة (سيكون فضي أنيق في النهار وداكن في الليل) */
    background-color: var(--bg-body);
    z-index: 999999999;
    display: none; /* مخفي افتراضياً */
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    color: var(--text-main);
    font-family: inherit;
    padding: 20px; overflow: hidden;
}

/* تأثيرات الإضاءة الخلفية الخضراء الخفيفة جداً */
#maintenance-overlay::before, #maintenance-overlay::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.15; z-index: -1;
}
#maintenance-overlay::before { width: 300px; height: 300px; background: var(--sy-green); top: -50px; left: -50px; }
#maintenance-overlay::after { width: 400px; height: 400px; background: var(--sy-green); bottom: -100px; right: -100px; }

/* البطاقة المركزية */
.m-card {
    background-color: var(--bg-card);
    padding: 40px; border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* ظل ناعم جداً */
    max-width: 600px; width: 100%; animation: floatUp 0.8s ease-out;
}

.m-icon-box {
    width: 80px; height: 80px; background: rgba(119, 189, 29, 0.1); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
    border: 1px solid rgba(119, 189, 29, 0.3);
}
.m-icon-box svg { width: 40px; height: 40px; fill: var(--sy-green); animation: spinSlow 15s linear infinite; }

.m-title {
    font-size: 2.5rem; font-weight: 900; margin-bottom: 10px;
    color: var(--text-main);
}

.m-desc { font-size: 1.1rem; color: var(--text-sec); line-height: 1.6; margin-bottom: 30px; font-weight: bold; }

/* العداد */
.m-timer { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; direction: ltr; }

.m-time-unit {
    background-color: var(--bg-body);
    padding: 15px; border-radius: 12px; min-width: 80px;
    border: 1px solid var(--border-color);
    display: flex; flex-direction: column; align-items: center;
}

.m-number { font-size: 2rem; font-weight: bold; color: var(--text-main); font-family: sans-serif; }
.m-label { font-size: 0.85rem; color: var(--sy-green); text-transform: uppercase; margin-top: 5px; font-weight: bold; }

/* أزرار التواصل */
.m-social { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.m-social a {
    width: 40px; height: 40px; border-radius: 50%;
    background-color: var(--bg-body);
    border: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s; color: var(--text-main);
}
.m-social a:hover {
    background-color: var(--sy-green);
    color: #fff;
    border-color: var(--sy-green);
    transform: translateY(-3px);
}
.m-social svg { width: 18px; height: 18px; fill: currentColor; }

@keyframes spinSlow { 100% { transform: rotate(360deg); } }
@keyframes floatUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
body.maintenance-active { overflow: hidden; }


/* عند تفعيل زر القائمة: */

/* 1. العمود الأيمن: اجعله شفافاً تماماً ولكن ابقِ مكانه محجوزاً */
.main-layout.sidebar-hidden #main-right-sidebar {
    opacity: 0 ;           /* شفافية كاملة (يختفي عن العين) */
    pointer-events: none ; /* غير قابل للنقر (الروابط لن تعمل) */
    visibility: visible ;  /* نبقيه مرئياً للمتصفح ليحجز المساحة */
    /* نؤكد على العرض الثابت لكي لا يتقلص */
    width: 250px ;
    flex-basis: 250px ;
    flex-shrink: 0;
}

/* 2. العمود الأوسط: نمنعه من أي تغيير أو حركة */
.main-layout.sidebar-hidden .main-container {
    /* لا نغير أي شيء في العرض، نتركه كما هو في الحالة الطبيعية */
    flex-grow: 1 ;
}

/* 3. العمود الأيسر: تثبيت مكانه */
.main-layout.sidebar-hidden .main-layout__column {
    /* لا نغير شيئاً، سيبقى في مكانه لأن العمود الأيمن "الشبح" يزاحمه */
}


/* تنسيق التاغات الجديد (Custom Tags) */
.custom-post-tags {
    /* الترتيب: أهم سطر لحل مشكلة الظهور في الأعلى */
    order: 3 ;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 25px 0 0 0;
    padding: 20px 25px;
    border-top: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
    background-color: var(--bg-card);
}

.custom-post-tags a {
    display: flex;
    box-shadow: inset 0 0 0 .063rem rgb(98 98 98) currentcolor ;
    padding: .30rem;
    border: 1px solid currentColor;
    color: var(--color-grey-65);
    font-size: .7rem;
    font-weight: normal;
    text-decoration: none;
    border-radius: .25rem;
    background-color: var(--bg-card);
    outline: none;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
    white-space: nowrap;

}

.custom-post-tags a:hover,
.post-labels a:hover {
    border-color: var(--sy-green);
    color: var(--sy-green);
    background-color: var(--bg-body);
}


/* --- تنسيق قائمة الأقسام المختارة (8 أسطر) --- */
.custom-category-list-wrapper {
    width: 100%;
    margin-bottom: 40px;
    background: var(--bg-card);
    padding: 13px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-sizing: border-box;
}

#custom-category-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.cat-list-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-sec);
    font-size: 14px;
}

.custom-cat-item {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    margin-bottom: 1px;
    padding: 15px 0px 15px 0px;
    border-bottom: 1px solid var(--border-color);
    gap: 15px;
}

.custom-cat-item[data-cat-last="true"] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* النصوص (يمين) */
.cat-item-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* شريط التسمية واللون */
.cat-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: bold;
    color: var(--text-sec);
    text-decoration: none;
}

.cat-label-row:hover {
    color: var(--sy-green);
}

.cat-color-box {
    width: 24px;
    height: 24px;
    border-radius: 2px;
    display: inline-block;
}

/* العنوان */
.cat-item-title {
    font-size: clamp(15px, 5vw, 18px);
    font-weight: 900;
    line-height: 1.3;
    margin: 0;
    color: var(--text-main);
}
.cat-item-title a:hover {
    color: var(--text-main);
}

/* الصورة (يسار) */
.cat-item-img {
    width: 190px; /* عرض الصورة */
    height: 125px; /* ارتفاع الصورة */
    flex-shrink: 0;
    border-radius: 8px ;
    -webkit-border-radius: 8px ;
    overflow: hidden;
    margin-right: 0;
}

.cat-item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.4s ease;
    filter: brightness(100%);
    border-radius: 8px
}

.cat-item-img:hover img {
    transform: none;
    opacity: 1;
    filter: brightness(110%);
}

/* إخفاء قائمة الإعدادات الخام (النقاط والأسماء) */
#hidden-config-area,
#custom-cat-config-list,
#s24-story-labels-config {
    display: none ;
}

/* --- تنسيق قائمة الأقسام للموبايل فقط ---
   ملاحظة: التنسيقات الفعلية موجودة ضمن القسم العام
   "📱 3. شاشات الموبايل الصغيرة (أقل من 600px)" لاحقاً في هذا الملف
   (قواعد .cat-item-img / .cat-item-title / .custom-cat-item) --- */


/* 💾 تنسيقات صفحة الأخبار المحفوظة (Saved News) */

/* 1. ضبط العرض ليطابق صفحة الأكثر قراءة (720px) */
body.saved-page-mode .main-container { max-width: 720px !important; margin: 0 auto !important; width: 100% !important; padding: 0 !important; flex-grow: 0 !important; }

/* تنسيق الصور داخل المحفوظات */
body.saved-page-mode .post-body img, body.saved-page-mode .post-body .separator img { width: 100% !important; height: auto !important; max-height: 405px !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; border-radius: 0 !important; margin-bottom: 15px !important; }

/* 2. تنسيق زر الحذف السريع (علامة X) */
/* زر الحذف السريع (علامة X) - لون أخضر */


/* 3. تلوين أيقونة الحفظ بالأخضر عند التفعيل */
.rt-icon-group[title="حفظ"].saved svg { fill: var(--sy-green) !important; stroke: var(--sy-green) !important; transition: all 0.3s ease; }

/* 4. تنسيقات إضافية للقائمة (احتياطية) */
.saved-list-ul { list-style: none ; padding: 0; margin: 0 ; }
.saved-item.text-only { display: flex; justify-content: space-between; align-items: center; padding: 15px; margin-bottom: 10px; border-bottom: 1px solid #eee; background: #fff; transition: background 0.2s; }
.saved-item.text-only:hover { background: #f9f9f9; }

/* 👁️ إخفاء المشاهدات في (المحفوظات + الأكثر قراءة) */
body.saved-page-mode .rt-footer .rt-icon-group[title="مشاهدات"], body.most-read-page .rt-footer .rt-icon-group[title="مشاهدات"] { display: none !important; }


/* 1. إخفاء قسم أيقونات الموبايل الجديد افتراضياً على الكمبيوتر */
#Mobile_Social_Section { display: none; }


/*  1. تنسيق العناوين (لجميع الصفحات - يمين دائماً)  */
h3.post-title, .post-title, .post-title a { order: 1; font-size: 24px; font-weight: 900; color: var(--text-main); line-height: 1.4; margin: 5px 0 8px 0; text-align: right; text-decoration: none; display: block; cursor: pointer; width: 100%; padding: 15px 8px; box-sizing: border-box; }

/* 🖼️ إصلاح الصور: إظهار الصورة الأولى فقط في الرئيسية وإخفاء الباقي */


body.item-page .post-body .separator {
    display: block !important;
    text-align: center;
    width: 100% !important;
    margin: 0 !important;
}


/* 5. حماية الصفحات الخاصة (الأكثر قراءة والمحفوظات) */
body.most-read-page .post-body img,
body.saved-page-mode .post-body img,
body.most-read-page .post-body .separator,
body.saved-page-mode .post-body .separator {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}


/* تخصيص المشاركة المميزة */
.FeaturedPost{order:-10!important;margin-bottom:30px!important;width:100%!important}.FeaturedPost>h3.title,.FeaturedPost>.title{display:none!important}.FeaturedPost .widget-content,.FeaturedPost article{display:block!important;background-color:var(--bg-card)!important;border:0 solid var(--border-color)!important;border-radius:8px!important;position:relative!important;width:100%!important;box-sizing:border-box!important;margin:0!important;padding:0!important;overflow:hidden!important;transition:box-shadow .3s!important}.FeaturedPost .widget-content:hover,.FeaturedPost article:hover{box-shadow:0 5px 15px rgba(0,0,0,.08)!important}.FeaturedPost img,.FeaturedPost .post-image-link,.FeaturedPost .summary-img,.FeaturedPost .post-summary-image-container,.FeaturedPost .image-wrap,.FeaturedPost .thumbnail,.FeaturedPost .post-snippet,.FeaturedPost .summary-snippet{display:none!important;visibility:hidden!important;width:0!important;height:0!important;margin:0!important;padding:0!important}.FeaturedPost .post-info,.FeaturedPost .summary-content,.FeaturedPost .post-summary{width:100%!important;padding:20px!important;display:block!important;text-align:right!important;box-sizing:border-box!important;margin:0!important;border:none!important;float:none!important}.FeaturedPost h3.post-title,.FeaturedPost .post-title,.FeaturedPost h3{font-size:18px!important;font-weight:900!important;margin:0!important;line-height:1.5!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.FeaturedPost h3.post-title a,.FeaturedPost .post-title a,.FeaturedPost h3 a{color:var(--text-main)!important;text-decoration:none!important}

/* تخصيص المشاركة المثبتة */
.pinned-hero-card{display:flex;flex-direction:row;background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;overflow:hidden;text-decoration:none;align-items:stretch;width:100%!important;box-sizing:border-box;position:relative;margin-bottom:30px}.hero-img{width:190px;height:125px;flex:0 0 190px;background-size:cover;background-position:center}.hero-content{width:calc(100% - 190px);padding:15px 20px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:right;box-sizing:border-box;min-width:0;position:relative}.hero-title{font-size:18px;font-weight:900;color:var(--text-main);margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #HTML6 .title,#HTML6 h2{display:none!important}


/* ---------------------------------------------------------
   ب. صفحة المقالة (Item Page) - النسخة النظيفة (Clean Version)
   الهدف: تطبيق نمط "الطقس" بأقل قدر من !important
   --------------------------------------------------------- */

/* 1. ضبط الحاويات لضمان تمدد الصورة للأطراف */
body.item-page .main-layout .main-container {
    padding: 0;
    width: 100%;
    max-width: 864px;
    margin: 0 auto;
}

body.item-page .post-body {
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: visible;
    font-size: 19px;
    color: var(--text-main);
    line-height: 1.8;
}

/* 2. التعامل مع حاوية بلوجر (separator) */
/* نستخدم !important هنا للتغلب على الستايل السطري الذي يضيفه بلوجر تلقائياً */
body.item-page .post-body .separator {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: block;
    text-align: center;
    pointer-events: auto ;
    cursor: default ;
}

body.item-page .post-body .separator a {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block;
}


/* الإعلانات */
.ad-banner-wrapper{display:block;width:100%;max-width:864px;margin:20px auto 40px auto;text-align:center;position:relative;overflow:hidden;border-radius:8px;background:transparent}.ad-banner-wrapper img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;margin:0 auto;border-radius:8px;border:none!important;transition:opacity .3s ease-in-out}#in-article-ad-wrapper{display:block;width:100%;max-width:100%;margin:30px auto;text-align:center;clear:both;overflow:hidden;background:transparent}.ad-under-post-wrapper{width:100%;margin:25px 0;text-align:center;display:flex;justify-content:center;align-items:center;clear:both;background:transparent}.ad-under-post-wrapper .widget{margin:0;padding:0;width:100%}.ad-banner-wrapper ins.adsbygoogle,#in-article-ad-wrapper ins.adsbygoogle,.ad-under-post-wrapper ins.adsbygoogle{display:block!important;margin:0 auto!important;max-width:100%!important}body:not(.item-page) .ad-under-post-wrapper,body.most-read-page .ad-under-post-wrapper,body.saved-page-mode .ad-under-post-wrapper,body:not(.item-page) #in-article-ad-wrapper{display:none!important}


/* تنسيق أداة التواصل الاجتماعي العلوية */
.top-social-icons .widget { margin: 0; padding: 0; }
.top-social-icons .widget-content { margin: 0; padding: 0; border: none; }
.top-social-icons ul.social-list-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 20px; /* المسافة بين الأيقونات */
}
.top-social-icons li { margin: 0; padding: 0; }
.top-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    opacity: 0.8;
    transition: all 0.3s ease;
}
.top-social-icons a:hover { opacity: 1; color: var(--sy-green); }
.top-icon { width: 20px; height: 20px; fill: currentColor; }
/* إخفاء النص لتبقى الأيقونة فقط */
.social-text-hidden { display: none; }


/* 🟢 [sy-static-box] 🟢 */

/* 1. الصندوق الخارجي */
.sy-static-box {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 30px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s, border-color 0.3s; /* نعومة التحويل */
}

/* 2. رأس القائمة (العنوان) */
.sy-static-header {
    background-color: #f9f9f9;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.3s, border-color 0.3s;
}

/* حاوية اللوجو (ثابتة في الوضعين) */
.sy-logo-box {
    width: 32px;
    height: 32px;
    background-color: var(--sy-green);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 3px;
}

.sy-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1); /* يجعل اللوجو أبيض */
}

/* نص العنوان */
.sy-header-title {
    font-size: 18px;
    font-weight: 900;
    color:var(--color-black);
    margin: 0;
    line-height: 1;
    transition: color 0.3s;
}

/* 3. جسم القائمة */
.sy-static-body {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

/* رابط الخبر */
a.sy-news-link {
    display: block !important;
    width: 100%;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.5;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* تأثير المرور (الوضع النهاري) */
a.sy-news-link:hover {
    background-color: #f7f9f7; /* خلفية خفيفة جداً */
    color:var(--color-black);
    padding-right: 15px !important; /* تثبيت الحركة */
}

a.sy-news-link:last-child {
    border-bottom: none;
}

/* 4. زر المزيد (ثابت أخضر في الوضعين) */
.sy-more-btn {
    display: block;
    width: calc(100% - 30px);
    margin: 15px auto;
    background-color: #77bd1d !important;
    color: #fff !important;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: opacity 0.3s;
}
.sy-more-btn:hover {
    opacity: 0.9;
}

/* ========================================= */
/* 🌑 إعدادات الوضع الليلي (Dark Mode Overrides) */
/* ========================================= */

[data-theme="dark"] .sy-static-box {
    background-color: #1e1e1e; /* خلفية الصندوق غامقة */
    border-color: #333;        /* الحدود غامقة */
}

[data-theme="dark"] .sy-static-header {
    background-color: #252525; /* خلفية العنوان أغمق قليلاً */
    border-bottom-color: #333;
}

[data-theme="dark"] .sy-header-title {
    color: #ffffff; /* العنوان يصبح أبيض */
}

[data-theme="dark"] a.sy-news-link {
    color: #e0e0e0; /* النص رمادي فاتح */
    border-bottom-color: #333; /* الفواصل غامقة */
}

[data-theme="dark"] a.sy-news-link:hover {
    background-color: #2c2c2c; /* خلفية هوفر غامقة */
    color: #fff;               /* النص يصبح أبيض ناصع */
}
/* 🔴 [sy-static-box] 🔴 */


/* 🟢 [ استطلاع الرأي (poll__wrapper)] 🟢 */

/* ========================================================= */
/* 🗳️ نظام استطلاع الرأي المدمج (Poll System + Skeleton) */
/* ========================================================= */

/* 1. الحاوية الرئيسية */
.poll__wrapper {
    background-color: var(--bg-card, #fff);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06);
    padding: 20px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color, #eee);
    direction: rtl;
    text-align: right;
    position: relative;
    min-height: 380px;
    contain: content;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ========================================= */
/* 💀 تأثير التحميل (Skeleton Loading) */
/* ========================================= */
.poll-skeleton-container {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    direction: rtl;
    width: 100%;
    box-sizing: border-box;
}

@keyframes skeleton-loading {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.sk-shape {
    background: #e0e0e0;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite linear;
    border-radius: 4px;
}

.sk-title { height: 20px; width: 70%; margin-bottom: 10px; }
.sk-row { display: flex; align-items: center; gap: 10px; }
.sk-circle { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.sk-text { height: 14px; width: 40%; }
.sk-captcha { height: 40px; width: 100%; max-width: 300px; border-radius: 3px; }
.sk-btn { height: 45px; width: 100%; margin-top: 10px; border-radius: 4px; }

/* ========================================= */
/* 📝 محتوى الاستطلاع الفعلي */
/* ========================================= */
.poll__title {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-main, #000);
    margin-bottom: 20px;
    line-height: 1.5;
    min-height: 54px;
    transition: color 0.3s ease;
}

.poll__options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.poll-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border-radius: 6px;
    transition: background 0.2s, box-shadow 0.2s;
    border: 1px solid transparent;
    justify-content: flex-start;
}

.poll-label:hover {
    background-color: var(--hover-bg, #f9f9f9);
}

.poll-text {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-main, #333);
    order: 2;
    transition: color 0.3s ease;
}

/* تنسيق أزرار الراديو */
.poll-label input[type="radio"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border: 2px solid #ccc !important;
    border-radius: 50%;
    background-color: #fff;
    margin-left: 15px;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
    transition: all 0.2s ease-in-out;
}

.poll-label input[type="radio"]:hover {
    border-color: #999 !important;
    box-shadow: 0 0 0 3px rgba(109, 178, 0, 0.1) !important;
}

.poll-label input[type="radio"]:focus-visible {
    outline: 2px solid var(--sy-green) !important;
    outline-offset: 2px !important;
}

/* ✅ ألوان الخيارات 1-6 (فاتحة وشفافة) */

/* الخيار 1: أخضر فاتح */
.poll-label:nth-of-type(1) input[type="radio"]:checked {
    background-color: #9bc34a !important;
    border-color: #9bc34a !important;
    box-shadow: inset 0 0 0 4px #fff !important;
}

/* الخيار 2: أحمر فاتح */
.poll-label:nth-of-type(2) input[type="radio"]:checked {
    background-color: #ff6b6b !important;
    border-color: #ff6b6b !important;
    box-shadow: inset 0 0 0 4px #fff !important;
}

/* الخيار 3: برتقالي فاتح */
.poll-label:nth-of-type(3) input[type="radio"]:checked {
    background-color: #ffa500 !important;
    border-color: #ffa500 !important;
    box-shadow: inset 0 0 0 4px #fff !important;
}

/* الخيار 4: أزرق فاتح */
.poll-label:nth-of-type(4) input[type="radio"]:checked {
    background-color: #66ccff !important;
    border-color: #66ccff !important;
    box-shadow: inset 0 0 0 4px #fff !important;
}

/* الخيار 5: بنفسجي فاتح */
.poll-label:nth-of-type(5) input[type="radio"]:checked {
    background-color: #d99fef !important;
    border-color: #d99fef !important;
    box-shadow: inset 0 0 0 4px #fff !important;
}

/* الخيار 6: تركواز فاتح (بدل الأحمر المكرر) */
.poll-label:nth-of-type(6) input[type="radio"]:checked {
    background-color: #00bfa5 !important;
    border-color: #00bfa5 !important;
    box-shadow: inset 0 0 0 4px #fff !important;
}

/* الكابشا والزر */
.fake-recaptcha {
    background: #f9f9f9;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    width: 100%;
    max-width: 300px;
    padding: 10px 15px;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.captcha-box {
    width: 24px; height: 24px; border: 2px solid #c1c1c1;
    border-radius: 2px; background: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
    user-select: none;
}

.captcha-box:hover {
    border-color: #999;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

.poll__submit-button {
    width: 100%; padding: 12px;
    background-color: #9bc34a; color: #fff;
    border: none; border-radius: 4px;
    font-size: 16px; font-weight: bold;
    cursor: pointer; transition: opacity 0.3s, transform 0.2s;
}

.poll__submit-button:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.poll__submit-button:focus-visible {
    outline: 2px solid #9bc34a;
    outline-offset: 2px;
}

.poll__submit-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.5;
}

/* ========================================= */
/* 📊 النتائج والصفحات */
/* ========================================= */
.poll__results {
    display: none;
    flex-direction: column;
    gap: 20px;
    padding-top: 10px;
}

#results-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.result-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.result-label {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-main);
    text-align: right;
    transition: color 0.3s ease;
}

/* ✅ إصلاح: تغيير direction: ltr إلى flex-direction: row-reverse */
.result-bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-direction: row-reverse;
}

.result-stats {
    display: flex;
    gap: 8px;
    font-size: 14px;
    font-weight: bold;
    color: var(--text-main);
    min-width: 80px;
    transition: color 0.3s ease;
}

.stat-count { color: #555; }
.stat-perc { color: var(--color-black); }

.progress-bg {
    flex-grow: 1;
    height: 8px;
    background-color: #eee;
    border-radius: 4px;
    overflow: hidden;
    direction: rtl;
    transition: background-color 0.3s ease;
}

.progress-bar {
    height: 100%;
    background-color: #9bc34a;
    width: 0%;
    transition: width 1s ease-in-out;
}

/* ✅ ألوان أشرطة التقدم (فاتحة) */

/* الخيار 1: أخضر فاتح */
.result-item:nth-of-type(1) .progress-bar {
    background: linear-gradient(90deg, #9bc34a, #8bc34a) !important;
}

/* الخيار 2: أحمر فاتح */
.result-item:nth-of-type(2) .progress-bar {
    background: linear-gradient(90deg, #ff6b6b, #ff5252) !important;
}

/* الخيار 3: برتقالي فاتح */
.result-item:nth-of-type(3) .progress-bar {
    background: linear-gradient(90deg, #ffa500, #ff9500) !important;
}

/* الخيار 4: أزرق فاتح */
.result-item:nth-of-type(4) .progress-bar {
    background: linear-gradient(90deg, #66ccff, #33bbff) !important;
}

/* الخيار 5: بنفسجي فاتح */
.result-item:nth-of-type(5) .progress-bar {
    background: linear-gradient(90deg, #d99fef, #c77dde) !important;
}

/* الخيار 6: تركواز فاتح */
.result-item:nth-of-type(6) .progress-bar {
    background: linear-gradient(90deg, #00bfa5, #00a896) !important;
}

.total-votes-container {
    margin-top: 10px;
    font-size: 15px;
    font-weight: bold;
    color: #0088cc;
    text-align: left;
    border-top: 1px solid #eee;
    padding-top: 15px;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.total-label { margin-right: 5px; }
.total-number {
    margin-right: 5px;
    font-family: sans-serif;
}

.poll-pagination {
    display: flex;
    justify-content: flex-start;
    gap: 5px;
    margin-top: 20px;
    flex-wrap: wrap;
    direction: rtl !important;
}

.page-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    color: #555;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.page-btn:hover {
    background: #ddd;
}

.page-btn:focus-visible {
    outline: 2px solid #9bc34a;
    outline-offset: 2px;
}

.page-btn.active {
    background: #9bc34a;
    color: #fff;
}

#poll-content-area {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* ========================================= */
/* 🌓 دعم الوضع الليلي الكامل */
/* ========================================= */

[data-theme="dark"] .poll__wrapper {
    background-color: #1e1e1e;
    border-color: #333;
}

[data-theme="dark"] .sk-shape {
    background: #2a2a2a;
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
}

[data-theme="dark"] .poll__title {
    color: #ffffff;
}

[data-theme="dark"] .poll-label {
    background-color: #2a2a2a;
}

[data-theme="dark"] .poll-label:hover {
    background-color: #333;
}

[data-theme="dark"] .poll-text {
    color: #e0e0e0;
}

[data-theme="dark"] .poll-label input[type="radio"] {
    background-color: #2a2a2a !important;
    border-color: #555 !important;
}

[data-theme="dark"] .poll-label input[type="radio"]:hover {
    border-color: #777 !important;
}

/* ✅ ألوان الخيارات في الوضع الليلي - الألوان الفاتحة تبقى */
[data-theme="dark"] .poll-label:nth-of-type(1) input[type="radio"]:checked {
    background-color: #9bc34a !important;
    border-color: #9bc34a !important;
    box-shadow: inset 0 0 0 4px #1e1e1e !important;
}

[data-theme="dark"] .poll-label:nth-of-type(2) input[type="radio"]:checked {
    background-color: #ff6b6b !important;
    border-color: #ff6b6b !important;
    box-shadow: inset 0 0 0 4px #1e1e1e !important;
}

[data-theme="dark"] .poll-label:nth-of-type(3) input[type="radio"]:checked {
    background-color: #ffa500 !important;
    border-color: #ffa500 !important;
    box-shadow: inset 0 0 0 4px #1e1e1e !important;
}

[data-theme="dark"] .poll-label:nth-of-type(4) input[type="radio"]:checked {
    background-color: #66ccff !important;
    border-color: #66ccff !important;
    box-shadow: inset 0 0 0 4px #1e1e1e !important;
}

[data-theme="dark"] .poll-label:nth-of-type(5) input[type="radio"]:checked {
    background-color: #d99fef !important;
    border-color: #d99fef !important;
    box-shadow: inset 0 0 0 4px #1e1e1e !important;
}

[data-theme="dark"] .poll-label:nth-of-type(6) input[type="radio"]:checked {
    background-color: #00bfa5 !important;
    border-color: #00bfa5 !important;
    box-shadow: inset 0 0 0 4px #1e1e1e !important;
}

[data-theme="dark"] .fake-recaptcha {
    background: #2a2a2a;
    border-color: #444;
}

[data-theme="dark"] .captcha-box {
    background: #2a2a2a;
    border-color: #555;
}

[data-theme="dark"] .captcha-box:hover {
    border-color: #777;
}

[data-theme="dark"] .poll__submit-button {
    background-color: #9bc34a;
}

[data-theme="dark"] .poll__submit-button:hover:not(:disabled) {
    opacity: 0.85;
}

[data-theme="dark"] .poll__submit-button:disabled {
    background-color: #444;
}

[data-theme="dark"] .result-label {
    color: #ffffff;
}

[data-theme="dark"] .result-stats {
    color: #e0e0e0;
}

[data-theme="dark"] .stat-count {
    color: #aaa;
}

[data-theme="dark"] .stat-perc {
    color: #ccc;
}

[data-theme="dark"] .progress-bg {
    background-color: #333;
}

[data-theme="dark"] .total-votes-container {
    border-top-color: #333;
    color: #66b3ff;
}

[data-theme="dark"] .page-btn {
    background: #333;
    color: #ccc;
    border-color: #444;
}

[data-theme="dark"] .page-btn:hover {
    background: #444;
}

[data-theme="dark"] .page-btn.active {
    background: #9bc34a;
    color: #fff;
}

/* ========================================= */
/* 📱 استجابة الهاتف والأجهزة الصغيرة */
/* ========================================= */

@media (max-width: 768px) {
    .poll__wrapper {
        padding: 15px;
        min-height: 300px;
    }

    .poll__title {
        font-size: 16px;
        min-height: 48px;
    }

    .poll-text {
        font-size: 14px;
    }

    .result-label {
        font-size: 14px;
    }

    .result-stats {
        font-size: 12px;
        min-width: 70px;
    }

    .page-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .poll__submit-button {
        font-size: 14px;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .poll__wrapper {
        padding: 12px;
        min-height: 280px;
        margin-bottom: 20px;
    }

    .poll__title {
        font-size: 15px;
        font-weight: 800;
        min-height: 45px;
        margin-bottom: 15px;
    }

    .poll-label {
        padding: 8px;
        gap: 8px;
    }

    .poll-text {
        font-size: 13px;
    }

    .poll-label input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        margin-left: 10px;
    }

    .fake-recaptcha {
        flex-direction: column;
        gap: 10px;
        padding: 8px 10px;
    }

    .poll__options {
        gap: 12px;
    }

    .poll__submit-button {
        font-size: 13px;
        padding: 10px;
    }

    .result-label {
        font-size: 13px;
    }

    .result-stats {
        font-size: 11px;
        min-width: 60px;
    }

    .progress-bg {
        height: 6px;
    }

    .page-btn {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    .poll-pagination {
        gap: 3px;
        margin-top: 15px;
    }

    .total-votes-container {
        font-size: 13px;
        padding-top: 10px;
    }
}

/* ========================================= */
/* ♿ إمكانية الوصول (Accessibility) */
/* ========================================= */

/* تحسين التباين */
@media (prefers-contrast: more) {
    .poll-label input[type="radio"] {
        border-width: 3px;
    }

    .progress-bar {
        box-shadow: 0 0 0 2px var(--bg-card);
    }
}

/* احترام تفضيلات المستخدم للحركة */
@media (prefers-reduced-motion: reduce) {
    .sk-shape,
    .progress-bar,
    .poll-label,
    .poll__submit-button,
    .poll-label input[type="radio"] {
        animation: none !important;
        transition: none !important;
    }
}

/* 🔴 [ نهاية تصميم استطلاع الرأي ] 🔴 */


/* --- تنسيق زر تحميل المزيد (محدث) --- */
#load-more-container {
    width: 100%;
    text-align: center;
    margin: 30px 0 50px 0;
    clear: both;
}

#load-more-btn {
    display: inline-block;
    /* --- الوضع النهاري (الافتراضي) --- */
    background-color: #f9f9f9;
    color: #333;
    border: 2px solid #ddd;
    /* ------------------------------ */
    padding: 12px 40px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    outline: none;
}

/* تأثير المرور (الوضع النهاري) */
#load-more-btn:hover {
    background-color: var(--bg-body); /* خلفية خضراء */
    color: var(--sy-green);
    border-color: var(--sy-green);
    transform: none;
    box-shadow: none;
}

/* --- (جديد) تعديل القيم للوضع الليلي --- */
[data-theme="dark"] #load-more-btn {
    background-color: var(--color-black) ; /* خلفية سوداء */
    color: #ffffff !important;            /* خط أبيض */
    border: 2px solid #ffffff ; /* كنار أبيض */
    box-shadow: none !important;          /* إلغاء الظل الافتراضي */
}

/* --- (جديد) التفاعل عند المرور في الوضع الليلي --- */
[data-theme="dark"] #load-more-btn:hover {
    background-color: var(--color-black) ; /* تبقى الخلفية سوداء */
    color: var(--sy-green) !important;            /* يتحول الخط للأخضر */
    border-color: var(--sy-green) ;     /* يتحول الكنار للأخضر */
}

/* حركة الدوران عند التحميل (تبقى كما هي) */
.loading-spinner-btn {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-left: 10px;
    vertical-align: middle;
}

/* تعديل لون حركة الدوران في الوضع النهاري لتكون ظاهرة */
#load-more-btn .loading-spinner-btn {
     border-color: rgba(0,0,0,0.1);
     border-top-color: #333;
}
/* تعديل لون حركة الدوران عند الهوفر أو الوضع الليلي */
#load-more-btn:hover .loading-spinner-btn,
[data-theme="dark"] #load-more-btn .loading-spinner-btn {
     border-color: rgba(255,255,255,0.3);
     border-top-color: #fff; /* تصبح بيضاء */
}

@keyframes spin { to { transform: rotate(360deg); } }


/* تنسيق زر الصفحة الرئيسية أسفل المقال */
.custom-home-btn-wrapper {
    width: 100%;
    text-align: center; /* توسيط الزر */
    margin: 20px 0 15px 0; /* مسافة فوق وتحت */
    clear: both;
}

.custom-home-btn {
    display: inline-block;
    background-color: #f9f9f9;
    color: #333;
    border: 1px solid #ddd;
    padding: 10px 30px;
    border-radius: 30px; /* حواف دائرية */
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.custom-home-btn:hover {
    background-color: #f9f9f9; /* اللون الأخضر الخاص بقالبك */
    color: var(--sy-green);
    border-color: var(--sy-green);
    text-decoration: none;
}


[data-theme="dark"] .custom-home-btn {
    background-color: var(--color-black) ;
    color: #ffffff ;
    border: 1px solid #ffffff;
}


[data-theme="dark"] .custom-home-btn:hover {
    background-color: var(--color-black) ;
    color: var(--sy-green) ;
    border-color: var(--sy-green) ;
}

/* ضمان ظهور حاوية الروابط */
.post-feeds {
    display: block !important;
    text-align: center;
    margin-top: 20px;
}


/* تعديل زر الصفحة الرئيسية (ليشبه زر تحميل المزيد) */

/* 1. ضبط حاوية الزر لتكون في المنتصف */
#blog-pager {
    text-align: center;
    margin: 30px 0 50px 0; /* مسافات مريحة من الأعلى والأسفل */
    clear: both;
    width: 100%;
}

/* 2. تصميم الزر نفسه */
.home-link {
    display: inline-block; /* لضمان أخذ الأبعاد الصحيحة */

    /* --- الألوان والإطار (الوضع النهاري) --- */
    background-color: #f9f9f9;
    color: #333;
    border: 2px solid #ddd; /* إطار عريض مثل زر التحميل */

    /* --- الحجم والخط --- */
    padding: 12px 40px;     /* حجم كبير */
    font-size: 16px;
    font-weight: bold;
    border-radius: 30px;    /* زوايا دائرية بالكامل */
    font-family:inherit;

    /* --- خصائص أخرى --- */
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    outline: none;
    line-height: normal;
}

/* 3. تأثير المرور (Hover) - الحركة والظل الأخضر */
.home-link:hover {
    background-color: var(--bg-body);
    color: var(--sy-green);
    border-color: var(--sy-green);
    transform: none; /* حركة خفيفة للأعلى */
    box-shadow: none; /* ظل أخضر */
    text-decoration: none;
}

/* ========================================= */
/* 🌑 الوضع الليلي (Dark Mode) */
/* ========================================= */

[data-theme="dark"] .home-link {
    background-color: var(--color-black);
    color: #ffffff !important;
    border: 2px solid #ffffff; /* إطار أبيض في الليل */
    box-shadow: none !important;
}

/* التفاعل في الوضع الليلي */
[data-theme="dark"] .home-link:hover {
    background-color: var(--color-black);
    color: var(--sy-green) !important; /* النص يتحول للأخضر */
    border-color: var(--sy-green);     /* الإطار يتحول للأخضر */
}


/* --- تنسيق شبكة الأقسام (حل مشكلة عدم التساوي) --- */
.news-themes__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 40px;
    direction: rtl;
    /* جعل العناصر داخل الشبكة تأخذ نفس الارتفاع تلقائياً */
    align-items: stretch;
}

@media (max-width: 768px) {
    .news-themes__wrapper { grid-template-columns: 1fr; }
}

.theme-section {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* هذا هو الحل: اجبار الصندوق على ملء ارتفاع الخلية بالكامل */
    height: 100%;
}

/* 1. رأس القسم */
.theme-section-header {
    padding: 15px 20px;
    font-size: 20px;
    font-weight: 900;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: right;
}

/* المنطقة الوسطى (التي تحتوي الأخبار) */
.theme-content-area {
    display: flex;
    flex-direction: column;
    /* تجعل هذه المنطقة تتمدد لتملأ الفراغ وتدفع الزر للأسفل */
    flex-grow: 1;
}

/* 2. الخبر الرئيسي */
.theme-main-post {
    display: block;
    text-decoration: none;
    margin-bottom: 10px;
    overflow: hidden;
}

.theme-main-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

.theme-main-post:hover .theme-main-img {
    transform: none !important;
    filter: none !important;
}

.theme-main-title {
    padding: 10px 15px 0;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
    color: var(--text-main);
    margin: 0;
    transition: color 0.2s ease;
}

.theme-main-post:hover .theme-main-title {
    color: var(--text-sec) !important;
}

/* 3. القائمة الفرعية */
.theme-sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.theme-sub-item {
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 12px 15px;
}
[data-theme="dark"] .theme-sub-item { border-top-color: rgba(255,255,255,0.1); }

.theme-sub-link {
    font-size: 15px;
    font-weight: bold;
    color: var(--text-main);
    text-decoration: none;
    line-height: 1.5;
    display: block;
    transition: color 0.2s ease;
}

.theme-sub-link:hover {
    color: var(--text-sec) !important;
    padding-right: 0 !important;
}

/* 4. الزر (حل التناسق) */
.theme-section__button-block {
    padding: 20px;
    /* التأكيد على دفع الزر للأسفل إذا لم تكن المنطقة الوسطى كافية */
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
}

.main-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    min-height: 48px;
    line-height: 1;
    background-color: #77bd1d !important;
    color: #fff !important;
    font-weight: bold;
    font-size: 16px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.3s;
    margin: 0 !important;
}

.main-button:hover {
    background-color: #5ea000 !important;
    opacity: 1;
}


/* إخفاء الأكثر قراءة important */
#PopularPosts1 {
    display: none;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
    opacity: 0;
}

/* ========================================================= */
/* 📱 تحديث اللوجو للموبايل (RT Style - Full Block) */
/* ========================================================= */


/* تنسيق عبارة حقوق الملكية والاسم أسفل المقالات */
.custom-copyright-footer {
    /* 1. التموضع والعرض - جعله يطابق الحاوية الرئيسية */
    width: 100%;
    max-width: 1552px;         /* نفس العرض الأقصى للقالب */
    margin: 30px auto 20px auto; /* التوسيط الآلي مع هوامش علوية وسفلية */
    padding: 20px 24px;        /* حشوة جانبية 24px تطابق تماماً حشوة الهيدر والمحتوى */
    box-sizing: border-box;    /* لضمان دقة العرض */

    /* 2. التنسيق البصري */
    text-align: center;
    border-top: 1px solid var(--border-color); /* الخط الفاصل بنفس عرض المحتوى */
    font-size: 14px;
    font-weight: bold;
    color: var(--text-sec);

    /* 3. المرونة */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    clear: both;
}

/* تعديل للموبايل لضمان التناسق عند تصغير الشاشة */
@media only screen and (max-width: 1023px) {
    .custom-copyright-footer {
        padding: 20px 15px;    /* تقليل الحشوة لتناسب الموبايل مثل منطقة المقالات */
        margin-top: 20px;
    }
}
/* نهاية تنسيق عبارة حقوق الملكية أسفل المقالات */


/* حل مشكلة القوائم الجانبية في صفحة الأكثر قراءة */
body.most-read-page .main-layout__column,
body.most-read-page .main-layout__column,
body.most-read-page #force-left-sidebar {
    flex-grow: 0 !important;       /* 1. منع التمدد التلقائي */
    width: 312px !important;       /* 2. تثبيت العرض برقم محدد */
    min-width: 312px !important;   /* 3. ضمان عدم التقلص */
    max-width: 312px !important;   /* 4. ضمان عدم التوسع */
}

/* توسيط المحتوى المتبقي (اختياري لجمالية أكثر) */
body.most-read-page .main-layout {
    justify-content: center !important;
}


/* ========================================================= */
/* 🛠️ قسم إصلاحات المحتوى (الروابط، الصور، الفيديوهات) - النسخة المصححة */
/* ========================================================= */

/* 1. إصلاح الروابط النصية لتبقى في نفس السطر */
.post-body a {
    display: inline;
    cursor: pointer;
    color: var(--sy-green);
    text-decoration: none !important;
}

/* 2. استثناء للروابط التي تحتوي على صور (لتبقى في سطر مستقل موسط) */
.post-body .separator a,
.post-body a img {
    display: block !important;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}


/* --- التغطية الحية --- */
.live-coverage-wrapper { margin-top: 10px; margin-bottom: 25px; width: 100%; box-sizing: border-box;}

.live-unified-card {
    background-color: var(--bg-card);
    border: 0px solid var(--sy-green);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(231, 20, 20, 0.08);
}

.live-card-header {
    background-color: rgba(231, 20, 20, 0.05);
    padding: 12px 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    z-index: 2;
}

[data-theme="dark"] .live-card-header {
    background-color: rgba(231, 20, 20, 0.15);
}


/* ========================================= */
/* تنسيق أقواس البث الاحترافية المتسلسلة */
/* ========================================= */

.live-pro-signal {
    width: 24px;
    height: 24px;
    margin-left: 12px; /* المسافة بين الأيقونة والنص */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.live-pro-signal svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--color-red); /* لون الأقواس */
    stroke-width: 2.5; /* سماكة الأقواس */
    stroke-linecap: round; /* حواف دائرية ناعمة */
}

/* النقطة في الأسفل تكون ممتلئة باللون */
.bc-dot {
    fill: var(--color-red);
    stroke: none;
    animation: signal-pulse 1.5s infinite ease-in-out;
}

/* تجهيز الأقواس للحركة */
.bc-arc {
    opacity: 0.2; /* الشفافية الافتراضية باهتة */
}

/* توقيت الإضاءة المتسلسل */
.bc-arc-1 { animation: signal-pulse 1.5s infinite ease-in-out 0.2s; }
.bc-arc-2 { animation: signal-pulse 1.5s infinite ease-in-out 0.4s; }
.bc-arc-3 { animation: signal-pulse 1.5s infinite ease-in-out 0.6s; }

/* حركة الإضاءة (تومض وتختفي) */
@keyframes signal-pulse {
    0% { opacity: 0.1; }
    50% { opacity: 1; } /* تضيء بالكامل */
    100% { opacity: 0.1; }
}


.live-card-title {
    color: var(--color-red); font-size: 16px; font-weight: 900;
    font-family: var(--font-title) !important;
}

.live-card-body {
    max-height: 230px;
    overflow-y: auto;
    overscroll-behavior: auto;
    touch-action: pan-y;
}


.live-card-body::-webkit-scrollbar { width: 6px; }
.live-card-body::-webkit-scrollbar-track { background: rgba(0,0,0,0.02); }
.live-card-body::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 10px; }
.live-card-body::-webkit-scrollbar-thumb:hover { background-color: var(--sy-green); }
[data-theme="dark"] .live-card-body::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }

.live-event-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    background-color: transparent; transition: all 0.3s ease; box-sizing: border-box;
}
.live-event-row:last-child { border-bottom: none; }
.live-event-row:hover { background-color: var(--bg-card); }

.live-event-text {
    font-size: 16px; font-weight: bold; color: var(--text-main);
    font-family: var(--font-main) !important;
}
.live-event-row:hover .live-event-text { color: var(--text-main); opacity: 0.7; }

.live-event-arrow {
    color: var(--sy-green); font-size: 18px; font-family: serif;
    margin-right: 10px; transition: transform 0.3s ease;
}


/* --- تنسيق إشعار التنبيه (Toast Notification) --- */
#rt-toast {
    visibility: hidden; /* مخفي افتراضياً */
    min-width: 250px;
    background-color: #333; /* لون خلفية داكن */
    color: #fff; /* لون النص */
    text-align: center;
    border-radius: 50px; /* حواف دائرية بالكامل */
    padding: 12px 20px;
    position: fixed;
    z-index: 2147483647; /* أعلى طبقة ممكنة ليظهر فوق كل شيء */
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%); /* توسيط العنصر */
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.3s ease-in-out, bottom 0.3s ease-in-out;
}

/* كلاس التفعيل */
#rt-toast.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px; /* حركة طفيفة للأعلى عند الظهور */
}
/* --- نهاية تنسيق إشعار التنبيه (Toast Notification) --- */


/* ========================================= */
/* 💀 RT Skeleton Loading System */
/* ========================================= */

/* 1. تعريف الحركة (النبض) */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* 2. الكلاس الأساسي للهيكل */
.rt-skeleton {
    background: #f0f0f0;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 6px;
    display: block;
}

/* 3. أشكال الهيكل (صور ونصوص) */
.rt-sk-image {
    width: 100%;
    height: 200px; /* ارتفاع افتراضي */
    margin-bottom: 10px;
}
.rt-sk-title {
    width: 80%;
    height: 20px;
    margin-bottom: 8px;
}
.rt-sk-line {
    width: 50%;
    height: 15px;
}

/* 4. تخصيص الشبكة (Grid Skeleton) */
.sy-sk-grid-wrapper { display: flex; flex-direction: column; gap: 15px; width: 100%; }
.sy-sk-main-img { height: 300px; }
.sy-sk-sub-grid { display: flex; gap: 15px; }
.sy-sk-sub-item { flex: 1; height: 150px; }

/* 5. تخصيص القائمة (List Skeleton - للأكثر قراءة) */
.rt-sk-list-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    background: var(--bg-card);
}

/* 6. دعم الوضع الليلي (Dark Mode) */
[data-theme="dark"] .rt-skeleton {
    background: #2a2a2a;
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
}

/* ========================================= */
/* 💀 RT Skeleton Loading System */نهاية
/* ========================================= */


/* --- S24News Smart Gallery System (Mobile Fill Fixed) --- */


/* =========================================================
   🌟 S24News Swiper Gallery System (Professional & Fixed) 🌟
   ========================================================= */

/* 1. إخفاء المصدر الخام للصور دائماً */
body:not(.item-page) .rt-album-source { display: none !important; }
.rt-album-source { display: none !important; }

/* 2. الحاوية الرئيسية للمعرض */
.s24-gallery-wrapper {
    position: relative;
    width: 100%;
    max-width: 864px;
    margin: 25px auto;
    direction: rtl; /* دعم اللغة العربية */
}

/* ---------------------------------------------------------
   🛡️ درع الحماية: إصلاح الفراغات السفلية المزعجة في بلوجر
   --------------------------------------------------------- */
/* تصفير ارتفاع السطر والخطوط لمنع الفراغات الوهمية تحت الصور */
.item-page .post-body .s24-gallery-wrapper {
    line-height: 0 !important;
    font-size: 0 !important;
    padding-bottom: 0 !important;
}

/* إجبار الصور داخل السلايدر على تجاهل هوامش بلوجر الافتراضية */
.s24-gallery-wrapper img {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
}

/* ضمان أن الشريحة تملأ الطول بالكامل */
.s24-gallery-wrapper .swiper-slide {
    height: 100% !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
}
/* --------------------------------------------------------- */

/* 3. السلايدر الرئيسي (الصورة الكبيرة) */
.s24-main-swiper {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-black, #000);
    aspect-ratio: 16 / 9 !important; /* أبعاد سينمائية متناسقة */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 10px !important; /* المسافة الوحيدة بين الكبير والمصغر */
}

/* 4. عداد الصور (مثال: 1 / 5) */
.item-page .post-body .s24-gallery-wrapper .swiper-pagination-fraction {
    position: absolute;
    bottom: 15px;
    right: auto;
    left: 15px; /* في الزاوية اليسرى */
    width: auto !important;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 15px !important; /* استرجاع حجم الخط هنا فقط */
    font-weight: bold;
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
    z-index: 10;
    direction: ltr;
    letter-spacing: 2px;
    line-height: 1.5 !important;
}

/* 5. أسهم التنقل الجانبية */
.s24-gallery-wrapper .swiper-button-next,
.s24-gallery-wrapper .swiper-button-prev {
    color: #fff !important;
    background: rgba(255,255,255,0.15);
    width: 45px !important;
    height: 45px !important;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    margin-top: -22px !important;
}
.s24-gallery-wrapper .swiper-button-next:hover,
.s24-gallery-wrapper .swiper-button-prev:hover {
    background: var(--sy-green, #77bd1d);
}
.s24-gallery-wrapper .swiper-button-next::after,
.s24-gallery-wrapper .swiper-button-prev::after {
    font-size: 20px !important;
    font-weight: bold;
}

/* 6. سلايدر الصور المصغرة (السفلي) */
.s24-thumb-swiper {
    width: 100%;
    height: 85px !important;
    min-height: 85px !important;
    max-height: 85px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.s24-thumb-swiper .swiper-slide {
    width: 20%;
    opacity: 0.4; /* بهتان للصور غير المحددة */
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* تأثير الصورة المصغرة النشطة */
.s24-thumb-swiper .swiper-slide-thumb-active {
    opacity: 1;
    border-color: var(--sy-green, #77bd1d) !important;
}

/* 7. إعدادات الموبايل */
@media (max-width: 768px) {
    .s24-thumb-swiper {
        height: 65px !important;
        min-height: 65px !important;
    }
    /* إخفاء الأسهم في الموبايل والاعتماد على السحب بالإصبع */
    .s24-gallery-wrapper .swiper-button-next,
    .s24-gallery-wrapper .swiper-button-prev {
        display: none !important;
    }
}

/* 8. 🆕 كسر حشوة الحاوية بهامش سالب لجعل صورة المعرض الرئيسية تمتد على كامل العرض —
   🔒 مقيّد الآن بعلامة محلية على المعرض نفسه (s24-gallery-lead) بدل كلاس المقالة كاملة —
   تُضاف من JS فقط حين يكون هذا المعرض بالذات هو القائد الفعلي (لا مقالة أخرى بها معرض في مكان آخر) */
body.item-page .post-body > div[dir="rtl"] .s24-gallery-wrapper.s24-gallery-lead {
    margin-left: -65px !important;
    margin-right: -65px !important;
    width: calc(100% + 130px) !important;
    max-width: calc(100% + 130px) !important;
}

/* إلغاء الحواف الدائرية والظل — بنفس القيد المحلي */
.s24-gallery-wrapper.s24-gallery-lead .s24-main-swiper {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 9. 🆕 حالة المعرض كعنصر مباشر داخل post-body (بلا التفاف dir="rtl") — بنفس القيد المحلي */
body.item-page .post-body > .s24-gallery-wrapper.s24-gallery-lead {
    padding-right: 0 !important;
    padding-left: 0 !important;
    max-width: 100% !important;
}

/* 10. 🆕 إخفاء الغلاف الثابت عبر CSS مباشرة اعتماداً على نفس العلامة المحلية —
   احتياط موثوق بجانب سكربت JS، يعمل حتى لو تأخر أو فشل تنفيذ ذلك السكربت لأي سبب */
body.item-page .post-body > .s24-cover-injected:has(~ .s24-gallery-wrapper.s24-gallery-lead),
body.item-page .post-body > .s24-cover-injected:has(~ div[dir="rtl"] .s24-gallery-wrapper.s24-gallery-lead) {
    display: none !important;
}
/* --- نهاية S24News Smart Gallery System (Mobile Fill Fixed) --- */


/* ================================================= */
/* 🔴 إعدادات صفحة البث المباشر (تخطيط + فيديو) 🔴 */
/* ================================================= */

/* 1. تنسيق حاوية الفيديو والتثبيت */

.video-container {
    /* قاعدة موحّدة للاستخدامين معاً: مشغّل صفحة البث (#main-video-placeholder)
       وأداة البث الجانبية في الرئيسية (#video-placeholder) */
    width: 100%;
    aspect-ratio: 16 / 9;
    padding-top: 56.25%;              /* احتياط للمتصفحات بلا دعم aspect-ratio */
    background-color: var(--color-black);
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 0px;
    border-radius: 0 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    flex-shrink: 0 !important;

    /* التثبيت (Sticky) — قيمة top تُضبط داخل استعلامات الوسائط أدناه */
    position: -webkit-sticky !important;
    position: sticky !important;
    z-index: 900 !important;
    transition: top 0.3s ease;
}

/* ضبط ارتفاع التثبيت حسب الجهاز */


/* 2. تنسيقات المشغل والواجهة */

.live-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; border-bottom: 0px solid var(--border-color);
    padding: 10px 15px 15px 15px;
}
@keyframes pulse-red { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(231, 20, 20, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(231, 20, 20, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(231, 20, 20, 0); } }

/* المشغل والأزرار */


.live-info-box {
    background: var(--hover-bg) !important; border-radius: 0 !important;
    padding: 25px; margin-top: 0; border-right: 0px solid var(--sy-green); color: var(--text-main) !important;
}


/* ================================================= */
/* 🔴 نهاية إعدادات صفحة البث المباشر (تخطيط + فيديو) 🔴 */
/* ================================================= */


/* ================================================= */
/* 🧩 نظام الشريط المتحرك الموحد (Unified Slider System) */
/* ================================================= */

/* 1. الحاوية الرئيسية */
.sy-slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    margin: 15px 0;
    direction: rtl;
    position: relative;
    /* تم حذف cursor: grab لإلغاء إيحاء السحب في الكمبيوتر */
}


/* 2. منطقة التمرير (الوسط) */
.sy-scroll-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;

    /* هذا السطر يضمن عمل التمرير باللمس في الموبايل */
    overflow-x: auto;
    overflow-y: hidden;

    gap: 10px;
    padding: 5px 0;
    order: 2; /* الترتيب في المنتصف دائماً */

    /* إخفاء شريط التمرير (Scrollbar) شكلياً */
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;

    width: calc(100% - 90px); /* ترك مسافة للأسهم */
}

.sy-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

/* 3. تصميم الكبسولة/الزر الموحد */
.sy-standard-pill {
    display: flex;
    align-items: center;
    justify-content: center;

    /* الألوان تعتمد على المتغيرات */
    background-color: var(--color-main-header-bg);
    color: var(--text-main);

    /* الحجم والحدود */
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 16px;

    /* الخط */
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.3;
    white-space: nowrap;

    /* حركة ناعمة */
    transition: all 0.3s ease-in-out;
    flex-shrink: 0;
    user-select: none;
}

/* تأثير المرور (Hover) */
.sy-standard-pill:hover {
    color: var(--sy-green);
    background-color: var(--hover-bg);
    border-color: var(--sy-green);
    transform: none !important;
    box-shadow: none !important;
}

/* دعم الوضع الليلي */
[data-theme="dark"] .sy-standard-pill {
    border-color: var(--border-color);
}

/* 4. تصميم الأسهم العامة */
.sy-nav-arrow {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2;
    border: none;
    user-select: none;

    /* الأبعاد */
    width: 30px;
    height: 35px;
    font-size: 28px;

    /* الألوان والمظهر */
    color: var(--text-sec);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.2s;
}

.sy-nav-arrow:hover {
    color: var(--sy-green);
    background: transparent;
    transform: none !important;
}

/* ترتيب الأسهم يمين ويسار */
.sy-arrow-right { order: 3; }
.sy-arrow-left  { order: 1; }

/* 5. إعدادات الموبايل الافتراضية (تظهر الأسهم) */
/* هذا يطبق على القوائم العادية مثل القائمة العلوية */
@media (max-width: 1024px) {
    .sy-nav-arrow {
        display: flex !important;
        width: 30px;
        height: 30px;
        font-size: 20px;
    }
    .sy-scroll-wrapper {
        width: calc(100% - 75px) !important;
    }
}

/* ================================================= */
/* 📱 الكلاس الذكي: إخفاء الأسهم على الموبايل (Utility Class) */
/* الاستخدام: أضف "sy-hide-mobile-arrows" لأي شريط تريده */
/* ================================================= */

@media (max-width: 1024px) {

    /* 1. إخفاء أي سهم داخل الحاوية التي تحمل هذا الكلاس */
    .sy-hide-mobile-arrows .sy-nav-arrow {
        display: none !important;
    }

    /* 2. توسيع منطقة التمرير لتملأ الفراغ */
    .sy-hide-mobile-arrows .sy-scroll-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/* ================================================= */
/* 🧩 نهاية نظام الشريط المتحرك الموحد (Unified Slider System) */
/* ================================================= */


/* ========================================================================== */
/* 🏷️ نظام ترويسات الأقسام والأزرار والأعلام الموحد (Modern Unified UI)       */
/* ========================================================================== */
/* 1. هيكل الترويسة والنصوص (Header & Text)    */
.sy-section-header { margin-bottom: 30px;  padding: 0 10px; text-align: right; direction: rtl; }
.sy-section-title-row { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 20px; }
.sy-section-title-text { font-weight: 900; color: var(--text-main); margin: 0; line-height: 1.2; }
.sy-section-desc { margin-bottom: 20px; font-size: 16px; color: var(--text-sec); padding: 0 10px; line-height: 1.6; display: block; }
.sy-related-title { font-size: 18px; font-weight: 900; color: var(--text-main); margin: 30px 0 15px 0; border: none; padding: 0; line-height: 1.2; }

/* 2. المربعات الملونة والأعلام (Generic Square)*/
.sy-generic-square, .country-flag, .syria-flag-icon, .all-news-logo { flex: 0 0 25px !important; height: 25px !important; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; margin-inline-end: 10px !important; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); background-color: var(--page-color, transparent); background-position: center !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; border: 1px solid var(--page-color, rgba(0, 0, 0, 0.05)); }

/* علم سوريا المطور (مستثنى ليملأ المربع تماماً) */
.syria-flag-icon { background-size: 100% 100% !important; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Crect width='300' height='67' fill='%2322AB5B'/%3E%3Crect y='67' width='300' height='66' fill='%23FFFFFF'/%3E%3Crect y='133' width='300' height='67' fill='%23000000'/%3E%3Cg fill='red'%3E%3Cpolygon points='90,75 97,95 115,95 101,108 107,125 90,115 73,125 79,108 65,95 83,95'/%3E%3Cpolygon points='150,75 157,95 175,95 161,108 167,125 150,115 133,125 139,108 125,95 143,95'/%3E%3Cpolygon points='210,75 217,95 235,95 221,108 227,125 210,115 193,125 199,108 185,95 203,95'/%3E%3C/g%3E%3C/svg%3E") !important; border: none !important; }

/* لوجو الموقع */
.all-news-logo { background-color: var(--sy-green) !important; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeuurJSEqv95Xbqa7rYRACLNXO6YFHA1YhWsH_3pb57sA_g01cDkD44MGxWQNDTJNeO4Ol2tRAOOBMVWPKoahUXss3sbQMmHQu3GzRmE3FpAK7r6NDzRx3joLDgGgkduyZU0vmx1AoZinzDhehul5DDuR_9J30CnAAS9hyE1AekqBKk2nynpp2UlqZT7Hf/s16000/logo24sn.png') !important; background-size: 80% !important; }

/* 3. حاويات الأزرار (Flex Containers)         */
.sy-mosaic-container,
.sy-related-list { display: flex; flex-wrap: wrap; width: 100%; direction: rtl; justify-content: flex-start; }
.sy-mosaic-container { gap: 10px; margin: 20px 0; }
.sy-related-list { gap: 8px; margin-bottom: 20px; }

/* 4. تصميم الكبسولات (Unified Buttons)        */
.sy-mosaic-item, .sy-related-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: auto; min-width: 0; gap: 0px; position: relative; overflow: hidden; outline: none; background-color: var(--bg-card); border: 1px solid currentColor; color: var(--color-grey-65); border-radius: .25rem; padding: .38rem .75rem; font-size: 1rem; font-weight: 500; text-decoration: none; white-space: nowrap; line-height: 1.125rem; transition: color .3s ease-in-out, border-color .3s ease-in-out, background-color .3s ease-in-out; box-shadow: none !important; }
.sy-mosaic-icon { font-size: 18px; line-height: 1; margin: 0; display: flex; }

/* 5. تفاعلات الماوس (Hover Effects)           */
.sy-mosaic-item:hover { background-color: var(--bg-body) !important; border-color: var(--mosaic-color) !important; color: var(--mosaic-color) !important; box-shadow: none !important; transform: none !important; }
.sy-related-btn:hover { background-color: var(--bg-body) !important; border-color: var(--btn-hover, var(--sy-green)) !important; color: var(--btn-hover, var(--sy-green)) !important; box-shadow: none !important; transform: none !important; }

/* 6. مكتبة أعلام الدول (Country Flags)        */
/* دول عربية */
.flag-egypt    { background-image: url('https://flagcdn.com/w40/eg.png'); }
.flag-saudi    { background-image: url('https://flagcdn.com/w40/sa.png'); }
.flag-uae      { background-image: url('https://flagcdn.com/w40/ae.png'); }
.flag-jordan   { background-image: url('https://flagcdn.com/w40/jo.png'); }
.flag-lebanon  { background-image: url('https://flagcdn.com/w40/lb.png'); }
.flag-iraq     { background-image: url('https://flagcdn.com/w40/iq.png'); }
.flag-palestine{ background-image: url('https://flagcdn.com/w40/ps.png'); }
.flag-kuwait   { background-image: url('https://flagcdn.com/w40/kw.png'); }
.flag-qatar    { background-image: url('https://flagcdn.com/w40/qa.png'); }
.flag-bahrain  { background-image: url('https://flagcdn.com/w40/bh.png'); }
.flag-oman     { background-image: url('https://flagcdn.com/w40/om.png'); }
.flag-yemen    { background-image: url('https://flagcdn.com/w40/ye.png'); }
.flag-algeria  { background-image: url('https://flagcdn.com/w40/dz.png'); }
.flag-morocco  { background-image: url('https://flagcdn.com/w40/ma.png'); }
.flag-tunisia  { background-image: url('https://flagcdn.com/w40/tn.png'); }
.flag-libya    { background-image: url('https://flagcdn.com/w40/ly.png'); }
.flag-sudan    { background-image: url('https://flagcdn.com/w40/sd.png'); }
/* دول العالم */
.flag-usa      { background-image: url('https://flagcdn.com/w40/us.png'); }
.flag-russia   { background-image: url('https://flagcdn.com/w40/ru.png'); }
.flag-china    { background-image: url('https://flagcdn.com/w40/cn.png'); }
.flag-uk       { background-image: url('https://flagcdn.com/w40/gb.png'); }
.flag-france   { background-image: url('https://flagcdn.com/w40/fr.png'); }
.flag-germany  { background-image: url('https://flagcdn.com/w40/de.png'); }
.flag-turkey   { background-image: url('https://flagcdn.com/w40/tr.png'); }
.flag-iran     { background-image: url('https://flagcdn.com/w40/ir.png'); }
.flag-ukraine  { background-image: url('https://flagcdn.com/w40/ua.png'); }
.flag-israel   { background-image: url('https://flagcdn.com/w40/il.png'); }
.flag-italy    { background-image: url('https://flagcdn.com/w40/it.png'); }
.flag-india    { background-image: url('https://flagcdn.com/w40/in.png'); }
.flag-japan    { background-image: url('https://flagcdn.com/w40/jp.png'); }
.flag-nkorea   { background-image: url('https://flagcdn.com/w40/kp.png'); }
.flag-brazil   { background-image: url('https://flagcdn.com/w40/br.png'); }
.flag-venezuela{ background-image: url('https://flagcdn.com/w40/ve.png'); }
.flag-afghanistan{ background-image: url('https://flagcdn.com/w40/af.png'); }
.flag-pakistan { background-image: url('https://flagcdn.com/w40/pk.png'); }
.flag-belarus  { background-image: url('https://flagcdn.com/w40/by.png'); }

/* ------------------------------------------- */
/* 7. التجاوب مع الموبايل (Unified Mobile)     */
/* ------------------------------------------- */
@media (max-width: 768px) {
    .sy-mosaic-container { gap: 8px; padding: 0 5px; }
    .sy-related-list { gap: 6px; }
    .sy-related-title { font-size: 16px; margin-top: 20px; }
    .sy-mosaic-item, .sy-related-btn { font-size: 13px; padding: 6px 12px; }
    .sy-related-btn { flex-grow: 1; text-align: center; }
}
/* ========================================================================== */


/* شريط مسار التنقل (Breadcrumbs) */
.sy-breadcrumb { display: flex; align-items: center; flex-wrap: nowrap; margin: 15px 0 10px 0; padding: 12px 10px; font-family: 'Readex Pro', sans-serif; font-size: 12px; font-weight: 400; color: var(--text-sec); overflow: hidden; width: 100%; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.2; }
.sy-bc-item { display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0; }
.sy-bc-item a { color: var(--text-sec); text-decoration: none; transition: all 0.3s ease; padding: 2px 4px; border-radius: 4px; }
.sy-bc-item a:hover { color: var(--page-color, var(--sy-green));  background-color: transparent; }
.sy-bc-sep { margin: 0 8px; font-size: 11px; color: var(--text-sec); display: flex; align-items: center; flex-shrink: 0; opacity: 0.5; }
.sy-bc-current { color: var(--text-main); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; flex-shrink: 1; opacity: 0.8; }

/* --- شريط معلومات المقال --- */
.sy-post-meta { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin-top: 20px; margin-bottom: 15px; padding-right: 30px; color: var(--text-sec); line-height: 1.5; gap: 0; }
.meta-inner { order: 3; color: var(--text-sec); line-height: 1.5; margin-top: 2px; margin-bottom: 1px; padding: 2px 25px 15px 25px; box-sizing: border-box; display: flex; align-items: center; flex-wrap: wrap; font-size: 16px; }
.post-body .meta-inner { margin-right: -65px; margin-left: -65px; }
@media only screen and (max-width: 768px) {
    .post-body .meta-inner { margin-right: -20px; margin-left: -20px; }
}
.meta-el.meta-update::before { content: '|'; margin: 0 8px; opacity: 0.5; }
.meta-label { font-size: 12px; }

/* تنسيق التاريخ المعكوس - بدون لون أخضر */
.sy-static-text { font-weight: 700 !important; }

.sy-published-date,
.sy-updated-date {
    color: var(--text-sec);
    font-weight: 400;
    margin: 0 5px;
    opacity: 0.8;
    font-size: 12px !important;
}


/* 1. تنسيق اسم القسم (مربع اللون + النص) */
.sy-meta-label { display: flex; align-items: center; gap: 4px; color: var(--text-main); text-decoration: none; margin-left: 50px; }
.sy-label-text { font-family: 'IBM Plex Sans Arabic', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; }
/* 2. تنسيق التاريخ وكلمة "آخر تحديث" */
.sy-static-text { margin: 0px 18px 0px 5px; opacity: 0.9; }
.sy-date-only { direction: ltr; color: var(--text-sec); margin-left: 0px; }
/* 3. الفاصل العمودي (|) */
.sy-meta-separator {  color: var(--text-sec); opacity: 0.4; font-size: 12px !important; margin: 0 10px; }
/* 4. تنسيق توقيت دمشق (ص / م) */
.sy-time-only { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; color: var(--text-sec); direction: ltr; }
.sy-t-city, .sy-t-ampm, .sy-t-num { font-family: 'Readex Pro', sans-serif !important; font-size: 13.5px !important; font-weight: 600; color: var(--text-sec); }
.sy-t-num { letter-spacing: 0.5px; }
/* --- نهاية شريط معلومات المقال --- */


/* بداية تنسيق المعين الأخضر في نهاية المقال */
.sy-end-diamond { display: inline-block; width: 8px; height: 8px; background-color: var(--sy-green); -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-right: 3px; margin-bottom: 0px; vertical-align: middle; opacity: 0; animation: fadeInShape 0.5s ease forwards; }
@keyframes fadeInShape { to { opacity: 1; } }
/* نهاية تنسيق المعين الأخضر في نهاية المقال */


/* ================================================= */
/* 📱 2. شاشات التابلت الصغيرة والموبايل الكبير (أقل من 768px) */
/* ================================================= */
@media only screen and (max-width:768px) {


  .progress-wrap { bottom: 65px !important; left: 15px !important; width: 42px !important; height: 42px !important; }
  .progress-arrow svg { width: 20px !important; height: 20px !important; }


  .breaking-news-container .widget-content a, .breaking-news-container .widget-content span { font-size: 0.85rem; font-weight: 600; }


}

/* ================================================= */
/* 📱 3. شاشات الموبايل الصغيرة (أقل من 600px) */
/* ================================================= */
@media only screen and (max-width: 600px) {


  /* القوائم المخصصة */
  .cat-item-img {
    width: 160px;
    height: 110px;
  }

  .cat-item-title {
    font-size: 14px;
    line-height: 1.4;
  }

  .custom-cat-item {
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

}


/* نهاية تنسيق ترويسة صفحة البحث (بنفس لون خلفية الموقع تماماً) */


/* بداية تنسيق صندوق المعلومات المخصص */

    /* تعريف ألوان خلفية خاصة للصندوق فقط (لأنها غير موجودة في القالب) */

    /* تنسيق الصندوق باستخدام المتغيرات */
    .note-box {
        /* الخلفية تأخذ المتغير الذي عرفناه بالأعلى */
        background-color: var(--sy-note-bg);

        /* النص يأخذ لون نصوص الموقع الرسمي */
        color: var(--text-main);

        /* الحد يأخذ اللون الأخضر الرسمي للموقع */
        border-right: 5px solid var(--sy-green);

        padding: 15px;
        margin: 20px auto;
        border-radius: 0px;
        font-size: 14px;
        line-height: 1.6;
        width: 80%;
        max-width: 600px;

        /* إضافة بسيطة: انتقال ناعم عند تغيير الألوان */
        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    }


/* نهاية تنسيق صندوق المعلومات المخصص */


/* --- تنسيق التلميح الذكي (Tooltip) بداية --- */


/* --- تنسيق التلميح الذكي (Tooltip) المطور --- */
.sy-tooltip {
    position: relative;
    display: inline;
    border-bottom: none;
    cursor: help;
    color: var(--sy-tooltip-color) !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* شكل الصندوق الأساسي */
.sy-tooltip::after {
    content: attr(data-title);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%); /* التوسيط الافتراضي */

    background-color: var(--color-black-1c);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: normal;
    text-align: right;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 10005;

    /* 🟢 التعديلات الجديدة للموبايل: */
    white-space: normal;       /* السماح بنزول السطر */
    width: max-content;        /* العرض حسب المحتوى */
    max-width: 200px;          /* أقصى عرض للصندوق حتى لا يملأ الشاشة */
    min-width: 120px;          /* أقل عرض */
    line-height: 1.4;

    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

/* السهم الصغير */
.sy-tooltip::before {
    content: "";
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-black-1c) transparent transparent transparent;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
}

/* --- فئات المحاذاة الذكية (يتم تفعيلها بالجافاسكربت) --- */

/* إذا كانت الكلمة في أقصى اليمين، اجعل الشرح ينزاح لليسار */
.sy-tooltip.pos-right::after {
    left: auto;
    right: 0;
    transform: none; /* إلغاء التوسيط */
    text-align: right;
}
.sy-tooltip.pos-right::before {
    left: auto;
    right: 10px; /* مكان السهم */
    transform: none;
}

/* إذا كانت الكلمة في أقصى اليسار، اجعل الشرح ينزاح لليمين */
.sy-tooltip.pos-left::after {
    left: 0;
    right: auto;
    transform: none;
    text-align: right;
}
.sy-tooltip.pos-left::before {
    left: 10px;
    transform: none;
}

body.glossary-index-page .rt-footer,
body.glossary-index-page .post-footer,
body.glossary-index-page .comments,
body.glossary-index-page #comments {
    display: none !important;
}

body.static-page-view .rt-footer {
    display: none !important;
}

a.sy-tooltip {
    cursor: pointer;
    text-decoration: none;
    color: var(--sy-tooltip-color) !important;
    font-weight: inherit !important;
}

a.sy-tooltip .sy-ext-icon {
    font-size: 0.75em;
    vertical-align: middle;
    margin-inline-start: 1px;
    opacity: 0.85;
    position: relative;
    top: -1px;
}

body.s24-glossary-article .custom-post-tags,
body.s24-glossary-article .post-footer,
body.s24-glossary-article .rt-footer,
body.s24-glossary-article .comments,
body.s24-glossary-article #comments {
    display: none !important;
}

/* 🆕 معرض الصور والفيديو: لا شيء يُخفى — كل شيء ظاهر مثل المقال العادي تماماً */

/* 🆕 صورة غلاف الفيديو + زر التشغيل المخصص (مستوحى من مرجع سانا، بهوية الموقع)
   نفس لغة التصميم المستخدمة أصلاً بكرت الفيديو بالرئيسية (خلفية داكنة + أيقونة بيضاء + sy-green عند التمرير) */

.s24-video-poster-wrapper { position: relative; width: 100%; }
.s24-video-poster-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer; }
.s24-video-poster-overlay img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s24-video-play-btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.2); transition: background 0.2s ease; }
.s24-video-play-btn svg { width: 64px; height: 64px; fill: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); transition: fill 0.2s ease; }
.s24-video-poster-overlay:hover .s24-video-play-btn { background: rgba(255,255,255,0.1); }
.s24-video-poster-overlay:hover .s24-video-play-btn svg { fill: var(--sy-green); }


/* ===== الفيديو القائد: عرض كامل 100% مطابق تماماً لمعاملة الصورة الأولى =====
   يعتمد على حاوية .separator نفسها المُعلَّمة بكلاس s24-lead-video-wrapper من سكربت
   الكشف، ويشمل الحالتين معاً (مرفوع من الجهاز عبر object.BLOG_video_class، ويوتيوب
   عبر iframe) بصرف النظر عمّا إذا استبدل بلوجر الـobject بـiframe داخلياً أم لا */
body.s24-video-article .s24-lead-video-wrapper,
body.s24-video-article .s24-lead-video-wrapper .s24-video-poster-wrapper,
body.s24-video-article .s24-lead-video-wrapper object.BLOG_video_class,
body.item-page.s24-video-article .s24-lead-video-wrapper iframe,
body.s24-video-article .s24-lead-video-wrapper video,
body.s24-video-article .s24-lead-video-wrapper embed {
    width: 100% !important;
    max-width: 100% !important;
    margin: 30px auto !important;
    border-radius: 0 !important;
}

/* 🆕 كسر حشوة حاوية عبر هوامش سالبة للفيديو القائد فقط — دون المساس
   بحشوة بقية عناصر المقالة(النصوص) المجاورة له داخل نفس الحاوية */
body.item-page .post-body > div[dir="rtl"] .s24-lead-video-wrapper {
    margin-left: -65px !important;
    margin-right: -65px !important;
    width: calc(100% + 130px) !important;
    max-width: calc(100% + 130px) !important;
}

body.item-page.s24-video-article .s24-lead-video-wrapper iframe,
body.s24-video-article .s24-lead-video-wrapper object.BLOG_video_class,
body.s24-video-article .s24-lead-video-wrapper video {
    aspect-ratio: 16 / 9 !important;
}

/* ===== حماية الفيديوهات الثانية (غير القائدة) عند 75% ===== */
body.s24-video-article .post-body iframe:not(.s24-lead-video-iframe),
body.s24-video-article .post-body video,
body.s24-video-article .post-body embed,
body.s24-video-article .post-body object.BLOG_video_class {
    width: 75% !important;           /* 75% فقط للثانية+ */
    max-width: 750px !important;
}

body.s24-video-article .post-body iframe[id^="BLOGGER-video"]:first-of-type {
    width: 100% !important;
    max-width: 100% !important;
    margin: 30px auto !important;
}


body.item-page.s24-video-article .post-body .separator.s24-lead-video-wrapper .s24-video-poster-wrapper .s24-video-poster-overlay img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    display: block !important;
}


/* عند التفاعل */
/* عند التفاعل */
.sy-tooltip:hover::after, .sy-tooltip:hover::before,
.sy-tooltip:focus::after, .sy-tooltip:focus::before,
.sy-tooltip.is-open::after, .sy-tooltip.is-open::before {
    visibility: visible;
    opacity: 1;
}

/* 🆕 مؤشر بصري: خط منقّط بلون الهوية يدل أن الكلمة تفاعلية */
.sy-tooltip {
    text-decoration: underline dotted var(--sy-green) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
    text-decoration-skip-ink: auto;
}
.sy-tooltip:hover,
.sy-tooltip.is-open {
    text-decoration-style: solid !important;
}

/* 🆕 قيمة ليلية للون الكلمة (الخلفية داكنة فيحتاج لوناً أفتح) */
[data-theme="dark"] {
    --sy-tooltip-color: #c3ccd8;
}

/* 🆕 السهم يأخذ نفس طبقة الصندوق */
.sy-tooltip::before { z-index: 10005; }

/* 🆕 الفتح للأسفل عند ضيق المساحة فوق الكلمة */
.sy-tooltip.pos-below::after {
    bottom: auto;
    top: 130%;
}
.sy-tooltip.pos-below::before {
    bottom: auto;
    top: 120%;
    border-color: transparent transparent var(--color-black-1c) transparent;
}
[data-theme="dark"] .sy-tooltip.pos-below::before {
    border-color: transparent transparent #ffffff transparent !important;
}

/* ================================================= */
/* 🌗 تخصيص ألوان الشرح في الوضع الليلي (Dark Mode) */
/* الهدف: جعل الصندوق أبيض والنص أسود لزيادة الوضوح */
/* ================================================= */

[data-theme="dark"] .sy-tooltip::after {
    background-color: #ffffff !important;
    color: var(--color-black, #000) !important;
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 20px rgba(255,255,255,0.1);
}

/* تلوين السهم الصغير ليصبح أبيض أيضاً */
[data-theme="dark"] .sy-tooltip::before {
    border-color: #ffffff transparent transparent transparent !important;
}

/* تلوين الكلمة الأصلية نفسها في الوضع الليلي */
[data-theme="dark"] .sy-tooltip,
[data-theme="dark"] a.sy-tooltip {
    color: var(--sy-tooltip-color) !important;
    border-bottom-color: transparent;
}


/* --- تنسيق التلميح الذكي (Tooltip) نهاية --- */


/* دُمجت هذه القاعدة ضمن قسم "التجاوب مع الموبايل" في آخر الملف */

/* ========================================================================== */
/* 🚀 النظام الشامل الموحد لتضمين (فيديو، يوتيوب، وتواصل اجتماعي) - S24News */
/* ========================================================================== */

/* =========================================================
   🛠️ النظام الشامل لتنظيف الرئيسية وإظهار الصورة الأولى فقط 🛠️
   ========================================================= */

/* 1. تصفير الحاوية الأم لمنع الفراغات الجانبية والسفلية */
body:not(.item-page) .post-body {
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. الإعدام الشامل: إخفاء كل العناصر (نصوص، فراغات، تواصل اجتماعي، فيديوهات، وأي صور مكررة) */
body:not(.item-page) .post-body > *:not(.s24-list-thumb),
body:not(.item-page) .post-body p,
body:not(.item-page) .post-body br,
body:not(.item-page) .post-body span,
body:not(.item-page) .post-body iframe,
body:not(.item-page) .post-body video,
body:not(.item-page) .post-body embed,
body:not(.item-page) .post-body object,
body:not(.item-page) .post-body blockquote,
body:not(.item-page) .post-body .twitter-tweet,
body:not(.item-page) .post-body .instagram-media,
body:not(.item-page) .post-body .tiktok-embed,
body:not(.item-page) .post-body .fb-post,
body:not(.item-page) .post-body .fb-video,
body:not(.item-page) .post-body .twitter-tweet-rendered,
body:not(.item-page) .post-body iframe[src*="facebook.com"],
body:not(.item-page) .post-body iframe[src*="instagram.com"],
body:not(.item-page) .post-body iframe[src*="tiktok.com"],
body:not(.item-page) .post-body iframe[id^="twitter-widget-"],
body:not(.item-page) .post-body img,
body:not(.item-page) .post-body .separator,
body:not(.item-page) .note-box,
body:not(.item-page) .rt-album-parent {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

/* 3. الاستثناء الذهبي: إجبار الصورة الأولى فقط على الظهور وتنسيق أبعادها بدقة */
body:not(.item-page) .post-body .s24-list-thumb,
body:not(.item-page) .post-body .s24-list-thumb img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 405px !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    margin: 0 auto 1px !important;
    border-radius: 0px !important;
}
/* ========================================================= */

/* --------------------------------------------------------------------------
   2. تفعيل التفاعل والنقر داخل صفحة المقالة
----------------------------------------------------------------------------- */
body.item-page .post-body .separator,
body.item-page .post-body iframe,
body.item-page .post-body video,
body.item-page .post-body object.BLOG_video_class {
    pointer-events: auto !important;
    cursor: auto !important;
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   3. القاعدة الأساسية للفيديوهات واليوتيوب (كمبيوتر)
   أبعاد 16:9 | عرض 75% | محاذاة للوسط
----------------------------------------------------------------------------- */
.post-body iframe:not([id^="twitter-widget-"]):not([src*="platform.twitter.com"]),
.post-body video,
.post-body embed,
.post-body object.BLOG_video_class {
    width: 75% !important;
    max-width: 750px !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    margin: 25px auto !important;
    display: block !important;
    position: relative !important;
    clear: both;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.post-body object.BLOG_video_class {
    background: #000;
}
.post-body object.BLOG_video_class > * {
    width: 100% !important;
    height: 100% !important;
}

/* --------------------------------------------------------------------------
   4. 🔴 الاستثناء الأهم: شبكات التواصل الاجتماعي (كمبيوتر)
   عرض 70% | محاذاة للوسط
----------------------------------------------------------------------------- */

/* أ) تويتر (يحتاج ارتفاع تلقائي ليتمدد حسب طول النص) */
body.item-page .post-body iframe[id^="twitter-widget-"],
body.item-page .post-body iframe[src^="https://platform.twitter.com"],
body.item-page .post-body .twitter-tweet,
body.item-page .post-body .twitter-tweet-rendered {
    width: 60% !important;
    max-width: 420px !important;
    margin: 25px auto !important;
    min-height: 250px !important;
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    clear: both;
}


/* أ-2) طيّ التغريدات الطويلة: تحديد ارتفاع أقصى + تعتيم تدريجي + زر "عرض التغريدة كاملة" */
/* يُضاف تلقائياً بالجافاسكربت فقط عندما يتجاوز ارتفاع التغريدة الفعلي الحد المسموح */
.s24n-tweet-wrapper.s24n-tweet-collapsed {
    position: relative;
    max-height: 380px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

.s24n-tweet-expand-btn {
    display: block;
    margin: 8px auto 20px;
    padding: 10px 28px;
    background-color: #f9f9f9;
    color: #333;
    border: 2px solid #ddd;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.s24n-tweet-expand-btn:hover {
    background-color: var(--bg-body);
    color: var(--sy-green);
    border-color: var(--sy-green);
}

[data-theme="dark"] .s24n-tweet-expand-btn {
    background-color: var(--color-black);
    color: #ffffff;
    border: 2px solid #ffffff;
}

[data-theme="dark"] .s24n-tweet-expand-btn:hover {
    background-color: var(--color-black);
    color: var(--sy-green);
    border-color: var(--sy-green);
}

/* ب-1) فيسبوك (فيديو/منشور) */
body.item-page .post-body iframe[src*="facebook.com"],
body.item-page .post-body .fb-post,
body.item-page .post-body .fb-video {
    width: 70% !important;
    max-width: 550px !important;
    margin: 25px auto !important;
    display: block !important;

    /* السر لعدم القص: إزالة تقييد الارتفاع */
    height: unset !important;
    aspect-ratio: unset !important;
    min-height: 500px !important;
    max-height: none !important;

    /* السر للوضع الليلي: خلفية شفافة وإزالة الإطار */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    clear: both;
    color-scheme: light dark;
}

/* ب-2) انستغرام وتيك توك (لا يوجد تحذير موثّق مماثل من منصاتهما، تبقى بنفس المنطق السابق) */
body.item-page .post-body iframe[src*="instagram.com"],
body.item-page .post-body iframe[src*="tiktok.com"] {
    width: 70% !important;
    max-width: 550px !important;
    margin: 25px auto !important;
    display: block !important;

    height: unset !important;
    aspect-ratio: unset !important;
    min-height: 500px !important;
    max-height: none !important;

    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    clear: both;
    color-scheme: light dark;
}

/* حماية إضافية لإطارات فيسبوك الداخلية لكي تأخذ عرض الحاوية الأب
   (أُعيد فرض width: 100% هنا — تبيّن أنه ضروري فعلياً رغم تحذير فيسبوك، لأن
   إزالته أدّت إلى محتوى داخلي صغير مشوَّه داخل حاوية خارجية فارغة) */
body.item-page .post-body .fb-post span,
body.item-page .post-body .fb-post iframe,
body.item-page .post-body .fb-video span,
body.item-page .post-body .fb-video iframe {
    width: 100% !important;
    height: unset !important;
    min-height: unset !important;
    max-height: none !important;
    margin: 0 auto !important;
    background-color: transparent !important;
}


/* --------------------------------------------------------------------------
   5. الاستثناء 2: التأكيد الإجباري على إبقاء يوتيوب 16:9
----------------------------------------------------------------------------- */
.post-body iframe[src*="youtube.com"],
.post-body iframe[src*="youtu.be"] {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
}


/* --- التنسيق العام للخطوط --- */

/* 1. الخط الأساسي للموقع ونصوص المقالات (Readex Pro) */
body, p, .post-body, .post-snippet, .sy-section-desc, .s24n-cookie-text, .result-stats { font-family: 'Readex Pro', sans-serif !important; font-weight: 400; line-height: 1.8; }
/* حجم خط صفحة المقال أصبح مصدره الوحيد القسم "ب. صفحة المقالة (Item Page) - النسخة النظيفة" (19px)
   بالإضافة لمتغير JS الديناميكي (نفس القيمة الافتراضية 19px) — إزالة "18px !important" هنا
   يمنع القفزة البصرية اللحظية عند تحميل شريط أدوات المقال (sy-article-tools) */

/* 2. خط IBM Plex Sans Arabic للعناوين (الهوية الرصينة) */
h1, h2, h3, h4, .post-title, .post-title a, .sy-section-title-text, .grid-title, .theme-main-title, .stories-card__title, .live-title, .sy-news-link { font-family: 'IBM Plex Sans Arabic', sans-serif !important; font-weight: 700 !important; line-height: 1.4; }

/* أحجام مخصصة للعناوين لتبرز هويتها */
.post-title, .post-title a { font-size: 24px !important; /* عناوين الرئيسية */ }
.item-page .post-title { font-size: 30px !important; /* العنوان الداخلي الرئيسي */ }
.sy-section-title-text { font-size: 21px !important; /* عناوين الأقسام */ }

/* 3. إصلاح القائمة الجانبية اليسرى واليمنى والكبسولات */
.main-layout__column a, .main-layout__column a, #force-left-sidebar a, .dropdown-btn, .sy-standard-pill,.sy-label-text { font-family: 'Readex Pro', sans-serif !important; font-weight: 700 !important; /* جعل أسماء الأقسام بارزة */ font-size: 14.5px !important; /* حجم متناسق مع القوائم الجانبية */ }
.sy-standard-pill { font-family: 'Readex Pro', sans-serif !important; font-weight: normal !important; /* جعل أسماء الأقسام بارزة */ font-size: 13px !important; /* حجم متناسق مع القوائم الجانبية */ }

/* 4. إصلاح فني لتوقيت دمشق والبيانات الثابتة */
.sy-t-city, .sy-t-ampm, .sy-t-num, .sy-date-only, .sy-static-text { font-family: 'Readex Pro', sans-serif !important; font-size: 13.5px !important; font-weight: 400; opacity: 0.9; }

/* 5. أزرار التحكم وتحميل المزيد */
#load-more-btn, .home-link, .sy-more-btn, .poll__submit-button { font-family: 'IBM Plex Sans Arabic', sans-serif !important; font-weight: 700; font-size: 15px !important; text-transform: none; }


/* --- نهاية التنسيق العام للخطوط --- */


/* == أولاً: القواعد الهيكلية الأساسية للقالب (لا تحذف محتوياتها) (هذه هي القياسات القديمة الموجودة في قالبك وتتحكم في الهيكل العام) ================================ */


/* == min-width: 1024px |أجهزة الكمبيوتر (شاشات أكبر من 1023) ================================================================================================================================= */

@media only screen and (min-width: 1024px) {

/* 1. إعدادات الصفحة العامة والهيدر */
body { padding-top: 140px; }
.menu-toggle, #sidebar-toggle-btn, .mobile-search-icon { display: none; }
header { position: fixed; top: 40px; width: 100%; z-index: 1000; background-color: var(--color-main-header-bg); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

/* الشريط العلوي (التاريخ والتواصل الإجتماعي) */
.top-date-bar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1002; }


/* 3. القوائم الجانبية (Sticky Sidebars) */
.main-layout__column:first-child, .main-layout__column:last-child { position: -webkit-sticky !important; position: sticky !important; top: 200px !important; height: calc(100vh - 220px) !important; max-height: calc(100vh - 220px) !important; overflow-y: auto !important; overscroll-behavior: contain !important; align-self: flex-start !important; width: auto; min-width: 312px; flex-grow: 0; flex-shrink: 0; display: flex; flex-direction: column; gap: 0; scrollbar-width: none !important; -ms-overflow-style: none !important;}

.main-layout__column:first-child { padding-inline-start: 1.125rem; }

.main-layout__column:last-child { padding-inline-end: 1.125rem; }


/* إخفاء شريط التمرير للمتصفحات المختلفة */
.main-layout__column::-webkit-scrollbar, .main-layout__column::-webkit-scrollbar, #force-left-sidebar::-webkit-scrollbar { display: none !important; width: 0 !important; background: transparent !important; }

/* 4. تنسيق الروابط والعناوين داخل القائمة الجانبية */
#force-left-sidebar a, .main-layout__column a { display: flex; align-items: center; gap: 12px; font-weight: bold; color: var(--text-main); font-size: 15px; text-decoration: none; justify-content: flex-start; font-family: inherit; padding: 14px 16px 16px 8px; border-bottom: 1px solid rgba(0,0,0,0.05); }
#force-left-sidebar a:hover, .main-layout__column a:hover { opacity: 0.7; color: var(--text-main); }
#force-left-sidebar a::after, .main-layout__column a::after { content: none; }
#force-left-sidebar h3.title, .main-layout__column h3.title { display: none; }

/* 5. تنسيقات صفحة المقال (Item Page) */
/* تنسيق صورة الغلاف موجود في قسم "الصورة الأولى (غلاف المقال)" في آخر الملف */


body.item-page h1.post-title,
body.item-page h3.post-title,
body.item-page .post-body > *:not(.separator):not(img) { padding-right: 65px; padding-left: 65px; }
body.item-page h1.post-title,
body.item-page h3.post-title { font-size: 31px; margin-bottom: 20px; margin-top: 10px; }

/* 6. إضافات الفيديو والحاويات */
.video-container { top: 142px !important; }

/* --- شريط التنقل --- */
.sy-breadcrumb { padding: 12px 10px; }


}

/* == End min-width: 1024px ========================================================================================================================================================= */


/* == max-width: 1023px |التابلت والموبايل (شاشات 1023 وأصغر) ================================================================================================================================ */

@media only screen and (max-width: 1023px) {

/* --- الهيدر والقوائم العلوية --- */
header { position: fixed; inset-block-start: 0; inset-inline-end: 0; width: 100%; height: 80px; padding-block: 0 !important; padding-inline-start: 1px !important; padding-inline-end: 0 !important; background: var(--header-bg); z-index: 10000; box-shadow: 0 2px 5px rgba(0,0,0,0.1); box-sizing: border-box; }
body {  padding-top: 80px; overflow-x: hidden; }
.header-inner { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%; padding: 0; gap: 0 !important;}
.right-area { width: auto; order: 1; display: flex; align-items: center; gap: 20px; height: 100%; }
.center-area { width: auto; order: 3; margin: 0 !important; padding: 0 !important; justify-content: flex-end; }
.left-area { width: auto; order: 2; display: flex; align-items: center; margin-inline-start: 40px; }

/* --- إخفاء العناصر غير الضرورية --- */
.top-date-bar, .desktop-search-container, .icon-satellite, .language-selector, .sidebar-left, .main-layout__column, #force-left-sidebar, #HTML505, .live-tv-widget { display: none !important; }

/* --- عناصر الموبايل الظاهرة --- */
.menu-toggle, #sidebar-toggle-btn { display: block; font-size: 26px; cursor: pointer; margin-inline-start: 15px !important; }
.mobile-search-icon { display: block; font-size: 24px; padding-block: .5rem !important; padding-inline-start: .625rem !important; padding-inline-end: 0 !important; margin-inline-end: 16px; }
.logo-sy { width: 80px !important; height: 100% !important; background-color: var(--sy-green); display: flex; align-items: center; justify-content: center; margin: 0 !important; font-size: 18px; line-height: 55px; }
.logo-sy img { inline-size: 90% !important; block-size: auto !important; object-fit: contain; max-height: 90%; }
.theme-toggle-wrapper { display: flex; }

/* --- القوائم الجانبية (Logic) --- */
#main-right-sidebar { display: none; position: fixed; top: 80px; bottom: 0; left: 0; right: 0; width: 100%; height: auto; background: var(--bg-card); z-index: 99999; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 20px 100px 20px; flex-direction: column; border-top: 1px solid var(--border-color); }
body.sidebar-toggled #main-right-sidebar { display: flex !important; }
body.sidebar-toggled { overflow: hidden !important; }
body.sidebar-toggled::after { display: none; }


/* إصلاح الصفحات الخاصة (الأكثر قراءة + المحفوظات) */
body.most-read-page.sidebar-toggled #main-right-sidebar, body.saved-page-mode.sidebar-toggled #main-right-sidebar { width: 100% !important; position: fixed !important; top: 80px !important; left: 0 !important; bottom: 0 !important; z-index: 99999 !important; }

/* إخفاء العناصر عند فتح القائمة */
body.sidebar-toggled .mini-live__wrapper, body.sidebar-toggled #miniLiveWidget, body.sidebar-toggled .nav-arrow { display: none !important; }
body.sidebar-toggled .btn-live, body.sidebar-toggled .mobile-search-icon, body.sidebar-toggled #themeToggle { display: none !important; }
body.sidebar-toggled .main-layout, body.sidebar-toggled .rt-footer, body.sidebar-toggled .ad-banner-wrapper, body.sidebar-toggled .important-sections { z-index: 1; position: relative; }

.breaking-news-container, #breakingNewsContainer { z-index: 990 !important; }
body.sidebar-toggled .breaking-news-container, body.sidebar-toggled #breakingNewsContainer { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: -1 !important; }

/* القائمة المنقولة للموبايل */
.mobile-moved-sidebar {  margin-top: 20px;  border-top: 1px solid #eee; padding-top: 10px; }
.mobile-moved-sidebar a { display: flex; align-items: center; padding: 15px 5px; font-size: 16px; border: none; border-bottom: 1px solid rgba(0,0,0,0.05) !important; color: var(--text-main); text-decoration: none; width: 100%; box-sizing: border-box; background-color: transparent !important; }
.mobile-moved-sidebar ul, .mobile-moved-sidebar li { list-style: none; padding: 0; margin: 0; width: 100%; }

/* --- التخطيط العام (Layout) --- */
.main-layout { flex-direction: column; width: 100%; padding: 0; margin-top: 10px; }

/* --- شريط الأخبار العاجلة --- */
.breaking-news-container { inset-block-start: var(--sticky-top-offset); }
.breaking-news-container .widget-content, .breaking-news-container .widget-content a, .breaking-news-container .widget-content span { font-size: 0.875rem !important; padding-inline: 10px; padding-block: 0; }

/* --- تنسيق المقال الداخلي وإصلاح الصور للموبايل --- */
body.item-page h1.post-title, body.item-page h3.post-title, body.item-page .post-body > *:not(.separator):not(img) { padding-right: 20px; padding-left: 20px; }

/* --- فيديو البث المباشر --- */
.video-container { top: 80px !important; }

/* --- أيقونات التواصل الاجتماعي للموبايل --- */
#Mobile_Social_Section { display: block !important; order: 999 !important; margin-top: 20px; border-top: 1px solid #eee; padding-top: 20px; text-align: center; background-color: transparent; width: 100%; }

#Mobile_Social_Section h2 { display: none !important; }

.mobile-social-custom ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; }

.mobile-social-custom a { display: flex !important; align-items: center; justify-content: center; width: 33px; height: 33px; background-color: #f0f0f0; border-radius: 50%; text-decoration: none; transition: background-color 0.3s; border: none !important; padding: 0 !important; }

.mobile-social-custom svg { width: 18px; height: 18px; fill: #333; display: block; transition: fill 0.3s; }

.mobile-social-custom a:hover { background-color: var(--sy-green); }

.mobile-social-custom a:hover svg { fill: #fff; }


}

/* == End max-width: 1023px ============================================================================================================================================================== */


/* == max-width: 768px |الهواتف (شاشات 768 وأصغر) ============================================================================================================================================ */

@media only screen and (max-width: 768px) {


/* شبكة الأخبار المميزة (الرئيسية والأقسام) */
#special-news-grid,#category-special-grid,#special-news-grid .sub-grid,#category-special-grid .sub-grid{display:flex;flex-direction:column;gap:0}
#special-news-grid .grid-item,#category-special-grid .grid-item{display:flex !important;flex-direction:row !important;align-items:flex-start;justify-content:space-between;gap:15px;padding:15px 0;margin-bottom:0 !important;border-bottom:1px solid var(--border-color);height:auto !important}
#special-news-grid .grid-item.main-story,#category-special-grid .grid-item.main-story{padding-bottom:15px !important;border-bottom:1px solid var(--border-color) !important}
#special-news-grid .grid-item:last-child,#special-news-grid .sub-grid .grid-item:last-child,#category-special-grid .grid-item:last-child,#category-special-grid .sub-grid .grid-item:last-child{border-bottom:none;padding-bottom:0}
#special-news-grid .grid-item img,#category-special-grid .grid-item img{width:190px !important;height:125px !important;object-fit:cover;transition:all .4s ease;filter:brightness(100%);border-radius:8px !important;flex-shrink:0;display:block;margin:0 !important}
#special-news-grid .grid-item:hover img,#category-special-grid .grid-item:hover img{filter:brightness(110%); transform: none !important;}
#special-news-grid .grid-item .grid-content,#category-special-grid .grid-item .grid-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}
#special-news-grid .grid-item .grid-title,#category-special-grid .grid-item .grid-title{font-size:14px !important;font-weight:bold;line-height:1.5;margin:0 !important;color:var(--text-main) !important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* تضمينات التواصل الاجتماعي في المقالة */
.post-body iframe:not([id^="BLOGGER-video"]), .post-body video, .post-body embed, .post-body object.BLOG_video_class { width: 85% !important; max-width: 85% !important; margin: 20px auto !important; border-radius: 4px; }

/* أ) تويتر/X على الموبايل - منفصل لأن ارتفاعه متغير حسب طول التغريدة */
body.item-page .post-body iframe[id^="twitter-widget-"],
body.item-page .post-body iframe[src*="platform.twitter.com"],
body.item-page .post-body .twitter-tweet,
body.item-page .post-body .twitter-tweet-rendered {
    width: 65% !important;
    max-width: 65% !important;
    margin: 20px auto !important;
    min-width: 280px !important;
    min-height: 200px !important;
}
/* ب-1) فيسبوك على الموبايل */
body.item-page .post-body iframe[src*="facebook.com"],
body.item-page .post-body .fb-post,
body.item-page .post-body .fb-video {
    width: 70% !important;
    max-width: 70% !important;
    margin: 20px auto !important;
    min-width: 280px !important;
    height: unset !important;
    aspect-ratio: unset !important;
    min-height: 200px !important;
}
/* ب-2) انستغرام وتيك توك على الموبايل - بلا تغيير */
body.item-page .post-body iframe[src*="instagram.com"],
body.item-page .post-body iframe[src*="tiktok.com"],
body.item-page .post-body .instagram-media,
body.item-page .post-body .tiktok-embed {
    width: 70% !important;
    max-width: 70% !important;
    margin: 20px auto !important;
    min-width: 280px !important;
    height: unset !important;
    aspect-ratio: unset !important;
    min-height: 200px !important;
}


/* إقرأ المزيد */
.sy-related-grid { grid-template-columns: 1fr; gap: 12px; }
.sy-related-card { flex-direction: row; align-items: center; height: auto; }
.sy-related-thumb { width: 110px !important; height: 85px !important; border-radius: 0 8px 8px 0; }
.sy-related-info { padding: 10px 15px; width: calc(100% - 110px); }
.sy-related-card-title { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* شريط التنقل */
.sy-breadcrumb { font-size: 12px; padding: 8px 10px; }
.sy-bc-current { max-width: 160px; }

/* شريط معلومات المقال */
.sy-post-meta { font-size: 13px !important; margin-top: 15px; margin-bottom: 10px; }
.sy-meta-label { margin-left: 10px !important; }
.sy-meta-separator { margin: 0 5px !important; }
.sy-date-only, .sy-time-only, .sy-static-text, .sy-t-city, .sy-t-ampm, .sy-t-num { font-size: 13px !important; }

/* تحسينات وإصلاحات التعليقات والردود */
.comments, #comments { padding-right: 20px !important; padding-left: 20px !important; box-sizing: border-box !important; width: 100% !important; }
body #comments .avatar-image-container { width: 35px !important; height: 35px !important; }
body #comments .comment { padding-right: 48px !important; }
body #comments .comment-block { min-width: 100% !important; padding: 10px 12px !important; }
body #comments .comment-thread .comment-thread { padding-right: 12px !important; margin-right: 0 !important; }

/* التغطية الحية */
.live-event-row { padding: 12px 15px; }
.live-event-row:hover { padding-right: 20px; }
.live-event-text { font-size: 14px; }
.live-card-title { font-size: 15px; }
.live-card-body { max-height: 200px; } /* تصغير ارتفاع الصندوق ليناسب الشاشات الأصغر */

/* تنسيق الإعلانات */
.ad-banner-wrapper{margin:15px auto 25px auto;border-radius:0!important;width:100%}.ad-banner-wrapper img,.ad-banner-wrapper ins.adsbygoogle,.ad-under-post-wrapper,.ad-under-post-wrapper img,.ad-under-post-wrapper iframe,.ad-under-post-wrapper ins.adsbygoogle,#in-article-ad-wrapper ins.adsbygoogle{border-radius:0!important}

/* شبكة التصنيفات الفرعية المخصصة للمنوعات */
.news-themes__wrapper { grid-template-columns: 1fr !important; gap: 15px !important; }
.theme-main-img { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; }
.theme-main-title { font-size: 16px !important; padding: 12px 10px 0 !important; line-height: 1.4 !important; }
.theme-sub-link { font-size: 14px !important; }
.theme-sub-item { padding: 10px !important; }
.theme-section__button-block { padding: 15px !important; }


/* ***. تحسينات التجاوب للخطوط في الموبايل (Mobile Responsive) */
.item-page .post-title { font-size: 24px !important; /* تصغير العنوان قليلاً في الهاتف */}
.post-title { font-size: 20px !important; }


}

/* == End max-width: 768px =============================================================================================================================================================== */


/* == max-width: 600px ================================================================================================================================================================= */

@media only screen and (max-width:600px){

/* شبكة الأخبار المميزة (الرئيسية والأقسام) */
#special-news-grid .grid-item img,#category-special-grid .grid-item img{width:160px !important;height:110px !important}


/* تخصيص المشاركة المميزة */
.FeaturedPost .post-info,.FeaturedPost .summary-content,.FeaturedPost .post-summary{padding:15px!important}.FeaturedPost h3.post-title,.FeaturedPost .post-title,.FeaturedPost h3{font-size:15px!important;-webkit-line-clamp:3!important}

/* تخصيص المشاركة المثبتة */
.hero-img{width:160px;height:110px;flex:0 0 160px}.hero-content{width:calc(100% - 160px);padding:10px 12px}.hero-title{font-size:14px;-webkit-line-clamp:3}

}


/* == End max-width: 600px ============================================================================================================================================================= */


/* == ثانياً: خريطة التجاوب الدقيقة (S24News Master Breakpoints) (تُضاف الأكواد هنا لضبط العناصر بدقة عالية مثل الإعلانات والصور والخطوط) ===================================== */


/* == (min-width: 1921px) | 1. شاشات عملاقة (Ultra Wide) =================================================================================================================================== */

@media screen and (min-width: 1921px) {

/* الشريط العلوي (التاريخ والتواصل الإجتماعي) */
.top-date-bar { height: 3rem; }
.date-display { font-size: 1.1rem; }
.top-social-icons ul.social-list-ul { gap: 1.5em; }
.top-icon { width: 1.4em; height: 1.4em; }

}


/* == End (min-width: 1921px) ========================================================================================================================================================== */


/* == (min-width: 1201px) and (max-width: 1920px) | 2. شاشات المكتب القياسية (Desktop) ======================================================================================================= */

@media screen and (min-width: 1201px) and (max-width: 1920px) {

/* الشريط العلوي (التاريخ والتواصل الإجتماعي) */
.top-date-bar { height: 2.5rem; }
.date-display { font-size: 0.875rem; }
.top-social-icons ul.social-list-ul { gap: 1.2em; }
.top-icon { width: 1.2em; height: 1.2em; }


}

/* == End (min-width: 1201px) and (max-width: 1920px) ================================================================================================================================= */


/* == (min-width: 1025px) and (max-width: 1200px) | 3. اللابتوب والشاشات المتوسطة (Laptops) =================================================================================================== */

@media screen and (min-width: 1025px) and (max-width: 1200px) {

/* نفس قيم فئة "المكتب" أعلاه — تم نقلها هنا حرفيًا بعد فصل النطاقين لتفادي التداخل، بدون أي تغيير بالمظهر الفعلي */
.top-date-bar { height: 2.5rem; }
.date-display { font-size: 0.875rem; }
.top-social-icons ul.social-list-ul { gap: 1.2em; }
.top-icon { width: 1.2em; height: 1.2em; }

}

/* == End (min-width: 1025px) and (max-width: 1200px) ================================================================================================================================= */


/* == (min-width: 769px) and (max-width: 1023px) | 4. تابلت - الوضع العرضي والطولي (Tablets) ========================================================================================================================== */

@media screen and (min-width: 769px) and (max-width: 1023px) {


}


/* == End (min-width: 769px) and (max-width: 1023px) ================================================================================================================================= */


/* == (min-width: 481px) and (max-width: 768px) | 5. هواتف كبيرة / تابلت صغير (Large Phones) ============================================================================================== */

@media screen and (min-width: 481px) and (max-width: 768px) {


}

/* == End (min-width: 481px) and (max-width: 768px) ================================================================================================================================= */


/* == max-width: 480px | 6-7. الهواتف الذكية والصغيرة (Standard & Small Phones) — تم دمج فئتي 376-480 و ≤375 لأن محتواهما كان مكررًا حرفيًا بالكامل ================================================================================================= */

@media screen and (max-width: 480px) {

.right-area { gap: 8px; }
 .left-area { margin-inline-start: 10px; }
 .logo-sy { inline-size: 72px !important; }
 .btn-live { min-width: 3.6rem; padding: 0 0.6rem; }
 .mobile-search-icon { padding-block: 5px !important; padding-inline-start: 0 !important; padding-inline-end: 2px !important; }

}

/* == End max-width: 480px ========================================================================================================================================================== */


/* ================== نهاية خريطة التجاوب ================== */


/* ==========================================================================
   🔴 نظام البث المباشر الموحد (Live Stream System)
   ========================================================================== */

/* 1. تخصيصات VideoJS المشتركة */
.video-js { width: 100% !important; height: 100% !important; position: absolute !important; top: 0; left: 0; z-index: 5; }
.video-js .vjs-big-play-button, .video-js .vjs-picture-in-picture-control, .video-js .vjs-current-time, .video-js .vjs-time-control, .video-js .vjs-duration, .video-js .vjs-remaining-time, .video-js .vjs-time-divider { display: none !important; }
.video-js .vjs-progress-control { display: flex !important; visibility: visible !important; opacity: 1 !important; }
.video-js .vjs-play-progress { background-color: var(--sy-green) !important; transition: none !important; }
.video-js .vjs-play-progress:before { color: #ffffff !important; background-color: #ffffff !important; border-radius: 50%; box-shadow: 0 0 5px rgba(0,0,0,0.5); top: -0.3em; transition: none !important; transform: none !important; }
.video-js.is-at-live-edge .vjs-play-progress:before { color: var(--color-red) !important; background-color: var(--color-red) !important; box-shadow: 0 0 8px rgba(231, 20, 20, 0.8) !important; }
.video-js .vjs-progress-control:hover .vjs-progress-holder { font-size: 1em !important; }
.video-js .vjs-progress-control:hover .vjs-play-progress:before { transform: none !important; top: -0.3em !important; }
.video-js .vjs-volume-level { background-color: #fff !important; }

/* 2. حاوية الفيديو والزر الوهمي (مشترك) */
.fake-poster, .fake-poster-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.fake-play-btn, .fake-play-btn-main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; background-color: rgba(0, 0, 0, 0.6); border-radius: 12px; z-index: 2; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(0,0,0,0.3); border: 2px solid rgba(255,255,255,0.8); transition: all 0.2s ease; }
.fake-play-btn svg, .fake-play-btn-main svg { width: 24px; height: 24px; fill: #fff; transition: fill 0.2s; margin-left: 5px; }
.video-container:hover .fake-play-btn, .video-container:hover .fake-play-btn-main { background-color: rgba(255, 255, 255, 0.8); transform: translate(-50%, -50%) scale(1.1); border-color: #ffffff; }
.video-container:hover .fake-play-btn svg, .video-container:hover .fake-play-btn-main svg { fill: var(--sy-green); }
.sidebar-loader, .player-loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; border-top: 3px solid var(--sy-green); width: 30px; height: 30px; animation: spinSidebar 1s linear infinite; display: none; z-index: 3; }
@keyframes spinSidebar { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }

/* 🟢 إصلاح: رسالة تظهر عند فشل تحميل مشغل الفيديو الخارجي (video.js) بعد مهلة 10 ثوانٍ */
.video-load-error { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 13px; line-height: 1.6; text-align: center; z-index: 3; padding: 10px 16px; background: rgba(0,0,0,0.55); border-radius: 8px; max-width: 80%; }

/* 3. الأداة الجانبية */
.live-tv-widget { background-color: var(--color-black); border: 1px solid #333; overflow: hidden; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); width: 100%; position: relative; flex-shrink: 0 !important; }

/* 4. صفحة البث الرئيسية */
body.live-page-mode #Blog1, body.live-page-mode .blog-posts, body.live-page-mode .sy-no-results, body.live-page-mode .comments, body.live-page-mode #comments, body.live-page-mode .post-footer { display: none !important; }
.live-stream-wrapper { background-color: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: 10px !important; padding: 0 !important; overflow: visible !important; margin-bottom: 20px; position: relative; direction: rtl; width: 100%; }
.live-content-inner { padding: 20px 0 30px 0 !important; color: var(--text-main) !important; }
.live-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 10px 15px 15px 15px; }
.live-title { font-size: 24px; font-weight: 900; margin: 0; color: var(--text-main) !important; }
.status-badge { background: rgba(231, 20, 20, 0.1); color: var(--color-red); padding: 5px 15px; border-radius: 20px; font-weight: bold; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pulse-dot { width: 10px; height: 10px; background-color: var(--color-red); border-radius: 50%; display: inline-block; animation: pulse-red 2s infinite; }
@keyframes pulse-red { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(231, 20, 20, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(231, 20, 20, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(231, 20, 20, 0); } }
.live-info-box { background: var(--hover-bg) !important; padding: 25px; margin-top: 0; color: var(--text-main) !important; }
.live-info-box h3 { color: var(--sy-green) !important; margin: 0 0 10px 0; font-size: 20px; }

/* 5. الشريط المصغر للموبايل */
.mini-live__wrapper { display: none; position: fixed; bottom: 0; inset-inline-start: 0; z-index: 999999; inline-size: 100%; block-size: 57px; padding: 0; box-sizing: border-box; background-color: var(--bg-card, #ffffff); border-top: 1px solid var(--border-color, #eee); box-shadow: 0 -2px 10px rgba(0,0,0,0.1); align-items: center; justify-content: space-between; gap: 8px; padding-inline-end: 10px; direction: rtl; }
.mini-live__video-box { inline-size: 102px; block-size: 57px; flex-shrink: 0; background-color: var(--color-black, #000); border-inline-end: 1px solid var(--border-color, #ddd); overflow: hidden; }
.mini-live__video-box iframe { inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; }
.mini-live__link { flex-grow: 1; background-color: var(--color-red, #e71414); color: var(--color-white, #ffffff); border-radius: 4px; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; block-size: 42px; line-height: 1.2; transition: opacity 0.3s; margin: 0 !important; }
.mini-live__link:hover { opacity: 0.9; }
.mini-live__link span:first-child { font-size: 12px; font-weight: 700; }
.mini-live__desc { font-size: 9px; opacity: 0.9; }
.mini-live__button { background-color: var(--hover-bg, #f5f5f5); inline-size: 26px; block-size: 26px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0; }
.mini-live__button svg { inline-size: 16px; block-size: 16px; fill: var(--text-sec, #555); }
.mini-live__video-box .video-js * { box-shadow: none !important; text-shadow: none !important; }
@media only screen and (max-width: 768px) {
    .mini-live__wrapper { display: flex; animation: slideUpLive 0.4s ease-out; }
    .live-return-pill { bottom: 65px !important; }
}
@keyframes slideUpLive { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* 6. زر العودة للبث */
.live-return-pill { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--sy-green); color: #fff; display: flex; align-items: center; gap: 12px; padding: 12px 25px; border-radius: 50px; font-size: 14px; font-weight: bold; text-decoration: none; box-shadow: 0 8px 25px rgba(119, 189, 29, 0.4); z-index: 999999; opacity: 0; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.live-return-pill.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.live-indicator-dot { width: 10px; height: 10px; background-color: var(--color-red); border-radius: 50%; position: relative; }
.live-indicator-dot::after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: var(--color-red); animation: pulse-dot 1.5s infinite; }
@keyframes pulse-dot { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3); opacity: 0; } }


/* ==========================================================================
   🔴 نهاابة نظام البث المباشر الموحد (Live Stream System)
   ========================================================================== */


/* ================================================= */
/* 💻 شاشات الكمبيوتر العادية والعملاقة (1201px وأكبر) */
/* ================================================= */
@media screen and (min-width: 1201px) {
    .main-container {
        max-width: 864px !important; /* تثبيت العرض الأقصى للعمود */
        padding-bottom: 72px !important; /* 🎯 التعديل هنا: 72 بكسل بالضبط */
    }
}

/* ================================================= */
/* 📺 الشاشات العملاقة (أكبر من 1450px) */
/* ================================================= */
@media screen and (min-width: 1450px) {
    .main-container {
        padding-inline: 72px; /* زيادة الحشوة الجانبية لتصبح القراءة مريحة */
        /* 💡 لا نحتاج لكتابة البادينغ السفلي هنا، لأنه سيرث الـ 72px من كود الكمبيوتر تلقائياً! */
    }
}


/* =========================================================
   1. الصورة الأولى (غلاف المقال): عريضة وسينمائية 16:9
========================================================= */
body.item-page .post-body > .separator:first-of-type img,
body.item-page .post-body > img:first-of-type {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    margin-bottom: 25px !important;
    border-radius: 0px !important; /* اختياري: يجعل زوايا الغلاف دائرية */
}

/* =========================================================
   2. الصور الفرعية داخل المقال (الكمبيوتر): أنيقة، موسطة، وغير قبيحة
========================================================= */
body.item-page .post-body img:not(:first-of-type):not(.swiper-slide img):not(.album-item img),
body.item-page .post-body .separator:not(:first-of-type) img:not(.swiper-slide img):not(.album-item img) {
    display: block !important;
    height: auto !important;

    /* 🟢 السر هنا: منع الصورة من أخذ أكثر من 75% من الشاشة لتكون أنيقة جداً */
    max-width: 75% !important;

    /* التوسيط مع مسافات فوق وتحت */
    margin: 30px auto !important;

    /* اللمسات الجمالية */
    border-radius: 10px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
    object-fit: contain !important;
}

/* =========================================================
   3. هندسة المسافات للنصوص والعناوين (كمبيوتر)
========================================================= */
body.item-page h1.post-title,
body.item-page h3.post-title {
    font-size: 31px;
    margin: 10px 0 10px 0;
    padding-right: 65px;
    padding-left: 65px;
}

/* =========================================================
   4. التجاوب مع الموبايل والتابلت (الشاشات أقل من 768px)
========================================================= */
@media only screen and (max-width: 768px) {

    /* القاعدة الموحّدة الوحيدة لصور المقال (غير الأولى) على الموبايل
       — تجمع كل الخصائص التي كانت موزعة على 3 نسخ متضاربة، وتحافظ على
       استثناء صور السلايدر/الألبوم من الظل والتقييد */
    body.item-page .post-body img:not(:first-of-type):not(.swiper-slide img):not(.album-item img),
    body.item-page .post-body .separator:not(:first-of-type) img:not(.swiper-slide img):not(.album-item img) {
        display: block !important;
        height: auto !important;
        max-width: 90% !important;
        margin: 20px auto !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        object-fit: contain !important;
    }

    /* تقليل الفراغات الجانبية للنصوص في الموبايل حتى لا يُحصر النص */
    body.item-page h1.post-title,
    body.item-page h3.post-title,
    body.item-page .post-body > *:not(.separator):not(img) {
        padding-right: 20px;
        padding-left: 20px;
    }

    body.item-page h1.post-title,
    body.item-page h3.post-title {
        font-size: 24px;
    }
}