/* Visual system mirrors the sibling form plugin so both render identically. */
.careback-portal {
	--careback-border: #d8d8d8;
	--careback-text: #111;
	--careback-muted: #666;
	color: var(--careback-text);
}

.careback-step[hidden] {
	display: none !important;
}

/* The step containers must never show a focus ring; they are layout only. */
.careback-step:focus,
.careback-step:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* Section heading inside the form (e.g. "Select the items…"): darker and
   heavier than a field label so the two are visually distinct. */
.careback-section-title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--careback-text);
}

/* Notice that requests already exist for this order — a red, bordered alert
   placed above the form. */
.careback-existing-alert {
	margin: 0 0 22px;
	padding: 12px 14px;
	border: 1px solid #c0392b;
	background: #fdf3f2;
	color: #8a1f11;
	font-size: 13px;
	line-height: 1.5;
}

.careback-existing-alert p {
	margin: 0 0 4px;
	font-weight: 600;
}

.careback-existing-alert .careback-existing {
	margin: 0;
	padding-left: 18px;
}

/* Fields fill the row; two half-width fields share it while each still gets
   220px, and take a row each below that (a portal under about 460px: a phone,
   a sidebar, a narrow column). The width that decides is the portal's own, not
   the screen's. Side by side they are exactly as wide as before.
   It was a 20-column grid with 18px gaps, which can never be narrower than its
   19 gaps (342px): on a phone the fields ran out of the portal (BUG-portal-1). */
.careback-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.careback-field {
	flex: 1 1 100%;
	min-width: 0;
}

.careback-width-50 {
	flex: 1 1 calc(50% - 10px);
	min-width: min(100%, 220px);
}

.careback-field label span,
.careback-field > span {
	display: inline-block;
	margin-bottom: 7px;
	font-size: 13px;
	line-height: 1.4;
}

.careback-field input,
.careback-field select,
.careback-field textarea {
	width: 100%;
	border: 1px solid var(--careback-border);
	border-radius: 0;
	background: #fff;
	color: var(--careback-text);
	min-height: 44px;
	padding: 10px 12px;
	font: inherit;
	box-sizing: border-box;
}

/* `:focus-visible` must be listed too: without it the browser draws its own
   dotted ring on top, which is what shows on a focused text field. */
.careback-field input:focus,
.careback-field select:focus,
.careback-field textarea:focus,
.careback-field input:focus-visible,
.careback-field select:focus-visible,
.careback-field textarea:focus-visible {
	outline: none !important;
	border-color: var(--careback-text);
	box-shadow: none !important;
}

/* Text fields show their focus by the darker border above; the browser's own
   ring is taken off them only. */
.careback-portal input:focus,
.careback-portal input:focus-visible,
.careback-portal select:focus,
.careback-portal select:focus-visible,
.careback-portal textarea:focus,
.careback-portal textarea:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* Every button and link of the form shows where the keyboard is (WCAG 2.4.7):
   a 2px ring set off from it. A mouse click draws none (:focus-visible). */
.careback-portal button:focus-visible,
.careback-portal a:focus-visible,
.careback-portal input[type="checkbox"]:focus-visible,
.careback-portal input[type="radio"]:focus-visible {
	outline: 2px solid #111 !important;
	outline-offset: 3px !important;
	box-shadow: none !important;
}

.careback-portal button:focus:not(:focus-visible) {
	outline: none;
}

/* A step's heading takes the focus when the step opens, for screen readers;
   it is not a control and draws no ring. */
.careback-portal .careback-step-heading:focus,
.careback-portal .careback-done:focus {
	outline: none !important;
}

.careback-field textarea {
	min-height: 132px;
	resize: vertical;
}

/* A thin, brand-coloured chevron so the dropdown reads as a select, not an input. */
.careback-field select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.25'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	cursor: pointer;
}

.careback-field select::-ms-expand {
	display: none;
}

/* Required marker on field labels. Optional fields carry no marker at all. */
.careback-req {
	margin-left: 2px;
	color: var(--careback-text);
}

.careback-choice {
	display: flex;
	align-items: center;
	margin: 8px 0;
	word-break: break-word;
}

