/*!
 * مدد — صفحة المزايا فقط (features.html — P02)
 * الأقسام نفسها من site.css (jb-banner / jb-section / jb-split / jb-mock / jb-cta)، وهون بس
 * شريط التنقل بين الأقسام، والرسومات التوضيحية (ft-shot)، وبطاقات الأدوار.
 * الرسومات معلّمة data-jb-illustration وبتنستبدل بلقطات حقيقية بعد الدفعة 6.
 */

/* ===== شريط التنقل بين الأقسام (لاصق تحت الهيدر) =====
   كبسولات بإطار رفيع، والقسم الحالي ممتلئ بلون الهوية؛ بلا شريط تمرير ظاهر، مع أسهم دائرية وتلاشٍ ناعم
   عند الطرف الذي فيه أقسام مخفية (features.js ← data-at-start / data-at-end)، وخط تقدّم رفيع بالأسفل */
.ft-nav {
  position: sticky;
  top: var(--jb-header-h);
  z-index: 1020;
  background: color-mix(in srgb, var(--jb-surface) 88%, transparent);
  border-block-end: 1px solid var(--jb-border);
  box-shadow: 0 8px 24px -18px rgba(15, 31, 61, .35);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}
.ft-nav__inner { position: relative; display: flex; align-items: center; gap: var(--sp-2); }
.ft-nav__list {
  display: flex;
  flex: 1;
  gap: var(--sp-2);
  min-width: 0;
  margin: 0;
  padding: .7rem 2px;
  list-style: none;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
}
.ft-nav__list::-webkit-scrollbar { display: none; }
/* التلاشي عند الطرف الذي فيه بقية (يسار/يمين فعلياً حسب الاتجاه) */
[dir="ltr"] .ft-nav:not([data-at-start]) .ft-nav__list { --fade-l: 40px; }
[dir="ltr"] .ft-nav:not([data-at-end]) .ft-nav__list { --fade-r: 40px; }
[dir="rtl"] .ft-nav:not([data-at-start]) .ft-nav__list { --fade-r: 40px; }
[dir="rtl"] .ft-nav:not([data-at-end]) .ft-nav__list { --fade-l: 40px; }
@media (prefers-reduced-motion: reduce) { .ft-nav__list { scroll-behavior: auto; } }
.ft-nav__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--jb-border);
  background: var(--jb-surface);
  color: var(--jb-text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--mo-fast) var(--mo-ease), color var(--mo-fast) var(--mo-ease), border-color var(--mo-fast) var(--mo-ease), box-shadow var(--mo-fast) var(--mo-ease);
}
.ft-nav__list a .bi { color: var(--jb-primary); font-size: 1rem; transition: color var(--mo-fast) var(--mo-ease); }
.ft-nav__list a:hover { border-color: rgba(var(--jb-primary-rgb), .45); color: var(--jb-text); }
.ft-nav__list a[aria-current="true"] { background: var(--jb-primary); border-color: var(--jb-primary); color: var(--jb-on-primary); box-shadow: 0 8px 18px -10px rgba(var(--jb-primary-rgb), .9); }
.ft-nav__list a[aria-current="true"] .bi { color: inherit; }
/* الأسهم */
.ft-nav__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--jb-border);
  border-radius: 50%;
  background: var(--jb-surface);
  color: var(--jb-text);
  box-shadow: var(--sh-xs);
  cursor: pointer;
  transition: border-color var(--mo-fast) var(--mo-ease), color var(--mo-fast) var(--mo-ease);
}
.ft-nav__arrow[hidden] { display: none; }
.ft-nav__arrow:hover { border-color: var(--jb-primary); color: var(--jb-primary); }
.ft-nav__arrow:focus-visible { outline: 3px solid var(--jb-primary); outline-offset: 2px; }
[dir="rtl"] .ft-nav__arrow .bi { display: inline-block; transform: scaleX(-1); }
/* خط تقدّم القراءة عبر الأقسام */
.ft-nav__progress { position: absolute; inset-inline: 0; inset-block-end: -1px; height: 2px; }
.ft-nav__progress > span { display: block; width: calc(var(--p, 0) * 100%); height: 100%; background: linear-gradient(90deg, var(--jb-primary), var(--jb-accent)); }
[dir="rtl"] .ft-nav__progress > span { background: linear-gradient(270deg, var(--jb-primary), var(--jb-accent)); }
@media (max-width: 768px) { .ft-nav__arrow { display: none !important; } .ft-nav__list a { padding: 0 var(--sp-3); } }
/* base.css بيحسب الهيدر بـ scroll-padding-top، فهون بس ارتفاع شريط الأقسام */
body[data-page="features"] main section[id] { scroll-margin-top: 72px; }

