/* ==========================================================================
   Booking: the ticket drawer's "Save it, share it" panel, the "First time at
   BNJC" tick, the "About you" block on page 1, and the share button on events
   with nothing to book (14 Oct 2026 edits).
   Loads after components.css (see inc/assets.php). Colours, sizes, spacing and
   radii are the theme.json tokens, none hard-coded.
   ========================================================================== */

/* ---- Events with nothing to book: the button that opens the drawer ------------------ */
/* The event details block has no button for a free event or one booked elsewhere,
   so the drawer brings its own, quiet and centred under the page content. */
.bnjc-drawer-trigger {
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	text-align: center;
}

.bnjc-drawer-trigger__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	padding-inline: var(--wp--preset--spacing--60);
	border: 1.5px solid var(--navy);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--navy);
	font: inherit;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: var(--wp--custom--typography--tracking-pill);
	text-transform: uppercase;
	cursor: pointer;
	transition: var(--transition-control);
}

.bnjc-drawer-trigger__btn:hover {
	background: var(--navy);
	color: var(--white);
}

.bnjc-drawer-trigger__btn:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* ---- Page 1: tickets, then who you are ---------------------------------------------- */
.bnjc-share__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 700;
	letter-spacing: var(--wp--custom--typography--tracking-pill);
	text-transform: uppercase;
	color: var(--grey-700);
}

/* ---- Save it, share it ---------------------------------------------------------------- */
.bnjc-share {
	margin-block-start: var(--wp--preset--spacing--60);
}

.bnjc-share__lead {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	color: var(--grey-700);
}

.bnjc-share__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--50);
}

.bnjc-share--friend .bnjc-share__title:not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* One kind of control for all three actions: a 44px pill, outlined in navy. */
.bnjc-share .bnjc-addcal > summary,
.bnjc-share__email > summary,
.bnjc-share__wa,
.bnjc-share-more > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	min-block-size: 44px;
	padding-inline: var(--wp--preset--spacing--60);
	border: 1.5px solid var(--navy);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--navy);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: var(--wp--custom--typography--tracking-pill);
	text-transform: uppercase;
	text-decoration: none;
	list-style: none;
	cursor: pointer;
	box-sizing: border-box;
}

.bnjc-share__email > summary::-webkit-details-marker,
.bnjc-share-more > summary::-webkit-details-marker {
	display: none;
}

/* WhatsApp is the one filled control: it is the action we most want after a booking. */
.bnjc-share__wa {
	justify-content: center;
	background: var(--navy);
	color: var(--white);
}

.bnjc-share__wa:hover {
	background: var(--navy-deep);
	color: var(--white);
}

.bnjc-share .bnjc-addcal,
.bnjc-share__email {
	display: block;
}

.bnjc-share .bnjc-addcal > summary:hover,
.bnjc-share__email > summary:hover,
.bnjc-share-more > summary:hover {
	background: var(--wp--custom--color--hover-wash);
	text-decoration: none;
}

.bnjc-share .bnjc-addcal > summary:focus-visible,
.bnjc-share__email > summary:focus-visible,
.bnjc-share__wa:focus-visible,
.bnjc-share-more > summary:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* Inside the drawer the calendar list opens in the flow, not as a floating menu:
   the panel scrolls, and a floating list gets clipped by it. */
.bnjc-share .bnjc-addcal__list {
	position: static;
	min-inline-size: 0;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: var(--wp--preset--spacing--20);
	background: var(--white);
	border-radius: var(--radius-xs);
	box-shadow: none;
	border: 1px solid var(--grey-300);
}

.bnjc-share .bnjc-addcal__list a {
	min-block-size: 44px;
	display: flex;
	align-items: center;
}

.bnjc-share__emailbody {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--40) 0;
}

.bnjc-share__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.bnjc-share__status {
	margin: 0;
	min-block-size: 1.5em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--navy);
}

.bnjc-share__status.is-bad {
	color: var(--berry);
}

/* The decoy field for scripts. Off the page, out of the tab order, not display:none (a script would skip that). */
.bnjc-share__trap {
	position: absolute;
	inset-inline-start: -10000px;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	pointer-events: none;
}

/* The same panel tucked under page 1, so every event offers it. */
.bnjc-share-more {
	margin-block-start: var(--wp--preset--spacing--60);
}

.bnjc-share-more > summary {
	border-color: var(--grey-300);
	color: var(--ink);
}

.bnjc-share-more[open] > summary {
	margin-block-end: var(--wp--preset--spacing--30);
}

.bnjc-share-more .bnjc-share {
	margin-block-start: 0;
}

.bnjc-drawer__notice[data-test-banner] {
	font-weight: 700;
}

/* ==========================================================================
   The booking flow (22 Oct 2026): Choose, Your details, Pay, You're booked.
   One date per booking, a date picker for a series, each event's own questions,
   the reference on the last step, and the booking card as one button.
   ========================================================================== */

/* ---- The date picker: a radio group of the next open dates ------------------------- */
.bnjc-datepick-group {
	min-inline-size: 0;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
	border: 0;
}

.bnjc-datepick-group > legend {
	padding: 0;
	margin-block-end: var(--wp--preset--spacing--30);
	color: var(--grey-700);
}

.bnjc-datepick {
	display: grid;
	grid-template-columns: 28px 1fr;
	align-items: center;
	gap: 2px var(--wp--preset--spacing--30);
	min-block-size: 56px;
	margin-block-end: var(--wp--preset--spacing--20);
	padding: 10px var(--wp--preset--spacing--40);
	border: 1.5px solid var(--wp--preset--color--grey-300);
	border-radius: var(--radius-xs);
	background: var(--white);
	cursor: pointer;
	box-sizing: border-box;
}

