/* ============================================================
   BON Booking Form – v1.x
   Container-query based, mobile-first.
   ------------------------------------------------------------
   Layout and spacing respond to the form's OWN width (via
   container queries), not the viewport. This means the form
   renders correctly in narrow sidebars on desktop, wide main
   columns, multi-column page layouts, and everything in between.
   Falls back gracefully on older browsers (sees only the
   mobile-first defaults below).
   ============================================================ */

/* ----------------------------------------------------------
   CSS custom properties — override in your theme to restyle.
   Defaults below are tuned for narrow containers / mobile.
   Container queries below loosen them at 520px and beyond.
   ---------------------------------------------------------- */
.bon-bf {
	/* Establish a containment context so child rules can use
	   @container queries against the form's own width. */
	container-type: inline-size;
	container-name: bonbf;

	--bon-bf-bg:            #ffffff;
	--bon-bf-text:          #1f1f1f;
	--bon-bf-label:         #555555;
	--bon-bf-border:        #d4d4d4;
	--bon-bf-border-focus:  #10689a;
	--bon-bf-input-bg:      #ffffff;
	--bon-bf-submit-bg:     #1f1f1f;
	--bon-bf-submit-text:   #ffffff;
	--bon-bf-submit-hover:  #10689a;
	--bon-bf-radius:        4px;

	/* Compact defaults (narrow containers / mobile). */
	--bon-bf-gap:           8px;
	--bon-bf-pad:           10px;
	--bon-bf-label-gap:     3px;
	--bon-bf-label-size:    11px;
	--bon-bf-input-h:       42px;
	--bon-bf-submit-h:      44px;

	/* Constant across breakpoints. */
	--bon-bf-font:          inherit;
	--bon-bf-font-size:     16px;  /* >= 16px prevents iOS focus zoom */

	background: var(--bon-bf-bg);
	color: var(--bon-bf-text);
	font-family: var(--bon-bf-font);
	padding: var(--bon-bf-pad);
	border-radius: var(--bon-bf-radius);
	box-sizing: border-box;
	width: 100%;
}

/* Loosen spacing when the form has room. */
@container bonbf (min-width: 520px) {
	.bon-bf {
		--bon-bf-gap:        12px;
		--bon-bf-pad:        16px;
		--bon-bf-label-gap:  6px;
		--bon-bf-label-size: 12px;
		--bon-bf-input-h:    46px;
		--bon-bf-submit-h:   46px;
	}
}

.bon-bf *,
.bon-bf *::before,
.bon-bf *::after {
	box-sizing: border-box;
}

/* ----------------------------------------------------------
   Form grid — mobile first (single column).
   ---------------------------------------------------------- */
.bon-bf__form {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bon-bf-gap);
	margin: 0;
}

.bon-bf .bon-bf__field {
	display: flex;
	flex-direction: column;
	min-width: 0; /* allow grid items to shrink */
	margin: 0 !important;
	padding: 0 !important;
}

.bon-bf__label {
	display: block;
	font-size: var(--bon-bf-label-size);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bon-bf-label);
	margin-bottom: var(--bon-bf-label-gap);
	cursor: pointer;
}

.bon-bf .bon-bf__input,
.bon-bf .bon-bf__select {
	font-family: inherit;
	font-size: var(--bon-bf-font-size);
	color: var(--bon-bf-text);
	background: var(--bon-bf-input-bg);
	border: 1px solid var(--bon-bf-border);
	border-radius: var(--bon-bf-radius);
	height: var(--bon-bf-input-h) !important;
	min-height: var(--bon-bf-input-h) !important;
	width: 100%;
	max-width: 100% !important;
	padding: 0 12px;
	margin: 0 !important;
	box-sizing: border-box !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	line-height: 1.2;
	vertical-align: top;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Native select caret (we removed default appearance above). */
.bon-bf__select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23555' d='M6 8L0 0h12z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 10px 7px;
	padding-right: 32px;
}

.bon-bf__input:focus,
.bon-bf__select:focus {
	outline: none;
	border-color: var(--bon-bf-border-focus);
	box-shadow: 0 0 0 3px rgba(16, 104, 154, 0.18);
}

.bon-bf__input[readonly] {
	background: var(--bon-bf-input-bg);
	cursor: pointer;
}

/* ----------------------------------------------------------
   Submit button
   ----------------------------------------------------------
   The submit cell aligns to the bottom of the grid row so its
   button bottom lines up with the input bottoms in adjacent
   cells (which have label + input stacked above).

   We use !important on the alignment because hotel themes
   frequently set rules on form elements that override ours
   via higher selector specificity (e.g. .elementor-widget
   form button { ... }). Alignment of the primary CTA cannot
   silently break, so we win this battle unconditionally.
   ---------------------------------------------------------- */