/* ===== أقسام المزايا ===== */
.ft-num { font-variant-numeric: tabular-nums; padding-inline-end: var(--sp-2); border-inline-end: 1px solid rgba(var(--jb-primary-rgb), .35); }
.ft-feature__content .jb-section__lead { margin-block-end: var(--sp-5); }
@media (min-width: 1025px) {
  .ft-feature--flip .jb-split__visual { order: -1; }
}
.ft-for { margin: var(--sp-5) 0 0; color: var(--jb-text-muted); font-size: var(--fs-sm); }
.ft-for .bi { color: var(--jb-primary); margin-inline-end: var(--sp-2); }
.ft-for > span:nth-child(2) { font-weight: 700; color: var(--jb-text); }
.ft-plan-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: var(--sp-5) 0 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px dashed rgba(var(--jb-primary-rgb), .45); font-size: var(--fs-sm); }

/* ===== الرسم التوضيحي (لقطة شاشة مبسّطة) ===== */
.ft-shot { overflow: hidden; }
.ft-shot__bar { display: flex; align-items: center; gap: var(--sp-3); padding: .6rem var(--sp-4); background: var(--jb-surface-2); border-block-end: 1px solid var(--jb-border); color: var(--jb-text-muted); font-size: var(--fs-xs); font-weight: 600; }
.ft-shot__dots { display: inline-flex; gap: 5px; direction: ltr; }
.ft-shot__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--jb-border-input); opacity: .55; }
.ft-shot__status { margin-inline-start: auto; }
.ft-shot__body { display: grid; gap: var(--sp-3); padding: var(--sp-5); min-width: 0; }
.ft-fake-btn { pointer-events: none; }

.ft-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.ft-toolbar--end { justify-content: flex-end; }
.ft-fake-search { flex: 1 1 12rem; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); padding: .45rem .75rem; border: 1px solid var(--jb-border-input); border-radius: var(--r-sm); background: var(--jb-surface); color: var(--jb-text-muted); }
.ft-fake-search > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-fake-search kbd { direction: ltr; font-size: .6875rem; padding: .1rem .4rem; border-radius: 4px; background: var(--jb-surface-2); color: var(--jb-text-muted); box-shadow: none; }

.ft-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ft-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .75rem; border-radius: var(--r-pill); border: 1px solid var(--jb-border); color: var(--jb-text-muted); font-size: var(--fs-xs); font-weight: 600; }
.ft-chip.is-on { border-color: rgba(var(--jb-primary-rgb), .5); background: var(--jb-primary-subtle); color: var(--jb-primary); }

.ft-list { display: grid; gap: var(--sp-2); }
.ft-list .jb-appt { padding: var(--sp-2) var(--sp-3); }

/* ملف المريض */
.ft-patient { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.ft-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ft-tags .jb-mock__allergy { margin-inline-start: 0; }
.ft-tabs { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); border-block-end: 1px solid var(--jb-border); font-size: var(--fs-xs); font-weight: 600; color: var(--jb-text-muted); }
.ft-tabs span { padding-block: .5rem; border-block-end: 2px solid transparent; margin-block-end: -1px; }
.ft-tabs .is-on { color: var(--jb-primary); border-block-end-color: var(--jb-primary); }
.ft-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; }
.ft-dl div { padding: .55rem .75rem; border-radius: var(--r-sm); background: var(--jb-surface-2); min-width: 0; }
.ft-dl dt { color: var(--jb-text-muted); font-size: var(--fs-xs); font-weight: 500; }
.ft-dl dd { margin: 0; font-weight: 600; color: var(--jb-text); overflow-wrap: anywhere; }
.ft-dl dd[dir="ltr"] { text-align: start; unicode-bidi: isolate; }
.ft-family { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; color: var(--jb-text-muted); font-size: var(--fs-xs); }
.ft-family .bi { color: var(--jb-primary); margin-block-start: .15rem; }

