/*
 * MaintainPro — مكوّنات المقالات الجديدة.
 *
 * المقالات المنقولة من الموقع الثابت تحمل أنماطها الخاصة في page-blog_*.css.
 * هذا الملف هو النظام الموحّد للمقالات الجديدة: نفس توكنز الهوية،
 * ومكوّنات جاهزة يستدعيها المحرّر بأسماء فئات ثابتة دون كتابة CSS.
 *
 * يُحمَّل تلقائيًا لأي مقال يحمل الفئة .mp-article على غلافه.
 */

/* ── التخطيط ─────────────────────────────────────────────── */
.mp-article{ --col: 44rem; }
.mp-article .art-hero{
  background: linear-gradient(148deg, var(--pp) 0%, #F5F9FF 45%, var(--sp) 100%);
  padding: 44px var(--pad) 40px;
  border-bottom: 1px solid var(--n200);
}
.mp-article .art-hero-in{ max-width: 1180px; margin: 0 auto; }
.mp-article .art-h1{
  font-family: var(--fh); font-size: clamp(26px, 4vw, 40px); font-weight: 900;
  color: var(--n900); line-height: 1.28; margin: 12px 0 14px; max-width: 22ch;
}
.mp-article .art-lead{
  font-size: 17px; line-height: 1.85; color: var(--n600); max-width: 62ch; margin: 0;
}
.mp-article .art-meta{
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px;
  padding-top: 18px; border-top: 1px solid rgba(26,95,168,.14);
  font-size: 13px; color: var(--n600);
}
.mp-article .art-meta-item{ display: inline-flex; align-items: center; gap: 6px; }
.mp-article .art-meta-item i{ color: var(--p); font-size: 12px; }

.mp-article .art-wrap{
  max-width: 1180px; margin: 0 auto; padding: 40px var(--pad) 0;
  display: grid; gap: 40px; grid-template-columns: 1fr;
}
@media (min-width: 1000px){
  .mp-article .art-wrap{ grid-template-columns: minmax(0,1fr) 17rem; }
}

/* ── الشريط الجانبي ───────────────────────────────────────── */
.mp-article .art-side{ display: none; }
@media (min-width: 1000px){
  .mp-article .art-side{ display: block; position: sticky; top: 84px; align-self: start; }
}
.mp-article .toc{
  border: 1px solid var(--n200); border-radius: var(--r-lg);
  background: var(--white); overflow: hidden;
}
.mp-article .toc-head{
  background: var(--pd); color: #fff; padding: 12px 16px;
  font-family: var(--fh); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.mp-article .toc-body{ padding: 8px; max-height: 60vh; overflow-y: auto; }
.mp-article .toc a{
  display: block; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--n600); line-height: 1.5; transition: all .16s;
}
.mp-article .toc a:hover{ background: var(--pp); color: var(--p); }
.mp-article .toc a.on{ background: var(--pp); color: var(--p); font-weight: 600; }
.mp-article .toc a.lvl3{ padding-inline-start: 22px; font-size: 12.5px; }

/* ── المتن ────────────────────────────────────────────────── */
.mp-article .prose{ max-width: var(--col); font-size: 16px; line-height: 1.9; color: var(--n800); }
.mp-article .prose > *{ max-width: 100%; }
.mp-article .prose h2{
  font-family: var(--fh); font-size: 25px; font-weight: 800; color: var(--n900);
  line-height: 1.35; margin: 48px 0 16px; padding-inline-start: 14px;
  border-inline-start: 4px solid var(--p); scroll-margin-top: 84px;
}
.mp-article .prose h3{
  font-family: var(--fh); font-size: 19px; font-weight: 700; color: var(--n900);
  margin: 34px 0 12px; scroll-margin-top: 84px;
}
.mp-article .prose p{ margin: 0 0 16px; }
.mp-article .prose ul, .mp-article .prose ol{ margin: 0 0 18px; padding-inline-start: 22px; }
.mp-article .prose li{ margin-bottom: 9px; }
.mp-article .prose ul li{ list-style: disc; }
.mp-article .prose ol li{ list-style: decimal; }
.mp-article .prose strong{ color: var(--n900); font-weight: 700; }
.mp-article .prose a{ color: var(--p); text-decoration: underline; text-underline-offset: 3px; }
.mp-article .prose a:hover{ color: var(--pd); }

/* ── الإجابة المباشرة ─────────────────────────────────────── */
.mp-article .answer{
  background: var(--n900); color: #fff; border-radius: var(--r-xl);
  padding: 26px 28px; margin: 0 0 34px;
}
.mp-article .answer-label{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--fh); font-size: 11px; font-weight: 800; letter-spacing: .04em;
  background: rgba(255,255,255,.12); color: #fff;
  padding: 4px 13px; border-radius: 30px; margin-bottom: 13px;
}
.mp-article .answer p{ margin: 0 0 12px; font-size: 16.5px; line-height: 1.85; color: rgba(255,255,255,.92); }
.mp-article .answer p:last-child{ margin: 0; }
.mp-article .answer strong{ color: #fff; }

/* ── صناديق التنبيه ───────────────────────────────────────── */
.mp-article .box{
  border-radius: var(--r-lg); padding: 20px 22px; margin: 0 0 26px;
  border: 1px solid var(--n200); background: var(--n50);
}
.mp-article .box-t{
  font-family: var(--fh); font-weight: 700; font-size: 15px;
  margin: 0 0 8px; display: flex; align-items: center; gap: 9px;
}
.mp-article .box p:last-child, .mp-article .box ul:last-child{ margin-bottom: 0; }
.mp-article .box--info{ background: var(--pp); border-color: rgba(26,95,168,.18); }
.mp-article .box--info .box-t{ color: var(--p); }
.mp-article .box--ok{ background: var(--sp); border-color: rgba(30,122,92,.18); }
.mp-article .box--ok .box-t{ color: var(--s); }
.mp-article .box--warn{ background: var(--wp); border-color: rgba(212,146,10,.2); }
.mp-article .box--warn .box-t{ color: var(--w); }
.mp-article .box--stop{ background: #FEE7E7; border-color: rgba(192,57,43,.18); }
.mp-article .box--stop .box-t{ color: #C0392B; }

/* ── الجداول ──────────────────────────────────────────────── */
.mp-article .t-wrap{
  overflow-x: auto; margin: 0 0 28px; border: 1px solid var(--n200);
  border-radius: var(--r-lg); background: var(--white);
}
.mp-article table{ width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 30rem; }
.mp-article th, .mp-article td{
  padding: 12px 15px; text-align: start; border-bottom: 1px solid var(--n100);
  vertical-align: top; line-height: 1.65;
}
.mp-article th{
  background: var(--n50); font-family: var(--fh); font-weight: 700;
  font-size: 13px; color: var(--n800); white-space: nowrap;
  border-bottom: 1px solid var(--n200);
}
.mp-article tbody tr:last-child td{ border-bottom: 0; }
.mp-article tbody tr:hover{ background: var(--n50); }
.mp-article td .yes{ color: var(--s); font-weight: 700; }
.mp-article td .no{ color: var(--n400); }

/* ── قائمة تحقق ───────────────────────────────────────────── */
.mp-article .check{
  list-style: none !important; padding: 0 !important; margin: 0 0 26px;
  display: grid; gap: 10px;
}
.mp-article .check li{
  list-style: none !important; margin: 0;
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
  background: var(--white); border: 1px solid var(--n200);
  border-radius: var(--r-md); padding: 13px 15px; line-height: 1.7;
}
.mp-article .check li::before{
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  color: var(--s); font-size: 12px; width: 22px; height: 22px;
  background: var(--sp); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}

/* ── بطاقات ───────────────────────────────────────────────── */
.mp-article .cards{
  display: grid; gap: 14px; margin: 0 0 28px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.mp-article .card-x{
  background: var(--white); border: 1px solid var(--n200);
  border-radius: var(--r-lg); padding: 18px 20px;
}
.mp-article .card-x h4{
  font-family: var(--fh); font-size: 15px; font-weight: 700; color: var(--n900);
  margin: 0 0 7px; display: flex; align-items: center; gap: 9px;
}
.mp-article .card-x h4 i{ color: var(--p); font-size: 14px; }
.mp-article .card-x p{ margin: 0; font-size: 14px; color: var(--n600); line-height: 1.7; }

/* ── شريط الأرقام ─────────────────────────────────────────── */
.mp-article .figures{
  display: grid; gap: 1px; background: var(--n200);
  border: 1px solid var(--n200); border-radius: var(--r-lg);
  overflow: hidden; margin: 0 0 28px;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
.mp-article .fig{ background: var(--white); padding: 18px 14px; text-align: center; }
.mp-article .fig-v{
  font-family: var(--fh); font-size: 26px; font-weight: 900; color: var(--p);
  line-height: 1.15; display: block;
}
.mp-article .fig-l{ font-size: 12.5px; color: var(--n600); margin-top: 5px; display: block; line-height: 1.5; }

/* ── الرسوم البيانية ──────────────────────────────────────── */
.mp-article .chart{
  border: 1px solid var(--n200); border-radius: var(--r-lg);
  background: var(--white); padding: 22px; margin: 0 0 28px;
}
.mp-article .chart-t{
  font-family: var(--fh); font-weight: 700; font-size: 15px; color: var(--n900);
  margin: 0 0 4px; display: flex; align-items: center; gap: 9px;
}
.mp-article .chart-t i{ color: var(--p); }
.mp-article .chart-s{ font-size: 13px; color: var(--n400); margin: 0 0 18px; line-height: 1.6; }
.mp-article .chart svg{ width: 100%; height: auto; display: block; overflow: visible; }
.mp-article .chart-n{
  font-size: 12px; color: var(--n400); margin: 16px 0 0; line-height: 1.6;
  padding-top: 12px; border-top: 1px solid var(--n100);
}

/* شريط أفقي مقارن */
.mp-article .hbars{ display: grid; gap: 13px; }
.mp-article .hbar-r{ display: grid; grid-template-columns: 1fr; gap: 5px; }
.mp-article .hbar-h{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; }
.mp-article .hbar-h b{ font-family: var(--fh); font-weight: 700; color: var(--n800); }
.mp-article .hbar-h span{ font-family: var(--fh); font-size: 12.5px; color: var(--n600); }
.mp-article .hbar-t{ height: 9px; background: var(--n100); border-radius: 5px; overflow: hidden; }
.mp-article .hbar-f{ height: 100%; border-radius: 5px; background: var(--p); }

/* ── سير العمل ────────────────────────────────────────────── */
.mp-article .flow{
  display: grid; gap: 10px; margin: 0 0 28px;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.mp-article .flow-s{
  background: var(--white); border: 1px solid var(--n200);
  border-radius: var(--r-md); padding: 15px 14px; position: relative;
}
.mp-article .flow-n{
  width: 24px; height: 24px; border-radius: 50%; background: var(--p); color: #fff;
  font-family: var(--fh); font-weight: 800; font-size: 12px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 9px;
}
.mp-article .flow-s h4{ font-family: var(--fh); font-size: 14px; font-weight: 700; margin: 0 0 5px; color: var(--n900); }
.mp-article .flow-s p{ margin: 0; font-size: 13px; color: var(--n600); line-height: 1.6; }

/* ── قبل / بعد ────────────────────────────────────────────── */
.mp-article .vs{ display: grid; gap: 14px; margin: 0 0 28px; }
@media (min-width: 620px){ .mp-article .vs{ grid-template-columns: 1fr 1fr; } }
.mp-article .vs-c{ border: 1px solid var(--n200); border-radius: var(--r-lg); overflow: hidden; background: var(--white); }
.mp-article .vs-h{
  padding: 12px 16px; font-family: var(--fh); font-weight: 700; font-size: 14px; color: #fff;
  display: flex; align-items: center; gap: 8px;
}
.mp-article .vs-c--a .vs-h{ background: var(--n600); }
.mp-article .vs-c--b .vs-h{ background: var(--s); }
.mp-article .vs-b{ padding: 14px 16px; }
.mp-article .vs-b ul{ margin: 0; padding: 0; list-style: none !important; }
.mp-article .vs-b li{
  list-style: none !important; padding: 7px 0; font-size: 14px; line-height: 1.65;
  border-bottom: 1px solid var(--n100); margin: 0;
}
.mp-article .vs-b li:last-child{ border-bottom: 0; }

/* ── نداء الإجراء داخل المقال ─────────────────────────────── */
.mp-article .cta-in{
  background: linear-gradient(135deg, var(--pd), var(--p));
  border-radius: var(--r-xl); padding: 26px 28px; margin: 34px 0; color: #fff;
}
.mp-article .cta-in h3{
  font-family: var(--fh); font-size: 20px; font-weight: 800; color: #fff;
  margin: 0 0 8px; line-height: 1.4;
}
.mp-article .cta-in p{ margin: 0 0 16px; color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.75; }
.mp-article .cta-in .btns{ display: flex; gap: 11px; flex-wrap: wrap; }

/* ── الأسئلة الشائعة ──────────────────────────────────────── */
.mp-article .faq-wrap{ margin: 44px 0 0; }
.mp-article .faq-wrap h2{ margin-top: 0; }

/* ── الوسوم والمصادر ──────────────────────────────────────── */
.mp-article .sources{ margin: 34px 0 0; padding-top: 20px; border-top: 1px solid var(--n200); }
.mp-article .sources h3{ font-size: 15px; margin: 0 0 10px; }
.mp-article .sources ol{ margin: 0; padding-inline-start: 20px; font-size: 13.5px; color: var(--n600); }
.mp-article .sources li{ margin-bottom: 6px; }

@media (max-width: 720px){
  .mp-article .art-hero{ padding: 32px var(--pad) 28px; }
  .mp-article .prose h2{ font-size: 21px; margin-top: 38px; }
  .mp-article .answer{ padding: 20px; }
}