.bnjc-datepick[hidden] {
	display: none;
}

.bnjc-datepick input {
	grid-row: 1 / span 2;
	inline-size: 24px;
	block-size: 24px;
	margin: 0;
	accent-color: var(--navy);
}

.bnjc-datepick__main {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--ink);
}

.bnjc-datepick__meta {
	grid-column: 2;
	font-size: var(--wp--preset--font-size--small);
	color: var(--grey-700);
}

.bnjc-datepick:has(input:checked) {
	border-color: var(--navy);
	border-width: 2px;
	padding: 9px calc(var(--wp--preset--spacing--40) - 0.5px);
}

.bnjc-datepick:has(input:focus-visible) {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--focus-halo);
}

.bnjc-datepick__more {
	margin-block-start: var(--wp--preset--spacing--20);
}

.bnjc-drawer__deadline {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-weight: 700;
	color: var(--ink);
}

/* ---- Details step: that event's own questions --------------------------------------- */
.bnjc-drawer__q {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.bnjc-drawer__q > legend {
	padding: 0;
	margin-block-end: var(--wp--preset--spacing--20);
	color: var(--grey-700);
}

.bnjc-drawer__q.is-invalid > legend {
	color: var(--berry);
}

.bnjc-drawer__q .bnjc-drawer__hint {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.bnjc-drawer__optional {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.bnjc-drawer__yesno {
	display: flex;
	gap: var(--wp--preset--spacing--40);
}

.bnjc-drawer__choice {
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.bnjc-drawer__choice label {
	max-inline-size: 100%;
	padding-block: var(--wp--preset--spacing--20);
}

.bnjc-drawer__yesno label {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-block-size: 44px;
	padding-inline: var(--wp--preset--spacing--40);
	border: 1.5px solid var(--wp--preset--color--grey-300);
	border-radius: var(--radius-pill);
	background: var(--white);
	cursor: pointer;
}

.bnjc-drawer__yesno input {
	inline-size: 22px;
	block-size: 22px;
	margin: 0;
	accent-color: var(--navy);
}

.bnjc-drawer__child {
	align-items: end;
	margin-block-end: var(--wp--preset--spacing--30);
}

.bnjc-drawer__linkbtn {
	justify-self: start;
	min-block-size: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--navy);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.bnjc-drawer__promobox .bnjc-drawer__field-error,
.bnjc-drawer__promobox .bnjc-drawer__promo-ok {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* ---- You're booked: the reference, big ---------------------------------------------- */
.bnjc-drawer__ref {
	display: grid;
	gap: 2px;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	background: var(--white);
	border-inline-start: 4px solid var(--navy);
	max-inline-size: none;
}

.bnjc-drawer__ref .bnjc-overline {
	margin: 0;
	color: var(--grey-700);
}

.bnjc-drawer__ref strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-s);
	letter-spacing: var(--wp--custom--typography--tracking-display);
	color: var(--navy);
	overflow-wrap: anywhere;
}

.bnjc-drawer__ref-note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--grey-700);
}

.bnjc-share--list {
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--grey-300);
}

.bnjc-share--list .bnjc-drawer__field {
	margin-block-end: var(--wp--preset--spacing--30);
}

/* ---- Without JavaScript: how to book, and a link for each open date ------------------- */
.bnjc-drawer-noscript {
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	background: var(--white);
	border-inline-start: 4px solid var(--navy);
	font-size: var(--wp--preset--font-size--small);
}

.bnjc-drawer-noscript p {
	margin: 0 0 var(--wp--preset--spacing--30);
	max-inline-size: none;
}

.bnjc-drawer-noscript__dates {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnjc-drawer-noscript__dates li {
	padding-block: var(--wp--preset--spacing--20);
}

.bnjc-drawer-noscript__dates a {
	display: inline-block;
	min-block-size: 44px;
	line-height: 44px;
	font-weight: 700;
	color: var(--navy);
}

/* ---- The booking card is one button (bookable) or plain links (nothing to book) ------- */
.bnjc-booking .bnjc-booking__utilities {
	gap: 0;
}

.bnjc-booking .bnjc-booking__link,
.bnjc-booking .bnjc-booking__utilities .bnjc-addcal > summary,
.bnjc-booking .bnjc-booking__utilities .bnjc-booking__directions {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	min-block-size: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--navy);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.bnjc-booking .bnjc-booking__link[hidden] {
	display: none;
}

.bnjc-booking .bnjc-booking__link:hover,
.bnjc-booking .bnjc-booking__utilities .bnjc-addcal > summary:hover,
.bnjc-booking .bnjc-booking__utilities .bnjc-booking__directions:hover {
	background: none;
	color: var(--navy-deep);
}

/* ==========================================================================
   One page for the order, a page for who is coming, and more ways to tell a friend
   (22 Oct 2026, drawerflow). Page 1 carries the tickets, the promo code, the order
   and the first person's details with the one unticked box to hear about events.
   ========================================================================== */

/* A link in a small print line is still a 44px target on a phone: the privacy notice, the refunds page. */
.bnjc-drawer__hint a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

/* ---- Tell a friend: a grid of 44px targets ---------------------------------------------- */
.bnjc-sharegrid {
	display: grid;
	/* Two to a row on a phone (a panel is about 320px wide inside its padding); the words wrap before a target shrinks. */
	grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
}

.bnjc-sharegrid > li {
	min-inline-size: 0;
}

.bnjc-sharebtn {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
	min-block-size: 44px;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1.5px solid var(--navy);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--navy);
	font: inherit;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	line-height: 1.2;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}

.bnjc-sharebtn__icon {
	flex: none;
	inline-size: 20px;
	block-size: 20px;
}

