/**
 * v126-additions.css
 *
 * 1. Password toggle — SVG eye, absolutely positioned inside every password field.
 *    Suppresses browser-native reveal buttons (::-ms-reveal, ::-webkit-credentials-auto-fill-button etc.)
 *    Works on custom .cb-pw-wrap fields AND WooCommerce account page .password-input fields.
 */

/* ══════════════════════════════════════════════════════════════════
   PASSWORD TOGGLE — v126 canonical rules
   All previous .cb-pw-toggle rules from v96/v115/v116 are superseded here.
   ══════════════════════════════════════════════════════════════════ */

/* Kill browser-native password reveal buttons everywhere */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-strong-password-auto-fill-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* The wrapper — position:relative so the absolute button sits inside the field */
.cb-pw-wrap,
.woocommerce .password-input {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

/* The input itself — padding-right leaves room for the eye button */
.cb-pw-wrap input[type="password"],
.cb-pw-wrap input[type="text"],
.woocommerce .password-input input[type="password"],
.woocommerce .password-input input[type="text"],
.woocommerce-account input[type="password"] {
  width: 100% !important;
  padding-right: 2.4rem !important;
  box-sizing: border-box !important;
}

/* The eye button — absolute, vertically centred, flush right */
.cb-pw-toggle {
  position: absolute !important;
  right: 0.55rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  color: #888 !important;
  opacity: 0 !important;               /* hidden at rest */
  transition: opacity 0.15s, color 0.15s !important;
  z-index: 3 !important;
  user-select: none !important;
  line-height: 1 !important;
  border-radius: 0 !important;
}

/* Show on hover of the button itself or when password is visible */
.cb-pw-toggle:hover,
.cb-pw-toggle[data-visible="true"] {
  opacity: 1 !important;
  color: var(--cb-hamburger-pink, #ff4fa3) !important;
}

/* SVG inside the button */
.cb-pw-toggle svg {
  display: block;
  width: 15px;
  height: 15px;
  pointer-events: none;
}

/* WooCommerce account page — the fieldset wrapper needs relative too */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
  position: relative;
}

/* Prevent WooCommerce from adding its own show-password toggle */
.woocommerce .show-password-input {
  display: none !important;
}