/**
 * YesRevenue Direct Booking.
 *
 * Every colour, radius and shadow is a custom property on .yrdb, so a site
 * restyles the whole thing by redefining a handful of tokens rather than
 * fighting specificity. Unset tokens fall back to the theme's palette
 * (Blocksy, Kadence, Astra, GeneratePress, block themes, Elementor), so an
 * untouched install already looks like the site it sits in.
 *
 * Two colour roles, kept apart so a bright button colour never ends up as
 * hard-to-read text:
 *   --yrdb-accent   button backgrounds (with --yrdb-accent-fg as their text)
 *   --yrdb-link     text links, the nights count, focus rings
 *
 *   .yrdb { --yrdb-accent: #E8A33D; --yrdb-accent-fg: #1A2620; --yrdb-link: #2E5B45; }
 *
 * Since 0.3 the colour, corner, shadow, font and size tokens are also set
 * from YesRevenue Direct Booking > Settings > Look and behaviour, printed
 * after this file.
 *
 * Sizes are in em, measured from one root size per widget:
 *   --yrdb-scale       text size multiplier (1 = the site's root size)
 *   --yrdb-media-ratio photo shape on the cards (4 / 3)
 *   --yrdb-card-min    narrowest card before the grid drops a column (300px)
 *
 * Mobile first. Inputs are 16px so iOS never zooms, and every control is at
 * least 44px tall.
 */

