/* Search Form Component Styles */
.tur-search-form {
	display: block;
	background-color: transparent;
	padding: var(--space-3) 0;

	.search-container {
		display: flex;
		flex-direction: column;
		max-width: var(--container-max-width);
		margin: 0 auto;
		padding: 0 var(--space-4);
		gap: var(--space-3);
	}

	.intro {
		text-align: left;
		max-width: 100%;
		margin: 0;
	}

	.intro h1 {
		font-size: var(--font-size-h1);
		margin-bottom: var(--space-2);
		text-align: left;
	}

	.intro p {
		font-size: var(--font-size-body);
		line-height: 1.5;
		color: var(--color-body-text);
		margin-bottom: var(--space-2);
	}

	/* Search form layout - wraps on desktop */
	.search-form {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.form-row {
		display: flex;
		flex-direction: column;
		gap: 4px;
		flex: 1;
		min-width: 0;
	}

	.form-label {
		font-size: var(--font-size-body);
		font-weight: var(--font-weight-bold);
		color: var(--color-label);
		margin-bottom: 0;
	}

	/* Input fields with border */
	.input-wrapper {
		display: flex;
		align-items: center;
		height: 50px;
		width: 100%;
		border: var(--border-width) solid var(--color-input-border);
		background-color: var(--color-white);
		position: relative;
	}

	.input-wrapper input,
	.input-wrapper select {
		flex: 1;
		height: 100%;
		border: none;
		padding: 0 var(--space-2);
		font-size: var(--font-size-body);
		color: var(--color-body-text);
		background: transparent;
		width: 100%;
	}

	.input-wrapper input::placeholder {
		color: var(--color-placeholder);
	}

	.input-wrapper input:focus,
	.input-wrapper select:focus {
		outline: none;
	}

	/* Search button - positioned to the right */
	.search-button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-1);
		height: 50px;
		width: 150px;
		border: var(--border-width) solid var(--color-heading-text);
		background-color: var(--color-accent-yellow);
		color: var(--color-heading-text);
		font-size: var(--font-size-body);
		font-weight: var(--font-weight-bold);
		transition: background-color var(--transition-fast), color var(--transition-fast);
		align-self: flex-start;
		margin-top: var(--space-3);
	}

	/* Desktop layout - wrap fields horizontally */
	@media (width >= 900px) {
		.search-form {
			flex-flow: row wrap;
			gap: var(--space-2);
		}

		.form-row {
			flex: 1 1 calc(50% - var(--space-1));
			min-width: 0;
			order: 1;
		}

		.search-form::after {
			content: '';
			flex-basis: 100%;
			height: 0;
			order: 2;
		}

		.search-button {
			margin-left: 0;
			margin-top: var(--space-3);
			order: 3;
		}
	}

	@media (width >= 1200px) {
		.form-row {
			flex-basis: 0;
		}
	}

	.search-button:hover {
		background-color: var(--color-footer-bg);
		color: var(--color-white);
	}

	.search-button:focus-visible {
		outline: 3px solid var(--color-accent-blue);
		outline-offset: 3px;
	}

	.search-button svg {
		width: 20px;
		height: 20px;
	}

	/* Result count */
	.result-count {
		font-size: var(--font-size-body);
		color: var(--color-text-base);
		text-align: center;
		padding: var(--space-2);
	}

	.result-count strong {
		color: var(--color-heading-text);
	}
}