/* Default styling for the input field with logo inside */
.animated-input {
	position: relative;
	display: flex;
	align-items: center;
	height: 80px;
	background-color: white;
	border: 2px solid #d3d3d3;
	border-radius: 10px;
	width: 100%;
	/* Full width of the parent container */
	padding: 0;
	/* No padding */
}

/* Logo inside the input field (desktop) */
.input-logo {
	width: 70px;
	height: auto;
	margin-right: 10px;
	/* Spacing between the logo and the input text */
}

/* Desktop-specific styles */
@media (min-width: 769px) {
	.no-padding .input-logo {
		display: block !important;
	}
	
	.search-box .input-logo {
		display: none !important;
	}
}

/* Adjust the placeholder text and input field */
#location {
	flex-grow: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 1.2rem;
	line-height: 1.5;
	padding-top: 20px;
	transition: height 0.3s;
}

#location::placeholder {
	text-align: center;
}

/* Initially hide the label */
#input-header.hidden {
	opacity: 0;
	position: absolute;
	top: -10px;
	left: 0;
	font-size: 14px;
	transition: opacity 0.3s, top 0.3s;
}

.SearchForm .input-group input {
	width: 100%;
}

/* Show the label when focused */
.location-input-header {
	position: absolute;
	top: 15px;
	left: 83px;
	font-size: 1rem;
}

.location-input-header.focused {
	opacity: 1;
	top: 5px;
	font-size: 14px;
}

/* Remove the blue border */
#location:focus {
	outline: none;
	box-shadow: none;
	border: 1px solid #ccc;
}

/* Style the input wrapper */
.input-wrapper {
	position: relative;
}



/* Calendar button inside the input */
#toggleDates {
	background: transparent;
	border: none;
	color: #a9a9a9;
	margin-left: 10px;
	font-size: 1.5rem;
	padding: 10px;
}

/* Sign-In Button (Top-right corner of the form for desktop) */
.sign-in-btn {
	top: 10px;
	right: 10px;
	padding: 8px 20px;
	font-size: 1rem;
	position: absolute;
	border-radius: 25px;
	background-color: #0056b3;
	/* Sign-in button color */
	color: white;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

/* Hover effect for the Sign-In button */
.sign-in-btn:hover {
	background-color: #004494;
	color: white;
}

/* Search Box Styling */
.search-box {
	padding: 3rem;
	/* Default padding on larger screens (equivalent to p-5) */
	background-color: white;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 15px;
}

/* Find Parking button styling */
#findParkingButton {
	padding: 15px 25px;
	border: none;
	border-radius: 8px;
	font-size: 1.2rem;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

/* Active effect for the Find Parking button */
#findParkingButton:active {
	transform: translateY(1px);
}

/* Responsive styles for mobile devices */
@media (max-width: 768px) {

	/* Move logo above input field on mobile */
	.search-box .input-logo {
		display: block;
		margin: 0 auto 15px auto !important;
		width: 80px !important;
		position: relative;
		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	/* Hide logo inside input field on mobile */
	.no-padding .input-logo {
		display: none !important;
	}

	/* Ensure the input takes full width on mobile */
	.animated-input {
		flex-direction: row;
		justify-content: space-between;
		/* Logo on left, text on right */
		padding: 0;
		/* No padding */
		width: 100%;
		/* Full width */
	}

	/* Make the entire input container clickable on mobile */
	.no-padding {
		cursor: pointer;
		position: relative;
	}

	/* Ensure proper text display on mobile */
	.location-input-header {
		font-size: 0.9rem !important;
		line-height: 1.2 !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: calc(100% - 60px); /* Account for calendar button only */
		left: 15px !important;
		top: 10px !important;
	}

	.location-input-header.focused {
		font-size: 0.8rem !important;
		top: 3px !important;
		left: 15px !important;
	}

	/* Smaller calendar button on mobile */
	#toggleDates {
		font-size: 0.8rem;
		/* Reduce size of calendar icon */
		padding: 5px;
		/* Smaller button padding */
		margin-right: 5px;
		/* Move it more to the right */
		min-width: 32px;
		height: 32px;
	}

	/* Remove the card-like padding on mobile */
	.search-box {
		padding: 1rem;
		/* Reduced padding inside the search box for mobile */
	}

	/* Adjust the Sign-In button on mobile */
	.sign-in-btn {
		display: none;
	}

	/* Adjust input field to take full space */
	#location {
		font-size: 1rem;
		/* Slightly smaller font for mobile */
		padding: 0;
		/* No padding on mobile */
		padding-top: 25px !important;
		padding-left: 15px !important;
		padding-right: 50px !important;
		width: 100%;
		/* Make input take up remaining space */
		line-height: 1.4;
		min-height: 45px;
	}

	/* Logo styling when moved above input */
	.input-logo {
		width: 80px;
		height: auto;
		margin: 0 auto 15px auto;
		display: block;
	}

	/* Improve mobile touch targets */
	.border.border-secondary.rounded-3 {
		min-height: 65px;
		display: flex;
		align-items: center;
		padding: 8px;
	}

	/* Better spacing for mobile */
	.flex-grow-1.d-flex.align-items-center {
		flex: 1;
		min-width: 0;
		position: relative;
	}

	/* Additional mobile input improvements */
	.input-container-clickable {
		-webkit-tap-highlight-color: rgba(0,0,0,0.1);
		cursor: pointer;
	}

	/* Ensure proper touch targets on mobile */
	.input-container-clickable:active {
		background-color: rgba(0,0,0,0.02);
	}

	/* Improve text rendering on mobile */
	.location-input-header {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #6c757d !important;
	}

	/* Better focus indication on mobile */
	#location:focus {
		outline: none !important;
		box-shadow: none !important;
	}

	/* Ensure proper keyboard interaction */
	#location {
		touch-action: manipulation;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}

	/* Ensure autocomplete dropdown is clickable on mobile */
	#autocomplete-results {
		z-index: 9999 !important;
		pointer-events: auto !important;
		-webkit-tap-highlight-color: transparent;
	}

	.autocomplete-item {
		pointer-events: auto !important;
		touch-action: manipulation;
		-webkit-tap-highlight-color: rgba(0,0,0,0.1);
	}

	.autocomplete-item:active {
		background-color: #e9ecef !important;
	}
}


.date-inputs-container {
	display: none;
	transition: max-height 0.3s ease-out;
	max-height: 0;
	overflow: hidden;
}

.date-inputs-container.show {
	display: block;
	max-height: 500px;
}

/* Styles for Tempus Dominus datepicker */
.tempus-dominus-widget {
	width: 100%;
	max-width: 300px;
}

#arriving-datetime {
	padding-left: 10px;
	margin-left: 5px;
	border-left: 1px solid #ccc;
}

#leaving-datetime {
	padding-left: 10px;
	margin-left: 5px;
}