/* Custom monochrome checkbox: white box, solid black fill with a white tick
   when checked. Overrides the browser's blue default so it matches the brand. */
.careback-choice input[type="checkbox"],
.careback-items input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0 10px 0 0;
	flex: 0 0 auto;
	border: 1px solid var(--careback-text);
	border-radius: 0;
	background: #fff;
	cursor: pointer;
	position: relative;
}

.careback-choice input[type="checkbox"]:checked,
.careback-items input[type="checkbox"]:checked {
	background: var(--careback-text);
	border-color: var(--careback-text);
}

.careback-choice input[type="checkbox"]:checked::after,
.careback-items input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Keyboard focus is shown by darkening the box itself: an outline ring around
   every control made the list noisy on click. */
.careback-choice input[type="checkbox"]:focus,
.careback-choice input[type="checkbox"]:focus-visible,
.careback-items input[type="checkbox"]:focus,
.careback-items input[type="checkbox"]:focus-visible,
.careback-units input[type="checkbox"]:focus,
.careback-units input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: none;
}

.careback-choice input[type="checkbox"]:focus-visible {
	border-color: var(--careback-text);
}

/* Fieldsets group units; the browser default border would box every line. */
.careback-line fieldset:focus,
.careback-line fieldset:focus-visible,
.careback-units li:focus,
.careback-units li:focus-visible {
	outline: none;
}

.careback-items {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

/* Neutral, transient status line (e.g. "Checking…", "Sending…"). */
.careback-confirmation {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--careback-muted);
}

/* Result notices — a real message after an action. Larger and clearly coloured,
   with a left accent bar so success / info / error read at a glance. */
.careback-notice {
	display: block;
	margin-top: 14px;
	padding: 14px 16px;
	border: 1px solid;
	border-left-width: 4px;
	font-size: 15px;
	line-height: 1.5;
}

.careback-notice.careback-success {
	border-color: #1a7f37;
	background: #eef7f0;
	color: #14672c;
}

/* Duplicate / neutral acknowledgement: black text, transparent background,
   a plain black border — the same box shape as the "requests already filed"
   notice but in the brand's monochrome, not a warning colour. */
.careback-notice.careback-info {
	border: 1px solid var(--careback-text);
	border-left-width: 1px;
	background: transparent;
	color: var(--careback-text);
}

.careback-notice.careback-errors {
	border-color: #c0392b;
	background: #fdf3f2;
	color: #8a1f11;
}

/* Inline validation errors (before submit) stay compact but red. */
.careback-errors:not(.careback-notice) {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #8a1f11;
}

.careback-html {
	font-size: 13px;
	line-height: 1.6;
	color: var(--careback-muted);
}

.careback-html p {
	margin: 0;
}

.careback-html a {
	color: inherit;
	text-decoration: underline;
}

.careback-submit {
	margin-top: 22px;
	border: 1px solid #111;
	background: #111;
	color: #fff;
	min-height: 44px;
	padding: 0 24px;
	cursor: pointer;
	text-transform: uppercase;
}

.careback-submit.is-secondary {
	background: #fff;
	color: #111;
}

.careback-submit[disabled] {
	opacity: 0.7;
	pointer-events: none;
}

.careback-step.is-busy {
	opacity: 0.7;
	pointer-events: none;
}

.careback-hp {
	position: absolute;
	left: -9999px;
}

.careback-fallback {
	margin-top: 22px;
}

/* Shown only with scripting off, where the two-step form never builds. */
.careback-noscript {
	margin-bottom: 22px;
	padding: 16px 18px;
	border: 1px solid #111;
	border-left-width: 4px;
	background: #fafafa;
}

.careback-noscript-lead {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: #111;
}

.careback-noscript .careback-html {
	font-size: 14px;
	color: #111;
}

/* Without JavaScript the block above is all there is (decision 3 A, the
   designer's review S3): the steps, their fields and Continue need the script,
   and the block carries the contact line already. A browser that cannot tell
   shows the form as before. */
@media (scripting: none) {
	.careback-portal[data-careback] .careback-progress,
	.careback-portal[data-careback] .careback-progress-short,
	.careback-portal[data-careback] .careback-step,
	.careback-portal[data-careback] .careback-message,
	.careback-portal[data-careback] .careback-fallback,
	.careback-portal[data-careback] > .careback-model-link {
		display: none !important;
	}
}

