/* ==========================================================
   CurioMark — shared password field with show/hide (eye) button
   Markup:
     <div class="cm-pass">
       <input type="password" class="form-control" id="x">
       <button type="button" class="cm-pass-toggle" data-target="#x"
               aria-label="Show password"><i class="fas fa-eye"></i></button>
     </div>
   Behaviour: public/admin/assets/js/cm-password.js
   ========================================================== */
.cm-pass { position: relative; display: block; width: 100%; }
.cm-pass > input { padding-right: 52px !important; }

.cm-pass-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%); z-index: 3;
  width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 10px; cursor: pointer; font-size: 14px; line-height: 1;
  color: #1C5763; background: #EAF4F6;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.cm-pass-toggle i { width: 16px; text-align: center; pointer-events: none; }
.cm-pass-toggle:hover { background: #E3F0F2; color: #144550; }
.cm-pass-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(42, 122, 136, .25); }
/* Password currently visible */
.cm-pass-toggle[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, #1C5763, #2A7A88); }

/* Keep clear of Bootstrap's invalid icon */
.cm-pass > .form-control.is-invalid { padding-right: 84px !important; background-position: right 48px center; }

/* Round variant for pill-shaped inputs (e.g. login page) */
.cm-pass--pill .cm-pass-toggle { border-radius: 50%; right: 7px; }