/* dj-password-toggle.css
   Shared show/hide (eye icon) styling for every password field site-wide.
   Paired with assets/js/dj-password-toggle.js, which wraps each
   input[type="password"] in .dj-pass-toggle-wrap and injects the button.
   Safe to include on any page (panel dark theme or main-site light theme) —
   the icon color reads --dj-pass-icon-color when a page defines it, and
   falls back to the panel gold otherwise. */

.dj-pass-toggle-wrap {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: inherit;
}

.dj-pass-toggle-wrap input.dj-pass-toggle-input {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 42px !important;
}

/* Suppress the browser/extension's own native password-reveal icon
   (Edge's built-in eye, and some password-manager extensions inject a
   similar icon) — without this it can render inside the same right-hand
   zone as our custom button and visually collide with/stick out past it. */
.dj-pass-toggle-wrap input.dj-pass-toggle-input::-ms-reveal,
.dj-pass-toggle-wrap input.dj-pass-toggle-input::-ms-clear {
    display: none !important;
}

.dj-pass-toggle-btn {
    /* Explicit box size (not intrinsic content sizing) so the button's
       rendered footprint is never in question — it's always exactly
       26x26, positioned fully inside the input's 42px right padding. */
    position: absolute;
    top: 50%;
    right: 12px;
    width: 26px;
    height: 26px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    opacity: .7;
    z-index: 2;
}

.dj-pass-toggle-btn:hover,
.dj-pass-toggle-btn:focus {
    opacity: 1;
    outline: none;
}

.dj-pass-toggle-btn i {
    color: var(--dj-pass-icon-color, #f4b90d);
    font-size: 15px;
    pointer-events: none;
}