/*
	Cost of Care page (/home/childcarecosts, AU) — Figma OQJSljkscORL3dlYMNyHmi:
	desktop zero 157:34387, desktop results 157:34747, mobile zero 163:8756, mobile results 163:9039.
	Mobile first; desktop layout from 1024px (lg). Font: Poppins throughout — text Figma sets in Inter or Nunito is set in Poppins too.
	Line heights are unitless ratios: Figma line height ÷ font size, rounded up at the 4th decimal so the px stay exact
	(the px is noted when the ratio is not a short decimal); where the font size changes at a breakpoint, so does the ratio.
*/

.coc-page {
	--coc-charcoal: #3a3a3a;
	--coc-berry: #5a60ec;
	--coc-berry-700: #4044a8;
	--coc-berry-900: #262863;
	--coc-berry-100: #cccef9;
	--coc-fog: #efeffd;
	--coc-sea-mist: #c7caff;
	--coc-fuchsia: #cd08d4;
	--coc-sorbet: #fee5fe;
	--coc-vanilla: #f9f7f3;
	--coc-neutral-600: #e3e1dd;
	--coc-neutral-800: #898886;
	--coc-grey-border: #eae7e7;
	--coc-citron: #fcd152;
	background: #fff;
	color: var(--coc-charcoal);
	font-family: "Poppins", sans-serif;
}

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

.coc-page p,
.coc-page h1,
.coc-page h2,
.coc-page h3,
.coc-page dl,
.coc-page dd {
	margin: 0;
}

.coc-page dt {
	font-weight: 400;
}

/* ---------- Buttons ---------- */

/* height comes from padding + line height (48 / 56); the outline variants draw their border inside (box-shadow) */
.coc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 32px;
	border: 0;
	border-radius: 32px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, box-shadow 0.15s, color 0.15s;
}

.coc-btn:hover {
	text-decoration: none;
}

.coc-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.coc-btn--berry {
	background: var(--coc-berry);
	color: #fdfdfb;
}

/* hovers follow the 2025 buttons elsewhere on the site (Brand Hub V2 _CalculateSubsidy / _ParentReview) */
.coc-btn--berry:focus {
	color: #fdfdfb;
}

.coc-btn--berry:hover:not(:disabled) {
	background: #5257d7;
	color: #fdfdfb;
}

.coc-btn--fuchsia {
	background: var(--coc-fuchsia);
	color: #fff;
}

.coc-btn--fuchsia:focus {
	color: #fff;
}

.coc-btn--fuchsia:hover {
	background: #bb07c1;
	color: #fff;
}

.coc-btn--outline-fuchsia {
	background: #fff;
	box-shadow: inset 0 0 0 1.5px var(--coc-fuchsia);
	color: var(--coc-fuchsia);
}

.coc-btn--outline-fuchsia:focus {
	color: var(--coc-fuchsia);
}

/* outline at rest (Figma 157:34465); fills on hover — a light tint would vanish on the Sorbet card */
.coc-btn--outline-fuchsia:hover {
	background: #bb07c1;
	box-shadow: inset 0 0 0 1.5px #bb07c1;
	color: #fff;
}

.coc-btn--outline-berry {
	background: #fff;
	box-shadow: inset 0 0 0 1.5px var(--coc-berry);
	color: var(--coc-berry);
}

.coc-btn--outline-berry:focus {
	color: var(--coc-berry);
}

.coc-btn--outline-berry:hover {
	background: var(--coc-fog);
	box-shadow: inset 0 0 0 1.5px #5257d7;
	color: #5257d7;
}

@media (min-width: 1024px) {
	.coc-btn {
		width: auto;
		padding: 16px 40px;
	}

	/* Figma desktop: card buttons hug their label, left aligned */
	.coc-summary .coc-btn,
	.coc-promo .coc-btn {
		align-self: flex-start;
	}
}

/* ---------- Hero + search ---------- */

/* Figma mobile 163:8784 / 163:9067: 32px above and below the hero */
.coc-hero {
	padding: 32px 0;
}

.coc-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 760px;
	margin: 0 auto;
}

