/*
 * Liepājas bāka — public booking UI: tokens and components.
 *
 * Built to BOOKING-UI-SPEC.md §2. Everything is scoped under `.lb-ui` so the Breakdance theme's
 * global styles (and this stylesheet's) can never reach each other. Components never use a hex
 * value directly; every colour goes through the five --lb- tokens below.
 *
 * Replaces the placeholder --lbaka-* / --dwk-* palette in booking.css as the flow is rebuilt.
 */

/* ── Fonts ─────────────────────────────────────────────────────────────────────────────────
 * Barlow, self-hosted. Stand-in for DIN Pro until its webfont licence is settled; see
 * assets/fonts/README.md. Split latin / latin-ext with unicode-range so a Latvian page
 * downloads the extension only because it actually needs ā, č, ē…
 */
@font-face {
	font-family: "LB Barlow";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "LB Barlow";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/barlow-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "LB Barlow";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "LB Barlow";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/barlow-latin-ext-600-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ────────────────────────────────────────────────────────────────────────────────── */
.lb-ui {
	/* Colour: the five brand values, nothing else. */
	--lb-paper: #F7F6F2;  /* Traffic white — background */
	--lb-stone: #B5B6A9;  /* Pebble grey — borders, dividers, sold out, inactive. Never text on paper. */
	--lb-iron: #6B6963;   /* Quartz grey — secondary text, labels */
	--lb-ink: #282722;    /* Grey brown — primary text, selected states */
	--lb-signal: #9B111E; /* Carmine red — primary action, current step, low-seat warning */

	/* Type. "Bold" in the spec is Barlow 600. */
	--lb-font: "LB Barlow", "Helvetica Neue", Arial, sans-serif;
	--lb-bold: 600;
	--lb-size-title: 40px;   --lb-lh-title: 44px;
	--lb-size-section: 24px; --lb-lh-section: 30px;
	--lb-size-time: 22px;
	--lb-size-body: 16px;
	--lb-size-small: 13px;

	/* Shape. */
	--lb-border-control: 1.5px solid var(--lb-ink);
	--lb-border-row: 1px solid var(--lb-stone);
	--lb-tap: 44px;

	/*
	 * The 40° cut (DESIGN.md: "one angle, 40 degrees"). A cut off the bottom-right corner whose
	 * edge rises at 40° from the horizontal: horizontal leg --lb-cut, vertical leg
	 * --lb-cut × tan 40° (0.8391). Components set --lb-cut; the angle never changes.
	 */
	--lb-cut: 16px;
	--lb-tan40: 0.8391;

	--lb-focus: 2px solid var(--lb-ink);
	--lb-ease: 120ms ease-out;

	background: var(--lb-paper);
	color: var(--lb-ink);
	font-family: var(--lb-font);
	font-size: var(--lb-size-body);
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}

.lb-ui *,
.lb-ui *::before,
.lb-ui *::after {
	box-sizing: border-box;
}

/* The theme styles bare buttons; nothing of that may leak in. */
.lb-ui button {
	font: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	margin: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.lb-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.lb-ui :focus-visible {
	outline: var(--lb-focus);
	outline-offset: 2px;
}

.lb-ui :focus:not(:focus-visible) {
	outline: none;
}

/*
 * The cut is drawn on a ::before layer, never on the element itself: clip-path clips the
 * element's outline too, and a focus ring that the cut slices off is no focus ring.
 */
.lb-cut {
	position: relative;
	isolation: isolate;
}

.lb-cut::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--lb-cut-fill, transparent);
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--lb-cut) * var(--lb-tan40)),
		calc(100% - var(--lb-cut)) 100%,
		0 100%
	);
}

/* ── Type ────────────────────────────────────────────────────────────────────────────────── */
.lb-title {
	font-size: var(--lb-size-title);
	line-height: var(--lb-lh-title);
	font-weight: var(--lb-bold);
	margin: 0;
	letter-spacing: -0.01em;
}

.lb-section-title {
	font-size: var(--lb-size-section);
	line-height: var(--lb-lh-section);
	font-weight: var(--lb-bold);
	margin: 0;
}

.lb-time {
	font-size: var(--lb-size-time);
	line-height: 1.1;
	font-weight: var(--lb-bold);
}

