/* MaintainPro — طبقة الصفحات التجارية (BOFU / Transactional).
   تُحمَّل فقط عند وجود الفئة mp-commercial في محتوى الصفحة — انظر inc/assets.php.
   تعتمد متغيّرات base.css ولا تعيد تعريف أي مكوّن مشترك. */

.mp-commercial { --mpc-max: 1200px }

/* ── البطل ───────────────────────────────────────────── */
.mpc-hero { padding: 64px var(--pad) 52px; background: linear-gradient(148deg, var(--pp), #f8f9fb, var(--n50)); border-bottom: 1px solid var(--n200) }
.mpc-hero-in { max-width: var(--mpc-max); margin: 0 auto }
.mpc-hero h1 { font-family: var(--fh); font-size: clamp(27px, 4.2vw, 40px); font-weight: 900; color: var(--n900); line-height: 1.28; margin-bottom: 16px; max-width: 900px }
.mpc-hero h1 span { color: var(--p) }
.mpc-lead { font-size: 17px; line-height: 1.85; color: var(--n600); max-width: 760px }
.mpc-lead strong { color: var(--n900); font-weight: 700 }
.mpc-points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 22px 0 6px }
.mpc-pt { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--n800); font-weight: 600 }
.mpc-pt i { color: var(--s); font-size: 13px }
.mpc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px }

/* ── صندوق الإجابة المباشرة ───────────────────────────── */
.mpc-answer { background: var(--n900); color: #fff; border-radius: var(--r-xl); padding: 26px 30px; margin: 0 0 36px }
.mpc-answer h2 { font-family: var(--fh); font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 12px; display: flex; align-items: center; gap: 9px }
.mpc-answer h2 i { color: var(--sl); font-size: 16px }
.mpc-answer p { font-size: 15.5px; line-height: 1.9; color: rgba(255,255,255,.86) }
.mpc-answer p + p { margin-top: 12px }
.mpc-answer strong { color: #fff }
.mpc-answer a { color: #8FC4F5; text-decoration: underline; text-underline-offset: 3px }

/* ── أقسام عامة ───────────────────────────────────────── */
.mpc-sec { padding: 64px var(--pad) }
.mpc-sec:nth-of-type(even) { background: var(--n50) }
.mpc-in { max-width: var(--mpc-max); margin: 0 auto }
.mpc-h2 { font-family: var(--fh); font-size: clamp(22px, 3vw, 30px); font-weight: 900; color: var(--n900); line-height: 1.35; margin-bottom: 12px }
.mpc-h2 span { color: var(--p) }
.mpc-sub { font-size: 15.5px; color: var(--n600); line-height: 1.85; max-width: 760px; margin-bottom: 30px }
.mpc-sec > .mpc-in > p { font-size: 15.5px; line-height: 1.9; color: var(--n600); max-width: 820px }
.mpc-sec > .mpc-in > p + p { margin-top: 14px }

/* ── شبكة البطاقات ────────────────────────────────────── */
.mpc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px }
.mpc-card { background: var(--white); border: 1px solid var(--n200); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--sh-sm) }
.mpc-sec:nth-of-type(even) .mpc-card { background: var(--white) }
.mpc-card-ico { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--pp); color: var(--p); display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 14px }
.mpc-card h3 { font-family: var(--fh); font-size: 16px; font-weight: 800; color: var(--n900); margin-bottom: 8px; line-height: 1.5 }
.mpc-card p { font-size: 14px; line-height: 1.8; color: var(--n600) }
.mpc-card p + p { margin-top: 8px }
.mpc-card ul { margin-top: 10px; display: flex; flex-direction: column; gap: 6px }
.mpc-card ul li { font-size: 13.5px; line-height: 1.7; color: var(--n600); padding-inline-start: 18px; position: relative }
.mpc-card ul li::before { content: "▪"; position: absolute; inset-inline-start: 0; color: var(--p) }

