/**
 * Doe Crossing — Availability calendar page
 */

.doe-availability-page {
	--doe-ink: #222222;
	--doe-muted: #717171;
	--doe-line: #e3ddd4;
	--doe-soft: #f6f3ee;
	--doe-brown: #7d6d57;
	--doe-occupied: #c45c5c;
	--doe-available: #2f6b4f;
	--doe-turnover: #d4a017;
	--doe-font: "Public Sans", "Inter", system-ui, -apple-system, sans-serif;
}

.doe-availability {
	max-width: 920px;
	margin: 0 auto;
	font-family: var(--doe-font);
	color: var(--doe-ink);
}

.doe-availability__content {
	max-width: 720px;
	margin: 0 auto 36px;
	text-align: center;
}

.doe-availability__intro {
	text-align: center;
	margin-bottom: 28px;
}

.doe-availability__kicker {
	margin: 0 0 8px;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--doe-brown);
	font-weight: 600;
}

.doe-availability__title {
	margin: 0 0 10px;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	font-weight: 600;
}

.doe-availability__lead {
	margin: 0 auto;
	max-width: 640px;
	color: var(--doe-muted);
	font-size: 16px;
	line-height: 1.55;
}

.doe-availability__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 22px;
}

.doe-availability__tab {
	appearance: none;
	border: 1px solid var(--doe-line);
	background: #fff;
	color: var(--doe-ink);
	border-radius: 999px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.doe-availability__tab:hover,
.doe-availability__tab:focus-visible {
	border-color: var(--doe-brown);
	outline: none;
}

.doe-availability__tab.is-active {
	background: var(--doe-ink);
	border-color: var(--doe-ink);
	color: #fff;
}

.doe-availability__panels {
	background: #fff;
	border: 1px solid var(--doe-line);
	border-radius: 20px;
	padding: 22px 18px 10px;
	box-shadow: 0 10px 30px rgba(34, 34, 34, 0.05);
}

.doe-availability__panel-note {
	text-align: center;
	color: var(--doe-muted);
	font-size: 13px;
	margin: 0 0 14px;
}

.doe-availability .hb-availability-calendar-wrapper {
	display: block !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	margin: 0 !important;
}

.doe-availability .hb-availability-calendar-centered {
	display: block !important;
	margin: 0 auto !important;
	width: 100% !important;
}

.doe-availability .hb-availability-calendar {
	display: block !important;
	width: 100% !important;
	margin: 0 auto !important;
}

.doe-availability .hb-avail-caption-wrapper {
	display: none !important;
}

.doe-availability__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 22px;
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	color: var(--doe-muted);
	font-size: 14px;
}

.doe-availability__legend li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.doe-availability__swatch {
	width: 14px;
	height: 14px;
	border-radius: 4px;
	border: 1px solid var(--doe-line);
	display: inline-block;
}

.doe-availability__swatch--available {
	background: #e7f4ec;
	border-color: var(--doe-available);
}

.doe-availability__swatch--occupied {
	background: #f7d7dc;
	border-color: var(--doe-occupied);
}

.doe-availability__swatch--turnover {
	background: #fff4cc;
	border-color: var(--doe-turnover);
}

.doe-availability__sync,
.doe-availability__notice {
	text-align: center;
	color: var(--doe-muted);
	font-size: 13px;
	margin: 16px 0 0;
}

.doe-availability .hb-day-available a,
.doe-availability .hb-day-available {
	background: #e7f4ec !important;
}

.doe-availability .hb-day-fully-taken a,
.doe-availability .hb-day-fully-taken,
.doe-availability .hb-day-taken-content {
	background: #f7d7dc !important;
}

.doe-booking-widget .doe-listing-avail,
.doe-booking-widget .hb-availability-calendar-wrapper,
.doe-booking-widget .hb-availability-calendar-centered,
.doe-booking-widget .hb-availability-calendar {
	display: block !important;
	height: auto !important;
	max-height: none !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
	overflow: visible !important;
	width: 100% !important;
	line-height: normal !important;
}

.doe-listing-avail {
	max-width: 100%;
	margin: 0 0 20px;
}

.doe-dates-locked .doe-listing-avail .hb-availability-calendar,
.doe-dates-locked .doe-listing-avail .hb-availability-calendar-wrapper,
.doe-dates-locked .doe-listing-avail .hb-dp-month-row,
.doe-dates-locked .doe-listing-avail .hb-dp-month,
.doe-dates-locked .doe-listing-avail .hb-dp-day,
.doe-dates-locked .doe-listing-avail .hb-dp-day a,
.doe-listing-avail.doe-dates-locked .hb-dp-day,
.doe-listing-avail.doe-dates-locked .hb-dp-day a {
	pointer-events: none !important;
	cursor: default;
}

.doe-dates-locked .doe-listing-avail .hb-dp-cmd-wrapper,
.doe-dates-locked .doe-listing-avail .hb-dp-cmd-prev,
.doe-dates-locked .doe-listing-avail .hb-dp-cmd-next,
.doe-listing-avail.doe-dates-locked .hb-dp-cmd-prev,
.doe-listing-avail.doe-dates-locked .hb-dp-cmd-next {
	pointer-events: auto !important;
	cursor: pointer;
}

.doe-dates-locked .hb-check-in-date,
.doe-dates-locked .hb-check-out-date,
.doe-dates-locked .hb-check-dates-wrapper {
	pointer-events: none;
}