.lb-small {
	font-size: var(--lb-size-small);
	line-height: 1.4;
}

.lb-muted {
	color: var(--lb-iron);
}

.lb-warn {
	color: var(--lb-signal);
}

/* ── Buttons ───────────────────────────────────────────────────────────────────────────────
 * Primary: the one filled red element on a screen, with the 40° cut.
 * Outline: what the footer button is until the step is complete. Never `disabled` — the
 * spec has it scroll to whatever is still missing instead.
 */
.lb-ui .lb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	min-width: var(--lb-tap);
	padding: 0 calc(28px + var(--lb-cut) * 0.5) 0 28px;
	border: 0;
	font-size: var(--lb-size-body);
	font-weight: var(--lb-bold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--lb-ease);
}

.lb-ui .lb-btn--primary {
	--lb-cut-fill: var(--lb-signal);
	color: var(--lb-paper);
}

.lb-ui .lb-btn--primary:hover::before {
	--lb-cut-fill: var(--lb-ink);
}

.lb-ui .lb-btn--primary:active::before {
	--lb-cut-fill: var(--lb-ink);
}

.lb-ui .lb-btn--outline {
	border: var(--lb-border-control);
	padding: 0 26px;
	color: var(--lb-ink);
}

.lb-ui .lb-btn--outline:hover {
	background: var(--lb-ink);
	color: var(--lb-paper);
}

/* Briefly ringed when the outline button points at what is still missing. */
.lb-attention {
	outline: 2px solid var(--lb-signal);
	outline-offset: 4px;
	animation: lb-attention 1.2s ease-out 1 forwards;
}

@keyframes lb-attention {
	0%, 70% { outline-color: var(--lb-signal); }
	100% { outline-color: transparent; }
}

.lb-ui .lb-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--lb-tap);
	padding: 0;
	border: 0;
	color: var(--lb-ink);
	font-weight: var(--lb-bold);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
}

/* ── Segmented toggles: language filter and purchase mode ──────────────────────────────── */
.lb-seg {
	display: inline-flex;
	flex-wrap: wrap;
}

.lb-seg--full {
	display: flex;
	width: 100%;
}

.lb-seg--full .lb-seg__opt {
	flex: 1 1 0;
}

.lb-ui .lb-seg__opt {
	min-height: var(--lb-tap);
	padding: 0 18px;
	border: var(--lb-border-control);
	color: var(--lb-ink);
	font-weight: var(--lb-bold);
	transition: background-color var(--lb-ease), color var(--lb-ease);
}

/* Shared borders: neighbours overlap by one border width. */
.lb-ui .lb-seg__opt + .lb-seg__opt {
	margin-left: -1.5px;
}

.lb-ui .lb-seg__opt:hover {
	background: color-mix(in srgb, var(--lb-ink) 8%, transparent);
}

.lb-ui .lb-seg__opt[aria-pressed="true"],
.lb-ui .lb-seg__opt[aria-checked="true"] {
	background: var(--lb-ink);
	color: var(--lb-paper);
	position: relative;
	z-index: 1;
}

.lb-field-label {
	display: block;
	margin: 0 0 8px;
	color: var(--lb-iron);
	font-size: var(--lb-size-small);
}

/* ── Stepper ───────────────────────────────────────────────────────────────────────────── */
.lb-stepper {
	display: inline-flex;
	align-items: stretch;
}

.lb-ui .lb-stepper__btn {
	width: var(--lb-tap);
	height: var(--lb-tap);
	padding: 0;
	border: var(--lb-border-control);
	color: var(--lb-ink);
	font-size: 22px;
	line-height: 1;
	font-weight: 400;
	transition: background-color var(--lb-ease), color var(--lb-ease);
}

.lb-ui .lb-stepper__btn:hover {
	background: var(--lb-ink);
	color: var(--lb-paper);
}

/* At a limit: visibly stopped, still focusable so its reason can be read. */
.lb-ui .lb-stepper__btn[aria-disabled="true"] {
	border-color: var(--lb-stone);
	color: var(--lb-stone);
	cursor: not-allowed;
	background: none;
}

.lb-stepper__value {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	height: var(--lb-tap);
	border-top: var(--lb-border-control);
	border-bottom: var(--lb-border-control);
	font-size: 18px;
	font-weight: var(--lb-bold);
}

