/* ============================================================================
   alkabos — قواعد مجموعة «المحتوى» (services · api_docs · blog · terms ·
   add-your-service)

   هذا الملف ملكُ هذه المجموعة وحدها؛ الغلافان يحمّلان pages/*.css آليًّا بعد
   alkabos.css، فكل ورقة من الورقات السبع تُحمَّل على كل صفحة في هذا الثيم.
   ولذلك كل قاعدة هنا مسنودة إلى جذر صفحتها، وهو الابن الوحيد المباشر لـ
   ‎div.content‎ الذي يفتحه الغلاف:
     • ‎.services‎    — قالب services.html
     • ‎.api‎         — قالب api.html
     • ‎.blog‎        — قائمة المقالات
     • ‎.post‎        — المقالة الواحدة، وصفحة الشروط تستعمل عقدها نفسه
     • ‎.terms-doc‎   — علامتنا على بطاقة الشروط وحدها
     • ‎.ays‎         — أضف خدمتك (لا نظير لها في القالب)
   بلا هذا السند تتسرّب القاعدة إلى صفحات المجموعات الست الأخرى في هذا الثيم.

   الجزء الأكبر من شكل هذه الصفحات موجود سلفًا في ورقة القالب المرآة
   (‎assets/tpl/storage.perfectcdn.com/9ogllo/0c9xqm521s184lbn.css‎): ‎.services‎
   و‎.services-filter‎ و‎.table-wrapper‎ و‎.api‎ و‎.blog‎ و‎.post‎ و‎.instructions‎
   و‎.modal‎ كاملة. فلا يُعاد هنا تعريف شيء منها — المكتوب أدناه هو ما لا تعرّفه
   الورقة فقط: كتلة ‎<style>‎ الخاصّة بصفحتَي الخدمات والشروط في القالب،
   وطيّ الأقسام، وما اخترعناه لصفحة «أضف خدمتك».

   الألوان كلّها من متغيّرات الورقة (‎--main-color‎ · ‎--text-main‎ ·
   ‎--secondary-color‎ · ‎--border-color‎ · ‎--card-bg‎ · ‎--shadow-color‎) فيتبع
   الفاتح والداكن بلا نسخة ثانية من كل قاعدة.
   ========================================================================== */

/* ---------------------------------------------------------------- الجذور
   الورقة تكتب ‎.page-content .content>div{display:flex;flex-direction:column;
   align-items:center}‎ — أي أن الابن المباشر عنصرُ عمودٍ يتقلّص إلى محتواه.
   جذور صفحاتنا تحتاج العرض كاملًا وإلّا انكمش الجدول والشبكة. */
.content > .services,
.content > .api,
.content > .blog,
.content > .post,
.content > .ays { width: 100%; }

/* ===========================================================================
   ١) صفحة الخدمات — ‎.services‎
   =========================================================================== */

.services .svc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.services .svc-head h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 900;
  color: var(--text-main);
}
.services .svc-count {
  font-size: 13px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--secondary-color);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}
.services .svc-legend {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-main);
  opacity: .7;
}

/* ------------------------------------------------------- شريط الفلترة
   المنسدلات تفتح بـ‎data-toggle="dropdown"‎ من بوتستراب ٣ (يحمّله الغلافان)
   فيضيف الصنف ‎open‎ على أب الزرّ. الورقة تعرف ‎.filter-button.open‎ و
   ‎.dropdown.show‎ ولا تعرف ‎.dropdown.open‎ — وهو حال منسدلة العملة. */
.services .services-filter .dropdown.open > .dropdown-menu,
.services .services-filter .dropdown.show > .dropdown-menu,
.services .services-filter .filter-button.open > .dropdown-menu { display: block !important; }

.services .services-filter .dropdown-menu { list-style: none; margin: 0; }
.services .services-filter .dropdown-menu li { list-style: none; }
.services .services-filter .dropdown-item i,
.services .services-filter .dropdown-item img { flex: none; width: 18px; text-align: center; font-size: 15px; }
.services .services-filter .dropdown-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.services .services-filter .dropdown-toggle .filter-btn-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
/* منسدلة العملة قائمةٌ من بضعة أسطر، والورقة تفرض ‎min-height:400px‎ و
   ‎min-width:400px‎ على كل منسدلة داخل شريط الفلترة. */