.bon-bf .bon-bf__field--submit {
	align-self: end !important;
	justify-self: stretch;
	justify-content: flex-start; /* not flex-end, so button sits at top of cell */
}

.bon-bf .bon-bf__submit {
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bon-bf-submit-text);
	background: var(--bon-bf-submit-bg);
	border: 1px solid var(--bon-bf-submit-bg);
	border-radius: var(--bon-bf-radius);
	height: var(--bon-bf-submit-h) !important;
	min-height: var(--bon-bf-submit-h) !important;
	line-height: 1 !important;
	width: 100%;
	padding: 0 18px;
	margin: 0 !important;        /* themes love to add margins to buttons */
	display: block !important;   /* avoid baseline-induced offset */
	box-sizing: border-box !important;
	vertical-align: top;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.bon-bf .bon-bf__submit:hover,
.bon-bf .bon-bf__submit:focus {
	background: var(--bon-bf-submit-hover);
	border-color: var(--bon-bf-submit-hover);
	color: var(--bon-bf-submit-text);
	outline: none;
}

/* ----------------------------------------------------------
   Medium containers (≈520–820px wide): 2 columns. Submit row.
   Uses @container so it triggers off the form's own width.
   ---------------------------------------------------------- */
@container bonbf (min-width: 520px) {
	.bon-bf--horizontal .bon-bf__form {
		grid-template-columns: repeat(2, 1fr);
		align-items: end;
	}
	.bon-bf--horizontal .bon-bf__field--submit {
		grid-column: 1 / -1;
	}
	.bon-bf--horizontal .bon-bf__submit {
		width: auto;
		min-width: 200px;
		margin-left: auto;
	}
}

/* ----------------------------------------------------------
   Wide containers (≥820px): single row, all fields + submit.
   ---------------------------------------------------------- */
@container bonbf (min-width: 820px) {
	.bon-bf--horizontal .bon-bf__form {
		/* Equal-width fields, then an auto-width submit cell. */
		grid-template-columns: repeat(var(--bon-bf-field-count, 6), minmax(0, 1fr)) auto;
		align-items: end;
		gap: 12px;
	}
	.bon-bf--horizontal .bon-bf__field {
		min-width: 0; /* allow shrinking inside grid track */
	}
	.bon-bf--horizontal .bon-bf__field--submit {
		grid-column: auto;
	}
	.bon-bf--horizontal .bon-bf__submit {
		width: auto;
		min-width: 0;
		padding: 0 22px;
		white-space: nowrap;
	}
}

/* ----------------------------------------------------------
   Vertical layout — always single column (sidebar/widget use).
   ---------------------------------------------------------- */
.bon-bf--vertical .bon-bf__form {
	grid-template-columns: 1fr;
}
.bon-bf--vertical .bon-bf__submit {
	width: 100%;
}

/* ----------------------------------------------------------
   Per-device field visibility.
   ----------------------------------------------------------
   Hidden fields stay in the DOM so their default values submit
   to the booking engine. They just don't render visually.

   Triggers off the FORM CONTAINER's width, not the viewport — so
   a horizontal form placed in a narrow sidebar on a desktop will
   correctly hide "mobile-hidden" fields. The threshold is 520px,
   matching the layout breakpoints.

   !important to ensure theme rules can't accidentally reveal
   them via display: block on form fields.
   ---------------------------------------------------------- */
@container bonbf (max-width: 519.98px) {
	.bon-bf .bon-bf__field--hide-mobile {
		display: none !important;
	}
}
@container bonbf (min-width: 520px) {
	.bon-bf .bon-bf__field--hide-desktop {
		display: none !important;
	}
}

/* ----------------------------------------------------------
   Flatpickr overrides — keep calendar readable on small screens.
   Flatpickr handles its own positioning and mobile sizing, but
   we nudge the font and add a soft shadow that matches our look.
   ---------------------------------------------------------- */
.flatpickr-calendar {
	font-family: inherit;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
	background: var(--bon-bf-border-focus, #10689a);
	border-color: var(--bon-bf-border-focus, #10689a);
}

/* On very small screens, prevent the calendar from overflowing. */
@media (max-width: 380px) {
	.flatpickr-calendar {
		width: calc(100vw - 24px) !important;
		max-width: 320px;
	}
}

/* ----------------------------------------------------------
   Accessibility: respect reduced motion.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.bon-bf__input,
	.bon-bf__select,
	.bon-bf__submit {
		transition: none;
	}
}