.rsu-register {
	/* Typography (Settings -> Booking -> Typography overrides these through the inline CSS). Defaults = the settings' defaults. */
	--rsu-fs: 16px;
	--rsu-text: #333333;
	--rsu-helper-fs: 14px;
	--rsu-helper: #5f5f5f;
	--rsu-muted: var(--rsu-helper);
	--rsu-border: #8a94a3; /* controls: 3.07:1 on white (WCAG 1.4.11) */
	--rsu-border-hover: #5f6b7a;
	--rsu-radius: 10px;
	--rsu-tx: 0.15s; /* colour transitions only; 0s under prefers-reduced-motion */
	--rsu-card-bg: #fafafa;
	--rsu-card-border: #eaecf0;
	--rsu-surface: #f6f7f7;
	/* Accent: fills (with --rsu-accent-fg on top) and its text-safe shade. Summary accent / Match button colour overrides these. */
	--rsu-accent: #2271b1;
	--rsu-accent-dark: #135e96;
	--rsu-accent-fg: #ffffff;
	--rsu-accent-text: #135e96;
	--rsu-bar-gen: #2271b1;
	--rsu-bar-eb: #1a7f37;
	--rsu-eb-text: #1a7f37;
	--rsu-eb-bg: #1a7f37;
	--rsu-eb-fg: #ffffff;
	/* Pill and checked-card tints. The original look (no accent override): green early bird, blue general admission. Text on each
	   tint is 4.5:1 or better. The Summary accent replaces all of these from PHP (RSU_Summary_Accent::css). */
	--rsu-pill-eb-bg: #e6f4ea;
	--rsu-pill-eb-fg: #14622a;
	--rsu-pill-gen-bg: #e7f0f8;
	--rsu-pill-gen-fg: #135e96;
	--rsu-tint-soft: #f1f7fc;
	--rsu-focus: #1d4ed8;
	--rsu-earlybird: #1a7f37;
	--rsu-closed-bg: #f0f0f1;
	--rsu-error-bg: #fcf0f1;
	--rsu-error-border: #d63638;

	color: var(--rsu-text);
	max-width: 36rem;
	font-size: var(--rsu-fs);
	line-height: 1.5;
}

.rsu-register *,
.rsu-register *::before,
.rsu-register *::after {
	box-sizing: border-box;
}

.rsu-field {
	margin: 0 0 1.25rem;
}

.rsu-register .rsu-field__label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: var(--rsu-fs); /* a theme's own label size (Astra: 14px) must not shrink them below the text */
	font-weight: 600;
	color: var(--rsu-text);
}

.rsu-register .rsu-checkbox + label,
.rsu-register .rsu-checkbox:disabled + label {
	font-size: var(--rsu-fs);
}

.rsu-field__hint {
	color: var(--rsu-helper);
	font-size: var(--rsu-helper-fs);
	margin: 0.375rem 0 0;
}

.rsu-select {
	display: block;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	font: inherit;
	color: inherit;
	background-color: #fff;
	border: 1px solid var(--rsu-border);
	border-radius: var(--rsu-radius);
}

.rsu-select:disabled {
	background-color: var(--rsu-surface);
	color: var(--rsu-muted);
}

