/* Add this to ensure the username wrapper is a reference point */
.username-field, .password-field {
  position: relative;
  display: block;
  width: 100%;
}

/* Refine the Key Icon */
input::-webkit-credentials-auto-fill-button {
  position: absolute !important;
  /* top: 50% is the true center when used with translateY(-50%) */
  top: 40% !important; 
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  /* We only want it 42px away when there is an EYE icon */
  right: 12px !important; 
}

/* Only push the key to the left if it's inside a password field (to make room for the eye) */
.password-field input::-webkit-credentials-auto-fill-button {
  right: 42px !important; 
}

/* Eye icon: right-aligned, perfectly centered vertically */
.eye-icon {
  position: absolute;
  right: 14px;
  top: 40%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  cursor: pointer;
  stroke: #192231;
  pointer-events: all;
  transition: opacity 0.2s ease;
}

/* Optional hover effect (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .eye-icon:hover {
    opacity: 0.7;
  }
}