.yrdb {
	--yrdb-gap: 1em;
	--yrdb-radius: 12px;
	--yrdb-radius-sm: 8px;
	/* "Theme colours": the palette of whichever theme is active, in this
	   order: Blocksy, Kadence, Astra, GeneratePress, a block theme's
	   theme.json, an Elementor kit; else the plugin's own neutral colours.
	   A colour set chosen in Settings replaces all of them. */
	--yrdb-fg: var(--theme-palette-color-3, var(--global-palette4, var(--ast-global-color-3, var(--contrast, var(--wp--preset--color--contrast, var(--e-global-color-text, #1f2a24))))));
	--yrdb-heading: var(--theme-palette-color-4, var(--global-palette3, var(--ast-global-color-2, var(--contrast, var(--wp--preset--color--contrast, #14201a)))));
	--yrdb-muted: #5c6862;
	--yrdb-bg: var(--theme-palette-color-8, var(--global-palette9, var(--ast-global-color-5, var(--base-3, var(--wp--preset--color--base, #fff)))));
	--yrdb-surface: var(--theme-palette-color-7, var(--global-palette8, var(--ast-global-color-4, var(--base-2, var(--wp--preset--color--base-2, #f5f7f5)))));
	--yrdb-border: var(--theme-palette-color-5, var(--global-palette7, var(--ast-global-color-6, var(--base, #dfe4e1))));
	--yrdb-accent: var(--theme-palette-color-1, var(--global-palette1, var(--ast-global-color-0, var(--accent, var(--wp--preset--color--primary, var(--wp--preset--color--accent-1, var(--e-global-color-primary, #2e5b45)))))));
	--yrdb-accent-fg: #fff;
	--yrdb-link: var(--theme-link-initial-color, var(--yrdb-accent));
	--yrdb-ok: #2e7d4f;
	--yrdb-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .07);
	--yrdb-tap: 44px;
	color: var(--yrdb-fg);
	box-sizing: border-box;
	font-size: calc(var(--yrdb-scale, 1) * 1rem);
}

/* One root size per widget: nested .yrdb elements never scale twice. */
.yrdb .yrdb {
	font-size: 1em;
}

.yrdb *,
.yrdb *::before,
.yrdb *::after {
	box-sizing: inherit;
}

.yrdb [hidden] {
	display: none !important;
}

.yrdb :focus-visible {
	outline: 2px solid var(--yrdb-link);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- fields */

.yrdb-field {
	display: flex;
	flex-direction: column;
	gap: .3em;
	min-width: 0;
	margin: 0;
}

.yrdb-label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: .5em;
	font-size: .8em;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--yrdb-muted);
}

.yrdb-nights {
	font-weight: 500;
	color: var(--yrdb-link);
	white-space: nowrap;
}

.yrdb-field input,
.yrdb-field select {
	width: 100%;
	min-height: var(--yrdb-tap);
	padding: .55em .7em;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-bg);
	color: inherit;
	font: inherit;
	font-size: 16px;
	line-height: 1.2;
}

.yrdb-field input:focus,
.yrdb-field select:focus {
	border-color: var(--yrdb-link);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--yrdb-link) 22%, transparent);
}

/* ------------------------------------------------------------------ bar */

/*
 * The bar sizes itself to the space it is given, not to the screen: the same
 * shortcode can sit in a full-width hero, a narrow content column or a
 * sidebar. Container queries decide the layout.
 */
.yrdb-bar-wrap {
	container-type: inline-size;
	width: 100%;
}

.yrdb-bar {
	display: grid;
	grid-template-columns: 1fr;
	gap: .75em;
	padding: 1em;
	background: var(--yrdb-bg);
	border-radius: var(--yrdb-radius);
	box-shadow: var(--yrdb-shadow);
	text-align: left;
}

.yrdb-bar-dates,
.yrdb-bar-guests {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: .75em;
}

.yrdb-bar-code {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .4em;
}

.yrdb-bar-code .yrdb-field {
	width: 100%;
	max-width: 18em;
}

.yrdb-bar-submit {
	width: 100%;
}

/* Tablet-wide space: dates and guests side by side, button below. */
@container (min-width: 560px) {
	.yrdb-bar--row {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		padding: 1em 1.25em;
	}

	.yrdb-bar--row .yrdb-bar-code,
	.yrdb-bar--row .yrdb-bar-submit {
		grid-column: 1 / -1;
	}
}

/* Hero-wide space: one row, the button at the end. */
@container (min-width: 860px) {
	.yrdb-bar--row {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) auto;
		align-items: end;
	}

	.yrdb-bar--row .yrdb-bar-submit {
		grid-column: auto;
		width: auto;
		padding-left: 1.6em;
		padding-right: 1.6em;
	}

	.yrdb-bar--row .yrdb-bar-code {
		order: 5;
		flex-direction: row;
		align-items: flex-end;
	}
}

/* -------------------------------------------------------------- buttons */

.yrdb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--yrdb-tap);
	padding: .6em 1.15em;
	border: 1px solid transparent;
	border-radius: var(--yrdb-radius-sm);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease, background-color .15s ease;
}

.yrdb-btn-primary,
.yrdb-btn-primary:visited {
	background: var(--yrdb-accent);
	color: var(--yrdb-accent-fg);
}

.yrdb-btn-primary:hover,
.yrdb-btn-primary:focus-visible {
	filter: brightness(.94);
	color: var(--yrdb-accent-fg);
}

.yrdb-btn-quiet,
.yrdb-btn-quiet:visited {
	background: transparent;
	border-color: var(--yrdb-border);
	color: var(--yrdb-fg);
	font-weight: 600;
}

.yrdb-btn-quiet:hover {
	border-color: var(--yrdb-accent);
	color: var(--yrdb-fg);
}

.yrdb-linkbtn,
.yrdb-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--yrdb-link);
	font: inherit;
	font-size: .9em;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	min-height: 0;
}

.yrdb-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}

/* -------------------------------------------------------------- filters */

.yrdb-units > .yrdb-bar-wrap {
	margin-bottom: 1.25em;
}

.yrdb-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	align-items: flex-end;
	margin: 0 0 .5em;
	padding: .75em 0;
	border-bottom: 1px solid var(--yrdb-border);
}

.yrdb-filter {
	display: flex;
	flex-direction: column;
	gap: .3em;
	font-size: .85em;
}

.yrdb-filter > span {
	color: var(--yrdb-muted);
}

.yrdb-filter select {
	min-height: 40px;
	padding: .35em .5em;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-bg);
	font: inherit;
	min-width: 8em;
}

.yrdb-filter input[type="range"] {
	accent-color: var(--yrdb-accent);
	min-width: 10em;
}

.yrdb-filter input[type="range"]:disabled {
	opacity: .4;
}

.yrdb-check {
	flex-direction: row;
	align-items: center;
	gap: .45em;
	min-height: 40px;
}

.yrdb-amenities {
	display: flex;
	flex-wrap: wrap;
	gap: .4em;
	flex-basis: 100%;
}

.yrdb-chip {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	min-height: 36px;
	padding: .3em .75em;
	border: 1px solid var(--yrdb-border);
	border-radius: 999px;
	font-size: .85em;
	cursor: pointer;
	user-select: none;
}

.yrdb-chip:has(input:checked) {
	border-color: var(--yrdb-accent);
	background: color-mix(in srgb, var(--yrdb-accent) 12%, transparent);
}

.yrdb-chip input {
	margin: 0;
}

/* --------------------------------------------------------------- status */

.yrdb-status {
	min-height: 1.4em;
	margin: .5em 0 1em;
	font-size: .9em;
	color: var(--yrdb-muted);
}

.yrdb-status.is-busy::after {
	content: "";
	display: inline-block;
	width: .8em;
	height: .8em;
	margin-left: .5em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: yrdb-spin .7s linear infinite;
	vertical-align: -.1em;
}

@keyframes yrdb-spin {
	to {
		transform: rotate(360deg);
	}
}

.yrdb-empty {
	margin: 0 0 1.25em;
	padding: 1em 1.25em;
	border-radius: var(--yrdb-radius);
	background: var(--yrdb-surface);
}

.yrdb-empty p {
	margin: 0 0 .6em;
}

.yrdb-empty-title {
	font-weight: 700;
	color: var(--yrdb-heading);
}

/* ---------------------------------------------------------------- cards */

.yrdb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--yrdb-card-min, 300px)), 1fr));
	gap: 1.25em;
}

.yrdb.is-loading .yrdb-grid {
	opacity: .6;
	pointer-events: none;
	transition: opacity .2s ease;
}

.yrdb-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius);
	background: var(--yrdb-bg);
	overflow: hidden;
	box-shadow: var(--yrdb-shadow);
	scroll-margin-top: 6rem;
}

.yrdb-card.is-unavailable .yrdb-media-wrap,
.yrdb-card.is-unavailable .yrdb-card-title {
	opacity: .6;
}

.yrdb-card:target {
	outline: 2px solid var(--yrdb-link);
	outline-offset: 2px;
}

.yrdb-media-wrap {
	position: relative;
	aspect-ratio: var(--yrdb-media-ratio, 4 / 3);
	/* Without it one portrait photo makes the strip's min-content height
	   beat the aspect ratio, and the whole photo area grows tall. */
	min-height: 0;
	background: var(--yrdb-surface);
}

.yrdb-media {
	display: flex;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.yrdb-media::-webkit-scrollbar {
	display: none;
}

.yrdb-media img,
.yrdb-media-img {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	scroll-snap-align: start;
	display: block;
}

.yrdb-media-count {
	position: absolute;
	right: .6em;
	bottom: .6em;
	padding: .15em .5em;
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: .75em;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.yrdb-media-nav {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s ease;
}

.yrdb-media-nav::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-top: 2px solid #222;
	border-right: 2px solid #222;
}

.yrdb-media-prev {
	left: .5em;
}

.yrdb-media-prev::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}

.yrdb-media-next {
	right: .5em;
}

.yrdb-media-next::before {
	transform: translate(-70%, -50%) rotate(45deg);
}

.yrdb-media-wrap:hover .yrdb-media-nav,
.yrdb-media-nav:focus-visible {
	opacity: 1;
}

@media (hover: none) {
	.yrdb-media-nav {
		display: none;
	}
}

.yrdb-card-body {
	display: flex;
	flex-direction: column;
	gap: .55em;
	padding: 1em 1.1em 1.15em;
	flex: 1;
}

.yrdb-card-title {
	margin: 0;
	font-size: 1.15em;
	line-height: 1.3;
	color: var(--yrdb-heading);
}

.yrdb-card-title a {
	color: inherit;
	text-decoration: none;
}

.yrdb-card-teaser {
	margin: 0;
	font-size: .92em;
	color: var(--yrdb-muted);
}

.yrdb-facts {
	display: flex;
	flex-wrap: wrap;
	gap: .3em 1em;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .85em;
	color: var(--yrdb-muted);
}

.yrdb-price {
	display: flex;
	flex-direction: column;
	gap: .1em;
	min-height: 3.6em;
	margin-top: auto;
	padding-top: .35em;
}

.yrdb-price-idle,
.yrdb-price-none {
	font-size: .9em;
	color: var(--yrdb-muted);
}

.yrdb-price-none {
	font-weight: 600;
	color: var(--yrdb-fg);
}

.yrdb-price-label {
	font-size: .8em;
	font-weight: 600;
	color: var(--yrdb-muted);
}

.yrdb-price-total {
	font-size: 1.4em;
	font-weight: 800;
	line-height: 1.15;
	color: var(--yrdb-heading);
	font-variant-numeric: tabular-nums;
}

.yrdb-price-meta {
	font-size: .85em;
	color: var(--yrdb-muted);
}

.yrdb-price-note {
	font-size: .78em;
	line-height: 1.35;
	color: var(--yrdb-muted);
}

.yrdb-price-note.is-code {
	font-weight: 600;
	color: var(--yrdb-link);
}

.yrdb-price-note.is-terms {
	color: var(--yrdb-fg);
}

.yrdb-price-note.is-nonref {
	font-weight: 600;
	color: var(--yrdb-fg);
}

/* Cards: the rate behind the total, then any other rate in one line. */
.yrdb-price-rate {
	font-size: .8em;
	line-height: 1.35;
	color: var(--yrdb-muted);
}

.yrdb-price-rate strong {
	font-weight: 700;
	color: var(--yrdb-fg);
}

.yrdb-price-alt {
	margin-top: .1em;
	color: var(--yrdb-fg);
}

/* Checkout: every rate that sells the dates, the lowest first. */
.yrdb-rates {
	display: flex;
	flex-direction: column;
	gap: .5em;
	margin: .2em 0 .3em;
	padding: 0;
	list-style: none;
}

.yrdb-rate {
	display: flex;
	flex-direction: column;
	gap: .15em;
	margin: 0;
	padding: .6em .8em;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-bg);
}

.yrdb-rate.is-best {
	border-color: var(--yrdb-accent);
	box-shadow: inset 3px 0 0 var(--yrdb-accent);
}

.yrdb-rate-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .2em .8em;
}

.yrdb-rate-name {
	font-weight: 700;
	color: var(--yrdb-heading);
}

.yrdb-rate .yrdb-price-total {
	font-size: 1.25em;
}

.yrdb-rate-terms {
	font-size: .8em;
	line-height: 1.35;
	color: var(--yrdb-muted);
}

.yrdb-rate.is-nonref .yrdb-rate-terms {
	color: var(--yrdb-fg);
}

.yrdb-code-tag {
	font-weight: 700;
	letter-spacing: .02em;
}

.yrdb-issues {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .3em;
	font-size: .85em;
	color: var(--yrdb-muted);
}

.yrdb-issue {
	margin: 0;
}

.yrdb-issues .yrdb-linkbtn {
	font-size: 1em;
}

.yrdb-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin-top: .25em;
}

.yrdb-card-actions .yrdb-btn-primary {
	flex: 1 1 auto;
}

@media (min-width: 700px) {
	.yrdb-card-actions .yrdb-btn-primary {
		flex: 0 0 auto;
	}
}

.yrdb-more {
	margin-top: .35em;
	border-top: 1px solid var(--yrdb-border);
	padding-top: .55em;
}

.yrdb-more > summary {
	min-height: var(--yrdb-tap);
	display: flex;
	align-items: center;
	font-weight: 600;
	cursor: pointer;
	color: var(--yrdb-link);
}

.yrdb-more-body {
	font-size: .95em;
}

.yrdb-more-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--yrdb-radius-sm);
}

/* ------------------------------------------------------------- checkout */

.yrdb-checkout {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
}

/* With the PMS's form in a frame: the stay and the form side by side when the
   page's content area is wide enough (measured on the checkout itself, not the
   screen, as themes differ). Bentral's form is a fixed 250px column, so it
   gets a narrow column of its own rather than a wide frame with empty space
   beside it. */
.yrdb-checkout.has-frame {
	display: block;
	container-type: inline-size;
}

.yrdb-co-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5em;
	align-items: start;
}

.yrdb-co-main {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
	min-width: 0;
	container-type: inline-size;
}

@container (min-width: 700px) {
	.yrdb-co-grid {
		grid-template-columns: minmax(0, 1fr) var(--yrdb-frame-w, 292px);
		gap: 2em;
	}

	.yrdb-co-grid > .yrdb-co-main {
		position: sticky;
		top: var(--yrdb-sticky-top, 1.5em);
	}

	.yrdb-co-grid > .yrdb-frame {
		margin: 0;
	}
}

.yrdb-checkout.is-closed .yrdb-co-grid {
	grid-template-columns: minmax(0, 1fr);
}

.yrdb-checkout.is-closed .yrdb-frame {
	display: none;
}

.yrdb-summary {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
	padding: 1em;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius);
	background: var(--yrdb-bg);
	box-shadow: var(--yrdb-shadow);
}

.yrdb-summary-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--yrdb-radius-sm);
}

@container (min-width: 560px) {
	.yrdb-summary {
		grid-template-columns: minmax(200px, 42%) 1fr;
		align-items: start;
	}

	/* A unit without photos: the stay takes the whole card. */
	.yrdb-summary > .yrdb-summary-body:first-child {
		grid-column: 1 / -1;
	}

	.yrdb-summary-media img {
		aspect-ratio: 4 / 3;
	}
}

.yrdb-summary-body p {
	margin: 0 0 .45em;
}

.yrdb-summary-title {
	margin: 0 0 .4em;
	font-size: 1.3em;
	line-height: 1.25;
	color: var(--yrdb-heading);
}

.yrdb-summary-nights {
	display: inline-block;
	margin-left: .4em;
	padding: .05em .5em;
	border-radius: 999px;
	background: var(--yrdb-surface);
	font-size: .85em;
}

.yrdb-summary-party {
	color: var(--yrdb-muted);
}

.yrdb-summary-facts {
	margin: 0 0 .6em;
}

.yrdb-co-help {
	margin: 0;
	padding: 0 .25em;
	color: var(--yrdb-muted);
}

.yrdb-summary-price {
	display: flex;
	flex-direction: column;
	gap: .1em;
	min-height: 3.2em;
	margin: .3em 0 .6em;
}

.yrdb-issues--box {
	padding: .85em 1em;
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-surface);
	color: var(--yrdb-fg);
}

.yrdb-issue--lead {
	font-weight: 700;
}

/* The PMS's form: a card holding the frame. Its height follows the form
   (Bentral reports it), so the page scrolls instead of the frame. */
.yrdb-frame {
	width: 100%;
	max-width: var(--yrdb-frame-w, 292px);
	margin: 0 auto;
	padding: .5em;
	box-sizing: border-box;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius);
	background: #fff;
	box-shadow: var(--yrdb-shadow);
	scroll-margin-top: 1em;
}

.yrdb-frame iframe {
	display: block;
	width: 100%;
	height: var(--yrdb-frame-h-mobile, 1100px);
	border: 0;
	background: #fff;
	transition: height .15s ease;
}

@media (min-width: 700px) {
	.yrdb-frame iframe {
		height: var(--yrdb-frame-h, 900px);
	}
}

.yrdb-frame iframe[data-sized] {
	height: var(--yrdb-frame-auto);
}

.yrdb-checkout-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
}

