.contacts .block-bookingMap {padding: 3rem 1.5rem; scroll-margin-top: var(--layout-header-height-mobile);}
.contacts .block-bookingMap .content {display: flex; flex-direction: column-reverse; gap: 1.5rem;}

.contacts .block-bookingMap .map {
	position: relative; display: flex; align-items: center; justify-content: center;
	height: 16rem; border-radius: .75rem; overflow: hidden; background-color: var(--color-primary-lightest);
}
.contacts .block-bookingMap .map .pin {font-size: 2rem; color: var(--color-accent);}

.contacts .block-bookingMap .booking {padding: 2rem 1.5rem; border-radius: .75rem; background-color: var(--color-secondary);}
.contacts .block-bookingMap .booking .sectionTitle {margin-bottom: 2rem;}

/* Re-theme the shared appointment-form component for this light/beige backdrop — it defaults to
   white text on transparent fields for dark panels (see framework/style/component/appointmentForm.css) */
.contacts .block-bookingMap .componentAppointmentForm input,
.contacts .block-bookingMap .componentAppointmentForm select {
	border: 0 !important; background-color: #fff !important; color: var(--color-primary) !important;
}
.contacts .block-bookingMap .componentAppointmentForm input::placeholder {color: var(--color-primary-light) !important;}
.contacts .block-bookingMap .componentAppointmentForm select option {color: var(--color-primary);}
.contacts .block-bookingMap .componentAppointmentForm select,
.contacts .block-bookingMap .componentAppointmentForm .dateWrapper input {
	background-image: url("data:image/svg+xml;utf8,\
		<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'>\
			<path d='M1 1 L6 6 L11 1' stroke='%23082b44' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round'/>\
		</svg>"
	) !important;
}

@media screen and (min-width: 40em) {
	.contacts .block-bookingMap {padding: 5rem 3rem; scroll-margin-top: var(--layout-header-height);}
	.contacts .block-bookingMap .content {flex-direction: row; gap: 2rem;}
	.contacts .block-bookingMap .map {flex: 1 1 50%; height: auto;}
	.contacts .block-bookingMap .booking {flex: 1 1 50%; padding: 3rem; display: flex; flex-direction: column; justify-content: center;}
	.contacts .block-bookingMap .componentAppointmentForm button {margin: 2rem 0 0 auto;}
}