.rsu-field--checkbox {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.rsu-checkbox {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	flex: none;
}

.rsu-checkbox:disabled + label {
	color: var(--rsu-muted);
}

.rsu-register :focus-visible {
	outline: 3px solid var(--rsu-focus);
	outline-offset: 2px;
}

.rsu-pricing {
	margin: 0 0 1.25rem;
	padding: 1rem 1.125rem;
	background-color: var(--rsu-card-bg);
	border: 1px solid var(--rsu-card-border);
	border-radius: 12px;
}

/* Collapsed rather than display:none, so the live region stays in the
   accessibility tree and its first update is announced reliably. */
.rsu-pricing:empty {
	margin: 0;
	padding: 0;
	border: 0;
}

.rsu-pricing--closed {
	background-color: var(--rsu-closed-bg);
}

/* The pill at the top of the card: a light tint of the summary accent with dark accent text (4.5:1 on the tint, worked out in PHP). */
.rsu-pricing__pill {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.1875rem 0.75rem;
	font-size: var(--rsu-helper-fs);
	font-weight: 600;
	line-height: 1.5;
	color: var(--rsu-pill-gen-fg);
	background-color: var(--rsu-pill-gen-bg);
	border-radius: 999px;
}

.rsu-pricing--earlybird .rsu-pricing__pill {
	color: var(--rsu-pill-eb-fg);
	background-color: var(--rsu-pill-eb-bg);
}

.rsu-pricing--closed .rsu-pricing__pill {
	color: #3c434a;
	background-color: #dcdcde;
}

.rsu-pricing__lines {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.375rem 1rem;
	margin: 0 0 0.75rem;
}

.rsu-pricing__lines dt,
.rsu-pricing__lines dd {
	margin: 0;
}

.rsu-pricing__lines dd {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Divider, then the total: the label small, the amount about 26px and bold. */
.rsu-pricing__totalrow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--rsu-card-border);
}

.rsu-pricing__total-label {
	font-weight: 600;
}

.rsu-pricing__total {
	font-size: 26px; /* px, not rem: a theme's smaller phone root size must not shrink the headline figure */
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

/* Early bird only: the general price struck through and what the buyer saves. */
.rsu-pricing__save {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	margin: 0.25rem 0 0;
	font-size: var(--rsu-helper-fs);
}

.rsu-pricing__was {
	color: var(--rsu-helper);
}

.rsu-pricing__save-text {
	font-weight: 600;
	color: var(--rsu-eb-text);
}

.rsu-pricing__note {
	color: var(--rsu-helper);
	font-size: var(--rsu-helper-fs);
	margin: 0.75rem 0 0;
}

.rsu-admin-notice {
	padding: 0.75rem 1rem;
	margin: 0 0 1rem;
	background-color: var(--rsu-error-bg);
	border-left: 4px solid var(--rsu-error-border);
	border-radius: 4px;
	font-size: var(--rsu-helper-fs);
}

/* The Book button. It wears the theme's own button classes (wp-element-button / button), so these rules set only the
   shape, with zero specificity (:where) so every theme rule wins; the colours below are a last-resort fallback for a
   theme that styles neither. "Use my brand colour" (Settings -> Booking) adds its colours through inline CSS. */
:where( .rsu-register .rsu-book ) {
	display: block;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 1rem;
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background-color: var(--rsu-accent);
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
}

.rsu-register .rsu-book[aria-disabled="true"] {
	opacity: 0.5;
	cursor: pointer;
}

.rsu-register .rsu-book[aria-busy="true"] {
	opacity: 0.7;
	cursor: progress;
}

.rsu-register__error {
	padding: 1rem;
	background-color: var(--rsu-error-bg);
	border-left: 4px solid var(--rsu-error-border);
	border-radius: 4px;
}

.rsu-register__error p {
	margin: 0;
}

.rsu-register [hidden] {
	display: none !important;
}

/* Seats and attendees (F3) */
.rsu-attendees__rows {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--rsu-border);
	border-radius: 4px;
	min-width: 0;
}

.rsu-attendees__rows legend {
	padding: 0 0.375rem;
}

.rsu-attendee-row {
	margin: 0 0 0.5rem;
}

.rsu-attendee-row .rsu-field {
	margin-bottom: 0.625rem;
}

.rsu-attendee-row input[aria-invalid="true"] {
	border-color: var(--rsu-error-border);
	outline: 2px solid var(--rsu-error-border);
}

.rsu-attendees__summary {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.25rem 1rem;
	margin: 0 0 1.25rem;
}

.rsu-attendees__summary dt {
	font-weight: 600;
}

.rsu-attendees__summary dd {
	margin: 0;
}

.rsu-attendees__list {
	margin: 0 0 1rem 1.25rem;
	padding: 0;
}

.rsu-attendees__saved {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	background-color: #edfaef;
	border-left: 4px solid var(--rsu-earlybird);
	border-radius: 4px;
}

@media (min-width: 40rem) {
	.rsu-attendee-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 1rem;
	}
}

