/*
 * Coast & Range – property page calendar ([cr_hostaway_calendar])
 *
 * The strip above Hostaway's calendar widget ("Your search: … · Book these
 * dates", or a note when this home cannot take the search) in the search
 * bar's style, and the offline fallback link. The widget itself is styled by
 * Hostaway (colours are passed in its options).
 *
 * 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().
 */

:where(.cr-calendar) {
	--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-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;
}

/*
 * Hello Elementor's reset paints every hovered button magenta on white and removes its
 * underline (button:hover { background-color: #c36; color: #fff; text-decoration: none }),
 * and colours hovered links magenta. Every link and button in the strip names its own
 * background, border, colour and underline on :hover, :focus-visible and :active.
 */
.cr-calendar a,
.cr-calendar button {
	color: var(--cr-ink);
}

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

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

.cr-calendar {
	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-calendar [hidden] {
	display: none !important;
}

.cr-calendar__caps {
	font-family: var(--cr-font-caps);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/* ---------- the strip ---------- */

.cr-calendar__search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin: 0 0 16px;
	padding: 10px 16px;
	border: 1px solid var(--cr-ink);
	background: var(--cr-sand);
}

.cr-calendar .cr-calendar__text {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.cr-calendar__label {
	display: block;
	color: var(--cr-olive);
	font-size: 11px;
}

.cr-calendar__summary {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cr-calendar .cr-calendar__book {
	display: inline-flex;
	align-items: center;
	flex: none;
	min-height: var(--cr-hit, 44px);
	padding: 10px 22px;
	border: 1px solid var(--cr-ink);
	background: var(--cr-sky);
	color: var(--cr-ink);
	text-decoration: none;
	transition: background-color 0.12s ease;
}

.cr-calendar .cr-calendar__book:hover,
.cr-calendar .cr-calendar__book:focus-visible,
.cr-calendar .cr-calendar__book:active {
	background-color: var(--cr-sky-hover);
	border-color: var(--cr-ink);
	color: var(--cr-ink);
	text-decoration: none;
}

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

/* "Secure checkout · opens in a new window", a line across the strip under the button. */
.cr-calendar .cr-calendar__secure {
	flex: 1 0 100%;
	margin: -4px 0 0;
	padding: 0;
	text-align: right;
	font-size: 13px;
	color: var(--cr-olive);
}

/* A note instead of a booking (minimum stay, unavailable, guests, pets): plain text, no button. */
.cr-calendar .cr-calendar__search--note {
	background: var(--cr-cream);
}

.cr-calendar .cr-calendar__search--note .cr-calendar__summary {
	white-space: normal;
}

/* ---------- offline fallback inside the widget box ---------- */

.cr-calendar .cr-calendar__offline {
	display: inline-flex;
	align-items: center;
	min-height: var(--cr-hit, 44px);
	padding: 10px 16px;
	border: 1px solid var(--cr-ink);
	background: var(--cr-cream);
	color: var(--cr-ink);
	text-decoration: none;
}

.cr-calendar .cr-calendar__offline:hover,
.cr-calendar .cr-calendar__offline:focus-visible,
.cr-calendar .cr-calendar__offline:active {
	background-color: var(--cr-sky);
	border-color: var(--cr-ink);
	color: var(--cr-ink);
	text-decoration: none;
}

@media (max-width: 600px) {
	.cr-calendar__search {
		padding: 10px 12px;
	}

	.cr-calendar .cr-calendar__book {
		width: 100%;
		text-align: center;
	}
}