.services .services-filter .dropdown.currencies { position: relative; }
.services .services-filter .dropdown.currencies .dropdown-menu {
  min-width: 200px;
  min-height: 0;
  max-height: 320px;
  inset-inline-start: auto;
  inset-inline-end: 0;
}
.services .services-filter .dropdown.currencies .dropdown-item.active {
  background: var(--main-opacity);
  font-weight: 800;
}

/* ------------------------------------------------------------- الجدول */
.services .table-wrapper thead th {
  padding: 10px 14px;
  border: none;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
  opacity: .65;
  white-space: nowrap;
  text-align: center;
}
.services .table-wrapper thead th.th-service-name { text-align: start; }

/* ------------------------------------------------- الطيّ: العقد الأساسي
   القالب يطبع الأقسام والخدمات كلّها مفتوحة؛ وهذه اللوحة تحمل مئات الأقسام
   وآلاف الخدمات، ففتحها دفعةً واحدة جدارٌ من النصّ. رأس القسم زرّ، والبحث أو
   اختيار قسمٍ بعينه هو ما يفتح ما يطابقه.
   وسم ‎noscript‎ في الصفحة يعيد ‎display‎ حين لا جافاسكربت. */
.services .table-wrapper tbody tr.service-row { display: none; }
.services .table-wrapper tbody tr.service-row.is-open { display: table-row; }
@media (max-width: 768px) {
  .services .table-wrapper tbody tr.service-row.is-open { display: block; }
}

.services .table-wrapper tr.category-row { cursor: pointer; }
.services .table-wrapper tr.category-row:focus-visible { outline: 2px solid var(--main-color); outline-offset: 2px; }
.services .table-wrapper .category-inner .cat-count {
  margin-inline-start: auto;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
}
.services .table-wrapper .category-inner .cat-caret {
  flex: none;
  font-size: 16px;
  transition: transform .2s ease;
}
html[dir="ltr"] .services .table-wrapper tr.category-row.cat-collapsed .cat-caret { transform: rotate(-90deg); }
html[dir="rtl"] .services .table-wrapper tr.category-row.cat-collapsed .cat-caret { transform: rotate(90deg); }

/* --------------------------------------------------------- خلايا الصفّ
   ‎alkabos.css‎ يكتب ‎.services .table-wrapper .service-value{overflow-wrap:anywhere}‎
   وهي قاعدة الشِلّ لاسم الخدمة الطويل بلا فراغات. لكنها تُطبَّق على كل
   ‎.service-value‎، ومنها خلية المعرّف وخلايا الأرقام: عرضها الأدنى يصير حرفًا
   واحدًا، والعمود الأوّل ‎width:1%‎ فينهار المعرّف إلى رقمٍ تحت رقم. القيود هنا
   تعيد الالتفاف الطبيعي لتلك الخلايا وحدها، ويبقى الاسم على ما هو. */
