/* Booking form (plugin markup) and contact form styles. */

/* Honeypot: must stay hidden wherever a form uses it.
   Clipped where it sits, rather than pushed off the side with a large negative
   offset. The negative offset is the usual trick, but it also leaves an element
   sitting outside the page box, and an element outside the page box is what
   turns the document into something the visitor can swipe sideways. Clipping
   puts nothing outside the page and is the same hiding used by
   .cr-screen-reader-text. */
.cr-hp {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.cr-booking-page__form {
	max-width: 48rem;
	margin-top: 2rem;
}

/* --- Form container --------------------------------------------------------- */

/* Padding is edge to edge by default, for a phone. The roomier value lives in
   the min-width query at the end of this file. */
.car-rental-booking {
	container-type: inline-size;
	padding: 1rem;
	background-color: var(--cr-white);
	border: 1px solid var(--cr-border);
	border-radius: 0.5rem;
}

/* In the vehicle page sidebar the panel already provides the box. */
.cr-vehicle-single__booking .car-rental-booking {
	padding: 0;
	background: transparent;
	border: 0;
}

/* --- The vehicle a scoped form has locked in ---------------------------------- */

/* A hidden input is invisible, so this is the only thing telling the guest
   which car the form is about. It is a panel rather than a row of text because
   the photo is the part they recognise.

   Stacked by default: a phone is narrower than the photo, so putting them side
   by side would squeeze the name into a column of single letters. The row
   layout is the enhancement, further down. */
.car-rental-booking__selected {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	padding: 0.75rem;
	background-color: var(--cr-neutral-light);
	border: 1px solid var(--cr-border);
	border-radius: 0.375rem;
}

.car-rental-booking__selected-media {
	flex: 0 0 auto;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 0.25rem;
	background-color: var(--cr-primary-light);
}

.car-rental-booking__selected-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.car-rental-booking__selected-body {
	flex: 1 1 auto;
	min-width: 0;
}

.car-rental-booking__selected-label {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cr-text-muted);
}

.car-rental-booking__selected-name {
	margin: 0.125rem 0 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cr-primary-dark);
	overflow-wrap: break-word;
}

.car-rental-booking__selected-name a {
	color: inherit;
	text-decoration: none;
}

.car-rental-booking__selected-name a:hover,
.car-rental-booking__selected-name a:focus {
	color: var(--cr-primary);
	text-decoration: underline;
}

.car-rental-booking__selected-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.875rem;
	margin: 0.375rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--cr-font-size-sm);
	color: var(--cr-text-muted);
}

/* The list is a flat run of values, so a separator reads better than bullets. */
.car-rental-booking__selected-specs li + li::before {
	content: "\00b7";
	margin-right: 0.875rem;
	color: var(--cr-border);
}

.car-rental-booking__selected-price {
	margin: 0.375rem 0 0;
	font-size: var(--cr-font-size-sm);
	font-weight: 600;
	color: var(--cr-text);
}

/* The row layout, once there is room for it. container-type is set on
   .car-rental-booking, so this is the container's width, not the viewport's:
   the same rule serves the standalone form and the vehicle page sidebar. */
@container (min-width: 22rem) {
	.car-rental-booking__selected {
		flex-direction: row;
		align-items: center;
	}

	.car-rental-booking__selected-media {
		width: 5.5rem;
	}
}

/* --- The vehicle picker --------------------------------------------------------- */

/*
 * A native <select> cannot show a picture, so this is a listbox of its own with
 * the <select> kept alongside it as the thing that actually submits. The select
 * is hidden only once the script has taken over, so without JavaScript the
 * guest gets a working select rather than a button that does nothing.
 */
.car-rental-booking__picker {
	position: relative;
	margin-bottom: 1rem;
}

.car-rental-booking__picker-button,
.car-rental-booking__picker-list {
	display: none;
}

/* The script adds this, and only then, so the two controls are never both live. */
/* Clipped in place for the same reason as .cr-hp above: the native select stays
   in the form so it keeps submitting its value, without anything of it being
   parked outside the page where it would widen the document. */
.car-rental-booking__picker.is-enhanced .car-rental-booking__picker-select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
}

