/* 24Rent Forms — shared layout, with site-overridable brand styles below. */

.r24f {
	display: grid;
	gap: 1rem;
	max-width: 44rem;
}

.r24f-field {
	display: grid;
	gap: 0.3rem;
	margin: 0;
}

/* A conditional field starts `hidden`, but the browser's own [hidden] rule
   loses to any author `display`, including `.r24f-field` above, so private
   customers saw every company and e-invoice field. Hidden must win. */
.r24f [hidden] {
	display: none !important;
}

.r24f-field label,
.r24f-label {
	font-weight: 600;
}

.r24f input:not([type="checkbox"]):not([type="radio"]),
.r24f select,
.r24f textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.55rem 0.65rem;
	border: 1px solid #b9b3aa;
	border-radius: 4px;
	font: inherit;
}

.r24f textarea {
	min-height: 6rem;
}

.r24f [aria-invalid="true"] {
	border-color: #b3261e;
	outline: 1px solid #b3261e;
}

.r24f-req {
	color: #b3261e;
}

.r24f-help {
	color: #5f5a52;
}

.r24f-error {
	color: #b3261e;
	font-weight: 600;
}

.r24f-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
}

.r24f-choice {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.r24f-choice label {
	font-weight: normal;
}

/* The minileasing group offers: one real radio inside each selectable card. */
.r24f-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 0.75rem;
}

.r24f-card {
	display: grid;
	align-content: start;
	gap: 0.4rem;
	min-width: 0;
	padding: 0.75rem;
	border: 1px solid #b9b3aa;
	border-radius: 6px;
	background: #fff;
	font-weight: normal;
	cursor: pointer;
}

.r24f-card:has(input:checked) {
	border-color: #e07b00;
	background: #fff8ef;
	box-shadow: 0 0 0 1px #e07b00;
}

.r24f-card:has(input:focus-visible) {
	outline: 3px solid #1b5e9a;
	outline-offset: 2px;
}

.r24f-card img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.r24f-card-group {
	font-weight: 700;
}

.r24f-card-monthly {
	font-weight: 600;
}

.r24f-card-km {
	color: #5f5a52;
}

/* Leasing extras: one keyboard-friendly checkbox in each selectable row. */
.r24f-toggles {
	display: grid;
	gap: 0.6rem;
}

.r24f-toggle {
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr) auto;
	align-items: start;
	gap: 0.25rem 0.65rem;
	padding: 0.8rem;
	border: 1px solid #d8d2c8;
	border-radius: 6px;
	background: #fff;
	font-weight: normal;
	cursor: pointer;
}

.r24f-toggle input[type="checkbox"] {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0.1rem 0 0;
	accent-color: #e07b00;
}

.r24f-toggle-title {
	grid-column: 2;
	font-weight: 700;
}

.r24f-toggle-price {
	grid-column: 3;
	font-weight: 600;
	white-space: nowrap;
}

.r24f-toggle-description {
	grid-column: 2 / 4;
	color: #5f5a52;
}

.r24f-toggle:has(input:checked) {
	border-color: #e07b00;
	background: #fff8ef;
	box-shadow: 0 0 0 1px #e07b00;
}

.r24f-toggle:has(input:focus-visible) {
	outline: 3px solid #1b5e9a;
	outline-offset: 2px;
}

@media (max-width: 28rem) {
	.r24f-toggle {
		grid-template-columns: 1.25rem minmax(0, 1fr);
	}

	.r24f-toggle-price,
	.r24f-toggle-description {
		grid-column: 2;
	}
}

/* Remote options: a list fetched from api4 — one choice per line, since each carries a price. */
.r24f-remote .r24f-choices {
	flex-direction: column;
	align-items: flex-start;
}

.r24f-remote .r24f-choice {
	align-items: baseline;
}

.r24f-remote-body[aria-busy="true"] {
	opacity: 0.55;
}

.r24f-pending,
.r24f-empty,
.r24f-remote-error {
	margin: 0;
	color: #5f5a52;
}

