/* Display-only password show/hide control for VeriQal auth screens. */
.vq-password-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.vq-password-wrap input[type="password"],
.vq-password-wrap input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding-right: 5.25rem;
}

button.vq-password-toggle,
.vq-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: auto !important;
    min-width: 3.5rem;
    margin: 0 !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(148, 163, 184, 0.5) !important;
    border-radius: 6px !important;
    background: rgba(15, 23, 42, 0.92) !important;
    background-image: none !important;
    color: #e2e8f0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none !important;
}

button.vq-password-toggle:hover,
.vq-password-toggle:hover {
    border-color: #12c8e8 !important;
    color: #12c8e8 !important;
}

button.vq-password-toggle:focus,
button.vq-password-toggle:focus-visible,
.vq-password-toggle:focus,
.vq-password-toggle:focus-visible {
    outline: 2px solid #12c8e8;
    outline-offset: 2px;
}

html[data-theme="light"] button.vq-password-toggle,
html[data-theme="light"] .vq-password-toggle,
html[data-theme-resolved="light"] button.vq-password-toggle,
html[data-theme-resolved="light"] .vq-password-toggle {
    background: rgba(248, 250, 252, 0.96) !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.28) !important;
}