/* [hush_booking_form] - Step 9 follow-up: three-part name row, DOB, inline errors. */

/* Step 42 / Step 63 / Step 87: the booking widget on a Room page.
   Step 87 removed the sticky/docked positioning entirely - it sits in the page's
   normal flow like any other section and never follows the guest on scroll. The
   Step 42 auto-shrink ("is-compact") mechanic was already removed in Step 63.
   The only size/content change now is the guest's own click on the
   expand/collapse toggle (.hush-lodge-booking-form__toggle). */
/* Step 114: real testing found this reading as a box nested inside the page's own already-
 * boxed content area (Steps 65/89's boxed .hush-lodge-content column) - a hard 1px border
 * drawing a second rectangle just inside the page's own edge. A soft shadow instead of a
 * border keeps this reading as a distinct card (Step 104's intent) without the double-line
 * effect; the room's own page is the only place that combination happens, since nothing
 * else on this plugin's default pages nests one boxed area inside another. */
.hush-lodge-single-room__booking {
	margin: 0 0 1.5em;
	padding: 1em;
	border: 0;
	border-radius: var( --hlb-radius, 8px );
	background: #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.1 );
}

/* Step 104: on desktop/laptop the widget reads as a compact booking card (like the
   Expedia / hotels.com / Booking.com widgets), not a full-column block. Its date fields
   still sit two-up and size to their content; the name row wraps inside the narrower
   card on its own. Mobile keeps the full-width single column. */
@media ( min-width: 768px ) {
	/* About 80% of the room page content column, centred with its expand control.
	   The page already boxes the content, so this card does not add a second hard border. */
	.hush-lodge-single-room .hush-lodge-single-room__booking {
		width: 80%;
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;
	}

	.hush-lodge-single-room__booking .hush-lodge-booking-form__dates .hush-lodge-booking-form__field {
		flex: 1 1 14em;
	}
}