/* Prevent the mobile zoom-on-focus jump. */
@media (max-width: 767px) {
	.careback-field input,
	.careback-field select,
	.careback-field textarea {
		font-size: 16px;
	}
}

/* === Item row: checkbox + name on the left, quantity stepper on the right.
   Each item sits in its own bordered box so rows read as distinct cards. === */
.careback-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 10px;
	padding: 12px 14px;
	border: 1px solid var(--careback-border);
}
.careback-item .careback-choice {
	margin: 0;
	flex: 1 1 auto;
}

/* Quantity stepper. Theme-agnostic: the plugin draws its own +/- buttons and
   number field so the control looks identical on any theme. We do NOT rely on
   the theme's number-input arrows or on Astra's injected +/- placeholders. */
.careback-stepper {
	display: inline-flex;
	align-items: stretch;
	flex: 0 0 auto;
	height: 40px;
	border: 1px solid var(--careback-border);
	overflow: hidden;
}
.careback-stepper .careback-step-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 38px;
	padding: 0;
	margin: 0;
	border: 0;
	background: #fff;
	color: var(--careback-text);
	font: inherit;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.15s ease;
}
.careback-stepper .careback-step-btn:hover {
	background: #f5f5f5;
}
.careback-stepper .careback-minus {
	border-right: 1px solid var(--careback-border);
}
.careback-stepper .careback-plus {
	border-left: 1px solid var(--careback-border);
}
.careback-stepper .careback-qty {
	width: 46px;
	height: 38px;
	min-height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
	background: #fff;
	color: var(--careback-text);
	font: inherit;
	font-size: 14px;
	-moz-appearance: textfield;
}
/* Remove the browser's native number spinners — we own the +/- buttons. */
.careback-stepper .careback-qty::-webkit-outer-spin-button,
.careback-stepper .careback-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* If a theme injects its own +/- controls (e.g. Astra's ast-qty-placeholder),
   hide them so the row never shows a double stepper. */
.careback-stepper .ast-qty-placeholder,
.careback-item .ast-qty-placeholder {
	display: none !important;
}
@media (max-width: 767px) {
	.careback-stepper .careback-qty {
		font-size: 16px; /* prevent the iOS zoom-on-focus jump */
	}
}

.careback-existing{margin:6px 0 0;padding-left:18px}

/* Per-unit rows: one line per purchased unit, claimed ones shown as unavailable. */
.careback-line fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.careback-line legend {
	padding: 0;
	font-weight: 500;
}

.careback-units {
	margin: 8px 0 0;
	padding: 0 0 0 4px;
	list-style: none;
}

.careback-unit {
	margin: 0 0 4px;
}

/* Claimed units are muted, never red: red reads as refusal, and a unit already
   in a request is the normal course of events. */
.careback-unit.is-claimed,
.careback-item.is-claimed {
	color: #6a6a6a;
}

.careback-unit.is-claimed .careback-choice,
.careback-item.is-claimed .careback-choice {
	cursor: not-allowed;
}

/* A unit in another request that the statutory route may still be filed on
   reads as selectable while that route is picked. */
.careback-unit.is-withdrawable:not(.is-claimed) .careback-choice {
	cursor: pointer;
}

.careback-unit-note {
	font-size: 12px;
	color: var(--careback-muted);
	font-weight: 400;
}

/* A line already requested reads as any other (the designer's review, M2):
   its name, its details under it, the note under those, all where the name
   starts. A unit of a line: its name, then the note after a space (S8). */
.careback-item-text > .careback-unit-note {
	display: block;
	margin-top: 2px;
	line-height: 1.45;
}

.careback-unit-text {
	min-width: 0;
}

.careback-units-note {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #6a6a6a;
}

/* The three routes at the top of step two. */
.careback-routes {
	margin: 0 0 22px;
}

.careback-route {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	margin: 0 0 8px;
	border: 1px solid #e2e2e2;
	cursor: pointer;
	transition: border-color .12s ease, background-color .12s ease;
}

.careback-route:hover {
	border-color: #b8b8b8;
}

/* Custom monochrome radio, matching the checkboxes above: white circle, solid
   fill when checked. The checkboxes were given this treatment and the radio was
   not, so the one control left on the page still drew itself in the browser's
   blue. Round rather than square, so the two remain visibly different choices:
   one option of several against as many as you like. */
.careback-route input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 2px 0 0;
	flex: 0 0 auto;
	border: 1px solid var(--careback-text);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	position: relative;
	/* Kept for anything that does not honour the appearance reset above. */
	accent-color: var(--careback-text);
}