.car-rental-booking__picker.is-enhanced .car-rental-booking__picker-button {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	/* A thumb-sized target, not a line of text. */
	min-height: 3rem;
	padding: 0.5rem 0.75rem;
	background-color: var(--cr-white);
	border: 1px solid var(--cr-border);
	border-radius: 0.375rem;
	color: var(--cr-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.car-rental-booking__picker-button:hover {
	border-color: var(--cr-primary);
}

.car-rental-booking__picker-button:focus-visible {
	outline: 2px solid var(--cr-primary);
	outline-offset: 2px;
}

.car-rental-booking__picker-thumb {
	flex: 0 0 auto;
	width: 3rem;
	height: 2rem;
	border-radius: 0.25rem;
	background-color: var(--cr-neutral-light);
	background-size: cover;
	background-position: center;
}

.car-rental-booking__picker-value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.car-rental-booking__picker-caret {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-top: 0.35rem solid var(--cr-text-muted);
	border-right: 0.3rem solid transparent;
	border-left: 0.3rem solid transparent;
	transition: transform 0.15s ease;
}

.car-rental-booking__picker-button[aria-expanded="true"] .car-rental-booking__picker-caret {
	transform: rotate(180deg);
}

.car-rental-booking__picker.is-enhanced .car-rental-booking__picker-list {
	position: absolute;
	z-index: 30;
	top: calc(100% + 0.25rem);
	left: 0;
	right: 0;
	display: block;
	/* A capped, scrollable list: a long fleet must not push the rest of the
	   form off the page, and on a phone it has to fit above the keyboard. The
	   cap is against the viewport, not the container, because the keyboard
	   shrinks the viewport and the list has to shrink with it. */
	max-height: min(16rem, 40vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: 0.25rem;
	list-style: none;
	background-color: var(--cr-white);
	border: 1px solid var(--cr-border);
	border-radius: 0.375rem;
	box-shadow: 0 0.5rem 1.5rem rgba(11, 46, 73, 0.18);
}

/* This has to out-specify the rule that turns the listbox on, not just the
   bare [hidden] the browser applies to a hidden attribute. The on rule counts
   three classes, so a two-part selector here would lose the cascade and the
   list would stay open after a car was picked. */
.car-rental-booking__picker.is-enhanced .car-rental-booking__picker-list[hidden] {
	display: none;
}

.car-rental-booking__picker-option {
	display: grid;
	/* On a phone the price drops under the name, because a price beside the
	   specs would leave the name a few characters wide. The photo, the name and
	   the price are the three things a reader needs, so the row keeps all three
	   and the wide layout below moves the price across rather than adding it. */
	grid-template-columns: 4.5rem 1fr;
	grid-template-areas:
		"image text"
		"image price";
	column-gap: 0.75rem;
	row-gap: 0.25rem;
	align-items: center;
	/* A row tall enough to tap without aiming. */
	min-height: 3.5rem;
	padding: 0.5rem;
	border-radius: 0.25rem;
	cursor: pointer;
}

.car-rental-booking__picker-option:hover,
.car-rental-booking__picker-option.is-active {
	background-color: var(--cr-primary-light);
}

.car-rental-booking__picker-option[aria-selected="true"] {
	background-color: var(--cr-primary-light);
	box-shadow: inset 0 0 0 2px var(--cr-primary);
}

.car-rental-booking__picker-image {
	grid-area: image;
	width: 100%;
	height: 3rem;
	border-radius: 0.25rem;
	object-fit: cover;
	background-color: var(--cr-neutral-light);
}

.car-rental-booking__picker-text {
	grid-area: text;
	min-width: 0;
}

.car-rental-booking__picker-name {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

.car-rental-booking__picker-specs {
	display: block;
	color: var(--cr-text-muted);
	font-size: var(--cr-font-size-sm);
	line-height: 1.3;
}

.car-rental-booking__picker-price {
	grid-area: price;
	justify-self: start;
	color: var(--cr-primary-dark);
	font-size: var(--cr-font-size-sm);
	font-weight: 700;
	white-space: nowrap;
}

/* Room for one row, once there is room for one row. */
@container (min-width: 26rem) {
	.car-rental-booking__picker-option {
		grid-template-columns: 4.5rem 1fr auto;
		grid-template-areas: "image text price";
		column-gap: 1rem;
		row-gap: 0;
	}

	.car-rental-booking__picker-price {
		justify-self: end;
	}
}

/* --- Sections ----------------------------------------------------------------- */

.car-rental-booking__section {
	min-width: 0;
	margin: 0 0 1.5rem;
	padding: 0 0 1.5rem;
	border: 0;
	border-bottom: 1px solid var(--cr-border);
}

.car-rental-booking__section:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.car-rental-booking__section legend {
	margin: 0 0 0.75rem;
	padding: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--cr-primary-dark);
}

.car-rental-booking__section > p {
	font-size: var(--cr-font-size-sm);
	color: var(--cr-text-muted);
}

.cr-booking-guest-note {
	padding: 0.75rem 1rem;
	background-color: var(--cr-primary-light);
	border-radius: 0.25rem;
	color: var(--cr-primary-dark);
}

/* --- Fields ------------------------------------------------------------------- */

.car-rental-booking__form label {
	display: block;
	margin: 0 0 0.25rem;
	font-size: var(--cr-font-size-sm);
	font-weight: 600;
	color: var(--cr-primary-dark);
}

.car-rental-booking__form input:not([type="checkbox"]),
.car-rental-booking__form select,
.car-rental-booking__form textarea {
	width: 100%;
	min-height: 3rem;
	margin-bottom: 1rem;
}

.car-rental-booking__form textarea {
	min-height: 6rem;
	resize: vertical;
}

.car-rental-booking__form input:focus,
.car-rental-booking__form select:focus,
.car-rental-booking__form textarea:focus {
	border-color: var(--cr-primary);
	box-shadow: 0 0 0 3px rgba(19, 70, 109, 0.15);
	outline: none;
}

/* Rows adapt to the form's own width (page vs. narrow sidebar). */
.car-rental-booking__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: 0 1rem;
}

.car-rental-booking__row input,
.car-rental-booking__row select {
	margin-bottom: 1rem;
}

/* --- Terms checkbox ------------------------------------------------------------- */

.car-rental-booking__section label[for="cr_terms"] {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-weight: 400;
	color: var(--cr-text);
}

.car-rental-booking__form input[type="checkbox"] {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	min-height: 0;
	margin: 0.125rem 0 0;
	padding: 0;
}

/* --- Submit ----------------------------------------------------------------------- */

.car-rental-booking__submit {
	margin: 1.5rem 0 0;
}

.car-rental-booking__button {
	width: 100%;
	min-height: 3.25rem;
	padding: 0 1.5rem;
	border: 1px solid var(--cr-primary);
	border-radius: 0.25rem;
	background-color: var(--cr-primary);
	color: var(--cr-white);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.car-rental-booking__button:hover,
.car-rental-booking__button:focus-visible {
	background-color: var(--cr-primary-dark);
}

@container (min-width: 36rem) {
	.car-rental-booking__button {
		width: auto;
		min-width: 16rem;
	}
}

/* --- Submitting state ------------------------------------------------------------ */

/* booking.js puts aria-busy on the button as it posts, and puts the original
   label back when the page comes back. The spinner is a pseudo-element rather
   than a span in the markup so that the script can rewrite the button's text
   with a single textContent assignment: a real child element would be wiped by
   that assignment and would need the script to know about it.

   The whole state hangs off aria-busy, so the label, the spinner and the
   disabled state can never disagree with one another. */
.car-rental-booking__button[aria-busy="true"] {
	cursor: progress;
}

.car-rental-booking__button[aria-busy="true"]::before {
	content: "";
	display: inline-block;
	/* Two border edges are left in the button colour and two are taken to the
	   page background, so what spins is an arc rather than a plain ring. The
	   gaps are the part that reads as movement. */
	width: 1em;
	height: 1em;
	margin-right: 0.5em;
	vertical-align: -0.125em;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--cr-white);
	border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
	.car-rental-booking__button[aria-busy="true"]::before {
		animation: cr-spin 0.7s linear infinite;
	}
}

/* A ring that is not turning, next to a button that still says "Processing…",
   reads as a broken control. Under reduced motion the spinner is dropped
   entirely and the label carries the whole message on its own, which is the
   same signal with none of the movement. */
@media (prefers-reduced-motion: reduce) {
	.car-rental-booking__button[aria-busy="true"]::before {
		display: none;
	}
}

@keyframes cr-spin {
	to {
		transform: rotate(360deg);
	}
}

/* --- Error and success ------------------------------------------------------------- */

.car-rental-booking__error {
	margin: 0 0 1.5rem;
	padding: 1rem;
	background-color: rgba(201, 74, 74, 0.08);
	border: 1px solid var(--cr-danger);
	border-left-width: 4px;
	border-radius: 0.25rem;
	color: var(--cr-text);
}

.car-rental-booking__error p {
	margin: 0 0 0.25rem;
}

.car-rental-booking__error p:last-child {
	margin-bottom: 0;
}

.car-rental-booking--success {
	background-color: rgba(22, 128, 92, 0.06);
	border-color: var(--cr-success);
}

.car-rental-booking--success h3 {
	color: var(--cr-success);
}

.car-rental-booking--success strong {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	background-color: var(--cr-white);
	border: 1px dashed var(--cr-success);
	border-radius: 0.25rem;
	font-size: 1.125rem;
	letter-spacing: 0.04em;
}

/* --- The reference as a ticket ---------------------------------------------------- */

/* The reference is the one thing on the page the guest is going to write down
   or quote back to us, so it is given a name of its own: a dashed stub on its
   own white ground, sitting apart from the prose around it. The stub is the
   part that gets torn off, which is what the reveal below is imitating. */
.car-rental-booking__reference {
	overflow: hidden;
	/* A reference is read out and copied, not read as prose, so it is set in a
	   monospace face. Alphanumeric characters in a proportional face are close
	   enough in width to be misread from each other, and CRR-7K2M4Q is exactly
	   the kind of string where 0 and O have to be told apart by shape alone. */
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	white-space: nowrap;
}

/* The whole confirmation arrives the way a ticket is handed over: the card
   settles, then the stub itself swings in and comes to rest. The rotation is
   the point. A reference that only faded in would be the same event as the card
   it sits in, and the slight overshoot past vertical is what says "a thing was
   moved here" rather than "a thing was drawn here".

   The stub lands before the sweep below starts, so the two read as one arrival
   rather than as two animations queued up. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes cr-booking-in {
		from {
			opacity: 0;
			transform: translateY(0.5rem);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes cr-ticket-in {
		0% {
			opacity: 0;
			transform: translateX(-0.75rem) rotate(-4deg) scale(0.9);
		}

		55% {
			opacity: 1;
			transform: translateX(0) rotate(1.5deg) scale(1.04);
		}

		100% {
			opacity: 1;
			transform: none;
		}
	}

	/* A band of light crossing the stub, the way a freshly printed one catches
	   the light. It sweeps once and stops: a shine that repeated would be a
	   loading indicator, and this is not loading, it is done. */
	@keyframes cr-ticket-sweep {
		from {
			transform: translateX(-100%);
		}

		to {
			transform: translateX(100%);
		}
	}

	.car-rental-booking--success {
		animation: cr-booking-in 0.4s ease backwards;
	}

	.car-rental-booking__reference {
		animation: cr-ticket-in 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) 0.15s backwards;
	}

	.car-rental-booking__reference::after {
		content: "";
		display: block;
		position: absolute;
		inset: 0;
		/* Skewed so the band crosses at an angle instead of sliding straight
		   down the stub, which is how light actually moves across a raised edge. */
		background: linear-gradient(100deg, transparent 35%, rgba(22, 128, 92, 0.22) 50%, transparent 65%);
		transform: translateX(-100%);
		animation: cr-ticket-sweep 0.6s ease 0.6s;
	}
}

