/*
 * Booking picker.
 * Brand orange #f68b1f, taken from the theme stylesheet (by far its dominant
 * colour). Square corners throughout - no border-radius anywhere.
 */

.atb {
	--atb-brand: #f68b1f;
	--atb-brand-dark: #d4740f;
	--atb-ink: #212529;
	--atb-muted: #6c757d;
	--atb-line: #dee2e6;
	--atb-off: #f6f6f6;

	max-width: 760px;
	margin: 0 auto;
	/* The page template is header -> content -> footer with nothing between,
	   so the picker would otherwise butt straight up against both. */
	padding: 3rem 1rem 4rem;
}
@media (max-width: 600px) {
	.atb { padding: 2rem 1rem 2.5rem; }
}

/* Wizard plus the help panel. Single column until there is genuinely room for
   a second, so the panel never squeezes the form. */
.atb-layout { max-width: 760px; }
.atb-main { min-width: 0; }

@media (min-width: 1080px) {
	.atb-layout {
		max-width: 1120px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 2.5rem;
		align-items: start;
	}
}

/* Wide enough for both margins: promos move to the LEFT column, help stays
   right. DOM order is form, help, promos - so on narrow screens the booking
   still comes first and the adverts last, where they belong. */
@media (min-width: 1440px) {
	.atb-layout {
		max-width: 1460px;
		grid-template-columns: 300px minmax(0, 1fr) 300px;
	}
	.atb-main   { grid-column: 2; grid-row: 1; }
	.atb-aside  { grid-column: 3; grid-row: 1; }
	.atb-promos { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--atb-sticky-top, 0px) + 1rem); }
}

.atb-aside { margin-top: 2rem; }
@media (min-width: 1080px) {
	.atb-aside {
		margin-top: 0;
		position: sticky;
		top: calc(var(--atb-sticky-top, 0px) + 1rem);
	}
}

.atb-help {
	border: 2px solid var(--atb-brand);
	background: #fff6ec;
	padding: 1.25rem;
}
.atb-help h4 {
	margin: 0 0 .5rem; font-size: 1.1rem; color: var(--atb-ink);
}
.atb-help p { margin: 0 0 .75rem; font-size: .92rem; line-height: 1.5; color: var(--atb-ink); }
.atb-help-phone {
	display: block; text-align: center;
	padding: .7rem .5rem; margin: .25rem 0 .75rem;
	background: var(--atb-brand); color: #fff !important;
	font-size: 1.25rem; font-weight: 700; letter-spacing: .01em;
	text-decoration: none !important;
}
.atb-help-phone:hover { background: var(--atb-brand-dark); }
.atb-help-sub { font-size: .85rem !important; color: var(--atb-muted) !important; margin-bottom: 0 !important; }

/* Promo cards: image-led and clickable end to end, so they read as offers
   rather than footnotes. */
.atb-promos { margin-top: 2rem; display: grid; gap: 1rem; }
@media (min-width: 1440px) { .atb-promos { margin-top: 0; } }
@media (min-width: 600px) and (max-width: 1439px) {
	/* Side by side in the stacked layout rather than two tall blocks. */
	.atb-promos { grid-template-columns: 1fr 1fr; }
}

.atb-promo {
	display: block; overflow: hidden;
	border: 2px solid var(--atb-line); background: #fff;
	text-decoration: none !important; color: inherit !important;
	transition: border-color .15s, transform .15s;
}
.atb-promo:hover { border-color: var(--atb-brand); transform: translateY(-2px); }
/* Media sits in its own clipping box. Without it a scaled image overflows its
   layout box and paints over the copy beneath. */
.atb-promo-media {
	display: block; overflow: hidden;
	height: 150px; background: var(--atb-off);
}
.atb-promo-media img {
	display: block; width: 100%; height: 100%; object-fit: cover;
}

/* Square product shots on white.
   A square image in a wide card cannot both fill the width and stay whole, so
   the slot gets taller and the image is shown complete rather than scaled up
   into a crop - scaling to fill the width cut the handle off the top, which is
   the part that makes a hand pallet truck recognisably manual. */
