.tk-jobs-search {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	background: #ffffff;
	border-radius: 32px;
	padding: 20px 28px;
	box-shadow: 0 10px 30px rgba(12, 30, 53, .12);
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	box-sizing: border-box;
	font-family: Archivo, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.tk-jobs-search-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	width: 100%;
}

.tk-jobs-search-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 200px;
}

.tk-jobs-search-field label {
	font-size: 13px;
	font-weight: 600;
	color: #183c68;
}

.tk-jobs-search-field select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #dbe4ee;
	border-radius: 8px;
	font-size: 14px;
	background: #f7fbff;
	color: #183c68;
	box-sizing: border-box;
}

.tk-jobs-search-submit {
	align-self: center;
	padding: 12px 28px;
	background: #fdd900;
	color: #183c68;
	border: none;
	border-radius: 73px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease;
}

.tk-jobs-search-submit:hover {
	background: #f0cd00;
}

@media (max-width: 782px) {
	/*
	 * The section wrapping this widget centers its column instead of
	 * stretching it on smaller breakpoints (a Bebuilder layout setting on
	 * the homepage hero), which makes every ancestor shrink-wrap to this
	 * form's content width. Size against the viewport instead of relying
	 * on the ancestor chain to stretch.
	 */
	.tk-jobs-search {
		width: 92vw;
		max-width: 92vw;
		/* margin:auto only centers within the (shrunk) ancestor's own box,
		   which isn't centered on the viewport itself — break out and
		   center against the viewport directly instead */
		margin: 0;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}

	.tk-jobs-search-row {
		flex-direction: column;
	}

	.tk-jobs-search-field {
		/* the 200px flex-basis above is meant for width in a row layout;
		   in column direction it would set height instead, so reset it here */
		flex: 0 0 auto;
	}
}