/* --- Styles for the Rental Search Form - MODIFIED FOR HORIZONTAL LAYOUT --- */


.fm-search-form-container {
	background: #fff;
	padding: 30px;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

	max-width: 1100px;
	margin: 20px auto; 
}

.fm-form-logo {
	text-align: center;
}
.fm-form-logo img {
	max-width: 150px;
	height: auto;
}


.fm-search-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.fm-search-form-options {
	margin-bottom: 5px;
}
.fm-search-form-options label {
	color: #555;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}
.fm-form-group label {
	display: block;
	color: #333;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 5px;
}


.fm-search-form-grid {
	display: grid;

	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	align-items: flex-end; 
}


.fm-form-group.dropoff-location {
	display: none;
}


body.fm-return-active .fm-search-form-grid {

	grid-template-columns: repeat(5, 1fr);
}


.fm-form-group.submit-group {
	
}


.fm-form-group input[type="text"],
.fm-form-group select {
	width: 100%;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 16px;
	background-color: #f9f9f9;
}
input.fm-datetime-picker {
	width: 100%;
	cursor: pointer;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
	background-repeat: no-repeat;
	background-position: calc(100% - 15px) center;
	padding-right: 40px;
}

.fm-search-button {
	width: 100%;
	padding: 14px;
	background-color: #bc2229;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.2s;
	text-transform: uppercase;
}
.fm-search-button:hover {
	background-color: #c9302c;
}

.fm-search-results-summary {
	padding: 20px;
	border: 1px solid #eee;
	background: #f9f9f9;
}
.fm-search-results-summary pre {
	white-space: pre-wrap;
	background: #fff;
	padding: 15px;
	border: 1px solid #ddd;
}

/* =================================================================== */
/* --- Responsive Styles --- CORRECTED & IMPROVED --- */
/* =================================================================== */

/* --- Tablet View (e.g., screens up to 1023px wide) --- */
@media (max-width: 1023px) {
	.fm-search-form-grid,
	body.fm-return-active .fm-search-form-grid {
		/* On tablets, we want a 2-column layout for the fields. */
		grid-template-columns: repeat(2, 1fr);
	}

	.fm-form-group.submit-group {
		/* Make the submit button span the full width of the grid (both columns)
		   This creates a clean, dedicated action row at the bottom. */
		grid-column: 1 / -1;
	}
}

/* --- Mobile View (e.g., screens up to 767px wide) --- */
@media (max-width: 767px) {
	.fm-search-form-container {
		/* Reduce padding on very small screens */
		padding: 20px;
	}

	.fm-search-form-grid,
	body.fm-return-active .fm-search-form-grid {
		/* On mobile, stack all form fields into a single column. */
		grid-template-columns: 1fr;
	}

	/* The submit-group rule from the tablet view (grid-column: 1 / -1;)
	   will still work perfectly here, as it will span the single column.
	   No need to override it. */
}