/* The calendar for a stay (date-picker.js). Used on pages with different stylesheets: every colour has its fallback */

.dp {
	--dp-accent: var(--brand-orange, #ffc233);
	--dp-on-accent: var(--brand-on-orange, #1c1917);
	--dp-soft: var(--brand-orange-soft, #fff4d6);
	--dp-text: var(--nav-text-strong, #0f172a);
	--dp-muted: var(--nav-text, #475569);
	--dp-line: var(--bs-border-color, #e2e8f0);
	--dp-surface: var(--bs-surface, #fff);
	box-sizing: border-box;
	width: min(42rem, calc(100vw - 2rem));
	max-height: calc(100dvh - 2rem);
	margin: auto;
	padding: 0;
	overflow: hidden auto;
	font-family: "DM Sans", system-ui, sans-serif;
	color: var(--dp-text);
	background: var(--dp-surface);
	border: 0;
	border-radius: 16px;
	box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .45);
}
.dp::backdrop { background: rgba(15, 23, 42, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dp *, .dp *::before { box-sizing: border-box; }
.dp button { font: inherit; color: inherit; cursor: pointer; }

.dp-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem .5rem; }
.dp-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: inherit; }
.dp-close, .dp-nav {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
}
.dp-close:hover, .dp-nav:not(:disabled):hover { background: var(--dp-soft); }
.dp-close { margin-right: -.6rem; }

.dp-ends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: 0 1.25rem; }
.dp-end { display: flex; gap: .5rem; align-items: stretch; min-width: 0; }
.dp-end-date {
	flex: 1;
	min-width: 0;
	padding: .45rem .75rem;
	text-align: left;
	background: none;
	border: 2px solid var(--dp-line);
	border-radius: 10px;
}
.dp-end-date.is-active { background: var(--dp-soft); border-color: var(--dp-accent); }
.dp-end-date small { display: block; font-size: .72rem; font-weight: 600; color: var(--dp-muted); }
.dp-end-date strong { display: block; overflow: hidden; font-size: .95rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dp-end select.bk-input { flex: none; width: 5.75rem; height: auto; min-height: 3.25rem; padding: 0 1.5rem 0 .6rem; background-position: right .5rem center; border-width: 2px; border-radius: 10px; }

.dp-body { position: relative; padding: .75rem 1.25rem .25rem; }
.dp-nav { position: absolute; top: .55rem; left: .9rem; z-index: 1; }
.dp-next { right: .9rem; left: auto; }
.dp-nav:disabled { opacity: .3; cursor: default; }
.dp-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.dp table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dp caption { height: 2.25rem; padding: 0; font-size: .95rem; font-weight: 700; line-height: 2.25rem; text-align: center; text-transform: capitalize; color: inherit; caption-side: top; }
.dp th { height: 2rem; padding: 0; font-size: .72rem; font-weight: 600; text-align: center; text-transform: capitalize; color: var(--dp-muted); }
.dp td { height: 2.5rem; padding: 0; text-align: center; }
.dp td.is-range { background: var(--dp-soft); }
.dp td.is-range:has(.is-start) { border-radius: 50% 0 0 50%; }
.dp td.is-range:has(.is-end) { border-radius: 0 50% 50% 0; }
.dp td.is-range:has(.is-start.is-end) { background: none; }
.dp-day {
	width: 2.5rem;
	max-width: 100%;
	height: 2.5rem;
	padding: 0;
	font-size: .9rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	background: none;
	border: 0;
	border-radius: 50%;
}
.dp-day:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--dp-accent); }
.dp-day:focus-visible { outline: 2px solid var(--bs-primary, #2563eb); outline-offset: 1px; }
.dp-day:disabled { color: var(--dp-muted); opacity: .4; cursor: default; }
.dp-day.is-today { font-weight: 800; text-decoration: underline; text-underline-offset: .2em; }
.dp-day.is-start, .dp-day.is-end { font-weight: 700; color: var(--dp-on-accent); background: var(--dp-accent); }

.dp-foot { position: sticky; bottom: 0; display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: .75rem 1.25rem; background: var(--dp-surface); border-top: 1px solid var(--dp-line); }
.dp-length { font-weight: 600; color: var(--dp-muted); }
.dp .dp-done { min-height: 2.75rem; padding: 0 1.75rem; font-weight: 700; color: #fff; background: var(--bs-primary, #2563eb); border: 0; border-radius: 999px; }

/* Fields replacing the browser's date input on the public pages */
.dp-field, .pp-search .dp-field { display: flex; gap: .5rem; align-items: center; justify-content: flex-start; width: 100%; text-align: left; cursor: pointer; }
.dp-field i { color: var(--brand-orange-text, #8a5a00); }

/* A phone: one month, in a sheet from the bottom within reach of the thumb */
@media (max-width: 43.99rem) {
	.dp { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 16px 16px 0 0; max-height: 92dvh; }
	.dp-months { grid-template-columns: minmax(0, 1fr); }
	.dp-ends { gap: .5rem; padding: 0 1rem; }
	.dp-end { flex-direction: column; gap: .35rem; }
	.dp-end select.bk-input { width: 100%; min-height: 2.75rem; }
	.dp-body { padding: .5rem 1rem 0; }
	.dp-nav { left: .6rem; top: .35rem; }
	.dp-next { right: .6rem; left: auto; }
	.dp td, .dp-day { height: 2.75rem; }
	.dp-day { width: 2.75rem; }
	.dp-foot { padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); }
}