.bnjc-sharebtn:hover {
	background: var(--wp--custom--color--hover-wash);
	color: var(--navy);
	text-decoration: none;
}

.bnjc-sharebtn:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--focus-halo);
}

/* The phone's own share sheet is the one filled control: it reaches every app the guest has. */
.bnjc-sharebtn.is-primary {
	background: var(--navy);
	color: var(--white);
}

.bnjc-sharebtn.is-primary:hover {
	background: var(--navy-deep);
	color: var(--white);
}

/* In the share-only drawer the email form sits after the row. */
.bnjc-share__actions--after {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* ==========================================================================
   The booking drawer, redesigned (3 Nov 2026): three short steps (Tickets, Your details, Confirm), calm and quiet.
   One spacing scale for everything inside it, set once on .bnjc-drawer:
     --d-1 4px  a label to its field        --d-4 16px  between fields, the footer's padding
     --d-2 8px  small gaps, a pill to a pill --d-5 24px  between groups, the side gutter
     --d-3 12px a heading to its content     --d-6 32px  (spare)
   Groups are spaced with flex/grid gap, never stacked margins, so nothing doubles up. Every row starts at the same left edge
   (the gutter). Type: 16px is the floor and the running size; ticket names 18px; headings in the display face. Controls are 44px
   or more. These come after components.css and win by coming later and by the extra class in front.
   ========================================================================== */
.bnjc-drawer {
	--d-1: 4px;
	--d-2: 8px;
	--d-3: 12px;
	--d-4: 16px;
	--d-5: 24px;
	--d-6: 32px;
	--d-gut: 24px;
	--d-rule: rgba(28, 36, 48, 0.16);
	--d-line: rgba(25, 27, 111, 0.28);
}

@media (max-width: 599px) {
	.bnjc-drawer {
		--d-gut: 20px;
	}
}

.bnjc-drawer .bnjc-drawer__panel {
	color: var(--navy);
	font-size: 16px;
	line-height: 1.5;
}

/* Head: the event (or the screen's own title), a quiet line under it, back and close. */
.bnjc-drawer .bnjc-drawer__head {
	align-items: center;
	gap: var(--d-3);
	padding: var(--d-5) var(--d-gut) 0;
	border: 0;
}

.bnjc-drawer .bnjc-drawer__headtext {
	flex: 1;
	min-inline-size: 0;
}

.bnjc-drawer .bnjc-drawer__title {
	margin: 0;
	font-size: 26px;
	line-height: 1.1;
	color: var(--navy);
}

.bnjc-drawer .bnjc-drawer__sub {
	margin: var(--d-1) 0 0;
	color: var(--grey-700);
	font-size: 16px;
}

.bnjc-drawer .bnjc-drawer__close,
.bnjc-drawer .bnjc-drawer__backbtn {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid var(--d-rule);
	border-radius: 50%;
	background: transparent;
	color: var(--navy);
	font: 400 22px/1 var(--wp--preset--font-family--body);
	cursor: pointer;
}

.bnjc-drawer .bnjc-drawer__close:hover,
.bnjc-drawer .bnjc-drawer__backbtn:hover {
	background: rgba(25, 27, 111, 0.06);
}

/* Three plain segments: no numbers, no names. */
.bnjc-drawer .bnjc-drawer__steps {
	display: flex;
	gap: 6px;
	margin: var(--d-4) var(--d-gut) 0;
	padding: 0;
	list-style: none;
}

.bnjc-drawer .bnjc-drawer__steps li {
	flex: 1;
	block-size: 4px;
	border-radius: 2px;
	background: rgba(25, 27, 111, 0.14);
}

.bnjc-drawer .bnjc-drawer__steps li.is-on {
	background: var(--navy);
}

/* The scrolling area: groups 24px apart, the same gutter either side. */
.bnjc-drawer .bnjc-drawer__pad {
	display: flex;
	flex-direction: column;
	gap: var(--d-5);
	padding: var(--d-5) var(--d-gut);
}

.bnjc-drawer .bnjc-drawer__sec {
	display: flex;
	flex-direction: column;
	gap: var(--d-3);
	min-inline-size: 0;
}

.bnjc-drawer .bnjc-drawer__sec > * {
	margin-block: 0;
}

.bnjc-drawer .bnjc-drawer__h {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--navy);
}

.bnjc-drawer .bnjc-drawer__lab,
.bnjc-drawer .bnjc-overline {
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.4;
	color: var(--grey-700);
}

.bnjc-drawer .bnjc-drawer__fine,
.bnjc-drawer .bnjc-drawer__hint {
	margin: 0;
	max-inline-size: none;
	font-size: 16px;
	color: var(--grey-700);
}

.bnjc-drawer .bnjc-drawer__notice {
	margin: 0;
	font-size: 16px;
}

/* Ticket rows: name and price on the left, the stepper on the right. */
.bnjc-drawer .bnjc-tickets {
	margin: 0;
	padding: 0;
	border-block-start: 1px solid var(--d-rule);
}

.bnjc-drawer .bnjc-ticket {
	gap: var(--d-4);
	padding: var(--d-3) 0;
	border-block-end: 1px solid var(--d-rule);
}

.bnjc-drawer .bnjc-ticket__info {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-inline-size: 0;
}

.bnjc-drawer .bnjc-ticket__name {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.bnjc-drawer .bnjc-ticket__price,
.bnjc-drawer .bnjc-ticket__desc {
	font-size: 16px;
	color: var(--grey-700);
}

.bnjc-drawer .bnjc-ticket__gone {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--grey-700);
}

/* Several ticket types: one quiet row each. Name on the left, price on the right, the stepper after it. */
.bnjc-drawer .bnjc-tickets.is-compact .bnjc-ticket {
	padding-block: var(--d-2);
}

