/*
 * Compact layer for WPRentals' real contact form. The plugin never replaces
 * its fields, nonce, date picker or submit transport.
 */

body.single-estate_property {
	--waoh-contact-accent: #2c7a7b;
	--waoh-contact-ink: #343b3d;
	--waoh-contact-muted: #626978;
	--waoh-contact-border: #dfe3e8;
	--waoh-contact-soft: #f7f8f8;
}

.waoh-contact-form {
	box-sizing: border-box;
	color: var(--waoh-contact-ink);
}

.waoh-contact-form *,
.waoh-contact-form *::before,
.waoh-contact-form *::after {
	box-sizing: border-box;
}

.waoh-contact-form #contact_for_reservation,
.waoh-contact-form .contact_for_reservation,
.waoh-contact-form > h3 {
	margin: 0 0 16px !important;
	color: var(--waoh-contact-ink) !important;
	font-family: inherit !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
}

.waoh-contact-intro {
	max-width: 46rem;
	margin: -7px 0 16px !important;
	color: var(--waoh-contact-muted) !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
}

.waoh-contact-dates {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px;
	width: 100%;
	margin: 0 0 10px;
}

.waoh-contact-form .waoh-contact-field {
	position: relative;
	clear: none !important;
	float: none !important;
	width: 100% !important;
	min-width: 0;
	margin: 0 0 10px !important;
	border: 1px solid var(--waoh-contact-border);
	border-radius: 10px;
	background: #fff;
	padding: 22px 12px 5px !important;
}

.waoh-contact-form .waoh-contact-dates .waoh-contact-field {
	margin: 0 !important;
}

.waoh-contact-field__label {
	position: absolute;
	z-index: 2;
	top: 7px;
	left: 12px;
	max-width: calc(100% - 24px);
	overflow: hidden;
	color: var(--waoh-contact-muted);
	font-family: inherit;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	pointer-events: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.waoh-contact-form .waoh-contact-field input,
.waoh-contact-form .waoh-contact-field .form-control,
.waoh-contact-form .waoh-contact-field .wpestate_guest_no_control_info,
.waoh-contact-form .waoh-contact-field .waoh-contact-people-select {
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	height: 36px !important;
	min-height: 36px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--waoh-contact-ink) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 36px !important;
	padding: 0 !important;
	text-overflow: ellipsis;
}

.waoh-contact-form .waoh-contact-field .waoh-contact-people-select {
	appearance: none;
	cursor: pointer;
	padding-right: 28px !important;
}

.waoh-contact-form .waoh-contact-field--people::before {
	position: absolute;
	right: 14px;
	bottom: 18px;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--waoh-contact-muted);
	border-bottom: 2px solid var(--waoh-contact-muted);
	content: "";
	pointer-events: none;
	transform: rotate(45deg);
}

.waoh-contact-form [data-waoh-people-enhanced="1"] .wpestate_guest_no_control_info,
.waoh-contact-form [data-waoh-people-enhanced="1"] .guest_no_drop,
.waoh-contact-form [data-waoh-people-enhanced="1"] .wpestate_guest_no_buttons {
	display: none !important;
}

.waoh-contact-form .waoh-contact-field input:focus,
.waoh-contact-form .waoh-contact-field .form-control:focus,
.waoh-contact-form .waoh-contact-field .wpestate_guest_no_control_info:focus,
.waoh-contact-form .waoh-contact-field .waoh-contact-people-select:focus {
	outline: 0 !important;
}

.waoh-contact-form .waoh-contact-field:focus-within {
	border-color: var(--waoh-contact-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--waoh-contact-accent) 13%, transparent);
}

.waoh-contact-form .waoh-contact-native-icon {
	display: none !important;
}

/* WP Rentals draws its calendar/guest glyphs with positioned pseudo-elements.
 * In the compact fields those glyphs would sit on top of the value. */
.waoh-contact-form .waoh-contact-field--date::after,
.waoh-contact-form .waoh-contact-field--guests .wpestate_guest_no_control_wraper::after {
	display: none !important;
	content: none !important;
}

.waoh-contact-form .waoh-contact-field--guests {
	z-index: 4;
	overflow: visible !important;
}

.waoh-contact-form .waoh-contact-field--guests .guest_no_drop,
.waoh-contact-form .waoh-contact-field--guests .wpestate_guest_no_buttons {
	z-index: 1004 !important;
}

