/* ERPکار — فرم دمو */
.ekl{
  --ek-green:#0EAD82; --ek-green-d:#08745D; --ek-navy:#101828;
  --ek-mint:#E8F7F1; --ek-tint:#DDF5EE; --ek-warm:#F7FAF9; --ek-gray:#475467;
  direction:rtl; text-align:right; max-width:440px; margin-inline:auto;
  font-family:'Vazirmatn','iranyekan',inherit; color:var(--ek-navy);
  background:#fff; border:1.5px solid var(--ek-tint); border-radius:24px; padding:28px 24px;
  box-sizing:border-box;
}
.ekl *,.ekl *::before,.ekl *::after{box-sizing:border-box}
.ekl [hidden]{display:none !important}

.ekl-title{font-size:20px;font-weight:800;margin:0 0 6px;line-height:1.5}
.ekl-sub{font-size:14px;line-height:1.9;color:var(--ek-gray);margin:0 0 20px}

.ekl-field{display:block;margin-bottom:14px}
.ekl-field span{display:block;font-size:13.5px;font-weight:500;margin-bottom:6px}
.ekl-field input{
  width:100%;height:46px;padding:0 14px;font:inherit;font-size:15px;
  border:1.5px solid var(--ek-tint);border-radius:12px;background:var(--ek-warm);
  color:var(--ek-navy);transition:border-color .18s,background .18s;
}
.ekl-field input:focus{outline:none;border-color:var(--ek-green);background:#fff}

.ekl-btn{
  width:100%;height:48px;margin-top:6px;font:inherit;font-size:15.5px;font-weight:600;
  color:#fff;background:var(--ek-green);border:0;border-radius:999px;cursor:pointer;
  transition:background .18s,transform .18s;
}
.ekl-btn:hover:not(:disabled){background:var(--ek-green-d);transform:translateY(-2px)}
.ekl-btn:disabled{opacity:.65;cursor:default;transform:none}

.ekl-msg{margin:12px 0 0;font-size:13.5px;line-height:1.8;min-height:1em}
.ekl-msg.is-error{color:#D92D20}
.ekl-msg.is-ok{color:var(--ek-green-d)}

/* ── کد تأیید ── */
.ekl-otp{display:flex;gap:10px;justify-content:center;margin:4px 0 18px}
.ekl-otp input{
  width:52px;height:60px;text-align:center;font-size:24px;font-weight:700;
  border:1.5px solid var(--ek-tint);border-radius:14px;background:var(--ek-warm);
  color:var(--ek-navy);transition:border-color .18s,background .18s,transform .18s;
}
.ekl-otp input:focus{outline:none;border-color:var(--ek-green);background:#fff;transform:translateY(-2px)}
.ekl-shake{animation:eklShake .45s}
@keyframes eklShake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)}
}

.ekl-actions{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
.ekl-link{
  background:none;border:0;padding:0;font:inherit;font-size:13.5px;
  color:var(--ek-green-d);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.ekl-link:disabled{color:var(--ek-gray);cursor:default;text-decoration:none}

/* ── مرحله پایانی ── */
.ekl-step--done{text-align:center}
.ekl-check{width:76px;height:76px;margin:0 auto 16px}
.ekl-check svg{width:100%;height:100%;fill:none;stroke:var(--ek-green);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.ekl-check circle{stroke-dasharray:151;stroke-dashoffset:151;animation:eklCircle .6s ease forwards}
.ekl-check path{stroke-dasharray:36;stroke-dashoffset:36;animation:eklTick .35s .5s ease forwards}
@keyframes eklCircle{to{stroke-dashoffset:0}}
@keyframes eklTick{to{stroke-dashoffset:0}}

.ekl-cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:8px;
  padding:15px 30px;border-radius:999px;text-decoration:none;
  font-size:16px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--ek-green),var(--ek-green-d));
  box-shadow:0 8px 24px rgba(14,173,130,.32);
  animation:eklPulse 2.2s ease-in-out infinite;
  transition:transform .2s,box-shadow .2s;
}
.ekl-cta:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 34px rgba(14,173,130,.42);animation:none}
@keyframes eklPulse{
  0%,100%{box-shadow:0 8px 24px rgba(14,173,130,.32)}
  50%{box-shadow:0 8px 34px rgba(14,173,130,.55)}
}

.ekl-in{animation:eklIn .35s ease}
@keyframes eklIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:480px){
  .ekl{padding:22px 18px;border-radius:20px}
  .ekl-otp{gap:7px}
  .ekl-otp input{width:46px;height:54px;font-size:21px}
  .ekl-actions{flex-direction:column;align-items:center;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .ekl *{animation:none !important;transition:none !important}
}