/* =========================================
   METEOPANEL - Password eye toggle (V18)
   Fix: correct positioning inside inputs
   Fix: auto-contrast icon on light/dark fields
   ========================================= */

.mp-password-wrapper{
  position:relative;
  display:block;
}

.mp-password-wrapper input[type="password"],
.mp-password-wrapper input[type="text"]{
  padding-right:46px !important; /* room for eye */
}

.mp-password-toggle-btn{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  user-select:none;
  opacity:.85;
  transition:opacity .15s ease, transform .15s ease;
  color:rgba(0,0,0,.65); /* will be overridden by JS auto-contrast when needed */
}

.mp-password-toggle-btn:hover{
  opacity:1;
  transform:translateY(-50%) scale(1.05);
}

.mp-password-toggle-btn:active{
  transform:translateY(-50%) scale(0.98);
}

.mp-password-toggle-btn svg{
  width:18px;
  height:18px;
  display:block;
}

.mp-password-toggle-btn .mp-eye-off{
  display:none;
}

.mp-password-toggle-btn.is-on .mp-eye{
  display:none;
}
.mp-password-toggle-btn.is-on .mp-eye-off{
  display:block;
}

/* Subtle focus ring when navigating with keyboard */
.mp-password-toggle-btn:focus-visible{
  outline:2px solid rgba(0,0,0,.25);
  outline-offset:2px;
}

/* If parent is dark, keep focus visible */
body.theme-dark .mp-password-toggle-btn:focus-visible,
.panel-dark .mp-password-toggle-btn:focus-visible{
  outline-color:rgba(255,255,255,.35);
}