.waoh-contact-form .waoh-contact-identity-field {
	clear: both;
	width: 100%;
	margin-bottom: 10px !important;
}

.waoh-contact-form .waoh-contact-identity-field input {
	width: 100% !important;
	min-height: 46px !important;
	margin: 0 !important;
	border-color: var(--waoh-contact-border) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: 14px !important;
	padding: 10px 12px !important;
}

.waoh-contact-form .waoh-contact-identity-field input:focus {
	border-color: var(--waoh-contact-accent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--waoh-contact-accent) 13%, transparent) !important;
}

.waoh-contact-identity-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
	margin: 0 0 10px;
}

.waoh-contact-form .waoh-contact-identity-grid .waoh-contact-identity-field {
	margin-bottom: 0 !important;
}

.waoh-contact-form .waoh-contact-identity-grid .waoh-contact-identity-field--wide {
	grid-column: 1 / -1;
}

.waoh-contact-form .waoh-contact-message-wrap {
	clear: both;
	width: 100%;
	margin-bottom: 10px !important;
}

.waoh-contact-form .waoh-contact-message {
	display: block !important;
	width: 100% !important;
	min-height: 72px !important;
	max-height: 160px !important;
	margin: 0 !important;
	border: 1px solid var(--waoh-contact-border) !important;
	border-radius: 10px !important;
	background: #fff !important;
	box-shadow: none !important;
	color: var(--waoh-contact-ink) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	padding: 11px 12px !important;
	resize: none !important;
}

.waoh-contact-form .waoh-contact-message:focus {
	border-color: var(--waoh-contact-accent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--waoh-contact-accent) 13%, transparent) !important;
	outline: 0 !important;
}

.waoh-contact-form .gpr_wrapper,
.waoh-contact-form .gdpr_wrapper,
.waoh-contact-form .wacb-marketing-consent {
	clear: both;
	width: 100%;
	margin: 10px 0 12px !important;
	color: var(--waoh-contact-muted);
	font-size: 12px !important;
	line-height: 1.4 !important;
}

.waoh-contact-form .gpr_wrapper label,
.waoh-contact-form .gdpr_wrapper label,
.waoh-contact-form .wacb-marketing-consent__label {
	font-size: inherit !important;
	line-height: inherit !important;
}

/* These actions already exist in the property header. Repeating them inside
 * the enquiry form adds height and distracts from the primary conversion. */
.waoh-contact-form .favorite_in_contact,
.waoh-contact-form .prop_social {
	display: none !important;
}

.waoh-contact-form .waoh-contact-actions {
	clear: both;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	width: 100%;
	margin: 8px 0 0 !important;
}

.waoh-contact-form .waoh-contact-actions[data-waoh-contact-mode="whatsapp"] {
	margin-top: 0 !important;
}

.waoh-contact-form .waoh-contact-whatsapp-note {
	grid-column: 1 / -1;
	margin: 0 !important;
	color: var(--waoh-contact-muted);
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	text-align: center;
}

.waoh-contact-form #submit_mess_front,
.waoh-contact-form [id^="submit_mess_front_"],
.waoh-contact-form .submit_mess_front,
.waoh-contact-form .submit_mess_front_class,
.waoh-contact-form [data-action="wpestate_mess_front_end"],
.waoh-contact-form .waoh-contact-whatsapp {
	clear: both;
	display: flex !important;
	width: 100% !important;
	min-height: 50px !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--waoh-contact-accent) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	padding: 13px 18px !important;
	text-align: center;
}

.waoh-contact-form .waoh-contact-whatsapp {
	gap: 8px;
	background: var(--waoh-contact-accent) !important;
	cursor: pointer;
}

.waoh-contact-form .waoh-contact-whatsapp:hover,
.waoh-contact-form .waoh-contact-whatsapp:focus {
	background: color-mix(in srgb, var(--waoh-contact-accent) 84%, #000) !important;
	color: #fff !important;
	outline: 2px solid transparent !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--waoh-contact-accent) 22%, transparent) !important;
}

.waoh-contact-form .waoh-contact-actions[data-waoh-contact-mode="both"] .waoh-contact-whatsapp {
	border: 2px solid var(--waoh-contact-accent) !important;
	background: #fff !important;
	color: var(--waoh-contact-accent) !important;
}