/* ── الجداول ──────────────────────────────────────────── */
.mpc-tw { overflow-x: auto; border: 1px solid var(--n200); border-radius: var(--r-lg); background: var(--white) }
.mpc-table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 14px }
.mpc-table caption { text-align: start; font-size: 13px; color: var(--n400); padding: 12px 16px 0 }
.mpc-table th, .mpc-table td { padding: 13px 16px; text-align: start; border-bottom: 1px solid var(--n100); vertical-align: top; line-height: 1.75 }
.mpc-table thead th { background: var(--n50); font-family: var(--fh); font-weight: 800; color: var(--n900); font-size: 13.5px; border-bottom: 1px solid var(--n200) }
.mpc-table tbody tr:last-child td { border-bottom: none }
.mpc-table td strong { color: var(--n900) }
.mpc-yes { color: var(--s); font-weight: 700 }
.mpc-no { color: #C0392B; font-weight: 700 }

/* ── قائمة تحقق ───────────────────────────────────────── */
.mpc-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px }
.mpc-check li { display: flex; gap: 12px; background: var(--white); border: 1px solid var(--n200); border-radius: var(--r-md); padding: 14px 16px; font-size: 14px; line-height: 1.75; color: var(--n600) }
.mpc-check li i { color: var(--s); font-size: 14px; margin-top: 4px; flex-shrink: 0 }
.mpc-check li strong { display: block; color: var(--n900); font-family: var(--fh); font-size: 14.5px; font-weight: 700; margin-bottom: 3px }

/* ── خطوات ────────────────────────────────────────────── */
.mpc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px }
.mpc-step { background: var(--white); border: 1px solid var(--n200); border-radius: var(--r-lg); padding: 22px; position: relative }
.mpc-step-n { width: 34px; height: 34px; border-radius: 50%; background: var(--p); color: #fff; font-family: var(--fh); font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px }
.mpc-step h3 { font-family: var(--fh); font-size: 15.5px; font-weight: 800; color: var(--n900); margin-bottom: 7px }
.mpc-step p { font-size: 13.5px; line-height: 1.8; color: var(--n600) }

/* ── حالات الاستخدام ──────────────────────────────────── */
.mpc-case { background: var(--white); border: 1px solid var(--n200); border-inline-start: 4px solid var(--p); border-radius: var(--r-lg); padding: 22px 24px; margin-bottom: 14px }
.mpc-case h3 { font-family: var(--fh); font-size: 16.5px; font-weight: 800; color: var(--n900); margin-bottom: 10px }
.mpc-case p { font-size: 14.5px; line-height: 1.85; color: var(--n600) }
.mpc-case p + p { margin-top: 9px }
.mpc-case-tag { display: inline-block; font-family: var(--fh); font-size: 11px; font-weight: 700; color: var(--p); background: var(--pp); padding: 3px 12px; border-radius: 30px; margin-bottom: 10px }

/* ── تنبيه / ملاحظة ───────────────────────────────────── */
.mpc-note { display: flex; gap: 14px; align-items: flex-start; background: var(--wp); border: 1px solid rgba(212,146,10,.22); border-radius: var(--r-lg); padding: 18px 22px; margin-top: 22px }
.mpc-note i { color: var(--w); font-size: 18px; margin-top: 3px; flex-shrink: 0 }
.mpc-note p { font-size: 14px; line-height: 1.8; color: var(--n800); margin: 0 }

/* ── عناقيد الروابط الداخلية ──────────────────────────── */
.mpc-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px }
.mpc-link { display: block; background: var(--white); border: 1px solid var(--n200); border-radius: var(--r-md); padding: 15px 18px; transition: all .18s }
.mpc-link:hover { border-color: var(--p); box-shadow: var(--sh-sm); transform: translateY(-1px) }
.mpc-link span { display: block; font-family: var(--fh); font-size: 14.5px; font-weight: 700; color: var(--n900); margin-bottom: 4px; line-height: 1.6 }
.mpc-link em { font-style: normal; font-size: 13px; color: var(--n600); line-height: 1.7; display: block }
.mpc-link:hover span { color: var(--p) }