.bnjc-drawer .bnjc-tickets.is-compact .bnjc-ticket__info {
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0 var(--d-3);
}

.bnjc-drawer .bnjc-tickets.is-compact .bnjc-ticket__name {
	font-size: 16px;
}

.bnjc-drawer .bnjc-tickets.is-compact .bnjc-ticket__price {
	margin-inline-start: auto;
	color: var(--navy);
	font-weight: 600;
}

.bnjc-drawer .bnjc-tickets.is-compact .bnjc-ticket__desc {
	flex-basis: 100%;
}

.bnjc-drawer .bnjc-stepper {
	flex: none;
	gap: 6px;
}

.bnjc-drawer .bnjc-step {
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid var(--d-line);
	font: 400 22px/1 var(--wp--preset--font-family--body);
}

.bnjc-drawer .bnjc-step.is-add {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.bnjc-drawer .bnjc-stepper output {
	min-inline-size: 28px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}

.bnjc-drawer .bnjc-drawer__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px var(--d-3);
	margin: 0;
	font-size: 16px;
	color: var(--grey-700);
}

.bnjc-drawer .bnjc-drawer__link {
	align-self: flex-start;
	min-block-size: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--navy);
	font: 600 16px/1.3 var(--wp--preset--font-family--body);
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

.bnjc-drawer .bnjc-drawer__link[disabled] {
	opacity: 0.45;
	cursor: default;
}

/* Expanders (Add a code, More details, Terms and privacy): a plus drawn in CSS that turns into a minus when open. */
.bnjc-drawer details > summary {
	display: flex;
	align-items: center;
	gap: var(--d-3);
	min-block-size: 44px;
	color: var(--navy);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.bnjc-drawer details > summary::-webkit-details-marker {
	display: none;
}

.bnjc-drawer .bnjc-drawer__plus {
	position: relative;
	flex: none;
	inline-size: 20px;
	block-size: 20px;
}

.bnjc-drawer .bnjc-drawer__plus::before,
.bnjc-drawer .bnjc-drawer__plus::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 14px;
	block-size: 2px;
	margin: -1px 0 0 -7px;
	border-radius: 1px;
	background: currentColor;
	transition: transform 0.15s;
}

.bnjc-drawer .bnjc-drawer__plus::after {
	transform: rotate(90deg);
}

.bnjc-drawer details[open] > summary .bnjc-drawer__plus::after {
	transform: rotate(0deg);
}

.bnjc-drawer .bnjc-drawer__codebody {
	display: grid;
	gap: var(--d-2);
	padding-block-start: var(--d-2);
}

.bnjc-drawer .bnjc-drawer__promo {
	display: flex;
	align-items: center;
	gap: var(--d-2);
}

.bnjc-drawer .bnjc-drawer__promo > span {
	color: var(--grey-700);
}

.bnjc-drawer .bnjc-drawer__promo input {
	flex: 1;
	min-inline-size: 0;
}

.bnjc-drawer .bnjc-drawer__apply,
.bnjc-drawer .bnjc-drawer__secondary {
	flex: none;
	min-block-size: 52px;
	padding-inline: 20px;
	border: 1px solid var(--navy);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--navy);
	font: 600 16px/1 var(--wp--preset--font-family--body);
	letter-spacing: 0;
	text-transform: none;
}

.bnjc-drawer .bnjc-drawer__promo-ok,
.bnjc-drawer .bnjc-drawer__field-error {
	margin: 0;
	font-size: 16px;
}

.bnjc-drawer .bnjc-drawer__promo-ok {
	color: var(--wp--preset--color--green, #004335);
}

/* Fields: a label tight to its box (4px), 16px between fields. */
.bnjc-drawer .bnjc-drawer__fields {
	display: grid;
	gap: var(--d-4);
	min-inline-size: 0;
}

.bnjc-drawer .bnjc-drawer__form {
	gap: var(--d-4);
}

.bnjc-drawer .bnjc-drawer__pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--d-4);
}

.bnjc-drawer .bnjc-drawer__field {
	display: grid;
	gap: var(--d-1);
	min-inline-size: 0;
	align-content: start;
}

.bnjc-drawer .bnjc-drawer__field label {
	display: block;
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.4;
	color: var(--grey-700);
}

.bnjc-drawer .bnjc-drawer__field input,
.bnjc-drawer .bnjc-drawer__field textarea,
.bnjc-drawer .bnjc-drawer__field select,
.bnjc-drawer .bnjc-drawer__promo input {
	box-sizing: border-box;
	display: block;
	inline-size: 100%;
	min-block-size: 52px;
	padding: var(--d-3) 14px;
	border: 1px solid var(--d-line);
	border-radius: 4px;
	background: #fff;
	font: 400 16px/1.4 var(--wp--preset--font-family--body);
	color: var(--navy);
}

.bnjc-drawer .bnjc-drawer__field textarea {
	min-block-size: 52px;
	block-size: 52px;
	resize: vertical;
}

.bnjc-drawer .bnjc-drawer__field input::placeholder,
.bnjc-drawer .bnjc-drawer__field textarea::placeholder,
.bnjc-drawer .bnjc-drawer__promo input::placeholder {
	color: var(--grey-700);
	opacity: 1;
}

.bnjc-drawer .bnjc-drawer__field select {
	appearance: none;
	padding-inline-end: 38px;
	color: var(--grey-700);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none' stroke='%23191B6F' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
}

.bnjc-drawer .bnjc-drawer__field.is-invalid input,
.bnjc-drawer .bnjc-drawer__field.is-invalid textarea,
.bnjc-drawer .bnjc-drawer__code.is-invalid input {
	border-color: var(--berry);
}

