/* ==========================================================================
   Serath2 — password show/hide ("eye") toggle     css/pw-toggle.css
   Loaded site-wide (main site) AND in the ItemShop, always with ABSOLUTE
   paths because the ItemShop uses <base href="/itemshop/">.

   Markup is injected by js/pw-toggle.js, which wraps each
   <input type="password"> in <span class="pw-wrap"> and appends a
   <button class="pw-toggle">. Nothing needs to change in the forms.

   Two wrapper modes, decided by the script from the input's measured width:
     .pw-wrap              inline-block — input keeps its natural width
                                          (ItemShop login: "<input> « Jelszó")
     .pw-wrap--block       block        — input was full-width
                                          (auth pages, sidebar login box)
   Doing it this way avoids the circular "width:100% inside a shrink-to-fit
   wrapper" problem, which would collapse the full-width fields.
   ========================================================================== */

.pw-wrap{
  position:relative;
  display:inline-block;
  vertical-align:middle;
  max-width:100%;
}
.pw-wrap--block{display:block;width:100%}

/* keep typed text clear of the icon */
.pw-wrap input[type=password],
.pw-wrap input[type=text]{
  padding-right:2.9em;
}

.pw-toggle{
  position:absolute;
  top:50%;
  right:5px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin:0;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  color:var(--muted,#9a90b4);
  cursor:pointer;
  transition:color .15s ease,background .15s ease;
}
.pw-toggle:hover,
.pw-toggle:focus{
  color:#fff;
  background:rgba(169,116,255,.16);
  outline:0;
}
.pw-toggle:focus-visible{
  outline:2px solid var(--violet,#a974ff);
  outline-offset:1px;
}
.pw-toggle svg{
  display:block;
  width:19px;
  height:19px;
  pointer-events:none;
}
/* pressed = password is currently VISIBLE */
.pw-toggle[aria-pressed="true"]{color:var(--violet-soft,#c9a6ff)}

@media(max-width:620px){
  .pw-toggle{width:32px;height:32px;right:4px}
}

@media(prefers-reduced-motion:reduce){
  .pw-toggle{transition:none}
}