.yrdb-checkout--empty {
	padding: 1.25em;
	border-radius: var(--yrdb-radius);
	background: var(--yrdb-surface);
}

/* -------------------------------------------------------- selling (0.6) */

.yrdb-icon {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	color: var(--yrdb-link);
}

/* Book direct and the property's perks: a calm row of ticks. */
.yrdb-perks {
	display: flex;
	flex-wrap: wrap;
	gap: .45em 1.25em;
	margin: 0 0 1.25em;
	padding: 0;
	list-style: none;
	font-size: .92em;
}

.yrdb-perks li {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	margin: 0;
}

.yrdb-co-main .yrdb-perks {
	margin: 0;
	padding: .2em .25em;
}

/* Long stays and groups: an invitation, never a block. */
.yrdb-nudge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6em 1em;
	margin: 0 0 1.25em;
	padding: .75em 1em;
	border: 1px solid var(--yrdb-border);
	border-left: 4px solid var(--yrdb-accent);
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-bg);
}

.yrdb-co-main .yrdb-nudge {
	margin: 0;
}

.yrdb-nearby-title {
	margin: .2em 0 .45em;
	font-weight: 600;
}

.yrdb-nearby-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin: 0 0 .8em;
}

.yrdb-price-note.is-hint {
	font-weight: 600;
	color: var(--yrdb-fg);
}

.yrdb-copy {
	font-size: inherit;
}

/* Extras on the checkout, with the PMS's live price where it sells one. */
.yrdb-extras {
	padding: .9em 1em;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius);
	background: var(--yrdb-bg);
}

.yrdb-extras-title,
.yrdb-upgrades-title {
	margin: 0 0 .6em;
	font-size: 1em;
	color: var(--yrdb-heading);
}

.yrdb-extras-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14em), 1fr));
	gap: .5em 1.25em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yrdb-extra {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0;
	font-size: .92em;
}

.yrdb-extra-price {
	margin-left: auto;
	font-size: .9em;
	color: var(--yrdb-muted);
	text-align: right;
}