.waoh-contact-form .waoh-contact-actions[data-waoh-contact-mode="both"] .waoh-contact-whatsapp:hover,
.waoh-contact-form .waoh-contact-actions[data-waoh-contact-mode="both"] .waoh-contact-whatsapp:focus {
	background: color-mix(in srgb, var(--waoh-contact-accent) 9%, white) !important;
	color: var(--waoh-contact-accent) !important;
}

.waoh-contact-form .waoh-contact-actions--busy {
	opacity: 0.72;
}

.waoh-contact-form--busy .waoh-contact-email-button {
	opacity: 0.72;
}

.waoh-contact-form .waoh-contact-actions--busy button,
.waoh-contact-form .waoh-contact-actions--busy input[type="submit"] {
	cursor: wait !important;
}

.waoh-contact-form .waoh-contact-whatsapp:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--waoh-contact-accent) 22%, transparent) !important;
}

.waoh-contact-form .waoh-contact-email-button:focus,
.waoh-contact-form .waoh-contact-email-button:focus-visible {
	outline: 2px solid transparent !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--waoh-contact-accent) 22%, transparent) !important;
}

.waoh-contact-form .waoh-contact-whatsapp svg {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.waoh-contact-form .waoh-contact-email-button--hidden {
	display: none !important;
}

.waoh-contact-form .waoh-contact-channel-error {
	clear: both;
	width: 100%;
	margin: 0 0 10px;
	border: 1px solid #e9b3ba;
	border-radius: 8px;
	background: #fff1f3;
	color: #8d2635;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	padding: 9px 11px;
}

.waoh-contact-form .waoh-contact-channel-success {
	clear: both;
	width: 100%;
	margin: 0 0 10px;
	border: 1px solid #a9d5c0;
	border-radius: 8px;
	background: #edf8f2;
	color: #185d43;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	padding: 9px 11px;
}

.waoh-whatsapp-success-toast {
	position: fixed;
	z-index: 1000002;
	right: 18px;
	bottom: calc(92px + env(safe-area-inset-bottom, 0px));
	left: 18px;
	max-width: 540px;
	margin: 0 auto;
	border: 1px solid #a9d5c0;
	border-radius: 12px;
	background: #edf8f2;
	box-shadow: 0 10px 28px rgba(20, 64, 50, .18);
	color: #185d43;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	opacity: 0;
	padding: 13px 16px;
	pointer-events: none;
	transform: translateY(12px);
	transition: opacity .18s ease, transform .18s ease;
}

.waoh-whatsapp-success-toast--visible {
	opacity: 1;
	transform: translateY(0);
}

.waoh-contact-form [aria-invalid="true"] {
	border-color: #b53347 !important;
	box-shadow: 0 0 0 3px rgba(181, 51, 71, .12) !important;
}

.waoh-contact-form [aria-busy="true"] {
	cursor: progress !important;
	opacity: .72;
	pointer-events: none;
}

.waoh-contact-form .waoh-contact-trust {
	clear: both;
	width: 100%;
	margin: 11px 0 0;
	text-align: center;
}

.waoh-contact-trust p {
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
}

.waoh-contact-trust__primary {
	color: var(--waoh-contact-ink) !important;
	font-weight: 700 !important;
}

.waoh-contact-trust__secondary {
	margin-top: 3px !important;
	color: var(--waoh-contact-muted) !important;
	font-weight: 500 !important;
}

.waoh-contact-form .alert,
.waoh-contact-form .login-alert,
.waoh-contact-form .booking_form_request_error {
	margin: 0 0 10px !important;
	border: 1px solid #e9b3ba !important;
	border-radius: 8px !important;
	background: #fff1f3 !important;
	color: #8d2635 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	padding: 9px 11px !important;
}

body.single-estate_property .daterangepicker td.active,
body.single-estate_property .daterangepicker td.active:hover,
body.single-estate_property .daterangepicker .calendar-table td.active,
body.single-estate_property .daterangepicker .calendar-table td.active:hover {
	border-color: var(--waoh-contact-accent) !important;
	background: var(--waoh-contact-accent) !important;
	color: #fff !important;
}

body.single-estate_property .daterangepicker td.in-range:not(.active),
body.single-estate_property .daterangepicker .calendar-table td.in-range:not(.active) {
	background: #e8f3f2 !important;
	background: color-mix(in srgb, var(--waoh-contact-accent) 12%, white) !important;
	color: var(--waoh-contact-ink) !important;
}

@media (max-width: 767px) {
	body.waoh-contact-close-guard * {
		pointer-events: none !important;
	}

	body.waoh-contact-close-guard #booking_form_mobile_close,
	body.waoh-contact-close-guard #booking_form_mobile_close *,
	body.waoh-contact-close-guard #contact_owner_modal .close,
	body.waoh-contact-close-guard #contact_owner_modal .close *,
	body.waoh-contact-close-guard #contact_owner_modal [data-dismiss="modal"],
	body.waoh-contact-close-guard #contact_owner_modal [data-dismiss="modal"] *,
	body.waoh-contact-close-guard #contact_owner_modal [data-bs-dismiss="modal"],
	body.waoh-contact-close-guard #contact_owner_modal [data-bs-dismiss="modal"] *,
	body.waoh-contact-close-guard .modal-backdrop {
		pointer-events: auto !important;
	}

	body.waoh-contact-dialog-open {
		overflow: hidden !important;
	}

	body.waoh-contact-dialog-open #wpadminbar {
		display: none !important;
	}

	body.waoh-contact-dialog-open .mobile_booking_wrapper {
		display: none !important;
	}

	body.single-estate_property .waoh-contact-form.booking_on_mobile {
		position: fixed !important;
		z-index: 1000000 !important;
	}

	body.single-estate_property .waoh-contact-form.booking_on_mobile #booking_form_mobile_close {
		z-index: 1000001 !important;
	}

	.waoh-contact-form.booking_on_mobile,
	#contact_owner_modal .waoh-contact-form {
		background: #fff !important;
		padding-right: 18px !important;
		padding-left: 18px !important;
	}

	.waoh-contact-form #contact_for_reservation,
	.waoh-contact-form .contact_for_reservation,
	.waoh-contact-form > h3 {
		margin-bottom: 14px !important;
		font-size: 20px !important;
	}

	.waoh-contact-intro {
		margin-bottom: 14px !important;
	}

	.waoh-contact-form .waoh-contact-field {
		min-height: 62px;
	}

	.waoh-contact-form #submit_mess_front,
	.waoh-contact-form [id^="submit_mess_front_"],
	.waoh-contact-form .submit_mess_front,
	.waoh-contact-form .submit_mess_front_class,
	.waoh-contact-form [data-action="wpestate_mess_front_end"],
	.waoh-contact-form .waoh-contact-whatsapp {
		min-height: 52px !important;
		font-size: 16px !important;
	}

	.waoh-contact-form.booking_on_mobile .waoh-contact-native-datepicker,
	#contact_owner_modal .waoh-contact-form .waoh-contact-native-datepicker {
		position: static !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		float: none !important;
		width: calc(100% + 36px) !important;
		min-width: 0 !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
		margin: 2px -18px 12px !important;
		overflow: visible !important;
		border-right: 0 !important;
		border-left: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		z-index: 1 !important;
	}

	.waoh-contact-native-datepicker::before,
	.waoh-contact-native-datepicker::after {
		display: none !important;
		content: none !important;
	}

	.waoh-contact-native-datepicker .calendar,
	.waoh-contact-native-datepicker .drp-calendar,
	.waoh-contact-native-datepicker .calendar.left,
	.waoh-contact-native-datepicker .calendar.right,
	.waoh-contact-native-datepicker .drp-calendar.left,
	.waoh-contact-native-datepicker .drp-calendar.right {
		float: none !important;
		width: 100% !important;
		max-width: none !important;
		padding-right: 16px !important;
		padding-left: 16px !important;
	}

	.waoh-contact-native-datepicker .calendar.right,
	.waoh-contact-native-datepicker .drp-calendar.right {
		margin-top: 10px !important;
	}

	.waoh-contact-native-datepicker table,
	.waoh-contact-native-datepicker .calendar-table {
		width: 100% !important;
		table-layout: fixed;
	}
}

@media (max-width: 350px) {
	.waoh-contact-dates {
		gap: 6px;
	}

	.waoh-contact-form .waoh-contact-field {
		padding-right: 9px !important;
		padding-left: 9px !important;
	}

	.waoh-contact-field__label {
		left: 9px;
	}

	.waoh-contact-form .waoh-contact-field input,
	.waoh-contact-form .waoh-contact-field .form-control,
	.waoh-contact-form .waoh-contact-field .wpestate_guest_no_control_info,
	.waoh-contact-form .waoh-contact-field .waoh-contact-people-select {
		font-size: 13px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.waoh-contact-form *,
	.waoh-contact-form *::before,
	.waoh-contact-form *::after {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}