/* UI3: date and time trigger, chosen-session line, currency note, "From" price */
.rsu-picker-btn {
	display: block;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	font: inherit;
	text-align: left;
	color: inherit;
	background-color: #fff;
	border: 1px solid var(--rsu-border);
	border-radius: var(--rsu-radius);
	cursor: pointer;
}

.rsu-picker-btn:disabled {
	background-color: var(--rsu-surface);
	color: var(--rsu-muted);
	cursor: not-allowed;
}

/* Links inside the form ("Change", the contact address): the text colour, underlined, in every state. The selector is scoped so a
   theme's button:hover / a:hover colours cannot reach it. */
.rsu-register .rsu-link,
.rsu-pick .rsu-link {
	padding: 0;
	margin: 0;
	font: inherit;
	color: var(--rsu-text);
	text-decoration: underline;
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.rsu-register .rsu-link:hover,
.rsu-register .rsu-link:focus,
.rsu-pick .rsu-link:hover,
.rsu-pick .rsu-link:focus {
	color: var(--rsu-text);
	text-decoration: underline;
	background: none;
}

.rsu-register .rsu-register__error a,
.rsu-register .rsu-field__hint a,
.rsu-register .rsu-pricing a {
	color: var(--rsu-text);
	text-decoration: underline;
}

.rsu-currency-note {
	margin: -0.5rem 0 1.25rem; /* superseded inside the summary card */
}

.rsu-pricing__from {
	margin: 0;
	font-weight: 700;
}

/* The picker dialog. Desktop: a centred modal. Phones: a full-screen sheet.

   UI5 (1.9.3): every control is scoped under .rsu-pick so a theme's button / a rules (Astra: orange text and border on :hover, white
   text on its own hover background) cannot reach it. States are explicit, one set for every control:
     normal    dark text on white, grey border
     hover     light grey background, dark text, darker border
     selected  the button colour with the button text colour (--rsu-btn-bg / --rsu-btn-fg)
     selected + hover   the same colours (a thin inner ring marks the hover); the text never turns into its background
     focus     a 3px dark ring (#1d2327, set as --rsu-focus here) with a 2px offset, which shows on white, grey and the accent alike */
html.rsu-pick-lock {
	overflow: hidden;
}

.rsu-pick {
	--rsu-btn-bg: var(--rsu-accent);
	--rsu-btn-fg: var(--rsu-accent-fg);
	--rsu-focus: #1d2327;
	width: min( 26rem, calc( 100vw - 2rem ) );
	max-height: min( 42rem, calc( 100vh - 2rem ) );
	margin: auto;
	padding: 0;
	font-size: var(--rsu-fs);
	line-height: 1.5;
	color: var(--rsu-text);
	background: #fff;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.3 );
	overflow: hidden;
}

.rsu-pick[open] {
	display: flex;
	flex-direction: column;
}

.rsu-pick::backdrop {
	background: rgba( 0, 0, 0, 0.5 );
}

.rsu-pick *,
.rsu-pick *::before,
.rsu-pick *::after {
	box-sizing: border-box;
}

.rsu-pick :focus-visible {
	outline: 3px solid var(--rsu-focus);
	outline-offset: 2px;
}

/* Theme leak guard: nothing a theme sets on a bare <button> survives inside the dialog. */
.rsu-pick button {
	margin: 0;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	background-image: none;
	-webkit-appearance: none;
	appearance: none;
}

.rsu-pick__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1rem 0.5rem;
}

.rsu-pick__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--rsu-text);
}

.rsu-pick__workshop {
	margin: 0.125rem 0 0;
	font-size: var(--rsu-helper-fs);
	color: var(--rsu-helper);
}

.rsu-pick .rsu-pick__close {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	margin: -0.5rem -0.5rem 0 0;
	padding: 0;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--rsu-text);
	background-color: transparent;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.rsu-pick .rsu-pick__close:hover {
	color: var(--rsu-text);
	background-color: var(--rsu-surface);
}

