/**
 * LT Stays — the interactive booking bar.
 *
 * The green bar's look already lives in stays.css; this only turns the three
 * static lines into controls and dresses the calendar that opens behind them.
 * Selectors carry .lt-stay because the stay stylesheet styles every bare
 * <button> on the page and would otherwise win.
 */

.lt-stay .lt-booking {
	position: relative;
	flex-wrap: wrap;
	gap: 30px;
	row-gap: 30px;
}

.lt-stay .lt-booking__field {
	cursor: default;
}

/* The value keeps the 26px line it had as static text, so switching it to a
   button changes nothing visually until you hover it. */
.lt-stay .lt-booking__value {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font-family: inherit;
	font-size: 26px;
	line-height: 26px;
	font-weight: 600;
	color: #F5F1EA;
	text-align: left;
	cursor: pointer;
	border-bottom: 1px dashed transparent;
	transition: color .25s ease, border-color .25s ease;
}

.lt-stay .lt-booking__value:hover,
.lt-stay .lt-booking__value[aria-expanded="true"] {
	color: #fff;
	border-bottom-color: #B8A067;
}

.lt-stay .lt-booking__value--static {
	cursor: default;
	border-bottom: 0;
	min-width: 96px;
}

.lt-stay .lt-booking__value--static:hover {
	color: #F5F1EA;
}

/* No booking URL yet: the tiles are plain text, exactly as this bar read
   before it became interactive. */
.lt-stay .lt-booking--static .check-box p {
	color: #F5F1EA;
	font-size: 26px;
	line-height: 26px;
	font-weight: 600;
	margin: 0;
}

/* Guest stepper ----------------------------------------------------------- */

.lt-stay .lt-booking__stepper {
	display: flex;
	align-items: center;
	gap: 14px;
}

.lt-stay .lt-booking__step {
	appearance: none;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	padding: 0;
	border: 1px solid rgba(245, 241, 234, .45);
	border-radius: 50%;
	background: transparent;
	color: #F5F1EA;
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.lt-stay .lt-booking__step:hover {
	background: #B8A067;
	border-color: #B8A067;
	color: #fff;
}

/* Calendar ---------------------------------------------------------------- */

.lt-stay .lt-cal {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	z-index: 40;
	width: max-content;
	max-width: 100%;
	padding: 26px 28px 28px;
	background: #FFF9EE;
	border-radius: 22px;
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55);
	color: #1F1F1F;
}

.lt-stay .lt-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 18px;
}

.lt-stay .lt-cal__hint {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 26px;
	color: #6B6B6B;
}

.lt-stay .lt-cal__nav {
	appearance: none;
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	padding: 0;
	border: 1px solid #DAD3C6;
	border-radius: 50%;
	background: transparent;
	color: #1F1F1F;
	font-size: 16px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.lt-stay .lt-cal__nav:hover {
	background: #B8A067;
	border-color: #B8A067;
	color: #fff;
}

.lt-stay .lt-cal__months {
	display: flex;
	gap: 34px;
}

.lt-stay .lt-cal__month {
	flex: 0 0 auto;
}

.lt-stay .lt-cal__caption {
	font-family: var(--font-heading);
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	padding-bottom: 10px;
}

.lt-stay .lt-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 38px);
	gap: 2px;
}

.lt-stay .lt-cal__dow {
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 28px;
	text-align: center;
	color: #8C867B;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.lt-stay .lt-cal__pad {
	height: 38px;
}

.lt-stay .lt-cal__day {
	appearance: none;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 38px;
	color: #1F1F1F;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.lt-stay .lt-cal__day:hover:not([disabled]) {
	background: #EFE7D6;
}

.lt-stay .lt-cal__day[disabled] {
	color: #C2BDB3;
	cursor: default;
}

/* The nights between the two ends read as one block, so the square corners
   meet with no gap while the ends stay round. */
.lt-stay .lt-cal__day.is-between {
	background: #EFE7D6;
	border-radius: 0;
}

.lt-stay .lt-cal__day.is-start,
.lt-stay .lt-cal__day.is-end {
	background: #22301D;
	color: #fff;
}

.lt-stay .lt-cal__day.is-start {
	border-radius: 50% 0 0 50%;
}

.lt-stay .lt-cal__day.is-end {
	border-radius: 0 50% 50% 0;
}

.lt-stay .lt-cal__day.is-start.is-end {
	border-radius: 50%;
}

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

@media (max-width: 1024px) {

	.lt-stay .lt-cal {
		left: auto;
		right: 0;
	}
}

@media (max-width: 767px) {

	.lt-stay .lt-booking__value {
		font-size: 20px;
		line-height: 24px;
	}

	.lt-stay .lt-cal {
		left: 0;
		right: 0;
		width: auto;
		padding: 20px 18px 22px;
		overflow-x: auto;
	}

	/* One month at this width: two would need a horizontal scroll inside a
	   popover, which is miserable on a phone. */
	.lt-stay .lt-cal__months {
		gap: 0;
	}

	.lt-stay .lt-cal__month + .lt-cal__month {
		display: none;
	}

	/* The month is sized to its content on a desktop, where two sit side by
	   side. Left that way here it keeps that width and the dates end up squeezed
	   into the left half of the popover, so the one month on show has to fill it. */
	.lt-stay .lt-cal__month {
		flex: 1 1 100%;
		min-width: 0;
	}

	.lt-stay .lt-cal__grid {
		grid-template-columns: repeat(7, 1fr);
	}

	.lt-stay .lt-cal__day,
	.lt-stay .lt-cal__pad {
		width: 100%;
		height: 40px;
		line-height: 40px;
	}
}