/*
 * Pro layouts of Core's search bar. Colours, corners and fonts are Core's design tokens (--cnwsbooking-*); the wrapper of
 * every layout has the class cnwsbooking-tokens, so the tokens also reach the window and the button.
 */
.cnwsbt-search__panel {
	margin-top: var(--cnwsbooking-gap, 1rem);
}

.cnwsbt-search__panel[hidden] {
	display: none;
}

/* The window over the page holds Core's form, which keeps its own card look. */
.cnwsbt-search__dialog {
	box-sizing: border-box;
	width: min(44rem, calc(100vw - 2rem));
	max-height: calc(100dvh - 2rem);
	margin: auto;
	padding: 2.75rem 0.75rem 0.75rem;
	border: 0;
	border-radius: var(--cnwsbooking-radius, 10px);
	background: var(--cnwsbooking-surface-alt, #f4f6f8);
	color: var(--cnwsbooking-text, #1d2327);
	overflow: auto;
}

.cnwsbt-search__dialog::backdrop {
	background: rgba(0, 0, 0, 0.45);
}

.cnwsbt-search__dialog .cnwsbooking-form {
	max-width: none;
}

/* Themes often style every button; the close button resets what a theme may add. */
.cnwsbt-search__dialog button.cnwsbt-search__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: grid;
	width: 2.25rem;
	height: 2.25rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	place-items: center;
	border: 1px solid var(--cnwsbooking-border, #d5dae0);
	border-radius: 50%;
	background: var(--cnwsbooking-surface, #ffffff);
	box-shadow: none;
	color: var(--cnwsbooking-text, #1d2327);
	font: inherit;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.cnwsbt-search__dialog button.cnwsbt-search__close:focus-visible {
	outline: none;
	box-shadow: var(--cnwsbooking-focus, 0 0 0 3px rgba(0, 0, 0, 0.2));
}

/* The button layout: one button that opens the window, for a header or a front page. */
.cnwsbt-search[data-cnwsbt-layout="button"] {
	display: inline-block;
}

.cnwsbt-search a.cnwsbt-search__open {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.5rem;
	border: 1px solid var(--cnwsbooking-primary, #2b5f75);
	border-radius: var(--cnwsbooking-radius-small, 6px);
	background: var(--cnwsbooking-primary, #2b5f75);
	color: var(--cnwsbooking-on-primary, #ffffff);
	font-family: var(--cnwsbooking-font-family, inherit);
	font-weight: 600;
	text-decoration: none;
}

.cnwsbt-search a.cnwsbt-search__open:hover {
	border-color: var(--cnwsbooking-accent, #d9822b);
	background: var(--cnwsbooking-accent, #d9822b);
	color: var(--cnwsbooking-on-primary, #ffffff);
}

.cnwsbt-search a.cnwsbt-search__open:focus-visible {
	outline: none;
	box-shadow: var(--cnwsbooking-focus, 0 0 0 3px rgba(0, 0, 0, 0.2));
}

@media (max-width: 600px) {
	.cnwsbt-search__dialog {
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}
}