/* =============================================================================
 * Password input with eye toggle
 * Used by: register.xhtml, login.xhtml, reset-password.xhtml
 * Rendered by: component/formInputPassword.xhtml
 * Behaviour: js/password-toggle.js
 * ========================================================================== */

.password-toggle-wrapper {
    position: relative;
    width: 100%;
}

/* Reserve room on the right so the eye doesn't sit on top of typed text */
.password-toggle-wrapper > input,
.password-toggle-wrapper > .ui-inputtext {
    padding-right: 2.75rem !important;
    width: 100%;
}

/* Subtle focus ring using the brand purple. No jagged default outline. */
.password-toggle-wrapper > input:focus,
.password-toggle-wrapper > .ui-inputtext:focus {
    border-color: var(--brand-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(206, 14, 45, 0.12);
}

/* -------- The toggle button -------- */
.password-toggle-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    height: 2.25rem;
    width: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--muted-foreground, #6b7280);
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease, transform 80ms ease;
    z-index: 2;
}

.password-toggle-btn:hover {
    color: var(--brand-primary);
    background-color: rgba(206, 14, 45, 0.08);
}

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

.password-toggle-btn:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* When the password is being shown, leave the button in a 'lit' state.
 * This is a small but important affordance: the user can tell at a glance
 * that the field is currently revealed. */
.password-toggle-btn[aria-pressed="true"] {
    color: var(--brand-primary);
    background-color: rgba(206, 14, 45, 0.10);
}

/* -------- The two SVG icons (crossfade) -------- */
.password-toggle-btn .eye-icon {
    position: absolute;
    pointer-events: none;
    transition: opacity 150ms ease;
}

/* Default opacity controlled by inline display: block/none from the JS,
 * but we layer opacity on top so the swap fades instead of jumping. */
.password-toggle-btn .eye-icon[style*="display: none"] {
    opacity: 0;
}
.password-toggle-btn .eye-icon[style*="display: block"] {
    opacity: 1;
}