.careback-route input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--careback-text);
}

.careback-route input[type="radio"]:focus-visible {
	outline: 2px solid var(--careback-text);
	outline-offset: 2px;
}

.careback-route.is-disabled input[type="radio"] {
	border-color: var(--careback-border);
	cursor: default;
}

.careback-route-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.careback-route-label {
	font-size: 14px;
	line-height: 1.4;
}

.careback-route-hint {
	font-size: 12px;
	line-height: 1.5;
	color: #6a6a6a;
}

/* A closed route: its radio and its name grey, the reason it is closed in the
   hint's own grey — an explanation to read, at 4.5:1 or more (WCAG 1.4.3),
   not a control that is off. */
.careback-route.is-disabled {
	cursor: default;
}

.careback-route.is-disabled input[type="radio"] {
	background: #f3f3f3;
}

.careback-route.is-disabled .careback-route-label {
	color: #8a8a8a;
}

.careback-route.is-disabled .careback-route-hint {
	color: var(--careback-muted);
}

.careback-route.is-disabled:hover {
	border-color: #e2e2e2;
}

/* Shown in place of the whole form when no route can be filed. */
.careback-route-none {
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	background: #fafafa;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
 * Telling us the parcel is on its way.
 *
 * Sits inside the list of requests already filed, on a statutory withdrawal
 * that is still waiting. Deliberately quiet: it is an offer, not a demand —
 * the customer owes us nothing here, and what they type simply lets us pay
 * them back without waiting for the parcel to arrive.
 * ----------------------------------------------------------------------- */
.careback-dispatch {
	display: block;
	margin: 8px 0 4px;
	padding: 10px 12px;
	border-left: 2px solid currentColor;
	background: rgba( 0, 0, 0, .02 );
}

.careback-dispatch-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.careback-dispatch-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.careback-dispatch-input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 7px 10px;
	border: 1px solid currentColor;
	background: #fff;
	font: inherit;
}

.careback-dispatch-send {
	padding: 7px 16px;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.careback-dispatch-send:hover,
.careback-dispatch-send:focus {
	background: currentColor;
}

.careback-dispatch-send[disabled] {
	opacity: .5;
	cursor: default;
}

.careback-dispatch-hint {
	display: block;
	margin-top: 6px;
	opacity: .75;
	line-height: 1.4;
}

.careback-dispatch-said:not(:empty),
.careback-dispatch-done {
	display: block;
	margin-top: 6px;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
 * The three steps (N-04): which step the customer is on, the check step and
 * the done screen; the returns policy (N-12, N-13) and the details of an item
 * (N-16).
 * ----------------------------------------------------------------------- */

/* Read out, not shown: the heading of a step without a visible one, and the
   line naming the step when it changes. */
.careback-portal .careback-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.careback-progress {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.4;
	color: var(--careback-muted);
	border-bottom: 1px solid var(--careback-border);
}

.careback-progress[hidden],
.careback-progress-short[hidden],
.careback-done[hidden] {
	display: none !important;
}

.careback-progress li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 18px -1px 0;
	padding: 0 18px 10px 0;
	border-bottom: 2px solid transparent;
}

.careback-progress li.is-current {
	color: var(--careback-text);
	font-weight: 600;
	border-bottom-color: var(--careback-text);
}

.careback-progress li.is-done {
	color: var(--careback-text);
}

.careback-progress-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 600;
}

.careback-progress li.is-current .careback-progress-n {
	background: var(--careback-text);
	border-color: var(--careback-text);
	color: #fff;
}

