/* Show/Hide toggle and Caps Lock hint for input[data-password-field] (js/passwordFields.js).
   Selectors are doubled up to beat Login.css's global button rules. */
.password-field {
    position: relative;
    width: 100%;
}

    .password-field input[data-password-field] {
        /* page styles set full padding shorthands with higher specificity */
        padding-right: 4.25rem !important;
    }

    /* Edge draws its own reveal button; keep a single toggle. */
    .password-field input[data-password-field]::-ms-reveal,
    .password-field input[data-password-field]::-ms-clear {
        display: none;
    }

    .password-field .password-toggle,
    .password-field .password-toggle:hover,
    .password-field .password-toggle:focus,
    .password-field .password-toggle:active {
        position: absolute;
        top: 50%;
        right: 0.45rem;
        transform: translateY(-50%);
        width: auto;
        min-width: 0;
        min-height: 0;
        height: auto;
        padding: 0.3rem 0.55rem;
        margin: 0;
        border: none;
        border-radius: 6px;
        background: transparent;
        box-shadow: none;
        color: #922D31;
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.02em;
        cursor: pointer;
    }

        .password-field .password-toggle:hover {
            background: rgba(236, 27, 36, 0.08);
        }

        .password-field .password-toggle:focus-visible {
            outline: 2px solid #EC1B24;
            outline-offset: 1px;
        }

.caps-lock-hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.35rem 0 0.25rem;
    color: #b45309;
    font-size: 0.8rem;
    font-weight: 600;
}

    .caps-lock-hint::before {
        content: "\26A0";
    }

    .caps-lock-hint[hidden] {
        display: none;
    }

/* Login.css spaces inputs with margin-bottom; move that spacing to the wrapper so the
   toggle stays vertically centred on the input. */
.custom-modal-body .password-field {
    margin-bottom: 15px;
}

    .custom-modal-body .password-field input[data-password-field] {
        margin-bottom: 0;
    }

.custom-modal-body .caps-lock-hint {
    margin: -8px 0 12px;
}