.atb-promo-media.is-contain {
	height: 200px; background: #fff;
}
.atb-promo-media.is-contain img {
	object-fit: contain;
}
.atb-promo-body { display: block; padding: 1rem 1.1rem 1.15rem; }
.atb-promo-body strong {
	display: block; font-size: 1.15rem; line-height: 1.25;
	color: var(--atb-ink); margin-bottom: .35rem;
}
.atb-promo-line {
	display: block; font-size: .95rem; line-height: 1.4; color: var(--atb-ink);
}
.atb-promo-body small {
	display: block; margin-top: .3rem;
	font-size: .8rem; color: var(--atb-muted);
}
.atb-promo-cta {
	display: inline-flex; align-items: center; gap: .35rem;
	margin-top: .8rem; padding: .5rem .9rem;
	background: var(--atb-brand); color: #fff;
	font-size: .9rem; font-weight: 700;
}
.atb-promo:hover .atb-promo-cta { background: var(--atb-brand-dark); }
.atb .is-hidden { display: none !important; }

.atb-step { margin: 0 0 1.75rem; }
.atb-step h3 { margin: 0 0 .75rem; font-size: 1.15rem; color: var(--atb-ink); }

/* Defensive reset.
   The theme styles BARE ELEMENTS, not just its own classes - its mobile media
   queries carry `header{background:#f68b1f;height:52px}`, so any semantic
   header/section/aside used inside the plugin picks up an orange bar and a
   fixed height. Neutralised here rather than avoided, so the component is
   safe whatever markup it grows.
   <nav> is deliberately excluded: .atb-nav sets its own white background for
   the sticky bar and must keep it. */
.atb header, .atb section, .atb aside, .atb article, .atb figure {
	/* Only what the theme actually breaks. Deliberately NOT margin or padding:
	   an element+class selector outranks the plain classes below, so resetting
	   spacing here would silently flatten the panel and sidebar layout. */
	background: none !important;
	background-color: transparent !important;
	height: auto !important;
	min-height: 0;
	border: 0;
}
.atb h2, .atb h3, .atb h4 {
	background: none !important;
	background-color: transparent !important;
	padding: 0;
	border: 0;
	text-transform: none;
	letter-spacing: normal;
}
/* Long copy must wrap rather than be clipped or forced onto one line. */
.atb p, .atb h2, .atb h3, .atb h4, .atb li, .atb label, .atb span, .atb dd, .atb dt {
	white-space: normal;
	overflow-wrap: break-word;
	max-width: 100%;
}
/* ...except the step tracker, which is deliberately a single scrolling line. */
.atb .atb-crumb-btn, .atb .atb-crumb-btn span { white-space: nowrap; }

.atb-header { margin: 0 0 1.5rem; }
.atb-header h2 {
	margin: 0 0 .35rem;
	font-size: 2rem; line-height: 1.15; color: var(--atb-ink);
}
.atb-header h2::after {
	content: ''; display: block;
	width: 3rem; height: 4px; margin-top: .6rem;
	background: var(--atb-brand);
}
.atb-header p { margin: .75rem 0 0; color: var(--atb-muted); font-size: 1rem; }
@media (max-width: 600px) {
	.atb-header h2 { font-size: 1.6rem; }
}

/* --- Breadcrumb tracker ------------------------------------------------- */

.atb-crumbs {
	/* NEVER wraps. With 8 steps a wrapping tracker drops to a second row and
	   reads as two separate things, so it scrolls sideways instead and the JS
	   keeps the current step in view. */
	display: flex; flex-wrap: nowrap; gap: .15rem;
	list-style: none; margin: 0 0 2rem; padding: 0;
	border-bottom: 2px solid var(--atb-line);
	overflow-x: auto; overflow-y: hidden;
	scrollbar-width: none;              /* Firefox */
	-ms-overflow-style: none;           /* old Edge */

	/* Stays visible while scrolling. --atb-sticky-top is measured at runtime
	   from the theme's own fixed header, so the tracker sits below it rather
	   than underneath it. */
	position: sticky;
	top: var(--atb-sticky-top, 0px);
	z-index: 20;
	background: #fff;
	padding-top: .5rem;
}
.atb-crumbs::-webkit-scrollbar { display: none; }
.atb-crumb { margin: 0; flex: 0 0 auto; }
.atb-crumb-btn {
	display: flex; align-items: center; gap: .4rem;
	background: transparent; border: 0; border-bottom: 3px solid transparent;
	padding: .5rem .55rem; margin-bottom: -2px;
	font-size: .85rem; color: var(--atb-muted); cursor: pointer;
	font-family: inherit; white-space: nowrap;
}
.atb-crumb-btn:disabled { opacity: .45; cursor: not-allowed; }
.atb-crumb-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.5rem; height: 1.5rem; flex: 0 0 auto;
	background: var(--atb-off); color: var(--atb-muted);
	border: 1px solid var(--atb-line);
	font-size: .78rem; font-weight: 700;
}
.atb-crumb.is-done .atb-crumb-num {
	background: var(--atb-brand); border-color: var(--atb-brand); color: #fff;
}
.atb-crumb.is-current .atb-crumb-btn {
	color: var(--atb-ink); font-weight: 700; border-bottom-color: var(--atb-brand);
}
.atb-crumb.is-current .atb-crumb-num {
	background: var(--atb-brand); border-color: var(--atb-brand); color: #fff;
}
/* Below the width where 8 full labels fit, drop to numbers only and let the
   current step keep its label - so the tracker still reads as "step 6 of 8,
   Start date" without ever needing a second row. */