.coc-hero__intro-copy {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.coc-hero__title {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2858; /* 36px */
	text-align: center;
	color: var(--coc-charcoal);
}

.coc-hero__intro {
	font-size: 15px;
	line-height: 1.4667; /* 22px */
	text-align: center;
	color: #292733;
}

.coc-hero__intro-more {
	display: none;
}

.coc-hero__intro a {
	color: inherit;
	text-decoration: underline;
}

.coc-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.coc-search {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	border-radius: 24px;
	background: #fff;
	/* Figma's 1.5px stroke sits inside the box (inset), so the box stays 8 + content + 8 */
	box-shadow: inset 0 0 0 1.5px var(--coc-berry), 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* The search shares one style with the FDC / Vacation Care landing search (care-type-landing.css): box, button, placeholder
   (14px on phones; the typed text stays 16px so iOS does not zoom the page), the desktop quick start (chips per Figma
   157:34422), and the pill layout from 1024px. On phones the quick start follows this page's Figma (163:8787): the label
   on its own line and the three cities as equal 44px chips — the landing's eight state chips wrap instead. */
.coc-search__input {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 4px 8px; /* + the 40px select = 48 */
}

/* the 20px pin in a 24px icon box */
.coc-search__pin {
	flex-shrink: 0;
	width: 24px;
	font-size: 20px;
	color: var(--coc-berry);
}

.coc-search__select {
	flex: 1 1 auto;
	min-width: 0;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.coc-search__select input {
	box-shadow: none !important;
}

/* the typed text inside a suggestion, as autoComplete.js marks it on the home / FDC / Vacation Care searches */
.coc-search__mark {
	background: transparent;
	color: #ff7a7a;
	font-weight: 700;
}

.coc-form__error {
	padding: 0 8px;
	font-size: 14px;
	line-height: 1.4286; /* 20px */
	color: #c4002b;
}

.coc-quick {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.coc-quick__locate {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	padding: 10px 0;
	border: 0;
	background: none;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: #484dce;
	cursor: pointer;
}

.coc-quick__locate:disabled {
	opacity: 0.6;
	cursor: default;
}

.coc-quick__locate i,
.coc-quick__locate svg {
	font-size: 18px;
}

/* phones (Figma 163:8787): "Or start with" on its own line, then the three cities sharing one row */
.coc-quick__row {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.coc-quick__label {
	font-size: 14px;
	line-height: 1.4286; /* 20px */
	color: #66636f;
}

.coc-quick__cities {
	display: flex;
	gap: 8px;
}

/* equal 44px chips: 14px line + 2 x 15px */
.coc-quick__city {
	display: inline-flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 15px 12px;
	border: 0;
	border-radius: 32px;
	box-shadow: inset 0 0 0 1px #e2dfe8;
	background: #fff;
	font-size: 12px;
	font-weight: 700; /* Figma's Bold, in Poppins */
	line-height: 1.1667; /* 14px */
	white-space: nowrap;
	color: #484dce;
	cursor: pointer;
}

.coc-quick__city:hover {
	box-shadow: inset 0 0 0 1px var(--coc-berry);
}

@media (min-width: 768px) {
	.coc-hero {
		padding: 64px 0 24px;
	}

	.coc-hero__inner {
		gap: 24px;
	}

	.coc-hero__title {
		font-size: 48px;
		line-height: 1.3334; /* 64px */
	}

	.coc-hero__intro-more {
		display: inline;
	}

	.coc-hero__intro-copy {
		gap: 8px;
	}

	.coc-form {
		padding-bottom: 24px;
	}
}

/* Desktop search pill from 1024px; the box keeps Figma's MD shadow (0 2px 4px + 0 4px 6px) at every width */
@media (min-width: 1024px) {
	.coc-search {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		border-radius: 100px;
	}

	/* the row takes the button height; 8px on the right like the FDC/VC field, so the suggestion list is as wide */
	.coc-search__input {
		gap: 12px;
		padding: 0 8px 0 24px;
	}

	/* Figma map-pin sits in a 24px square icon box */
	.coc-search__pin {
		width: 1em;
		font-size: 24px;
	}

	.coc-search__select {
		font-size: 20px;
		line-height: 1.2;
	}

	.coc-search .coc-btn {
		flex-shrink: 0;
		width: auto;
		padding: 16px 40px;
	}

	.coc-quick {
		gap: 4px;
		padding: 0 24px;
	}

	/* 40px row around the 18px icon */
	.coc-quick__locate {
		padding: 11px 0;
		font-size: 14px;
		font-weight: 700; /* Figma's Bold, in Poppins */
		line-height: 1.1429; /* 16px */
		color: var(--coc-berry-700);
	}

	/* desktop: label and chips share one wrapping row, as on the FDC / VC landing search */
	.coc-quick__row {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.coc-quick__label {
		line-height: 1.1429; /* 16px */
		color: #696866;
	}

	.coc-quick__cities {
		display: contents;
	}

	/* 36px chips: 16px line + 2 x 10px */
	.coc-quick__city {
		flex: 0 0 auto;
		padding: 10px 18px;
		box-shadow: inset 0 0 0 1px var(--coc-grey-border);
		font-weight: 500;
		line-height: 1.3334; /* 16px */
		color: var(--coc-berry);
	}
}

/* ---------- Shared card bits ---------- */

.coc-main {
	padding: 0 0 40px;
}

.coc-card-title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.coc-big-price {
	font-size: 44px;
	font-weight: 600;
	line-height: 1.1;
	white-space: nowrap;
}

.coc-per-day {
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.4286; /* 20px */
	color: var(--coc-neutral-800);
}

.coc-legend {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 12px;
}

/* a long suburb name wraps the label: the label takes the extra height so both values in a row stay level */
.coc-legend > div {
	display: flex;
	flex-direction: column;
}

.coc-legend__label {
	display: flex;
	flex: 1 0 auto;
	align-items: flex-start;
	gap: 6px;
	font-size: 12px;
	line-height: 1.5;
}

/* marker centred on the first line of the label */
.coc-legend__label::before {
	content: "";
	flex-shrink: 0;
	width: 3px;
	height: 14px;
	margin-top: 2px;
	background: var(--coc-legend-colour, var(--coc-berry-700));
}

.coc-legend__value {
	margin-top: 6px;
	font-size: 20px;
	font-weight: 600;
	line-height: normal;
}

.coc-legend--fuchsia {
	--coc-legend-colour: var(--coc-fuchsia);
}

/* "Sydney average": berry-700 like the other local markers on phones (Figma 163:9119), berry on desktop (157:34827) */
@media (min-width: 1024px) {
	.coc-legend--berry {
		--coc-legend-colour: var(--coc-berry);
	}
}

.coc-summary {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border-radius: 18px;
	background: var(--coc-vanilla);
	box-shadow: inset 0 0 0 1px var(--coc-grey-border); /* Figma strokes sit inside and take no space */
}

.coc-summary .coc-legend {
	padding-top: 16px;
	box-shadow: inset 0 1px 0 var(--coc-neutral-600);
}

.coc-promo {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border-radius: 24px;
	background: var(--coc-sorbet);
}

.coc-promo__text {
	display: flex;
	flex-direction: column;
	gap: 16px; /* Figma mobile 163:8848; desktop 12px */
}

.coc-promo__text p {
	font-size: 16px;
	line-height: 1.5;
}

.coc-browse {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border-radius: 18px;
	background: var(--coc-berry-100);
}

.coc-browse__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.coc-browse__text p {
	font-size: 16px;
	line-height: 1.5;
}

@media (min-width: 1024px) {
	.coc-main {
		padding-bottom: 56px;
	}

	.coc-big-price {
		font-size: 56px;
	}

	.coc-summary {
		padding: 32px;
		border-radius: 20px;
	}

	.coc-summary .coc-card-title {
		font-weight: 500;
	}

	.coc-legend__label {
		line-height: 1.4167; /* 17px */
	}

	.coc-legend__label::before {
		margin-top: 1.5px;
	}

	.coc-promo {
		gap: 24px;
		padding: 32px;
	}

	.coc-promo__text {
		gap: 12px;
	}

	.coc-browse {
		flex-direction: row;
		align-items: center;
		padding: 26px 24px;
		border-radius: 16px;
	}

	.coc-browse__text {
		flex: 1 1 auto;
		gap: 9px;
	}
}

/* ---------- Zero state (national) ---------- */

.coc-zero {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.coc-zero__col {
	display: contents;
}

.coc-zero .coc-summary { order: 1; }
.coc-zero .coc-chart { order: 2; }
.coc-zero .coc-promo { order: 3; }
.coc-zero .coc-browse { order: 4; }

/* "National average" card (Figma mobile 163:8812): title, price and "per day" sit 16px apart.
   .coc-page p / dd reset margins with a stronger selector, hence the .coc-page prefix. */.coc-zero .coc-summary .coc-big-price {
	line-height: 1.2273; /* 54px */
}

.coc-page .coc-zero .coc-summary .coc-per-day {
	margin-top: 16px;
}

.coc-page .coc-zero .coc-summary .coc-legend__value {
	margin-top: 6px;
}

/* desktop zero: no legend markers (mobile has them) */
@media (min-width: 1024px) {
	.coc-zero {
		flex-direction: row;
		align-items: stretch;
		gap: 32px;
	}

	.coc-zero__col {
		display: flex;
		flex-direction: column;
		gap: 32px;
	}

	/* columns share the row in the Figma proportion 382 : 786 */
	.coc-zero__col--side {
		flex: 382 1 0;
		min-width: 0;
	}

	.coc-zero__col--main {
		flex: 786 1 0;
		min-width: 0;
	}

	.coc-zero .coc-summary .coc-legend__label::before {
		display: none;
	}

	.coc-zero .coc-summary .coc-card-title {
		font-weight: 500;
	}

	/* Figma desktop 157:34444: price and "per day" 4px apart, 20px values with the design font's ~24px line height */	.coc-zero .coc-summary .coc-big-price {
		line-height: 1.1;
	}

	.coc-page .coc-zero .coc-summary .coc-per-day {
		margin-top: 4px;
	}

	.coc-zero .coc-summary .coc-legend__value {
		line-height: 1.2;
	}
}

/* ---------- Histogram ---------- */

.coc-chart {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px 32px 16px;
	border-radius: 24px;
	background: var(--coc-fog);
}

.coc-chart__title {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
}

/* y labels | plot, x labels under the plot; everything sizes from the card */
.coc-chart__figure {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) auto;
	column-gap: 4px;
	padding: 10px 0 22px; /* room for the top y label (centred on the top gridline); Figma leaves ~22px under the x labels */
	margin-left: -16px; /* phones: the y labels hang into the card padding, the axis sits 15px in (Figma 184:12375) */
	font-size: 10px;
	color: var(--coc-neutral-800);
}

/* labels spread over the plot height; the negative margins put each label's centre on its gridline */
.coc-chart__y {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: -10px 0;
	line-height: 2;
	text-align: right;
	white-space: nowrap;
}

/* gridlines every quarter (background) + axis lines (borders); bars and the average line share the one cell */
.coc-chart__plot {
	position: relative; /* anchors the tooltip */
	display: grid;
	aspect-ratio: 271 / 280; /* phones: Figma 184:12396 plot */
	border-left: 1px solid var(--coc-sea-mist);
	border-bottom: 1px solid var(--coc-sea-mist);
	background: linear-gradient(var(--coc-sea-mist) 1px, transparent 1px) 0 0 / 100% 25%;
}

.coc-chart__bars,
.coc-chart__avg {
	grid-area: 1 / 1;
}

.coc-chart__bars {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	padding-left: 3px;
}

.coc-chart__bar {
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 5px 5px 0 0;
	background: var(--coc-berry-700);
	cursor: pointer;
}

/* Figma 208:81 / 208:82: lighter bar (white 20% + 10% layers) inside a faint 1px white frame */
.coc-chart__bar:hover,
.coc-chart__bar:focus-visible,
.coc-chart__bar.is-active {
	background: linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.28)), var(--coc-berry-700);
	outline: 1px solid rgba(255, 255, 255, 0.4);
	outline-offset: 1px;
}

/* Figma 184:9595: 2px citron dashes on 4px white dashes (6px dash, 5px gap), from 1px above the top gridline to 5px
   below the axis; placed by margin-left: <average %> */
.coc-chart__avg {
	justify-self: start;
	width: 4px;
	margin: -1px 0 -5px;
	background:
		repeating-linear-gradient(var(--coc-citron) 0 6px, transparent 6px 11px) 50% -3px / 2px 100% no-repeat,
		repeating-linear-gradient(#fff 0 6px, transparent 6px 11px) 0 -3px / 100% 100% no-repeat;
	transform: translateX(-50%);
	pointer-events: none;
}

/* x labels share one cell and are placed by margin-left: <value %> */
.coc-chart__x {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* one full-width cell: the % margins resolve against the plot width */
	grid-column: 2;
	padding-top: 10px;
}

.coc-chart__x > span {
	grid-area: 1 / 1;
	justify-self: start;
	white-space: nowrap;
}

.coc-chart__tick {
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translateX(-50%);
}

/* tick mark hanging from the x axis */
.coc-chart__tick::before {
	content: "";
	width: 1px;
	height: 5px;
	margin: -10px 0 5px;
	background: var(--coc-sea-mist);
}

.coc-chart__tick--start {
	align-items: flex-start;
	transform: none;
}

.coc-chart__tick--end {
	align-items: flex-end;
	transform: translateX(-100%);
}

.coc-chart__avg-label {
	align-self: start;
	margin-top: -2px;
	padding: 1px 4px;
	border-radius: 6px;
	background: var(--coc-citron);
	font-weight: 500;
	line-height: 1.6;
	color: var(--coc-charcoal);
	transform: translateX(-50%);
}

/* floating tooltip next to the hovered bar: the only absolutely positioned part of the chart */
.coc-chart__tip {
	position: absolute;
	z-index: 2;
	width: max-content;
	padding: 12px;
	border: 1px solid var(--coc-sea-mist);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 10px rgba(0, 0, 0, 0.08);
	pointer-events: none;
	margin-top: 30px; /* Figma: the tooltip centre sits ~30px below the bar top */
	transform: translateY(-50%);
}

.coc-chart__tip::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -7px;
	width: 12px;
	height: 12px;
	border-left: 1px solid var(--coc-sea-mist);
	border-bottom: 1px solid var(--coc-sea-mist);
	background: #fff;
	transform: translateY(-50%) rotate(45deg);
}

.coc-chart__tip--left::before {
	left: auto;
	right: -7px;
	transform: translateY(-50%) rotate(-135deg);
}

.coc-chart__tip dl {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.coc-chart__tip dt {
	font-size: 12px;
	line-height: 1.3334; /* 16px */
	color: var(--coc-neutral-800);
}

.coc-chart__tip dd {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--coc-charcoal);
}

/* tablets (cards still stacked): the desktop plot proportion */
@media (min-width: 768px) {
	.coc-chart__plot {
		aspect-ratio: 670 / 280;
	}
}

/* desktop (Figma 157:34442): the chart card fills its column so both columns end level; the plot takes what is left */
@media (min-width: 1024px) {
	.coc-chart {
		flex: 1 1 auto;
		padding: 32px 32px 16px;
	}

	.coc-chart__figure {
		margin-left: 0;
		column-gap: 10px;
		padding-bottom: 0;
		font-size: 12px;
	}

	.coc-chart__y {
		line-height: 1.6667; /* 20px */
	}

	.coc-chart__plot {
		aspect-ratio: auto;
	}


	.coc-chart__bars {
		gap: 5px;
	}

	.coc-chart__avg-label {
		padding: 3px 10px;
		line-height: 1.3334; /* 16px */
	}
}

/* ---------- Loading skeleton (server partial _LoadingSkeleton, replaced by the app) ---------- */

/* stands in for the react-select control: one 40px line */
.coc-loading__field {
	display: flex;
	align-items: center;
	min-height: 40px;
	overflow: hidden;
	white-space: nowrap;
	color: var(--coc-neutral-800);
}

/* figures still loading: the placeholder text keeps its size and shows as a shimmering bar */
.coc-skel {
	border-radius: 6px;
	background: linear-gradient(90deg, rgba(58, 58, 58, 0.06) 25%, rgba(58, 58, 58, 0.14) 37%, rgba(58, 58, 58, 0.06) 63%) 0 50% / 400% 100%;
	color: transparent;
	animation: coc-skel 1.4s ease infinite;
}

.coc-chart__bar.coc-skel {
	border-radius: 5px 5px 0 0;
	cursor: default;
}

@keyframes coc-skel {
	from {
		background-position: 100% 50%;
	}

	to {
		background-position: 0 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.coc-skel {
		animation: none;
	}
}

/* ---------- Results state (local) ---------- */

.coc-results {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.coc-results__side {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.coc-local {
	gap: 20px;
	border-radius: 20px;
}

/* .coc-page p / dd reset their margins with a stronger selector */
.coc-page .coc-local .coc-per-day {
	margin-top: 4px;
}

.coc-page .coc-local .coc-legend__value {
	margin-top: 6px;
}

.coc-local .coc-legend {
	row-gap: 20px; /* Figma mobile 163:9103 / 9114; 16px on desktop */
	padding-top: 0;
	box-shadow: none;
}

.coc-local__note {
	font-size: 14px;
	line-height: 1.4286; /* 20px */
}

.coc-local__area {
	padding: 8px 12px;
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	line-height: 1.4286; /* 20px */
}

.coc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* every part of the track sits in one grid cell; its height comes from the markers + padding */
.coc-axis__track {
	display: grid;
	align-items: center;
	padding: 7px 0;
}

.coc-axis__track > * {
	grid-area: 1 / 1;
	justify-self: start;
}

/* phones: square ends (Figma 163:9090 / 9092-9095); desktop rounds them by 2px (157:34800-34805) */
.coc-axis__line {
	justify-self: stretch;
	border-top: 4px solid var(--coc-neutral-600);
}

/* placed by margin-left: <min %> and width: <max % - min %> */
.coc-axis__range {
	border-top: 12px solid var(--coc-berry);
	border-radius: 6px;
}

/* markers / dot: margin-left: <value %>, centred on it. The average marker is berry-700 on phones (Figma 163:9094),
   berry on desktop (157:34804) */
.coc-axis__mark {
	width: 3px;
	height: 26px;
	background: var(--coc-berry-700);
	transform: translateX(-50%);
}

.coc-axis__mark--national {
	background: var(--coc-fuchsia);
}

.coc-axis__dot {
	width: 11px;
	height: 11px;
	border: 3px solid var(--coc-berry);
	border-radius: 50%;
	background: #fff;
	transform: translateX(-50%);
}

.coc-axis__ticks {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 11px;
	line-height: 1.1819; /* 13px: Figma's 11px with the design font's normal line height */
}

.coc-nearby {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.coc-nearby__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Figma mobile 163:9143: SemiBold heading, #66636f legend (desktop: Medium, #898886) */
.coc-nearby .coc-chart__title {
	font-weight: 600;
}

.coc-nearby__sub {
	font-size: 14px;
	line-height: 1.4286; /* 20px */
	color: #66636f;
}

.coc-nearby__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.coc-nearby__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 8px;
	background: #fff;
	box-shadow: inset 0 -1px 0 var(--coc-neutral-600); /* Figma strokes sit inside the row */
	color: var(--coc-charcoal);
	text-decoration: none;
}

.coc-nearby__row:hover {
	background: var(--coc-fog);
	color: var(--coc-charcoal);
	text-decoration: none;
}

.coc-nearby__row.is-current {
	border-radius: 8px; /* Figma mobile; 16px on desktop */
	box-shadow: inset 0 0 0 1px var(--coc-berry);
	background: var(--coc-fog);
}

.coc-nearby__line {
	display: flex;
	align-items: center;
	gap: 8px;
}

.coc-nearby__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	line-height: 1.5;
}

.is-current .coc-nearby__name {
	font-weight: 600;
}

/* Figma mobile 163:9150: 16px with the design font's normal line height (24px; the browser's "normal" for Poppins is 25px) */
.coc-nearby__price {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

/* Figma mobile 163:9151: ~10px glyph in a 16px icon box, charcoal */
.coc-nearby__chevron {
	width: 16px;
	font-size: 14px;
}

.coc-nearby__chevron--desktop {
	display: none;
}

.coc-nearby__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.coc-nearby__diff {
	font-size: 12px;
	line-height: normal;
	color: #66636f;
}

.coc-nearby__link {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--coc-berry);
}

@media (min-width: 1024px) {
	.coc-results {
		flex-direction: row;
		align-items: flex-start;
		gap: 64px;
	}

	/* columns share the row in the Figma proportion 448 : 688 */
	.coc-results__side {
		flex: 448 1 0;
		min-width: 0;
	}

	.coc-local .coc-card-title {
		font-weight: 500;
	}

	/* Figma leaves ~42px between the axis labels and the legend (76px axis frame + 20px gap) */
	.coc-local .coc-axis {
		margin-bottom: 22.5px;
	}

	.coc-local .coc-legend {
		row-gap: 16px;
	}

	/* Figma's legend values are 20px with a normal line height of the design font (~24px) */
	.coc-local .coc-legend__value {
		line-height: 1.2;
	}

	.coc-local .coc-legend__label::before {
		width: 4px;
		border-radius: 2px;
	}

	.coc-local__note {
		line-height: 1.5;
	}

	.coc-axis__track {
		padding: 3.5px 0;
	}

	.coc-axis__line {
		border-radius: 2px;
	}

	.coc-axis__mark {
		width: 4px;
		height: 28px;
		border-radius: 2px;
	}

	.coc-axis__mark--avg {
		background: var(--coc-berry);
	}

	.coc-axis__dot {
		width: 14px;
		height: 14px;
		border-width: 4px;
	}

	/* each label sits on its value (stacked in one cell, margin-left: --at); the end labels stay inside the axis */
	.coc-axis__ticks {
		display: grid;
		grid-template-columns: minmax(0, 1fr); /* one full-width cell: the % margins resolve against the axis width */
		margin-top: 5.5px;
	}

	.coc-axis__ticks > span {
		grid-area: 1 / 1;
		justify-self: start;
		margin-left: var(--at);
		transform: translateX(-50%);
	}

	.coc-axis__ticks > span:first-child {
		transform: none;
	}

	.coc-axis__ticks > span:last-child {
		transform: translateX(-100%);
	}

	.coc-nearby {
		flex: 688 1 0;
	}

	.coc-nearby__head {
		gap: 6px;
	}

	.coc-nearby .coc-chart__title {
		font-weight: 500;
	}

	.coc-nearby__sub {
		line-height: 1.5;
		color: var(--coc-neutral-800);
	}

	.coc-nearby__row.is-current {
		border-radius: 16px;
	}

	.coc-nearby__row {
		gap: 2px;
		padding: 12px;
	}

	.coc-nearby__line {
		gap: 10px;
	}

	.coc-nearby__price {
		font-size: 17px;
		line-height: 1.2353; /* 21px: Figma's 17px with the design font's normal line height */
	}

	/* Figma desktop 157:34851: berry 9px glyph in an 18px icon box */
	.coc-nearby__chevron {
		width: 18px;
		font-size: 12px;
		color: var(--coc-berry);
	}

	.coc-nearby__chevron--phone {
		display: none;
	}

	.coc-nearby__chevron--desktop {
		display: inline-block;
	}

	.coc-nearby__meta {
		flex-direction: row;
		justify-content: space-between;
		gap: 12px;
	}

	.coc-nearby__diff {
		color: var(--coc-neutral-800);
		line-height: 1.4167; /* 17px */
	}

	.coc-nearby__link {
		line-height: 1.4167; /* 17px */
	}

	.is-current .coc-nearby__name {
		line-height: 1.25;
	}
}

/* ---------- Care for Kids recommends (server partial _RecommendedCentres) ---------- */

.coc-h2 {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3334; /* 32px */
	color: var(--coc-charcoal);
}

.coc-rec {
	padding: 40px 0;
}

.coc-rec__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.coc-rec__nav {
	display: none;
	gap: 8px;
}

.coc-rec__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px; /* 16px icon box + 13 + 13 + border = 44 x 44 */
	border: 1px solid var(--coc-charcoal);
	border-radius: 80px;
	background: #fff;
	font-size: 16px;
	color: var(--coc-charcoal);
	cursor: pointer;
}

/* Figma 157:34944: 16 x 16 icon box */
.coc-rec__btn svg {
	width: 16px;
}

.coc-rec__btn.disabled,
.coc-rec__btn:disabled {
	border-color: #b1afad;
	color: #b1afad;
	cursor: default;
}

.coc-rec__glider {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.coc-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #d9d8df;
	border-radius: 16px;
	background: #fdfdfb;
	cursor: pointer;
}

.coc-card__media {
	display: grid;
}

.coc-card__media > * {
	grid-area: 1 / 1;
}

.coc-card__photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.coc-card__photo--contain {
	object-fit: contain;
}

/* logo thumbnail: 64px square */
.coc-card__logo {
	flex-shrink: 0;
	width: 64px;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid #d9d8df;
	border-radius: 8px;
	background: #fff;
}

.coc-card__logo img {
	width: 100%;
	height: 100%;
	padding: 3px;
	object-fit: contain;
}

.coc-card__logo--over {
	align-self: start;
	justify-self: start;
	margin: 16px;
}

/* Mobile first (Figma 163:9236); tablet/desktop card from 768px (Figma 157:34949) */

/* the badge hangs below the photo, over the card body (negative margin) */
.coc-card__badge {
	align-self: end;
	justify-self: start;
	z-index: 1;
	margin: 0 0 -12px 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--coc-berry);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
	white-space: nowrap;
}

/* Figma mobile star: 12px box */
.coc-card__badge i,
.coc-card__badge svg {
	width: 12px;
	font-size: 12px;
}

/* name, address and reviews stack 12px apart */
.coc-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	padding: 26px 16px 24px;
}

.coc-card__title-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.coc-card__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--coc-charcoal);
	text-decoration: none;
}

.coc-card__name:hover,
.coc-card__name:focus {
	color: var(--coc-charcoal);
	text-decoration: underline;
}

/* the tick sits on its own line under the name */
.coc-card__verified {
	display: block;
	margin-top: 6px;
	font-size: 16px;
	color: var(--coc-berry);
}

/* 44px tap target around the 24px heart */
.coc-card__heart {
	flex-shrink: 0;
	padding: 10px;
	border: 0;
	background: none;
	cursor: pointer;
}

.coc-card__heart svg {
	display: block;
	width: 24px;
	height: 24px;
}

.coc-card__address {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 1.4286; /* 20px */
}

/* Figma pin: 15 x 18 */
.coc-card__address i,
.coc-card__address svg {
	flex-shrink: 0;
	width: 15px;
	font-size: 18px;
	color: var(--coc-berry);
}

.coc-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 8px;
}

