/* Password visibility toggle styles */
    .password-field-container {
      position: relative;
      width: 100%;
    }

    .password-toggle-button {
      position: absolute;
      right: 8px;
      /* top set dynamically in JS to align with input top */
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      cursor: pointer;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      z-index: 2;
      min-width: 36px;
      min-height: 36px;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      outline: none !important;
    }

    .password-toggle-button:hover,
    .password-toggle-button:focus,
    .password-toggle-button:active {
      background-color: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
      color: rgb(0, 92, 157) !important;
    }

    .material-icons {
      font-size: 20px;
      opacity: 0.7;
      line-height: 1;
      /* Subtle adjustment to icon positioning */
      position: relative;
      top: 0;
    }

    .password-toggle-button:hover .material-icons {
      opacity: 1;
      color: rgb(0, 92, 157);
    }

    /* Improved mobile support for password toggle */
    .password-toggle-button {
      /* Increase touch target size for mobile */
      min-width: 44px;
      min-height: 44px;
      /* Center the icon within the larger touch area */
      display: flex;
      align-items: center;
      justify-content: center;
      /* Adjust position to accommodate larger touch area */
      right: 0;
      /* Prevent text selection on mobile */
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    input::-ms-reveal { display: none; }