.mp-password-ux-note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #4a4a4a;
}

/* Hide Magento's built-in "show password" checkbox UI (we provide an eye toggle instead). */
.mp-password-ux-hide-native {
  display: none !important;
}

.mp-password-ux-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Keep input padding so the eye button doesn't overlap typed text */
.mp-password-ux-wrap > input {
  padding-right: 44px;
  width: 100%;
  box-sizing: border-box;
}

.mp-password-ux-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.mp-password-ux-toggle::before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  margin: 3px auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  /* Simple inline SVG icon (no external deps). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7Zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Z'/%3E%3Cpath fill='%23666' d='M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E");
}

.mp-password-ux-toggle.is-visible::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M2 4.3 3.3 3 21 20.7 19.7 22l-3.1-3.1c-1.4.7-2.9 1.1-4.6 1.1-7 0-10-7-10-7 1-2.2 2.5-4 4.5-5.2L2 4.3Zm7.2 7.2a3 3 0 0 0 4.2 4.2l-4.2-4.2ZM12 6c7 0 10 7 10 7-.7 1.5-1.6 2.8-2.8 3.8l-2.2-2.2a5 5 0 0 0-6.6-6.6L8.4 6.8C9.4 6.3 10.7 6 12 6Z'/%3E%3C/svg%3E");
}

.mp-password-ux-toggle:focus {
  outline: 2px solid #1979c3;
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}