/* Booking page: the large availability calendar is also the date selector. */
.bbb-booking-calendar-heading {
	align-items: start;
}

.bbb-booking-calendar-heading h2 {
	margin-bottom: .45rem;
}

.bbb-booking-calendar-intro {
	color: var(--bbb-muted);
	font-size: .92rem;
	margin: 0;
	max-width: 54ch;
}

.bbb-booking-calendar .bbb-calendar-month {
	background: rgb(255 255 255 / 55%);
}

.bbb-booking-calendar .bbb-calendar-days button {
	cursor: pointer;
	position: relative;
	transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.bbb-booking-calendar .bbb-calendar-days button:not(:disabled):hover {
	box-shadow: inset 0 0 0 1px rgb(30 69 62 / 28%);
	transform: translateY(-1px);
}

.bbb-booking-calendar .bbb-calendar-days button:focus-visible {
	box-shadow: 0 0 0 3px rgb(30 69 62 / 18%);
	outline: 2px solid var(--bbb-forest);
	outline-offset: 1px;
}

.bbb-booking-calendar .bbb-calendar-days button:disabled {
	cursor: default;
}

.bbb-booking-calendar .bbb-calendar-days button.is-in-range {
	background: rgb(205 180 116 / 32%);
	border-radius: 2px;
	color: var(--bbb-charcoal);
	text-decoration: none;
}

.bbb-booking-calendar .bbb-calendar-days button.is-range-start,
.bbb-booking-calendar .bbb-calendar-days button.is-range-end {
	background: var(--bbb-forest);
	box-shadow: 0 5px 14px rgb(30 69 62 / 20%);
	color: white;
	font-weight: 800;
	text-decoration: none;
}

.bbb-booking-calendar .bbb-calendar-days button.is-range-start::after,
.bbb-booking-calendar .bbb-calendar-days button.is-range-end::after {
	background: var(--bbb-gold);
	border: 2px solid white;
	border-radius: 50%;
	bottom: 4px;
	content: "";
	height: 7px;
	position: absolute;
	width: 7px;
}

.bbb-booking-calendar .bbb-calendar-legend .is-selected {
	background: var(--bbb-forest);
}

.bbb-booking-calendar-selection {
	align-items: center;
	background: rgb(30 69 62 / 5%);
	border: 1px solid rgb(30 69 62 / 10%);
	border-radius: 12px;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-top: 1rem;
	padding: .8rem 1rem;
}

.bbb-booking-calendar-selection p {
	color: var(--bbb-forest);
	font-size: .84rem;
	font-weight: 700;
	margin: 0;
}

.bbb-booking-calendar-selection p.is-error {
	color: var(--bbb-wine);
}

.bbb-booking-calendar-selection button {
	background: transparent;
	border: 1px solid var(--bbb-border);
	border-radius: 9px;
	color: var(--bbb-forest);
	cursor: pointer;
	flex: none;
	font-size: .75rem;
	font-weight: 700;
	min-height: 38px;
	padding: .45rem .7rem;
}

.bbb-booking-calendar-selection button:hover:not(:disabled) {
	background: white;
	border-color: rgb(30 69 62 / 24%);
}

.bbb-booking-calendar-selection button:disabled {
	cursor: default;
	opacity: .4;
}

.bbb-mobile-booking-guests {
	align-items: start;
	background: rgb(205 180 116 / 12%);
	border: 1px solid rgb(205 180 116 / 32%);
	border-radius: 14px;
	display: grid;
	gap: .75rem;
	grid-template-columns: minmax(0, .9fr) minmax(220px, 1.1fr);
	margin-top: .65rem;
	padding: .75rem;
}

.bbb-mobile-booking-guests[hidden] {
	display: none !important;
}

.bbb-mobile-booking-guests-copy {
	display: grid;
	gap: .15rem;
}

.bbb-mobile-booking-guests-copy > span {
	color: var(--bbb-gold-dark, #9f7f35);
	font-size: .65rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.bbb-mobile-booking-guests-copy > strong {
	color: var(--bbb-forest);
	font-family: var(--bbb-display);
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.15;
}

.bbb-mobile-booking-guests-copy > small {
	color: var(--bbb-muted);
	font-size: .72rem;
	line-height: 1.4;
}

.bbb-mobile-booking-guests .bbb-guest-fields {
	background: rgb(255 255 255 / 56%);
	box-shadow: 0 5px 14px rgb(30 69 62 / 4%);
}

.bbb-booking-date-summary {
	align-items: stretch;
	background: rgb(30 69 62 / 4%);
	border: 1px solid rgb(30 69 62 / 12%);
	border-radius: 12px;
	display: grid;
	gap: .45rem;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	margin-bottom: .35rem;
	padding: .8rem .9rem;
}

.bbb-booking-date-summary > div {
	display: grid;
	gap: .2rem;
	min-width: 0;
}

.bbb-booking-date-summary span:not(.bbb-booking-date-arrow) {
	color: var(--bbb-muted);
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.bbb-booking-date-summary strong {
	color: var(--bbb-muted);
	font-size: .82rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.bbb-booking-date-summary.has-start > div:first-child strong,
.bbb-booking-date-summary.has-range > div strong {
	color: var(--bbb-forest);
}

.bbb-booking-date-arrow {
	align-self: center;
	color: var(--bbb-gold);
	font-weight: 800;
}

.bbb-booking-date-hint {
	color: var(--bbb-muted);
	font-size: .72rem;
	margin: 0 0 .65rem;
}

.bbb-booking-request-card .bbb-local-notice {
	margin-bottom: 1rem;
}

@media (max-width: 820px) {
	.bbb-booking-calendar-selection {
		align-items: flex-start;
		flex-direction: column;
	}

	.bbb-booking-date-hint {
		display: none;
	}
}

@media (max-width: 560px) {
	.bbb-booking-calendar-heading {
		gap: .8rem;
	}

	.bbb-booking-calendar-heading .bbb-minimum-note {
		white-space: normal;
	}

	.bbb-mobile-booking-guests {
		gap: .5rem;
		grid-template-columns: 1fr;
		padding: .65rem;
	}

	.bbb-mobile-booking-guests-copy > strong {
		font-size: 1.2rem;
	}

	.bbb-booking-date-summary {
		grid-template-columns: 1fr;
	}

	.bbb-booking-date-arrow {
		justify-self: start;
		transform: rotate(90deg);
	}

	.bbb-booking-calendar .bbb-calendar-legend {
		flex-wrap: wrap;
	}
}