.lb-limit-note {
	margin: 8px 0 0;
	color: var(--lb-iron);
	font-size: var(--lb-size-small);
}

/* ── Language code badge ───────────────────────────────────────────────────────────────── */
.lb-code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 24px;
	padding: 0 6px;
	border: 1px solid currentColor;
	font-size: var(--lb-size-small);
	font-weight: var(--lb-bold);
	letter-spacing: 0.04em;
	line-height: 1;
}

/* ── Seat bar ──────────────────────────────────────────────────────────────────────────────
 * One segment per seat of capacity, filled = taken. Segment count comes from the markup, so a
 * session with a different capacity draws itself correctly.
 */
.lb-seats {
	display: flex;
	gap: 2px;
	width: 100%;
	max-width: 180px;
	height: 10px;
}

.lb-seats__seg {
	flex: 1 1 0;
	border: 1px solid var(--lb-stone);
}

.lb-seats__seg--taken {
	background: var(--lb-ink);
	border-color: var(--lb-ink);
}

/* ── Session row ───────────────────────────────────────────────────────────────────────── */
.lb-sessions {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--lb-border-row);
}

.lb-ui .lb-session {
	position: relative;
	display: grid;
	grid-template-columns: 64px 44px minmax(90px, 180px) 1fr 24px;
	align-items: center;
	column-gap: 16px;
	width: 100%;
	min-height: 64px;
	padding: 10px 12px 10px 16px;
	border: 0;
	border-bottom: var(--lb-border-row);
	color: var(--lb-ink);
	text-align: left;
	transition: background-color var(--lb-ease), color var(--lb-ease);
}

.lb-ui .lb-session:hover {
	background: color-mix(in srgb, var(--lb-ink) 6%, transparent);
}

.lb-session__count {
	font-size: 15px;
}

.lb-session__count--low {
	color: var(--lb-signal);
	font-weight: var(--lb-bold);
}

.lb-session__mark {
	justify-self: end;
	font-size: 22px;
	line-height: 1;
}

/* Sold out: kept in the list, quietly. Everything stone, nothing to click. */
.lb-ui .lb-session--soldout {
	color: var(--lb-stone);
	cursor: default;
}

.lb-ui .lb-session--soldout:hover {
	background: none;
}

.lb-session--soldout .lb-seats__seg {
	background: var(--lb-stone);
	border-color: var(--lb-stone);
}

/* Selected: ink fill, paper text, a 4px signal bar on the left edge, a check on the right. */
.lb-ui .lb-session[aria-checked="true"] {
	background: var(--lb-ink);
	color: var(--lb-paper);
}

.lb-ui .lb-session[aria-checked="true"]::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--lb-signal);
}

.lb-session[aria-checked="true"] .lb-seats__seg {
	border-color: var(--lb-stone);
}

.lb-session[aria-checked="true"] .lb-seats__seg--taken {
	background: var(--lb-paper);
	border-color: var(--lb-paper);
}

/* Red never sits on ink: a low count on the selected row reads in paper. */
.lb-session[aria-checked="true"] .lb-session__count--low {
	color: var(--lb-paper);
}

.lb-key {
	margin: 12px 0 0;
	color: var(--lb-iron);
	font-size: var(--lb-size-small);
}

.lb-key span + span {
	margin-left: 16px;
}

@media (max-width: 560px) {
	.lb-ui .lb-session {
		grid-template-columns: auto auto 1fr 24px;
		grid-template-areas:
			"time code count mark"
			"bar  bar  bar   mark";
		row-gap: 8px;
		column-gap: 12px;
	}

	.lb-session__time { grid-area: time; }
	.lb-session .lb-code { grid-area: code; }
	.lb-session .lb-seats { grid-area: bar; max-width: none; }
	.lb-session__count { grid-area: count; justify-self: end; }
	.lb-session__mark { grid-area: mark; }
}

/* ── Calendar ──────────────────────────────────────────────────────────────────────────── */
.lb-cal {
	width: 100%;
	max-width: 420px;
}

.lb-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.lb-cal__month {
	font-size: 20px;
	font-weight: var(--lb-bold);
}

