/**
 * Donation form styles.
 *
 * Written to sit inside an existing theme rather than override it: colours,
 * radii and spacing come from custom properties, so the form can be matched to
 * the site without touching this file.
 *
 * Deliberately restrained. A donation form competing with the page it sits on
 * reads as an advertisement, which is the opposite of what it needs to feel
 * like.
 */

/**
 * Every value the form draws is a custom property, and every one of them can
 * be overridden -- in the plugin settings, through the
 * `cividonations_style_tokens` filter, or in the theme's own stylesheet.
 *
 * Surfaces are transparent, text is inherited, and every line and shade is
 * derived from the text colour the page already uses. The form therefore
 * adopts whatever it is placed on -- light page, dark page, or a coloured
 * section -- without being told anything.
 *
 * The accent cannot be derived from anything, so it is looked up in the two
 * variable sets that belong to the platform rather than to any one theme:
 *
 *   --e-global-color-primary     Elementor
 *   --wp--preset--color--primary WordPress block themes
 *
 * Theme-specific names are deliberately not consulted. Reading, say, Amity's
 * own --color-text would make the form look right on exactly one theme and
 * arbitrary everywhere else, which is the opposite of the intent.
 *
 * Nor are those variables trusted for surfaces and text. An earlier version
 * read --wp--preset--color--base as "page background"; on this theme it turned
 * out to be a dark brand colour, and the form rendered as dark cards on a white
 * page. Themes disagree about what those names mean. "Primary" is the one that
 * reliably means the same thing everywhere: the brand colour.
 */
