/* ABOUTME: Homepage-specific overrides for the compact booking form snippet. */
/* ABOUTME: Shared input/checkbox/datepicker styles live in booking_base.css. */
form.booking-form {
	background: var(--color-regular-grey);
	border-radius: var(--rbr);
	box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
	padding: 1rem;
	margin-top: 30px;
	z-index: 99;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

section.hero-section .hero-booking form.booking-form {
	font-size: var(--step--1);
}

section.hero-section .hero-booking form.booking-form input,
section.hero-section .hero-booking form.booking-form textarea,
section.hero-section .hero-booking form.booking-form .button {
	font-size: inherit;
}

section.hero-section .hero-booking form.booking-form #date_range {
	font-size: inherit;
}

@media screen and (max-width: 767px) {
	.hero-section form.booking-form {
		display: none;
	}
}

.mobile-booking-button {
	display: none;
}

@media screen and (max-width: 767px) {
	.mobile-booking-button {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		padding: 1rem;
		background: var(--color-primary, #13c3ce);
		color: white;
		text-align: center;
		text-decoration: none;
		font-weight: bold;
		font-size: 1.2rem;
	}
}

/* Homepage overrides for base styles */
input,
textarea {
	background-color: #f6f6f6;
}

.input-group .quantity-field {
	resize: vertical;
}