.lb-ui .lb-cal__nav {
	width: var(--lb-tap);
	height: var(--lb-tap);
	padding: 0;
	border: var(--lb-border-control);
	color: var(--lb-ink);
	font-size: 20px;
	line-height: 1;
}

.lb-ui .lb-cal__nav:hover {
	background: var(--lb-ink);
	color: var(--lb-paper);
}

.lb-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.lb-cal__dow {
	padding-bottom: 6px;
	color: var(--lb-iron);
	font-size: var(--lb-size-small);
	text-align: center;
}

.lb-ui .lb-day {
	--lb-cut: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 48px;
	padding: 0;
	border: 1.5px solid transparent;
	color: var(--lb-ink);
	font-size: 17px;
	font-weight: var(--lb-bold);
	line-height: 1;
}

/* The availability mark: a 2px bar under the number. */
.lb-day::after {
	content: "";
	width: 18px;
	height: 2px;
	background: transparent;
}

.lb-day--available::after { background: var(--lb-ink); }
.lb-day--almost::after { background: var(--lb-signal); }

.lb-ui .lb-day--available:hover,
.lb-ui .lb-day--almost:hover {
	background: color-mix(in srgb, var(--lb-ink) 8%, transparent);
}

.lb-ui .lb-day--soldout,
.lb-ui .lb-day--closed {
	color: var(--lb-stone);
	cursor: default;
	font-weight: 400;
}

/* Today: an outline box. Every day carries a transparent border so this one shifts nothing. */
.lb-ui .lb-day--today {
	border-color: var(--lb-ink);
}

/* Selected: ink fill with the 40° cut, paper number, mark in paper. */
.lb-ui .lb-day[aria-pressed="true"] {
	--lb-cut-fill: var(--lb-ink);
	color: var(--lb-paper);
	border-color: transparent;
	background: none;
}

.lb-day[aria-pressed="true"]::after {
	background: var(--lb-paper);
}

.lb-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	color: var(--lb-iron);
	font-size: var(--lb-size-small);
}

.lb-legend li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.lb-legend__mark {
	width: 18px;
	height: 2px;
	background: var(--lb-ink);
}

.lb-legend__mark--almost { background: var(--lb-signal); }
.lb-legend__mark--none { background: var(--lb-stone); }

/* ── Progress ──────────────────────────────────────────────────────────────────────────── */
.lb-progress {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lb-progress__step {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--lb-iron);
	font-size: 15px;
}

.lb-progress__step::before {
	content: "";
	height: 4px;
	background: var(--lb-stone);
}

.lb-progress__step--done {
	color: var(--lb-ink);
}

.lb-progress__step--done::before {
	background: var(--lb-ink);
}

.lb-progress__step--current {
	color: var(--lb-ink);
	font-weight: var(--lb-bold);
}

.lb-progress__step--current::before {
	background: var(--lb-signal);
}

.lb-progress__num {
	margin-right: 6px;
}

.lb-progress__check {
	margin-left: 6px;
}

/* ── Motion ────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.lb-ui *,
	.lb-ui *::before,
	.lb-ui *::after {
		transition: none !important;
		animation: none !important;
	}

	/* No fade: the ring shows steadily until the script removes the class a moment later. */
	.lb-attention {
		outline-color: var(--lb-signal);
	}
}

/* ══ The booking flow ([lbaka_booking_flow]) ═════════════════════════════════════════════════ */

.lb-flow [x-cloak] {
	display: none !important;
}

/*
 * The flow fills whatever holds it and adds no side spacing of its own: the width and the
 * page gutters belong to the Breakdance element the shortcode sits in, so the flow lines up
 * with the rest of the page at every breakpoint. Druvo, 9 Oct 2026.
 */
.lb-flow {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 40px 0 0;
	/* The site header may be sticky; keep scrolled-to targets clear of it. */
	scroll-margin-top: 96px;
}

.lb-flow [x-ref] {
	scroll-margin-top: 96px;
	scroll-margin-bottom: 120px;
}

.lb-flow__progress {
	margin-bottom: 40px;
}

.lb-step__head {
	margin-bottom: 28px;
}

.lb-step__head .lb-title:focus {
	outline: none;
}

.lb-step__sub {
	margin: 10px 0 0;
}

