/**
 * password-toggle.css — FacultyPage Theme
 *
 * Adds a show/hide "eye" icon button inside any password field.
 *
 * Markup produced by password-toggle.js:
 *   <div class="fp-password-wrap">
 *     <input type="password" class="fp-input" ...>
 *     <button class="fp-password-toggle" data-visible="false">
 *       <svg class="icon-eye">...</svg>
 *       <svg class="icon-eye-off">...</svg>
 *     </button>
 *   </div>
 *
 * The two SVG icons are both present in the DOM; CSS shows only the
 * one matching the current data-visible state — no JS re-render needed.
 */

/* ════════════════════════════════════════════════════════════
   WRAPPER — positioning context for the toggle button
   ════════════════════════════════════════════════════════════ */
.fp-password-wrap {
  position: relative;
}

/* Reserve space on the right so text doesn't sit under the icon */
.fp-password-wrap > input[type="password"],
.fp-password-wrap > input[type="text"].fp-password-revealed {
  padding-right: 2.6rem;
}

/* ════════════════════════════════════════════════════════════
   TOGGLE BUTTON
   ════════════════════════════════════════════════════════════ */
.fp-password-toggle {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: var(--fp-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--fp-light);
  padding: 0;
  transition: color var(--fp-transition), background var(--fp-transition);
}

.fp-password-toggle:hover {
  color: var(--fp-mid);
  background: var(--fp-off-white);
}

.fp-password-toggle:focus-visible {
  outline: 2px solid var(--fp-terra);
  outline-offset: 1px;
}

/* ════════════════════════════════════════════════════════════
   ICON SWAP — both SVGs exist, CSS shows the right one
   ════════════════════════════════════════════════════════════ */
.fp-password-toggle .icon-eye,
.fp-password-toggle .icon-eye-off {
  display: none;
}

/* Password hidden (default) → show open-eye icon */
.fp-password-toggle[data-visible="false"] .icon-eye {
  display: block;
}

/* Password visible → show eye-off (slashed) icon */
.fp-password-toggle[data-visible="true"] .icon-eye-off {
  display: block;
}

.fp-password-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none; /* clicks pass through to the button */
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .fp-password-toggle {
    width: 36px;
    height: 36px;
  }
  .fp-password-toggle svg {
    width: 20px;
    height: 20px;
  }
}