.rsu-pick__toggle {
	display: flex;
	/* The right margin adds the scroll area's scrollbar width (--rsu-sbw, measured by rsu-picker.js), so the toggle, the month headings
	   and the session rows all end at the same right edge as well as starting at the same left edge. */
	margin: 0.5rem calc( 1rem + var(--rsu-sbw, 0px) ) 0.5rem 1rem;
}

.rsu-pick .rsu-pick__toggle-btn {
	flex: 1;
	min-height: 2.5rem;
	padding: 0.375rem 1rem;
	font-size: var(--rsu-fs);
	font-weight: 600;
	line-height: 1.4;
	color: var(--rsu-text);
	background-color: #fff;
	border: 1px solid var(--rsu-border);
	cursor: pointer;
}

.rsu-pick .rsu-pick__toggle-btn:first-child { border-radius: var(--rsu-radius) 0 0 var(--rsu-radius); }
.rsu-pick .rsu-pick__toggle-btn:last-child  { border-radius: 0 var(--rsu-radius) var(--rsu-radius) 0; border-left: 0; }

.rsu-pick .rsu-pick__toggle-btn:hover {
	color: var(--rsu-text);
	background-color: var(--rsu-surface);
	border-color: var(--rsu-border-hover);
}

.rsu-pick .rsu-pick__toggle-btn[aria-pressed="true"],
.rsu-pick .rsu-pick__toggle-btn[aria-pressed="true"]:hover,
.rsu-pick .rsu-pick__toggle-btn[aria-pressed="true"]:focus {
	color: var(--rsu-btn-fg);
	background-color: var(--rsu-btn-bg);
	border-color: var(--rsu-btn-bg);
}

.rsu-pick .rsu-pick__toggle-btn[aria-pressed="true"]:hover {
	box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, 0.25 );
}

.rsu-pick__head,
.rsu-pick__toggle {
	flex: none;
}

.rsu-pick__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 0 1rem 1rem; /* room under the legend, so it scrolls clear of the footer */
	overflow-y: auto;
}

.rsu-pick__foot {
	flex: none; /* never squeezed over the end of the scroll area */
	margin: 0;
	padding: 0.625rem 1rem;
	font-size: var(--rsu-helper-fs);
	color: var(--rsu-helper);
	border-top: 1px solid #dcdcde;
}

.rsu-pick__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0.25rem 0 0.5rem;
}

.rsu-pick__monthname {
	margin: 0;
	font-size: 1.0625rem;
	color: var(--rsu-text);
}

.rsu-pick .rsu-pick__navbtn {
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--rsu-text);
	background-color: transparent;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.rsu-pick .rsu-pick__navbtn:hover:not( :disabled ) {
	color: var(--rsu-text);
	background-color: var(--rsu-surface);
}

.rsu-pick .rsu-pick__navbtn:disabled {
	color: #b0b3b8;
	background-color: transparent;
	cursor: not-allowed;
}

.rsu-pick__grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.rsu-pick__grid th {
	padding: 0.25rem 0;
	font-size: var(--rsu-helper-fs);
	font-weight: 600;
	color: var(--rsu-helper);
	text-align: center;
	background: none;
	border: 0;
}

.rsu-pick__cell {
	padding: 2px;
	text-align: center;
	background: none;
	border: 0;
}

.rsu-pick .rsu-pick__day {
	display: block;
	width: 100%;
	min-height: 2.5rem;
	padding: 0;
	font-size: var(--rsu-fs);
	line-height: 1.25;
	color: var(--rsu-helper);
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 50%;
	cursor: default;
}

.rsu-pick .rsu-pick__day:hover {
	color: var(--rsu-helper);
	background-color: transparent;
}

.rsu-pick .rsu-pick__day.is-available {
	font-weight: 700;
	color: var(--rsu-text);
	border-color: var(--rsu-text);
	cursor: pointer;
}

.rsu-pick .rsu-pick__day.is-available:hover {
	color: var(--rsu-text);
	background-color: var(--rsu-surface);
	border-color: var(--rsu-text);
}

