#lou-la-search-form {
	--header-height: 140px;
	--dur: 1s;

	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 0px;
	overflow: hidden;
	transition: height var(--dur), z-index var(--dur);
	z-index: -1;
}

#lou-la-search-form.show {
	height: var(--header-height);
	overflow: hidden;
	z-index: 100000;
}

.lou-search-form-wrap {
	height: 100%;
	overflow: hidden;
	border-bottom: 2px solid #000000;
}

.lou-search-form {
	height: var(--header-height);
	width: 100%;
	background-color: #eeeeee;
	padding: 1rem 4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: height var(--dur);
}

.lou-search-form .lou-close-button {
	cursor: pointer;
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	font-size: 2rem;
	font-weight: 700;
	color: #888888;
	transition: color var(--dur);
}
.lou-search-form .lou-close-button:focus,
.lou-search-form .lou-close-button:active,
.lou-search-form .lou-close-button:hover {
	color: #333333;
}

.lou-search-fields {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	max-width: 450px;
	width: 100%;
}
.lou-search-fields .lou-search-field {
	flex-grow: 1;
	flex-shrink: 1;
}
.lou-search-fields .lou-search-field.fixed-100 {
	flex-grow: 0;
	flex-shrink: 0;
	width: 100px;
}

.lou-search-fields .button {
	top: 0 !important;
	transform: translateX(-50%) scale(1);
}
.lou-search-fields .button:hover,
.lou-search-fields .button:focus,
.lou-search-fields .button:active {
	transform: translateX(-50%) scale(1.1);
}

.lou-search-fields input[type="text"] {
	border: 1px solid #ccc;
	width: 100%;
	box-shadow: 0 0 2px rgba(64, 64, 64, 1);
	transition: box-shadow var(--dur);
}
.lou-search-fields input[type="text"]:focus,
.lou-search-fields input[type="text"]:hover {
	border: 1px solid #888;
	box-shadow: 0 0 6px rgba(64, 64, 64, 1);
}