/**
 * Atom: Formular-Elemente
 *
 * Gilt global für native Felder – Checkout, Konto, Warenkorb und
 * Kontaktformulare sehen dadurch identisch aus, ohne Zusatzklassen.
 *
 * Fehler: [aria-invalid="true"] bzw. Woo-Klasse .woocommerce-invalid.
 */
:where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	input[type="number"],
	input[type="search"],
	input[type="url"],
	input[type="date"],
	select,
	textarea
) {
	appearance: none;
	background-color: var(--theme-input-bg);
	border: var(--border-width-thin) solid var(--theme-input-border);
	border-radius: var(--theme-input-radius);
	color: var(--theme-input-text);
	font-size: var(--font-size-body); /* ≥ 1rem: verhindert Zoom auf iOS */
	inline-size: 100%;
	line-height: var(--line-height-body);
	min-block-size: var(--theme-input-height);
	padding: var(--space-3) var(--space-4);
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

:where(textarea) {
	min-block-size: 8rem;
	resize: vertical;
}

:where(input, select, textarea)::placeholder {
	color: var(--theme-input-placeholder);
	opacity: 1;
}

@media (hover: hover) {
	:where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], select, textarea):hover {
		border-color: var(--theme-input-border-hover);
	}
}

:where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], select, textarea):focus-visible {
	border-color: var(--theme-input-border-focus);
	box-shadow: 0 0 0 var(--border-width-medium) var(--theme-input-border-focus);
	outline: none;
}

/* Select-Pfeil */
:where(select) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
	background-position: right var(--space-4) center;
	background-repeat: no-repeat;
	background-size: 1rem;
	padding-inline-end: var(--space-10);
}

/* Fehlerzustand */
:where(input, select, textarea)[aria-invalid="true"],
.woocommerce-invalid :where(input.input-text, select, textarea) {
	border-color: var(--theme-input-error);
	box-shadow: 0 0 0 var(--border-width-thin) var(--theme-input-error);
}

:where(input, select, textarea):disabled {
	background-color: var(--theme-bg-muted);
	cursor: not-allowed;
	opacity: 0.7;
}

/* ---------------------------------------------------- Checkbox & Radio */
:where(input[type="checkbox"], input[type="radio"]) {
	appearance: none;
	background: var(--theme-input-bg);
	block-size: 1.25rem;
	border: var(--border-width-medium) solid var(--theme-input-border);
	cursor: pointer;
	display: inline-grid;
	flex: 0 0 auto;
	inline-size: 1.25rem;
	margin: 0;
	place-content: center;
	transition:
		background-color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
	vertical-align: -0.25em;
}

:where(input[type="checkbox"]) {
	border-radius: var(--radius-sm);
}

:where(input[type="radio"]) {
	border-radius: 50%;
}

:where(input[type="checkbox"])::before {
	block-size: 0.75rem;
	background: var(--theme-text-inverse);
	clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 85% 8%, 39% 69%);
	content: "";
	inline-size: 0.75rem;
	scale: 0;
	transition: scale var(--duration-fast) var(--ease-out);
}

:where(input[type="radio"])::before {
	background: var(--theme-text-inverse);
	block-size: 0.5rem;
	border-radius: 50%;
	content: "";
	inline-size: 0.5rem;
	scale: 0;
	transition: scale var(--duration-fast) var(--ease-out);
}

:where(input[type="checkbox"], input[type="radio"]):checked {
	background: var(--theme-control-checked);
	border-color: var(--theme-control-checked);
}

:where(input[type="checkbox"], input[type="radio"]):checked::before {
	scale: 1;
}

:where(input[type="checkbox"], input[type="radio"]):focus-visible {
	outline: var(--theme-focus-width) solid var(--theme-focus-ring);
	outline-offset: var(--border-width-medium);
}

/* Label + Beschreibung neben Control (Wiki: css-grid-form-controls) */
.choice {
	align-items: start;
	column-gap: var(--space-3);
	cursor: pointer;
	display: grid;
	grid-template-columns: auto 1fr;
}

.choice > input {
	margin-block-start: 0.15em;
}

/* --------------------------------------------------------------- Label */
.field-label,
:where(.woocommerce form .form-row) > label {
	display: block;
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-small);
	margin-block-end: var(--space-2);
}

/* Passwort anzeigen (WooCommerce .show-password-input) */
.password-input {
	display: block;
	position: relative;
}

.password-input input {
	padding-inline-end: calc(var(--size-tap) + var(--space-2));
}

.show-password-input {
	align-items: center;
	background: transparent;
	block-size: var(--size-tap);
	border: 0;
	border-radius: var(--radius-md);
	color: var(--theme-text-muted);
	display: inline-flex;
	inline-size: var(--size-tap);
	inset-block-start: calc((var(--theme-input-height) - var(--size-tap)) / 2);
	inset-inline-end: var(--space-1);
	justify-content: center;
	padding: 0;
	position: absolute;
}

.show-password-input::before {
	background: currentColor;
	block-size: 1.25rem;
	content: "";
	inline-size: 1.25rem;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.show-password-input.display-password::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M10.6 5.1A9.8 9.8 0 0 1 12 5c6.4 0 10 7 10 7a17 17 0 0 1-3.2 3.9M6.6 6.6C3.9 8.4 2 12 2 12s3.6 7 10 7a9.6 9.6 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M10.6 5.1A9.8 9.8 0 0 1 12 5c6.4 0 10 7 10 7a17 17 0 0 1-3.2 3.9M6.6 6.6C3.9 8.4 2 12 2 12s3.6 7 10 7a9.6 9.6 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
}

@media (hover: hover) {
	.show-password-input:hover {
		color: var(--theme-text);
	}
}