.rsu-pick .rsu-pick__day.is-closed,
.rsu-pick .rsu-pick__day.is-closed:hover,
.rsu-pick .rsu-pick__day.is-closed:focus {
	color: var(--rsu-helper);
	background: repeating-linear-gradient( 135deg, #f0f0f1, #f0f0f1 3px, #fff 3px, #fff 6px );
	border-color: #dcdcde;
	border-radius: 4px;
}

.rsu-pick .rsu-pick__day.is-selected,
.rsu-pick .rsu-pick__day.is-selected:hover,
.rsu-pick .rsu-pick__day.is-selected:focus {
	color: var(--rsu-btn-fg);
	background: var(--rsu-btn-bg);
	border-color: var(--rsu-btn-bg);
}

.rsu-pick .rsu-pick__day.is-selected:hover {
	box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, 0.25 );
}

.rsu-pick__times {
	margin: 0.25rem 0 0.5rem;
	padding: 0.75rem;
	background: var(--rsu-surface);
	border-radius: 6px;
}

.rsu-pick__times-label {
	margin: 0 0 0.5rem;
	font-weight: 600;
}

.rsu-pick__timelist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.rsu-pick .rsu-pick__time {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 6rem;
	min-height: 2.75rem;
	padding: 0.375rem 0.75rem;
	font-size: var(--rsu-fs);
	line-height: 1.4;
	color: var(--rsu-text);
	background-color: #fff;
	border: 1px solid var(--rsu-text);
	border-radius: 4px;
	cursor: pointer;
}

.rsu-pick .rsu-pick__time:hover:not( .is-selected ):not( .is-closed ) {
	color: var(--rsu-text);
	background-color: var(--rsu-surface);
	border-color: var(--rsu-text);
}

.rsu-pick__time-main { font-weight: 700; }
.rsu-pick__time-price { font-size: var(--rsu-helper-fs); color: var(--rsu-helper); }

.rsu-pick .rsu-pick__time.is-selected,
.rsu-pick .rsu-pick__time.is-selected:hover,
.rsu-pick .rsu-pick__time.is-selected:focus {
	color: var(--rsu-btn-fg);
	background-color: var(--rsu-btn-bg);
	border-color: var(--rsu-btn-bg);
}

.rsu-pick .rsu-pick__time.is-selected:hover {
	box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, 0.25 );
}

.rsu-pick .rsu-pick__time.is-selected .rsu-pick__time-price { color: inherit; }

.rsu-pick .rsu-pick__time.is-closed,
.rsu-pick .rsu-pick__time.is-closed:hover,
.rsu-pick .rsu-pick__time.is-closed:focus,
.rsu-pick .rsu-pick__item.is-closed,
.rsu-pick .rsu-pick__item.is-closed:hover,
.rsu-pick .rsu-pick__item.is-closed:focus {
	color: var(--rsu-helper);
	background-color: #f0f0f1;
	border-color: #dcdcde;
	cursor: not-allowed;
}

.rsu-pick__legend {
	display: flex;
	gap: 1rem;
	margin: 0.75rem 0 0.5rem;
	padding: 0;
	font-size: var(--rsu-helper-fs);
	color: var(--rsu-helper);
	list-style: none;
}

.rsu-pick__swatch {
	display: inline-block;
	width: 0.875rem;
	height: 0.875rem;
	margin-right: 0.375rem;
	vertical-align: -2px;
	border: 1px solid var(--rsu-text);
	border-radius: 50%;
}

