.password-wrapper {
    position: relative;
    width: 100%;
    display: block; /* Ensure it takes full width of form-group */
}

.password-wrapper input {
    padding-right: 45px !important;
}

.password-toggle-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #9a9fbf;
    z-index: 10;
    font-size: 1.2rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

/* Handle when icon is inside an existing input-group-addon */
.input-group-addon.password-toggle-parent {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    position: absolute; /* Re-position inside form-group if it's drifting */
    height: 100%;
    right: 0;
    top: 0;
    background: transparent;
    border: none;
    z-index: 5;
}

/* For the dual-icon strategy */
.password-toggle-icon.fa-eye-slash {
    display: none !important;
}

.password-visible .password-toggle-icon.fa-eye {
    display: none !important;
}

.password-visible .password-toggle-icon.fa-eye-slash {
    display: flex !important;
}

/* Ensure original icons are hidden in addons when toggle is active */
.password-toggle-parent i:not(.password-toggle-icon),
.password-toggle-parent svg:not(.password-toggle-icon) {
    display: none !important;
}

.password-toggle-icon:hover {
    color: #1b55e2;
}