.coc-card__foot--end {
	justify-content: flex-end;
}

.coc-card__rating {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	line-height: normal;
	white-space: nowrap;
}

.coc-card__rating strong {
	font-size: 14px;
	font-weight: 600;
}

.coc-card__rating i,
.coc-card__rating svg {
	font-size: 13px;
	color: #ffae20;
}

.coc-card__fee {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	line-height: normal;
	white-space: nowrap;
}

.coc-card__fee strong {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
}

.coc-card__fee em {
	font-size: 13px;
}

@media (min-width: 768px) {
	.coc-rec {
		padding: 70px 0;
	}

	.coc-rec__head {
		margin-bottom: 40px;
	}

	.coc-rec__nav {
		display: flex;
	}

	/* every card fits the row: nothing to scroll (Index.cshtml cocInitRecommended) */
	.coc-rec__nav.is-hidden {
		display: none;
	}

	.coc-h2--lg {
		font-size: 32px;
		line-height: 1.25;
	}

	.coc-rec__glider {
		display: block;
	}

	.coc-rec__slide {
		padding-right: 24px;
	}

	.coc-rec__slide .coc-card {
		height: 100%;
	}

	.coc-rec__glider .glider-track {
		align-items: stretch;
	}

	/* desktop card (Figma 157:34949) */
	.coc-card__badge {
		margin-bottom: -15px;
		gap: 8px;
		padding: 4px 12px;
		font-size: 14px;
	}

	.coc-card__badge i,
	.coc-card__badge svg {
		width: 15px;
		font-size: 14px;
	}

	.coc-card__body {
		gap: 0;
		padding: 24px 16px;
	}

	.coc-card__verified {
		display: inline-block;
		margin-top: 0;
	}

	.coc-card__heart {
		padding: 0;
	}

	.coc-card__address {
		padding: 8px 0 16px;
		font-size: 16px;
		line-height: 1.5;
	}

	.coc-card__address i,
	.coc-card__address svg {
		margin-top: 2px;
	}

	.coc-card__foot {
		padding-top: 0;
	}

	/* Figma 157:34981 / 157:34984: charcoal score, black "(N Reviews)" */
	.coc-card__rating {
		font-size: 16px;
		line-height: 1.5;
		color: #000;
	}

	.coc-card__rating strong {
		font-size: 16px;
		color: var(--coc-charcoal);
	}

	.coc-card__rating i,
	.coc-card__rating svg {
		font-size: 14px;
	}

	.coc-card__fee {
		gap: 0;
	}

	.coc-card__fee em {
		font-size: 16px;
		line-height: 1.5;
	}
}

