/**
 * Nara landing-page booking bar: states only.
 *
 * The bar's look lives in the Elementor widget's Custom CSS, which owns
 * every .nsb-* rule including the flatpickr theming and the greyed-out
 * .flatpickr-day.flatpickr-disabled. This sheet adds only what the widget
 * CSS cannot know about: the moment before the availability answer lands.
 */

/* The guest steppers are authored inline and RELOCATED by JavaScript into
   the desktop popover or the mobile sheet. Until that happens they are a
   direct child of .nsb-scope, and if the script never runs (plugin not
   deployed yet, Elementor's editor preview, a JS error) they render as a
   loose stack of rows below the bar. Hidden here, revealed by the move
   itself: once relocated they are nested deeper and this no longer matches.

   Keep this rule in the widget's own Custom CSS too. It has to survive on a
   page where this stylesheet is not present, which is exactly the case it
   guards against. */
.nsb-scope > .nsb-guests-controls {
	display: none;
}

.nsb-scope.is-loading-availability .nsb-cal .flatpickr-days {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 160ms ease;
}

.nsb-scope.is-loading-availability .nsb-cal .flatpickr-days::after {
	content: 'Checking availability';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	letter-spacing: 0.06em;
	pointer-events: none;
}

/* The error line is the bar's only channel for "that date has gone" and
   "nothing is open here", so it must survive being longer than the single
   line the widget CSS sizes it for. */
.nsb-scope .nsb-error {
	max-width: 44ch;
}