/* hrai — مؤشر المراحل (hrai-stepper.js) */
.stp { --stp-ink: var(--ink, var(--k-111111)); --stp-mute: var(--k-8a8a8a); --stp-line: var(--k-e8e8e8); --stp-soft: var(--k-f1f1f1); --stp-bad: #c4321f; position: relative; }
.stp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stp-list { list-style: none; margin: 0; padding: 0; display: grid; }
.stp-item { position: relative; min-width: 0; }
.stp-head { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: start; cursor: default; max-width: 100%; }
.stp-head[data-clickable] { cursor: pointer; }
.stp-head:focus-visible { outline: 2px solid var(--stp-ink); outline-offset: 4px; border-radius: 8px; }
.stp-marker { position: relative; width: 28px; height: 28px; flex: none; display: grid; place-items: center; }
.stp-ring { position: absolute; inset: -5px; border-radius: 50%; background: rgba(17, 17, 17, .09); }
.stp-disc { position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--stp-soft); color: var(--stp-mute); font: 800 12px/1 'Tajawal', sans-serif; transition: background .3s, color .3s, box-shadow .3s; font-variant-numeric: tabular-nums; }
.stp-disc > * { grid-area: 1 / 1; }
.stp-icon { width: 15px; height: 15px; display: block; }
.stp-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.stp-dotc { transform-box: fill-box; transform-origin: center; }
.stp-item[data-status="complete"] .stp-disc { background: var(--stp-ink); color: var(--k-ffffff); }
.stp-item[data-status="current"] .stp-disc { background: var(--k-ffffff); color: var(--stp-ink); box-shadow: inset 0 0 0 2px var(--stp-ink); }
.stp-item[data-status="error"] .stp-disc { background: var(--stp-bad); color: var(--k-ffffff); }
.stp-head[data-clickable]:hover .stp-disc { box-shadow: 0 0 0 4px rgba(17, 17, 17, .08); }
/* الوصلة من الدائرة للخطوة اللي بعدها */
.stp-conn { position: absolute; top: 13px; inset-inline-start: 38px; inset-inline-end: 10px; height: 2px; border-radius: 2px; background: var(--stp-line); overflow: hidden; }
.stp-conn[hidden] { display: none; }
.stp-fill { display: block; height: 100%; background: var(--stp-ink); transform: scaleX(0); transform-origin: left center; transition: transform .52s var(--stp-smooth, cubic-bezier(.22, 1, .36, 1)); }
html[dir="rtl"] .stp-fill { transform-origin: right center; }
.stp-fill.on { transform: scaleX(1); }
/* النص */
.stp-text { display: block; min-width: 0; max-width: 100%; padding-inline-end: 8px; }
.stp-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--k-9a9a9a); line-height: 1.4; transition: color .3s; }
.stp-item[data-status="complete"] .stp-label, .stp-item[data-status="current"] .stp-label { color: var(--stp-ink); }
.stp-item[data-status="error"] .stp-label { color: var(--stp-bad); }
.stp-slot { display: block; position: relative; overflow: hidden; }
.stp-slot-in { display: block; position: relative; }
.stp-slot-in > * { display: block; }
.stp-leaving { position: absolute !important; inset-inline: 0; top: 0; }
.stp-desc { font-size: 11.5px; color: var(--stp-mute); line-height: 1.5; padding-top: 2px; }
.stp-error { font-size: 11.5px; color: var(--stp-bad); font-weight: 700; line-height: 1.5; padding-top: 2px; }
/* عمودي */
.stp-v .stp-list { gap: 0; }
.stp-v .stp-item { padding-bottom: 22px; }
.stp-v .stp-head { flex-direction: row; gap: 12px; }
.stp-v .stp-conn { top: 34px; bottom: 4px; inset-inline-start: 13px; inset-inline-end: auto; width: 2px; height: auto; }
.stp-v .stp-fill { width: 100%; height: 100%; transform: scaleY(0); transform-origin: center top; }
.stp-v .stp-fill.on { transform: scaleY(1); }
/* مختصر: الدوائر بس، واسم الخطوة الحالية تحت */
.stp-caption { display: none; }
.stp-compact .stp-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stp-compact .stp-conn { inset-inline-start: 34px; inset-inline-end: 6px; }
.stp-compact .stp-caption { display: block; margin-top: 12px; }
.stp-cap-label { font-size: 14px; font-weight: 800; color: var(--stp-ink); }
@media (prefers-reduced-motion: reduce) { .stp-fill, .stp-disc, .stp-label { transition: none; } }
/* آخر خطوة عرضها على قد اسمها، عشان ظهور الوصف ما يحرّك باقي الخطوات */
.stp-h .stp-item:last-child .stp-slot { width: 0; min-width: 100%; }
.stp-compact .stp-marker, .stp-compact .stp-disc { width: 24px; height: 24px; }
.stp-compact .stp-disc { font-size: 11px; }
.stp-compact .stp-conn { top: 11px; inset-inline-start: 29px; inset-inline-end: 5px; }
.stp-compact .stp-ring { inset: -4px; }
.stp-compact .stp-icon { width: 13px; height: 13px; }