.rsu-pick__swatch.is-closed {
	background: repeating-linear-gradient( 135deg, #dcdcde, #dcdcde 2px, #fff 2px, #fff 4px );
	border-color: #dcdcde;
	border-radius: 2px;
}

.rsu-pick__monthhead {
	margin: 1rem 0 0.375rem;
	padding: 0;
	font-size: 1rem;
	color: var(--rsu-text);
}

.rsu-pick__listview {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* A theme's list rules (indent, bullets, margins on li) must not push the rows in from the month headings and the toggle. */
.rsu-pick .rsu-pick__list,
.rsu-pick .rsu-pick__list > li {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rsu-pick .rsu-pick__list > li::before,
.rsu-pick .rsu-pick__list > li::marker {
	content: none;
}

.rsu-pick .rsu-pick__item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 2.75rem;
	margin: 0 0 0.375rem;
	padding: 0.5rem 0.75rem;
	font-size: var(--rsu-fs);
	line-height: 1.4;
	text-align: left;
	color: var(--rsu-text);
	background-color: #fff;
	border: 1px solid var(--rsu-border);
	border-radius: var(--rsu-radius);
	cursor: pointer;
}

.rsu-pick .rsu-pick__item:hover:not( .is-selected ):not( .is-closed ) {
	color: var(--rsu-text);
	background-color: var(--rsu-surface);
	border-color: var(--rsu-border-hover);
}

.rsu-pick .rsu-pick__item.is-selected,
.rsu-pick .rsu-pick__item.is-selected:hover,
.rsu-pick .rsu-pick__item.is-selected:focus {
	color: var(--rsu-btn-fg);
	background-color: var(--rsu-btn-bg);
	border-color: var(--rsu-btn-bg);
}

.rsu-pick .rsu-pick__item.is-selected:hover {
	box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, 0.25 );
}

.rsu-pick__item-day  { font-weight: 600; }
.rsu-pick__item-side { display: inline-flex; align-items: center; gap: 0.5rem; }

/* "Early bird" badge: the summary accent with its text colour; on the selected row (which is the accent) it inverts, so it never vanishes. */
.rsu-pick__badge {
	padding: 0.0625rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--rsu-eb-fg);
	background-color: var(--rsu-eb-bg);
	border-radius: 999px;
}

.rsu-pick .rsu-pick__item.is-selected .rsu-pick__badge {
	color: var(--rsu-btn-bg);
	background-color: var(--rsu-btn-fg);
}

@media (max-width: 40rem) {
	.rsu-pick {
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}
}

/* UI4 Part B / UI6: one look for every control of the booking form (date and time, seats, selects, text inputs, the exam card), scoped to
   the WorkshopHQ wrapper so the theme's other forms are untouched. Same height, 1px border, 10px radius, padding and font size whatever the
   theme does to a native <select> or <input>. Hover darkens the border. No shadows, gradients or animations beyond colour transitions. */
.rsu-register {
	--rsu-control-h: 2.875rem;
}

.rsu-register .rsu-select,
.rsu-register .rsu-picker-btn,
.rsu-register .rsu-attendee-row input[type="text"],
.rsu-register .rsu-attendee-row input[type="email"] {
	height: var(--rsu-control-h);
	min-height: var(--rsu-control-h);
	padding: 0 0.75rem;
	font-family: inherit;
	font-size: var(--rsu-fs);
	line-height: 1.25;
	color: var(--rsu-text);
	background-color: #fff;
	border: 1px solid var(--rsu-border);
	border-radius: var(--rsu-radius);
	box-shadow: none;
	transition: border-color var(--rsu-tx) ease;
}

.rsu-register .rsu-select:hover:not( :disabled ),
.rsu-register .rsu-picker-btn:hover:not( :disabled ),
.rsu-register .rsu-attendee-row input[type="text"]:hover,
.rsu-register .rsu-attendee-row input[type="email"]:hover,
.rsu-register .rsu-stepper:hover {
	border-color: var(--rsu-border-hover);
}

.rsu-register select.rsu-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2rem;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2350575e' stroke-width='2'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
}

/* Date field: a button-style field. Calendar icon (accent) on the left, the choice in the middle, an underlined "Change" on the right.
   No dropdown triangle. */
.rsu-register .rsu-picker-btn {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.625rem;
	width: 100%;
	text-align: left;
}

.rsu-register .rsu-picker-btn:disabled {
	background-color: var(--rsu-surface);
	color: var(--rsu-muted);
}

.rsu-register .rsu-picker-btn__icon {
	flex: none;
	color: var(--rsu-accent);
}

.rsu-register .rsu-picker-btn:disabled .rsu-picker-btn__icon {
	color: var(--rsu-muted);
}

.rsu-register .rsu-picker-btn__text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rsu-register .rsu-picker-btn.is-chosen .rsu-picker-btn__text {
	font-weight: 500;
}

.rsu-register .rsu-picker-btn__change {
	flex: none;
	text-decoration: underline;
}

