/* ============================================================
   Zoalk — components/wzd.css
   ويزارد إدخال بيانات السيرة — شريط التقدم + الخطوات
   البنية:
   <div class="wzd">
     <p class="wzd__eyebrow">الخطوة ٢ من ٥ — الخبرات العملية</p>
     <ol class="wzd__bar">
       <li class="wzd__dot is-done"><span>1</span><small>شخصية</small></li>
       <li class="wzd__dot is-active"><span>2</span><small>خبرات</small></li>
       …
     </ol>
     <section class="wzd__step is-active" data-step="2">…</section>
     <div class="wzd__nav">…أزرار السابق/التالي…</div>
   </div>
   ملاحظة: التبديل بين الخطوات داخل صفحة واحدة مقبول هنا لأنها
   عملية واحدة متصلة (نموذج) — بعكس تبديل صفحات الموقع.
   ============================================================ */

.wzd__eyebrow{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--accent);
  letter-spacing:.03em;
  margin-block-end:var(--sp-3);
}

/* -------- شريط النقاط -------- */
.wzd__bar{
  display:flex;
  justify-content:space-between;
  gap:var(--sp-1);
  margin-block-end:var(--sp-8);
  counter-reset:none;
}
.wzd__dot{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-1);
  text-align:center;
  color:var(--text-dim);
  position:relative;
}
/* خط الوصل بين النقاط */
.wzd__dot:not(:first-child)::before{
  content:"";
  position:absolute;
  top:.8rem;
  inset-inline-end:calc(50% + 1rem);
  width:calc(100% - 2rem);
  height:1px;
  background:var(--border);
}
.wzd__dot.is-done:not(:first-child)::before{background:var(--primary);}

.wzd__dot span{
  width:1.7rem;height:1.7rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  font-size:var(--fs-xs);
  font-weight:700;
  transition:background var(--dur-normal) var(--ease-in-out),
             border-color var(--dur-normal) var(--ease-in-out);
}
.wzd__dot small{font-size:var(--fs-xs);line-height:1.2;}

.wzd__dot.is-active{color:var(--text);font-weight:600;}
.wzd__dot.is-active span{
  background:var(--primary);
  border-color:var(--primary);
  color:var(--on-primary);
}
.wzd__dot.is-done span{
  background:var(--primary-tint);
  border-color:var(--primary);
  color:var(--primary);
}
@media (max-width:575.98px){
  .wzd__dot small{display:none;} /* الأرقام فقط في الشاشات الضيقة */
}

/* -------- الخطوات -------- */
.wzd__step{display:none;}
.wzd__step.is-active{display:block;}
@media (prefers-reduced-motion: no-preference){
  .wzd__step.is-active{animation:wzd-in var(--dur-normal) var(--ease-out);}
}
@keyframes wzd-in{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:none;}
}

/* -------- أزرار التنقل -------- */
.wzd__nav{
  display:flex;
  justify-content:space-between;
  gap:var(--sp-3);
  margin-block-start:var(--sp-8);
  padding-block-start:var(--sp-5);
  border-block-start:1px solid var(--border);
}

/* -------- البنود المتكررة (خبرة/كورس مضاف) --------
   قائمة البنود التي أدخلها العميل + زر إضافة بند جديد */
.wzd__items{display:flex;flex-direction:column;gap:var(--sp-3);margin-block-end:var(--sp-4);}
.wzd-item{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);
}
.wzd-item__body{flex:1;min-width:0;}
.wzd-item__title{font-weight:700;font-size:var(--fs-sm);}
.wzd-item__meta{font-size:var(--fs-xs);color:var(--text-muted);}
.wzd-item__actions{display:flex;gap:var(--sp-1);flex-shrink:0;}

.wzd__add{
  width:100%;
  border:1px dashed var(--border-strong);
  border-radius:var(--r-md);
  padding:var(--sp-3);
  color:var(--text-muted);
  font-size:var(--fs-sm);
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  transition:border-color var(--dur-fast),color var(--dur-fast),
             background var(--dur-fast);
}
.wzd__add:hover{
  border-color:var(--primary);
  color:var(--primary);
  background:var(--primary-tint);
}