/* ---------- Common questions + More from Care for kids (Razor) ---------- */

.coc-info {
	padding: 40px 0;
}

.coc-info__grid {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.coc-faq__title {
	padding-bottom: 8px;
}

.coc-faq__item {
	box-shadow: inset 0 -1px 0 var(--coc-neutral-600);
}

.coc-faq__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	list-style: none;
	cursor: pointer;
}

.coc-faq__summary::-webkit-details-marker {
	display: none;
}

.coc-faq__summary i,
.coc-faq__summary svg {
	flex-shrink: 0;
	font-size: 14px;
	transition: transform 0.15s;
}

.coc-faq__item[open] .coc-faq__summary i,
.coc-faq__item[open] .coc-faq__summary svg {
	transform: rotate(180deg);
}

/* closing (Index.cshtml cocInitFaqAnimation): the item stays [open] while its height animates, the chevron turns back now */
.coc-faq__item.is-closing .coc-faq__summary i,
.coc-faq__item.is-closing .coc-faq__summary svg {
	transform: none;
}

.coc-faq__answer {
	padding-bottom: 16px;
	font-size: 16px;
	line-height: 1.5;
}

/* links in the answers: underlined in the text colour; the calculator link is SemiBold (Figma 206:15709 / 206:15716) */
.coc-faq__answer a {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
}

