/* ── صفحة تتبّع الطلب (/track) ──────────────────────────────────────────
   ملف مستقل لا يُحمَّل إلا في هذه الصفحة. مكتوب يدوياً (بخلاف util.css
   المولَّد) لأنه أنماط بنيوية لمكوّن واحد، لا بدائل عن سمات style مضمّنة. */

.trk-form { max-width: 560px; margin-inline: auto; }
.trk-form .grid { display: grid; gap: var(--s4); grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .trk-form .grid { grid-template-columns: 1fr; } }

/* حقلا رقم الحجز والهاتف يُكتبان أرقاماً لاتينية دائماً — اتجاه صريح حتى
   لا يقلب محرّك الاتجاه العربي ترتيب المحارف بصرياً أثناء الكتابة. */
.trk-code { direction: ltr; text-align: left; letter-spacing: .06em; text-transform: uppercase; }
.trk-tel  { direction: ltr; text-align: left; }

.trk-result { margin-top: var(--s8); }

/* ── ترويسة النتيجة ── */
.trk-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s4); padding-bottom: var(--s5); border-bottom: 1px solid var(--line);
}
.trk-num { font-size: 1.35rem; font-weight: 800; color: var(--ink); direction: ltr; }
.trk-holder { color: var(--ink-3); font-size: .85rem; margin-top: 2px; }

.trk-badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 8px 16px; border-radius: var(--r-pill);
  font-weight: 700; font-size: .9rem; color: #fff; white-space: nowrap;
}
.trk-badge.is-pending   { background: var(--warn); }
.trk-badge.is-confirmed { background: var(--green); }
.trk-badge.is-completed { background: var(--ink-3); }
.trk-badge.is-cancelled { background: var(--err); }
.trk-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .9; }

/* ── مسار الحالة ── */
.trk-steps { display: flex; margin: var(--s6) 0; padding: 0; list-style: none; }
.trk-steps li { flex: 1; text-align: center; position: relative; padding-top: 26px; }

/* كل خطوة ترسم الواصل الذي *يسبقها* وحده: يبدأ من مركزها ويمتدّ بعرض خانة
   كاملة نحو بداية السطر، فينتهي عند مركز الخطوة السابقة تماماً. الفائدة أن
   لون الواصل يتبع حالة خطوة واحدة لا اثنتين — فيمتلئ الأخضر إلى النقطة
   الحالية بالضبط ولا يتجاوزها كما يحدث حين تُقسَّم كل خانة نصفين.
   الخصائص منطقية (inset-inline) لا فيزيائية، فتصحّ في RTL وLTR معاً. */
.trk-steps li::after {
  content: ""; position: absolute; top: 7px; height: 2px; width: 100%;
  inset-inline-end: 50%; background: var(--line);
}
.trk-steps li:first-child::after { display: none; }

.trk-steps li .pt {
  position: absolute; top: 0; inset-inline-start: calc(50% - 8px);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line); z-index: 1;
}
.trk-steps li .lb { font-size: .78rem; color: var(--ink-3); }
.trk-steps li.done .pt { background: var(--green); border-color: var(--green); }
.trk-steps li.done .lb { color: var(--ink); font-weight: 700; }
.trk-steps li.done::after { background: var(--green); }
.trk-steps.is-cancelled li.done .pt { background: var(--err); border-color: var(--err); }
.trk-steps.is-cancelled li.done::after { background: var(--err); }

/* ── شبكة التفاصيل ── */
.trk-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.trk-cell {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: var(--s3) var(--s4);
}
.trk-cell .k { display: block; font-size: .75rem; color: var(--ink-3); margin-bottom: 3px; }
.trk-cell .v { font-weight: 700; color: var(--ink); font-size: .95rem; }

.trk-price {
  margin-top: var(--s5); background: var(--green); color: #fff;
  border-radius: var(--r-md); padding: var(--s4) var(--s5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.trk-price .k { font-size: .85rem; opacity: .85; }
.trk-price .v { font-size: 1.5rem; font-weight: 800; }

.trk-agency { margin-top: var(--s5); }
.trk-agency .row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
}