.cvd {
	--cvd-accent: var(--e-global-color-primary, var(--wp--preset--color--primary, #2f4858));
	--cvd-accent-contrast: #ffffff;
	--cvd-error: #c62828;

	/* Two declarations each: the first is understood everywhere, the second
	   wins wherever color-mix() is supported and adapts to the surrounding
	   text colour. */
	--cvd-border: rgba(128, 128, 128, 0.35);
	--cvd-border: color-mix(in srgb, currentColor 22%, transparent);

	--cvd-muted: rgba(128, 128, 128, 1);
	--cvd-muted: color-mix(in srgb, currentColor 65%, transparent);

	/* A barely-there tint rather than pure transparency. Cards that match the
	   page exactly read as empty space with a line around them; three percent
	   of the text colour is enough to make them read as a surface, on light
	   and dark pages alike. */
	--cvd-surface: rgba(128, 128, 128, 0.04);
	--cvd-surface: color-mix(in srgb, currentColor 3%, transparent);

	--cvd-surface-alt: rgba(128, 128, 128, 0.08);
	--cvd-surface-alt: color-mix(in srgb, currentColor 6%, transparent);

	/* Input fields go the other way: lighter than the card they sit on, so
	   they read as something to type into. */
	--cvd-input: rgba(255, 255, 255, 0.5);
	--cvd-input: color-mix(in srgb, canvas 60%, transparent);

	--cvd-radius: 8px;
	--cvd-gap: 1.25rem;
	--cvd-max-width: 44rem;
	--cvd-font: inherit;

	max-width: var(--cvd-max-width);
	margin: 0 auto;
	color: inherit;
	font-family: var(--cvd-font);
	font-size: 1rem;
	line-height: 1.5;

	/* Turned off, because it does not do what its name promises. Safari and
	   Chrome on Android enlarge the text of a block they consider too narrow -
	   a help on a desktop page squeezed onto a phone, and a nuisance in a form
	   that is already built for the width it has. Left on, the labels grow
	   while the fields do not. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

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

/* Themes commonly set their font on a list of selectors -- body, headings,
   paragraphs -- rather than universally. Anything the list misses falls back
   to the browser default, which is why a form can end up half in the site's
   font and half in Times New Roman.

   Forcing inheritance chains every element up to .cvd, which inherits from the
   page. One font throughout, whichever the site uses. */
.cvd * {
	font-family: inherit;
}

/* Themes routinely set display on labels, paragraphs and divs without
   excluding hidden elements, which makes the browser's own [hidden] handling
   lose. Everything the form shows and hides conditionally depends on this
   rule, so it is the one place !important earns its keep. */
.cvd [hidden] {
	display: none !important;
}

.cvd__title {
	margin: 0 0 var(--cvd-gap);
}

/* -------------------------------------------------------------- Progress - */

.cvd__progress {
	display: flex;
	gap: 0.25rem;
	margin: 0 0 var(--cvd-gap);
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.cvd__progress-item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 0;
	opacity: 0.45;
	text-align: center;
	font-size: 0.8125rem;
	transition: opacity 0.2s ease;
}

.cvd__progress-item.is-current,
.cvd__progress-item.is-done {
	opacity: 1;
}

.cvd__progress-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border: 1px solid var(--cvd-border);
	border-radius: 50%;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1;
}

.cvd__progress-item.is-current .cvd__progress-number {
	border-color: var(--cvd-accent);
	background: var(--cvd-accent);
	color: var(--cvd-accent-contrast);
}

.cvd__progress-item.is-done .cvd__progress-number {
	border-color: var(--cvd-accent);
	color: var(--cvd-accent);
}

/* Five labels do not fit across a phone. The numbers stay, because they are
   what tells the donor how much is left; the words are the part that can go. */
@media (max-width: 30rem) {
	.cvd__progress-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		/* Both, deliberately. clip is long deprecated and still the only one an
		   older browser understands; clip-path is the current one and wins where
		   it is supported. Left with neither, five step names would pile up on
		   top of each other in a one-pixel box. */
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ----------------------------------------------------------------- Steps - */

.cvd__step {
	margin: 0 0 var(--cvd-gap);
}

.cvd__legend--spaced {
	margin-top: 1.75rem;
}

/* Back on the left, forward on the right: the direction of travel through the
   form matches the reading direction, so the donor never has to look for the
   button that continues.
 *
 * The forward action is deliberately not stretched across the column. A button
 * as wide as the form reads as a banner rather than a control, and at that size
 * it also outweighs the choice above it -- which is the part the donor is
 * actually meant to be looking at. */
.cvd__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	justify-content: flex-end;
	margin-top: var(--cvd-gap);
}

.cvd__actions .cvd__back {
	order: 1;
	/* Pushes everything after it to the right edge, without needing a spacer
	   element or a second rule for the steps that have no back button. */
	margin: 0 auto 0 0;
	width: auto;
}

.cvd__actions .cvd__submit {
	order: 2;
	width: auto;
}

/* ---------------------------------------------------------------- Groups - */

.cvd__group {
	margin: 0 0 var(--cvd-gap);
	padding: 1.25rem;
	border: 1px solid var(--cvd-border);
	border-radius: var(--cvd-radius);
	background: var(--cvd-surface);
}

/* An ordinary heading, not a <legend>.
 *
 * A legend is rendered inside the fieldset's border, so the border line runs
 * through the text, and the usual workarounds -- floating it or positioning it
 * absolutely -- take it out of normal flow and drag the layout with it. The
 * groups are plain sections with aria-labelledby instead: same grouping for
 * screen readers, no special layout rules to fight. */
.cvd__legend {
	display: block;
	margin: 0 0 1rem;
	padding: 0;
	/* Explicit, because themes give headings their own colour. Without this a
	   heading can end up dark on a dark card and vanish entirely. */
	color: inherit;
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.3;
}

.cvd__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.cvd__row > .cvd__field {
	flex: 1 1 12rem;
}

.cvd__field--narrow {
	flex: 0 1 8rem;
}

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

.cvd__field {
	display: block;
	margin: 0 0 0.9rem;
}

.cvd__field:last-child {
	margin-bottom: 0;
}

.cvd__label {
	display: block;
	margin-bottom: 0.3rem;
	font-weight: 500;
}

.cvd__label em {
	font-weight: 400;
	font-style: normal;
	color: var(--cvd-muted);
}

.cvd input[type="text"],
.cvd input[type="email"],
.cvd select,
.cvd textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--cvd-border);
	border-radius: var(--cvd-radius);
	background-color: var(--cvd-input);
	color: inherit;
	font: inherit;
}

