/* bnjc/unit-page: the stay booking panel (drawer.js). It looks and behaves like the event booking drawer: a panel sliding in from the
   right on a desktop, a bottom sheet on a phone, three steps, one footer with the total and one button.
   Sizes, spacing and colours follow the approved booking panel mock-up. Tokens come from the theme; the fallbacks are the same
   palette values. Nothing here is under 16px. */

.bnjc-sd {
	--sd-navy: var(--navy, #191B6F);
	--sd-cream: var(--cream, #FFF8F1);
	--sd-berry: var(--berry, #811D5C);
	--sd-grey: var(--grey-700, #4A5560);
	--sd-rule: rgba(28, 36, 48, 0.16);
	--sd-ink-line: rgba(25, 27, 111, 0.28);
	--sd-display: var(--wp--preset--font-family--display, "Gyst", "Juana", Georgia, serif);
	--sd-body: var(--wp--preset--font-family--body, "Heebo", "Helvetica Neue", Arial, sans-serif);
	position: fixed;
	inset: 0;
	z-index: 60;
	font: 400 16px/1.5 var(--sd-body);
	color: var(--sd-navy);
}
.bnjc-sd[hidden] {
	display: none;
}
.bnjc-sd :is(p, small, h2, h3) {
	max-width: none;
	text-wrap: wrap;
}
.bnjc-sd *,
.bnjc-sd *::before,
.bnjc-sd *::after {
	box-sizing: border-box;
}
body.bnjc-sd-open {
	overflow: hidden;
}
.bnjc-sd__scrim {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(11, 12, 56, 0.35);
	opacity: 0;
	transition: opacity 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bnjc-sd[data-open="true"] .bnjc-sd__scrim {
	opacity: 1;
}
.bnjc-sd__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: min(480px, 100%);
	display: flex;
	flex-direction: column;
	background: var(--sd-cream);
	box-shadow: -24px 0 60px rgba(11, 12, 56, 0.35);
	transform: translateX(100%);
	transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
	outline: none;
}
[dir="rtl"] .bnjc-sd__panel {
	transform: translateX(-100%);
}
.bnjc-sd[data-open="true"] .bnjc-sd__panel {
	transform: none;
}
.bnjc-sd__grab {
	display: none;
	inline-size: 44px;
	block-size: 4px;
	margin: 8px auto 0;
	border-radius: 2px;
	background: rgba(28, 36, 48, 0.25);
}

/* Header: the unit's name, the dates under it, close (and back from step 2). */
.bnjc-sd__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 24px 4px;
}
.bnjc-sd__t {
	flex: 1;
	min-inline-size: 0;
}
.bnjc-sd__title {
	margin: 0;
	font: 700 26px/1.1 var(--sd-display);
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--sd-navy);
}
.bnjc-sd__sub {
	margin: 4px 0 0;
	color: var(--sd-grey);
}
.bnjc-sd__ico {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid var(--sd-rule);
	border-radius: 50%;
	background: transparent;
	color: var(--sd-navy);
	font: 400 22px/1 var(--sd-body);
	cursor: pointer;
}
.bnjc-sd__ico:hover {
	background: rgba(25, 27, 111, 0.06);
}
.bnjc-sd__ico[hidden] {
	display: none;
}
[dir="rtl"] .bnjc-sd__back {
	scale: -1 1;
}

/* Three segments, one for each step. */
.bnjc-sd__steps {
	display: flex;
	gap: 6px;
	margin: 14px 24px 0;
	padding: 0;
	list-style: none;
}
.bnjc-sd__steps li {
	flex: 1;
	block-size: 4px;
	border-radius: 2px;
	background: rgba(25, 27, 111, 0.14);
}
.bnjc-sd__steps li.is-on {
	background: var(--sd-navy);
}

.bnjc-sd__pad {
	flex: 1;
	min-block-size: 0;
	overflow: auto;
	padding: 22px 24px 24px;
}
.bnjc-sd__pad::-webkit-scrollbar {
	inline-size: 6px;
}
.bnjc-sd__pad::-webkit-scrollbar-thumb {
	background: rgba(25, 27, 111, 0.25);
	border-radius: 3px;
}
.bnjc-sd [hidden] {
	display: none !important;
}
.bnjc-sd__h {
	margin: 0 0 14px;
	font: 700 22px/1.2 var(--sd-display);
	letter-spacing: 0;
	text-transform: none;
	color: var(--sd-navy);
}
.bnjc-sd__fine {
	margin: 8px 0 0;
	color: var(--sd-grey);
}
.bnjc-sd__wait {
	margin: 24px 0;
	color: var(--sd-grey);
}
.bnjc-sd__notice {
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px solid var(--sd-rule);
	border-inline-start: 4px solid var(--sd-berry);
	border-radius: 4px;
	background: #fff;
	color: var(--sd-navy);
}
.bnjc-sd__notice a {
	color: var(--sd-navy);
	font-weight: 600;
}

/* The dates, with the photo: a row like the guests row under it. */
.bnjc-sd__row.is-dates {
	justify-content: flex-start;
	border-block-end: 0;
}
.bnjc-sd__row.is-dates > div:nth-child(2) {
	flex: 1;
	min-inline-size: 0;
}
.bnjc-sd__thumb {
	flex: none;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 8px;
	object-fit: cover;
	background: rgba(25, 27, 111, 0.08);
}
.bnjc-sd__link {
	display: inline-block;
	margin: 4px 0 0;
	padding: 12px 0 8px;
	border: 0;
	background: none;
	color: var(--sd-navy);
	font: 600 16px/1.3 var(--sd-body);
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}
a.bnjc-sd__link {
	color: var(--sd-navy);
}

/* A row with a name and a control on the right: the guests stepper. */
.bnjc-sd__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-block: 1px solid var(--sd-rule);
}
.bnjc-sd__name {
	display: block;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}
.bnjc-sd__sub2 {
	display: block;
	color: var(--sd-grey);
}
.bnjc-sd__stepper {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
}
.bnjc-sd__stepper button {
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid var(--sd-ink-line);
	border-radius: 50%;
	background: transparent;
	color: var(--sd-navy);
	font: 400 22px/1 var(--sd-body);
	cursor: pointer;
}
.bnjc-sd__stepper button.is-add {
	border-color: var(--sd-navy);
	background: var(--sd-navy);
	color: #fff;
}
.bnjc-sd__stepper button:disabled {
	opacity: 0.35;
	cursor: default;
}
.bnjc-sd__stepper output {
	min-inline-size: 30px;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
}

/* Sets of choices: the rate, the arrival time, the extras. */
.bnjc-sd__set {
	margin: 18px 0 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}
.bnjc-sd__set > legend {
	padding: 0;
	margin: 0 0 6px;
	color: var(--sd-grey);
	font-weight: 500;
}
.bnjc-sd__opt {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 14px;
	margin: 0 0 8px;
	border: 1px solid var(--sd-ink-line);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
}
.bnjc-sd__opt:has(input:checked) {
	border-color: var(--sd-navy);
	box-shadow: inset 0 0 0 1px var(--sd-navy);
}
.bnjc-sd__opt input {
	flex: none;
	inline-size: 24px;
	block-size: 24px;
	margin: 1px 0 0;
	accent-color: var(--sd-navy);
}
.bnjc-sd__opt .bnjc-sd__txt {
	flex: 1;
	min-inline-size: 0;
}
.bnjc-sd__opt b {
	display: block;
	font-weight: 600;
}
.bnjc-sd__opt small {
	display: block;
	color: var(--sd-grey);
	font-size: 16px;
}
.bnjc-sd__opt .bnjc-sd__amt {
	flex: none;
	font-weight: 600;
	white-space: nowrap;
	text-align: end;
}
.bnjc-sd__opt .bnjc-sd__amt small {
	max-inline-size: 9em;
	margin-inline-start: auto;
	font-weight: 400;
	white-space: normal;
}
.bnjc-sd__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bnjc-sd__chip {
	position: relative;
	display: inline-flex;
}
/* How the beds are set up: each room, its name, then its answers as chips. */
.bnjc-sd__bed + .bnjc-sd__bed {
	margin-block-start: 14px;
}
.bnjc-sd__bed > .bnjc-sd__name {
	margin: 0 0 8px;
	font-size: 16px;
}
.bnjc-sd__beds > .bnjc-sd__err:not([hidden]) {
	margin-block-start: 10px;
}
.bnjc-sd__chip input {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.bnjc-sd__chip span {
	display: inline-flex;
	align-items: center;
	block-size: 44px;
	padding: 0 16px;
	border: 1px solid var(--sd-ink-line);
	border-radius: 999px;
	background: transparent;
	color: var(--sd-navy);
	font: 600 16px/1 var(--sd-body);
}
.bnjc-sd__chip input:checked + span {
	border-color: var(--sd-navy);
	background: var(--sd-navy);
	color: #fff;
}
.bnjc-sd__chip input:focus-visible + span {
	outline: 3px solid var(--sd-navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}

/* Ticks. */
.bnjc-sd__check {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 7px 0;
	cursor: pointer;
}
.bnjc-sd__check input {
	flex: none;
	inline-size: 24px;
	block-size: 24px;
	margin: 1px 0 0;
	accent-color: var(--sd-navy);
}
.bnjc-sd__check small {
	display: block;
	color: var(--sd-grey);
	font-size: 16px;
}
.bnjc-sd__check b {
	font-weight: 600;
}
.bnjc-sd__check .bnjc-sd__amt {
	margin-inline-start: auto;
	font-weight: 600;
	white-space: nowrap;
}

/* The price in full. */
.bnjc-sd__sum {
	margin: 18px 0 16px;
	padding: 2px 16px;
	border: 1px solid var(--sd-rule);
	border-radius: 8px;
	background: #fff;
}
.bnjc-sd__sum > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-block-start: 1px solid var(--sd-rule);
}
.bnjc-sd__sum > div:first-child {
	border-block-start: 0;
}
.bnjc-sd__sum .is-who {
	color: var(--sd-grey);
}
.bnjc-sd__sum .is-total {
	font-weight: 600;
}
.bnjc-sd__sum .is-total span:last-child {
	font: 700 22px/1.15 var(--sd-display);
}
.bnjc-sd__sum .is-head {
	display: block;
}
.bnjc-sd__sum .is-head strong {
	display: block;
	font-weight: 600;
}
.bnjc-sd__sum .is-head span {
	color: var(--sd-grey);
}
.bnjc-sd__now {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: 8px;
	background: rgba(25, 27, 111, 0.07);
	color: var(--sd-navy);
}
.bnjc-sd__now strong {
	display: block;
	font-size: 18px;
	font-weight: 600;
}

/* Form fields. */
.bnjc-sd__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.bnjc-sd__field {
	display: block;
	margin: 0 0 18px;
}
.bnjc-sd__lab {
	display: block;
	margin: 0 0 6px;
	color: var(--sd-grey);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	font-size: 16px;
}
.bnjc-sd__in {
	display: block;
	inline-size: 100%;
	min-block-size: 52px;
	padding: 12px 14px;
	border: 1px solid var(--sd-ink-line);
	border-radius: 4px;
	background: #fff;
	color: var(--sd-navy);
	font: 400 16px/1.4 var(--sd-body);
	box-shadow: none;
}
.bnjc-sd__in::placeholder {
	color: #6b7480;
	opacity: 1;
}
textarea.bnjc-sd__in {
	resize: vertical;
	min-block-size: 52px;
	block-size: 52px;
}
.bnjc-sd__in[aria-invalid="true"] {
	border-color: var(--ink-warm, #A0002E);
	box-shadow: inset 0 0 0 1px var(--ink-warm, #A0002E);
}
.bnjc-sd__err {
	margin: 6px 0 0;
	color: var(--ink-warm, #A0002E);
	font-weight: 500;
}
.bnjc-sd__error {
	margin: 12px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--ink-warm, #A0002E);
	border-radius: 4px;
	background: #fff;
	color: var(--ink-warm, #A0002E);
	font-weight: 500;
}
.bnjc-sd__error[hidden] {
	display: none;
}
.bnjc-sd__others {
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}
.bnjc-sd__others > legend {
	padding: 0;
	margin: 0 0 10px;
	font-weight: 600;
}

/* "More details" and "Terms": the same plain expander. */
.bnjc-sd__more,
.bnjc-sd__terms {
	margin: 2px 0 0;
}
.bnjc-sd__more .bnjc-sd__set {
	margin-block: 4px 18px;
}
.bnjc-sd__more > summary,
.bnjc-sd__terms > summary {
	display: block;
	padding: 10px 0;
	list-style: none;
	cursor: pointer;
	color: var(--sd-navy);
	font-weight: 600;
}
.bnjc-sd__more > summary::-webkit-details-marker,
.bnjc-sd__terms > summary::-webkit-details-marker {
	display: none;
}
.bnjc-sd__more > summary::before,
.bnjc-sd__terms > summary::before {
	content: "+";
	display: inline-block;
	inline-size: 20px;
	font-weight: 700;
}
.bnjc-sd__more[open] > summary::before,
.bnjc-sd__terms[open] > summary::before {
	content: "\2013";
}
.bnjc-sd__terms {
	margin-block-start: 12px;
	border-block-start: 1px solid var(--sd-rule);
}
.bnjc-sd__terms p {
	margin: 0 0 8px;
	color: var(--sd-grey);
}
.bnjc-sd__terms b {
	color: var(--sd-navy);
	font-weight: 600;
}
.bnjc-sd__terms a {
	color: var(--sd-navy);
	font-weight: 600;
}

/* The card. */
.bnjc-sd__card {
	min-block-size: 120px;
	margin: 6px 0 0;
}
.bnjc-sd__trust {
	margin: 12px 0 0;
	display: grid;
	gap: 4px;
}
.bnjc-sd__trust p {
	margin: 0;
	color: var(--sd-grey);
}
.bnjc-sd__trust svg {
	inline-size: 16px;
	block-size: 16px;
	margin-inline-end: 6px;
	vertical-align: -2px;
}

/* One footer: the total and the one button. */
.bnjc-sd__foot {
	flex: none;
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 12px 24px;
	border-block-start: 1px solid var(--sd-rule);
	background: #fff;
}
.bnjc-sd__total {
	display: flex;
	flex-direction: column;
	min-inline-size: 78px;
	line-height: 1.2;
}
.bnjc-sd__count {
	color: var(--sd-grey);
}
.bnjc-sd__total strong {
	font: 700 22px/1.15 var(--sd-display);
	color: var(--sd-navy);
}
.bnjc-sd__cta {
	flex: 1;
	min-inline-size: 0;
	block-size: 52px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: var(--sd-navy);
	color: #fff;
	font: 600 16px var(--sd-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}
.bnjc-sd__cta:hover {
	background: var(--navy-deep, #12134F);
}
.bnjc-sd__cta:disabled {
	opacity: 0.45;
	cursor: default;
}
.bnjc-sd__cta.is-busy {
	cursor: progress;
}
.bnjc-sd__cta.is-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.bnjc-sd__ghost {
	flex: none;
	block-size: 52px;
	padding: 0 20px;
	border: 1px solid var(--sd-navy);
	border-radius: 999px;
	background: transparent;
	color: var(--sd-navy);
	font: 600 16px var(--sd-body);
	cursor: pointer;
}

.bnjc-sd :is(.bnjc-sd__in, .bnjc-sd__ico, .bnjc-sd__stepper button, .bnjc-sd__cta, .bnjc-sd__ghost, .bnjc-sd__link, .bnjc-sd__check input, .bnjc-sd__opt input):focus-visible,
.bnjc-sd summary:focus-visible {
	outline: 3px solid var(--sd-navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}
.bnjc-sd__sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
	.bnjc-sd__cta,
	.bnjc-sd__ico {
		transition: background 150ms, color 150ms;
	}
}
@media (prefers-reduced-motion: reduce) {
	.bnjc-sd__scrim,
	.bnjc-sd__panel {
		transition: none;
	}
}

/* A phone: the bottom sheet. */
@media (max-width: 599px) {
	.bnjc-sd__panel {
		inset-block-start: auto;
		inline-size: 100%;
		max-block-size: 92vh;
		max-block-size: 92dvh;
		block-size: 92vh;
		block-size: 92dvh;
		border-radius: 10px 10px 0 0;
		transform: translateY(100%);
	}
	.bnjc-sd[data-open="true"] .bnjc-sd__panel {
		transform: none;
	}
	.bnjc-sd__grab {
		display: block;
	}
	.bnjc-sd__head {
		padding: 12px 20px 2px;
	}
	.bnjc-sd__steps {
		margin-inline: 20px;
	}
	.bnjc-sd__pad {
		padding: 20px 20px 24px;
	}
	.bnjc-sd__foot {
		padding: 12px 20px 22px;
	}
	.bnjc-sd__foot.is-basket {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 10px;
	}
	.bnjc-sd__foot.is-basket > * {
		flex: none;
	}
}

/* The unit page's booking box: "Add to basket" is a plain text link under Reserve. */
.bnjc-unit__basket {
	grid-column: 1 / -1;
	margin: 0;
	text-align: center;
}
.bnjc-unit__basket[hidden] {
	display: none;
}
.bnjc-unit__basketbtn {
	padding: 10px 4px;
	border: 0;
	background: none;
	color: var(--navy);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}
.bnjc-unit__basketbtn:focus-visible {
	outline: 2px solid var(--focus-ring, var(--navy));
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--focus-halo, var(--white));
}
.bnjc-unit__basketsay {
	display: block;
	color: var(--grey-700);
}
.bnjc-unit__basketsay a {
	color: var(--navy);
	font-weight: 600;
}
.bnjc-unit__basketsay:empty {
	display: none;
}
/* On a phone the bar stays short: the link shows once the sheet is open. */
@media (max-width: 959px) {
	.bnjc-unit__book:not(.is-open) .bnjc-unit__basket {
		display: none;
	}
	.is-open .bnjc-unit__basket {
		grid-row: 5;
	}
}

/* The plain statement that the button accepts the terms (shown above the Terms expander). */
.bnjc-sd__agree {
	margin: 0 0 8px;
	font-size: 16px;
	color: var(--wp--preset--color--navy, #1b1f6b);
}