@font-face{
  font-family: "YekanBakh";
  src: url("../fonts/yekanbakh.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

.zxdpn-wrap{ display:inline-block; }

.zxdpn-open{
  appearance:none;
  border:1px solid var(--zxdpn-open-border, rgba(0,0,0,.12));
  background: var(--zxdpn-open-bg, #4b49ac);
  color: var(--zxdpn-open-color, #fff);
  padding:0 18px;
  height: var(--zxdpn-open-h, 44px);
  border-radius: var(--zxdpn-open-r, 14px);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family: var(--zxdpn-font, inherit) !important;
  font-size: var(--zxdpn-btn-fs, 14px) !important;
  font-weight:700;
  line-height:1;
  transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.zxdpn-open:hover{ box-shadow: 0 14px 30px rgba(0,0,0,.14); opacity:.98; background: var(--zxdpn-open-bg-h, var(--zxdpn-open-bg, #4b49ac)); border-color: var(--zxdpn-open-border-h, var(--zxdpn-open-border, #4b49ac)); color: var(--zxdpn-open-color-h, var(--zxdpn-open-color, #fff)); }
.zxdpn-open:active{ transform: scale(.98); }

.zxdpn-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index: 9999999;
  font-family: var(--zxdpn-font, inherit);
}
.zxdpn-modal.is-open{ display:block; }

.zxdpn-progress[hidden]{ display:none !important; }

.zxdpn-modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0, var(--zxdpn-overlay, .45));
}
.zxdpn-modal__panel{
  position:relative;
  width: min(var(--zxdpn-modal-w, 420px), 92vw);
  margin: 10vh auto 0;
  background:#fff;
  border-radius: var(--zxdpn-radius, 18px);
  padding:16px 16px 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  direction: rtl;
  color: inherit;
}
.zxdpn-modal__x{
  position:absolute; top:12px; left:12px;
  width: var(--zxdpn-x-size, 36px); height: var(--zxdpn-x-size, 36px);
  border-radius: var(--zxdpn-x-r, 12px);
  border:1px solid var(--zxdpn-x-border, rgba(0,0,0,.10));
  background: var(--zxdpn-x-bg, #fff);
  color: var(--zxdpn-x-color, #111);
  cursor:pointer;
  font: 700 18px/34px var(--zxdpn-font, inherit);
  display:flex; align-items:center; justify-content:center;
}
.zxdpn-modal__title{ font-weight:800; font-size: var(--zxdpn-title-fs, 16px); }
.zxdpn-modal__sub{ opacity:.75; font-size: var(--zxdpn-sub-fs, 13px); margin-top:4px; }

.zxdpn-input{
  width:100%;
  margin-top:12px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  padding:0 12px;
  direction:ltr;
  text-align:left;
  font: 500 var(--zxdpn-input-fs, 14px)/1.2 var(--zxdpn-font, inherit);
}
.zxdpn-go{
  width:100%;
  margin-top:10px;
  height: var(--zxdpn-btn-h, 44px);
  border-radius: var(--zxdpn-btn-r, 14px);
  border:1px solid var(--zxdpn-btn-border, #4b49ac);
  background: var(--zxdpn-btn-bg, #4b49ac);
  color: var(--zxdpn-btn-color, #fff);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family: var(--zxdpn-font, inherit) !important;
  font-size: var(--zxdpn-btn-fs, 14px) !important;
  font-weight:800;
  line-height:1;
  transition: opacity .2s ease, transform .08s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.zxdpn-go:hover{ opacity:.96; background: var(--zxdpn-btn-bg-h, var(--zxdpn-btn-bg, #4b49ac)); border-color: var(--zxdpn-btn-border-h, var(--zxdpn-btn-border, #4b49ac)); color: var(--zxdpn-btn-color-h, var(--zxdpn-btn-color, #fff)); }
.zxdpn-go:active{ transform: scale(.99); }
.zxdpn-go:disabled{ opacity:.6; cursor:not-allowed; }

.zxdpn-msg{ margin-top:10px; font-size:13px; min-height: 18px; }

.zxdpn-progress{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  padding:10px 0 4px;
}
.zxdpn-ring{ width: var(--zxdpn-ring-size, 44px); height: var(--zxdpn-ring-size, 44px); }
.zxdpn-ring__bg{ fill:none; stroke: var(--zxdpn-ring-bg, rgba(0,0,0,.10)); stroke-width: 3.2; }
.zxdpn-ring__fg{ fill:none; stroke: var(--zxdpn-ring-fg, #4b49ac); stroke-width: 3.2; stroke-linecap: round; transition: stroke-dasharray .12s linear; }
.zxdpn-progress__txt{ font-size:13px; opacity:.85; }

.zxdpn-modal__x:hover{
  background: var(--zxdpn-x-bg-h, var(--zxdpn-x-bg, #fff));
  border-color: var(--zxdpn-x-border-h, var(--zxdpn-x-border, rgba(0,0,0,.10)));
  color: var(--zxdpn-x-color-h, var(--zxdpn-x-color, #111));
}