/*
 * Coast & Range – property page booking block ([cr_booking])
 *
 * One bordered box (demo/mockups/booking-panel-layout-mockup.jpg): the
 * availability calendar on the left, the price breakdown on the right,
 * stacked on mobile with the calendar first. Colours and fonts are the
 * --cr-* custom properties the other stylesheets use, following the site's
 * Elementor globals (see search-bar.css for the mapping), with
 * zero-specificity defaults on :where() so a site rule always wins.
 */

:where(.cr-booking) {
	--cr-cream: var(--e-global-color-primary, #F9F6ED);
	--cr-sand: var(--e-global-color-e38b3fa, #F0EADA);
	--cr-ink: var(--e-global-color-c9d9ea6, #443B27);
	--cr-olive: var(--e-global-color-text, #584E06);
	--cr-sky: var(--e-global-color-accent, #C1D8DB);
	--cr-sky-hover: #AECBCD;
	--cr-stone: #D9D2C0;
	--cr-muted: #B5AE9C;
	--cr-alert: #8A2D1B;
	--cr-font-body: var(--e-global-typography-text-font-family, 'Work Sans'), sans-serif;
	--cr-font-caps: var(--e-global-typography-text-font-family, 'Work Sans'), sans-serif;
	--cr-body-size: 16px;
	--cr-body-lh: 1.5;
	--cr-hit: 44px;
	--cr-booking-max-width: 1052px; /* the block's width cap; see the note below */
}

/*
 * A contained, centred box rather than the column's full width (client feedback,
 * Oct 13): the block is capped at --cr-booking-max-width and centred. 1052px is the
 * smallest cap that keeps the two desktop months' days 36px wide (1.3fr : 1fr columns,
 * 20px calendar padding, 24px between the months: at 900px a day is 30px). Override
 * the token in Additional CSS (.cr-booking { --cr-booking-max-width: 900px; }) or set
 * the widget's Advanced › Layout › Width to Custom for one template.
 */
:where(.cr-booking) {
	width: 100%;
	max-width: var(--cr-booking-max-width, 1052px);
	margin-inline: auto;
}

/*
 * The property template puts the shortcode widget in a column-flex container
 * with align-items: center, which content-sizes the widget: the block then
 * measured 777 / 1053 / 1237px as its states changed. The widget around the
 * block (both Elementor DOM shapes) and the block itself are full width, and
 * nothing inside may widen them (min-width: 0 columns, wrapping text below).
 * On the :where() layer, so a template setting still wins.
 */
:where(.elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .cr-booking)),
:where(.elementor-widget-shortcode:has(> .elementor-shortcode > .cr-booking)),
:where(.elementor-widget:has(> .elementor-shortcode > .cr-booking)) {
	width: 100%;
	max-width: 100%;
}

/*
 * Hello Elementor's reset paints every hovered button magenta on white
 * (button:hover { background-color: #c36; color: #fff; text-decoration: none }) and every
 * hovered link magenta. Every link and button in the block therefore names its own
 * background, border, colour and underline on :hover, :focus-visible and :active: this base
 * for the text controls, each boxed control below for itself.
 */
.cr-booking a,
.cr-booking button {
	color: var(--cr-ink);
}

.cr-booking a:hover,
.cr-booking a:focus-visible,
.cr-booking a:active,
.cr-booking button:hover,
.cr-booking button:focus-visible,
.cr-booking button:active {
	background-color: transparent;
	border-color: var(--cr-ink);
	color: var(--cr-ink);
	text-decoration: none;
}

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

.cr-booking {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	min-width: 0;
	border: 1px solid var(--cr-ink);
	background: var(--cr-cream);
	font-family: var(--cr-font-body);
	font-size: var(--cr-body-size, 16px);
	line-height: var(--cr-body-lh, 1.5);
	color: var(--cr-ink);
	-webkit-font-smoothing: antialiased;
}

.cr-booking [hidden] {
	display: none !important;
}

.cr-booking p,
.cr-booking h3,
.cr-booking h4,
.cr-booking dl,
.cr-booking dt,
.cr-booking dd,
.cr-booking output {
	margin: 0;
	padding: 0;
}

.cr-booking button {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: inherit;
	cursor: pointer;
	transition: none;
}

.cr-booking button:disabled {
	cursor: default;
}

.cr-booking :focus {
	outline: none;
}

.cr-booking :focus-visible {
	outline: 2px solid var(--cr-olive);
	outline-offset: 2px;
}

/* Two classes so the caps style also wins on buttons over the reset above. */
.cr-booking .cr-booking__caps {
	font-family: var(--cr-font-caps);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/* ---------- left: the calendar ---------- */

.cr-booking__calendar {
	position: relative; /* the day tooltip is placed inside it */
	min-width: 0;
	padding: 20px 20px 22px;
	border-right: 1px solid var(--cr-ink);
}

.cr-booking__cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.cr-booking .cr-booking__title {
	color: var(--cr-ink);
}

.cr-booking .cr-booking__cal-btn {
	width: var(--cr-hit, 44px);
	height: var(--cr-hit, 44px);
	flex: none;
	border: 1px solid var(--cr-ink);
	background: var(--cr-cream);
	font-size: 18px;
	line-height: 1;
}

.cr-booking .cr-booking__cal-btn:hover,
.cr-booking .cr-booking__cal-btn:focus-visible,
.cr-booking .cr-booking__cal-btn:active {
	background-color: var(--cr-sand);
	border-color: var(--cr-ink);
	color: var(--cr-ink);
	text-decoration: none;
}

.cr-booking .cr-booking__cal-btn:disabled,
.cr-booking .cr-booking__cal-btn:disabled:hover {
	color: var(--cr-muted);
	border-color: var(--cr-muted);
	background: var(--cr-cream);
}

.cr-booking__months {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.cr-booking .cr-booking__month-name {
	margin: 0 0 8px;
	text-align: center;
	color: var(--cr-ink);
}

.cr-booking__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	text-align: center;
	font-size: 13px;
}

.cr-booking__dow {
	padding: 4px 0;
	font-family: var(--cr-font-caps);
	font-size: 11px;
	font-weight: 500;
	color: var(--cr-olive);
}

.cr-booking .cr-booking__day {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--cr-hit, 44px);
	padding: 0;
	border: 0;
	background: none;
	color: var(--cr-ink);
	line-height: 1.4;
}

.cr-booking .cr-booking__day:hover,
.cr-booking .cr-booking__day:focus-visible,
.cr-booking .cr-booking__day:active {
	background-color: var(--cr-sand);
	border-color: transparent;
	color: var(--cr-ink);
	text-decoration: none;
}

/* Past and booked: greyed, struck through. */
.cr-booking .cr-booking__day.is-past,
.cr-booking .cr-booking__day.is-booked,
.cr-booking .cr-booking__day:disabled,
.cr-booking .cr-booking__day:disabled:hover {
	color: var(--cr-muted);
	background: none;
	text-decoration: line-through;
}

/* While picking a check-out: the days that work, and the ones that do not (click for the reason). */
.cr-booking .cr-booking__day.is-range,
.cr-booking .cr-booking__day.is-range:hover,
.cr-booking .cr-booking__day.is-range:focus-visible,
.cr-booking .cr-booking__day.is-range:active {
	color: var(--cr-ink);
	background-color: var(--cr-sand);
	text-decoration: none;
}

/* A day that cannot start or end the stay keeps the normal ink (client, Oct 21); hovering or focusing it shows why. */
.cr-booking .cr-booking__day.is-muted {
	color: var(--cr-ink);
}

.cr-booking__tip {
	position: absolute;
	z-index: 5;
	max-width: 240px;
	padding: 7px 10px;
	border: 1px solid var(--cr-ink);
	background: var(--cr-ink);
	color: var(--cr-cream);
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	pointer-events: none;
}

.cr-booking__tip::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 10px;
	height: 10px;
	transform: translateX(-50%) rotate(45deg);
	background: var(--cr-ink);
}

.cr-booking__tip[hidden] {
	display: none;
}

.cr-booking .cr-booking__day.is-in,
.cr-booking .cr-booking__day.is-in:hover,
.cr-booking .cr-booking__day.is-in:focus-visible,
.cr-booking .cr-booking__day.is-in:active {
	background-color: var(--cr-sky);
	color: var(--cr-ink);
	text-decoration: none;
}

.cr-booking .cr-booking__day.is-edge,
.cr-booking .cr-booking__day.is-edge:hover,
.cr-booking .cr-booking__day.is-edge:focus-visible,
.cr-booking .cr-booking__day.is-edge:active {
	background-color: var(--cr-ink);
	color: var(--cr-cream);
	font-weight: 500;
	text-decoration: none;
}

.cr-booking__hint {
	margin-top: 14px;
	text-align: center;
	overflow-wrap: anywhere;
	font-size: var(--cr-body-size, 16px);
	color: var(--cr-ink);
}

.cr-booking__hint.is-error {
	color: var(--cr-alert);
}

.cr-booking__cal-foot {
	margin-top: 6px;
	text-align: center;
}

.cr-booking .cr-booking__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--cr-hit, 44px);
	padding: 0 8px;
	color: var(--cr-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* A text link: transparent on hover, underline kept (the theme rule removes it). */
.cr-booking .cr-booking__link:hover,
.cr-booking .cr-booking__link:focus-visible,
.cr-booking .cr-booking__link:active {
	background-color: transparent;
	border-color: transparent;
	color: var(--cr-olive);
	text-decoration: underline;
}

/* ---------- right: the price ---------- */

.cr-booking__quote {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 20px 22px 22px;
}

.cr-booking__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.cr-booking .cr-booking__summary-text {
	min-width: 0;
	overflow-wrap: anywhere;
	color: var(--cr-ink);
}

.cr-booking__stepper {
	display: inline-flex;
	align-items: center;
	flex: none;
	border: 1px solid var(--cr-ink);
}

.cr-booking .cr-booking__step {
	width: var(--cr-hit, 44px);
	height: var(--cr-hit, 44px);
	font-size: 16px;
	line-height: 1;
}

.cr-booking .cr-booking__step:hover,
.cr-booking .cr-booking__step:focus-visible,
.cr-booking .cr-booking__step:active {
	background-color: var(--cr-sand);
	border-color: var(--cr-ink);
	color: var(--cr-ink);
	text-decoration: none;
}

.cr-booking .cr-booking__step:disabled,
.cr-booking .cr-booking__step:disabled:hover {
	color: var(--cr-muted);
	background: none;
}

.cr-booking__stepper output {
	display: inline-block;
	min-width: 24px;
	font-size: var(--cr-body-size, 16px);
	text-align: center;
}

.cr-booking__note {
	margin: 2px 0 8px;
	overflow-wrap: anywhere;
	font-size: 14px;
	color: var(--cr-olive);
}

.cr-booking__price {
	margin-top: 10px;
}

/* Messages wrap; they never set the column's width. */
.cr-booking__empty,
.cr-booking__message {
	padding: 6px 0 10px;
	overflow-wrap: anywhere;
	font-size: var(--cr-body-size, 16px);
	color: var(--cr-olive);
}

.cr-booking__message.is-error {
	color: var(--cr-alert);
}

.cr-booking .cr-booking__retry {
	display: inline-flex;
	align-items: center;
	min-height: var(--cr-hit, 44px);
	margin: 0 0 12px;
	padding: 8px 14px;
	border: 1px solid var(--cr-ink);
	background: var(--cr-cream);
}

.cr-booking .cr-booking__retry:hover,
.cr-booking .cr-booking__retry:focus-visible,
.cr-booking .cr-booking__retry:active {
	background-color: var(--cr-sand);
	border-color: var(--cr-ink);
	color: var(--cr-ink);
	text-decoration: none;
}

.cr-booking__row,
.cr-booking__total {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
}

.cr-booking__row dt {
	min-width: 0;
	overflow-wrap: anywhere;
}

.cr-booking__row dd,
.cr-booking__total dd {
	flex: 0 1 auto;
	min-width: 0;
	font-variant-numeric: tabular-nums;
}

.cr-booking__total {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--cr-ink);
	font-weight: 700;
}

/* Loading: four grey bars where the rows go. */
.cr-booking__skeleton {
	padding: 6px 0 10px;
}

.cr-booking__skeleton span {
	display: block;
	height: 14px;
	margin: 10px 0;
	background: var(--cr-sand);
}

.cr-booking__skeleton span:nth-child(2) {
	width: 70%;
}

.cr-booking__skeleton span:nth-child(4) {
	width: 55%;
}

.cr-booking__pets {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0 2px;
	cursor: pointer;
}

.cr-booking__pets {
	min-height: var(--cr-hit, 44px);
}

.cr-booking__pets input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--cr-ink);
}