.bnjc-drawer .bnjc-drawer__guests,
.bnjc-drawer .bnjc-drawer__q {
	display: grid;
	gap: var(--d-4);
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.bnjc-drawer .bnjc-drawer__q > legend {
	padding: 0;
	margin-block-end: var(--d-2);
	color: var(--grey-700);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.bnjc-drawer .bnjc-drawer__guest {
	display: grid;
	gap: var(--d-2);
}

/* Ticks: a 24px box in a 44px row, the words beside it, an optional quiet line under the words. */
.bnjc-drawer .bnjc-drawer__checks {
	display: grid;
	gap: var(--d-1);
}

.bnjc-drawer .bnjc-drawer__check {
	display: flex;
	align-items: flex-start;
	gap: var(--d-3);
	min-block-size: 44px;
	padding: 10px 0;
	cursor: pointer;
}

.bnjc-drawer .bnjc-drawer__check input {
	flex: none;
	inline-size: 24px;
	block-size: 24px;
	margin: 0;
	accent-color: var(--navy);
}

.bnjc-drawer .bnjc-drawer__check small {
	display: block;
	font-size: 16px;
	color: var(--grey-700);
}

.bnjc-drawer .bnjc-drawer__check b {
	font-weight: 600;
}

/* The donation: one tick; amounts on ONE line once ticked (five pills fit at 360px, so the gaps and padding are small). */
.bnjc-drawer .bnjc-drawer__donate {
	margin: 0;
	padding: 0;
	border: 0;
	gap: var(--d-2);
}

.bnjc-drawer .bnjc-drawer__donate[hidden] {
	display: none;
}

.bnjc-drawer .bnjc-drawer__donate-panel {
	display: grid;
	gap: var(--d-2);
}

.bnjc-drawer .bnjc-drawer__donate-panel[hidden] {
	display: none;
}

.bnjc-drawer .bnjc-drawer__donate-chips {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.bnjc-drawer .bnjc-drawer__chip {
	position: relative;
	display: block;
	flex: 0 1 auto;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.bnjc-drawer .bnjc-drawer__chip input {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.bnjc-drawer .bnjc-drawer__chip span[aria-hidden],
.bnjc-drawer .bnjc-drawer__chip > span:first-of-type {
	display: grid;
	place-items: center;
	min-block-size: 44px;
	min-inline-size: 44px;
	padding: 0 10px;
	border: 1px solid var(--d-line);
	border-radius: 999px;
	background: transparent;
	color: var(--navy);
	font: 600 16px/1 var(--wp--preset--font-family--body);
	white-space: nowrap;
}

.bnjc-drawer .bnjc-drawer__chip input:checked + span {
	border-color: var(--navy);
	background: var(--navy);
	color: #fff;
}

.bnjc-drawer .bnjc-drawer__chip input:focus-visible + span {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px #fff;
}

.bnjc-drawer .bnjc-drawer__donate-other[hidden] {
	display: none;
}

.bnjc-drawer .bnjc-drawer__donate-other .bnjc-drawer__promo {
	max-inline-size: 180px;
}

@media (min-width: 600px) {
	/* Wider panels line the amounts up under the words of the tick, as the design has them. */
	.bnjc-drawer .bnjc-drawer__donate-panel {
		margin-inline-start: 36px;
	}

	.bnjc-drawer .bnjc-drawer__donate-chips {
		gap: var(--d-2);
	}

	.bnjc-drawer .bnjc-drawer__chip > span:first-of-type {
		padding: 0 14px;
	}
}

/* Confirm: the order in a white card, the card form, Terms and privacy. */
.bnjc-drawer .bnjc-drawer__sum {
	padding: 2px var(--d-4);
	border: 1px solid var(--d-rule);
	border-radius: 8px;
	background: #fff;
}

.bnjc-drawer .bnjc-drawer__line {
	display: flex;
	justify-content: space-between;
	gap: var(--d-4);
	padding: var(--d-3) 0;
	border-block-start: 1px solid var(--d-rule);
	font-size: 16px;
}

.bnjc-drawer .bnjc-drawer__line:first-child {
	border-block-start: 0;
}

.bnjc-drawer .bnjc-drawer__line b {
	font-weight: 600;
}

.bnjc-drawer .bnjc-drawer__who {
	padding: var(--d-3) 0;
	border-block-start: 1px solid var(--d-rule);
	color: var(--grey-700);
	overflow-wrap: anywhere;
}

.bnjc-drawer .bnjc-drawer__who:first-child {
	border-block-start: 0;
}

.bnjc-drawer .bnjc-drawer__stripe {
	margin: 0;
	min-block-size: 120px;
}

.bnjc-drawer .bnjc-drawer__error {
	margin: 0;
	padding: var(--d-3) var(--d-4);
	border-radius: 4px;
	font-size: 16px;
}

.bnjc-drawer .bnjc-drawer__terms {
	border-block-start: 1px solid var(--d-rule);
}

.bnjc-drawer .bnjc-drawer__termsbody {
	display: grid;
	gap: var(--d-2);
	padding-block: 0 var(--d-3);
}

.bnjc-drawer .bnjc-drawer__termsbody p {
	margin: 0;
	color: var(--grey-700);
}

.bnjc-drawer .bnjc-drawer__links {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnjc-drawer .bnjc-drawer__links li {
	margin: 0;
	padding: 0;
}

.bnjc-drawer .bnjc-drawer__links li::before {
	content: none;
}

.bnjc-drawer .bnjc-drawer__links a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--navy);
	font-weight: 600;
}

/* The footer: the total beside the one button, the same 16px / gutter padding on every step. It is a flex item below the scrolling
   area, so it is always in view. */
.bnjc-drawer .bnjc-drawer__foot {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--d-4);
	padding: var(--d-4) var(--d-gut);
}

.bnjc-drawer .bnjc-drawer__total {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-inline-size: 78px;
	margin: 0;
	line-height: 1.2;
}

.bnjc-drawer .bnjc-drawer__count {
	min-block-size: 1.2em;
	color: var(--grey-700);
}

.bnjc-drawer .bnjc-drawer__count:empty {
	display: none;
}

.bnjc-drawer .bnjc-drawer__total strong {
	font-size: 22px;
	line-height: 1.15;
}

.bnjc-drawer .bnjc-drawer__pricing {
	font-size: 16px;
}

.bnjc-drawer .bnjc-drawer__cta {
	inline-size: auto;
	flex: 1;
	min-inline-size: 0;
	min-block-size: 52px;
	padding-inline: var(--d-4);
	font: 600 16px/1 var(--wp--preset--font-family--body);
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.bnjc-drawer .bnjc-drawer__foot--split {
	gap: var(--d-4);
}

@media (max-width: 599px) {
	/* A phone: the sheet takes the whole screen below a thin strip of the page, so the form has the room. */
	.bnjc-drawer .bnjc-drawer__panel {
		block-size: calc(100vh - 12px);
		block-size: calc(100dvh - 12px);
		max-block-size: none;
	}

	.bnjc-drawer .bnjc-drawer__head {
		padding-block-start: var(--d-3);
	}

	.bnjc-drawer .bnjc-drawer__foot {
		padding-block-end: calc(var(--d-4) + env(safe-area-inset-bottom, 0px));
	}

	/* The pairs stay side by side, as in the design (first name and surname at 360px is 150px each). */
	.bnjc-drawer .bnjc-drawer__pair {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.bnjc-drawer .bnjc-drawer__cta:focus-visible,
.bnjc-drawer .bnjc-step:focus-visible,
.bnjc-drawer .bnjc-drawer__close:focus-visible,
.bnjc-drawer .bnjc-drawer__backbtn:focus-visible,
.bnjc-drawer .bnjc-drawer__link:focus-visible,
.bnjc-drawer details > summary:focus-visible,
.bnjc-drawer .bnjc-drawer__check input:focus-visible,
.bnjc-drawer .bnjc-drawer__field input:focus-visible,
.bnjc-drawer .bnjc-drawer__field textarea:focus-visible,
.bnjc-drawer .bnjc-drawer__field select:focus-visible,
.bnjc-drawer .bnjc-drawer__promo input:focus-visible,
.bnjc-drawer .bnjc-drawer__apply:focus-visible,
.bnjc-drawer .bnjc-drawer__links a:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px #fff;
}

/* ==========================================================================
   You're booked (3 Nov 2026): the confirmation. Not the side drawer any more: a dialog of its own proportions (the geometry is in the
   plugin's ticket-drawer/style.css: at most 720px, centred, over a darker page; the whole screen on a phone).
   The same spacing scale as the rest of the drawer (--d-1 to --d-6). Order, top to bottom: the success words, the booking's details (the
   fields and the words of the confirmation email), the ticket cards with their QR, Add to calendar, Tell a friend, then Done.
   ========================================================================== */
.bnjc-drawer .bnjc-cf {
	--cf-gut: 32px;
	gap: var(--d-4);
	padding: 20px var(--cf-gut) var(--d-5);
}

@media (max-width: 599px) {
	.bnjc-drawer .bnjc-cf {
		--cf-gut: 20px;
		gap: var(--d-4);
		padding-block-start: var(--d-5);
	}
}

.bnjc-drawer .bnjc-cf__close {
	position: absolute;
	inset-block-start: var(--d-4);
	inset-inline-end: var(--d-4);
	z-index: 2;
	box-sizing: border-box;
	min-inline-size: 44px; /* a target a thumb can hit; the ring drawn inside it stays light */
	min-block-size: 44px;
	background: var(--cream);
}

.bnjc-drawer .bnjc-cf__head {
	display: flex;
	align-items: center;
	gap: var(--d-4);
	padding-inline-end: 52px; /* clear of the close button */
}

.bnjc-drawer .bnjc-cf__headtext {
	min-inline-size: 0;
}

.bnjc-drawer .bnjc-cf__tick {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--hove-green, #004335);
	color: var(--cream);
}

.bnjc-drawer .bnjc-cf__tick.is-wait {
	display: none;
}

.bnjc-drawer .bnjc-cf__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-s, 32px);
	line-height: 1.1;
}

.bnjc-drawer .bnjc-cf__lead {
	margin: var(--d-1) 0 0;
	color: var(--grey-700);
	overflow-wrap: anywhere;
}

.bnjc-drawer .bnjc-cf__booking {
	display: flex;
	flex-direction: column;
	gap: var(--d-4);
	min-inline-size: 0;
}

.bnjc-drawer .bnjc-cf__booking.is-one-of-many + .bnjc-cf__booking {
	padding-block-start: var(--d-5);
	border-block-start: 1px solid var(--d-rule);
}

.bnjc-drawer .bnjc-cf__h {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-m, 22px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--navy);
}

/* The details on the left, the ticket on the right (a computer); one under the other on a phone. Several tickets sit under the details. */
.bnjc-drawer .bnjc-cf__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 248px;
	grid-template-areas:
		"main tickets"
		"after tickets";
	grid-template-rows: auto 1fr;
	gap: var(--d-3) var(--d-5);
	align-items: start;
}

.bnjc-drawer .bnjc-cf__main {
	grid-area: main;
	display: flex;
	flex-direction: column;
	gap: var(--d-3);
	min-inline-size: 0;
}

.bnjc-drawer .bnjc-cf__tickets {
	grid-area: tickets;
}

.bnjc-drawer .bnjc-cf__after {
	grid-area: after;
	display: flex;
	flex-direction: column;
	gap: var(--d-2);
	min-inline-size: 0;
}

.bnjc-drawer .bnjc-cf__cols.is-alone,
.bnjc-drawer .bnjc-cf__cols.has-many {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "main" "tickets" "after";
	grid-template-rows: auto;
}

@media (max-width: 599px) {
	.bnjc-drawer .bnjc-cf__cols {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "main" "tickets" "after";
		grid-template-rows: auto;
		gap: var(--d-4);
	}

	/* A phone: the label sits over its value, so the value has the whole width. */
	.bnjc-drawer .bnjc-cf__details .bnjc-cf__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding-block: var(--d-2);
	}

	.bnjc-drawer .bnjc-cf__details .bnjc-cf__row dt {
		line-height: 1.3;
	}

	.bnjc-drawer .bnjc-cf__title {
		font-size: var(--wp--preset--font-size--heading-l, 28px);
	}

	.bnjc-drawer .bnjc-cf__head {
		gap: var(--d-3);
	}

	.bnjc-drawer .bnjc-cf__tick {
		inline-size: 40px;
		block-size: 40px;
	}

	.bnjc-drawer .bnjc-cf__tick svg {
		inline-size: 22px;
		block-size: 22px;
	}

	.bnjc-drawer[data-view="confirm"] .bnjc-drawer__panel::before {
		display: none;
	}
}

