<div class="radikalwp-form-pass"><input class="radikalwp-form-pass-input" type="password" placeholder="رمز عبور" aria-label="رمز عبور"><button class="radikalwp-form-pass-toggle" type="button" aria-label="نمایش رمز">👁<//button><//div>

.radikalwp-form-pass {
  position: relative;
  max-width: 320px;
}
.radikalwp-form-pass-input {
  width: 100%;
  padding: 13px 52px 13px 16px;
  font-family: inherit;
  font-size: 14px;
  color: #1e293b;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.radikalwp-form-pass-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .14);
}
.radikalwp-form-pass-toggle {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 10px;
  font-size: 15px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  opacity: .55;
  transition: opacity .2s ease;
}
.radikalwp-form-pass-toggle:hover { opacity: 1; }
.radikalwp-form-pass-toggle[data-visible="1"] { opacity: 1; }

// جابه‌جایی نمایش/پنهان رمز با تغییر type و آیکون
document.querySelectorAll('.radikalwp-form-pass').forEach(function (wrap) {
  var input = wrap.querySelector('.radikalwp-form-pass-input');
  var toggle = wrap.querySelector('.radikalwp-form-pass-toggle');
  toggle.addEventListener('click', function () {
    var show = input.type === 'password';
    input.type = show ? 'text' : 'password';
    toggle.dataset.visible = show ? '1' : '0';
    toggle.textContent = show ? '🙈' : '👁';
    toggle.setAttribute('aria-label', show ? 'پنهان کردن رمز' : 'نمایش رمز');
  });
});