/*
 * Minimal starter styling. Intended to be overridden by the theme -
 * class names are namespaced with "loisto-cf-" to avoid clashes.
 *
 * box-sizing and margin resets on label/select are deliberate: some
 * themes apply their own spacing to bare <label> and <select> elements,
 * which is what caused the large gaps between fields on mobile/tablet.
 * These rules make sure the form's own spacing (set via grid/flex gap)
 * is what actually shows, regardless of theme defaults.
 */

.loisto-cf-form,
.loisto-cf-form *,
.loisto-cf-form *::before,
.loisto-cf-form *::after {
	box-sizing: border-box;
}

.loisto-cf-form {
	background: #f4f6f8;
	border-radius: 6px;
	padding: 20px;
}

.loisto-cf-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
}

.loisto-cf-field {
	display: flex;
	flex-direction: column;
	flex: 1 1 160px;
	min-width: 140px;
	margin: 0;
}

.loisto-cf-field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5a6470;
	margin: 0 0 6px;
	line-height: 1.2;
}

.loisto-cf-field select {
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid #d5dae0;
	border-radius: 4px;
	background: #fff;
	font-size: 14px;
	line-height: 1.3;
}

.loisto-cf-submit {
	flex: 0 0 auto;
	margin: 0;
}

.loisto-cf-button {
	width: auto;
	padding: 11px 28px;
	border: none;
	border-radius: 4px;
	background: #0b3c5d;
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
}

.loisto-cf-button:hover {
	background: #0f6e56;
}

.loisto-cf-note {
	margin: 10px 0 0;
	font-size: 12px;
	color: #5a6470;
}

/*
 * Tablet: a 3-column grid keeps fields close together instead of one
 * full-width field per row. Grid is used instead of flex-wrap here so
 * row heights and gaps stay predictable regardless of label length.
 */
@media (max-width: 1024px) {
	.loisto-cf-row {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 12px 16px;
		align-items: end;
	}

	.loisto-cf-field {
		min-width: 0;
	}

	.loisto-cf-submit {
		grid-column: 1 / -1;
	}

	.loisto-cf-button {
		width: 100%;
	}
}

/*
 * Mobile: two fields per row instead of one, so all five fields plus
 * the search button fit on one screen without scrolling.
 */
@media (max-width: 600px) {
	.loisto-cf-form {
		padding: 16px;
	}

	.loisto-cf-row {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px 12px;
	}

	.loisto-cf-field label {
		font-size: 11px;
		margin-bottom: 4px;
	}

	.loisto-cf-field select {
		padding: 9px 10px;
		font-size: 13px;
	}
}