.yrdb-extras-note {
	margin: .7em 0 0;
	font-size: .82em;
	color: var(--yrdb-muted);
}

/* Upgrade suggestions, right below the price: what the bigger unit adds
   (only what this one lacks), then the difference. Calm: a light tint of
   the site's link colour, no badges. */
.yrdb-upgrades {
	display: flex;
	flex-direction: column;
	gap: .6em;
	container-type: inline-size;
}

/* Narrow: photo and name, then what it adds and the price the full width,
   then the button. */
.yrdb-upgrade {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"img name"
		"body body"
		"btn btn";
	align-items: center;
	gap: .6em .8em;
	padding: .75em;
	border: 1px solid var(--yrdb-border);
	border-color: color-mix(in srgb, var(--yrdb-link) 30%, var(--yrdb-border));
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-surface);
	background: color-mix(in srgb, var(--yrdb-link) 4%, var(--yrdb-bg));
}

.yrdb-upgrade.no-img {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"name"
		"body"
		"btn";
}

.yrdb-upgrade-img {
	grid-area: img;
	width: 4.2em;
	height: 3.2em;
	object-fit: cover;
	border-radius: calc(var(--yrdb-radius-sm) * .75);
}

.yrdb-upgrade-name {
	grid-area: name;
	margin: 0;
	font-weight: 600;
	color: var(--yrdb-heading);
}

.yrdb-upgrade-body {
	grid-area: body;
	min-width: 0;
}

.yrdb-gains {
	display: flex;
	flex-wrap: wrap;
	gap: .3em;
	margin: 0 0 .5em;
	padding: 0;
	font-size: .8em;
	list-style: none;
}

.yrdb-gain {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	max-width: 100%;
	margin: 0;
	padding: .2em .6em .2em .5em;
	border-radius: 1em;
	background: var(--yrdb-surface);
	background: color-mix(in srgb, var(--yrdb-link) 11%, var(--yrdb-bg));
	color: var(--yrdb-heading);
	line-height: 1.4;
}

/* A small tick drawn with two borders: no icon font, no image. */
.yrdb-gain::before {
	content: "";
	flex: 0 0 auto;
	width: .6em;
	height: .3em;
	margin-top: -.2em;
	border-left: 2px solid var(--yrdb-link);
	border-bottom: 2px solid var(--yrdb-link);
	transform: rotate(-45deg);
}

.yrdb-upgrade-price {
	margin: .2em 0 0;
	font-size: .88em;
	color: var(--yrdb-muted);
}

.yrdb-upgrade-price strong {
	font-weight: 600;
	color: var(--yrdb-heading);
}

.yrdb-upgrade .yrdb-btn {
	grid-area: btn;
	justify-self: end;
}

/* Wide: photo, then name over what it adds and the price, then the button. */
@container (min-width: 520px) {
	.yrdb-upgrade {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"img name btn"
			"img body btn";
		align-items: start;
		gap: .45em .9em;
	}

	.yrdb-upgrade.no-img {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name btn"
			"body btn";
	}

	.yrdb-upgrade-img {
		width: 5.5em;
		height: 4.2em;
	}

	.yrdb-upgrade .yrdb-btn {
		align-self: center;
	}
}

/* Phones: price and a way to the form stay in sight until the form is. */
.yrdb-sticky {
	position: fixed;
	z-index: 9990;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: .65em max(1em, env(safe-area-inset-right)) calc(.65em + env(safe-area-inset-bottom)) max(1em, env(safe-area-inset-left));
	border-top: 1px solid var(--yrdb-border);
	background: var(--yrdb-bg);
	box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
}

.yrdb-sticky[hidden] {
	display: none;
}

.yrdb-sticky-total {
	font-size: 1.15em;
	font-weight: 800;
	color: var(--yrdb-heading);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ inquiry */

.yrdb-inq {
	width: min(36em, calc(100vw - 2em));
	max-height: calc(100dvh - 2em);
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: var(--yrdb-radius);
	background: var(--yrdb-bg);
	color: var(--yrdb-fg);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.yrdb-inq::backdrop {
	background: rgba(15, 20, 18, .55);
}

/* Browsers without <dialog>: the same, as a fixed layer. */
div.yrdb-inq {
	position: fixed;
	z-index: 100000;
	inset: 1em;
	height: fit-content;
}

div.yrdb-inq[hidden] {
	display: none;
}

html.yrdb-inq-lock {
	overflow: hidden;
}

.yrdb-inq-box {
	padding: 1.1em 1.25em 1.25em;
}

.yrdb-inq-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1em;
}

.yrdb-inq-title {
	margin: 0 0 .3em;
	font-size: 1.3em;
	line-height: 1.25;
	color: var(--yrdb-heading);
}

.yrdb-inq-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--yrdb-tap);
	height: var(--yrdb-tap);
	margin: -.5em -.6em 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--yrdb-fg);
	cursor: pointer;
}

.yrdb-inq-close:hover {
	background: var(--yrdb-surface);
}

.yrdb-inq-about {
	margin: 0 0 .9em;
	color: var(--yrdb-muted);
}

.yrdb-inq-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75em;
}

.yrdb-inq-grid .yrdb-inq-name,
.yrdb-inq-grid .yrdb-inq-email,
.yrdb-inq-grid .yrdb-inq-wide {
	grid-column: 1 / -1;
}

@media (min-width: 560px) {
	.yrdb-inq-grid .yrdb-inq-name,
	.yrdb-inq-grid .yrdb-inq-email {
		grid-column: auto;
	}
}

.yrdb-inq-grid textarea {
	width: 100%;
	min-height: 6em;
	padding: .55em .7em;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-bg);
	color: inherit;
	font: inherit;
	font-size: 16px;
	resize: vertical;
}

.yrdb-inq-grid textarea:focus {
	border-color: var(--yrdb-link);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--yrdb-link) 22%, transparent);
}

/* For bots only. */
.yrdb-inq-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.yrdb-inq-privacy {
	margin: .9em 0 0;
	font-size: .82em;
	color: var(--yrdb-muted);
}

.yrdb-inq-error {
	margin: .7em 0 0;
	padding: .55em .75em;
	border-radius: var(--yrdb-radius-sm);
	background: color-mix(in srgb, #c0392b 10%, var(--yrdb-bg));
	color: var(--yrdb-fg);
}

.yrdb-inq-actions {
	margin: 1em 0 0;
}

.yrdb-inq-actions .yrdb-btn {
	width: 100%;
}

.yrdb-inq-thanks {
	margin: .2em 0 1em;
	font-size: 1.05em;
}

.yrdb-inq-inline .yrdb-inq-box {
	padding: 0;
}

@media (prefers-reduced-motion: reduce) {
	.yrdb *,
	.yrdb *::before,
	.yrdb *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------ calendar */

/*
 * The date fields of the bar become buttons that open one range calendar.
 * Colours come from the bar's tokens: --yrdb-link marks the chosen dates,
 * --yrdb-surface the hover, a light mix of --yrdb-link the nights between.
 */

.yrdb-field .yrdb-date {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5em;
	width: 100%;
	min-height: var(--yrdb-tap);
	margin: 0;
	padding: .55em .7em;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-bg);
	box-shadow: none;
	color: var(--yrdb-fg);
	font: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.yrdb-field .yrdb-date:hover {
	border-color: color-mix(in srgb, var(--yrdb-link) 45%, var(--yrdb-border));
	background: var(--yrdb-bg);
	color: var(--yrdb-fg);
}

.yrdb-field .yrdb-date:focus-visible,
.yrdb-field .yrdb-date.is-active {
	border-color: var(--yrdb-link);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--yrdb-link) 22%, transparent);
}