/* The same font, said again and said louder.
 *
 * Themes style inputs by type - `input[type=text], input[type=email], ...` -
 * and that selector carries exactly the same weight as `.cvd input`. Equal
 * weight is decided by which stylesheet the page loaded last, which is not
 * something a plugin gets to decide. On the site this was found on, the theme
 * set 14px; whether the form's own size or the theme's won came down to the
 * order of two <link> tags.
 *
 * `input[type]` - any input that declares a type, which is all of them - adds
 * the one point that settles it. Not !important: that would win against the
 * site owner too, and somebody who deliberately restyles this form should be
 * able to. */
.cvd input[type] {
	font: inherit;
}

/* Native dropdowns are drawn by the browser's own widget layer, and that layer
   does not carry an inherited font into the open list. The closed control shows
   the page's font; the list dropping out of it falls back to the browser
   default, which on Windows is Times New Roman.
 *
 * The family therefore has to be named rather than inherited. By the time this
 * matters, --cvd-font holds a real list: the script reads what the page around
 * the form actually resolves to and writes it onto the form. Until then this is
 * `inherit` and behaves exactly as before, so nothing depends on the script
 * having run. */
.cvd select,
.cvd option,
.cvd optgroup {
	font-family: var(--cvd-font);
}

/* Same reason: the widget layer sizes the list from the option, not from the
   control it belongs to, and its default is smaller than the form's text. */
.cvd option,
.cvd optgroup {
	font-size: 1rem;
}

/* A dropdown has to look like a dropdown.
 *
 * Two things were fighting over the arrow. The browser draws one; themes
 * routinely turn that off and paint their own as a background image. This form
 * then sets its own background - and a background wipes out an image put there
 * by anyone else. The result on the site this was found on: Land and Bundesland
 * looked exactly like text fields, with no sign that they open.
 *
 * So the arrow is drawn here, from two gradients rather than an image, because
 * a gradient can use currentColor. A picture would need a colour chosen now,
 * and this form does not know whether it will end up on a light page or a dark
 * one. */
.cvd select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.25rem;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		right 1.1rem top 55%,
		right 0.75rem top 55%;
	background-size: 0.35rem 0.35rem;
	background-repeat: no-repeat;
}

/* Three rules where one would do, and the order is the whole point.
 *
 * :focus-visible is the modern answer to "show a ring for the keyboard, not for
 * the mouse" - and a browser that does not know it simply ignores the rule.
 * Written on its own it therefore left keyboard users on Safari before 15.4
 * with no visible focus at all: eleven fields, and no way to see which one you
 * are in. That is not a rough edge, it is the form being unusable without a
 * mouse.
 *
 * So the plain :focus ring is stated first, which every browser has understood
 * for twenty years. The second rule takes it away again for pointer focus - and
 * a browser that does not know :focus-visible cannot parse that selector, drops
 * the rule whole, and keeps the ring. Nobody is left without one. */
.cvd input:focus,
.cvd select:focus,
.cvd textarea:focus,
.cvd button:focus {
	outline: 2px solid var(--cvd-accent);
	outline-offset: 2px;
}

.cvd input:focus:not(:focus-visible),
.cvd select:focus:not(:focus-visible),
.cvd textarea:focus:not(:focus-visible),
.cvd button:focus:not(:focus-visible) {
	outline: none;
}

.cvd input:focus-visible,
.cvd select:focus-visible,
.cvd textarea:focus-visible,
.cvd button:focus-visible {
	outline: 2px solid var(--cvd-accent);
	outline-offset: 2px;
}

.cvd__note,
.cvd__hint {
	display: block;
	margin-top: 0.35rem;
	color: var(--cvd-muted);
	font-size: 0.875rem;
}

.cvd__hint {
	margin: 0.75rem 0 0;
}

/* --------------------------------------------------------------- Amounts - */

