/**
 * Callow Top Booking Forms
 *
 * Colours and fonts read from Elementor's global variables first, so the forms
 * follow the site's globals if those change. The literal fallbacks are the
 * current Callow Top palette, for contexts where Elementor's vars aren't set
 * (the editor canvas, a cached page, a non-Elementor template).
 */

.ctbf {
	--ctbf-forest: var( --e-global-color-ct_forest, #22301A );
	--ctbf-primary: var( --e-global-color-primary, #3A4A28 );
	--ctbf-gold: var( --e-global-color-secondary, #D99A2B );
	--ctbf-gold-shadow: var( --e-global-color-ct_gold_shadow, #B07A16 );
	--ctbf-green-shadow: var( --e-global-color-ct_green_shadow, #263118 );
	--ctbf-cream: var( --e-global-color-ct_cream, #FFFDF7 );
	--ctbf-sand: var( --e-global-color-ct_sand, #F0EAD9 );
	--ctbf-heading: var( --e-global-color-ct_heading, #2C2C22 );
	--ctbf-muted: var( --e-global-color-e2ce5da, #555044 );

	--ctbf-font-display: "Bricolage Grotesque", system-ui, sans-serif;
	--ctbf-font-body: "Hanken Grotesk", system-ui, sans-serif;

	--ctbf-radius: 10px;
	--ctbf-gap: 14px;
	--ctbf-field-h: 52px;

	/**
	 * No `container-type` here. Inline-size containment stops the element's
	 * contents contributing to its intrinsic width, and Elementor's
	 * `.e-con-inner` is a flex row that sizes widgets by content, so the
	 * whole widget collapsed to 0px wide and the bar rendered stacked.
	 * Responsive behaviour uses the media query at the end of this file.
	 */
	display: block;
	width: 100%;
	font-family: var( --ctbf-font-body );
	color: var( --ctbf-heading );
}

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

/**
 * The flex `display` rules below out-specify the UA stylesheet's [hidden],
 * so hidden groups would otherwise stay visible. This must win.
 */
.ctbf [hidden] {
	display: none !important;
}

.ctbf__heading {
	margin: 0 0 12px;
	font-family: var( --ctbf-font-display );
	font-size: 1.05rem;
	font-weight: 600;
	color: var( --ctbf-forest );
}

/* --------------------------------------------------------------------- */
/* Form shell                                                             */
/* --------------------------------------------------------------------- */

/**
 * No card. The form is transparent and unpadded so it sits inside whatever
 * container Elementor provides, rather than drawing a second box inside it.
 */
.ctbf__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var( --ctbf-gap );
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

/**
 * `flex-wrap: nowrap` matters here, and is not just tidiness.
 *
 * The base rule sets `wrap`, which in a column makes this a multi-line flex
 * container. The form then resolves a definite height, and every child with
 * `flex-grow: 1` (which in a stacked form is all of them) starts claiming a
 * share of it. The date pair grew from 75px to 163px, leaving a band of empty
 * space above the two fields.
 *
 * A stacked form is one column and should never wrap, so say so.
 */
.ctbf--stacked .ctbf__form {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
}

.ctbf__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 150px;
	min-width: 0;
}

.ctbf__field--type {
	flex: 2 1 230px;
}

/**
 * Equal thirds of whatever row the party group occupies. A fixed basis with
 * no grow left them at 96px with dead space to the right whenever the form
 * wrapped inside a narrow container on a wide viewport. The media query that
 * used to fix this only fires below 900px of *viewport*, not of container.
 */
.ctbf__field--party {
	flex: 1 1 0;
	min-width: 0;
}

/**
 * The guests panel is absolutely positioned, so its field has to be the
 * containing block. The bar sets this on every field; a stacked form has no
 * card rules at all, and without this the panel anchored itself to the page.
 */
.ctbf__field--guests {
	position: relative;
}

/**
 * The button grows into whatever space is left on its row, so it reads as
 * deliberate whether it sits at the end of a row of fields or wraps onto a
 * line of its own in a narrow container.
 */
.ctbf__field--submit {
	flex: 1 1 150px;
}

.ctbf--stacked .ctbf__field {
	flex: 1 1 auto;
}

/* --------------------------------------------------------------------- */
/* Labels and controls                                                    */
/* --------------------------------------------------------------------- */

.ctbf__label {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --ctbf-muted );
}

.ctbf__hint {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0.75;
}

/**
 * Selectors are scoped with `.ctbf` to reach specificity (0,2,0). The theme
 * styles `input[type="date"]` directly, which is (0,1,1) and would otherwise
 * beat a single class. That rule forces a 3px radius and its own padding,
 * so the date field alone rendered square while the selects looked right.
 */
.ctbf .ctbf__input,
.ctbf .ctbf__select,
.ctbf .ctbf__guests-toggle {
	width: 100%;
	height: var( --ctbf-field-h );
	padding: 0 14px;
	font-family: inherit;
	font-size: 1rem;
	line-height: normal;
	color: var( --ctbf-heading );
	background-color: #fff;
	border: 1px solid color-mix( in srgb, var( --ctbf-sand ) 70%, var( --ctbf-forest ) );
	border-radius: 12px;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ctbf .ctbf__select {
	padding-right: 38px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2322301A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	cursor: pointer;
}

/**
 * `:focus-within`, not `:focus` or `:focus-visible`.
 *
 * `input[type="date"]` delegates focus into its shadow DOM, so the host is
 * `document.activeElement` while neither `:focus` nor `:focus-visible` ever
 * matches it, so the date fields had no keyboard indicator at all.
 * `:focus-within` matches a host containing the focus, so it covers both the
 * date inputs and the plain selects.
 *
 * A ring on a focused field is expected behaviour; it was only the buttons
 * that read as stray highlighting.
 */
.ctbf .ctbf__input:focus,
.ctbf .ctbf__input:focus-within,
.ctbf .ctbf__select:focus,
.ctbf .ctbf__select:focus-within,
.ctbf-kb .ctbf .ctbf__guests-toggle:focus-visible {
	outline: none;
	border-color: var( --ctbf-primary );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --ctbf-primary ) 22%, transparent );
}

/**
 * The guests toggle is a <button>, so it is gated on `.ctbf-kb` like the
 * others: `:focus-visible` matches a mouse click on a button in Chromium, and
 * a ring left behind after clicking the panel open reads as a stuck highlight.
 * The selects and date inputs are not buttons and do not have that problem.
 */

/* Date inputs render their own indicator; keep it on-brand. */
.ctbf .ctbf__input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.6;
}

.ctbf .ctbf__input[type="date"]::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
}

/* --------------------------------------------------------------------- */
/* Mode toggle                                                            */
/* --------------------------------------------------------------------- */

.ctbf__field--mode {
	flex: 1 1 100%;
}

.ctbf__segmented {
	display: inline-flex;
	padding: 4px;
	gap: 4px;
	background: var( --ctbf-sand );
	border-radius: 999px;
}

.ctbf__segment {
	position: relative;
	cursor: pointer;
}

.ctbf__segment input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

.ctbf__segment span {
	display: block;
	padding: 9px 20px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var( --ctbf-primary );
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ctbf__segment input:checked + span {
	color: var( --ctbf-cream );
	background: var( --ctbf-forest );
}

.ctbf__segment input:focus-visible + span {
	outline: 2px solid var( --ctbf-primary );
	outline-offset: 2px;
}

/* --------------------------------------------------------------------- */
/* Date pair                                                              */
/* --------------------------------------------------------------------- */

/**
 * Arrive and Depart share a row in the stacked forms, which is the only
 * place the wrapper is rendered at all. Two dates on separate rows made a
 * sidebar noticeably taller for no gain, since a date field needs about half
 * the width it was being given.
 *
 * Same shape as `.ctbf__party` below: a flex row whose children are halves
 * rather than thirds.
 */
.ctbf__dates {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var( --ctbf-gap );
	flex: 0 1 auto;
	min-width: 0;
}

/**
 * Halves that fall back to full width on their own, with no media query.
 *
 * A date input will not render below about 167px: that is what Chrome needs
 * for "25/09/2026" plus its picker button, measured, and squeezing it any
 * narrower clips the year. The basis is set just above that, so two sit side
 * by side wherever the container can hold them and wrap to one per row where
 * it cannot.
 *
 * This has to key off the container, not the viewport. A sidebar can be 300px
 * wide on a desktop page, where a `max-width` query never fires, and
 * container queries are not an option here (see the note against
 * `container-type` on `.ctbf`).
 *
 * Three classes, so it beats `.ctbf--stacked .ctbf__field` at (0,2,0), which
 * would otherwise give them `flex-basis: auto` and size each to its own
 * content.
 */
.ctbf .ctbf__dates .ctbf__field--date {
	flex: 1 1 170px;
}

/* --------------------------------------------------------------------- */
/* Party group                                                            */
/* --------------------------------------------------------------------- */

/**
 * Bottom-aligned, because the labels are not all the same height. Narrow
 * columns wrap "Children 4–16" onto two lines, which would otherwise push
 * that select below the other two.
 */
.ctbf__party {
	display: flex;
	align-items: flex-end;
	gap: var( --ctbf-gap );
	flex: 1 1 320px;
	min-width: 0;
}

.ctbf--stacked .ctbf__party {
	flex: 1 1 auto;
}

/**
 * Re-asserted here, after `.ctbf--stacked .ctbf__field`. That rule is equally
 * specific and would otherwise give the party fields `flex-basis: auto`, so
 * they would size to their labels ("Children 4–16" being the longest) and
 * come out uneven rather than as thirds.
 */
.ctbf .ctbf__field--party {
	flex: 1 1 0;
	min-width: 0;
}

.ctbf__party[hidden] {
	display: none;
}

/* --------------------------------------------------------------------- */
/* Button                                                                 */
/* --------------------------------------------------------------------- */

/**
 * A line-for-line match of the site's Elementor button rules:
 *
 *   .elementor-button                 padding 12px 24px; line-height 1;
 *                                     text-align center; transition all .3s
 *   .elementor-element-7f167b3        background secondary; Bricolage 700 16px;
 *                                     colour be95c18; shadow 0 5px 0 0 #B07A16;
 *                                     radius 14px
 *   ...:hover / :focus                background #EBA936; shadow 0 3px 0 0 #B07A16
 *
 * Height is left to the padding, exactly as theirs is, so the button is 40px
 * rather than matching the 52px fields, and that is what makes it identical
 * to a neighbouring Elementor button. There is no transform on hover: the site's
 * button only shrinks its shadow, so this one does too.
 *
 * The 5px shadow sits outside the box, so the button carries 5px of bottom
 * margin and the row aligns on `flex-end`.
 */
.ctbf .ctbf__button {
	display: inline-block;
	width: 100%;
	margin-bottom: 5px;
	padding: 12px 24px;
	font-family: var( --ctbf-font-display );
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	color: var( --e-global-color-be95c18, #fff );
	background-color: var( --ctbf-gold );
	border: none;
	border-radius: 14px;
	box-shadow: 0 5px 0 0 var( --ctbf-gold-shadow );
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: all 0.3s;
}

/**
 * `:focus-visible`, not `:focus`. A mouse click leaves `:focus` on the
 * button, which would strand it in its hover colours after the press.
 */
.ctbf .ctbf__button:hover,
.ctbf .ctbf__button:focus-visible {
	color: var( --e-global-color-be95c18, #fff );
	background-color: #EBA936;
	box-shadow: 0 3px 0 0 var( --ctbf-gold-shadow );
}

/**
 * Pressing the button shows nothing extra: no outline, and no tap highlight
 * on touch. A hard outline offset from a button that already carries a solid
 * drop shadow reads as a stray box rather than as focus.
 *
 * Keyboard focus still has to be visible, so it gets a soft halo in the
 * button's own shadow colour, the same language as the field cards' focus
 * ring. The offset shadow is repeated in each rule because `box-shadow`
 * replaces rather than adds.
 */
.ctbf .ctbf__button:focus {
	outline: none;
}

.ctbf .ctbf__button:focus-visible {
	outline: none;
}

.ctbf-kb .ctbf .ctbf__button:focus-visible {
	box-shadow:
		0 3px 0 0 var( --ctbf-gold-shadow ),
		0 0 0 4px color-mix( in srgb, var( --ctbf-gold ) 40%, transparent );
}

/* Green variant, matching the "See Camping Prices" button. */
.ctbf .ctbf__button--green {
	background-color: var( --ctbf-primary );
	box-shadow: 0 5px 0 0 var( --ctbf-green-shadow );
}

.ctbf .ctbf__button--green:hover,
.ctbf .ctbf__button--green:focus-visible {
	background-color: #465C2D;
	box-shadow: 0 3px 1px 0 var( --ctbf-green-shadow );
}

.ctbf-kb .ctbf .ctbf__button--green:focus-visible {
	box-shadow:
		0 3px 1px 0 var( --ctbf-green-shadow ),
		0 0 0 4px color-mix( in srgb, var( --ctbf-primary ) 40%, transparent );
}

/* --------------------------------------------------------------------- */
/* Messages                                                               */
/* --------------------------------------------------------------------- */

.ctbf__error {
	flex: 1 1 100%;
	margin: 0;
	padding: 10px 14px;
	font-size: 0.9rem;
	color: #7a2418;
	background: #fdf0ec;
	border: 1px solid #e8c4ba;
	border-radius: 12px;
}

.ctbf__error[hidden] {
	display: none;
}

.ctbf__notice {
	flex: 1 1 100%;
	margin: 0;
	padding: 10px 14px;
	font-size: 0.85rem;
	color: var( --ctbf-muted );
	background: var( --ctbf-sand );
	border-radius: 12px;
}

/* --------------------------------------------------------------------- */
/* Responsive                                                             */
/* --------------------------------------------------------------------- */

@media ( max-width: 900px ) {
	.ctbf__form {
		flex-direction: column;
		align-items: stretch;
	}

	.ctbf__field,
	.ctbf__party {
		flex: 1 1 auto;
	}

	.ctbf__party {
		flex-wrap: wrap;
	}


}

/* --------------------------------------------------------------------- */
/* Hero bar, the horizontal layout only                                   */
/* --------------------------------------------------------------------- */

/**
 * The horizontal search bar used on the homepage and on /book-online/.
 *
 * Each field is a white card with its label inside it, sitting in a single
 * row. The coloured container around it belongs to the Elementor section, not
 * to us. This draws only the cards and the button.
 *
 * Scoped to `.ctbf--bar`, which PHP adds only when the hero preset is NOT
 * stacked. `[ctbf_search layout="stacked"]` renders the very same fields and
 * simply misses this section, so it falls through to the ordinary control
 * styling used by the camping and touring sidebars. Do not widen these back
 * to `.ctbf--hero`: the sidebar would then need every one of them undone.
 */
.ctbf--bar .ctbf__form {
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 10px;
}

/**
 * Every field shares the row equally. `flex: 1 1 0` with `min-width: 0` beats
 * the base rules that give type and party their own flex-basis, which is what
 * made the columns uneven.
 */
.ctbf--bar .ctbf__field,
.ctbf--bar .ctbf__field--type,
.ctbf--bar .ctbf__field--date,
.ctbf--bar .ctbf__field--guests {
	position: relative;
	gap: 0;
	flex: 1 1 0;
	min-width: 0;
	padding: 12px 18px;
	background: #fff;
	border-radius: 14px;
}

/* The button keeps its own width and sits centred against the taller cards. */
.ctbf--bar .ctbf__field--submit {
	flex: 0 0 auto;
	min-width: 0;
	padding: 0;
	background: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.ctbf--bar .ctbf__label {
	margin-bottom: 2px;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var( --ctbf-muted );
}

/**
 * Controls lose their own chrome. The card is the control.
 *
 * `background-color`, not the `background` shorthand: the shorthand resets
 * `background-image` too, which silently removed the select's chevron.
 *
 * A shared explicit height matters as well. Left to themselves an input, a
 * select and a button measure 22px, 20px and 20px, so their text centres sat
 * at different heights and the row looked misaligned.
 */
.ctbf--bar .ctbf__input,
.ctbf--bar .ctbf__select,
.ctbf--bar .ctbf__guests-toggle {
	height: 26px;
	padding: 0;
	font-family: var( --ctbf-font-display );
	font-size: 1rem;
	font-weight: 700;
	line-height: 26px;
	color: var( --ctbf-forest );
	background-color: transparent;
	border: 0;
	border-radius: 0;
}

.ctbf--bar .ctbf__select {
	padding-right: 20px;
	background-position: right 2px center;
	background-size: 10px 7px;
}

/* The date input centres its own text, so let it rather than fight it. */
.ctbf--bar .ctbf__input[type="date"] {
	line-height: normal;
}

/**
 * Focus styling moves to the card, not the control. A control drawn without
 * chrome gets a hard rectangle from the default focus ring, which reads as a
 * text box in the middle of the card.
 */
.ctbf--bar .ctbf__input:focus,
.ctbf--bar .ctbf__input:focus-within,
.ctbf--bar .ctbf__select:focus,
.ctbf--bar .ctbf__select:focus-within,
.ctbf--bar .ctbf__guests-toggle:focus,
.ctbf--bar .ctbf__input:focus-visible,
.ctbf--bar .ctbf__select:focus-visible,
.ctbf--bar .ctbf__guests-toggle:focus-visible {
	outline: none;
	box-shadow: none;
}

/**
 * The submit cell is a `.ctbf__field` too, but it has no card behind it, so
 * the ring was landing as a loose rectangle around the button rather than
 * round anything. It is excluded here. The button carries its own focus treatment.
 */
.ctbf--bar .ctbf__field:not( .ctbf__field--submit ):focus-within {
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --ctbf-primary ) 35%, transparent );
}

.ctbf--bar .ctbf__button {
	margin-bottom: 0;
	width: auto;
	white-space: nowrap;
}

.ctbf--bar .ctbf__error {
	flex: 1 1 100%;
}

/* ----------------------------- guests -------------------------------- */

/**
 * The chevron matches the Type select's, so the control reads as openable
 * rather than as a pre-filled label.
 */
.ctbf__guests-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	text-align: left;
	cursor: pointer;
	appearance: none;
}

/**
 * The theme's `button:hover` is (0,1,1) and turns every bare button magenta,
 * so this needs two classes to win. The colour differs by layout: a stacked
 * form's toggle is a white control like the selects beside it, while the
 * bar's is drawn on the card and stays transparent.
 */
.ctbf .ctbf__guests-toggle:hover,
.ctbf .ctbf__guests-toggle:focus {
	color: var( --ctbf-forest );
	background-color: #fff;
}

.ctbf--bar .ctbf__guests-toggle:hover,
.ctbf--bar .ctbf__guests-toggle:focus {
	background-color: transparent;
}

.ctbf__guests-toggle::after {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 8px;
	background: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2322301A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) no-repeat center / 12px 8px;
	transition: transform 0.15s ease;
}

.ctbf__guests-toggle[aria-expanded="true"]::after {
	transform: rotate( 180deg );
}

.ctbf--bar .ctbf__guests-toggle::after {
	width: 10px;
	height: 7px;
	background-size: 10px 7px;
}

/**
 * The panel escapes the bar, so it has to out-stack whatever Elementor paints
 * after it. The open field and the widget root are lifted too, because
 * raising only the panel is not enough once an ancestor forms its own
 * stacking context.
 */
.ctbf--panel-open {
	position: relative;
	z-index: 900;
}

.ctbf__field.is-open {
	z-index: 901;
}

.ctbf__guests-panel {
	position: absolute;
	z-index: 902;
	top: calc( 100% + 8px );
	left: 0;
	min-width: 260px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid color-mix( in srgb, var( --ctbf-sand ) 70%, var( --ctbf-forest ) );
	border-radius: 14px;
	box-shadow: 0 12px 28px rgba( 34, 48, 26, 0.18 );
}

.ctbf__stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 7px 0;
}

.ctbf__stepper-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: var( --ctbf-heading );
}

.ctbf__stepper-controls {
	display: flex;
	align-items: center;
	gap: 6px;
}

/**
 * Scoped with `.ctbf` to reach (0,2,0). The theme carries a Bootstrap-style
 * rule, `button:focus, button:hover { background: #CC3366 }` at (0,1,1),
 * which out-specifies a single class and turned these magenta on hover. The
 * same rule set `padding: 8px 16px`, which with `box-sizing: border-box` left
 * a 32px circle no content width at all and pushed the glyphs out of place.
 */
.ctbf .ctbf__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	font-family: inherit;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1;
	color: var( --ctbf-forest );
	background-color: var( --ctbf-sand );
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ctbf .ctbf__step:hover,
.ctbf .ctbf__step:focus {
	color: var( --ctbf-forest );
	background-color: color-mix( in srgb, var( --ctbf-sand ) 70%, var( --ctbf-forest ) );
}

.ctbf .ctbf__step:focus-visible {
	outline: none;
}

.ctbf-kb .ctbf .ctbf__step:focus-visible {
	outline: 2px solid var( --ctbf-primary );
	outline-offset: 2px;
}

.ctbf .ctbf__step:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.ctbf .ctbf__step-value {
	display: inline-block;
	min-width: 26px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var( --ctbf-heading );
}

/* --------------------------------------------------------------------- */
/* Hero bar, responsive                                                   */
/* --------------------------------------------------------------------- */

/**
 * Tablet: two per row, so the bar keeps some horizontal character rather than
 * jumping straight to a tall stack. Arrive/Depart pair up, Guests/Type pair
 * up, and the button takes its own full-width row.
 */
@media ( max-width: 1024px ) {
	/* The generic <900px rule switches forms to a column; the bar wraps in a
	   row instead, so it has to re-assert its direction and alignment. */
	.ctbf--bar .ctbf__form {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.ctbf--bar .ctbf__field,
	.ctbf--bar .ctbf__field--type,
	.ctbf--bar .ctbf__field--date,
	.ctbf--bar .ctbf__field--guests {
		flex: 1 1 calc( 50% - 5px );
	}

	.ctbf--bar .ctbf__field--submit {
		flex: 1 1 100%;
	}

	.ctbf--bar .ctbf__button {
		width: 100%;
	}
}

@media ( max-width: 640px ) {
	.ctbf__party {
		gap: 8px;
	}

	.ctbf__field--party .ctbf__label {
		font-size: 0.68rem;
		letter-spacing: 0.02em;
	}
}

/* Phone: one field per row. */
@media ( max-width: 640px ) {
	.ctbf--bar .ctbf__form {
		gap: 8px;
	}

	.ctbf--bar .ctbf__field,
	.ctbf--bar .ctbf__field--type,
	.ctbf--bar .ctbf__field--date,
	.ctbf--bar .ctbf__field--guests {
		flex: 1 1 100%;
	}
}

/**
 * The guests panel is absolutely positioned, so on a narrow screen it has to
 * be pinned to both edges of its field or it overflows the viewport and the
 * page scrolls sideways.
 */
@media ( max-width: 640px ) {
	.ctbf__guests-panel {
		left: 0;
		right: 0;
		min-width: 0;
	}
}

/* --------------------------------------------------------------------- */
/* Hero fields, stacked: the landing-page sidebar                         */
/* --------------------------------------------------------------------- */

/**
 * `[ctbf_search layout="stacked"]`: the full Type list, dates and guests in
 * a narrow column, matching the camping and touring sidebars.
 *
 * Almost nothing is needed here, which is the point of splitting `ctbf--bar`
 * off `ctbf--hero`, because the fields already inherit the shared styling.
 * Only the guests panel needs saying, because it is the one part of the hero
 * bar with no equivalent in the preset forms.
 */
.ctbf--stacked .ctbf__guests-panel {
	left: 0;
	right: 0;
	min-width: 0;
}