@media ( max-width: 767px ) {
	.hush-lodge-single-room .hush-lodge-single-room__booking {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Step 87: manual expand/collapse control. Toggled only by a direct click on the
   chevron button - never by scroll, focus, or typing. */
/* Step 122: confirmed via the actual wp_enqueue_scripts hook that this plugin's own
 * styles register (and so print) BEFORE the active theme's (Hello Elementor's own
 * hello_elementor_scripts_styles runs at the same priority, later) - at equal CSS
 * specificity, the later stylesheet wins the cascade, so `background: none` here was
 * losing to the theme's own default <button> background. !important on the two
 * properties a theme is most likely to also set is the deliberate, narrow fix - not
 * used anywhere else in this file. */
.hush-lodge-booking-form .hush-lodge-booking-form__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
	margin: 0 0 1em;
	padding: 0.7em 1em;
	background: var( --hlb-primary, #1d2327 ) !important;
	border: 0 !important;
	border-radius: var( --hlb-radius, 8px );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	color: #fff !important;
	text-align: center;
}

.hush-lodge-booking-form .hush-lodge-booking-form__toggle:hover,
.hush-lodge-booking-form .hush-lodge-booking-form__toggle:focus {
	background: var( --hlb-primary, #1d2327 ) !important;
	color: #fff !important;
	filter: brightness( 1.08 );
}

.hush-lodge-booking-form__toggle-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.1em 0.6em;
}

/* Step 114: explicit size/colour rather than inherited - `color: inherit` on the toggle
 * button left this at the mercy of whatever surrounding text colour happened to cascade
 * in, which real testing found unreadable. A fixed, high-contrast dark neutral reads
 * clearly against both this widget's own white background and whatever colour Step 122
 * gives the toggle button itself. */
.hush-lodge-booking-form__collapsed-price,
.hush-lodge-booking-form__toggle-label {
	font-size: 1em;
	color: #fff;
}

.hush-lodge-booking-form__collapsed-price {
	font-weight: 700;
}

.hush-lodge-booking-form__collapsed-unit {
	font-size: 0.85em;
	color: #fff;
	opacity: 0.85;
}

.hush-lodge-booking-form__toggle-icon {
	transition: transform 0.15s ease;
	flex: 0 0 auto;
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: #fff;
}

/* Collapsed points down (open the form). Expanded points up (close it). */
.hush-lodge-booking-form.is-collapsed .hush-lodge-booking-form__toggle-icon {
	transform: rotate( 180deg );
}

/* Expanded: the "Book this room" label stays, so the open form still says what it is. */
.hush-lodge-booking-form:not(.is-collapsed) .hush-lodge-booking-form__toggle {
	justify-content: space-between;
}

.hush-lodge-booking-form__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hush-lodge-booking-form__dates .hush-lodge-booking-form__field {
	flex: 1 1 180px;
	margin-bottom: 0;
}

/* Collapsed: hide the form + any notice, rotate the chevron, show price + prompt. */
.hush-lodge-booking-form.is-collapsed .hush-lodge-booking-form__toggle {
	margin-bottom: 0;
}

.hush-lodge-booking-form.is-collapsed .hush-lodge-booking-form__form,
.hush-lodge-booking-form.is-collapsed .hush-lodge-booking-form__notice {
	display: none;
}

.hush-lodge-booking-form__field {
	display: block;
	margin: 0 0 1em;
}

.hush-lodge-booking-form__field label,
.hush-lodge-booking-form__names legend {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25em;
}

.hush-lodge-booking-form__field input:not([type="checkbox"]):not([type="radio"]),
.hush-lodge-booking-form__field select,
.hush-lodge-booking-form__field textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Checkbox and its words stay on one row. Width and display are locked so a
   theme rule that sets inputs or labels to block/100% cannot drop the box
   onto its own line. */
.hush-lodge-booking-form__choice {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	gap: 0.55em !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	font-weight: 600;
	cursor: pointer;
}

.hush-lodge-booking-form__choice input[type="checkbox"] {
	width: 1.15em !important;
	min-width: 1.15em !important;
	max-width: 1.15em !important;
	height: 1.15em !important;
	flex: 0 0 1.15em !important;
	margin: 0.15em 0 0 !important;
	accent-color: var( --hlb-primary, #1d2327 );
}

/* Two-stage progressive disclosure (Step 9 second follow-up). The [hidden] rule is spelled
   out because some themes set a display value on generic containers that would otherwise
   beat the attribute's UA style. */
.hush-lodge-booking-form__stage--two[hidden] {
	display: none;
}

.hush-lodge-booking-form__locked-room {
	margin: 0 0 1em;
}

/* Step 25 honeypot - off-screen, not display:none (some bots skip hidden fields). */
.hush-lodge-booking-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hush-lodge-booking-form__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.hush-lodge-booking-form__dates .hush-lodge-booking-form__field {
	flex: 1 1 12em;
}

.hush-lodge-booking-form__names {
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 4px;
	padding: 1em;
	margin: 0 0 1em;
}

.hush-lodge-booking-form__names-note {
	margin: 0 0 0.75em;
	font-size: 0.9em;
	opacity: 0.8;
}

.hush-lodge-booking-form__names-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.hush-lodge-booking-form__names-row .hush-lodge-booking-form__field {
	flex: 1 1 10em;
	margin-bottom: 0;
}

/* Stack the name fields only when the row genuinely can't fit them (small phones). */
@media ( max-width: 480px ) {
	.hush-lodge-booking-form__names-row,
	.hush-lodge-booking-form__dates {
		flex-direction: column;
		gap: 0.75em;
	}
}

.hush-lodge-booking-form__error {
	display: none;
	margin-top: 0.25em;
	color: #b32d2e;
	font-size: 0.9em;
}

.hush-lodge-booking-form__error.is-visible {
	display: block;
}

.hush-lodge-booking-form__form input.has-error,
.hush-lodge-booking-form__form select.has-error {
	border-color: #b32d2e;
	outline-color: #b32d2e;
}

.hush-lodge-booking-form__notice {
	padding: 0.75em 1em;
	border-radius: 4px;
	margin-bottom: 1em;
}

.hush-lodge-booking-form__notice--success {
	background: #edf7ed;
	border: 1px solid #4caf50;
}

.hush-lodge-booking-form__notice--error {
	background: #fdecea;
	border: 1px solid #b32d2e;
}

/* Step 33: live estimated stay total under the date pickers. */
.hush-lodge-booking-form__total {
	margin: 0 0 1em;
	padding: 0.5em 0.75em;
	border-radius: 4px;
	background: #f4f6f8;
	font-weight: 600;
}

.hush-lodge-booking-form__total .hlb-stay-total__label {
	color: #50575e;
	font-weight: 600;
}

.hush-lodge-booking-form__total .hlb-stay-total__price,
.hush-lodge-booking-form__total .hlb-stay-total ins,
.hlb-room-card__total .hlb-stay-total__price,
.hlb-room-card__total .hlb-stay-total ins,
.hlb-room-modal__total .hlb-stay-total__price,
.hlb-room-modal__total .hlb-stay-total ins {
	color: var( --hlb-secondary, var( --hlb-accent, #135e96 ) );
	font-weight: 700;
	opacity: 1;
	text-decoration: none;
}

.hush-lodge-booking-form__total .hlb-stay-total__nights,
.hlb-room-card__total .hlb-stay-total__nights,
.hlb-room-modal__total .hlb-stay-total__nights,
.hush-lodge-booking-form__total .hlb-stay-total__label,
.hlb-room-card__total .hlb-stay-total__label,
.hlb-room-card__total .hlb-stay-total__notes {
	color: inherit;
	font-weight: 600;
}

.hush-lodge-booking-form__total[hidden] {
	display: none;
}

/* Unavailable dates: a quiet filled cell, no diagonal slash. Scoped to this
   plugin's calendars so a theme's pink strike-through cannot come back. */
.flatpickr-calendar.hlb-booking-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar.hlb-booking-calendar .flatpickr-day.flatpickr-disabled:hover,
.hlb-all-rooms .flatpickr-day.flatpickr-disabled,
.hlb-all-rooms .flatpickr-day.flatpickr-disabled:hover {
	position: relative;
	color: #8c8f94 !important;
	background: #f0f0f1 !important;
	border-color: transparent !important;
	opacity: 1;
	text-decoration: none !important;
	box-shadow: none !important;
}

.flatpickr-calendar.hlb-booking-calendar .flatpickr-day.flatpickr-disabled::after,
.flatpickr-calendar.hlb-booking-calendar .flatpickr-day.flatpickr-disabled::before,
.hlb-all-rooms .flatpickr-day.flatpickr-disabled::after,
.hlb-all-rooms .flatpickr-day.flatpickr-disabled::before {
	content: none !important;
	display: none !important;
	background: none !important;
	transform: none !important;
}

/* Step 53: mobile - the sticky widget's date row and name row already stack at 480px
   (see above); make sure the compact-mode toggle never leaves an unusably tiny target and
   the widget can't push the page wider than the viewport. */
.hush-lodge-single-room__booking,
.hush-lodge-booking-form,
.hush-lodge-booking-form__form {
	max-width: 100%;
	box-sizing: border-box;
}
/* Keep nightly prices inside their dates. Flatpickr's 39px line-height otherwise
 * puts a block price label below the cell, overlapping the following week. */
.flatpickr-calendar.hlb-booking-calendar .flatpickr-day {
	position: relative;
	height: 48px;
	line-height: 25px;
}

.flatpickr-calendar.hlb-booking-calendar .hlb-daycal-price {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	margin: 0;
	font-size: 10px;
	line-height: 12px;
}

.flatpickr-calendar.hlb-booking-calendar .selected .hlb-daycal-price,
.flatpickr-calendar.hlb-booking-calendar .startRange .hlb-daycal-price,
.flatpickr-calendar.hlb-booking-calendar .endRange .hlb-daycal-price {
	color: inherit;
}

/* Responsive: on narrow screens the two-month Flatpickr calendar must not overflow
 * the viewport. Flatpickr's own .flatpickr-calendar already goes full-width when
 * showMonths=1; this ensures the booking-form wrapper never clips it. */
@media ( max-width: 640px ) {
	.flatpickr-calendar.hlb-booking-calendar {
		width: 100% !important;
		max-width: 100% !important;
	}
}