.doe-listing-avail .hb-availability-calendar-wrapper,
.doe-listing-avail .hb-availability-calendar-centered,
.doe-listing-avail .hb-availability-calendar {
	display: block !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	width: 100% !important;
	margin: 0 !important;
}

.doe-listing-avail .hb-datepick-wrapper,
.doe-listing-avail .hb-dp-month-row {
	display: flex !important;
	width: 100% !important;
	border: 1px solid #e6e1d8 !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	background: #fff !important;
}

.doe-listing-avail .hb-dp-month {
	flex: 1 1 50% !important;
	float: none !important;
	width: auto !important;
	padding: 16px 14px !important;
	border: 0 !important;
	border-right: 1px solid #eee !important;
}

.doe-listing-avail .hb-dp-month:last-child {
	border-right: 0 !important;
}

.doe-listing-avail .hb-dp-cmd-prev.doe-dp-prev-locked,
.doe-listing-avail .hb-dp-cmd-prev.hb-dp-disabled {
	opacity: 0.28 !important;
	pointer-events: none !important;
}

.doe-availability .hb-dp-day-past,
.doe-availability .hb-dp-day-past a,
.doe-listing-avail .hb-dp-day-past,
.doe-listing-avail .hb-dp-day-past a {
	background: #ececec !important;
	color: #8d8d8d !important;
}

.doe-availability .hb-day-taken-start,
.doe-listing-avail .hb-day-taken-start {
	background: linear-gradient(135deg, #f7d7dc 50%, #e7f4ec 50%) !important;
}

.doe-availability .hb-day-taken-end,
.doe-listing-avail .hb-day-taken-end {
	background: linear-gradient(135deg, #e7f4ec 50%, #f7d7dc 50%) !important;
}

.doe-availability__hint {
	text-align: center;
	color: var(--doe-muted, #717171);
	font-size: 13px;
	margin: 12px 0 0;
}

.doe-listing-avail .hb-dp-day.hb-day-available,
.doe-listing-avail .hb-dp-day.hb-day-available a,
.doe-listing-avail .hb-day-taken-end,
.doe-listing-avail .hb-day-taken-start {
	cursor: pointer !important;
}

.doe-dates-locked .doe-listing-avail .hb-dp-day,
.doe-dates-locked .doe-listing-avail .hb-dp-day a,
.doe-dates-locked .doe-listing-avail .hb-day-taken-end,
.doe-dates-locked .doe-listing-avail .hb-day-taken-start,
.doe-listing-avail.doe-dates-locked .hb-dp-day,
.doe-listing-avail.doe-dates-locked .hb-dp-day a {
	cursor: default !important;
}

.doe-listing-avail .hb-dp-day.doe-dp-picked-in,
.doe-listing-avail .hb-dp-day.doe-dp-picked-out,
.doe-listing-avail .hb-dp-day.doe-dp-picked-in a,
.doe-listing-avail .hb-dp-day.doe-dp-picked-out a,
.doe-listing-avail .hb-dp-day.doe-dp-picked-in span,
.doe-listing-avail .hb-dp-day.doe-dp-picked-out span,
.doe-listing-avail .hb-day-available.doe-dp-picked-in,
.doe-listing-avail .hb-day-available.doe-dp-picked-out,
.doe-listing-avail .hb-day-available.doe-dp-picked-in a,
.doe-listing-avail .hb-day-available.doe-dp-picked-out a {
	background: #111111 !important;
	background-color: #111111 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	border-radius: 50% !important;
}

.doe-listing-avail .hb-dp-day.doe-dp-in-range,
.doe-listing-avail .hb-dp-day.doe-dp-in-range a,
.doe-listing-avail .hb-dp-day.doe-dp-in-range span,
.doe-listing-avail .hb-day-available.doe-dp-in-range,
.doe-listing-avail .hb-day-available.doe-dp-in-range a,
.doe-listing-avail .hb-day-available.doe-dp-in-range span {
	background: #dbe7ff !important;
	background-color: #dbe7ff !important;
	color: #111111 !important;
	-webkit-text-fill-color: #111111 !important;
	border-radius: 0 !important;
}

.doe-availability .hb-day-taken-start a,
.doe-availability .hb-day-taken-end a,
.doe-listing-avail .hb-day-taken-start a,
.doe-listing-avail .hb-day-taken-end a,
.doe-availability .hb-day-taken-start .hb-day-taken-content,
.doe-availability .hb-day-taken-end .hb-day-taken-content,
.doe-listing-avail .hb-day-taken-start .hb-day-taken-content,
.doe-listing-avail .hb-day-taken-end .hb-day-taken-content {
	background: transparent !important;
}

@media (max-width: 767px) {
	.doe-availability__panels {
		padding: 16px 8px 6px;
		border-radius: 16px;
	}

	.doe-availability__tab {
		font-size: 13px;
		padding: 8px 12px;
	}

	.doe-listing-avail .hb-datepick-wrapper,
	.doe-listing-avail .hb-dp-month-row {
		flex-direction: column;
	}

	.doe-listing-avail .hb-dp-month {
		border-right: 0 !important;
		border-bottom: 1px solid #eee !important;
	}

	.doe-listing-avail .hb-dp-month:last-child {
		border-bottom: 0 !important;
	}
}