.lb-filter {
	margin-bottom: 32px;
}

/* Calendar left, sessions right, a 1px divider between (spec §4). */
.lb-step1 {
	display: grid;
	grid-template-columns: minmax(280px, 420px) 1px minmax(0, 1fr);
	column-gap: 48px;
	align-items: start;
	/* Reserve the panel's height up front so nothing below jumps when sessions arrive (§11). */
	min-height: 460px;
}

.lb-step1__divider {
	align-self: stretch;
	background: var(--lb-stone);
}

.lb-cal__cell {
	display: flex;
}

.lb-cal__cell .lb-day {
	width: 100%;
}

.lb-ui .lb-cal__nav[aria-disabled="true"] {
	border-color: var(--lb-stone);
	color: var(--lb-stone);
	cursor: default;
	background: none;
}

.lb-panel {
	min-width: 0;
	min-height: 420px;
}

.lb-panel__title {
	margin-bottom: 16px;
}

.lb-panel__empty .lb-section-title {
	margin-bottom: 8px;
}

.lb-panel__empty > p {
	margin: 0 0 28px;
	max-width: 46ch;
}

.lb-hint {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lb-hint li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: var(--lb-bold);
}

.lb-hint__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: var(--lb-border-control);
}

.lb-panel__none,
.lb-panel__pending {
	margin: 0;
	padding: 20px 0;
	border-top: var(--lb-border-row);
	border-bottom: var(--lb-border-row);
}

/* A message about the selection: ink rule on the left, plain ink text. Red stays rare. */
.lb-notice {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-left: 4px solid var(--lb-signal);
	background: color-mix(in srgb, var(--lb-ink) 5%, transparent);
	font-weight: var(--lb-bold);
}

.lb-step2__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.lb-step2__head .lb-title:focus {
	outline: none;
}

.lb-step2__sub {
	margin: 8px 0 0;
}

/* The footer bar: always there, pinned to the bottom of the viewport while the flow is (§3, §10). */
.lb-footer {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-top: 48px;
	padding: 16px 0;
	border-top: var(--lb-border-control);
	background: var(--lb-paper);
}

.lb-footer__summary p {
	margin: 0;
}

.lb-footer__label {
	color: var(--lb-iron);
	margin-right: 6px;
}

.lb-flow__noscript {
	padding: 16px;
	border: var(--lb-border-control);
}

@media (max-width: 860px) {
	.lb-flow {
		padding-top: 24px;
	}

	.lb-step1 {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
		min-height: 0;
	}

	.lb-step1__divider {
		display: none;
	}

	.lb-cal {
		max-width: none;
	}

	/* Stacked under the calendar there is nothing below it to push, so no reserved height. */
	.lb-panel {
		min-height: 0;
		padding-top: 24px;
		border-top: var(--lb-border-row);
	}

	.lb-title {
		font-size: 30px;
		line-height: 34px;
	}

	/*
	 * Full-bleed bar on phones, whatever gutter the page gives the flow: pulled out to the
	 * viewport edges, its content padded back in line with the flow's own edges.
	 */
	.lb-footer {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding: 12px calc(50vw - 50%);
	}

	.lb-footer .lb-btn {
		flex: 0 0 auto;
	}

	.lb-step2__head {
		flex-direction: column;
		gap: 8px;
	}
}

@media (max-width: 420px) {
	.lb-footer {
		flex-wrap: wrap;
	}

	.lb-footer .lb-btn {
		width: 100%;
	}

	.lb-ui .lb-seg__opt {
		padding: 0 12px;
	}
}

/* Phones: the language filter shares the full width equally, like the purchase-mode toggle. */
@media (max-width: 560px) {
	.lb-filter .lb-seg {
		display: flex;
		width: 100%;
	}

	.lb-ui .lb-filter .lb-seg__opt {
		flex: 1 1 0;
		min-width: 0;
		padding: 0 6px;
	}
}

.lb-demo-flag {
	margin: 0 0 24px;
	padding: 8px 12px;
	border: 1.5px dashed var(--lb-iron);
	color: var(--lb-iron);
	font-size: var(--lb-size-small);
}

/* ── Step 2: tickets ───────────────────────────────────────────────────────────────────── */
.lb-mode {
	max-width: 560px;
	margin-bottom: 32px;
}

