.form-search {
	--field-height: 46px;
	--btn-width: 64px;

	position: relative;
}

.form-search input.form__field,
.form-search input.form__field:hover
.form-search input.form__field:focus {
	display: block;
	border: none;
	outline: none;
	box-shadow: none;
	width: 100%;
	height: var(--field-height);
	border-radius: 50px;
	color: #6A6A71;
	font-size: 18px;
	font-family: 'DIN Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height: 1;
	background-color: #F4F4F4;
	padding: 0 var(--btn-width) 0 24px !important;
}

.form-search .form__field::placeholder {
	color: inherit;
	font: inherit;
}

.form-search .form__submit {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	cursor: pointer;
	outline: none;
	padding: 0;
	position: absolute;
	top: 0;
	right: 0;
	width: var(--btn-width);
	height: var(--field-height);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #585862;
}

.form-search .form__submit:before {
	content: '';
	flex-shrink: 0;
	width: 18px;
	aspect-ratio: 1;
	background-color: currentColor;
	mask-repeat: no-repeat;
	mask-size: cover;
	mask-position: center center;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 18 18'%3E%3Cpath stroke='%23585862' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.50001' d='M8.2 14.6a6.7 6.7 0 1 0 0-13.4 6.7 6.7 0 0 0 0 13.4ZM16.5 16.2l-3.6-3.6'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: cover;
	-webkit-mask-position: center center;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 18 18'%3E%3Cpath stroke='%23585862' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.50001' d='M8.2 14.6a6.7 6.7 0 1 0 0-13.4 6.7 6.7 0 0 0 0 13.4ZM16.5 16.2l-3.6-3.6'/%3E%3C/svg%3E");
}

.form-search .form__submit span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

@media screen and (max-width: 767px) {
	.form-search {
		--field-height: 58px;
		--btn-width: 56px;
	}

	.form-search input.form__field,
	.form-search input.form__field:hover
	.form-search input.form__field:focus {
		font-size: 15.7px;
	}

	.form-search .form__submit:before {
		width: 20px;
	}
}
