/**
 * Pressureproof · Password-Toggle (Shared CSS)
 * ============================================================
 * Sprint P0-2 · 2026-07-05 · Nacht-Sprint
 *
 * Wrapper .pp-password-field ist relativ-positioniert und macht das
 * Auge-Icon absolut rechts im Input verankerbar.
 *
 * Brand-CI (§7 · 2026-06-27 Champagner-Gold):
 *   --pp-gold           #C9A75E
 *   --pp-mute           #837C70
 *   Icon-Größe          20x20 px
 *   Focus-Ring          Champagner-Alpha 0.55
 *
 * Fallback-Farben sind hart hinterlegt, damit das Toggle auch auf
 * Templates funktioniert, die die Design-v3 CSS-Vars nicht laden.
 */

.pp-password-field {
	position: relative;
	display: block;
	width: 100%;
}

/* Space für das 20px-Icon + 12px Padding beidseitig. Wenn das Template
   selbst schon padding-right gesetzt hat, überschreibt !important
   nicht – wir arbeiten mit :where() um Specificity flach zu halten. */
:where(.pp-password-field) > input[type="password"],
:where(.pp-password-field) > input[type="text"] {
	padding-right: 44px;
}

.pp-password-toggle {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 6px;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--gold, #C9A75E);
	cursor: pointer;
	line-height: 0;
	transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.pp-password-toggle > svg {
	display: block;
	width: 20px;
	height: 20px;
	pointer-events: none;
}

.pp-password-toggle:hover,
.pp-password-toggle:focus-visible {
	color: #ECD79A;
	background-color: rgba(201, 167, 94, 0.08);
}

.pp-password-toggle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgba(201, 167, 94, 0.55);
}

.pp-password-toggle:active {
	color: #9A7C38;
}

.pp-password-toggle[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	color: var(--mute, #837C70);
}