/* Seats stepper: - [ n ] + in one bordered control of the same height. */
.rsu-stepper {
	display: inline-flex;
	align-items: stretch;
	height: var(--rsu-control-h);
	background-color: #fff;
	border: 1px solid var(--rsu-border);
	border-radius: var(--rsu-radius);
	overflow: hidden;
	transition: border-color var(--rsu-tx) ease;
}

.rsu-register .rsu-stepper__btn {
	flex: none;
	width: var(--rsu-control-h);
	margin: 0;
	padding: 0;
	font: inherit;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--rsu-text);
	background-color: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--rsu-tx) ease;
}

.rsu-register .rsu-stepper__btn:hover:not( :disabled ) {
	color: var(--rsu-text);
	background-color: var(--rsu-surface);
}

.rsu-register .rsu-stepper__btn:disabled {
	color: #a7aaad;
	background-color: #fff;
	cursor: not-allowed;
}

.rsu-register .rsu-stepper__input {
	width: 4rem;
	height: 100%;
	margin: 0;
	padding: 0 0.25rem;
	font: inherit;
	font-size: var(--rsu-fs);
	text-align: center;
	color: var(--rsu-text);
	background-color: #fff;
	border: 0;
	border-left: 1px solid var(--rsu-border);
	border-right: 1px solid var(--rsu-border);
	border-radius: 0;
	box-shadow: none;
	appearance: textfield;
	-moz-appearance: textfield;
}

.rsu-register .rsu-stepper__input::-webkit-outer-spin-button,
.rsu-register .rsu-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Exam add-on as a card: a full-width bordered row, clickable anywhere. The real checkbox is visually hidden (still focusable and
   announced); the drawn box follows it. Checked: accent border, very light accent tint, filled box with a tick. */
.rsu-register .rsu-exam-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	margin: 0 0 1.25rem;
	padding: 0.875rem 1rem;
	background-color: #fff;
	border: 1px solid var(--rsu-border);
	border-radius: var(--rsu-radius);
	transition: border-color var(--rsu-tx) ease, background-color var(--rsu-tx) ease;
}

.rsu-register .rsu-exam-card:hover:not( .is-disabled ):not( .is-checked ) {
	border-color: var(--rsu-border-hover);
}

.rsu-register .rsu-exam-card.is-checked {
	background-color: var(--rsu-tint-soft);
	border-color: var(--rsu-accent);
}

.rsu-register .rsu-exam-card__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	cursor: pointer;
}

.rsu-register .rsu-exam-card.is-disabled .rsu-exam-card__row {
	cursor: not-allowed;
}

/* 2+ seats, ticked: "Number of exams  - n +", indented under the title (box width + gap). */
.rsu-register .rsu-exam-card__qty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	padding-left: 2rem;
}

.rsu-register .rsu-exam-card__qty[hidden] {
	display: none;
}

.rsu-register .rsu-exam-card__qty-label {
	font-size: var(--rsu-helper-fs);
	color: var(--rsu-helper);
}

.rsu-register .rsu-exam-card.is-disabled .rsu-exam-card__title,
.rsu-register .rsu-exam-card.is-disabled .rsu-exam-card__price {
	color: var(--rsu-muted);
}

.rsu-register .rsu-exam-card__input {
	position: absolute;
	top: 50%;
	left: 1rem;
	width: 1.25rem;
	height: 1.25rem;
	margin: -0.625rem 0 0;
	opacity: 0;
	cursor: inherit;
}

.rsu-register .rsu-exam-card__box {
	position: relative;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background-color: #fff;
	border: 1px solid var(--rsu-border-hover);
	border-radius: 6px;
	transition: background-color var(--rsu-tx) ease, border-color var(--rsu-tx) ease;
}

.rsu-register .rsu-exam-card__input:checked + .rsu-exam-card__box {
	background-color: var(--rsu-accent);
	border-color: var(--rsu-accent);
}

.rsu-register .rsu-exam-card__input:checked + .rsu-exam-card__box::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 5px;
	width: 5px;
	height: 10px;
	border: solid var(--rsu-accent-fg);
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