/* Event, Date and time, Venue, Tickets, Booking reference: one white card, a label and its value on each row. */
.bnjc-drawer .bnjc-cf__details {
	margin: 0;
	padding: 2px var(--d-4);
	border: 1px solid var(--d-rule);
	border-radius: 8px;
	background: #fff;
}

.bnjc-drawer .bnjc-cf__row {
	display: grid;
	grid-template-columns: minmax(0, 6.75rem) minmax(0, 1fr); /* a narrower label column: the value gets the room */
	gap: var(--d-4);
	padding: 14px 0;
	border-block-start: 1px solid var(--d-rule);
}

.bnjc-drawer .bnjc-cf__row:first-child {
	border-block-start: 0;
}

.bnjc-drawer .bnjc-cf__row dt {
	color: var(--grey-700);
	line-height: 1.35;
	overflow-wrap: break-word;
}

.bnjc-drawer .bnjc-cf__row dd {
	margin: 0;
	font-weight: 600;
	line-height: 1.4;
	overflow-wrap: break-word; /* breaks at spaces first; times, dates, house numbers and postcodes are held together in the script */
}

.bnjc-drawer .bnjc-cf__muted {
	display: block;
	margin-block-start: 2px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--grey-700);
	text-wrap: balance; /* the address falls in even lines, at its commas where it can */
}

