/**
 * Text input: template-parts/ui/input.php (Style Guide 2299:1305).
 * 52px, pill radius, line border on white, Body/M.
 */

.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.field__label {
	font-size: var(--text-body-s);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-body-s);
}

.field__input {
	box-sizing: border-box;
	width: 100%;
	height: var(--button-height);
	margin: 0;
	padding: 0 20px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-field);
	line-height: var(--leading-body-m);
	appearance: none;
	transition: border-color 0.15s ease;
}

.field__input::placeholder {
	color: var(--color-placeholder);
	opacity: 1;
}

.field__input:hover {
	border-color: var(--color-muted);
}

.field__input:focus,
.field__input.is-focus {
	border-color: var(--color-ink);
}

.field__input.is-focus {
	outline: 2px solid var(--color-orange);
	outline-offset: 3px;
}

.field__input:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
	.field__input {
		transition: none;
	}
}