/* التذكير */
.ft-template { margin: 0; padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--jb-border-input); border-radius: var(--r-md); line-height: 2.1; color: var(--jb-text); }
.ft-template code { padding: .1rem .4rem; border-radius: 4px; background: var(--jb-primary-subtle); color: var(--jb-primary); font-size: .85em; font-family: inherit; font-weight: 600; white-space: nowrap; unicode-bidi: isolate; }
.ft-chat { --ft-chat-bg: #EFEAE2; --ft-bubble: #D9FDD3; --ft-bubble-text: #111B21; --ft-bubble-meta: #54656F; display: flex; padding: var(--sp-4); border-radius: var(--r-md); background: var(--ft-chat-bg); }
[data-bs-theme="dark"] .ft-chat { --ft-chat-bg: #0B141A; --ft-bubble: #005C4B; --ft-bubble-text: #E9EDEF; --ft-bubble-meta: #DCE8E4; }
.ft-chat__bubble { max-width: 90%; margin-inline-start: auto; padding: .55rem .75rem .35rem; border-radius: 10px; border-start-end-radius: 2px; background: var(--ft-bubble); color: var(--ft-bubble-text); box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.ft-chat__bubble p { margin: 0; }
.ft-chat__time { display: flex; justify-content: flex-end; align-items: center; gap: .25rem; color: var(--ft-bubble-meta); font-size: .6875rem; }
.ft-chat__time .bi { color: #53BDEB; font-size: .95rem; }
.ft-logrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }

/* التوثيق */
.ft-shot .jb-mock__methods { margin-block-end: 0; padding-block-start: .4rem; }
.jb-mock__method .ft-count { position: absolute; inset-block-start: -9px; inset-inline-end: 8px; min-width: 22px; height: 22px; padding: 0 .35rem; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--jb-primary); color: var(--jb-on-primary); font-size: var(--fs-xs); font-style: normal; font-weight: 700; }
.ft-shot .jb-mock__voice { margin: 0; }
.ft-wave--b span:nth-child(2n) { height: 62%; }
.ft-wave--b span:nth-child(5n) { height: 88%; }
.ft-wave--b span:nth-child(-n+5) { background: rgba(var(--jb-primary-rgb), .55); }
.ft-file { display: flex; align-items: center; gap: var(--sp-3); padding: .55rem .75rem; border: 1px solid var(--jb-border); border-radius: var(--r-md); min-width: 0; }
.ft-file__icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--jb-st-no-show-bg); color: var(--jb-st-no-show); font-size: 1.1rem; }
.ft-file .jb-person__text b { text-align: start; unicode-bidi: isolate; }
.ft-file__size { margin-inline-start: auto; color: var(--jb-text-muted); font-size: var(--fs-xs); }
@media (max-width: 480px) {
  .jb-mock__method .ft-count { position: static; margin-inline-start: auto; }
}

/* الفاتورة */
.ft-invoice { display: grid; margin: 0; }
.ft-invoice div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding-block: .45rem; border-block-end: 1px dashed var(--jb-border); }
.ft-invoice dt { font-weight: 500; color: var(--jb-text); }
.ft-invoice dd { margin: 0; font-weight: 600; white-space: nowrap; }
.ft-invoice .is-sum dt, .ft-invoice .is-sum dd { font-weight: 700; }
.ft-invoice .is-minus dd { color: var(--jb-success); }
.ft-invoice .is-due { margin-block-start: var(--sp-2); padding: .7rem .85rem; border: 0; border-radius: var(--r-md); background: var(--jb-primary-subtle); color: var(--jb-primary); font-size: 1.0625rem; }
.ft-invoice .is-due dt { color: var(--jb-primary); font-weight: 700; }
.ft-invoice .is-due dd { font-weight: 700; }
.ft-covered { color: var(--jb-info); font-size: .85em; }
.ft-cash { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); color: var(--jb-text-muted); font-size: var(--fs-sm); }
.ft-cash b { color: var(--jb-text); }

/* الخصومات والإحالات */
.ft-promo-stack { display: grid; gap: var(--sp-4); }
.ft-coupon { display: grid; gap: var(--sp-3); padding: var(--sp-5); border-inline-start: 6px solid var(--jb-accent); }
.ft-coupon__main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-block-end: var(--sp-3); border-block-end: 2px dashed var(--jb-border); }
.ft-coupon__code { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); font-weight: 700; letter-spacing: .06em; color: var(--jb-text); }
.ft-coupon__value { margin: 0; font-weight: 600; }
.ft-usage { display: flex; align-items: center; gap: var(--sp-3); color: var(--jb-text-muted); font-size: var(--fs-xs); font-weight: 600; }
.ft-usage__bar { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--jb-surface-2); overflow: hidden; }
.ft-usage__bar span { display: block; height: 100%; border-radius: inherit; background: var(--jb-primary); }
.ft-referral { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); margin-inline-start: var(--sp-7); min-width: 0; }
.ft-referral .jb-wa-btn { margin-inline-start: auto; }
@media (max-width: 480px) { .ft-referral { margin-inline-start: 0; } }