.careback-progress li.is-done .careback-progress-n::before {
	content: "\2713";
}

.careback-progress li.is-done .careback-progress-n span {
	display: none;
}

.careback-progress-short {
	display: none;
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 600;
}

/* The order the customer acts on. */
.careback-order-line {
	margin: 0 0 18px;
	font-size: 14px;
}

/* N-114: the link to the model withdrawal form, under the contact line. */
.careback-model-link {
	margin: 8px 0 0;
	font-size: 14px;
}

.careback-model-link a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* N-13: the link to the shop's returns policy, under the choice of route. */
.careback-policy {
	margin: -8px 0 22px;
	font-size: 14px;
}

.careback-policy a,
.careback-consent a,
.careback-noscript-policy a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.careback-ext {
	display: inline-block;
	margin-left: 3px;
	font-size: 12px;
}

.careback-noscript-policy {
	margin: 0 0 8px;
	font-size: 14px;
}

/* One route on offer, stated rather than chosen. */
.careback-route-single {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.5;
}

/* N-16: the details of a variation, each on a line of its own under the name,
   aligned with the name (not with the box). */
.careback-choice.careback-choice-top {
	align-items: flex-start;
}

.careback-choice-top input[type="checkbox"] {
	margin-top: 4px !important;
}

.careback-item-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.careback-item-meta {
	display: block;
	font-size: 14px;
	line-height: 1.45;
	color: #555;
	font-weight: 400;
}

/* N-12: the consent with the returns policy, never ticked beforehand. */
.careback-consent {
	margin: 22px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--careback-border);
}

.careback-consent[hidden] {
	display: none;
}

.careback-consent .careback-choice {
	margin: 0;
	align-items: flex-start;
}

.careback-consent .careback-choice input[type="checkbox"] {
	margin-top: 3px;
}

.careback-consent.is-invalid {
	border-color: #c0392b;
}

.careback-field-error {
	display: block;
	margin: 8px 0 0;
	font-size: 13px;
	color: #8a1f11;
}

.careback-consent .careback-field-error {
	margin-left: 28px;
}

.careback-field-error[hidden] {
	display: none;
}

/* The errors of step two stand beside what they are about (the designer's
   review, S1 and S2): the item list's under the list, a field's under it. */
.careback-items-error {
	margin: -10px 0 18px;
}

.careback-fields > .careback-field-error {
	flex: 1 1 100%;
	margin: -10px 0 0;
}

/* The buttons of a step: the main one first; side by side, a column on a phone. */
.careback-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 22px;
}

.careback-actions .careback-submit {
	margin-top: 0;
}

/* N-04: the check step. */
.careback-review-title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
}

.careback-review-lead {
	margin: 0 0 18px;
	font-size: 15px;
}

.careback-summary {
	margin: 0 0 18px;
	border: 1px solid var(--careback-border);
}

.careback-summary > div {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: 12px;
	padding: 12px 16px;
	border-top: 1px solid var(--careback-border);
}

.careback-summary > div:first-child {
	border-top: 0;
}

.careback-summary dt {
	margin: 0;
	font-size: 13px;
	color: var(--careback-muted);
}

.careback-summary dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	overflow-wrap: anywhere;
	white-space: pre-line;
}

.careback-summary dd input {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--careback-border);
	border-radius: 0;
	box-sizing: border-box;
	font: inherit;
	white-space: normal;
}

.careback-summary dd input[aria-invalid="true"] {
	border-color: #c0392b;
}

.careback-summary-items {
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: normal;
}

.careback-summary-items li + li {
	margin-top: 10px;
}

.careback-summary-items .careback-item-name {
	display: block;
}

.careback-review-note {
	margin: 0;
	font-size: 14px;
	color: var(--careback-muted);
}

/* The done screen. */
.careback-done {
	margin-top: 0;
}

.careback-done p {
	margin: 0 0 6px;
}

.careback-done .careback-done-title {
	font-weight: 600;
	font-size: 17px;
}

@media (max-width: 600px) {
	.careback-progress {
		display: none;
	}

	.careback-progress-short {
		display: block;
	}

	.careback-summary > div {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.careback-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.careback-actions .careback-submit {
		width: 100%;
	}
}