.services .table-wrapper .service-row > td:first-child { white-space: nowrap; }
.services .table-wrapper .m-badge-cell .service-value {
  overflow-wrap: normal;
  word-break: normal;
}
.services .table-wrapper .btn-copy,
.services .table-wrapper .btn-copy .copy-text,
.services .table-wrapper .m-actions-cell .service-value,
.services .table-wrapper .btn-details {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}
.services .table-wrapper .btn-copy .copy-text { font-weight: 900; letter-spacing: .02em; }
.services .table-wrapper .js-clean-name {
  display: block;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.services .svc-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--secondary-color);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  vertical-align: middle;
}
.services .svc-flag i { font-size: 10px; }
.services .svc-flag.guaranteed { color: #22c55e; }
.services .svc-flag.cancelable { color: #f59e0b; }
.services .table-wrapper .services-rate { white-space: nowrap; direction: ltr; unicode-bidi: isolate; }

/* تسميات الجوال: رأس الجدول يختفي تحت ٧٦٨ بكسل، فكل خانة تحمل اسمها.
   وفوق ذلك التسمية زائدة لأن العمود معنون. */
.services .m-label { display: none; }
@media (max-width: 768px) {
  /* الورقة تحوّل ‎table/tbody/tr/td‎ إلى ‎block‎ تحت ٧٦٨ ولا تُخفي رأس الجدول،
     فتبقى تسميات الأعمدة السبع سطرًا معلّقًا فوق البطاقات. كتلة ‎<style>‎ في
     القالب كانت تُخفيه (‎#service-table thead{display:none}‎) — وهذه هي. */
  .services .table-wrapper thead { display: none; }
  .services .m-label {
    display: inline;
    margin-inline-end: 6px;
    font-size: 11px;
    font-weight: 600;
    opacity: .65;
  }
  .services .table-wrapper td.m-badge-cell .td-badge { width: 100%; justify-content: space-between; }
  .services .table-wrapper td.m-actions-cell .actions-item { width: 100%; justify-content: space-between; }
  .services .table-wrapper .btn-details { flex: 1; text-align: center; }
}

/* ------------------------------------------------------------ الفراغات */
.services .services-empty {
  width: 100%;
  margin-top: 12px;
  padding: 44px 20px;
  border-radius: 18px;
  background: var(--secondary-color);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 14.5px;
  line-height: 1.9;
  text-align: center;
}

/* --------------------------------------------------------- نافذة الوصف
   الغلافان يفتحان النافذة بإضافة الصنف ‎open‎ ويغلقانها بحذفه، والورقة تعرف
   ‎.modal.active‎ وحدها — فهذه هي القاعدة المقابلة، مسنودةً إلى صفحتنا. */
.services .modal.open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.services .modal-box { width: min(560px, 94%); }
.services .modal-body {
  max-height: 55vh;
  line-height: 1.9;
  font-size: 14px;
  color: var(--text-main);
  gap: 2px;
}
.services .modal-body div { min-height: 1em; }
.services .modal-order-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border-radius: 14px;
  background: var(--main-color);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  transition: .2s ease;
}
.services .modal-order-btn:hover { opacity: .9; transform: translateY(-1px); }

/* ===========================================================================
   ٢) توثيق الواجهة — ‎.api‎
   =========================================================================== */

/* الورقة تكتب ‎.api{direction:ltr}‎ لأن صفحة القالب إنجليزية بالكامل. أوصاف
   المعاملات عندنا مترجَمة، فاتّجاه الفقرة يتبع ‎gf_dir()‎ ويبقى LTR حيث يجب:
   أسماء المعاملات والشيفرة. */
html[dir="rtl"] .content > .api { direction: rtl; }
html[dir="rtl"] .api table th { text-align: right; }
.api table td:first-child,
.api code,
.api .example pre { direction: ltr; unicode-bidi: isolate; }
.api table td:first-child { text-align: start; font-weight: 700; }
.api table { table-layout: fixed; }
.api table td:first-child, .api table th:first-child { width: 40%; overflow-wrap: anywhere; }
.api table td:last-child { overflow-wrap: anywhere; }

.api td code,
.api .doc-note code {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--secondary-color);
  font-size: 12.5px;
  direction: ltr;
  unicode-bidi: isolate;
}

.api .example pre { max-width: 100%; line-height: 1.7; }
.api .example pre code {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}
/* ألوان عيّنات JSON: ‎sx_api_hl()‎ تولّد الوسوم على الخادم، والورقة تلوّن ‎pre‎
   وحدها. الخلفية ثابتة (#0f172a) في الوضعين فاللون واحد لهما. */