.yrdb-date-text {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.yrdb-date-icon {
	flex: none;
	color: var(--yrdb-link);
}

.yrdb-cal {
	--yrdb-cal-band: color-mix(in srgb, var(--yrdb-link) 14%, var(--yrdb-bg));
	--yrdb-cal-cell: 2.6em;
	position: fixed;
	z-index: 100000;
	width: max-content;
	max-width: calc(100vw - 16px);
	padding: 1em 1.1em .85em;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius);
	background: var(--yrdb-bg);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 18px 48px rgba(0, 0, 0, .16);
	color: var(--yrdb-fg);
	line-height: 1.3;
	text-align: left;
	animation: yrdb-cal-in .14s ease-out;
}

.yrdb-cal[hidden],
.yrdb-cal-shade[hidden] {
	display: none !important;
}

.yrdb-cal.is-above {
	animation-name: yrdb-cal-in-up;
}

.yrdb-cal.is-preview {
	--yrdb-cal-band: color-mix(in srgb, var(--yrdb-link) 8%, var(--yrdb-bg));
}

@keyframes yrdb-cal-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

@keyframes yrdb-cal-in-up {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
}

.yrdb-cal p {
	margin: 0;
}

.yrdb-cal-head {
	display: none;
}

.yrdb-cal-body {
	position: relative;
}

.yrdb-cal-months {
	display: grid;
	grid-template-columns: repeat(var(--yrdb-cal-count, 1), calc(var(--yrdb-cal-cell) * 7));
	gap: 2.25em;
}

.yrdb-cal-title {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--yrdb-cal-cell);
	margin: 0 0 .35em;
	color: var(--yrdb-heading);
	font-weight: 700;
}

.yrdb-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	row-gap: 2px;
}

.yrdb-cal-wd {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2em;
	color: var(--yrdb-muted);
	font-size: .75em;
	font-weight: 600;
}

/* Theme button styles reset: a day is a plain number until it means something. */
.yrdb-cal .yrdb-cal-day {
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--yrdb-cal-cell);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--yrdb-fg);
	font: inherit;
	font-size: .95em;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.yrdb-cal .yrdb-cal-day::before,
.yrdb-cal .yrdb-cal-day::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

/* The nights between arrival and departure: one band. */
.yrdb-cal .yrdb-cal-day::before {
	top: 3px;
	bottom: 3px;
	left: 0;
	right: 0;
}

.yrdb-cal .yrdb-cal-day.is-in::before {
	background: var(--yrdb-cal-band);
}

.yrdb-cal .yrdb-cal-day.is-start.has-range::before {
	left: 50%;
	background: var(--yrdb-cal-band);
}

.yrdb-cal .yrdb-cal-day.is-end::before {
	right: 50%;
	background: var(--yrdb-cal-band);
}

/* The day itself: a circle on hover, filled for arrival and departure. */
.yrdb-cal .yrdb-cal-day::after {
	top: 50%;
	left: 50%;
	width: calc(var(--yrdb-cal-cell) - 6px);
	height: calc(var(--yrdb-cal-cell) - 6px);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: background-color .12s ease;
}

.yrdb-cal .yrdb-cal-day:hover:not(.is-off):not(.is-start):not(.is-end)::after {
	background: var(--yrdb-surface);
}

.yrdb-cal .yrdb-cal-day.is-start,
.yrdb-cal .yrdb-cal-day.is-end {
	color: #fff;
	font-weight: 700;
}

.yrdb-cal .yrdb-cal-day.is-start::after,
.yrdb-cal .yrdb-cal-day.is-end::after {
	background: var(--yrdb-link);
}

/* While choosing: the departure under the pointer is outlined, not filled. */
.yrdb-cal.is-preview .yrdb-cal-day.is-end {
	color: var(--yrdb-link);
}

.yrdb-cal.is-preview .yrdb-cal-day.is-end::after {
	background: var(--yrdb-bg);
	box-shadow: inset 0 0 0 2px var(--yrdb-link);
}

.yrdb-cal .yrdb-cal-day.is-today {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.yrdb-cal .yrdb-cal-day.is-off {
	color: var(--yrdb-muted);
	opacity: .38;
	cursor: default;
}

.yrdb-cal .yrdb-cal-day:focus-visible {
	outline: none;
}

.yrdb-cal .yrdb-cal-day:focus-visible::after {
	box-shadow: 0 0 0 2px var(--yrdb-link);
}

.yrdb-cal .yrdb-cal-day.is-start:focus-visible::after,
.yrdb-cal .yrdb-cal-day.is-end:focus-visible::after {
	box-shadow: 0 0 0 2px var(--yrdb-bg), 0 0 0 4px var(--yrdb-link);
}

.yrdb-cal-tip {
	position: absolute;
	bottom: calc(100% + 1px);
	left: 50%;
	z-index: 2;
	padding: .35em .6em;
	border-radius: 6px;
	background: var(--yrdb-heading);
	color: #fff;
	font-size: .78em;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transform: translateX(-50%);
	pointer-events: none;
}

.yrdb-cal-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -4px;
	border: 4px solid transparent;
	border-top-color: var(--yrdb-heading);
}

.yrdb-cal .yrdb-cal-nav {
	position: absolute;
	top: 0;
	z-index: 1;
	width: var(--yrdb-cal-cell);
	height: var(--yrdb-cal-cell);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: var(--yrdb-heading);
	cursor: pointer;
}

.yrdb-cal .yrdb-cal-nav::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.yrdb-cal .yrdb-cal-prev {
	left: -.3em;
}

.yrdb-cal .yrdb-cal-prev::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}

.yrdb-cal .yrdb-cal-next {
	right: -.3em;
}

.yrdb-cal .yrdb-cal-next::before {
	transform: translate(-70%, -50%) rotate(45deg);
}

.yrdb-cal .yrdb-cal-nav:hover:not(:disabled) {
	background: var(--yrdb-surface);
	color: var(--yrdb-heading);
}

.yrdb-cal .yrdb-cal-nav:disabled {
	opacity: .25;
	cursor: default;
}

.yrdb-cal-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .25em 1.25em;
	/* As wide as the months, never wider: long words wrap instead. */
	box-sizing: border-box;
	width: 0;
	min-width: 100%;
	margin-top: .6em;
	padding-top: .75em;
	border-top: 1px solid var(--yrdb-border);
	font-size: .875em;
}

.yrdb-cal-sum strong {
	color: var(--yrdb-heading);
	font-weight: 700;
}

.yrdb-cal-sep,
.yrdb-cal-open {
	color: var(--yrdb-muted);
}

.yrdb-cal-hint {
	color: var(--yrdb-muted);
}

/* ----------------------------------------------------- phones: a sheet */

.yrdb-cal-shade {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(12, 22, 16, .45);
	animation: yrdb-cal-fade .2s ease-out;
}

@keyframes yrdb-cal-fade {
	from {
		opacity: 0;
	}
}

html.yrdb-cal-lock,
html.yrdb-cal-lock body {
	overflow: hidden;
}

