/* Password toggle button styling */
.password-toggle-btn {
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    z-index: 10;
}

.password-toggle-btn:hover {
    color: #6b7280; /* gray-500 */
}

.password-toggle-btn:focus {
    outline: none;
    color: #374151; /* gray-700 */
}

/* Ensure the eye icons are properly sized and positioned */
.password-eye-icon,
.password-eye-slash-icon {
    transition: stroke 0.2s ease-in-out;
}

/* Make sure the password field wrapper has proper positioning */
.password-field-wrapper {
    position: relative;
}

/* Ensure the password input doesn't overlap with the eye icon */
.password-field-wrapper input[type="password"],
.password-field-wrapper input[type="text"] {
    padding-right: 2.5rem; /* 40px to make room for the eye icon */
}