/**
 * Password visibility eye — shared by all login/register forms.
 *
 * Purely additive: every rule is scoped under .aal-pw-wrap, a class this
 * plugin's JS adds around password inputs at runtime. If the JS does not run
 * (or is blocked), none of these rules match and the forms render exactly as
 * before. No existing selector or template markup is modified.
 *
 * Logical properties (inline-start/inline-end) keep the icon on the correct
 * side in both RTL (Persian) and LTR layouts.
 */

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

/* Reserve room at the inline end so typed text never sits under the icon.
   !important is required to win against the themes' own `padding` shorthands
   (vatanabzar-style.css sets padding with !important). */
.aal-pw-wrap > input {
    padding-inline-end: 40px !important;
}

/* Keep the browser's native reveal/clear affordances from colliding. */
.aal-pw-wrap > input::-ms-reveal,
.aal-pw-wrap > input::-ms-clear {
    display: none;
}

.aal-pw-toggle {
    position: absolute;
    inset-inline-end: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: #8a8a8a;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.15s ease, color 0.15s ease;
    /* Above the input, but the SVG itself must not swallow clicks. */
    z-index: 2;
    -webkit-appearance: none;
    appearance: none;
    line-height: 0;
}

.aal-pw-toggle:hover {
    opacity: 1;
    color: #4a4a4a;
}

.aal-pw-toggle:focus-visible {
    opacity: 1;
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.aal-pw-toggle svg {
    width: 19px;
    height: 19px;
    display: block;
    pointer-events: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Two stacked icons; exactly one is shown depending on aria-pressed.
   Default (aria-pressed="false") = password hidden -> show the "eye" icon. */
.aal-pw-toggle .aal-pw-icon-off {
    display: none;
}

.aal-pw-toggle[aria-pressed="true"] .aal-pw-icon-on {
    display: none;
}

.aal-pw-toggle[aria-pressed="true"] .aal-pw-icon-off {
    display: block;
}