/* Amounts, salutation and interval are all the same control: a short row of
   options where every one of them fits on screen.
 *
 * The last two used to be dropdowns. Browsers draw the open list of a <select>
 * with their own widget layer, and that layer ignores the page's font -- on
 * Windows the list comes out in Times New Roman no matter what the option is
 * styled with. Measured, not assumed: the computed font-family on the option
 * was correct and the list still rendered in serif.
 *
 * Losing the dropdown costs nothing here. Three salutations and five intervals
 * behind a click were the worse control to begin with. */
.cvd__amounts,
.cvd__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.9rem;
}

.cvd__amount,
.cvd__choice {
	position: relative;
	flex: 1 1 auto;
	min-width: 5rem;
}

/* The interval labels are words of very different lengths, so they size to
   their text instead of sharing the row equally. */
.cvd__choice {
	flex: 0 1 auto;
}

/* The input stays focusable and reachable by keyboard; only its default
   rendering is replaced by the label beside it. */
.cvd__amount input,
.cvd__choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.cvd__amount span,
.cvd__choice span {
	display: block;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--cvd-border);
	border-radius: var(--cvd-radius);
	background: var(--cvd-surface);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cvd__amount input:checked + span,
.cvd__choice input:checked + span {
	border-color: var(--cvd-accent);
	background: color-mix(in srgb, var(--cvd-accent) 8%, transparent);
	font-weight: 600;
}

/* Same three-step, and it matters more here: the radio itself is a single
   pixel, so without a ring on the label beside it there is nothing at all to
   see. */
.cvd__amount input:focus + span,
.cvd__choice input:focus + span {
	outline: 2px solid var(--cvd-accent);
	outline-offset: 2px;
}

.cvd__amount input:focus:not(:focus-visible) + span,
.cvd__choice input:focus:not(:focus-visible) + span {
	outline: none;
}