/* The sweep is positioned against the stub, so the stub is the positioning
   context. It is set here rather than in the base rule because it is only ever
   needed by the sweep, and position: relative on its own changes nothing. */
.car-rental-booking--success .car-rental-booking__reference {
	position: relative;
}

/* The form is edge to edge on a phone and gains its breathing room once there
   is space to spare, so the roomy value is the enhancement. */
@media (min-width: 30rem) {
	.car-rental-booking {
		padding: 1.5rem;
	}
}

/* --- Contact form ------------------------------------------------------------------- */

/* The contact page template styles its own layout inline and marks the form
   .cr-contact__form, which is what the rules below target. There is no bare
   .cr-contact element and no .cr-contact__title heading: the template's blocks
   are .cr-contact-page, .cr-contact-layout, .cr-contact-info and
   .cr-contact-form-card. Those two rules matched nothing. */

.cr-contact__form p,
.cr-contact__form label {
	display: block;
}

.cr-contact__form label {
	margin-bottom: 0.25rem;
	font-size: var(--cr-font-size-sm);
	font-weight: 600;
	color: var(--cr-primary-dark);
}

.cr-contact__form input[type="text"],
.cr-contact__form input[type="email"],
.cr-contact__form textarea {
	width: 100%;
	max-width: 34rem;
	min-height: 3rem;
}

