/*
 * Event archive search styles.
 * Scoped to the archive wrapper so other content-archive instances are unaffected.
 */

.content-archive-search-container {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-32);
}

@media screen and (max-width: 991.98px) {
	.content-archive-search-container {
		flex-direction: column;
		gap: var(--spacing-20);
	}
}

.content-archive__search-form {
	width: 100%;
	max-width: 520px;
	position: relative;
}

.content-archive__search-form input[type=search] {
	width: 100%;
	min-height: 70px;
	border-radius: var(--border-radius-s);
	padding: var(--spacing-20) var(--spacing-25) var(--spacing-20) var(--spacing-64);
	border: 0;
	color: var(--color-dark);
	font-size: var(--size-15);
	background: var(--color-primary-subtle);
}

.content-archive__search-form input[type=search]::-webkit-input-placeholder {
	color: rgba(0,109,119,.5)
}

.content-archive__search-form input[type=search]::-moz-placeholder {
	color: rgba(0,109,119,.5)
}

.content-archive__search-form input[type=search]:-ms-input-placeholder {
	color: rgba(0,109,119,.5)
}

.content-archive__search-form input[type=search]::-ms-input-placeholder {
	color: rgba(0,109,119,.5)
}

.content-archive__search-form input[type=search]::placeholder {
	color: rgba(0,109,119,.5)
}

.content-archive__search-form .content-archive__search-icon {
	position: absolute;
	left: var(--spacing-25);
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	color: var(--color-primary);
	font-size: var(--size-22);
	line-height: 1;
	pointer-events: none
}