/* Global, accessible form language for the theme and WooCommerce. */
:root {
	--moto22-field-height: 3.25rem;
	--moto22-field-radius: .3rem;
	--moto22-field-border: #837c72;
	--moto22-field-bg: #fff;
	--moto22-field-placeholder: #716b62;
	--moto22-field-focus: var(--red);
	--moto22-field-error: #a12619;
	--moto22-field-success: #287a3f;
	--moto22-field-disabled: #eeeae2;
	--moto22-focus-ring: 0 0 0 3px rgba(182, 45, 30, .18);
}

:where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea) {
	max-width: 100%;
	min-height: var(--moto22-field-height);
	padding: .72rem .85rem;
	border: 1px solid var(--moto22-field-border);
	border-radius: var(--moto22-field-radius);
	background-color: var(--moto22-field-bg);
	color: var(--ink);
	font: inherit;
	line-height: 1.35;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

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

:where(select) {
	padding-right: 2.4rem;
	cursor: pointer;
}

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

:where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea):hover:not(:disabled):not([aria-disabled="true"]) {
	border-color: #514c45;
}

:where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea):focus {
	border-color: var(--moto22-field-focus);
	outline: 0;
	box-shadow: var(--moto22-focus-ring);
}

:where(input, select, textarea):disabled,
:where(input, select, textarea)[aria-disabled="true"],
:where(input, select, textarea)[readonly] {
	cursor: not-allowed;
	border-color: var(--line);
	background: var(--moto22-field-disabled);
	color: #686259;
	opacity: 1;
}

:where(input, select, textarea)[readonly] {
	cursor: default;
}

:where(input, select, textarea)[aria-invalid="true"],
.has-error :where(input, select, textarea),
.woocommerce-invalid :where(input, select, textarea) {
	border-color: var(--moto22-field-error) !important;
	background-color: #fff8f7 !important;
	box-shadow: 0 0 0 2px rgba(161, 38, 25, .12);
}

:where(input[type="checkbox"], input[type="radio"]) {
	width: 1.2rem;
	height: 1.2rem;
	margin: 0 .4rem 0 0;
	accent-color: var(--red);
	cursor: pointer;
}

:where(input[type="checkbox"], input[type="radio"]):focus-visible {
	outline: 3px solid rgba(182, 45, 30, .32);
	outline-offset: 2px;
}

:where(input[type="file"]) {
	width: 100%;
	padding: .35rem;
	border: 1px solid var(--moto22-field-border);
	border-radius: var(--moto22-field-radius);
	background: #fff;
}

:where(input[type="file"])::file-selector-button {
	min-height: 2.45rem;
	margin-right: .75rem;
	padding: .55rem .85rem;
	border: 0;
	border-radius: calc(var(--moto22-field-radius) - 1px);
	background: var(--ink);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

:where(label) {
	text-underline-offset: .15em;
}

:where(form) label:not(.screen-reader-text),
:where(form) legend {
	color: #4f4a43;
}

:where(fieldset) {
	min-width: 0;
}

:where(input, textarea):-webkit-autofill {
	-webkit-text-fill-color: var(--ink);
	box-shadow: 0 0 0 1000px #fff inset;
}

/* Search is a single compound control with a 44px+ target. */
.search-form {
	display: flex;
	min-height: var(--moto22-field-height);
	overflow: hidden;
	border: 1px solid var(--moto22-field-border);
	border-radius: var(--moto22-field-radius);
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.search-form:hover {
	border-color: #514c45;
}

.search-form:focus-within {
	border-color: var(--moto22-field-focus);
	box-shadow: var(--moto22-focus-ring);
}

.search-form .search-field {
	min-width: 0;
	min-height: 100%;
	padding-inline: 1rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.search-form .search-field:focus {
	outline: 0;
	box-shadow: none;
}

.search-form .search-submit {
	display: inline-grid;
	place-items: center;
	min-width: 3.25rem;
	min-height: 3.25rem;
	padding: .65rem;
	border: 0;
	background: var(--ink);
	color: #fff;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}

.search-form .search-submit:hover {
	background: var(--red);
}

.search-form .search-submit:active {
	transform: translateY(1px);
}

.search-form .search-submit:focus-visible {
	position: relative;
	z-index: 1;
	outline: 3px solid var(--red);
	outline-offset: -4px;
}

/* WordPress core forms. */
.comment-form > p,
.post-password-form > p {
	margin: 0 0 1rem;
}

.comment-form label,
.post-password-form label {
	display: block;
	margin-bottom: .4rem;
	font-size: .82rem;
	font-weight: 700;
}

.comment-form :where(input[type="text"], input[type="email"], input[type="url"], textarea),
.post-password-form input[type="password"],
.wp-block-search__input {
	width: 100%;
}

/* WooCommerce classic, Select2 and Blocks inherit the same visual tokens. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single,
.woocommerce .quantity .qty,
.woocommerce div.product form.cart .variations select,
.woocommerce .woocommerce-ordering select,
.moto22-shop-filter select,
.moto22-shop-filter input[type="number"] {
	border-color: var(--moto22-field-border);
	border-radius: var(--moto22-field-radius);
	background-color: var(--moto22-field-bg);
}

.select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	min-height: var(--moto22-field-height);
	padding: .65rem 2.25rem .65rem .85rem;
}

.select2-container .select2-selection--single .select2-selection__rendered {
	width: 100%;
	padding: 0;
	line-height: 1.35;
}

.select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: .65rem;
	transform: translateY(-50%);
}

.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-address-form select {
	border-color: var(--moto22-field-border) !important;
	border-radius: var(--moto22-field-radius) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus {
	border-color: var(--moto22-field-focus) !important;
	outline: 0 !important;
	box-shadow: var(--moto22-focus-ring) !important;
}

.wc-block-components-text-input.has-error input,
.wc-block-components-combobox.is-error input {
	border-color: var(--moto22-field-error) !important;
}

@media (max-width: 38rem) {
	:root { --moto22-field-height: 3.35rem; }

	:where(input, select, textarea) {
		font-size: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	:where(input, select, textarea),
	.search-form,
	.search-form .search-submit {
		transition: none;
	}
}