/* ── نداء الإجراء ─────────────────────────────────────── */
.mpc-cta { background: var(--n900); padding: 64px var(--pad); text-align: center }
.mpc-cta-in { max-width: 780px; margin: 0 auto }
.mpc-cta h2 { font-family: var(--fh); font-size: clamp(24px, 3.4vw, 34px); font-weight: 900; color: #fff; line-height: 1.35; margin-bottom: 14px }
.mpc-cta h2 span { color: var(--sl) }
.mpc-cta p { font-size: 16px; line-height: 1.85; color: rgba(255,255,255,.75); margin-bottom: 30px }
.mpc-cta .cta-btns { justify-content: center }
.mpc-cta-foot { margin-top: 22px; font-size: 13px; color: rgba(255,255,255,.5) }
.mpc-cta-foot i { color: var(--sl); margin-inline-end: 4px }

/* ── نموذج مدمج ───────────────────────────────────────── */
.mpc-form-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start }
.mpc-form { background: var(--white); border: 1px solid var(--n200); border-radius: var(--r-xl); padding: 28px; box-shadow: var(--sh-md) }
.mpc-form h3 { font-family: var(--fh); font-size: 19px; font-weight: 800; color: var(--n900); margin-bottom: 6px }
.mpc-form > p { font-size: 13.5px; color: var(--n600); margin-bottom: 20px; line-height: 1.7 }

@media (max-width: 900px) {
  .mpc-form-wrap { grid-template-columns: 1fr; gap: 28px }
}
@media (max-width: 768px) {
  .mpc-hero { padding: 48px 20px 40px }
  .mpc-sec { padding: 48px 20px }
  .mpc-cta { padding: 48px 20px }
  .mpc-answer { padding: 22px }
}

/* ── حقول النموذج — منقولة من page-demo-request.css كي يعمل النموذج
      على أي صفحة تجارية دون تحميل ورقة صفحة العرض التوضيحي كاملة. ── */
.mp-commercial .df-field { margin-bottom: 16px }
.mp-commercial .df-label { font-family: var(--fh); font-size: 13px; font-weight: 700; color: var(--n800); margin-bottom: 6px; display: block }
.mp-commercial .df-label span { color: var(--a) }
.mp-commercial .df-input,
.mp-commercial .df-select { width: 100%; border: 1.5px solid var(--n200); border-radius: var(--r-md); padding: 11px 14px; font-family: var(--fb); font-size: 14px; color: var(--n900); background: var(--n50); transition: border-color .2s; outline: none }
.mp-commercial .df-select { cursor: pointer; appearance: none }
.mp-commercial .df-input:focus,
.mp-commercial .df-select:focus { border-color: var(--p); background: var(--white) }
.mp-commercial .df-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.mp-commercial .df-submit { width: 100%; background: linear-gradient(135deg, var(--p), var(--s)); color: #fff; border: none; border-radius: var(--r-lg); padding: 15px; font-family: var(--fh); font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all .2s; box-shadow: 0 4px 16px rgba(26,95,168,.3) }
.mp-commercial .df-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,95,168,.4) }
.mp-commercial .df-note { font-size: 11px; color: var(--n400); text-align: center; margin-top: 12px; line-height: 1.8 }
.mp-commercial .df-note i { color: var(--s); margin-inline-end: 4px }
.mp-commercial .success-state { text-align: center; padding: 34px 18px; display: none }
.mp-commercial .success-state.show { display: block }
.mp-commercial .success-ico { width: 72px; height: 72px; background: var(--sp); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--s); margin: 0 auto 18px }
.mp-commercial .success-state h3 { font-family: var(--fh); font-size: 20px; font-weight: 800; color: var(--n900); margin-bottom: 8px }
.mp-commercial .success-state p { font-size: 14px; color: var(--n600); line-height: 1.8 }
@media (max-width: 480px) { .mp-commercial .df-row { grid-template-columns: 1fr } }

/* ── الأسئلة الشائعة داخل الصفحات التجارية ──────────── */
.mp-commercial .faq-list { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; max-width: 860px }
.mp-commercial .faq-a { padding: 0 20px 16px; font-size: 14px; color: var(--n600); line-height: 1.85 }
.mp-commercial .faq-a a { color: var(--p); text-decoration: underline; text-underline-offset: 3px }
.mp-commercial .faq-q { font-size: 14.5px }