/* ============================================================
   Zoalk — components/bdg.css
   الشارات — عامة + شارات حالات الطلب الست (مطابقة لقاعدة البيانات)
   النمط: لون + خلفية تينت (من داشبورد المرجع)
   ============================================================ */

.bdg{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  font-size:var(--fs-xs);
  font-weight:700;
  line-height:1;
  padding:.4em .8em;
  border-radius:var(--r-pill);
  white-space:nowrap;
}
.bdg svg{width:1em;height:1em;}

/* -------- الأنواع العامة -------- */
.bdg--primary{background:var(--primary-tint);color:var(--primary);}
.bdg--accent{background:var(--accent-tint);color:var(--accent);}
.bdg--muted{background:var(--surface-2);color:var(--text-muted);}

/* شارة "الأكثر طلباً" العائمة على بطاقة الباقة */
.bdg--float{
  position:absolute;
  top:-.8rem;
  inset-inline-start:1.25rem;
  background:var(--primary);
  color:var(--on-primary);
  box-shadow:var(--shadow-sm);
}

/* -------- شارات حالات الطلب (orders.status) --------
   الاستخدام: <span class="bdg st st--in_progress">قيد التنفيذ</span> */
.st::before{
  content:"";
  width:.5em;height:.5em;
  border-radius:50%;
  background:currentColor;
}

.st--pending_payment{background:var(--warning-bg);color:var(--warning);}
.st--payment_review{background:var(--info-bg);color:var(--info);}
.st--in_progress{background:var(--primary-tint);color:var(--primary);}
.st--delivered{background:var(--success-bg);color:var(--success);}
.st--completed{background:var(--surface-2);color:var(--text-muted);}
.st--cancelled{background:var(--danger-bg);color:var(--danger);}

/* حالات الدفعات (payments.status) */
.st--submitted{background:var(--warning-bg);color:var(--warning);}
.st--confirmed{background:var(--success-bg);color:var(--success);}
.st--rejected{background:var(--danger-bg);color:var(--danger);}

/* -------- عدّاد التعديلات --------
   <span class="rev-meter"><b class="num">2</b> من <b class="num">3</b> تعديلات</span> */
.rev-meter{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-size:var(--fs-sm);
  color:var(--text-muted);
  background:var(--surface);
  border:1px solid var(--border);
  padding:.45em .9em;
  border-radius:var(--r-pill);
}
.rev-meter b{color:var(--accent);font-weight:800;}
.rev-meter.is-empty b{color:var(--danger);}