.rsu-register .rsu-exam-card__input:disabled + .rsu-exam-card__box {
	background-color: var(--rsu-surface);
	border-color: var(--rsu-border);
}

/* Keyboard focus lands on the hidden checkbox; the ring is drawn round the card. */
.rsu-register .rsu-exam-card:has( .rsu-exam-card__input:focus-visible ) {
	outline: 3px solid var(--rsu-focus);
	outline-offset: 2px;
}

.rsu-register .rsu-exam-card__input:focus-visible + .rsu-exam-card__box {
	outline: 3px solid var(--rsu-focus);
	outline-offset: 2px;
}

.rsu-register .rsu-exam-card__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.rsu-register .rsu-exam-card__title {
	font-weight: 600;
}

.rsu-register .rsu-exam-card__sub {
	margin: 0;
	font-size: var(--rsu-helper-fs);
	line-height: 1.4;
	color: var(--rsu-helper);
}

.rsu-register .rsu-exam-card__price {
	flex: none;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Price summary: the card, then the currency note inside it (14px, secondary colour, link underlined); no stray space at the bottom. */
.rsu-register .rsu-pricing > :last-child {
	margin-bottom: 0;
}

.rsu-register .rsu-pricing .rsu-currency-note {
	margin: 0.75rem 0 0;
	padding-top: 0.75rem;
	font-size: var(--rsu-helper-fs);
	color: var(--rsu-helper);
	border-top: 1px solid var(--rsu-card-border);
}

.rsu-register .rsu-pricing .rsu-currency-note .rsu-link {
	color: var(--rsu-helper);
}

.rsu-register .rsu-pricing .rsu-currency-note .rsu-link:hover,
.rsu-register .rsu-pricing .rsu-currency-note .rsu-link:focus {
	color: var(--rsu-text);
}

/* Register button: full width at every size (the form is one narrow column), faded to 50% until a date is chosen. */
.rsu-register .rsu-checkout-help,
.rsu-register .rsu-trust,
.rsu-register .rsu-trust__methods {
	margin: 0.5rem 0 0;
	text-align: center;
	font-size: var(--rsu-helper-fs);
	color: var(--rsu-helper);
}

.rsu-register .rsu-trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	margin-top: 0.75rem;
}

.rsu-register .rsu-trust__icon {
	flex: none;
}

.rsu-register .rsu-trust__methods {
	margin-top: 0.25rem;
	font-size: 13px; /* px, not rem: some themes (Astra) shrink the root font size on phones */
}

.rsu-register .rsu-checkout-wrap {
	margin-bottom: 0.5rem;
}

/* Visually hidden, still read by screen readers. */
.rsu-register .rsu-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Phones (< 600px): a slim bar fixed to the bottom with the total and a compact Register button, shown by rsu-checkout.js while the real
   button is out of view. Safe-area insets keep it clear of a phone's home indicator. Hidden on wider screens and while the picker is open. */
.rsu-register .rsu-sticky {
	display: none;
}

@media (max-width: 599px) {
	.rsu-register .rsu-sticky {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 10px calc( 16px + env( safe-area-inset-right, 0px ) ) calc( 10px + env( safe-area-inset-bottom, 0px ) ) calc( 16px + env( safe-area-inset-left, 0px ) );
		background-color: #fff;
		border-top: 1px solid var(--rsu-card-border);
	}

	.rsu-register .rsu-sticky__total {
		display: flex;
		flex-direction: column;
		margin: 0;
		line-height: 1.2;
	}

	.rsu-register .rsu-sticky__label {
		font-size: var(--rsu-helper-fs);
		color: var(--rsu-helper);
	}

	.rsu-register .rsu-sticky__amount {
		font-size: 20px;
		font-weight: 700;
	}

	.rsu-register .rsu-book.rsu-sticky__btn {
		display: block;
		flex: none;
		width: auto;
		min-width: 9rem;
		min-height: 2.5rem;
		padding-top: 0.375rem;
		padding-bottom: 0.375rem;
	}

	html.rsu-pick-lock .rsu-register .rsu-sticky {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rsu-register {
		--rsu-tx: 0s;
	}
}