.lb-cats-wrap {
	max-width: 760px;
}

.lb-cats {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--lb-border-row);
}

.lb-cat {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	column-gap: 28px;
	min-height: 76px;
	padding: 14px 0;
	border-bottom: var(--lb-border-row);
}

.lb-cat__name {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lb-cat__title {
	font-size: 18px;
	font-weight: var(--lb-bold);
}

.lb-cat__price {
	font-size: 18px;
	text-align: right;
	white-space: nowrap;
}

.lb-whole {
	max-width: 760px;
	padding: 28px;
	border: var(--lb-border-control);
}

.lb-whole__title {
	margin: 0 0 8px;
}

.lb-whole__copy {
	margin: 0 0 24px;
	max-width: 56ch;
	color: var(--lb-iron);
}

.lb-whole__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.lb-whole__price {
	text-align: right;
}

.lb-whole__price .lb-field-label {
	margin-bottom: 4px;
}

@media (max-width: 560px) {
	.lb-cat {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name    stepper"
			"price   stepper";
		row-gap: 4px;
		column-gap: 16px;
	}

	.lb-cat__name { grid-area: name; }
	.lb-cat__price { grid-area: price; text-align: left; font-size: 16px; color: var(--lb-iron); }
	.lb-cat .lb-stepper { grid-area: stepper; }

	.lb-whole {
		padding: 20px 16px;
	}

	.lb-whole__price {
		text-align: left;
	}
}

/* ── Step 3: details and payment ───────────────────────────────────────────────────────── */
.lb-pay-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: var(--lb-border-row);
}

.lb-pay-head .lb-title:focus {
	outline: none;
}

.lb-pay-head__session {
	margin: 10px 0 4px;
	font-size: 18px;
	font-weight: var(--lb-bold);
}

.lb-pay-head__lines {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.lb-pay-head__total {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	white-space: nowrap;
}

.lb-pay-head__amount {
	font-size: var(--lb-size-title);
	line-height: var(--lb-lh-title);
	font-weight: var(--lb-bold);
}

.lb-form {
	max-width: 640px;
}

.lb-form__group {
	margin: 0 0 32px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.lb-form__group > legend {
	margin-bottom: 16px;
	padding: 0;
}

.lb-field {
	margin-bottom: 20px;
}

.lb-field__label {
	display: block;
	margin-bottom: 6px;
	font-weight: var(--lb-bold);
}

.lb-ui .lb-input {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 12px;
	border: var(--lb-border-control);
	border-radius: 0;
	background: var(--lb-paper);
	color: var(--lb-ink);
	font: inherit;
	font-size: 16px; /* 16px or iOS Safari zooms in on focus. */
	box-shadow: none;
}

.lb-ui .lb-input:focus-visible {
	outline: var(--lb-focus);
	outline-offset: 2px;
}

.lb-field--error .lb-input {
	border-color: var(--lb-signal);
}

.lb-field__help {
	margin: 6px 0 0;
	color: var(--lb-iron);
	font-size: var(--lb-size-small);
}

.lb-field__error {
	margin: 6px 0 0;
	color: var(--lb-signal);
	font-size: 14px;
	font-weight: var(--lb-bold);
}

.lb-field__error:empty {
	display: none;
}

.lb-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: var(--lb-tap);
	cursor: pointer;
}

.lb-check input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	accent-color: var(--lb-ink);
}