.yrdb-cal.is-sheet {
	--yrdb-cal-cell: 2.9em;
	top: auto !important;
	right: 0;
	bottom: 0;
	left: 0 !important;
	width: auto;
	max-width: none;
	max-height: 88vh;
	max-height: 88dvh;
	padding: 0 1em calc(1em + env(safe-area-inset-bottom, 0px));
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 0;
	border-radius: 18px 18px 0 0;
	animation: yrdb-cal-up .22s ease-out;
}

@keyframes yrdb-cal-up {
	from {
		opacity: .4;
		transform: translateY(32px);
	}
}

.yrdb-cal.is-sheet .yrdb-cal-head {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 -1em .5em;
	padding: .75em .5em .6em 1em;
	border-bottom: 1px solid var(--yrdb-border);
	background: var(--yrdb-bg);
}

.yrdb-cal-head-title {
	color: var(--yrdb-heading);
	font-weight: 700;
}

.yrdb-cal .yrdb-cal-x {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: var(--yrdb-fg);
	font: inherit;
	cursor: pointer;
}

.yrdb-cal .yrdb-cal-x span {
	font-size: 1.75em;
	line-height: 1;
}

.yrdb-cal .yrdb-cal-x:hover {
	background: var(--yrdb-surface);
	color: var(--yrdb-fg);
}

.yrdb-cal.is-sheet .yrdb-cal-months {
	grid-template-columns: minmax(0, 1fr);
}

/* Two fixed lines, so the sheet keeps its height while choosing. */
.yrdb-cal.is-sheet .yrdb-cal-foot {
	display: block;
	font-size: .95em;
}

.yrdb-cal.is-sheet .yrdb-cal-sum {
	min-height: 1.3em;
}

.yrdb-cal.is-sheet .yrdb-cal-hint {
	margin-top: .15em;
}

.yrdb-cal-pad {
	min-height: var(--yrdb-cal-cell);
}

/* Prices under the dates and booked days struck out (0.7.0): each day gets
   a second line, so the day shape becomes a rounded box. */
.yrdb-cal.has-prices {
	--yrdb-cal-row: calc(var(--yrdb-cal-cell) + .85em);
}

.yrdb-cal.has-prices .yrdb-cal-day {
	flex-direction: column;
	gap: .14em;
	height: var(--yrdb-cal-row);
}

.yrdb-cal.has-prices .yrdb-cal-day::after {
	height: calc(var(--yrdb-cal-row) - 6px);
	border-radius: min(12px, var(--yrdb-radius));
}

.yrdb-cal.has-prices .yrdb-cal-pad {
	min-height: var(--yrdb-cal-row);
}

.yrdb-cal .yrdb-cal-p {
	min-height: 1.1em;
	color: var(--yrdb-muted);
	font-size: .66em;
	font-weight: 500;
	line-height: 1.1;
	white-space: nowrap;
}

.yrdb-cal .yrdb-cal-day.is-start .yrdb-cal-p,
.yrdb-cal .yrdb-cal-day.is-end .yrdb-cal-p {
	color: inherit;
}

.yrdb-cal.is-preview .yrdb-cal-day.is-end .yrdb-cal-p {
	color: var(--yrdb-link);
}

.yrdb-cal.has-prices .yrdb-cal-day.is-today {
	text-decoration: none;
}

.yrdb-cal.has-prices .yrdb-cal-day.is-today .yrdb-cal-n {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.yrdb-cal .yrdb-cal-day.is-booked .yrdb-cal-n {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.yrdb-cal-legend {
	flex-basis: 100%;
	color: var(--yrdb-muted);
	font-size: .9em;
}

.yrdb-cal-legend[hidden] {
	display: none;
}

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

/*
 * Adults and Children become one Guests button that opens a panel with plus
 * and minus buttons; on phones the same bottom sheet as the calendar.
 */

.yrdb-field .yrdb-guests {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5em;
	width: 100%;
	min-height: var(--yrdb-tap);
	margin: 0;
	padding: .55em .7em;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-bg);
	box-shadow: none;
	color: var(--yrdb-fg);
	font: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.yrdb-field .yrdb-guests:hover {
	border-color: color-mix(in srgb, var(--yrdb-link) 45%, var(--yrdb-border));
	background: var(--yrdb-bg);
	color: var(--yrdb-fg);
}

.yrdb-field .yrdb-guests:focus-visible,
.yrdb-field .yrdb-guests.is-active {
	border-color: var(--yrdb-link);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--yrdb-link) 22%, transparent);
}

.yrdb-guests-text {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.yrdb-guests-icon {
	flex: none;
	color: var(--yrdb-link);
}

.yrdb-gpop {
	position: fixed;
	z-index: 100000;
	width: 19em;
	max-width: calc(100vw - 16px);
	padding: .35em 1.1em .9em;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius);
	background: var(--yrdb-bg);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 18px 48px rgba(0, 0, 0, .16);
	color: var(--yrdb-fg);
	line-height: 1.3;
	text-align: left;
	animation: yrdb-cal-in .14s ease-out;
}

.yrdb-gpop[hidden],
.yrdb-gpop-shade[hidden] {
	display: none !important;
}

.yrdb-gpop.is-above {
	animation-name: yrdb-cal-in-up;
}

.yrdb-gpop p {
	margin: 0;
}

.yrdb-gpop-head {
	display: none;
}

.yrdb-step {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: .7em 0;
}

.yrdb-step + .yrdb-step {
	border-top: 1px solid var(--yrdb-border);
}

.yrdb-step-label {
	color: var(--yrdb-heading);
	font-weight: 600;
}

.yrdb-step-ctrl {
	display: inline-flex;
	align-items: center;
	gap: .5em;
}

/* Theme button styles reset: a round outline with a drawn minus or plus. */
.yrdb-gpop .yrdb-step-btn {
	position: relative;
	flex: none;
	width: 2.25em;
	height: 2.25em;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--yrdb-border);
	border-radius: 50%;
	background: var(--yrdb-bg);
	box-shadow: none;
	color: var(--yrdb-link);
	font: inherit;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.yrdb-gpop .yrdb-step-btn::before,
.yrdb-gpop .yrdb-step-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 1px;
	background: currentColor;
}

.yrdb-gpop .yrdb-step-btn.is-minus::after {
	display: none;
}

.yrdb-gpop .yrdb-step-btn.is-plus::after {
	transform: rotate(90deg);
}

.yrdb-gpop .yrdb-step-btn:hover:not(:disabled) {
	border-color: var(--yrdb-link);
	background: var(--yrdb-surface);
	color: var(--yrdb-link);
}

.yrdb-gpop .yrdb-step-btn:disabled {
	opacity: .3;
	cursor: default;
}

.yrdb-step-val {
	min-width: 1.75em;
	color: var(--yrdb-heading);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.yrdb-gpop-note {
	margin-top: .35em;
	padding: .6em .75em;
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-surface);
	color: var(--yrdb-fg);
	font-size: .875em;
}

.yrdb-gpop-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin-top: .8em;
}

.yrdb-gpop-cap {
	color: var(--yrdb-muted);
	font-size: .8em;
}

.yrdb-gpop .yrdb-gpop-done {
	min-height: 2.5em;
	padding: .5em 1.25em;
	margin-left: auto;
}

/* ----------------------------------------------------- phones: a sheet */

