/* Show/hide eye on password boxes — markup added by /assets/js/password-toggle.js. */
.pw-field {
    position: relative;
    display: block;
}

.pw-field > input {
    width: 100%;
    /* Room for the eye so typed text never runs under it. */
    padding-right: 2.75rem !important;
}

/* Hide the browser's own reveal control (Edge) so there is only one eye. */
.pw-field > input::-ms-reveal,
.pw-field > input::-ms-clear {
    display: none;
}

.pw-field__toggle {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--color-text-muted, #4b5563);
    cursor: pointer;
    box-shadow: none;
}

/* The wrapper breaks Bootstrap's `input ~ .invalid-feedback` sibling rule; restore it. */
.pw-field:has(> input.is-invalid) ~ .invalid-feedback,
.was-validated .pw-field:has(> input:invalid) ~ .invalid-feedback {
    display: block;
}

.pw-field__toggle:hover {
    color: var(--color-text, #111827);
}

.pw-field__toggle:focus-visible {
    outline: 2px solid var(--color-primary, #1d4ed8);
    outline-offset: 1px;
}