/* Global password visibility toggle
 *
 * Default (hidden): show Eye-Off / crossed eye
 * Revealed (visible): show Open Eye
 */

.pw-field {
    position: relative;
    display: block;
    width: 100%;
}

.pw-field > input[type="password"],
.pw-field > input[type="text"],
.pw-field > input.pw-input {
    width: 100%;
    padding-right: 2.85rem !important;
}

.pg-auth-input-wrap.pw-field-ready .pg-auth-input,
.pg-auth-input-wrap--toggle .pg-auth-input {
    padding-right: 2.85rem !important;
}

.usr-input-wrap.pw-field-ready .usr-input--password,
.usr-input-wrap.pw-field-ready .usr-input {
    padding-right: 2.85rem !important;
}

.pw-toggle,
.pg-auth-toggle-pass,
.usr-toggle-pwd {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #FF8C00;
    opacity: 0.85;
    display: grid;
    place-items: center;
    cursor: pointer;
    border-radius: 8px;
    z-index: 3;
    padding: 0;
    line-height: 0;
}

.pw-toggle:hover,
.pw-toggle:focus-visible,
.pg-auth-toggle-pass:hover,
.pg-auth-toggle-pass:focus-visible,
.usr-toggle-pwd:hover,
.usr-toggle-pwd:focus-visible {
    opacity: 1;
    outline: none;
    background: rgba(255, 140, 0, 0.1);
    color: #E67E00;
}

.pw-toggle svg,
.pg-auth-toggle-pass svg,
.usr-toggle-pwd svg {
    width: 18px;
    height: 18px;
    display: block;
    pointer-events: none;
    /* Stack both icons in one cell so only the visible state shows */
    grid-area: 1 / 1;
}

/* Default = HIDDEN password → show closed/crossed eye only */
.pw-toggle .pw-icon-open,
.pg-auth-toggle-pass .pw-icon-open,
.usr-toggle-pwd .pw-icon-open,
.pw-toggle .pw-eye-on,
.pg-auth-toggle-pass .pg-auth-eye--show,
.usr-toggle-pwd .pw-eye-on {
    display: none !important;
}

.pw-toggle .pw-icon-closed,
.pg-auth-toggle-pass .pw-icon-closed,
.usr-toggle-pwd .pw-icon-closed,
.pw-toggle .pw-eye-off,
.pg-auth-toggle-pass .pg-auth-eye--hide,
.usr-toggle-pwd .pw-eye-off {
    display: block !important;
}

/* Revealed = VISIBLE password → show open eye only */
.pw-toggle.is-revealed .pw-icon-closed,
.pg-auth-toggle-pass.is-revealed .pw-icon-closed,
.usr-toggle-pwd.is-revealed .pw-icon-closed,
.pw-toggle.is-revealed .pw-eye-off,
.pg-auth-toggle-pass.is-revealed .pg-auth-eye--hide,
.usr-toggle-pwd.is-revealed .pw-eye-off,
.pw-toggle[aria-pressed="true"] .pw-icon-closed,
.pg-auth-toggle-pass[aria-pressed="true"] .pw-icon-closed,
.usr-toggle-pwd[aria-pressed="true"] .pw-icon-closed {
    display: none !important;
}

.pw-toggle.is-revealed .pw-icon-open,
.pg-auth-toggle-pass.is-revealed .pw-icon-open,
.usr-toggle-pwd.is-revealed .pw-icon-open,
.pw-toggle.is-revealed .pw-eye-on,
.pg-auth-toggle-pass.is-revealed .pg-auth-eye--show,
.usr-toggle-pwd.is-revealed .pw-eye-on,
.pw-toggle[aria-pressed="true"] .pw-icon-open,
.pg-auth-toggle-pass[aria-pressed="true"] .pw-icon-open,
.usr-toggle-pwd[aria-pressed="true"] .pw-icon-open {
    display: block !important;
}

/* Legacy is-visible class (if any) treated same as revealed */
.pw-toggle.is-visible .pw-icon-closed,
.pw-toggle.is-visible .pw-eye-off {
    display: none !important;
}

.pw-toggle.is-visible .pw-icon-open,
.pw-toggle.is-visible .pw-eye-on {
    display: block !important;
}

.adm-form-group.pw-field-ready,
.adm-form-group .pw-field {
    position: relative;
}

.adm-form-group.pw-field-ready .adm-input {
    padding-right: 2.85rem;
}

.portal-card .pw-field .pg-input,
.portal-card .pw-field-ready .pg-input {
    padding-right: 2.85rem !important;
}