.yrdb-gpop-shade {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(12, 22, 16, .45);
	animation: yrdb-cal-fade .2s ease-out;
}

html.yrdb-gpop-lock,
html.yrdb-gpop-lock body {
	overflow: hidden;
}

.yrdb-gpop.is-sheet {
	top: auto !important;
	right: 0;
	bottom: 0;
	left: 0 !important;
	width: auto;
	max-width: none;
	max-height: 88vh;
	max-height: 88dvh;
	padding: 0 1em calc(1em + env(safe-area-inset-bottom, 0px));
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 0;
	border-radius: 18px 18px 0 0;
	animation: yrdb-cal-up .22s ease-out;
}

.yrdb-gpop.is-sheet .yrdb-gpop-head {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 -1em .25em;
	padding: .75em .5em .6em 1em;
	border-bottom: 1px solid var(--yrdb-border);
	background: var(--yrdb-bg);
}

.yrdb-gpop-title {
	color: var(--yrdb-heading);
	font-weight: 700;
}

.yrdb-gpop .yrdb-gpop-x {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: var(--yrdb-fg);
	font: inherit;
	cursor: pointer;
}

.yrdb-gpop .yrdb-gpop-x span {
	font-size: 1.75em;
	line-height: 1;
}

.yrdb-gpop .yrdb-gpop-x:hover {
	background: var(--yrdb-surface);
	color: var(--yrdb-fg);
}

.yrdb-gpop.is-sheet .yrdb-step {
	padding: .85em 0;
}

.yrdb-gpop.is-sheet .yrdb-step-btn {
	width: var(--yrdb-tap, 44px);
	height: var(--yrdb-tap, 44px);
}

.yrdb-gpop.is-sheet .yrdb-gpop-foot {
	flex-wrap: wrap;
}

.yrdb-gpop.is-sheet .yrdb-gpop-done {
	width: 100%;
	min-height: var(--yrdb-tap, 44px);
}

/* -------------------------------------------------- email me this offer */

.yrdb .yrdb-offer-open {
	display: inline-block;
	align-self: flex-start;
	margin-top: .5em;
	font-size: .82em;
	font-weight: 500;
	text-align: left;
}

.yrdb-offer-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .5em;
	margin-top: .6em;
	padding: .75em;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-surface);
	text-align: left;
}

.yrdb-offer-form[hidden],
.yrdb-offer-form [hidden] {
	display: none !important;
}

.yrdb-offer-field {
	display: flex;
	flex: 1 1 12em;
	flex-direction: column;
	gap: .25em;
	min-width: 0;
	margin: 0;
}

.yrdb-offer-field input {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--yrdb-tap, 44px);
	padding: .5em .65em;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-bg);
	color: var(--yrdb-fg);
	font: inherit;
}

.yrdb-offer-field input:focus {
	border-color: var(--yrdb-link);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--yrdb-link) 22%, transparent);
}

.yrdb-offer-send {
	flex: 0 0 auto;
}

.yrdb-offer-note,
.yrdb-offer-msg {
	flex-basis: 100%;
	margin: 0;
	color: var(--yrdb-muted);
	font-size: .8em;
}

.yrdb-offer-msg {
	color: var(--yrdb-fg);
	font-weight: 600;
}

.yrdb-offer-msg:empty {
	display: none;
}

.yrdb-offer-msg.is-error {
	color: #b42318;
}

/* For bots only. */
.yrdb-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------- sister properties */

.yrdb-sisters {
	margin-top: 1.1em;
}

.yrdb-sisters[hidden] {
	display: none;
}

.yrdb-sisters-title {
	margin: 0 0 .5em;
	font-weight: 600;
}

.yrdb-sisters-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr));
	gap: .75em;
}

.yrdb .yrdb-sister {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-bg);
	color: var(--yrdb-fg);
	text-align: left;
	text-decoration: none;
}

.yrdb .yrdb-sister:hover {
	border-color: var(--yrdb-link);
}

.yrdb-sister-img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.yrdb-sister-body {
	display: flex;
	flex-direction: column;
	gap: .15em;
	padding: .7em .8em .8em;
}

.yrdb-sister-name {
	color: var(--yrdb-heading);
}

.yrdb-sister-place {
	color: var(--yrdb-muted);
	font-size: .88em;
}

.yrdb-sister-price {
	font-size: .92em;
	font-weight: 600;
}

.yrdb-sister-go {
	margin-top: .3em;
	color: var(--yrdb-link);
	font-size: .88em;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.yrdb-sisters-list + .yrdb-sisters-title {
	margin-top: .9em;
}

.yrdb-empty .yrdb-sisters {
	margin-bottom: .9em;
}

.yrdb-cal-note {
	flex-basis: 100%;
	min-height: 1.2em;
	color: var(--yrdb-fg);
	font-size: .9em;
}

.yrdb-cal-note:empty {
	min-height: 0;
}

.yrdb-cal .yrdb-cal-day.is-today.is-booked .yrdb-cal-n {
	text-decoration-line: underline line-through;
}

/* ---------------------------------------- booking requests (no PMS, 0.8.0) */

/* Where the PMS's booking form would be: a form a little wider than
   Bentral's 250px column. */
.yrdb-checkout.has-request {
	--yrdb-frame-w: 340px;
}

.yrdb-frame.yrdb-request {
	/* Under the stay it takes the full width; beside it, its column. */
	max-width: none;
	padding: 1em 1.1em 1.1em;
	background: var(--yrdb-bg);
	text-align: left;
}

.yrdb-request-title {
	margin: 0 0 .35em;
	font-size: 1.15em;
	line-height: 1.3;
	color: var(--yrdb-heading);
}

.yrdb-request-lead {
	margin: 0 0 .9em;
	font-size: .9em;
	color: var(--yrdb-muted);
}

.yrdb-request-form {
	display: flex;
	flex-direction: column;
	gap: .75em;
}

.yrdb-request-rates {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.yrdb-request-rates legend {
	margin: 0 0 .35em;
	padding: 0;
}

.yrdb-request-rate {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	padding: .6em .7em;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-bg);
	cursor: pointer;
}

.yrdb-request-rate + .yrdb-request-rate {
	margin-top: .45em;
}

.yrdb-request-rate:has(input:checked) {
	border-color: var(--yrdb-accent);
	box-shadow: inset 3px 0 0 var(--yrdb-accent);
}

.yrdb-request-rate input {
	flex: 0 0 auto;
	margin: .3em 0 0;
	accent-color: var(--yrdb-accent);
}

.yrdb-request-rate-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .15em;
	min-width: 0;
}

.yrdb-request-rate-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .1em .6em;
}

.yrdb-request-form textarea {
	width: 100%;
	min-height: 4.5em;
	padding: .55em .7em;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-bg);
	color: inherit;
	font: inherit;
	font-size: 16px;
	resize: vertical;
}

.yrdb-request-form textarea:focus {
	border-color: var(--yrdb-link);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--yrdb-link) 22%, transparent);
}

.yrdb-request-send {
	width: 100%;
}

.yrdb-request-note {
	margin: 0;
	font-size: .8em;
	color: var(--yrdb-muted);
}

.yrdb-request-msg {
	margin: 0;
	font-weight: 600;
}

.yrdb-request-msg:empty {
	display: none;
}