/* FAQ page content: headings gain generous spacing. */
.cr-faq-content h2,
.cr-faq-content h3 {
	margin-top: 1.75rem;
}

.cr-faq-content h2:first-child,
.cr-faq-content h3:first-child {
	margin-top: 0;
}
/* --- Track my booking --------------------------------------------------------- */

/* Markup is the plugin's, styling is the theme's, the same split the booking
   form uses. Every rule is phone first. */

.cr-track {
	padding: 1rem;
	background-color: var(--cr-white);
	border: 1px solid var(--cr-border);
	border-radius: 0.5rem;
}

/* Same look as .cr-alert--error, under the plugin's own class name so the
   plugin does not have to borrow the theme's. */
.cr-track__alert {
	padding: 0.875rem 1rem;
	border-radius: 0.25rem;
	font-size: var(--cr-font-size-sm);
}

.cr-track__alert--error {
	background-color: rgba(201, 74, 74, 0.12);
	color: var(--cr-danger);
	border: 1px solid var(--cr-danger);
}

/* The two fields stack on a phone. A reference and an email address do not
   improve by being put side by side in 288px. */
.cr-track__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1rem;
}

.cr-track__field {
	margin: 0 0 1rem;
}

.cr-track__field label {
	display: block;
	margin: 0 0 0.25rem;
	font-size: var(--cr-font-size-sm);
	font-weight: 600;
	color: var(--cr-primary-dark);
}