.cvd__amount input:focus-visible + span,
.cvd__choice input:focus-visible + span {
	outline: 2px solid var(--cvd-accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------- Consents - */

.cvd__optional {
	margin: 0 0 var(--cvd-gap);
	padding: 0.75rem 1.25rem;
	border: 1px solid var(--cvd-border);
	border-radius: var(--cvd-radius);
	background: var(--cvd-surface-alt);
}

.cvd__optional summary {
	cursor: pointer;
	font-weight: 500;
}

.cvd__optional .cvd__field {
	margin-top: 0.9rem;
}

.cvd__consents {
	margin: 0 0 var(--cvd-gap);
}

.cvd__check {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: 0.6rem;
	cursor: pointer;
}

/* Handed back to the browser, deliberately.
 *
 * Themes like to replace the tick box: appearance:none, a bordered square, and
 * the tick drawn as a ::before. It is a fragile trick - Firefox renders no
 * pseudo-elements on an input at all - and the box it is done to here is the
 * one the donor must tick to give consent. A control whose state cannot be seen
 * is not a detail on this particular checkbox.
 *
 * Native rendering is right on every platform, is what a screen reader and a
 * password manager expect, and needs no maintenance. accent-color gives it the
 * form's own colour without taking the widget apart. */
.cvd .cvd__check input[type="checkbox"] {
	appearance: auto;
	-webkit-appearance: checkbox;
	width: auto;
	min-height: 0;
	accent-color: var(--cvd-accent);
	/* Nudged down so the box aligns with the first line of a wrapped label. */
	margin-top: 0.25rem;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------- Method - */

/* Payment and donor-type choices are cards rather than a row of pills: each
   carries a second line explaining what the choice means, which is what stops
   a donor picking "Überweisung" and then wondering why nothing was charged. */
.cvd__methods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0.6rem;
	margin-bottom: var(--cvd-gap);
}

.cvd__method {
	position: relative;
	display: block;
}

.cvd__method input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.cvd__method-title,
.cvd__method-note {
	display: block;
}

.cvd__method-title {
	font-weight: 600;
}

.cvd__method-note {
	margin-top: 0.15rem;
	color: var(--cvd-muted);
	font-size: 0.8125rem;
}

.cvd__method > .cvd__method-title {
	padding: 0.85rem 1rem 0;
	border: 1px solid var(--cvd-border);
	border-bottom: 0;
	border-radius: var(--cvd-radius) var(--cvd-radius) 0 0;
	background: var(--cvd-surface);
	cursor: pointer;
}

.cvd__method > .cvd__method-note {
	margin-top: 0;
	padding: 0.15rem 1rem 0.85rem;
	border: 1px solid var(--cvd-border);
	border-top: 0;
	border-radius: 0 0 var(--cvd-radius) var(--cvd-radius);
	background: var(--cvd-surface);
	cursor: pointer;
}

.cvd__method input:checked ~ .cvd__method-title,
.cvd__method input:checked ~ .cvd__method-note {
	border-color: var(--cvd-accent);
	background: color-mix(in srgb, var(--cvd-accent) 8%, transparent);
}

.cvd__method input:focus-visible ~ .cvd__method-title,
.cvd__method input:focus-visible ~ .cvd__method-note {
	outline: 2px solid var(--cvd-accent);
	outline-offset: 2px;
}

.cvd__notice {
	margin: 0 0 var(--cvd-gap);
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--cvd-accent);
	border-radius: var(--cvd-radius);
	background: var(--cvd-surface-alt);
	font-size: 0.9375rem;
}

/* -------------------------------------------------------------- Payment -- */

/* Definition lists for the review step and the bank details: label on the
   left, value on the right, and the value keeps the line breaks it was given
   so an address stays an address. */
.cvd__summary,
.cvd__bank {
	display: grid;
	grid-template-columns: minmax(7rem, auto) 1fr;
	gap: 0.45rem 1rem;
	margin: 0 0 var(--cvd-gap);
	padding: 1rem 1.25rem;
	border: 1px solid var(--cvd-border);
	border-radius: var(--cvd-radius);
	background: var(--cvd-surface);
}

.cvd__summary dt,
.cvd__bank dt {
	margin: 0;
	color: var(--cvd-muted);
	font-weight: 400;
}

.cvd__summary dd,
.cvd__bank dd {
	margin: 0;
	white-space: pre-line;
}

.cvd__bank dd {
	/* Account numbers are read digit by digit and often copied by hand. */
	font-variant-numeric: tabular-nums;
	word-break: break-all;
}

@media (max-width: 26rem) {
	.cvd__summary,
	.cvd__bank {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.cvd__summary dd,
	.cvd__bank dd {
		margin-bottom: 0.6rem;
	}
}

.cvd__amount-line {
	margin: 0 0 var(--cvd-gap);
	font-size: 1.25rem;
	font-weight: 600;
}

.cvd__transfer {
	margin: 0 0 var(--cvd-gap);
}

.cvd__stripe,
.cvd__paypal {
	margin: 0 0 var(--cvd-gap);
}

.cvd__mandate {
	margin: 0 0 var(--cvd-gap);
	color: var(--cvd-muted);
	font-size: 0.875rem;
}

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

.cvd__submit {
	display: inline-block;
	max-width: 100%;
	/* Said out loud, because a browser centres a button's label by default and
	   themes routinely reset that to `text-align: inherit`. The label then sits
	   against the left edge - barely visible on a button that hugs its text, and
	   plainly wrong on the full-width one small screens now get. */
	text-align: center;
	/* em, not rem: the padding is measured against the button's own text, so the
	   button keeps its proportions whatever root size the theme sets. With rem a
	   theme that scales the page up turns this into a banner. */
	padding: 0.7em 1.6em;
	border: 0;
	border-radius: var(--cvd-radius);
	background: var(--cvd-accent);
	color: var(--cvd-accent-contrast);
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

.cvd__submit:hover:not(:disabled) {
	filter: brightness(0.92);
}

.cvd__back {
	display: inline-block;
	padding: 0.7em 0.25em;
	border: 0;
	background: none;
	color: var(--cvd-muted);
	font: inherit;
	line-height: 1.4;
	text-decoration: underline;
	cursor: pointer;
}

.cvd button:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* --------------------------------------------------------------- States -- */

.cvd__errors {
	margin: 0 0 var(--cvd-gap);
	padding: 0.9rem 1.25rem;
	border-left: 4px solid var(--cvd-error);
	border-radius: var(--cvd-radius);
	background: color-mix(in srgb, var(--cvd-error) 6%, var(--cvd-surface));
	color: var(--cvd-error);
}

.cvd__errors p {
	margin: 0 0 0.35rem;
}

.cvd__errors p:last-child {
	margin-bottom: 0;
}

/* The closing step is the only screen with nothing to do on it. There is no
   column of fields left for the text to line up with, so it is centred and given
   room -- the donor has finished, and the page should read like an answer rather
   than like another form. */
.cvd__step--done {
	padding: 1.5rem 0 2rem;
	text-align: center;
}

.cvd__thanks {
	margin: 0 0 0.6rem;
}

/* Centred text is harder to read across a long line, because the eye has to
   find a new starting point on every one. Holding the paragraph to roughly
   sixty characters keeps that short. */
.cvd__step--done p {
	max-width: 34em;
	margin-left: auto;
	margin-right: auto;
}

.cvd--busy {
	cursor: progress;
}

.cvd-unavailable {
	padding: 1rem 1.25rem;
	border-radius: var(--cvd-radius);
	background: var(--cvd-surface-alt);
}

/* ----------------------------------------------------------------- Dark -- */

/* No dark-mode block any more. Everything above is derived from the inherited
   text colour, so a dark page produces light borders and shades on its own.
   A separate set of dark values would only fight the page it sits on. */

/* --------------------------------------------------------------- Touch --- */

/* Everything here is about fingers rather than about screen width, so it hangs
   on the pointer, not on a breakpoint. A phone in landscape is wider than some
   windows and still operated by thumbs; a touchscreen laptop is wide and both.
   `coarse` asks the one question that matters: how precisely can this person
   point? */

@media (pointer: coarse) {
	/* The one rule that matters most, and it is not about looks.
	 *
	 * Safari on iOS zooms the whole page in when a field with text under 16px
	 * takes focus - and does not zoom back out afterwards. From that moment the
	 * donor is dragging a form that is wider than their screen, sideways, for
	 * the rest of the way. It is the single most common reason a mobile form
	 * gets abandoned halfway.
	 *
	 * The form asks for 1rem, so on a theme that leaves the root size alone this
	 * changes nothing at all. It bites where a theme sets 15px, or scales the
	 * root down on small screens - which is exactly where nobody would think to
	 * look for it.
	 *
	 * max() rather than a flat 16px, so a theme that sets larger text keeps it.
	 * Making somebody's deliberately large type smaller to fix a zoom would be
	 * its own kind of wrong. */
	.cvd input[type],
	.cvd select,
	.cvd textarea {
		font-size: max(16px, 1em);
	}

	/* Roughly the width of a fingertip. Below this, hitting the right control
	   stops being reliable - and the two controls most often missed here are
	   the ones that decide the amount and the interval. */
	.cvd input:not([type="radio"]):not([type="checkbox"]),
	.cvd select,
	.cvd textarea,
	.cvd button,
	.cvd__amount span,
	.cvd__choice span {
		min-height: 2.75rem;
	}

	.cvd__amount span,
	.cvd__choice span {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* A tick box is drawn small by the browser and cannot be made bigger
	   without replacing it. What can be made bigger is the line it sits on, so
	   the label beside it is part of the target - which it already is, being a
	   <label>. */
	.cvd__check {
		padding: 0.35rem 0;
	}

	/* The box itself, scaled up to something a thumb can find. The label beside
	   it already belongs to the same target - it is a <label> - so this only
	   has to raise the floor, not carry the whole hit area. */
	.cvd__check input {
		width: 1.15rem;
		height: 1.15rem;
	}
}

/* The last button on each step gets the whole width where the row would
   otherwise break badly: "Continue to payment" is a long label in German and
   longer still in the languages after it. The back button keeps its place
   above, in the order it stands in the markup - what the eye sees and what the
   tab key follows stay the same. */
@media (max-width: 26rem) {
	.cvd__actions .cvd__submit {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* ------------------------------------------------------------- Reduced --- */

@media (prefers-reduced-motion: reduce) {
	.cvd * {
		transition: none !important;
	}
}