.bnjc-drawer .bnjc-cf__lines {
	display: grid;
	gap: var(--d-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnjc-drawer .bnjc-cf__li {
	display: flex;
	justify-content: space-between;
	gap: var(--d-3);
	margin: 0;
	padding: 0;
}

.bnjc-drawer .bnjc-cf__li::before {
	content: none;
}

.bnjc-drawer .bnjc-cf__li b {
	flex: none;
	font-weight: 600;
	white-space: nowrap;
}

.bnjc-drawer .bnjc-cf__li.is-total {
	padding-block-start: var(--d-2);
	border-block-start: 1px solid var(--d-rule);
	font-weight: 700;
}

.bnjc-drawer .bnjc-cf__li.is-total b {
	font-weight: 700;
}

/* The reference in the details is the quiet one (the ticket card's is the one that leads): body type, regular weight. */
.bnjc-drawer .bnjc-cf__row.is-ref dd,
.bnjc-drawer .bnjc-cf__ref {
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--navy);
}

/* The tickets: the instruction, then a card each. */
.bnjc-drawer .bnjc-cf__tickets {
	display: flex;
	flex-direction: column;
	gap: var(--d-2);
	min-inline-size: 0;
}

.bnjc-drawer .bnjc-cf__show {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium, 18px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--navy);
}

.bnjc-drawer .bnjc-cf__swipe {
	display: none;
	margin: 0;
	color: var(--grey-700);
}

.bnjc-drawer .bnjc-cf__fallback {
	margin: 0;
}

/* A ticket: a navy top with who it is for, a perforation with a notch each side (CSS only), then the stub with the QR. */
.bnjc-drawer .bnjc-tk {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 1px solid var(--d-line);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(25, 27, 111, 0.12);
	list-style: none;
}

.bnjc-drawer .bnjc-tk::before {
	content: none;
}

.bnjc-drawer .bnjc-tk__top {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--d-3) var(--d-4);
	background: var(--navy);
	color: var(--cream);
}

.bnjc-drawer .bnjc-tk__kind {
	font-size: 16px;
	opacity: 0.9;
}

.bnjc-drawer .bnjc-tk__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-m, 22px);
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.bnjc-drawer .bnjc-tk__perf {
	position: relative;
	block-size: 22px;
	/* A notch cut into each side: a circle of the panel's colour, ringed like the card's edge, centred on the edge. */
	background:
		radial-gradient(circle at 0 50%, var(--cream) 0 11px, var(--d-line) 11px 12px, transparent 12px),
		radial-gradient(circle at 100% 50%, var(--cream) 0 11px, var(--d-line) 11px 12px, transparent 12px),
		#fff;
}

.bnjc-drawer .bnjc-tk__perf::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline: 20px;
	border-block-start: 2px dashed var(--d-line);
}