.cr-track__field input {
	width: 100%;
	min-height: 3rem;
}

/* A reference is typed by hand from an email, so it is not lowercased, not
   spell-checked, and long enough for the widest one the plugin will accept. */
.cr-track__field input[name="cr_track_reference"] {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* The submit button itself carries the shared cr-button classes, so its colour
   comes from the button styles rather than from anything here. These two rules
   are only about the shape: a full width button for a phone, and the gap below
   it. The margin belongs on the wrapper, not on the button. */
.cr-track__submit {
	width: 100%;
	margin: 0 0 1.5rem;
}

/* --- Result ------------------------------------------------------------------- */

.cr-track__result {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background-color: var(--cr-primary-light);
	border-radius: 0.375rem;
}

.cr-track__reference,
.cr-track__status {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin: 0 0 0.75rem;
}

.cr-track__reference-label,
.cr-track__status-label,
.cr-track__contact-label {
	font-size: var(--cr-font-size-sm);
	font-weight: 600;
	color: var(--cr-primary-dark);
}

.cr-track__reference-value {
	/* The one value on the page worth being able to copy. */
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.125rem;
	letter-spacing: 0.06em;
	overflow-wrap: break-word;
}

.cr-track__status-value {
	font-size: 1.0625rem;
}

/* The status is the answer to the question the guest asked, so it is coloured
   by what it says rather than left to be read. */
.cr-track__status--confirmed,
.cr-track__status--completed {
	color: var(--cr-success);
}

.cr-track__status--pending {
	color: var(--cr-warning);
}

.cr-track__status--rejected,
.cr-track__status--cancelled {
	color: var(--cr-danger);
}

.cr-track__note {
	margin: 0 0 1rem;
	font-size: var(--cr-font-size-sm);
	color: var(--cr-text-muted);
}

.cr-track__details {
	margin: 0;
}

.cr-track__detail {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.125rem 1rem;
	padding: 0.5rem 0;
	border-top: 1px solid var(--cr-border);
	font-size: var(--cr-font-size-sm);
}

.cr-track__detail dt {
	font-weight: 600;
	color: var(--cr-primary-dark);
}

.cr-track__detail dd {
	margin: 0;
	text-align: right;
	overflow-wrap: break-word;
}

/* --- Contact ------------------------------------------------------------------ */

.cr-track__contact {
	padding-top: 1rem;
	border-top: 1px solid var(--cr-border);
}

.cr-track__contact-title {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	color: var(--cr-primary-dark);
}

.cr-track__contact-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-track__contact-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.125rem 1rem;
	padding: 0.375rem 0;
	font-size: var(--cr-font-size-sm);
}

@media (min-width: 34rem) {
	.cr-track {
		padding: 1.5rem;
	}

	.cr-track__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* A full width button is for a phone; from here it can be its own size. */
	.cr-track__submit {
		width: auto;
	}
}