.yrdb-request-msg.is-error {
	color: #b42318;
}

.yrdb-request-msg.is-done {
	padding: .7em .8em;
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-surface);
	font-weight: 500;
}

/* ------------------------------------ the site's own booking form (0.10.0) */

/* Where the PMS's form would be: a little wider than Bentral's column, so
   names, addresses and the price lines read comfortably. */
.yrdb-checkout.has-book {
	--yrdb-frame-w: 380px;
}

.yrdb-frame.yrdb-book {
	max-width: none;
	padding: 1em 1.1em 1.1em;
	background: var(--yrdb-bg);
	text-align: left;
}

.yrdb-book-title {
	margin: 0 0 .6em;
	font-size: 1.15em;
	line-height: 1.3;
	color: var(--yrdb-heading);
}

/* The rates of the summary are the choice. */
.has-book .yrdb-rate.is-choosable {
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}

.has-book .yrdb-rate.is-choosable:hover {
	border-color: color-mix(in srgb, var(--yrdb-accent) 55%, var(--yrdb-border));
}

.has-book .yrdb-rate.is-best:not(.is-chosen) {
	border-color: var(--yrdb-border);
	box-shadow: none;
}

.has-book .yrdb-rate.is-chosen {
	border-color: var(--yrdb-accent);
	box-shadow: inset 4px 0 0 var(--yrdb-accent), 0 0 0 1px var(--yrdb-accent);
}

.has-book .yrdb-rate.is-choosable:focus-visible {
	outline: none;
	box-shadow: inset 4px 0 0 var(--yrdb-accent), 0 0 0 3px color-mix(in srgb, var(--yrdb-link) 30%, transparent);
}

.has-book .yrdb-rate.is-choosable .yrdb-rate-name::before {
	content: "";
	display: inline-block;
	width: .85em;
	height: .85em;
	margin: 0 .45em -.08em 0;
	border: 2px solid var(--yrdb-border);
	border-radius: 50%;
	box-sizing: border-box;
	background: var(--yrdb-bg);
}

.has-book .yrdb-rate.is-chosen .yrdb-rate-name::before {
	border-color: var(--yrdb-accent);
	background: radial-gradient(circle, var(--yrdb-accent) 0 38%, var(--yrdb-bg) 42%);
}

/* The price, as it will be paid. */
.yrdb-book-price {
	margin: 0 0 1em;
	padding: .8em .85em;
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-surface);
	transition: opacity .15s;
}

.yrdb-book-price:empty {
	display: none;
}

.yrdb-book-price.is-loading {
	opacity: .55;
}

.yrdb-book-rate {
	display: flex;
	flex-direction: column;
	gap: .1em;
	margin: 0 0 .6em;
}

.yrdb-book-rate-name {
	color: var(--yrdb-heading);
}

.yrdb-book-lines {
	margin: 0;
	font-size: .9em;
}

.yrdb-book-line {
	display: flex;
	justify-content: space-between;
	gap: .8em;
	padding: .2em 0;
}

.yrdb-book-line dt {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	font-weight: 400;
}

.yrdb-book-line dt small {
	font-size: .85em;
	color: var(--yrdb-muted);
}

.yrdb-book-line dd {
	margin: 0;
	white-space: nowrap;
	text-align: right;
}

.yrdb-book-line.is-saving dd {
	color: var(--yrdb-ok);
}

.yrdb-book-line.is-total {
	margin-top: .3em;
	padding-top: .45em;
	border-top: 1px solid var(--yrdb-border);
	font-size: 1.1em;
	font-weight: 700;
	color: var(--yrdb-heading);
}

.yrdb-book-plan {
	margin-top: .5em;
	padding-top: .45em;
	border-top: 1px dashed var(--yrdb-border);
}

.yrdb-book-plan .yrdb-book-line:first-child {
	font-weight: 700;
	color: var(--yrdb-heading);
}

.yrdb-book-error {
	margin: .5em 0 0;
	font-weight: 600;
	color: #b42318;
}

/* The form. */
.yrdb-book-form {
	display: flex;
	flex-direction: column;
	gap: .8em;
}

.yrdb-book-form fieldset {
	display: flex;
	flex-direction: column;
	gap: .6em;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.yrdb-book-form legend {
	margin: 0 0 .1em;
	padding: 0;
}

.yrdb-book-choices {
	display: flex;
	flex-direction: column;
	gap: .7em;
}

.yrdb-book-choices:empty {
	display: none;
}

.yrdb-book-row {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}

.yrdb-book-age {
	flex: 0 1 7em;
}

.yrdb-book-service {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8em;
}

.yrdb-book-service-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.yrdb-book-service-price {
	font-size: .82em;
	color: var(--yrdb-muted);
}

.yrdb-book-service select,
.yrdb-book-age select {
	flex: 0 0 auto;
	width: auto;
	min-width: 5.5em;
	min-height: var(--yrdb-tap);
	padding: .45em .6em;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-bg);
	color: inherit;
	font: inherit;
	font-size: 16px;
}

.yrdb-book-service select:focus,
.yrdb-book-age select:focus {
	border-color: var(--yrdb-link);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--yrdb-link) 22%, transparent);
}

.yrdb-book-rate-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .6em;
}

.yrdb-book-rate-top .yrdb-linkbtn {
	font-size: .82em;
}

.yrdb-book-form textarea {
	width: 100%;
	min-height: 4.5em;
	padding: .55em .7em;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-bg);
	color: inherit;
	font: inherit;
	font-size: 16px;
	resize: vertical;
}

.yrdb-book-form textarea:focus {
	border-color: var(--yrdb-link);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--yrdb-link) 22%, transparent);
}

.yrdb-book-form [aria-invalid="true"] {
	border-color: #b42318;
	box-shadow: 0 0 0 3px color-mix(in srgb, #b42318 18%, transparent);
}

.yrdb-book-method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .2em .55em;
	padding: .55em .7em;
	border: 1px solid var(--yrdb-border);
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-bg);
	cursor: pointer;
}

.yrdb-book-method + .yrdb-book-method {
	margin-top: .4em;
}

.yrdb-book-method:has(input:checked) {
	border-color: var(--yrdb-accent);
	box-shadow: inset 3px 0 0 var(--yrdb-accent);
}

.yrdb-book-method input {
	margin: 0;
	accent-color: var(--yrdb-accent);
}

.yrdb-book-fee {
	font-size: .82em;
	color: var(--yrdb-muted);
}

.yrdb-book-send {
	width: 100%;
}

.yrdb-book-note {
	margin: 0;
	font-size: .8em;
	line-height: 1.45;
	color: var(--yrdb-muted);
}

.yrdb-book-msg {
	margin: 0;
	font-weight: 600;
}

.yrdb-book-msg:empty {
	display: none;
}

.yrdb-book-msg.is-error {
	color: #b42318;
}

.yrdb-book-done {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .7em;
	padding: .9em 1em;
	border-radius: var(--yrdb-radius-sm);
	background: var(--yrdb-surface);
}

.yrdb-book-done p {
	margin: 0;
}

.yrdb-book-done-title {
	font-weight: 700;
	color: var(--yrdb-heading);
}

/* Why the PMS's own form took over. */
.yrdb-book-why {
	margin: 0 0 .6em;
	font-size: .9em;
	font-weight: 600;
	text-align: left;
}