.coc-faq__answer .coc-faq__cta {
	font-weight: 600;
}

.coc-more {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.coc-more__ccs {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 24px 20px; /* 72px tall from padding + line height */
	border-radius: 20px;
	background: var(--coc-berry-900);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: #fff;
	text-decoration: none;
}

.coc-more__ccs:hover,
.coc-more__ccs:focus {
	color: #fff;
	text-decoration: none;
	opacity: 0.92;
}

.coc-more__ccs span {
	flex: 1 1 auto;
}

/* Figma calculator icon is 18.6 x 22.3: the narrower Font Awesome glyph sits centred in a box of that width */
.coc-more__ccs .fa-calculator {
	width: 19px;
	font-size: 22px;
}

.coc-more__ccs .fa-arrow-right {
	font-size: 18px; /* ~16px glyph (Figma mobile 163:8888) */
}

.coc-more__link {
	display: flex;
	align-items: center;
	padding: 10px 0; /* 44px tap target */
	font-size: 16px;
	line-height: 1.5;
	color: #231673;
	text-decoration: none;
}

.coc-more__link:hover {
	color: #231673;
	text-decoration: underline;
}

@media (min-width: 1024px) {
	.coc-info {
		padding: 70px 0 80px;
	}

	.coc-info__grid {
		flex-direction: row;
		align-items: flex-start;
		gap: 120px;
	}

	.coc-faq {
		flex: 1 1 auto;
		min-width: 0;
	}

	.coc-faq__item {
		box-shadow: none;
		border-bottom: 1px solid var(--coc-neutral-600);
	}

	/* Figma 157:39451: the heading block is 50px (32px line + 18px) */
	.coc-faq__title {
		padding-bottom: 18px;
	}

	.coc-faq__summary {
		padding: 28px 0; /* 80px row */
		font-size: 20px;
		line-height: 1.2;
	}

	/* Figma chevron: 12 x 6 glyph centred in a 24px icon box */
	.coc-faq__summary i,
	.coc-faq__summary svg {
		width: 24px;
		font-size: 14px;
	}

	/* the answer runs the full width of the item, leaving the room Figma leaves on the right (676px item, 608px text) */
	.coc-faq__answer {
		padding: 0 68px 20px 0;
	}

	.coc-more {
		flex: 0 0 auto;
	}

	/* Figma 157:39475: the heading block is 46px (32px line + 14px) */
	.coc-more .coc-h2 {
		padding-bottom: 14px;
	}

	.coc-more__ccs {
		gap: 8px;
		padding: 24px;
		font-weight: 500;
		font-size: 20px;
		line-height: 1.2;
	}

	/* Figma arrow: ~15px glyph in a 26px icon box */
	.coc-more__ccs .fa-arrow-right {
		width: 26px;
		font-size: 17px;
	}

	/* link boxes hug their text (Figma 157:39481..85) */
	.coc-more__link {
		align-self: flex-start;
		font-size: 20px;
		font-weight: 500;
		line-height: 1.2;
		text-decoration: underline;
		text-underline-position: from-font;
	}
}

/* ---------- Ads kept below the designed content ---------- */

.coc-extras {
	padding-bottom: 48px;
}

/* 48px between the two ads (the ad itself adds an inline 20px margin-top) */
.coc-extras__ad--bottom {
	padding-top: 28px;
}