@media (max-width: 900px) {
	.atb-crumb-label { display: none; }
	.atb-crumb.is-current .atb-crumb-label { display: inline; }
}

.atb-panel { margin: 0 0 1.5rem; }
.atb-panel h3 { margin: 0 0 1rem; font-size: 1.25rem; color: var(--atb-ink); }

/* --- Back / next -------------------------------------------------------- */

.atb-nav {
	display: flex; justify-content: space-between; gap: 1rem;
	margin-top: 2rem; padding: 1rem 0;
	border-top: 1px solid var(--atb-line);

	/* Pinned to the bottom of the viewport so Back/Next are always reachable
	   without scrolling to the end of a long step (the machine list and the
	   calendar are both taller than a phone screen). */
	position: sticky;
	bottom: 0;
	z-index: 20;
	background: #fff;
}
.atb-back, .atb-next {
	padding: .7rem 1.6rem; border: 2px solid var(--atb-brand);
	font-size: .98rem; font-weight: 700; cursor: pointer; font-family: inherit;
}
.atb-back { background: #fff; color: var(--atb-brand); }
.atb-back:hover:not(:disabled) { background: #fff6ec; }
.atb-next { background: var(--atb-brand); color: #fff; margin-left: auto; }
.atb-next:hover:not(:disabled) { background: var(--atb-brand-dark); }
.atb-back:disabled, .atb-next:disabled {
	border-color: var(--atb-line); background: var(--atb-off);
	color: var(--atb-muted); cursor: not-allowed;
}

.atb-options { display: grid; gap: .5rem; }
@media (min-width: 600px) {
	.atb-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.atb-option {
	display: flex; align-items: flex-start; gap: .6rem;
	padding: .85rem 1rem;
	border: 2px solid var(--atb-line);
	background: #fff; cursor: pointer;
	transition: border-color .15s, background .15s;
}
.atb-option:hover { border-color: var(--atb-brand); }
.atb-option input { margin-top: .25rem; flex: 0 0 auto; accent-color: var(--atb-brand); }
.atb-option span { display: flex; flex-direction: column; gap: .15rem; }
.atb-option small { color: var(--atb-muted); line-height: 1.35; }

/* Options carrying an explanation need room to breathe - a two-up grid
   squashes a paragraph into a column. */
.atb-options-wide { grid-template-columns: 1fr !important; }
.atb-options-wide .atb-option { padding: 1rem 1.1rem; }

/* What the customer actually gets. */
.atb-option .atb-what { margin-top: .3rem; line-height: 1.5; }
.atb-option .atb-what strong { color: var(--atb-ink); display: block; margin-bottom: .15rem; }

/* Secondary line: price, or where it can run. */
.atb-option .atb-where {
	margin-top: .4rem; padding-top: .4rem;
	border-top: 1px dashed var(--atb-line);
	font-weight: 600; color: var(--atb-brand);
}

.atb-lead { margin: -.35rem 0 1rem; font-size: .95rem; }

/* --- Fleet / job number shortcut ---------------------------------------- */

/* Quiet link that reveals the lookup. A button, not an anchor, because it goes
   nowhere - but it reads as a link. */
.atb-linklike {
	display: inline-flex; align-items: center; gap: .4rem;
	margin-bottom: 1.25rem; padding: 0;
	background: none; border: 0;
	font-family: inherit; font-size: .9rem; font-weight: 600;
	color: var(--atb-brand); cursor: pointer;
	text-decoration: underline; text-align: left;
}
.atb-linklike::before { content: '+'; font-weight: 700; font-size: 1.05em; }
.atb-linklike:hover { color: var(--atb-brand-dark); }

.atb-shortcut {
	border: 2px dashed var(--atb-brand);
	background: #fff6ec;
	padding: .85rem 1rem;
	margin-bottom: 1.25rem;
}
.atb-shortcut h4 { margin: 0 0 .2rem; font-size: 1rem; color: var(--atb-ink); }
.atb-shortcut .atb-note { font-size: .88rem; }
.atb-shortcut-row { margin-top: .6rem; }
.atb-shortcut .atb-note { margin-top: 0; }
.atb-shortcut-row { display: flex; gap: .5rem; margin-top: .75rem; }
.atb-shortcut-row input { flex: 1 1 auto; }
.atb-shortcut-go {
	flex: 0 0 auto; padding: .6rem 1.4rem;
	background: var(--atb-brand); color: #fff; border: 2px solid var(--atb-brand);
	font-family: inherit; font-weight: 700; cursor: pointer;
}
.atb-shortcut-go:hover:not(:disabled) { background: var(--atb-brand-dark); }
.atb-shortcut-go:disabled { opacity: .6; cursor: default; }
.atb-shortcut-status { margin: .7rem 0 0; font-size: .9rem; line-height: 1.45; }
.atb-shortcut-status.is-ok { color: #1b7f3b; font-weight: 600; }
.atb-shortcut-status.is-error { color: #b3261e; font-weight: 600; }

.atb-dev { margin-top: .6rem; font-size: .82rem; color: var(--atb-muted); }
.atb-dev summary { cursor: pointer; font-weight: 600; }
.atb-dev p { margin: .4rem 0 0; line-height: 1.5; }
.atb-dev code {
	background: #fff; border: 1px solid var(--atb-line);
	padding: 0 .25rem; font-size: .95em;
}

/* The add-on offer.
   It stands out through STRUCTURE - a solid title bar and a heavier frame -
   rather than by tinting everything orange, which made the options inside look
   pre-selected and washed the whole panel out. */
.atb-addon {
	margin-top: 1.25rem;
	border: 2px solid var(--atb-brand);
	background: #fff;
}
/* Two classes deep on purpose: the `.atb h4` reset above is class+element and
   would otherwise win, stripping the bar's background and padding. */
.atb .atb-addon-head {
	margin: 0 !important;
	padding: .6rem .9rem !important;
	background: var(--atb-brand) !important;
	color: #fff !important;
	font-size: 1.02rem; font-weight: 700; line-height: 1.3;
}
.atb-addon-body { padding: .9rem; }
.atb-addon-body > p:first-child { margin-top: 0; }
.atb-addon p { margin: 0 0 .6rem; font-size: .92rem; line-height: 1.45; }
.atb-addon .atb-options { gap: .4rem; }
.atb-addon .atb-option { padding: .7rem .85rem; }
.atb-addon .atb-defer { margin-top: .5rem; padding: .55rem .7rem; }

/* Options inside the block stay WHITE, selected or not: a filled background
   reads as "already chosen" on something the customer has not picked yet.
   Selection is shown with the brand border and a heavier inner rule instead. */
.atb-addon .atb-option,
.atb-addon .atb-defer {
	background: #fff !important;
}
.atb-addon .atb-option:has(input:checked),
.atb-addon .atb-defer:has(input:checked) {
	border-color: var(--atb-brand) !important;
	border-style: solid !important;
	box-shadow: inset 0 0 0 2px var(--atb-brand);
}

/* No frame of its own: it already sits inside the bordered add-on panel, and
   a box within a box within a box was most of the bulk here. */
.atb-spec { margin: 0 0 .75rem; }
/* The collapsed answer: one line, with a quiet way back in. */
.atb-spec-done {
	display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
	margin: 0 0 .6rem !important;
	font-size: .9rem; font-weight: 600; color: var(--atb-ink);
}
.atb-spec-done .atb-linklike { margin-bottom: 0; font-size: .82rem; font-weight: 600; }
.atb-spec-done .atb-linklike::before { content: none; }
.atb-spec .atb-note { margin-top: 0; margin-bottom: .4rem; }
.atb-spec .atb-select { max-width: none; }
.atb-spec .atb-addr-grid { gap: .5rem; }
.atb-spec .atb-addr-row label { margin-bottom: .15rem; }

.atb-subhead {
	margin: 1.75rem 0 .75rem; font-size: 1.05rem; color: var(--atb-ink);
	padding-top: 1.25rem; border-top: 1px solid var(--atb-line);
}
.atb-addr-full { grid-column: 1 / -1; }

/* --- Machine picker ----------------------------------------------------- */

.atb-machine-grid {
	display: grid; gap: .6rem;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.atb-machine-card {
	display: flex; flex-direction: column; text-align: left;
	padding: 0; overflow: hidden;
	border: 2px solid var(--atb-line); background: #fff;
	cursor: pointer; font-family: inherit;
}
.atb-machine-card:hover { border-color: var(--atb-brand); }
.atb-machine-card.is-selected {
	border-color: var(--atb-brand); background: #fff6ec;
	box-shadow: inset 0 0 0 1px var(--atb-brand);
}
.atb-machine-card img {
	width: 100%; height: 110px; object-fit: cover; display: block;
	background: var(--atb-off);
}
.atb-machine-name {
	padding: .6rem .7rem .2rem;
	font-weight: 700; font-size: .92rem; color: var(--atb-ink); line-height: 1.25;
}
.atb-machine-hint {
	padding: 0 .7rem .65rem;
	font-size: .8rem; color: var(--atb-muted); line-height: 1.4;
}

.atb-machine-classes {
	margin-top: 1.5rem; padding-top: 1.25rem;
	border-top: 2px solid var(--atb-line);
}
.atb-machine-classes h4 { margin: 0 0 .3rem; font-size: 1.05rem; color: var(--atb-ink); }
.atb-machine-classes .atb-note { margin-bottom: .75rem; }

.atb-select-label {
	display: block; margin-bottom: .35rem;
	font-weight: 600; color: var(--atb-ink);
}
.atb-select {
	width: 100%; max-width: 520px; padding: .7rem;
	border: 2px solid var(--atb-line); background: #fff;
	font-family: inherit; font-size: .98rem; color: var(--atb-ink);
}
.atb-select:focus { border-color: var(--atb-brand); outline: none; }
.atb-select optgroup { font-weight: 700; color: var(--atb-brand); }
.atb-select option { color: var(--atb-ink); font-weight: 400; }
.atb-option:has(input:checked) {
	border-color: var(--atb-brand);
	background: #fff6ec;
}

.atb-note { color: var(--atb-muted); font-size: .9rem; margin: .6rem 0 0; }
.atb-error { color: #b3261e; font-weight: 600; margin: .75rem 0 0; }
.atb-loading { color: var(--atb-muted); margin: .6rem 0 0; }

/* --- Calendar ---------------------------------------------------------- */

.atb-cal {
	border: 1px solid var(--atb-line);
	background: #fff;
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

.atb-cal-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: .6rem .75rem;
	background: var(--atb-brand); color: #fff;
}
.atb-cal-head strong { font-size: 1.02rem; }

.atb-cal-nav {
	border: 0; background: transparent; color: #fff;
	font-size: 1.5rem; line-height: 1; cursor: pointer;
	padding: 0 .5rem;
}
.atb-cal-nav:disabled { opacity: .35; cursor: default; }

.atb-cal-dow, .atb-cal-grid {
	display: grid; grid-template-columns: repeat(7, 1fr);
}
.atb-cal-dow {
	border-bottom: 1px solid var(--atb-line);
}
.atb-cal-dow span {
	text-align: center; padding: .45rem 0;
	font-size: .72rem; font-weight: 700; text-transform: uppercase;
	color: var(--atb-muted);
}

.atb-cal-grid { padding: 2px; gap: 2px; }
.atb-cal-pad { display: block; }

.atb-cal-day {
	border: 1px solid transparent;
	background: var(--atb-off);
	color: var(--atb-muted);
	padding: .55rem 0;
	font-size: .92rem;
	text-align: center;
	cursor: default;
}

/* Selectable: an instructor is free for the WHOLE course from this day. */
.atb-cal-day.is-free {
	background: #fff;
	color: var(--atb-ink);
	border-color: var(--atb-brand);
	font-weight: 600;
	cursor: pointer;
}
.atb-cal-day.is-free:hover { background: #fff6ec; }

.atb-cal-day.is-off { opacity: .55; }

/* The block of days this course would occupy. */
.atb-cal-day.is-run {
	background: #fdd9b3;
	border-color: var(--atb-brand);
	color: var(--atb-ink);
	opacity: 1;
}

.atb-cal-day.is-start {
	background: var(--atb-brand);
	border-color: var(--atb-brand-dark);
	color: #fff;
	font-weight: 700;
}

.atb-cal-key {
	display: flex; flex-wrap: wrap; gap: .25rem 1rem;
	padding: .6rem .75rem;
	border-top: 1px solid var(--atb-line);
	font-size: .8rem; color: var(--atb-muted);
}
.atb-cal-key span { display: inline-flex; align-items: center; gap: .35rem; }
.atb-key {
	width: 12px; height: 12px; display: inline-block;
	border: 1px solid var(--atb-brand);
}
.atb-key-free { background: #fff; }
.atb-key-run { background: #fdd9b3; }
.atb-key-off { background: var(--atb-off); border-color: var(--atb-line); }

/* --- Venue address, site address, confirmations ------------------------ */

.atb-address {
	margin-top: .75rem;
	padding: .8rem 1rem;
	border-left: 4px solid var(--atb-brand);
	background: var(--atb-off);
	color: var(--atb-ink);
	font-size: .95rem; line-height: 1.5;
}

.atb-field { margin-top: 1rem; }
.atb-field label {
	display: block; margin-bottom: .35rem;
	font-weight: 600; color: var(--atb-ink);
}
/* Every text-ish input in the wizard, not just [type=text] - the contact step
   uses email/tel types, which were falling back to browser defaults. */
.atb textarea,
.atb input[type="text"],
.atb input[type="email"],
.atb input[type="tel"],
.atb input[type="number"]:not(#atb-qty) {
	width: 100%; padding: .6rem .7rem;
	border: 2px solid var(--atb-line); background: #fff;
	font-family: inherit; font-size: .95rem; color: var(--atb-ink);
	-webkit-appearance: none; appearance: none; border-radius: 0;
}
.atb textarea:focus,
.atb input[type="text"]:focus,
.atb input[type="email"]:focus,
.atb input[type="tel"]:focus {
	border-color: var(--atb-brand); outline: none;
}
.atb input::placeholder { color: var(--atb-muted); opacity: 1; }

.atb-addr-grid { display: grid; gap: .75rem; }
@media (min-width: 600px) {
	/* Town/county share a row; postcode is short so it doesn't need full width. */
	.atb-addr-grid { grid-template-columns: 1fr 1fr; }
	.atb-addr-row:nth-child(1),
	.atb-addr-row:nth-child(2) { grid-column: 1 / -1; }
}
.atb-addr-row { margin: 0; }
.atb-addr-row label {
	display: block; margin-bottom: .25rem;
	font-weight: 500; font-size: .88rem; color: var(--atb-muted);
}
@media (min-width: 600px) {
	#atb-postcode { max-width: 12rem; }
}
.atb-req { color: #b3261e; }
.atb-field-error { color: #b3261e; font-size: .88rem; margin: .35rem 0 0; }

.atb-confirm { margin-top: 1rem; }
.atb-confirm label {
	display: flex; align-items: flex-start; gap: .6rem;
	padding: .85rem 1rem;
	border: 2px solid var(--atb-line); background: #fff; cursor: pointer;
}
.atb-confirm label:hover { border-color: var(--atb-brand); }
.atb-confirm input { margin-top: .25rem; flex: 0 0 auto; accent-color: var(--atb-brand); }
.atb-confirm span { display: flex; flex-direction: column; gap: .2rem; }
.atb-confirm small { color: var(--atb-muted); line-height: 1.4; }
.atb-confirm label:has(input:checked) {
	border-color: var(--atb-brand); background: #fff6ec;
}

/* --- Candidates --------------------------------------------------------- */

.atb-qty { display: flex; align-items: stretch; gap: 0; margin-bottom: .75rem; }
.atb-qty-btn {
	width: 3rem; border: 2px solid var(--atb-line); background: #fff;
	font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--atb-ink);
	font-family: inherit;
}
.atb-qty-btn:hover { border-color: var(--atb-brand); }
#atb-qty {
	width: 5rem; text-align: center;
	border: 2px solid var(--atb-line); border-left: 0; border-right: 0;
	padding: .6rem .4rem; font-size: 1.1rem; font-weight: 700;
	font-family: inherit; background: #fff;
}
#atb-qty:focus { outline: none; }

.atb-candidate {
	border: 1px solid var(--atb-line); background: #fff;
	padding: 1rem; margin-top: .75rem;
}
.atb-candidate h4 {
	margin: 0 0 .75rem; font-size: .95rem; text-transform: uppercase;
	letter-spacing: .03em; color: var(--atb-brand);
}
/* (Candidate name inputs pick up the shared .atb input styling above.) */

/* "I'll send it later" - an explicit deferral, not a skipped optional field. */
.atb-defer {
	display: flex; align-items: flex-start; gap: .55rem;
	margin-top: .75rem; padding: .6rem .75rem;
	border: 1px dashed var(--atb-line); background: var(--atb-off);
	cursor: pointer; font-size: .92rem; color: var(--atb-ink);
}
.atb-defer:hover { border-color: var(--atb-brand); }
.atb-defer input { margin-top: .2rem; flex: 0 0 auto; accent-color: var(--atb-brand); }
.atb-defer:has(input:checked) {
	border-style: solid; border-color: var(--atb-brand); background: #fff6ec;
}

.atb-optional-inline {
	font-weight: 400; color: var(--atb-muted); font-size: .85em;
}

.atb-deadline {
	margin-top: .5rem; padding-left: .75rem;
	border-left: 3px solid var(--atb-brand);
}

.atb-terms {
	display: flex; align-items: flex-start; gap: .6rem;
	margin-top: 1rem; padding: .85rem 1rem;
	border: 2px solid var(--atb-line); background: #fff;
	cursor: pointer; font-size: .92rem; line-height: 1.5;
}
.atb-terms:hover { border-color: var(--atb-brand); }
.atb-terms input { margin-top: .2rem; flex: 0 0 auto; accent-color: var(--atb-brand); }
.atb-terms:has(input:checked) { border-color: var(--atb-brand); background: #fff6ec; }
.atb-terms a { color: var(--atb-brand); text-decoration: underline; }

/* Post-payment next steps. */
.atb-next-steps h3 { margin: 0 0 .75rem; }
.atb-callout {
	margin-top: 1.25rem; padding: 1.1rem 1.25rem;
	border: 2px solid var(--atb-brand); background: #fff6ec;
}
.atb-callout h4 {
	margin: 0 0 .6rem; font-size: 1.05rem; color: var(--atb-ink);
	text-transform: uppercase; letter-spacing: .02em;
}
.atb-callout p { margin: 0 0 .7rem; line-height: 1.55; }
.atb-callout p:last-child { margin-bottom: 0; }

/* Derived course length - shown, not chosen. */
.atb-derived {
	margin-top: 1.25rem; padding: 1rem 1.25rem;
	border: 2px solid var(--atb-brand); background: #fff6ec;
}
.atb-derived-main { display: flex; align-items: baseline; gap: .5rem; }
.atb-derived-main strong { font-size: 1.6rem; color: var(--atb-ink); line-height: 1.1; }
.atb-derived-main span { color: var(--atb-muted); font-size: .9rem; }
.atb-derived .atb-note { margin-top: .4rem; }
.atb-derived-price {
	display: flex; justify-content: space-between; align-items: baseline;
	margin-top: .75rem; padding-top: .65rem;
	border-top: 1px solid var(--atb-brand);
}
.atb-derived-price strong { font-size: 1.15rem; }

/* --- Uploads ------------------------------------------------------------ */

.atb-upload { margin-top: .9rem; }
.atb-upload-label {
	display: block; margin-bottom: .3rem;
	font-weight: 500; font-size: .88rem; color: var(--atb-muted);
}
.atb-file { display: block; width: 100%; font-size: .9rem; font-family: inherit; }
.atb-file::file-selector-button {
	border: 2px solid var(--atb-line); background: #fff; color: var(--atb-ink);
	padding: .45rem .9rem; margin-right: .75rem;
	font-family: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.atb-file::file-selector-button:hover { border-color: var(--atb-brand); }

.atb-file-list { margin-top: .5rem; }
.atb-file-item {
	display: flex; align-items: center; justify-content: space-between; gap: .75rem;
	padding: .5rem .7rem; background: #fff6ec;
	border-left: 4px solid var(--atb-brand); font-size: .9rem;
}
.atb-file-remove {
	border: 0; background: transparent; color: #b3261e;
	font-size: .85rem; font-weight: 600; cursor: pointer;
	text-decoration: underline; font-family: inherit;
}
.atb-file-status { font-size: .88rem; color: var(--atb-muted); padding: .35rem 0; }
.atb-file-status.is-error { color: #b3261e; font-weight: 600; }

/* --- Summary ----------------------------------------------------------- */

.atb-summary {
	border: 2px solid var(--atb-brand);
	padding: 1.25rem; background: #fff; margin-top: 1.5rem;
}
.atb-summary h3 { margin: 0 0 .9rem; }
.atb-summary dl {
	/* minmax(0, 1fr), not 1fr: a bare 1fr refuses to shrink below its content,
	   so a long address or email address pushed straight out of the box. */
	display: grid; grid-template-columns: max-content minmax(0, 1fr);
	gap: .35rem 1rem; margin: 0 0 1rem;
}
.atb-summary dt { color: var(--atb-muted); }
.atb-summary dd {
	margin: 0; font-weight: 600;
	min-width: 0;
	/* Emails and postcodes have no spaces to break at. */
	overflow-wrap: anywhere; word-break: break-word;
}

@media (max-width: 520px) {
	/* Two columns leave too little room for the value on a phone - stack the
	   label above it instead. */
	.atb-summary dl { grid-template-columns: 1fr; gap: 0; }
	.atb-summary dt { margin-top: .6rem; font-size: .85rem; }
	.atb-summary dt:first-child { margin-top: 0; }
}

.atb-price { border-top: 1px solid var(--atb-line); padding-top: .75rem; }
.atb-price > div { display: flex; justify-content: space-between; padding: .2rem 0; }
.atb-price .atb-total {
	border-top: 1px solid var(--atb-line); margin-top: .4rem;
	padding-top: .6rem; font-size: 1.2rem;
}

.atb-continue {
	display: block; width: 100%; margin-top: 1rem; padding: .9rem 1rem;
	background: var(--atb-brand); color: #fff; border: 0;
	font-size: 1.05rem; font-weight: 700; cursor: pointer;
	text-transform: uppercase; letter-spacing: .02em;
}
.atb-continue:hover { background: var(--atb-brand-dark); }
.atb-continue:disabled {
	background: var(--atb-line); color: var(--atb-muted); cursor: not-allowed;
}

/* Keep the line breaks these are built with. */
#atb-sum-address, #atb-sum-contact { white-space: pre-line; }

/* ---------------------------------------------------------------- receipt --- */

/*
 * The panel shown when Stripe sends the customer back paid.
 *
 * Lives here rather than in the theme so it travels with the plugin and uses
 * the same variables as the booking wizard - the first version relied on theme
 * CSS that had not been deployed, so it rendered as bare text in the top-left
 * corner outside the page container.
 */

.atb-receipt {
	max-width: 720px;
	/* Top margin so the panel is not jammed against the site header - it is
	   the first thing on the page after the menu bar. */
	margin: 2.5rem auto 2rem;
	padding: 2.2rem 2rem 2rem;
	border: 1px solid var(--atb-line);
	border-top: 4px solid var(--atb-brand);
	background: #fff;
	text-align: center;
}

.atb-receipt-tick {
	width: 62px;
	height: 62px;
	margin: 0 auto 1.1rem;
	border-radius: 50%;
	background: #eaf7ee;
	color: #1a7f37;
	display: flex;
	align-items: center;
	justify-content: center;
}

.atb-receipt h2 {
	margin: 0 0 .7rem;
	font-size: 1.9rem;
	line-height: 1.2;
	color: #1a1a1a;
}

.atb-receipt-lead {
	margin: 0 auto 1.4rem;
	max-width: 46rem;
	font-size: 1.05rem;
	line-height: 1.65;
	color: #333;
}

/* The reference is the one thing they may need to read back to us, so it gets
   its own block rather than being buried in a sentence. */
.atb-receipt-ref {
	display: inline-block;
	min-width: 260px;
	padding: .85rem 1.6rem;
	background: var(--atb-off, #faf8f6);
	border: 1px dashed var(--atb-brand);
	margin-bottom: 1.3rem;
}

.atb-receipt-ref span {
	display: block;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--atb-muted, #666);
	margin-bottom: .25rem;
}

.atb-receipt-ref strong {
	font-size: 1.5rem;
	letter-spacing: .06em;
	color: var(--atb-brand);
}

.atb-receipt-note {
	margin: 0;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--atb-muted, #666);
}

.atb-receipt-note a { color: var(--atb-brand); }

/* Payment taken but not confirmable - reassure rather than alarm. */
.atb-receipt--problem {
	border-top-color: #c62828;
	text-align: left;
}

.atb-receipt--problem h2 { font-size: 1.5rem; }

@media (max-width: 600px) {
	.atb-receipt { padding: 1.6rem 1.2rem; }
	.atb-receipt h2 { font-size: 1.45rem; }
	.atb-receipt-lead { font-size: 1rem; }
	.atb-receipt-ref { min-width: 0; width: 100%; }
}

/* --- 3CX chat bubble ------------------------------------------------------
   The bubble overlaps the sticky Back/Next bar, but it CANNOT be moved from
   here. It lives two shadow roots down:

       call-us-selector #shadow > call-us #shadow > div#wp-live-chat-by-3CX

   and a page stylesheet cannot cross a shadow boundary - no selector, and no
   amount of !important, will reach it. A rule was tried here first and did
   nothing; it is left documented so nobody spends the same hour twice.

   The offset is applied by script instead - see the end of atb.js.
   -------------------------------------------------------------------------- */