/* Password Toggle Styles - Using Locked Design System */

.password-field-wrapper {
    position: relative;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    color: #64748B; /* Muted Text */
    font-size: 16px;
    padding: 4px 8px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.password-toggle:hover {
    color: #E11D48; /* Accent color */
}

.password-toggle:focus {
    outline: none;
    color: #E11D48;
}

.password-toggle:active {
    transform: translateY(-50%) scale(0.95);
}

/* Adjust input padding to make room for icon */
.password-field-wrapper .form-control.password-input {
    padding-right: 42px;
}

/* For form-floating labels, ensure icon doesn't overlap label */
.password-field-wrapper.form-floating .password-toggle {
    top: calc(50% + 0.5rem); /* Adjust for floating label */
}

/* Ensure icon doesn't interfere with validation states */
.password-field-wrapper .form-control.is-invalid {
    padding-right: 42px;
}

.password-field-wrapper .form-control.is-valid {
    padding-right: 42px;
}