/*!
 * password-toggle.css — Feb 2026
 * Styles for the universal show/hide password (👁) button.
 * Positioning coexists with password-complexity.css:
 *   - Solo (login field, no info-button)    → eye at right: 8px
 *   - Alongside (i) info-button (register)  → eye at right: 34px
 * Input padding-right is reserved so the caret never overlaps the icon(s).
 */

/* Container wraps the <input> so we can absolutely-position the eye button. */
.pwd-toggle-wrap {
    display: block;
}

/* Eye button — pinned to the right side of the input, vertically centered. */
.pwd-toggle-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #6c757d;               /* Bootstrap muted */
    cursor: pointer;
    border-radius: 50%;
    transition: color .15s ease, background-color .15s ease;
    z-index: 3;                   /* above the input's inner shadows */
}
.pwd-toggle-btn:hover,
.pwd-toggle-btn:focus {
    color: #0d6efd;               /* Bootstrap primary */
    background: rgba(13, 110, 253, 0.08);
    outline: none;
}
.pwd-toggle-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}
.pwd-toggle-btn[aria-pressed="true"] {
    color: #0d6efd;
}

/* When the wrapper is SHARED with password-complexity (info button present),
   move the eye to the LEFT of the (i) button so both fit comfortably. */
.pwd-complex-wrap.pwd-toggle-wrap--with-info .pwd-toggle-btn {
    right: 34px;                  /* leaves ~26px for the (i) icon */
}

/* Reserve room INSIDE the <input> for the icon(s). Solo eye needs ~36px;
   eye + info-button need ~62px total. Uses !important to beat Bootstrap's
   default padding on .form-control. */
.pwd-toggle-wrap--solo > input[type="password"],
.pwd-toggle-wrap--solo > input[type="text"] {
    padding-right: 40px !important;
}
.pwd-complex-wrap.pwd-toggle-wrap--with-info > input[type="password"],
.pwd-complex-wrap.pwd-toggle-wrap--with-info > input[type="text"] {
    padding-right: 66px !important;
}

/* When focused, keep icon crisp on touch devices — avoid the double-tap
   zoom flash on Safari mobile. */
.pwd-toggle-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .pwd-toggle-btn { transition: none; }
    .pwd-toggle-btn:active { transform: translateY(-50%); }
}