.cr-booking .cr-booking__book {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--cr-hit, 44px);
	max-width: 100%;
	margin-top: 18px;
	padding: 14px 20px;
	overflow-wrap: anywhere;
	border: 1px solid var(--cr-ink);
	background: var(--cr-ink);
	color: var(--cr-cream);
	text-align: center;
	text-decoration: none;
}

.cr-booking .cr-booking__book:hover,
.cr-booking .cr-booking__book:focus-visible,
.cr-booking .cr-booking__book:active {
	background-color: var(--cr-olive);
	border-color: var(--cr-olive);
	color: var(--cr-cream);
	text-decoration: none;
}

.cr-booking .cr-booking__book.is-disabled,
.cr-booking .cr-booking__book.is-disabled:hover {
	border-color: var(--cr-muted);
	background: var(--cr-stone);
	color: var(--cr-cream);
	cursor: default;
	pointer-events: none;
}

.cr-booking__secure {
	margin-top: 10px;
	text-align: center;
	font-size: 14px;
	color: var(--cr-olive);
}

/* ---------- mobile: stacked, calendar first, one month ---------- */

@media (max-width: 860px) {
	/* One month on mobile: the days are 44px wide as well as tall (two months side by side on desktop follow the column's width). */
	.cr-booking .cr-booking__day {
		min-width: var(--cr-hit, 44px);
	}

	.cr-booking {
		grid-template-columns: 1fr;
	}

	.cr-booking__calendar {
		padding: 16px 14px 18px;
		border-right: 0;
		border-bottom: 1px solid var(--cr-ink);
	}

	.cr-booking__months {
		grid-template-columns: 1fr;
	}

	.cr-booking__quote {
		padding: 16px 14px 18px;
	}

	.cr-booking__summary {
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.cr-booking .cr-booking__day,
	.cr-booking .cr-booking__book,
	.cr-booking .cr-booking__step,
	.cr-booking .cr-booking__cal-btn {
		transition: background-color 0.12s ease;
	}

	.cr-booking__skeleton span {
		animation: cr-booking-pulse 1.2s ease-in-out infinite;
	}

	@keyframes cr-booking-pulse {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.45; }
	}
}