.lb-check a {
	color: var(--lb-ink);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

/* Reserve the Element's height before Stripe fills it, so the page does not jump (§11). */
.lb-pay__element {
	min-height: 220px;
}

.lb-pay__loading {
	margin: 0;
	padding: 16px 0;
}

.lb-pay__test {
	margin: 0 0 12px;
	padding: 8px 12px;
	border: 1.5px dashed var(--lb-iron);
}

.lb-footer__pay {
	display: flex;
	align-items: center;
	gap: 20px;
}

.lb-timer {
	color: var(--lb-iron);
	font-size: 15px;
	white-space: nowrap;
}

.lb-timer--low {
	color: var(--lb-signal);
	font-weight: var(--lb-bold);
}

.lb-ui .lb-btn[aria-busy="true"] {
	cursor: progress;
	opacity: 0.85;
}

@media (max-width: 560px) {
	.lb-pay-head {
		flex-direction: column;
	}

	.lb-pay-head__total {
		align-items: flex-start;
	}

	.lb-pay-head__amount {
		font-size: 30px;
		line-height: 34px;
	}

	.lb-footer__pay {
		flex-wrap: wrap;
		width: 100%;
		gap: 8px;
	}

	.lb-footer__pay .lb-btn {
		width: 100%;
	}
}

/* ── Step 4: confirmation and ticket cards ─────────────────────────────────────────────── */
.lb-done__head {
	margin-bottom: 32px;
}

.lb-done__head .lb-title:focus {
	outline: none;
}

.lb-done__sent {
	margin: 10px 0 0;
	font-size: 18px;
}

.lb-tickets {
	display: grid;
	gap: 20px;
	max-width: 760px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

/* Matches the PDF: details left, QR right behind a dashed tear line. */
.lb-tcard {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 200px;
	border: var(--lb-border-control);
	background: var(--lb-paper);
}

.lb-tcard__main {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
}

.lb-tcard__logo {
	display: block;
	width: 160px;
	height: auto;
	margin-bottom: 16px;
}

.lb-tcard p {
	margin: 0;
}

.lb-tcard__date {
	font-size: 18px;
}

.lb-tcard__time {
	font-size: var(--lb-size-title);
	line-height: var(--lb-lh-title);
	font-weight: var(--lb-bold);
}

.lb-tcard__meta {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lb-tcard__type {
	font-size: 17px;
}

.lb-tcard__number {
	margin-top: 4px;
	letter-spacing: 0.02em;
}

.lb-ui .lb-tcard__pdf {
	align-self: flex-start;
	min-height: 44px;
	margin-top: 14px;
	padding: 0 18px;
}

.lb-tcard__qr {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	border-left: 1.5px dashed var(--lb-iron);
	/* The QR's dark modules are drawn, light ones are not: it needs a light ground. */
	background: var(--lb-paper);
}

.lb-tcard__qr svg {
	display: block;
	width: 100%;
	max-width: 168px;
	height: auto;
}

.lb-practical {
	max-width: 760px;
	margin-bottom: 24px;
	padding-top: 24px;
	border-top: var(--lb-border-row);
}

.lb-practical ul {
	margin: 12px 0 0;
	padding-left: 20px;
}

.lb-practical li + li {
	margin-top: 6px;
}

@media (max-width: 560px) {
	.lb-tcard {
		grid-template-columns: minmax(0, 1fr);
	}

	.lb-tcard__qr {
		border-left: 0;
		border-top: 1.5px dashed var(--lb-iron);
	}

	.lb-tcard__time {
		font-size: 32px;
		line-height: 36px;
	}
}

/* ── Apple Pay / Google Pay (Stripe Express Checkout Element) ──────────────────────────── */
.lb-express {
	margin-bottom: 8px;
}

.lb-express__wrap {
	position: relative;
}

/* Sits over the wallet buttons until the terms are ticked; a click points at the checkbox. */
.lb-ui .lb-express__guard {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.lb-express__or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
	color: var(--lb-iron);
	font-size: var(--lb-size-small);
}

.lb-express__or::before,
.lb-express__or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--lb-stone);
}

/* ── Review fixes, 8 Oct 2026 ──────────────────────────────────────────────────────────── */

/* Fields focused on a failed submit must not land under the sticky site header or footer bar. */
.lb-flow .lb-input,
.lb-flow .lb-check input {
	scroll-margin-top: 110px;
	scroll-margin-bottom: 140px;
}

/* Reserve six weeks of calendar before Alpine draws it, so nothing jumps on load (spec §11). */
.lb-cal__grid {
	min-height: calc(6 * 48px + 5 * 4px + 24px);
}

.lb-step > .lb-notice,
.lb-flow > .lb-step .lb-notice:first-child {
	max-width: 760px;
}

/* At 360px seven columns with 4px gaps left day cells just under 44px wide (spec §10). */
@media (max-width: 380px) {
	.lb-cal__grid {
		gap: 2px;
	}

	.lb-cal__cell .lb-day {
		min-width: 44px;
	}
}