/*
 * Phase 7.5.4B/9 — password eye toggle styles.
 * Wrap pattern: <span class="pwd-eye-wrap"> contains the input + button.
 * Button is absolute-positioned to the right of the input.
 */
.pwd-eye-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.pwd-eye-wrap > input[type="password"],
.pwd-eye-wrap > input[type="text"] {
  width: 100%;
  padding-right: 38px !important;
  box-sizing: border-box;
}
.pwd-eye-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-text-muted, #8A8779);
  z-index: 2;
}
.pwd-eye-btn:hover { color: var(--tml-primary, #B64926); }
.pwd-eye-btn:focus {
  outline: 2px solid rgba(182,73,38,0.4);
  outline-offset: 1px;
}
.pwd-eye-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.pwd-eye-icon.pwd-eye-show {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>");
}
.pwd-eye-icon.pwd-eye-hide {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/><line x1='1' y1='1' x2='23' y2='23'/></svg>");
}