.api .example .hljs-attr        { color: #7dd3fc; }
.api .example .hljs-string      { color: #86efac; }
.api .example .hljs-number      { color: #fca5a5; }
.api .example .hljs-keyword     { color: #c4b5fd; }
.api .example .hljs-punctuation { color: #94a3b8; }

.api .doc-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--secondary-color);
  border: 1px solid var(--border-color);
  border-inline-start: 3px solid var(--main-color);
  color: var(--text-main);
  font-size: 13.5px;
  line-height: 1.9;
}
.api .doc-note b { color: var(--main-color); }
.api .select-wrapper select.select { max-width: 100%; }

/* ===========================================================================
   ٣) المدونة — ‎.blog‎ (القائمة) و‎.post‎ (المقالة)
   =========================================================================== */

.blog .intro, .blog .lists { width: 100%; }
.blog .intro > div h1 {
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.6;
  color: var(--text-main);
}
.blog .intro > div p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-main);
  opacity: .75;
}
.blog .info .actions .btn { text-decoration: none; }
.blog .info .actions .btn i { font-size: 15px; }

.post .container, .post .card { width: 100%; }
.post .card .intro-text {
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-main);
  opacity: .8;
}
.post .content img { max-width: 100%; height: auto; border-radius: 12px; }
.post .content ul, .post .content ol { margin: 10px 0; padding-inline-start: 24px; }
.post .content li { margin-bottom: 8px; }
.post .content p { margin-bottom: 12px; }
.post .content a { color: var(--main-color); }
.post .content blockquote {
  margin: 12px 0;
  padding: 10px 14px;
  border-inline-start: 3px solid var(--main-color);
  background: var(--secondary-color);
  border-radius: 10px;
}
.post .content table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.post .content td, .post .content th {
  padding: 8px 10px;
  border: 1px solid var(--border-color);
}
.post .content pre, .post .content code {
  direction: ltr;
  unicode-bidi: isolate;
}
.post .content pre {
  overflow-x: auto;
  max-width: 100%;
  margin: 12px 0;
  padding: 14px;
  border-radius: 12px;
  background: #0f172a;
  color: #e5e7eb;
  font-size: 13px;
}
.post .actions { gap: 10px; flex-wrap: wrap; }
.post .actions .back-btn i { font-size: 16px; }
.post .actions .back-btn.ghost {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  box-shadow: none;
}
.post .actions .back-btn.ghost:hover { background: var(--secondary-color); }

/* ===========================================================================
   ٤) الشروط — ‎.terms-doc‎ داخل عقد ‎.post‎
   الأصناف الثلاثة من كتلة ‎<style>‎ في ‎_tpl/guest/terms.html‎، بألوان الثيم
   بدل الأزرق المكتوب فيها (الثيم كلّه أحمر، ولون ثانٍ يقرأ كخطأ).
   =========================================================================== */

.terms-doc .terms-head {
  margin-bottom: 22px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}
.terms-doc .terms-head h1 {
  margin-bottom: 6px;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--text-main);
}
.terms-doc .terms-head small { font-size: 13px; opacity: .7; }
.terms-doc .terms-section-title {
  margin: 26px 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--main-color);
}
.terms-doc .content > ul { margin: 0 0 6px; padding-inline-start: 24px; }
.terms-doc .terms-box-alert {
  margin: 15px 0;
  padding: 12px 15px;
  border-radius: 8px;
  border-inline-start: 4px solid var(--main-color);
  background: var(--main-opacity);
  font-size: 14px;
  line-height: 1.9;
}

/* ===========================================================================
   ٥) أضف خدمتك — ‎.ays‎
   البطاقتان من عقد ‎.instructions‎ في الورقة (‎>div‎ بطاقة، وتنقلب عمودًا تحت
   ٧٦٨ بكسل). ما دونهما من عندنا: ترقيم الخطوات وزرّ الإرسال.
   =========================================================================== */

.ays .ays-head { width: 100%; margin-bottom: 4px; }
.ays .ays-head h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 900;
  color: var(--text-main);
}
.ays .ays-head p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-main);
  opacity: .75;
}
.ays .instructions { align-items: stretch; }
.ays .ays-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 800;
  color: var(--main-color);
}
.ays .ays-steps { margin: 0; padding: 0; list-style: none; counter-reset: ays; }
.ays .ays-steps li {
  counter-increment: ays;
  position: relative;
  margin-bottom: 12px;
  padding-inline-start: 38px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-main);
}
.ays .ays-steps li::before {
  content: counter(ays);
  position: absolute;
  inset-inline-start: 0;
  top: 3px;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--main-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
.ays .ays-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 20px;
  border-radius: 14px;
  background: var(--main-color);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  transition: .2s ease;
}
.ays .ays-btn:hover { opacity: .9; transform: translateY(-1px); }