/*
 * Password visibility toggle — shared styles.
 * Usage: wrap a password input with a .pw-wrap container and append a
 * .pw-toggle-btn button containing an icon, e.g.:
 *
 *   <div class="pw-wrap">
 *       <input type="password" class="form-control pw-input" ...>
 *       <button type="button" class="pw-toggle-btn"
 *           aria-label="Show password"
 *           onclick="togglePasswordVisibility('inputId', this)">
 *           <i class="fas fa-eye"></i>
 *       </button>
 *   </div>
 *
 * The eye sits inside the input (right side), is fully clickable, has a
 * pointer cursor and no background / border. LTR and RTL are both supported.
 */
.pw-wrap {
    position: relative;
    display: block;
}

/* Form-drawn (Laravel Collective) password inputs */
.pw-wrap > input[type="password"] {
    padding-right: 40px;
}

.pw-wrap .pw-toggle-btn {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #6c757d;
    cursor: pointer;
    padding: 0 4px;
    font-size: 1.05rem;
    line-height: 1;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pw-wrap .pw-toggle-btn:hover {
    color: #343a40;
}

.pw-toggle-btn i {
    pointer-events: none;
}

/* RTL support */
html[dir="rtl"] .pw-wrap > input[type="password"] {
    padding-left: 40px;
    padding-right: 0.75rem;
}

html[dir="rtl"] .pw-wrap .pw-toggle-btn {
    right: auto;
    left: 12px;
}