/*=========================================================================
  LUXELINE CHBS EXPERIENCE — POPUPS & OVERLAYS — CODE VERSION 3.0.0
  Keeps approved dropdown/date/time visuals; corrects positioning only.
=========================================================================*/

/* CHBS qTip validation messages. */
.lux-chbs-booking-experience .qtip.chbs-qtip {
	z-index: 15020 !important;
	max-width: min(320px, calc(100vw - 32px)) !important;
	padding: 0 !important;
	color: #fff !important;
	border: 1px solid rgba(225, 197, 130, 0.18) !important;
	border-radius: 8px !important;
	background: var(--lux-chbs-plum-dark, #3b222d) !important;
	box-shadow: 0 14px 34px rgba(20, 11, 15, 0.28) !important;
	font-family: var(--lux-chbs-sans, Arial, sans-serif) !important;
}

.lux-chbs-booking-experience .qtip.chbs-qtip .qtip-content {
	padding: 11px 15px !important;
	color: #fff !important;
	background: transparent !important;
	font-size: 13px !important;
	font-weight: 550 !important;
	line-height: 1.4 !important;
}

.lux-chbs-booking-experience .qtip.chbs-qtip .qtip-tip {
	filter: saturate(0.7) brightness(0.58);
}

/* Native CHBS AJAX shield stays fully active but is visually 100% transparent. */
.lux-chbs-booking-experience #chbs-preloader,
.lux-chbs-booking-experience #chbs-preloader > div {
	background-color: transparent !important;
	background-image: none !important;
	background: transparent !important;
	opacity: 1 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.lux-chbs-booking-experience #chbs-preloader {
	pointer-events: auto !important;
}

/* The generated calendar shares the form-ID class, but it is not the main form. */
.lux-chbs-booking-experience
	#ui-datepicker-div.chbs-datepicker.chbs-booking-form-id-10007 {
	position: absolute !important;
	min-height: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	transform: none !important;
}

@media (min-width: 768px) {
	/* Native compact desktop geometry. JavaScript only corrects its left anchor. */
	.lux-chbs-booking-experience
		#ui-datepicker-div.chbs-datepicker.chbs-booking-form-id-10007 {
		right: auto !important;
		width: 17em !important;
		min-width: 17em !important;
		max-width: calc(100vw - 32px) !important;
		padding: 12px !important;
		overflow: hidden !important;
		color: var(--lux-chbs-ink, #241f21) !important;
		font-family: var(--lux-chbs-sans, Arial, sans-serif) !important;
	}

	.lux-chbs-booking-experience
		#ui-datepicker-div.chbs-datepicker.chbs-booking-form-id-10007
		.ui-datepicker-calendar {
		width: 100% !important;
		max-width: 100% !important;
		table-layout: fixed !important;
	}
}

@media (max-width: 767px) {
	/* Form-owned select and time menus: centre within the usable form width. */
	.lux-chbs-booking-experience
		.chbs-main.chbs-booking-form-id-10007
		> .ui-selectmenu-menu.ui-front,
	.lux-chbs-booking-experience
		.chbs-main.chbs-booking-form-id-10007
		> .ui-timepicker-wrapper {
		left: 50% !important;
		right: auto !important;
		width: calc(100% - 32px) !important;
		max-width: calc(100% - 32px) !important;
		margin-inline: 0 !important;
		transform: translateX(-50%) !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	/* Fallback when CHBS appends the menu directly to body. */
	.lux-chbs-booking-experience
		.ui-selectmenu-menu.ui-front.chbs-booking-form-id-10007,
	.lux-chbs-booking-experience
		.ui-timepicker-wrapper.chbs-booking-form-id-10007 {
		left: 50vw !important;
		right: auto !important;
		width: calc(100vw - 32px) !important;
		max-width: 560px !important;
		margin-inline: 0 !important;
		transform: translateX(-50%) !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.lux-chbs-booking-experience
		.chbs-main.chbs-booking-form-id-10007
		> .ui-selectmenu-menu.ui-front
		> .ui-menu,
	.lux-chbs-booking-experience
		.chbs-main.chbs-booking-form-id-10007
		> .ui-timepicker-wrapper
		> .ui-timepicker-list,
	.lux-chbs-booking-experience
		.ui-selectmenu-menu.ui-front.chbs-booking-form-id-10007
		> .ui-menu,
	.lux-chbs-booking-experience
		.ui-timepicker-wrapper.chbs-booking-form-id-10007
		> .ui-timepicker-list {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* The already-approved mobile calendar remains centred and viewport safe. */
	.lux-chbs-booking-experience
		#ui-datepicker-div.chbs-datepicker.chbs-booking-form-id-10007 {
		left: 50vw !important;
		right: auto !important;
		width: calc(100vw - 64px) !important;
		max-width: calc(100vw - 64px) !important;
		margin-inline: 0 !important;
		padding: 12px !important;
		transform: translateX(-50%) !important;
	}

	.lux-chbs-booking-experience
		#ui-datepicker-div.chbs-datepicker.chbs-booking-form-id-10007
		.ui-datepicker-calendar {
		width: 100% !important;
		max-width: 100% !important;
		table-layout: fixed !important;
	}
}

@supports (padding: max(0px)) {
	@media (max-width: 767px) {
		.lux-chbs-booking-experience
			.ui-selectmenu-menu.ui-front.chbs-booking-form-id-10007,
		.lux-chbs-booking-experience
			.ui-timepicker-wrapper.chbs-booking-form-id-10007 {
			width: calc(
				100vw - max(16px, env(safe-area-inset-left)) -
					max(16px, env(safe-area-inset-right))
			) !important;
		}

		.lux-chbs-booking-experience
			#ui-datepicker-div.chbs-datepicker.chbs-booking-form-id-10007 {
			width: calc(
				100vw - max(32px, env(safe-area-inset-left)) -
					max(32px, env(safe-area-inset-right))
			) !important;
			max-width: calc(
				100vw - max(32px, env(safe-area-inset-left)) -
					max(32px, env(safe-area-inset-right))
			) !important;
		}
	}