/* Buttercup Childcare - camp booking flow.

   OWNED BY AGENT B. Other agents must not edit this file.

   Everything here is built on the site's own tokens from build/design-system.css
   (Poppins, the 17.4px body, the accent orange, the 8px radius, the 70px section
   rhythm). Nothing invents a second visual language. Every var() carries a
   literal fallback so the form still renders correctly if it is ever loaded on a
   page where the design system has not been enqueued.

   ON THE BUTTON COLOUR. The site's .bc-btn is white on the accent orange, which
   measures 2.48:1 and fails WCAG AA. It is live's own inherited style and an open
   decision for John, so nothing here recolours it. But this is a form a parent has
   to complete on a phone, and creating NEW white-on-orange for it would spread a
   known failure rather than inherit one. So .bcb-btn keeps the site's exact
   geometry - 17.4px, 1.398em/2.334em padding, 2px radius, the medium rung of the
   ladder - and takes the site INK on the same orange, which measures 6.51:1 and
   passes AA and AAA. Same shape, same orange, readable.

   No em dashes anywhere, including comments. */

/* ------------------------------------------------------------------- shell */

.bcb {
	max-width: 820px;
	margin: 0 auto;
	font-family: var(--bc-font, 'Poppins', sans-serif);
	font-size: var(--bc-body, 17.4px);
	line-height: 1.6;
	color: var(--bc-ink, #1d2129);
	/* Nothing in the flow may scroll the page sideways. */
	overflow-wrap: break-word;

	/* The four values the tiers are built from. Every one of them is a site
	   token at a different alpha, not a new colour:

	     tint-sage   --bc-sage #cde0cc, the /faqs and NCS band, at 38 per cent
	     tint-teal   #88c3c3, the /covid-19-policy band, at 34 per cent
	     shadow      the geometry of the header submenu shadow in
	                 build/chrome-system.css, tinted with the site ink rather
	                 than pure black so it reads warm on the paper
	     ink-soft    --bc-ink at 78 per cent, the muted role RESTATED for use on
	                 a tinted panel. The site's --bc-muted is ink at 62 per
	                 cent, which measures 4.68:1 on white but only 4.23:1 on the
	                 teal tint and 4.08:1 on full sage, so it fails AA the
	                 moment it sits on a band. At 78 per cent the same ink
	                 measures 6.87:1 on the teal tint and 6.41:1 on full sage. */
	--bcb-tint-sage: rgba(205, 224, 204, 0.38);
	--bcb-tint-teal: rgba(136, 195, 195, 0.34);
	--bcb-shadow: 0 1px 2px rgba(29, 33, 41, 0.05), 0 10px 34px rgba(29, 33, 41, 0.1);
	--bcb-ink-soft: rgba(29, 33, 41, 0.78);
}

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

.bcb-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bcb-hidden {
	display: none;
}

/* Link colour, scoped to the flow only.

   The site's own link colour is the accent orange #d96f30, which measures
   3.35:1 as text on white and 2.41:1 on the sage panel. On the review step
   that landed on the two things a parent reads hardest, the subsidy figure and
   the only route back to an earlier step (QA finding M6). Nothing here changes
   the site-wide decision, which is still open: this recolours links INSIDE the
   flow and nowhere else.

   The pattern is the one already proven on the FAQ answers: ink text carrying
   an orange underline, so the link still reads as a link and as this site's
   link, at 16.13:1 instead of 2.41:1. The underline itself is a non-text cue
   at 3.35:1 against white, which clears the 3:1 that WCAG asks of one. */

.bcb a {
	color: var(--bc-ink, #1d2129);
	text-decoration: underline;
	text-decoration-color: var(--bc-accent-dark, #d96f30);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.bcb a:hover,
.bcb a:focus-visible {
	color: var(--bc-ink, #1d2129);
	text-decoration-color: var(--bc-ink, #1d2129);
}

/* --------------------------------------------------------------- step rail

   THE SIGNATURE DETAIL. Five discs joined by a connector that fills with the
   sage band colour behind every completed step, so a parent can see how far
   through they are without counting circles. Before this it was five 28px
   circles in a row with no line between them, which reads as a breadcrumb.

   Geometry. Each item is one column of a five column grid, so the connector
   between two neighbours is exactly one column wide and needs no hard coded
   length: left: -50% and right: 50% span centre to centre at any container
   width. The connector is painted by the item on its RIGHT, which is why the
   PHP marks items 2 to $step with .has-fill rather than trying to look
   backwards in CSS.

   The disc is a pseudo-element inside a 44px box. That way the hit area is the
   full 44px WCAG 2.2 target while the circle a parent sees stays 40px.

   State is never carried by colour alone: done is a check mark, current is a
   number on the accent orange with a bold label, upcoming is a grey number on
   white. Ink on the accent orange, never white, per decision D2.

   Labels sit BENEATH the discs and centred. That is the single change that
   makes it read as a stepper rather than as a row of links. */

.bcb-rail {
	/* Was 34px. The heading block was cramped against the rail. */
	margin: 0 0 48px;
}

.bcb-rail-list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bcb-rail-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	padding: 0 4px;
	font-size: 15.7px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--bc-muted, rgba(29, 33, 41, 0.62));
	text-align: center;
	text-wrap: balance;
}

/* The connector, behind the discs. It is drawn on every item except the first,
   which has nothing to its left to join. */
.bcb-rail-item + .bcb-rail-item::before {
	content: "";
	position: absolute;
	top: 21px;
	left: -50%;
	right: 50%;
	height: 2px;
	background-color: var(--bc-line, rgba(29, 33, 41, 0.12));
}

.bcb-rail-item.has-fill::before {
	background-color: var(--bc-sage, #cde0cc);
}

.bcb-rail-n {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	font-size: 15.7px;
	font-weight: 500;
	color: var(--bc-muted, rgba(29, 33, 41, 0.62));
}

/* The 40px disc inside the 44px box. Opaque, so the connector runs behind it. */
.bcb-rail-n::before {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	background-color: var(--bc-white, #ffffff);
	border: 1px solid var(--bc-line, rgba(29, 33, 41, 0.12));
}

.bcb-rail-digit,
.bcb-rail-tick {
	position: relative;
}

.bcb-rail-label {
	display: block;
	margin-top: 9px;
}

.bcb-rail-item.is-done .bcb-rail-n::before {
	background-color: var(--bc-sage, #cde0cc);
	border-color: var(--bc-sage, #cde0cc);
}

.bcb-rail-item.is-done,
.bcb-rail-item.is-done .bcb-rail-n {
	color: var(--bc-ink, #1d2129);
}

.bcb-rail-item.is-current .bcb-rail-n::before {
	background-color: var(--bc-accent, #f48847);
	border-color: var(--bc-accent, #f48847);
}

.bcb-rail-item.is-current .bcb-rail-n {
	color: var(--bc-ink, #1d2129);
}

.bcb-rail-item.is-current {
	color: var(--bc-ink, #1d2129);
	font-weight: 500;
}

/* The phone rail is off above 767px. See the 767 block for what it becomes. */
.bcb-rail-mini,
.bcb-rail-bar {
	display: none;
}

/* -------------------------------------------------------------- step header */

.bcb-step-h {
	font-size: var(--bc-h3, 36px);
	font-weight: 500;
	line-height: 1.4;
	color: var(--bc-black, #000000);
	text-wrap: balance;
	margin: 0 0 0.3em;
}

.bcb-step-p {
	font-size: var(--bc-body, 17.4px);
	line-height: 1.7;
	color: var(--bc-muted, rgba(29, 33, 41, 0.62));
	text-wrap: pretty;
	margin: 0 0 28px;
	max-width: 62ch;
}

/* -------------------------------------------------------------- card tiers

   Before this every panel was the same white box with a 1px grey border. Step 2
   with three children was five identical boxes: a control, three children and
   the family block, with nothing to say which was which. Three tiers fix that,
   and the site's own bands supply all three surfaces.

     CONTROL tier   the sage band colour as a tint, no shadow, tighter padding.
                    It is a control and not content: the child-count picker, the
                    "same days for all my children" tick, the "same rate" tick,
                    and the grand total at review.

     CONTENT tier   white, no border, one soft shadow, and a sage header strip
                    carrying the name. This is the default, so each child card
                    and each booking panel becomes a distinct block you can
                    count down the page.

     FAMILY tier    the /covid-19-policy teal band colour as a tint, because
                    emergency contact and collection is a different KIND of
                    thing from a per-child card and should not look like one.

   One radius (--bc-radius) and one shadow (--bcb-shadow) throughout. No
   variations.

   The tier a card belongs to is worked out from what the card CONTAINS, because
   flow.php does not mark the cards up with tier classes and this agent does not
   own that file. A tier class per card would be cleaner and is the one thing
   worth changing in flow.php if the markup is ever reopened. */

.bcb-card {
	background-color: var(--bc-white, #ffffff);
	border: 0;
	border-radius: var(--bc-radius, 8px);
	box-shadow: var(--bcb-shadow, 0 1px 2px rgba(29, 33, 41, 0.05), 0 10px 34px rgba(29, 33, 41, 0.1));
	padding: 28px 30px;
	margin: 0 0 24px;
}

/* Control tier. .bcb-card--count covers the child-count picker and the "same
   days" tick; the :has() clause catches the step 4 card that holds nothing but
   the "same rate applies to all my children" tick; .bcb-grand is the review
   step's total. Flat with tint, which is the site's own register. */
.bcb-card--count,
.bcb-card:has(> .bcb-toggle:only-child),
.bcb-grand {
	background-color: var(--bcb-tint-sage, rgba(205, 224, 204, 0.38));
	box-shadow: none;
	padding: 20px 30px;
}

/* Family tier. The only card in the flow holding a bcb-family-* control is the
   emergency contact and collection block at step 2. */
.bcb-card:has([id^="bcb-family-"]) {
	background-color: var(--bcb-tint-teal, rgba(136, 195, 195, 0.34));
	box-shadow: none;
}

/* Muted text on a tinted panel. --bc-muted is ink at 62 per cent, which drops
   to 4.23:1 on the teal tint and 4.08:1 on full sage. See the --bcb-ink-soft
   note at the top of this file. */
.bcb-card--count .bcb-help,
.bcb-card--count .bcb-optional,
.bcb-grand .bcb-figure-note,
.bcb-card:has([id^="bcb-family-"]) .bcb-help,
.bcb-card:has([id^="bcb-family-"]) .bcb-optional {
	color: var(--bcb-ink-soft, rgba(29, 33, 41, 0.78));
}

/* A hairline at 12 per cent all but disappears on a tinted panel. 20 per cent
   is the value .bcb-grand already uses for the same reason. */
.bcb-card:has([id^="bcb-family-"]) .bcb-override {
	border-top-color: rgba(29, 33, 41, 0.2);
}

/* The header strip, content tier only. Exact negative margins on the card's
   own padding take it to the card edge, and it carries the card's top radius so
   the corners still line up without clipping the card (overflow: hidden would
   cut the focus rings on the day boxes inside).

   The tinted tiers are excluded: a sage strip on a teal or sage panel is two
   tints fighting. */
.bcb-card:not(.bcb-card--count):not(.bcb-grand):not(:has([id^="bcb-family-"])) > .bcb-card-h:first-child,
.bcb-card:not(.bcb-card--count):not(.bcb-grand):not(:has([id^="bcb-family-"])) > .bcb-summary-head:first-child {
	background-color: var(--bc-sage, #cde0cc);
	border-radius: var(--bc-radius, 8px) var(--bc-radius, 8px) 0 0;
	margin: -28px -30px 24px;
	padding: 15px 30px;
}

.bcb-card-h {
	font-size: var(--bc-h4, 25.85px);
	font-weight: 500;
	line-height: 1.35;
	color: var(--bc-black, #000000);
	text-wrap: balance;
	margin: 0 0 20px;
}

.bcb-sub-h {
	font-size: 19px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--bc-black, #000000);
	text-wrap: balance;
	margin: 0;
}

/* -------------------------------------------------------------------- field

   Label, help, control and error are all block level inside one container, so
   every one of them starts on the same left edge. Nothing is indented against
   anything else. */

.bcb-field {
	margin: 0 0 22px;
}

.bcb-field:last-child {
	margin-bottom: 0;
}

.bcb-label {
	display: block;
	font-size: 15.7px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--bc-ink, #1d2129);
	text-wrap: pretty;
	margin: 0 0 6px;
}

.bcb-optional {
	font-weight: 300;
	font-size: 14px;
	color: var(--bc-muted, rgba(29, 33, 41, 0.62));
}

.bcb-help {
	font-size: 14.6px;
	font-weight: 300;
	line-height: 1.55;
	color: var(--bc-muted, rgba(29, 33, 41, 0.62));
	text-wrap: pretty;
	margin: 0 0 8px;
	max-width: 62ch;
}

.bcb-help--lead {
	margin-top: -12px;
	margin-bottom: 20px;
}

.bcb-input {
	display: block;
	width: 100%;
	max-width: 100%;
	font-family: var(--bc-font, 'Poppins', sans-serif);
	font-size: var(--bc-body, 17.4px);
	font-weight: 300;
	line-height: 1.5;
	color: var(--bc-ink, #1d2129);
	background-color: var(--bc-white, #ffffff);
	border: 1px solid var(--bc-line, rgba(29, 33, 41, 0.12));
	border-radius: 2px;
	padding: 12px 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bcb-input:focus {
	outline: 2px solid var(--bc-accent-dark, #d96f30);
	outline-offset: 1px;
	border-color: var(--bc-accent-dark, #d96f30);
}

.bcb-textarea {
	min-height: 96px;
	resize: vertical;
}

.bcb-select {
	background-image: linear-gradient(45deg, transparent 50%, rgba(29, 33, 41, 0.62) 50%),
		linear-gradient(135deg, rgba(29, 33, 41, 0.62) 50%, transparent 50%);
	background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

.bcb-field--error .bcb-input {
	border-color: #b3261e;
	box-shadow: inset 3px 0 0 #b3261e;
}

.bcb-err {
	font-size: 14.6px;
	font-weight: 400;
	line-height: 1.5;
	color: #b3261e;
	text-wrap: pretty;
	margin: 6px 0 0;
}

.bcb-err--block {
	margin: 0 0 18px;
}

.bcb-fineprint {
	font-size: 14.6px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--bc-muted, rgba(29, 33, 41, 0.62));
	text-wrap: pretty;
	margin: 0 0 24px;
	max-width: 62ch;
}

/* ------------------------------------------------------------------ notices */

.bcb-notice {
	font-size: 16px;
	line-height: 1.6;
	text-wrap: pretty;
	border-radius: var(--bc-radius, 8px);
	padding: 16px 20px;
	margin: 0 0 24px;
}

.bcb-notice--error {
	background-color: #fdecea;
	border: 1px solid #f2b8b5;
	color: #7f1d17;
}

.bcb-notice--error a {
	color: #7f1d17;
	text-decoration: underline;
}

.bcb-notice--warn {
	background-color: var(--bc-sage, #cde0cc);
	border: 1px solid rgba(29, 33, 41, 0.12);
	color: var(--bc-ink, #1d2129);
}

.bcb-notice--warn a {
	color: var(--bc-ink, #1d2129);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ------------------------------------------------------------- count picker */

.bcb-count-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.bcb-count {
	width: 110px;
	flex: 0 0 auto;
}

/* JavaScript submits on change, so the fallback button only matters without it. */
.bcb-js .bcb-count-go {
	display: none;
}

/* -------------------------------------------------------------- checkboxes */

.bcb-toggle {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 4px 0 0;
}

.bcb-toggle label {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bc-ink, #1d2129);
	text-wrap: pretty;
	cursor: pointer;
}

.bcb-check {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	accent-color: var(--bc-accent-dark, #d96f30);
	cursor: pointer;
}

.bcb-reveal {
	margin-top: 24px;
}

.bcb-js .bcb-reveal {
	display: none;
}

.bcb-js .bcb-reveal.is-open {
	display: block;
}

.bcb-override {
	border-top: 1px solid var(--bc-line, rgba(29, 33, 41, 0.12));
	padding-top: 22px;
	margin-top: 22px;
}

.bcb-override:first-child {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

.bcb-override-h {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--bc-black, #000000);
	text-wrap: balance;
	margin: 0 0 4px;
}

/* -------------------------------------------------- step 3, the tick sheet */

.bcb-group {
	border: 0;
	padding: 0;
	margin: 0 0 30px;
	min-width: 0;
}

/* The whole "Need a longer day?" block when no week inside it can be offered.
   Spelled out for the same reason as .bcb-days[hidden] below: a rule that sets
   display beats the hidden attribute, and the margin above would otherwise
   leave a gap where the heading used to be. Set by JavaScript only. */
.bcb-group[hidden] {
	display: none;
	margin: 0;
}

.bcb-group:last-of-type {
	margin-bottom: 22px;
}

/* The last block in a card carries its own bottom margin on top of the card's
   padding, and the two read as an empty strip under the final control. It shows
   on the "Do you have a National Childcare Scheme award?" card, where one
   fieldset leaves 45px under a 22px padding. The card's padding is the spacing.

   Both selectors are needed and both are deliberate: the second has to
   out-specify .bcb-group:last-of-type above, which the bare :last-child cannot. */

.bcb-card > :last-child,
.bcb-card > .bcb-group:last-child {
	margin-bottom: 0;
}

.bcb-legend {
	display: block;
	width: 100%;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--bc-black, #000000);
	text-wrap: balance;
	padding: 0;
	margin: 0 0 14px;
}

.bcb-weeks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.bcb-week {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
	border: 1px solid var(--bc-line, rgba(29, 33, 41, 0.12));
	border-radius: var(--bc-radius, 8px);
	background-color: var(--bc-white, #ffffff);
	padding: 16px 18px;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.bcb-week:hover {
	border-color: var(--bc-accent, #f48847);
}

.bcb-week:focus-within {
	outline: 2px solid var(--bc-accent-dark, #d96f30);
	outline-offset: 1px;
}

.bcb-week.is-closed {
	background-color: var(--bc-paper, #fafafa);
	cursor: not-allowed;
	opacity: 0.72;
}

.bcb-week-body {
	display: block;
	min-width: 0;
}

.bcb-week-name {
	display: block;
	font-size: 16.5px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--bc-ink, #1d2129);
	text-wrap: balance;
}

.bcb-week-dates {
	display: block;
	font-size: 14.6px;
	font-weight: 300;
	line-height: 1.45;
	color: var(--bc-muted, rgba(29, 33, 41, 0.62));
}

.bcb-week-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	font-size: 16px;
	font-weight: 500;
	color: var(--bc-ink, #1d2129);
	margin-top: 6px;
}

.bcb-week-hours {
	font-size: 14.6px;
	font-weight: 300;
	color: var(--bc-muted, rgba(29, 33, 41, 0.62));
}

.bcb-tag {
	display: inline-block;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--bc-ink, #1d2129);
	background-color: var(--bc-sage, #cde0cc);
	border-radius: 2px;
	padding: 3px 9px;
	margin-top: 8px;
	white-space: nowrap;
}

.bcb-tag--full {
	background-color: rgba(29, 33, 41, 0.08);
	color: var(--bc-muted, rgba(29, 33, 41, 0.62));
}

/* "(optional)" sits beside the Full Day Care heading in the same muted weight
   the optional field labels already use, so it reads as the same idea. It never
   breaks across two lines. */

.bcb-legend-opt {
	font-size: 15.7px;
	font-weight: 300;
	color: var(--bc-muted, rgba(29, 33, 41, 0.62));
	white-space: nowrap;
}

/* "Same days and times for all my children". It carries .bcb-card--count, so
   it takes the control tier with the child-count picker: the tick that governs
   every panel below it reads as a control rather than as part of the first
   child's card. Padding comes from the tier, not from here. */

.bcb-sameall .bcb-toggle {
	margin: 0;
}

/* A locked panel is muted, never removed: the parent still reads what they are
   buying for that child. The boxes stay enabled so they post and so the running
   total counts every child; JavaScript sets inert on the fieldsets, and this
   covers a browser that does not support it. */

.bcb-lock-note {
	display: none;
	font-size: 14.6px;
	font-weight: 300;
	line-height: 1.55;
	color: var(--bc-muted, rgba(29, 33, 41, 0.62));
	text-wrap: pretty;
	margin: -12px 0 20px;
	max-width: 62ch;
}

.bcb-pick.is-locked .bcb-lock-note {
	display: block;
}

.bcb-pick.is-locked .bcb-group {
	opacity: 0.55;
	pointer-events: none;
}

/* Georgina's own sheet: a row label, then M T W T F. One row for the 9 hour
   day and one for the 5 hour half day, which is how she drew it and what her
   own worked example needs (3 full days and 2 half days in one week). */

/* A Full Day Care week the camp ticks have filtered out. Set by JavaScript
   only, so nothing is ever hidden without it. */
.bcb-fdc[hidden] {
	display: none;
}

/* The half day row on a week whose camp week is ticked. A half day is the same
   five hours camp already gives, for less, so it is not a longer day and must
   not be offered there; bcb_flow_booking_problems() refuses it server side.

   This rule is REQUIRED, not decorative. .bcb-days sets display:flex below,
   which beats the hidden attribute's own display:none, so without it the row
   stays on screen while JavaScript believes it is gone - and a parent ticks a
   day that is then refused at the review. Set by JavaScript only. */
.bcb-days[hidden] {
	display: none;
}

.bcb-fdc {
	border: 1px solid var(--bc-line, rgba(29, 33, 41, 0.12));
	border-radius: var(--bc-radius, 8px);
	padding: 16px 18px;
	margin: 0 0 12px;
}

.bcb-fdc-h {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	margin: 0 0 12px;
}

.bcb-fdc-name {
	font-size: 16.5px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--bc-ink, #1d2129);
	text-wrap: balance;
}

.bcb-fdc-dates {
	font-size: 14.6px;
	font-weight: 300;
	color: var(--bc-muted, rgba(29, 33, 41, 0.62));
}

.bcb-days {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	padding: 10px 0;
	border-top: 1px solid var(--bc-line, rgba(29, 33, 41, 0.12));
}

.bcb-days-label {
	display: block;
	min-width: 0;
}

.bcb-days-title {
	display: block;
	font-size: 15.7px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--bc-ink, #1d2129);
}

.bcb-days-price {
	display: block;
	font-size: 14.2px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--bc-muted, rgba(29, 33, 41, 0.62));
}

.bcb-days-row {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
}

.bcb-day {
	display: block;
	position: relative;
}

.bcb-day-in {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.bcb-day-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--bc-ink, #1d2129);
	border-radius: 2px;
	background-color: var(--bc-white, #ffffff);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	color: var(--bc-ink, #1d2129);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bcb-day-box:hover {
	background-color: var(--bc-sage, #cde0cc);
}

.bcb-day-in:checked + .bcb-day-box {
	background-color: var(--bc-accent, #f48847);
	border-color: var(--bc-accent-dark, #d96f30);
	color: var(--bc-ink, #1d2129);
}

.bcb-day-in:focus-visible + .bcb-day-box {
	outline: 2px solid var(--bc-accent-dark, #d96f30);
	outline-offset: 2px;
}

.bcb-day.is-closed .bcb-day-box {
	border-style: dashed;
	border-color: rgba(29, 33, 41, 0.3);
	background-color: var(--bc-paper, #fafafa);
	color: rgba(29, 33, 41, 0.4);
	cursor: not-allowed;
}

/* ------------------------------------------------------------ running total */

.bcb-subtotal {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
	border-top: 1px solid var(--bc-line, rgba(29, 33, 41, 0.12));
	padding-top: 16px;
	margin: 0;
}

.bcb-subtotal-label {
	font-size: 15.7px;
	font-weight: 400;
	color: var(--bc-muted, rgba(29, 33, 41, 0.62));
}

.bcb-subtotal-value {
	margin-left: auto;
	font-size: 19px;
	font-weight: 500;
	color: var(--bc-ink, #1d2129);
	white-space: nowrap;
}

/* The running total at step 3 is the same idea as the grand total at step 5, so
   it takes the same control tier surface. It goes back to FULL sage in the 767
   block below, where it becomes the sticky panel: a tint would let the step's
   own content show through it as that content slides underneath. */

.bcb-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
	background-color: var(--bcb-tint-sage, rgba(205, 224, 204, 0.38));
	border-radius: var(--bc-radius, 8px);
	padding: 20px 30px;
	margin: 0 0 24px;
}

.bcb-total-label {
	font-size: var(--bc-body, 17.4px);
	font-weight: 500;
	color: var(--bc-ink, #1d2129);
	text-wrap: balance;
}

.bcb-total-value {
	margin-left: auto;
	font-size: 25.85px;
	font-weight: 500;
	color: var(--bc-ink, #1d2129);
	white-space: nowrap;
}

/* An hourly rate is four characters. A full-width box for it looks like a
   mistake and invites a parent to type something else into it. */

.bcb-rate-one .bcb-input,
.bcb-rate-many .bcb-input {
	max-width: 200px;
}

/* ------------------------------------------------------------ step 5 review */

.bcb-summary-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	margin: 0 0 18px;
}

.bcb-summary-head .bcb-card-h {
	margin: 0;
}

.bcb-summary-head--sub {
	border-top: 1px solid var(--bc-line, rgba(29, 33, 41, 0.12));
	padding-top: 20px;
	margin-top: 22px;
}

.bcb-edit {
	flex: 0 0 auto;
	font-size: 15.7px;
	font-weight: 500;
	/* Ink, with the orange kept as the underline. See the link note at the top
	   of this file: on white this is 16.13:1 rather than 3.35:1, and on the sage
	   grand-total panel 12.35:1 rather than 2.41:1. */
	color: var(--bc-ink, #1d2129);
	text-decoration: underline;
	text-decoration-color: var(--bc-accent-dark, #d96f30);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.bcb-dl {
	margin: 0;
}

.bcb-dl-row {
	display: grid;
	grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
	gap: 4px 20px;
	padding: 9px 0;
	border-top: 1px solid var(--bc-line, rgba(29, 33, 41, 0.12));
}

.bcb-dl-row:first-child {
	border-top: 0;
	padding-top: 0;
}

.bcb-dl dt {
	font-size: 15.7px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bc-muted, rgba(29, 33, 41, 0.62));
	text-wrap: pretty;
	margin: 0;
}

.bcb-dl dd {
	font-size: 16.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bc-ink, #1d2129);
	text-wrap: pretty;
	margin: 0;
	min-width: 0;
}

.bcb-lines {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.bcb-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 16px;
	padding: 7px 0;
	font-size: 16px;
	line-height: 1.5;
}

.bcb-line-label {
	min-width: 0;
	text-wrap: pretty;
}

/* margin-left keeps the amount on the right hand edge even when a long line
   label pushes it onto its own row, which is the common case on a phone.
   Without it a wrapped amount jumps to the left and the column disappears. */
.bcb-line-amount {
	flex: 0 0 auto;
	margin-left: auto;
	font-weight: 500;
	white-space: nowrap;
}

/* Three figures, never one: total fee, less NCS, fee to pay. That is how
   Georgina wrote the calculation out and it is what the order has to show. */

.bcb-figures {
	border-top: 1px solid var(--bc-line, rgba(29, 33, 41, 0.12));
	padding-top: 14px;
}

.bcb-figure {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 16px;
	padding: 8px 0;
}

.bcb-figure-label {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--bc-ink, #1d2129);
	text-wrap: pretty;
	min-width: 0;
}

.bcb-figure-note {
	display: block;
	font-size: 14.2px;
	font-weight: 300;
	color: var(--bc-muted, rgba(29, 33, 41, 0.62));
}

.bcb-figure-value {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 16.5px;
	font-weight: 500;
	color: var(--bc-ink, #1d2129);
	white-space: nowrap;
}

/* The subsidy figure is the number a parent is reading hardest, so it is ink
   and not the accent orange, which measured 3.35:1 on white and 2.41:1 on the
   sage grand-total panel (QA finding M6). The minus sign and the label carry
   the meaning; colour was never doing that job on its own. */

.bcb-figure--minus .bcb-figure-value {
	color: var(--bc-ink, #1d2129);
}

.bcb-figure--net {
	border-top: 1px solid var(--bc-line, rgba(29, 33, 41, 0.12));
	margin-top: 6px;
	padding-top: 14px;
}

.bcb-figure--net .bcb-figure-label,
.bcb-figure--net .bcb-figure-value {
	font-size: 19px;
	font-weight: 500;
}

/* The grand total takes the control tier: see the card tiers block above. The
   figures inside it, not a heavier surface, are what make it the last word on
   the page. .bcb-total at step 3 stays full sage on purpose, because it is a
   sticky panel with the step's own content sliding underneath it and a tint
   would let that show through. */

.bcb-grand .bcb-figures,
.bcb-grand .bcb-figure--net {
	border-top-color: rgba(29, 33, 41, 0.2);
}

.bcb-figure--grand .bcb-figure-label,
.bcb-figure--grand .bcb-figure-value {
	font-size: 25.85px;
	font-weight: 500;
	line-height: 1.3;
}

/* Every money column in the flow is a two column mini table: label on the left
   edge, figure on the right. Lining the digits up is what makes a column of
   fees scan as a column, so all of them take tabular figures. */

.bcb-line-amount,
.bcb-figure-value,
.bcb-subtotal-value,
.bcb-total-value {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* ------------------------------------------------------------------ buttons

   The site's medium rung, ink on the accent orange. See the note at the top of
   this file for why the text is ink and not white. */

.bcb-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 30px 0 0;
}

.bcb-btn {
	display: inline-block;
	flex: 0 1 auto;
	background-color: var(--bc-accent, #f48847);
	color: var(--bc-ink, #1d2129);
	font-family: var(--bc-font, 'Poppins', sans-serif);
	font-weight: 500;
	font-size: 17.4px;
	line-height: 1.5;
	padding: 1.398em 2.334em;
	border: 0;
	border-radius: 2px;
	text-align: center;
	text-wrap: balance;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.bcb-btn:hover {
	background-color: var(--bc-accent-dark, #d96f30);
	color: var(--bc-ink, #1d2129);
}

.bcb-btn:focus-visible {
	outline: 2px solid var(--bc-ink, #1d2129);
	outline-offset: 2px;
}

.bcb-btn[disabled] {
	background-color: rgba(29, 33, 41, 0.12);
	color: var(--bc-muted, rgba(29, 33, 41, 0.62));
	cursor: not-allowed;
}

/* The ghost partner. 1px comes off each padding edge so it is the same box as
   its neighbour, exactly as .bc-btn-quiet does in the design system. */
.bcb-btn-quiet {
	display: inline-block;
	flex: 0 1 auto;
	background-color: var(--bc-white, #ffffff);
	color: var(--bc-ink, #1d2129);
	font-family: var(--bc-font, 'Poppins', sans-serif);
	font-weight: 500;
	font-size: 17.4px;
	line-height: 1.5;
	padding: calc(1.398em - 1px) calc(2.334em - 1px);
	border: 1px solid var(--bc-line, rgba(29, 33, 41, 0.12));
	border-radius: 2px;
	text-align: center;
	text-wrap: balance;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.bcb-btn-quiet:hover {
	background-color: var(--bc-ink, #1d2129);
	color: var(--bc-white, #ffffff);
}

.bcb-btn-sm {
	font-size: 15.7px;
}

/* ------------------------------------------------------------- 1119 and down */

@media (max-width: 1119px) {
	.bcb-step-h {
		font-size: 31.5px;
	}

	.bcb-card-h {
		font-size: 23.6px;
	}

	.bcb-figure--grand .bcb-figure-label,
	.bcb-figure--grand .bcb-figure-value {
		font-size: 23.6px;
	}
}

/* --------------------------------------------------------------- 767 and down

   Parents book on phones, so this is the case that has to be right, not the
   fallback. Everything that was two columns becomes one, the tick rows put
   their label above the M T W T F row instead of beside it, and the buttons
   grow to the full row width so a wrapped pair is a clean stack. */

@media (max-width: 767px) {
	.bcb-step-h {
		font-size: 28.5px;
	}

	.bcb-card-h {
		font-size: 22.2px;
	}

	.bcb-card {
		padding: 22px 20px;
	}

	.bcb-card--count,
	.bcb-card:has(> .bcb-toggle:only-child),
	.bcb-grand {
		padding: 18px 20px;
	}

	/* The strip follows the card's smaller padding. */
	.bcb-card:not(.bcb-card--count):not(.bcb-grand):not(:has([id^="bcb-family-"])) > .bcb-card-h:first-child,
	.bcb-card:not(.bcb-card--count):not(.bcb-grand):not(:has([id^="bcb-family-"])) > .bcb-summary-head:first-child {
		margin: -22px -20px 20px;
		padding: 13px 20px;
	}

	/* The running total follows the ticks.

	   Step 3 is the longest page in the flow, and the box that says what this
	   costs sat well below the checkbox that changes it: on a phone a parent
	   ticked a EUR 160 week and got no visible confirmation anywhere on screen
	   (QA finding M7). Sticking the total to the foot of the viewport puts the
	   number where the tick is.

	   It cannot cover the Continue button, and that is a property of the
	   direction rather than of any padding: a bottom-stuck box is only ever
	   lifted UP off its resting place, never pushed down, so the button row
	   below it in the flow is never reached. Measured across the whole scroll
	   of the step, the largest overlap with Continue is 0px. The spacing below
	   is left at the ordinary 30px the rest of the flow uses, because an extra
	   band of white above the buttons would buy nothing and would read as a
	   hole at the foot of the step.

	   The border and the shadow are what stop it reading as a card that has
	   drifted: while it is stuck it has the step's own content sliding under
	   it, and it needs a top edge to say so. */
	.bcb-total {
		position: sticky;
		bottom: 0;
		z-index: 5;
		/* Opaque, not the tint: content slides underneath this one. */
		background-color: var(--bc-sage, #cde0cc);
		padding: 18px 20px;
		border-top: 2px solid rgba(29, 33, 41, 0.22);
		box-shadow: 0 -6px 16px rgba(29, 33, 41, 0.14);
	}

	.bcb-total-value {
		font-size: 22.2px;
	}

	.bcb-figure--grand .bcb-figure-label,
	.bcb-figure--grand .bcb-figure-value {
		font-size: 22.2px;
	}

	.bcb-weeks {
		grid-template-columns: minmax(0, 1fr);
	}

	.bcb-days {
		justify-content: flex-start;
		gap: 8px;
	}

	.bcb-days-label {
		flex: 1 0 100%;
	}

	.bcb-days-row {
		flex: 1 1 auto;
		gap: 6px;
	}

	.bcb-day {
		flex: 1 1 0;
		min-width: 0;
	}

	.bcb-day-box {
		width: 100%;
		height: 48px;
	}

	.bcb-dl-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.bcb-actions {
		gap: 10px;
	}

	.bcb-btn,
	.bcb-btn-quiet {
		flex: 1 1 auto;
	}

	/* THE RAIL ON A PHONE. Five 44px discs with labels beneath them do not fit
	   in 390px, and squeezing them produces the row of bare numbers this
	   redesign was meant to get rid of. So the discs go and the same three
	   numbers are said plainly instead: where you are, what this step is
	   called, and how far along the bar is. The bar's width is set inline by
	   flow.php from step / total, so step 2 of 5 is exactly 40 per cent. */

	.bcb-rail {
		margin: 0 0 34px;
	}

	.bcb-rail-list {
		display: none;
	}

	.bcb-rail-mini {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 2px 10px;
		font-size: 15.7px;
		line-height: 1.4;
		margin: 0 0 10px;
	}

	.bcb-rail-mini-n {
		font-weight: 500;
		color: var(--bc-ink, #1d2129);
		white-space: nowrap;
	}

	.bcb-rail-mini-name {
		font-weight: 400;
		color: var(--bcb-ink-soft, rgba(29, 33, 41, 0.78));
	}

	.bcb-rail-bar {
		display: block;
		height: 6px;
		border-radius: 2px;
		background-color: var(--bc-line, rgba(29, 33, 41, 0.12));
		overflow: hidden;
	}

	.bcb-rail-bar-fill {
		display: block;
		height: 100%;
		border-radius: 2px;
		background-color: var(--bc-sage, #cde0cc);
	}
}

/* ---------------------------------------------------------- reduced motion

   Nothing in this redesign animates: the rail is server rendered, so there is
   no state change to teach. This covers the transitions the flow already had
   on the inputs, the week cards and the buttons, none of which move anything
   and all of which should stop for a parent who has asked them to. */

@media (prefers-reduced-motion: reduce) {
	.bcb *,
	.bcb *::before,
	.bcb *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}


/* ------------------------------------------------ step 5, consent and waiver
   W14-WAIVER (8 Sep 2026). The statement sits in a capped, scrollable panel so
   a parent can read it without it doubling the page; the button under it
   lifts the cap. Without JavaScript the panel simply scrolls and the button
   is not shown. */

.bcb-waiver-text {
	max-height: 220px;
	overflow: auto;
	padding: 16px 18px;
	border: 1px solid var(--bc-line, rgba(29, 33, 41, 0.12));
	border-radius: var(--bc-radius, 8px);
	background-color: var(--bcb-tint-sage, rgba(205, 224, 204, 0.38));
	font-size: 14.6px;
	line-height: 1.6;
	color: var(--bc-ink, #1d2129);
	margin: 0 0 10px;
}

.bcb-waiver-text p {
	margin: 0 0 12px;
	text-wrap: pretty;
}

.bcb-waiver-text p:last-child {
	margin-bottom: 0;
}

.bcb-waiver-text.is-open {
	max-height: none;
	overflow: visible;
}

.bcb-waiver-more {
	display: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 6px;
	font: inherit;
	font-size: 14.6px;
	color: var(--bc-accent-dark, #d96f30);
	text-decoration: underline;
	cursor: pointer;
}

.bcb-js .bcb-waiver-more {
	display: inline-block;
}

.bcb-waiver .bcb-toggle {
	margin-top: 14px;
}

.bcb-waiver .bcb-err {
	margin-top: 8px;
}