/* التقارير */
.ft-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.ft-kpi { padding: .6rem .75rem; border-radius: var(--r-md); background: var(--jb-surface-2); min-width: 0; }
.ft-kpi span { display: block; color: var(--jb-text-muted); font-size: var(--fs-xs); font-weight: 500; }
.ft-kpi b { display: block; font-size: 1.35rem; line-height: 1.3; color: var(--jb-text); }
.ft-shot .jb-mock__label { margin: var(--sp-1) 0 0; }
.ft-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 1fr; align-items: end; gap: .6rem; height: 150px; padding-block-end: 1.5rem; border-block-end: 1px solid var(--jb-chart-grid); }
.ft-bars span { position: relative; height: var(--h); border-radius: 4px 4px 0 0; background: var(--jb-chart-1); }
.ft-bars i { position: absolute; inset-block-start: calc(100% + .35rem); inset-inline: -4px; text-align: center; font-style: normal; font-size: .6875rem; color: var(--jb-text-muted); white-space: nowrap; }

/* السوق */
.ft-listings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.ft-listings .jb-listing__media { aspect-ratio: 16 / 9; font-size: 2rem; }
.ft-listings .jb-listing__body { padding: var(--sp-3); }
.ft-listings .jb-listing__title { font-size: var(--fs-sm); }
.ft-media--b { background: linear-gradient(135deg, rgba(var(--jb-accent-rgb), .14), var(--jb-surface-2)); color: var(--jb-accent-text); }
@media (max-width: 420px) { .ft-listings { grid-template-columns: 1fr; } }

/* ===== الأدوار والصلاحيات ===== */
.ft-role-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.ft-role { display: flex; flex-direction: column; gap: var(--sp-3); }
.ft-role .jb-card__title { font-size: 1.125rem; margin: 0; }
@media (max-width: 768px) { .ft-role-cards { grid-template-columns: 1fr; } }

/* ===== الخصوصية ===== */
.ft-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.ft-mini { display: flex; flex-direction: column; gap: var(--sp-3); }
.ft-mini .jb-card__title { font-size: 1.0625rem; margin: 0; }
.ft-mini .jb-card__text { font-size: .9375rem; }
@media (max-width: 1024px) { .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ft-grid { grid-template-columns: 1fr; } }

/* ===== شريط الشركات ===== */
.ft-strip { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem); }
.ft-strip__box { display: flex; align-items: center; gap: var(--sp-4) var(--sp-5); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-xl); background: linear-gradient(135deg, rgba(var(--jb-accent-rgb), .08), var(--jb-surface) 60%); border: 1px solid var(--jb-border); }
.ft-strip__text { flex: 1; min-width: 0; }
.ft-strip__title { font-size: 1.25rem; margin: 0 0 var(--sp-1); }
.ft-strip__text p { margin: 0; color: var(--jb-text-muted); }
@media (max-width: 768px) {
  .ft-strip__box { flex-direction: column; align-items: flex-start; }
}

/* ===== إضافات الإصدار 2.2 ===== */
/* المبلغ المقفول (حدّده الطبيب — FR-BIL-03) */
.ft-locked { display: flex; align-items: center; gap: .4rem; margin: 0 0 var(--sp-3); padding: .45rem .7rem; border-radius: var(--r-sm); background: var(--jb-surface-2); color: var(--jb-text-muted); font-size: var(--fs-xs); font-weight: 600; }
.ft-locked .bi { color: var(--jb-text-muted); }
/* كشف نِسب الأطباء */
.ft-ledger { margin-block: var(--sp-4); }
.ft-rate { display: inline-block; margin-inline-start: .35rem; padding: 0 .45rem; border-radius: var(--r-pill); background: var(--jb-primary-subtle); color: var(--jb-primary); font-size: var(--fs-xs); font-weight: 700; }
.ft-strip__actions { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); }

/* طريقة الدفع بلقطة الفاتورة: نقداً أو ذمم (D25-15) */
.ft-method { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-block: var(--sp-3); }
.ft-method > span { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .4rem; border: 1px solid var(--jb-border-input); border-radius: var(--r-md); color: var(--jb-text-muted); font-size: var(--fs-sm); font-weight: 600; }
.ft-method > .is-on { border-color: var(--jb-primary); background: var(--jb-primary-subtle); color: var(--jb-primary); }