.bnjc-drawer .bnjc-tk__stub {
	display: grid;
	justify-items: center;
	gap: var(--d-3);
	padding: 0 var(--d-4) var(--d-4);
	text-align: center;
}

/* The QR is a vector picture with its own quiet zone: large, drawn on whole pixels, never smoothed. */
.bnjc-drawer .bnjc-tk__qr {
	inline-size: min(180px, 100%);
	margin-block: var(--d-1);
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.bnjc-drawer .bnjc-tk__ref {
	display: grid;
	gap: 0;
	margin: 0;
	line-height: 1.3;
}

.bnjc-drawer .bnjc-tk__ref span {
	color: var(--grey-700);
}

.bnjc-drawer .bnjc-tk__ref strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-l, 28px);
	letter-spacing: var(--wp--custom--typography--tracking-display);
	color: var(--navy);
	overflow-wrap: anywhere;
}

.bnjc-drawer .bnjc-tk__code {
	font-size: 16px;
	overflow-wrap: anywhere;
}

/* Several tickets: a card each, side by side on a computer; on a phone a row that swipes, the next one peeking in. */
.bnjc-drawer .bnjc-tickets-set.is-many {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	align-items: start;
}

@media (max-width: 599px) {
	.bnjc-drawer .bnjc-tickets-set.is-many {
		display: flex;
		gap: var(--d-3);
		margin-inline: calc(var(--cf-gut) * -1);
		padding: var(--d-1) var(--cf-gut) var(--d-2);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--cf-gut);
		overscroll-behavior-x: contain;
	}

	.bnjc-drawer .bnjc-tickets-set.is-many .bnjc-tk {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}

	.bnjc-drawer .bnjc-cf__swipe {
		display: block;
	}
}

.bnjc-drawer .bnjc-tickets-set:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
}

/* Add to calendar and Tell a friend: side by side on a computer, one under the other on a phone. */
.bnjc-drawer .bnjc-cf__actions {
	display: grid;
	grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); /* three calendar buttons need a little more than the share pair */
	gap: var(--d-5);
	align-items: start;
}

.bnjc-drawer .bnjc-cf__actions > .bnjc-cf__sec:only-child {
	grid-column: 1 / -1;
}

@media (max-width: 599px) {
	.bnjc-drawer .bnjc-cf__actions {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--d-4);
	}
}

.bnjc-drawer .bnjc-cf__sec {
	display: flex;
	flex-direction: column;
	gap: var(--d-3);
	min-inline-size: 0;
}

.bnjc-drawer .bnjc-cf__sec .bnjc-sharegrid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--d-2);
	margin: 0;
}

.bnjc-drawer .bnjc-cf__sec .bnjc-cf__grid3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bnjc-drawer .bnjc-cf__sec .bnjc-sharegrid > li {
	margin: 0;
	padding: 0;
}

.bnjc-drawer .bnjc-cf__sec .bnjc-sharegrid > li::before {
	content: none;
}

.bnjc-drawer .bnjc-cf__wide {
	grid-column: 1 / -1;
}

.bnjc-drawer .bnjc-cf__sec .bnjc-sharebtn {
	justify-content: center;
	min-block-size: 48px;
	padding-inline: var(--d-2);
	font-size: 16px;
	letter-spacing: 0;
	text-transform: none;
}

.bnjc-drawer .bnjc-cf__calbtn {
	gap: var(--d-2);
	padding-inline: var(--d-2);
	block-size: 48px;
	white-space: nowrap;
}

.bnjc-drawer .bnjc-cf__calbtn .bnjc-sharebtn__icon {
	display: block;
	inline-size: 20px;
	block-size: 20px;
	margin: 0;
}

.bnjc-drawer .bnjc-cf__calbtn span {
	line-height: 1;
}

.bnjc-drawer .bnjc-cf__year {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--navy);
	font-weight: 600;
	text-decoration: underline;
}

.bnjc-drawer .bnjc-cf__more {
	margin: 0;
}

.bnjc-drawer .bnjc-cf__more > summary {
	padding-block: 0;
}

.bnjc-drawer .bnjc-cf__more[open] > summary {
	margin-block-end: var(--d-1);
}

.bnjc-drawer .bnjc-cf__linkfield {
	inline-size: 100%;
	min-block-size: 52px;
	padding: 0 var(--d-4);
	border: 1px solid var(--d-line);
	border-radius: 4px;
	background: #fff;
	color: var(--navy);
	font: 400 16px/1.2 var(--wp--preset--font-family--body);
	box-sizing: border-box;
}

.bnjc-drawer .bnjc-cf__linkfield[hidden] {
	display: none;
}

.bnjc-drawer .bnjc-cf__sec .bnjc-share__status {
	min-block-size: 0;
}

.bnjc-drawer .bnjc-cf__sec .bnjc-share__status:empty {
	display: none;
}

/* Done: the one button, full width, the same footer as every step. */
.bnjc-drawer .bnjc-cf__foot .bnjc-drawer__cta {
	inline-size: 100%;
	min-block-size: 56px;
}

.bnjc-drawer .bnjc-cf__close:focus-visible,
.bnjc-drawer .bnjc-cf .bnjc-sharebtn:focus-visible,
.bnjc-drawer .bnjc-cf__year:focus-visible,
.bnjc-drawer .bnjc-cf__linkfield:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px #fff;
}

/* Ticket names and prices that mix Hebrew with English or numbers ("Adult | מבוגר", "£12"): each is its own
   isolated run, so a number never jumps to the other side of a Hebrew word. */
.bnjc-drawer .bnjc-ticket__name,
.bnjc-drawer .bnjc-ticket__price,
.bnjc-drawer .bnjc-drawer__line > span {
	unicode-bidi: isolate;
}