.r24f-remote-error {
	color: #b3261e;
}

.r24f-retry {
	margin-left: 0.4rem;
	padding: 0.2rem 0.6rem;
	border: 1px solid #8a827a;
	border-radius: 4px;
	background: transparent;
	font: inherit;
	cursor: pointer;
}

/* Repeater: one bordered card per requested vehicle type. */
.r24f-repeater {
	border: 1px solid #d8d2c8;
	border-radius: 6px;
	padding: 1rem;
	margin: 0;
}

.r24f-repeater legend {
	font-weight: 700;
	padding: 0 0.3rem;
}

.r24f-rows {
	display: grid;
	gap: 0.8rem;
}

.r24f-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0.6rem 0.8rem;
	padding: 0.8rem;
	background: #f7f4ef;
	border-radius: 4px;
}

.r24f-add,
.r24f-remove {
	justify-self: start;
	margin-top: 0.6rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid #8a827a;
	border-radius: 4px;
	background: transparent;
	font: inherit;
	cursor: pointer;
}

.r24f-submit {
	justify-self: start;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: 4px;
	background: #e07b00;
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.r24f-submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.r24f-status:empty {
	display: none;
}

/* The honeypot: present in the DOM for bots, invisible and unreachable for people. */
.r24f-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.r24f-summary dt {
	font-weight: 600;
}

.r24f-summary dd {
	margin: 0 0 0.5rem;
}

/* Steps (0.3.0). Without the script every step shows, as one long form. */
.r24f-step {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.r24f-step-title {
	padding: 0;
	margin-bottom: 0.25rem;
	font-weight: 600;
}

.r24f-step-title:focus {
	outline: none;
}

.r24f-nav {
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
}

.r24f-nav .r24f-next {
	margin-left: auto;
}

.r24f-review {
	padding: 0.75rem 1rem;
	border: 1px solid currentColor;
	border-radius: 4px;
}

.r24f-review-title {
	margin: 0 0 0.5rem;
	font-weight: 600;
}

.r24f-review dl {
	display: grid;
	grid-template-columns: minmax(8rem, max-content) 1fr;
	gap: 0.25rem 1rem;
	margin: 0;
}

.r24f-review dt {
	opacity: 0.75;
}

.r24f-review dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* A row with a start and an end (B2B vehicles): what, then start on one line,
   end and the calculated length on the next, extras, then notes full width.
   Placement is by field name, so any profile with these names gets it. */
.r24f-row {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: end;
}

.r24f-row .r24f-f-vehicle_group_id,
.r24f-row .r24f-f-start_date,
.r24f-row .r24f-f-end_date {
	grid-column: 1 / span 2;
}

.r24f-row .r24f-f-quantity,
.r24f-row .r24f-f-start_time,
.r24f-row .r24f-f-end_time {
	grid-column: 3;
}

.r24f-row .r24f-duration {
	grid-column: 4;
	margin: 0;
	padding-bottom: 0.6rem;
	font-weight: 600;
}

.r24f-row .r24f-f-notes,
.r24f-row .r24f-remove {
	grid-column: 1 / -1;
}

@media (max-width: 36rem) {
	.r24f-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.r24f-row .r24f-f-vehicle_group_id,
	.r24f-row .r24f-f-start_date,
	.r24f-row .r24f-f-end_date {
		grid-column: 1;
	}

	.r24f-row .r24f-f-quantity,
	.r24f-row .r24f-f-start_time,
	.r24f-row .r24f-f-end_time {
		grid-column: 2;
	}

	.r24f-row .r24f-duration {
		grid-column: 1 / -1;
		padding-bottom: 0;
	}
}

/* Shared form appearance, based on Elina's 24Leasing makeover (2026-10-08).
 * Common controls and step cards serve minileasing, B2B and RedGo.
 * The host supplies Nunito; no additional font request is made by the plugin.
 * Site CSS may override the --r24f-* variables; see README.md.
 */
/* 1. Font + full column width */
.r24f {
	font-family: var(--r24f-font-family, Nunito, Helvetica, Arial, sans-serif);
	color: var(--r24f-ink, #1B1E22);
	max-width: none;
	gap: 1.25rem;
}

/* 5. Each step is a white card with a real heading */
.r24f .r24f-step {
	gap: 1.1rem;
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--r24f-line, #E7E3DB);
	border-radius: var(--r24f-radius, 14px);
}

.r24f .r24f-step-title {
	float: left; /* takes the legend off the fieldset border */
	width: 100%;
	margin: 0 0 0.25rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid #F0EDE7;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--r24f-ink, #1B1E22);
}

/* 6. Short fields side by side on wider screens */
@media (min-width: 40rem) {
	.r24f .r24f-step {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1rem;
		align-items: start;
	}

	.r24f .r24f-step > * {
		grid-column: 1 / -1;
	}

	.r24f .r24f-step > .r24f-f-start_date,
	.r24f .r24f-step > .r24f-f-contract_months,
	.r24f .r24f-step > .r24f-f-contact_firstname,
	.r24f .r24f-step > .r24f-f-contact_phone,
	.r24f .r24f-step > .r24f-f-firstname,
	.r24f .r24f-step > .r24f-f-phone,
	.r24f .r24f-step > .r24f-f-postcode {
		grid-column: 1;
	}

	.r24f .r24f-step > .r24f-f-start_time,
	.r24f .r24f-step > .r24f-f-km_per_month,
	.r24f .r24f-step > .r24f-f-contact_lastname,
	.r24f .r24f-step > .r24f-f-contact_email,
	.r24f .r24f-step > .r24f-f-lastname,
	.r24f .r24f-step > .r24f-f-email,
	.r24f .r24f-step > .r24f-f-city {
		grid-column: 2;
	}
}

/* 4. Labels, help text, required mark */
.r24f .r24f-field label,
.r24f .r24f-label {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--r24f-ink, #1B1E22);
}

/* Long acceptance labels wrap beside a checkbox aligned with their first line. */
.r24f-minileasing .r24f-f-terms_accepted .r24f-choice,
.r24f-minileasing .r24f-f-fair_accepted .r24f-choice {
	align-items: flex-start;
}

.r24f-minileasing .r24f-f-terms_accepted input,
.r24f-minileasing .r24f-f-fair_accepted input {
	flex-shrink: 0;
	margin-top: 0.2rem;
}

.r24f-minileasing .r24f-f-terms_accepted label,
.r24f-minileasing .r24f-f-fair_accepted label {
	font-weight: 400;
	line-height: 1.5;
}

.r24f .r24f-help {
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--r24f-muted, #646B73);
}

.r24f .r24f-req {
	color: var(--r24f-muted, #646B73); /* 8. red is kept for errors only */
}

/* 4. Inputs */
.r24f input:not([type="checkbox"]):not([type="radio"]),
.r24f select,
.r24f textarea {
	min-height: 46px;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--r24f-input-border, #E0DCD3);
	border-radius: 9px;
	background-color: #fff;
	color: var(--r24f-ink, #1B1E22);
	box-shadow: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.r24f select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B1E22' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
}

.r24f input:not([type="checkbox"]):not([type="radio"]):hover,
.r24f select:hover {
	border-color: #C7C2B7;
}

.r24f input:not([type="checkbox"]):not([type="radio"]):focus,
.r24f select:focus,
.r24f textarea:focus {
	border-color: var(--r24f-secondary, #1F3A5F);
	box-shadow: 0 0 0 3px var(--r24f-focus-ring, rgba(31, 58, 95, 0.22));
	outline: none;
}

/* 7. Car group cards */
.r24f-minileasing .r24f-cards {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: 1rem;
}

.r24f-minileasing .r24f-card {
	position: relative;
	gap: 0.2rem;
	padding: 0 0 1.1rem;
	overflow: hidden;
	border: 1px solid var(--r24f-line, #E7E3DB);
	border-radius: var(--r24f-radius, 14px);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.r24f-minileasing .r24f-card:hover {
	border-color: #C7C2B7;
}

/* The radio stays in the page for keyboards and screen readers, but is not drawn. */
.r24f-minileasing .r24f-card input[type="radio"] {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	width: auto; /* the theme stretches every input to 100% */
	margin: 0;
	opacity: 0;
}

.r24f-minileasing .r24f-card img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0;
	margin-bottom: 0.6rem;
}

.r24f-minileasing .r24f-card > span,
.r24f-minileasing .r24f-card > small {
	padding: 0 1rem;
}

.r24f-minileasing .r24f-card-group {
	font-size: 1.05rem;
	font-weight: 800;
}

.r24f-minileasing .r24f-card-example {
	font-size: 0.85rem;
	color: var(--r24f-muted, #646B73);
}

.r24f-minileasing .r24f-card-monthly {
	margin-top: 0.5rem;
	padding-top: 0.6rem !important;
	border-top: 1px solid #F0EDE7;
	font-size: 1.3rem;
	font-weight: 800;
}

.r24f-minileasing .r24f-card-contract,
.r24f-minileasing .r24f-card-km {
	font-size: 0.8125rem;
	color: var(--r24f-muted, #646B73);
}

.r24f-minileasing .r24f-card:has(input:checked) {
	border-color: var(--r24f-accent, #FDB022);
	background: var(--r24f-selected-background, #FFFCF5);
	box-shadow: 0 0 0 1px var(--r24f-accent, #FDB022);
}

.r24f-minileasing .r24f-card:has(input:checked)::after {
	content: "\2713  Valittu";
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	padding: 0.25rem 0.65rem;
	border-radius: 100px;
	background: var(--r24f-accent, #FDB022);
	color: var(--r24f-ink, #1B1E22);
	font-size: 0.75rem;
	font-weight: 800;
}

.r24f-minileasing .r24f-card:has(input:focus-visible) {
	outline: 3px solid var(--r24f-secondary, #1F3A5F);
}

/* 3. Extras: same amber selection */
.r24f-minileasing .r24f-toggle {
	border-color: var(--r24f-line, #E7E3DB);
	border-radius: 12px;
}

.r24f-minileasing .r24f-toggle:has(input:checked) {
	border-color: var(--r24f-accent, #FDB022);
	background: var(--r24f-selected-background, #FFFCF5);
	box-shadow: 0 0 0 1px var(--r24f-accent, #FDB022);
}

.r24f input[type="checkbox"],
.r24f input[type="radio"] {
	accent-color: var(--r24f-accent-hover, #E89A0A);
}

/* 2. Buttons: brand amber, no theme shadow */
.r24f .r24f-next,
.r24f .r24f-submit,
.r24f .r24f-add,
.r24f .r24f-remove,
.r24f .r24f-retry,
.r24f .r24f-back {
	min-height: 48px;
	padding: 0.8rem 1.75rem;
	border-radius: 10px;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
}

.r24f .r24f-next,
.r24f .r24f-submit {
	border: 0;
	background: var(--r24f-accent, #FDB022);
	color: var(--r24f-ink, #1B1E22);
}

.r24f .r24f-next:hover,
.r24f .r24f-next:focus,
.r24f .r24f-submit:hover,
.r24f .r24f-submit:focus {
	background: var(--r24f-accent-hover, #E89A0A);
	color: var(--r24f-ink, #1B1E22);
	box-shadow: none;
}

/* Secondary actions: navy outline */
.r24f .r24f-add,
.r24f .r24f-remove,
.r24f .r24f-retry,
.r24f .r24f-back {
	border: 1.5px solid var(--r24f-secondary, #1F3A5F);
	background: #fff;
	color: var(--r24f-secondary, #1F3A5F);
}

.r24f .r24f-add:hover,
.r24f .r24f-add:focus,
.r24f .r24f-remove:hover,
.r24f .r24f-remove:focus,
.r24f .r24f-retry:hover,
.r24f .r24f-retry:focus,
.r24f .r24f-back:hover,
.r24f .r24f-back:focus {
	border-color: var(--r24f-secondary-hover, #172D4A);
	background: var(--r24f-secondary-tint, #E8EEF5);
	color: var(--r24f-secondary-hover, #172D4A);
	box-shadow: none;
}

.r24f .r24f-next:focus-visible,
.r24f .r24f-submit:focus-visible,
.r24f .r24f-add:focus-visible,
.r24f .r24f-remove:focus-visible,
.r24f .r24f-retry:focus-visible,
.r24f .r24f-back:focus-visible {
	outline: 3px solid var(--r24f-secondary, #1F3A5F);
	outline-offset: 2px;
}

/* Step 3 review */
.r24f .r24f-review {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--r24f-line, #E7E3DB);
	border-radius: 12px;
	background: #FBFAF8;
}

.r24f .r24f-review dt {
	opacity: 1;
	color: var(--r24f-muted, #646B73);
}

/* Phones: full-width buttons, primary on top */
@media (max-width: 39.999rem) {
	.r24f .r24f-step {
		padding: 1.25rem;
	}

	.r24f .r24f-nav {
		flex-direction: column-reverse;
	}

	.r24f .r24f-nav button,
	.r24f > .r24f-submit {
		width: 100%;
		margin-left: 0;
	}

	/* Compact rows: picture left, every price detail kept readable on the right. */
	.r24f-minileasing .r24f-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
	}

	.r24f-minileasing .r24f-card {
		grid-template-columns: 38% minmax(0, 1fr);
		grid-template-rows: repeat(5, auto);
		column-gap: 0.85rem;
		align-content: center;
		padding: 0;
	}

	.r24f-minileasing .r24f-card img {
		grid-column: 1;
		grid-row: 1 / -1;
		height: 100%;
		min-height: 112px;
		aspect-ratio: auto;
		margin: 0;
	}

	.r24f-minileasing .r24f-card > span,
	.r24f-minileasing .r24f-card > small {
		grid-column: 2;
		padding: 0 0.75rem 0 0;
	}

	.r24f-minileasing .r24f-card-group {
		padding-top: 0.75rem !important;
		font-size: 0.98rem;
	}

	.r24f-minileasing .r24f-card-example {
		font-size: 0.8rem;
	}

	.r24f-minileasing .r24f-card-monthly {
		margin-top: 0.3rem;
		padding-top: 0.35rem !important;
		font-size: 1.1rem;
	}

	.r24f-minileasing .r24f-card > :last-child {
		padding-bottom: 0.75rem !important;
	}

	.r24f-minileasing .r24f-card:has(input:checked)::after {
		top: 0.5rem;
		right: auto;
		left: 0.5rem;
	}
}

/* Keep theme-wide button hover shadows and focus styles out of the form. */
.r24f .r24f-nav button:disabled {
	cursor: progress;
}

/* Images are optional in api4's offers. Keep a text-only card full width and
   leave space for the selected badge, instead of an empty image column. */
.r24f-minileasing .r24f-card:not(:has(img)) {
	padding-top: 2.75rem;
}

.r24f-minileasing .r24f-toggle:has(input:focus-visible) {
	outline-color: var(--r24f-secondary, #1F3A5F);
}

/* These rules follow the input/focus makeover so validation stays visible. */
.r24f input[aria-invalid="true"],
.r24f input:not([type="checkbox"]):not([type="radio"])[aria-invalid="true"],
.r24f select[aria-invalid="true"],
.r24f textarea[aria-invalid="true"],
.r24f-minileasing .r24f-card:has(input[aria-invalid="true"]) {
	border-color: #b3261e;
	outline: 1px solid #b3261e;
}

@media (max-width: 39.999rem) {
	.r24f-minileasing .r24f-card-group { grid-row: 1; }
	.r24f-minileasing .r24f-card-example { grid-row: 2; }
	.r24f-minileasing .r24f-card-monthly { grid-row: 3; }
	.r24f-minileasing .r24f-card-km { grid-row: 4; }
	.r24f-minileasing .r24f-card-contract { grid-row: 5; }

	.r24f-minileasing .r24f-card:not(:has(img)) {
		grid-template-columns: minmax(0, 1fr);
		padding: 2rem 0 0;
	}

	.r24f-minileasing .r24f-card:not(:has(img)) > span,
	.r24f-minileasing .r24f-card:not(:has(img)) > small {
		grid-column: 1;
		padding-left: 0.75rem;
	}

	.r24f .r24f-review dl {
		grid-template-columns: minmax(0, 1fr);
	}

	.r24f .r24f-review dd {
		margin-bottom: 0.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.r24f input,
	.r24f select,
	.r24f textarea,
	.r24f-minileasing .r24f-card,
	.r24f .r24f-nav button {
		transition: none;
	}
}

/* RedGo is intentionally a single-page form: the form itself is its white card. */
.r24f-redgo {
	box-sizing: border-box;
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--r24f-line, #E7E3DB);
	border-radius: var(--r24f-radius, 14px);
}

.r24f .r24f-field {
	min-width: 0;
}

/* B2B's vehicle repeater uses the existing field order and duration output. */
.r24f-b2b .r24f-repeater {
	min-width: 0;
	padding: 0;
	border: 0;
}

.r24f-b2b .r24f-repeater legend {
	padding: 0;
	font-weight: 800;
}

.r24f-b2b .r24f-rows {
	margin-top: 0.75rem;
	gap: 1rem;
}

.r24f-b2b .r24f-row {
	padding: 1rem;
	gap: 0.8rem;
	border: 1px solid var(--r24f-line, #E7E3DB);
	border-radius: 12px;
	background: #FBFAF8;
}

.r24f-b2b .r24f-choice input,
.r24f-redgo .r24f-choice input {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	flex-shrink: 0;
}

.r24f-b2b .r24f-choice input:focus-visible,
.r24f-redgo .r24f-choice input:focus-visible {
	outline: 3px solid var(--r24f-secondary, #1F3A5F);
	outline-offset: 2px;
}

@media (min-width: 40rem) {
	.r24f-redgo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1rem;
		align-items: start;
	}

	.r24f-redgo > * { grid-column: 1 / -1; }

	.r24f-redgo > .r24f-f-vehicle_group_id,
	.r24f-redgo > .r24f-f-start_date,
	.r24f-redgo > .r24f-f-firstname,
	.r24f-redgo > .r24f-f-phone,
	.r24f-redgo > .r24f-f-postcode { grid-column: 1; }

	.r24f-redgo > .r24f-f-duration_hours,
	.r24f-redgo > .r24f-f-start_time,
	.r24f-redgo > .r24f-f-lastname,
	.r24f-redgo > .r24f-f-email,
	.r24f-redgo > .r24f-f-city { grid-column: 2; }
}

@media (max-width: 39.999rem) {
	.r24f-redgo { padding: 1.25rem; }

	/* A date picker and a time selector need more than half a narrow phone row. */
	.r24f-b2b .r24f-row { grid-template-columns: minmax(0, 1fr); }
	.r24f-b2b .r24f-row > * { grid-column: 1; }

	.r24f .r24f-add,
	.r24f .r24f-remove,
	.r24f .r24f-retry {
		box-sizing: border-box;
		width: 100%;
		margin-left: 0;
	}
}

/* The thank-you replaces the form, so this link does not depend on .r24f. */
.r24f-done .r24f-pay {
	display: inline-block;
	padding: 0.8rem 1.75rem;
	border-radius: 10px;
	background: var(--r24f-accent, #FDB022);
	color: var(--r24f-ink, #1B1E22);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.r24f-done .r24f-pay:hover,
.r24f-done .r24f-pay:focus {
	background: var(--r24f-accent-hover, #E89A0A);
	color: var(--r24f-ink, #1B1E22);
}

.r24f-done .r24f-pay:focus-visible {
	outline: 3px solid var(--r24f-secondary, #1F3A5F);
	outline-offset: 3px;
}