/**
 * MA Engine Lab - front-end design system.
 *
 * Premium automotive workshop: dark, high contrast, minimal. Mobile first.
 *
 * SCOPING
 * -------
 * Every rule is scoped `.mael-form.mael-form` - the root class twice, which is
 * one selector, not two elements. Nothing here touches a global element
 * selector, a theme class, or an Elementor class, so the form cannot bleed out
 * of itself; and the doubled class puts every rule at 0-3-0 or more, which is
 * above anything a theme or a page builder writes about a button, an input or
 * a heading, so nothing can bleed in either.
 *
 * That is not decoration. Elementor's global button colour ships as
 * `.elementor-kit-N button { background-color: ... }` in
 * uploads/elementor/css/post-N.css, with `.elementor-kit-N` on the body tag.
 * At 0-1-1 that outweighed a bare `.mael-btn-primary` at 0-1-0, and the
 * site's global button colour landed on this form's submit button. The hover
 * variant reaches 0-2-1, so a single extra class would not have been enough.
 *
 * Under the token block is the wall (see there), which neutralises what such a
 * rule can inject on anything inside the form that this file does not name.
 * Adding a rule here means keeping the prefix: without it the rule sits at
 * 0-1-0 and the next global button colour wins it back.
 *
 * The token block itself is deliberately left at plain `.mael-form`, so a theme
 * can still re-skin the form by redeclaring the custom properties, and so the
 * inline block MAEL_Fonts writes into the page keeps its weight.
 *
 * THEMING
 * -------
 * Every colour, radius and space is a custom property declared on .mael-form.
 * A theme re-skins the whole form by redefining them, with no need to edit or
 * override anything in this file:
 *
 *   .mael-form {
 *       --mael-accent: #c8102e;
 *       --mael-radius: 4px;
 *   }
 *
 * TYPOGRAPHY
 * ----------
 * Three of those properties are exposed in wp-admin (Nustatymai > Forma >
 * Isvaizda) and written into the page as one inline declaration by MAEL_Fonts:
 *
 *   --mael-font          body text, controls, buttons
 *   --mael-font-heading  step headings, prices, section labels
 *   --mael-scale         multiplier on EVERY font-size in this file
 *
 * Which is why no font-size below is a bare length: each one is
 * calc(Npx * var(--mael-scale)), so one number resizes the whole type ramp
 * without touching the spacing the layout depends on. Add a new font-size the
 * same way, or the text size setting will quietly skip it.
 */

.mael-form {
	/* --- colour ----------------------------------------------------- */
	--mael-bg: #0e0f11;
	--mael-surface: #17191d;
	--mael-surface-2: #1f2228;
	--mael-surface-3: #262a31;
	--mael-border: #2c3038;
	--mael-border-strong: #3d434d;
	--mael-text: #f2f4f7;
	--mael-muted: #9aa1ad;
	/*
	 * Accent. Change these three and the whole form follows: buttons, the
	 * selected category, the focus ring, the checkbox, the tick marks in a
	 * package card. The admin side keeps its own accent in admin.css.
	 */
	--mael-accent: #14b8a6;
	--mael-accent-hover: #2dd4bf;
	--mael-accent-text: #04201d;
	--mael-accent-soft: rgba(20, 184, 166, 0.12);
	--mael-danger: #ff6b6b;
	--mael-danger-bg: rgba(255, 107, 107, 0.1);
	--mael-success: #4ade80;
	--mael-success-bg: rgba(74, 222, 128, 0.1);
	--mael-focus: #9ecbff;

	/* --- typography -------------------------------------------------- */
	/*
	 * inherit = the theme's font, which is the default and always safe. The
	 * headings have their own property so a condensed display face can be
	 * paired with a readable body face - the usual automotive pairing.
	 */
	--mael-font: inherit;
	--mael-font-heading: var(--mael-font);
	/* Multiplier, not a size. 0.92 / 1 / 1.12 from the settings screen. */
	--mael-scale: 1;
	/*
	 * Three body sizes, not one.
	 *
	 * --mael-fs-sm was 13px and carried every caption, hint, intro paragraph
	 * and checkbox in the form - at that size the explanatory copy was the
	 * hardest thing on the screen to read, which is the opposite of what
	 * explanatory copy is for. It is now 14px and keeps only the captions;
	 * running prose moved up to --mael-fs-body (15px), which reads as text
	 * rather than as fine print without competing with the 16px controls.
	 */
	--mael-fs-sm: calc(0.875rem * var(--mael-scale));
	--mael-fs-body: calc(0.9375rem * var(--mael-scale));
	--mael-fs-base: calc(1rem * var(--mael-scale));
	--mael-fs-lg: calc(1.125rem * var(--mael-scale));
	--mael-fs-xl: calc(1.375rem * var(--mael-scale));
	--mael-fs-price: calc(2.25rem * var(--mael-scale));

	/* --- space ------------------------------------------------------- */
	--mael-sp-1: 4px;
	--mael-sp-2: 8px;
	--mael-sp-3: 12px;
	--mael-sp-4: 16px;
	--mael-sp-5: 24px;
	--mael-sp-6: 32px;

	/* --- shape ------------------------------------------------------- */
	--mael-radius: 10px;
	--mael-radius-sm: 6px;
	--mael-control-h: 52px;
}

/* ================================== isolation ========================= */
/*
 * The wall.
 *
 * Every rule below this block is scoped `.mael-form.mael-form`, which weighs
 * 0-3-0 or more. This block weighs 0-2-0. So it outweighs anything a theme or
 * a page builder can write at element or single-class level - Elementor's
 * global button colour is `.elementor-kit-N button`, 0-1-1, and its hover is
 * 0-2-1 - while every rule of ours still outweighs the wall, whatever order
 * the stylesheets happen to load in. No !important anywhere, and nothing here
 * leaves the form.
 *
 * It neutralises only what such a rule can inject: colour, ground, face and
 * the decorations. Layout - display, size, spacing - is deliberately left to
 * the browser and to the rules below, so the form renders exactly as it does
 * on a site with no conflicting styles at all.
 */
.mael-form.mael-form,
.mael-form.mael-form * {
	color: inherit;
	background-color: transparent;
	background-image: none;
	border-color: currentColor;
	box-shadow: none;
	text-shadow: none;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
	filter: none;
	opacity: 1;
}

/*
 * Three controls are drawn by the browser rather than by this file: the consent
 * checkbox, whose whole styling is accent-color, and the options inside a
 * select. They keep the ground and the appearance the browser gives them - and
 * `revert` still discards whatever a theme wrote for them, so the wall loses
 * nothing here.
 */
.mael-form.mael-form input[type="checkbox"],
.mael-form.mael-form input[type="radio"] {
	background-color: revert;
	border-color: revert;
	appearance: revert;
	-webkit-appearance: revert;
}

.mael-form.mael-form option,
.mael-form.mael-form optgroup {
	background-color: revert;
}

/* The form's own shell, at the weight the rest of this file carries. */
.mael-form.mael-form {
	background: var(--mael-bg);
	color: var(--mael-text);
	border: 1px solid var(--mael-border);
	border-radius: var(--mael-radius);
	padding: var(--mael-sp-5);
	font-family: var(--mael-font);
	font-size: var(--mael-fs-base);
	line-height: 1.55;
	/* Contain the layout so a narrow Elementor column cannot overflow. */
	max-width: 100%;
	overflow-x: hidden;
}

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

/*
 * The display voice.
 *
 * --mael-font-heading resolves to --mael-font unless a second font has been
 * chosen, so this block changes nothing on a default install - it exists so
 * that choosing a condensed face for headings reaches everything that should
 * carry it, and nothing that should not. The controls, help text and body copy
 * are deliberately absent: a condensed face is harder to read at 13px, and a
 * form is read, not admired.
 */
.mael-form.mael-form .mael-form-kicker,
.mael-form.mael-form .mael-form-title,
.mael-form.mael-form .mael-h,
.mael-form.mael-form .mael-step-label,
.mael-form.mael-form .mael-cat-label,
.mael-form.mael-form .mael-pkg-tier,
.mael-form.mael-form .mael-pkg-price,
.mael-form.mael-form .mael-picker-title,
.mael-form.mael-form .mael-cal-month,
.mael-form.mael-form .mael-slots-title,
.mael-form.mael-form .mael-chosen-price,
.mael-form.mael-form .mael-result-kicker,
.mael-form.mael-form .mael-result-title,
.mael-form.mael-form .mael-result-subtitle,
.mael-form.mael-form .mael-price,
.mael-form.mael-form .mael-price-tbc {
	font-family: var(--mael-font-heading);
}

/* Visible focus everywhere, never removed. */
.mael-form.mael-form :focus-visible {
	outline: 2px solid var(--mael-focus);
	outline-offset: 2px;
}

.mael-form.mael-form .mael-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mael-form.mael-form .mael-form-head {
	margin: 0 0 var(--mael-sp-6, 24px);
}

/* The small line above the title, with the rule the sample draws beside it. */
.mael-form.mael-form .mael-form-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--mael-sp-3);
	font-size: calc(12px * var(--mael-scale));
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mael-muted);
}

.mael-form.mael-form .mael-form-kicker::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--mael-accent);
}

.mael-form.mael-form .mael-form-title {
	margin: 0 0 var(--mael-sp-3);
	font-size: clamp(calc(28px * var(--mael-scale)), 4vw, calc(40px * var(--mael-scale)));
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--mael-text);
}

.mael-form.mael-form .mael-form-subtitle {
	margin: 0;
	font-size: calc(15px * var(--mael-scale));
	line-height: 1.6;
	color: var(--mael-muted);
}

/* ===================================================== progress ====== */

.mael-form.mael-form .mael-steps-nav {
	margin: 0 0 var(--mael-sp-5);
}

.mael-form.mael-form .mael-steps {
	display: flex;
	gap: var(--mael-sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.mael-form.mael-form .mael-steps li {
	flex: 1 1 0;
	min-width: 72px;
	display: flex;
	align-items: center;
	gap: var(--mael-sp-2);
	font-size: var(--mael-fs-sm);
	color: var(--mael-muted);
	padding-top: var(--mael-sp-2);
	border-top: 3px solid var(--mael-border);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.mael-form.mael-form .mael-steps li[hidden] {
	display: none;
}

.mael-form.mael-form .mael-step-num {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mael-surface-2);
	color: var(--mael-muted);
	font-size: calc(12px * var(--mael-scale));
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mael-form.mael-form .mael-step-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Status is carried by the border, the number chip AND the label weight -
   never by colour alone. */
.mael-form.mael-form .mael-steps li.is-done {
	border-top-color: var(--mael-border-strong);
	color: var(--mael-text);
}

.mael-form.mael-form .mael-steps li.is-done .mael-step-num {
	background: var(--mael-surface-3);
	color: var(--mael-text);
}

.mael-form.mael-form .mael-steps li.is-current {
	border-top-color: var(--mael-accent);
	color: var(--mael-text);
	font-weight: 700;
}

.mael-form.mael-form .mael-steps li.is-current .mael-step-num {
	background: var(--mael-accent);
	color: var(--mael-accent-text);
}

/* ===================================================== headings ====== */

.mael-form.mael-form .mael-h {
	margin: 0 0 var(--mael-sp-4);
	font-size: var(--mael-fs-lg);
	font-weight: 700;
	line-height: 1.3;
	color: var(--mael-text);
}

.mael-form.mael-form .mael-h:focus {
	outline: none;
}

.mael-form.mael-form .mael-h-sub {
	margin-top: var(--mael-sp-5);
	padding-top: var(--mael-sp-4);
	border-top: 1px solid var(--mael-border);
}

/* ================================================= category picker === */

/*
 * Three cards in a row rather than three stacked bars. auto-fit so two
 * categories do not leave a hole and so they stack on a phone without a
 * media query of their own.
 */
.mael-form.mael-form .mael-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--mael-sp-3);
}

.mael-form.mael-form .mael-field-cats {
	margin-bottom: var(--mael-sp-5);
}

/*
 * The icon sits directly above its label rather than at the far end of the
 * card. space-between over a 104px card pushed the two apart and left a hole
 * between them that read as a layout fault; stacking them from the top makes
 * them one label with a picture on it. The height that remains is what the
 * content actually needs - the cards are grid items, so they still come out
 * the same height as each other whatever the longest name is.
 */
.mael-form.mael-form .mael-cat-btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--mael-sp-2);
	width: 100%;
	/*
	 * Grid tracks here are minmax(150px, 1fr), so the track floor is a fixed
	 * 150px and does not grow to the longest word. Without min-width: 0 the
	 * button keeps its automatic min-content width, the word is laid out at
	 * full length anyway, and "VANDENS TRANSPORTAS" ran straight out of the
	 * right-hand card. Zero here lets the button take the track width and
	 * hand the wrapping job to the label below.
	 */
	min-width: 0;
	min-height: 96px;
	padding: var(--mael-sp-4);
	background: var(--mael-surface);
	color: var(--mael-muted);
	border: 1px solid var(--mael-border);
	border-radius: var(--mael-radius);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.mael-form.mael-form .mael-cat-icon {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
}

/*
 * Two lines, then stop.
 *
 * align-self: stretch rather than the container's flex-start, so the label
 * box is the card's width and the text has something to wrap against; the
 * clamp keeps a three-word category from pushing the cards out of line with
 * each other, and break-word covers a single word longer than the card.
 */
.mael-form.mael-form .mael-cat-label {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	align-self: stretch;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	font-size: var(--mael-fs-lg);
	font-weight: 600;
	line-height: 1.25;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}

/*
 * Hover, and only on a card that is not the chosen one.
 *
 * This rule used to be written as a bare :hover and to sit *after*
 * .is-selected. Both selectors weigh 0-3-0, so source order decided it and
 * hover won: putting the mouse on the already-selected card repainted it in
 * the plain grey hover skin, and the only way to see which category was
 * actually chosen was to move the pointer off the picker. :not(.is-selected)
 * takes hover out of that fight entirely - the chosen card now never loses
 * its accent, under the mouse or not.
 */
.mael-form.mael-form .mael-cat-btn:not(.is-selected):hover {
	background: var(--mael-surface-2);
	border-color: var(--mael-border-strong);
	color: var(--mael-text);
}

.mael-form.mael-form .mael-cat-btn:not(.is-selected):hover .mael-cat-icon {
	color: var(--mael-text);
}

/*
 * The chosen card is marked five ways - a two-pixel accent ring, a tint, the
 * icon, the label colour and a tick badge - so the answer to "which one did I
 * just click?" is legible at a glance, on a cheap monitor, and to someone who
 * cannot separate the teal from the grey. The ring is an inset shadow rather
 * than a thicker border so the card does not resize by a pixel on selection.
 */
.mael-form.mael-form .mael-cat-btn.is-selected {
	background: var(--mael-accent-soft);
	border-color: var(--mael-accent);
	box-shadow: inset 0 0 0 1px var(--mael-accent);
	color: var(--mael-text);
}

.mael-form.mael-form .mael-cat-btn.is-selected .mael-cat-icon,
.mael-form.mael-form .mael-cat-btn.is-selected .mael-cat-label {
	color: var(--mael-accent);
}

.mael-form.mael-form .mael-cat-btn.is-selected .mael-cat-label {
	font-weight: 700;
}

/*
 * The tick. Drawn on the card rather than added to the markup so that the
 * button's accessible name stays the category name and nothing else; the
 * state itself is already on aria-checked for a screen reader.
 */
.mael-form.mael-form .mael-cat-btn.is-selected::after {
	content: "";
	position: absolute;
	top: var(--mael-sp-3);
	right: var(--mael-sp-3);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--mael-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2304201d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2l2.4 2.4 4.6-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
}

/* The icon and the label keep clear of the badge. */
.mael-form.mael-form .mael-cat-btn {
	padding-right: calc(var(--mael-sp-4) + 24px);
}

.mael-form.mael-form .mael-cat-btn:focus-visible {
	outline: 2px solid var(--mael-accent);
	outline-offset: 2px;
}

/* A press that is felt, so the click registers before the repaint lands. */
.mael-form.mael-form .mael-cat-btn:active {
	transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
	.mael-form.mael-form .mael-cat-btn {
		transition: none;
	}

	.mael-form.mael-form .mael-cat-btn:active {
		transform: none;
	}
}

/* ===================================================== fields ======== */

.mael-form.mael-form .mael-grid2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mael-sp-3);
}

.mael-form.mael-form .mael-field {
	margin: 0 0 var(--mael-sp-4);
	min-width: 0;
}

.mael-form.mael-form .mael-grid2 .mael-field {
	margin-bottom: 0;
}

/*
 * The consent row is a label too, but it is a checkbox beside a sentence, not
 * a caption above a field. Excluded by name rather than out-specified: this
 * rule is (0,1,1) and .mael-consent is (0,1,0), so it was quietly winning -
 * the consent checkbox has been rendering as a block-level field caption,
 * with no gap between the box and the text.
 */
.mael-form.mael-form .mael-field label:not(.mael-consent):not(.mael-check),
.mael-form.mael-form .mael-label {
	display: block;
	margin-bottom: var(--mael-sp-2);
	font-size: var(--mael-fs-sm);
	font-weight: 600;
	color: var(--mael-muted);
	letter-spacing: 0.01em;
}

.mael-form.mael-form .mael-req {
	color: var(--mael-accent);
}

/*
 * The sentence under a caption that explains what to put in the field. It is
 * prose, so it is set at the prose size with prose leading - at 13px with the
 * default 1.55 it was the smallest, tightest thing on the screen and the
 * two-line photo note under NUOTRAUKOS was genuinely hard to read.
 */
.mael-form.mael-form .mael-hint {
	margin: 0 0 var(--mael-sp-2);
	font-size: var(--mael-fs-body);
	line-height: 1.65;
	color: var(--mael-muted);
}

.mael-form.mael-form .mael-note {
	margin: 0 0 var(--mael-sp-4);
	padding: var(--mael-sp-3);
	background: var(--mael-surface);
	border-left: 3px solid var(--mael-accent);
	border-radius: var(--mael-radius-sm);
	font-size: var(--mael-fs-body);
	line-height: 1.65;
	color: var(--mael-text);
}

.mael-form.mael-form input[type="text"],
.mael-form.mael-form input[type="tel"],
.mael-form.mael-form input[type="email"],
.mael-form.mael-form input[type="date"],
.mael-form.mael-form input[type="time"],
.mael-form.mael-form input[type="number"],
.mael-form.mael-form input[type="datetime-local"],
.mael-form.mael-form select,
.mael-form.mael-form textarea {
	display: block;
	width: 100%;
	min-height: var(--mael-control-h);
	padding: 0 var(--mael-sp-3);
	background: var(--mael-surface);
	color: var(--mael-text);
	border: 1px solid var(--mael-border-strong);
	border-radius: var(--mael-radius-sm);
	/* 16px minimum: anything smaller makes iOS Safari zoom on focus. */
	font-size: max(16px, calc(16px * var(--mael-scale)));
	font-family: inherit;
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.15s ease;
}

.mael-form.mael-form textarea {
	padding: var(--mael-sp-3);
	min-height: 120px;
	resize: vertical;
}

.mael-form.mael-form select {
	padding-right: var(--mael-sp-6);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239aa1ad' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--mael-sp-3) center;
	background-size: 12px;
}

.mael-form.mael-form input::placeholder,
.mael-form.mael-form textarea::placeholder {
	color: var(--mael-muted);
	opacity: 0.7;
}

.mael-form.mael-form input:hover,
.mael-form.mael-form select:hover,
.mael-form.mael-form textarea:hover {
	border-color: var(--mael-muted);
}

/* Invalid state: colour AND a thicker border AND a message below. */
.mael-form.mael-form .is-invalid,
.mael-form.mael-form [aria-invalid="true"] {
	border-color: var(--mael-danger);
	border-width: 2px;
}

.mael-form.mael-form .mael-field-error {
	margin: var(--mael-sp-2) 0 0;
	font-size: var(--mael-fs-sm);
	font-weight: 600;
	color: var(--mael-danger);
}

.mael-form.mael-form .mael-field-error::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-right: var(--mael-sp-1);
	border-radius: 50%;
	background: var(--mael-danger);
	color: var(--mael-bg);
	font-size: 11px;
	font-weight: 700;
	vertical-align: -3px;
}

.mael-form.mael-form .mael-inline {
	display: flex;
	gap: var(--mael-sp-2);
}

.mael-form.mael-form .mael-inline input {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * The engine unit is fixed by the category (cars in litres, everything else
 * in cc), so it is shown as a static suffix rather than a switcher the
 * customer can get wrong. It is a sibling of the input, not a prefix inside
 * it, so the input keeps its own focus ring.
 */
.mael-form.mael-form .mael-unit {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 0 var(--mael-sp-3);
	border: 1px solid var(--mael-border);
	border-radius: var(--mael-radius-sm);
	background: var(--mael-surface-2);
	color: var(--mael-muted);
	font-size: calc(14px * var(--mael-scale));
	line-height: 1;
	white-space: nowrap;
	user-select: none;
}

/* --- service level cards ------------------------------------------- */

/*
 * Minor / Interim / Major, side by side. auto-fit rather than three fixed
 * columns: a band with only two levels configured must not leave a hole, and
 * on a phone they stack without a media query.
 */
.mael-form.mael-form .mael-pkg-grid {
	display: grid;
	/*
	 * 180px, not 220px. The form sits in a 645px column on a normal page, and
	 * 220px only fits TWO across there - which left Major alone on a second
	 * row, reading as an afterthought rather than the top of three.
	 */
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--mael-sp-3);
	margin: var(--mael-sp-4) 0;
}

.mael-form.mael-form .mael-pkg-card {
	display: flex;
	flex-direction: column;
	gap: var(--mael-sp-2);
	padding: var(--mael-sp-4);
	text-align: left;
	font: inherit;
	color: var(--mael-text);
	background: var(--mael-surface);
	border: 1px solid var(--mael-border);
	border-radius: var(--mael-radius);
	cursor: pointer;
	transition: border-color 120ms ease, background-color 120ms ease;
}

.mael-form.mael-form .mael-pkg-card:hover {
	border-color: var(--mael-border-strong);
	background: var(--mael-surface-2);
}

.mael-form.mael-form .mael-pkg-card:focus-visible {
	outline: 2px solid var(--mael-accent);
	outline-offset: 2px;
}

/*
 * The selected card is marked by colour AND by weight of border, so the
 * choice is still legible to someone who cannot separate the two hues.
 */
.mael-form.mael-form .mael-pkg-card.is-selected {
	border-color: var(--mael-accent);
	box-shadow: inset 0 0 0 1px var(--mael-accent);
	background: var(--mael-surface-2);
}

.mael-form.mael-form .mael-pkg-tier {
	font-size: calc(14px * var(--mael-scale));
	font-weight: 600;
	letter-spacing: 0.01em;
}

.mael-form.mael-form .mael-pkg-price {
	font-size: calc(26px * var(--mael-scale));
	font-weight: 700;
	line-height: 1.15;
}

/* A level with no price yet: quieter, and never mistaken for a number. */
.mael-form.mael-form .mael-pkg-price.is-tbc {
	font-size: calc(17px * var(--mael-scale));
	font-weight: 600;
	color: var(--mael-muted);
}

.mael-form.mael-form .mael-pkg-vat {
	font-size: calc(12px * var(--mael-scale));
	color: var(--mael-muted);
}

.mael-form.mael-form .mael-pkg-items {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: var(--mael-sp-2);
	padding-top: var(--mael-sp-3);
	border-top: 1px solid var(--mael-border);
}

.mael-form.mael-form .mael-pkg-item {
	position: relative;
	padding-left: 18px;
	font-size: calc(13px * var(--mael-scale));
	line-height: 1.45;
	color: var(--mael-muted);
}

.mael-form.mael-form .mael-pkg-item::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 6px;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--mael-accent);
	border-bottom: 2px solid var(--mael-accent);
	transform: rotate(-45deg);
}

.mael-form.mael-form .mael-pkg-card .mael-pkg-desc {
	margin-top: var(--mael-sp-2);
	font-size: calc(13px * var(--mael-scale));
	line-height: 1.5;
	color: var(--mael-muted);
}

.mael-form.mael-form .mael-pkg-card .mael-pkg-desc p {
	margin: 0 0 6px;
}

/* --- date and time picker ------------------------------------------ */

.mael-form.mael-form .mael-picker {
	margin: 0 0 var(--mael-sp-5);
	padding: var(--mael-sp-4);
	background: var(--mael-surface);
	border: 1px solid var(--mael-border);
	border-radius: var(--mael-radius);
}

.mael-form.mael-form .mael-picker-head {
	margin: 0 0 var(--mael-sp-4);
}

.mael-form.mael-form .mael-picker-title {
	margin: 0 0 4px;
	font-size: var(--mael-fs-lg);
	font-weight: 700;
	color: var(--mael-text);
}

.mael-form.mael-form .mael-picker-hint {
	margin: 0;
	font-size: calc(13px * var(--mael-scale));
	line-height: 1.5;
	color: var(--mael-muted);
}

/*
 * Calendar beside the times, as in the sample. auto-fit rather than two fixed
 * columns so the times drop underneath on a phone with no media query, and so
 * a narrow theme column does not squash the grid into unreadable cells.
 */
.mael-form.mael-form .mael-picker-body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--mael-sp-4);
	align-items: start;
}

.mael-form.mael-form .mael-calendar {
	padding: var(--mael-sp-3);
	background: var(--mael-surface-2);
	border: 1px solid var(--mael-border);
	border-radius: var(--mael-radius-sm);
}

.mael-form.mael-form .mael-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mael-sp-2);
	margin: 0 0 var(--mael-sp-3);
}

.mael-form.mael-form .mael-cal-month {
	font-size: calc(15px * var(--mael-scale));
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mael-text);
}

.mael-form.mael-form .mael-cal-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: var(--mael-surface-3);
	border: 1px solid var(--mael-border);
	border-radius: 50%;
	color: var(--mael-text);
	font-size: calc(17px * var(--mael-scale));
	line-height: 1;
	font-family: inherit;
	cursor: pointer;
}

.mael-form.mael-form .mael-cal-nav:hover:not(:disabled) {
	border-color: var(--mael-accent);
	color: var(--mael-accent);
}

.mael-form.mael-form .mael-cal-nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.mael-form.mael-form .mael-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.mael-form.mael-form .mael-cal-dow {
	padding: 4px 0;
	font-size: calc(11px * var(--mael-scale));
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	color: var(--mael-muted);
}

.mael-form.mael-form .mael-cal-pad {
	display: block;
}

.mael-form.mael-form .mael-cal-day {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 42px;
	padding: 4px 0 8px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--mael-radius-sm);
	color: var(--mael-text);
	font-family: inherit;
	font-size: calc(14px * var(--mael-scale));
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.mael-form.mael-form .mael-cal-day:hover:not(:disabled) {
	background: var(--mael-surface-3);
}

.mael-form.mael-form .mael-cal-day:focus-visible {
	outline: 2px solid var(--mael-accent);
	outline-offset: 1px;
}

/* A day that cannot be asked for: quieter, and no dot under it. */
.mael-form.mael-form .mael-cal-day.is-closed {
	color: var(--mael-muted);
	opacity: 0.4;
	cursor: default;
}

/*
 * The chosen day is marked by fill AND by weight, so it is still obvious to
 * someone who cannot separate the accent from the surface behind it.
 */
.mael-form.mael-form .mael-cal-day.is-selected {
	background: var(--mael-accent);
	border-color: var(--mael-accent);
	color: var(--mael-accent-text);
	font-weight: 700;
}

.mael-form.mael-form .mael-cal-num {
	line-height: 1;
}

/* The dot marks a day that can be chosen - nothing more is claimed. */
.mael-form.mael-form .mael-cal-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--mael-accent);
}

.mael-form.mael-form .mael-cal-day.is-selected .mael-cal-dot {
	background: var(--mael-accent-text);
}

/* --- the times ------------------------------------------------------ */

.mael-form.mael-form .mael-slots-title {
	margin: 0 0 var(--mael-sp-3);
	font-size: calc(11px * var(--mael-scale));
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mael-muted);
}

.mael-form.mael-form .mael-slots-empty {
	margin: 0;
	padding: var(--mael-sp-4);
	background: var(--mael-surface-2);
	border: 1px dashed var(--mael-border);
	border-radius: var(--mael-radius-sm);
	font-size: calc(13px * var(--mael-scale));
	color: var(--mael-muted);
	text-align: center;
}

/*
 * Twenty-four hours is a long column, so it scrolls inside its own box rather
 * than pushing the name and phone fields off the screen. The height is tied
 * to the calendar beside it, so the two sides of the picker stay level.
 */
.mael-form.mael-form .mael-slot-list {
	display: flex;
	flex-direction: column;
	gap: var(--mael-sp-2);
	max-height: 300px;
	overflow-y: auto;
	/* Room for the focus ring on the last button, and for the scrollbar. */
	padding: 2px;
	scrollbar-width: thin;
	scrollbar-color: var(--mael-border-strong) transparent;
}

.mael-form.mael-form .mael-slot-list::-webkit-scrollbar {
	width: 8px;
}

.mael-form.mael-form .mael-slot-list::-webkit-scrollbar-track {
	background: transparent;
}

.mael-form.mael-form .mael-slot-list::-webkit-scrollbar-thumb {
	background: var(--mael-border-strong);
	border-radius: 4px;
}

.mael-form.mael-form .mael-slot-list::-webkit-scrollbar-thumb:hover {
	background: var(--mael-muted);
}

.mael-form.mael-form .mael-slot {
	padding: 12px var(--mael-sp-4);
	background: var(--mael-surface-2);
	border: 1px solid var(--mael-border);
	border-radius: var(--mael-radius-sm);
	color: var(--mael-text);
	font-family: inherit;
	font-size: calc(14px * var(--mael-scale));
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.mael-form.mael-form .mael-slot:hover {
	border-color: var(--mael-border-strong);
}

.mael-form.mael-form .mael-slot:focus-visible {
	outline: 2px solid var(--mael-accent);
	outline-offset: 2px;
}

.mael-form.mael-form .mael-slot.is-selected {
	background: var(--mael-accent);
	border-color: var(--mael-accent);
	color: var(--mael-accent-text);
}

.mael-form.mael-form .mael-picker .mael-field-error {
	margin-top: var(--mael-sp-3);
}

/* --- chosen package, carried onto the contact step ------------------ */

.mael-form.mael-form .mael-chosen {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--mael-sp-2) var(--mael-sp-3);
	margin: 0 0 var(--mael-sp-4);
	padding: var(--mael-sp-3) var(--mael-sp-4);
	background: var(--mael-surface-2);
	border: 1px solid var(--mael-border);
	border-radius: var(--mael-radius-sm);
}

.mael-form.mael-form .mael-chosen-label {
	font-size: calc(12px * var(--mael-scale));
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mael-muted);
}

.mael-form.mael-form .mael-chosen-name {
	font-weight: 600;
}

.mael-form.mael-form .mael-chosen-price {
	margin-left: auto;
	font-weight: 700;
}

/* --- consent ------------------------------------------------------- */

.mael-form.mael-form .mael-field-consent {
	margin-top: var(--mael-sp-5);
}

.mael-form.mael-form .mael-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--mael-sp-3);
	margin: 0;
	font-size: var(--mael-fs-body);
	line-height: 1.6;
	font-weight: 400;
	color: var(--mael-text);
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.mael-form.mael-form .mael-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--mael-accent);
	cursor: pointer;
}

.mael-form.mael-form .mael-consent a {
	color: var(--mael-accent);
}

/* --- individual-quote flow (v2.0.0) -------------------------------- */

/*
 * The line that opens the form: the price is assessed, not calculated, and
 * sending this reserves nothing. Quieter than .mael-note, which is for
 * something the customer has to act on.
 */
.mael-form.mael-form .mael-intro {
	margin: 0 0 var(--mael-sp-5);
	font-size: var(--mael-fs-body);
	line-height: 1.7;
	color: var(--mael-muted);
}

/*
 * A group of questions that one "Nežinau" box can switch off together.
 *
 * Marked rather than hidden when it is off: the questions stay readable, so
 * the customer can see what was asked and untick the box to answer after all.
 */
.mael-form.mael-form .mael-group {
	margin-bottom: var(--mael-sp-4);
}

.mael-form.mael-form .mael-group[data-unknown] .mael-grid2 {
	opacity: 0.55;
}

/*
 * The "Nežinau" row sat on a -4px top margin, which pulled it up against the
 * bottom edge of the select above it - the tick read as part of that field's
 * chrome rather than as its own question. It now stands off the group by a
 * clear 14px, which is the same gap the fields keep from each other, so the
 * eye reads: field, field, then a separate thing you may tick.
 */
.mael-form.mael-form .mael-field-unknown {
	margin: var(--mael-sp-4) 0 0;
}

/*
 * The whole row is the hit area, not just the 18px box, and it is padded so
 * the target clears 44px on a phone without the label looking like a button.
 */
.mael-form.mael-form .mael-check {
	display: inline-flex;
	align-items: center;
	gap: var(--mael-sp-3);
	margin: 0;
	padding: var(--mael-sp-2) 0;
	font-size: var(--mael-fs-body);
	font-weight: 400;
	line-height: 1.5;
	color: var(--mael-text);
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.mael-form.mael-form .mael-check:hover {
	color: var(--mael-text);
}

.mael-form.mael-form .mael-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--mael-accent);
	cursor: pointer;
}

/*
 * The privacy sentence that replaced the consent checkbox. It states what the
 * data is used for; there is nothing to tick, so it is set as running text
 * rather than as a form control.
 */
.mael-form.mael-form .mael-privacy-note {
	margin: var(--mael-sp-4) 0 0;
	font-size: var(--mael-fs-body);
	line-height: 1.7;
	color: var(--mael-muted);
}

.mael-form.mael-form .mael-privacy-note a {
	color: var(--mael-accent);
}

/* --- honeypot ------------------------------------------------------ */

.mael-form.mael-form .mael-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ===================================================== uploads ======= */

.mael-form.mael-form .mael-file {
	display: block;
	width: 100%;
	padding: var(--mael-sp-3);
	background: var(--mael-surface);
	color: var(--mael-text);
	border: 1px dashed var(--mael-border-strong);
	border-radius: var(--mael-radius-sm);
	font-size: var(--mael-fs-body);
	cursor: pointer;
}

.mael-form.mael-form .mael-file::file-selector-button {
	margin-right: var(--mael-sp-3);
	padding: var(--mael-sp-2) var(--mael-sp-3);
	background: var(--mael-surface-3);
	color: var(--mael-text);
	border: 0;
	border-radius: var(--mael-radius-sm);
	font-family: inherit;
	font-size: var(--mael-fs-sm);
	font-weight: 600;
	cursor: pointer;
}

.mael-form.mael-form .mael-upload-state {
	margin: var(--mael-sp-2) 0 0;
	font-size: var(--mael-fs-body);
	color: var(--mael-muted);
}

.mael-form.mael-form .mael-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mael-sp-3);
	/*
	 * Room above for the first row of badges, which sit half outside the
	 * tile, and room to the right of the last tile in a row for the same
	 * reason - without it the badge is clipped by the form's overflow-x.
	 */
	margin: var(--mael-sp-4) 0 0;
	padding: 6px 6px 0 0;
	list-style: none;
}

/*
 * A tile, not a bare image: a frame and a dark mat so a photo of a light
 * engine bay still reads as a thumbnail on the dark form, and so the remove
 * badge has a hard edge to sit on.
 */
.mael-form.mael-form .mael-thumb {
	position: relative;
	width: 88px;
	height: 88px;
	border: 1px solid var(--mael-border-strong);
	border-radius: var(--mael-radius-sm);
	background: var(--mael-surface-2);
	transition: border-color 0.15s ease;
}

.mael-form.mael-form .mael-thumb:hover {
	border-color: var(--mael-border-strong);
}

.mael-form.mael-form .mael-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: calc(var(--mael-radius-sm) - 1px);
}

/*
 * The remove control.
 *
 * It used to be a 28px disc of flat translucent black holding a text "x",
 * tucked two pixels inside the picture: the glyph sat off-centre because a
 * text multiplication sign is not centred in its em box, the disc had no
 * edge, and over a dark photo the whole thing disappeared. It is now a solid
 * badge on the tile's top-right *corner* - half on the photo, half off it,
 * which is the convention every upload field uses - with a ring that
 * separates it from whatever is behind, a drawn stroke rather than a
 * character, and red on hover so the destructive action says so.
 *
 * 26px with a 2px ring clears the 24px minimum comfortably, and the hit area
 * is widened by ::before to the 44px a thumb needs on a phone.
 */
.mael-form.mael-form .mael-thumb-remove {
	position: absolute;
	top: -7px;
	right: -7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 2px solid var(--mael-bg);
	border-radius: 50%;
	background: var(--mael-surface-3);
	color: var(--mael-text);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* The touch target, invisible, centred on the badge. */
.mael-form.mael-form .mael-thumb-remove::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

.mael-form.mael-form .mael-thumb-remove svg {
	width: 12px;
	height: 12px;
	display: block;
	pointer-events: none;
}

.mael-form.mael-form .mael-thumb-remove:hover,
.mael-form.mael-form .mael-thumb-remove:focus-visible {
	background: var(--mael-danger);
	color: #1a0506;
	transform: scale(1.08);
}

.mael-form.mael-form .mael-thumb-remove:focus-visible {
	outline: 2px solid var(--mael-focus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mael-form.mael-form .mael-thumb-remove {
		transition: none;
	}

	.mael-form.mael-form .mael-thumb-remove:hover,
	.mael-form.mael-form .mael-thumb-remove:focus-visible {
		transform: none;
	}
}

/* ===================================================== buttons ======= */

.mael-form.mael-form .mael-actions {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--mael-sp-3);
	margin-top: var(--mael-sp-5);
}

.mael-form.mael-form .mael-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--mael-control-h);
	padding: 0 var(--mael-sp-5);
	border: 1px solid transparent;
	border-radius: var(--mael-radius-sm);
	font-family: inherit;
	font-size: var(--mael-fs-base);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.mael-form.mael-form .mael-btn-lg {
	min-height: 58px;
	font-size: var(--mael-fs-lg);
}

.mael-form.mael-form .mael-btn-primary {
	background: var(--mael-accent);
	color: var(--mael-accent-text);
}

/* The sample's submit: the full width of the form, so it reads as the end. */
.mael-form.mael-form .mael-btn-block {
	flex: 1 1 100%;
	justify-content: center;
}

/*
 * The arrow from the sample. A pseudo-element rather than a character in the
 * label, so no translator has to carry it and no screen reader reads it out.
 */
.mael-form.mael-form .mael-btn-primary::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.8;
}

/* A button that is busy shows its spinner, not a direction to go in. */
.mael-form.mael-form .mael-btn-primary.is-loading::after {
	display: none;
}

.mael-form.mael-form .mael-btn-primary:hover {
	background: var(--mael-accent-hover);
}

.mael-form.mael-form .mael-btn-ghost {
	background: transparent;
	color: var(--mael-text);
	border-color: var(--mael-border-strong);
}

.mael-form.mael-form .mael-btn-ghost:hover {
	background: var(--mael-surface-2);
}

.mael-form.mael-form .mael-btn:disabled,
.mael-form.mael-form .mael-btn.is-loading {
	opacity: 0.65;
	cursor: not-allowed;
}

.mael-form.mael-form .mael-link {
	padding: 0;
	background: none;
	border: 0;
	color: var(--mael-accent);
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.mael-form.mael-form .mael-switch {
	margin: var(--mael-sp-5) 0 0;
	padding-top: var(--mael-sp-4);
	border-top: 1px solid var(--mael-border);
	font-size: var(--mael-fs-body);
	line-height: 1.6;
	color: var(--mael-muted);
}

/* ====================================================== summary ====== */

.mael-form.mael-form .mael-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--mael-sp-2);
	margin: 0 0 var(--mael-sp-4);
	padding: var(--mael-sp-3);
	background: var(--mael-surface);
	border-radius: var(--mael-radius-sm);
	font-size: var(--mael-fs-sm);
}

.mael-form.mael-form .mael-summary-label {
	color: var(--mael-muted);
}

.mael-form.mael-form .mael-summary-value {
	font-weight: 700;
	color: var(--mael-text);
}

/* =================================================== result card ===== */

.mael-form.mael-form .mael-result {
	background: var(--mael-surface);
	border: 1px solid var(--mael-border);
	border-radius: var(--mael-radius);
	overflow: hidden;
}

.mael-form.mael-form .mael-result-head {
	padding: var(--mael-sp-4) var(--mael-sp-4) 0;
}

.mael-form.mael-form .mael-result-kicker {
	margin: 0 0 var(--mael-sp-1);
	font-size: calc(12px * var(--mael-scale));
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mael-accent);
}

.mael-form.mael-form .mael-result-title {
	margin: 0;
	font-size: var(--mael-fs-lg);
}

.mael-form.mael-form .mael-result-price {
	padding: var(--mael-sp-4);
	border-bottom: 1px solid var(--mael-border);
}

.mael-form.mael-form .mael-price {
	display: block;
	font-size: var(--mael-fs-price);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--mael-text);
}

/* "Kaina tikslinama" is smaller and muted - it is a sentence, not a figure. */
.mael-form.mael-form .mael-price-tbc {
	font-size: var(--mael-fs-xl);
	color: var(--mael-accent);
}

.mael-form.mael-form .mael-vat {
	display: block;
	margin-top: var(--mael-sp-1);
	font-size: var(--mael-fs-sm);
	color: var(--mael-muted);
}

.mael-form.mael-form .mael-result-section {
	padding: var(--mael-sp-4);
	border-bottom: 1px solid var(--mael-border);
}

.mael-form.mael-form .mael-result-section:last-child {
	border-bottom: 0;
}

.mael-form.mael-form .mael-result-subtitle {
	margin: 0 0 var(--mael-sp-2);
	font-size: calc(12px * var(--mael-scale));
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mael-muted);
	font-weight: 700;
}

.mael-form.mael-form .mael-includes {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mael-form.mael-form .mael-includes li {
	position: relative;
	padding-left: 22px;
	margin-bottom: var(--mael-sp-2);
	font-size: var(--mael-fs-body);
	line-height: 1.6;
}

.mael-form.mael-form .mael-includes li:last-child {
	margin-bottom: 0;
}

.mael-form.mael-form .mael-includes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 12px;
	height: 6px;
	border-left: 2px solid var(--mael-accent);
	border-bottom: 2px solid var(--mael-accent);
	transform: rotate(-45deg);
}

.mael-form.mael-form .mael-result-vehicle {
	margin: 0;
	font-size: var(--mael-fs-body);
}

.mael-form.mael-form .mael-pkg-desc {
	font-size: var(--mael-fs-body);
	color: var(--mael-muted);
}

.mael-form.mael-form .mael-pkg-desc p:first-child {
	margin-top: 0;
}

.mael-form.mael-form .mael-pkg-desc p:last-child {
	margin-bottom: 0;
}

.mael-form.mael-form .mael-result.is-tbc {
	border-color: var(--mael-accent);
}

.mael-form.mael-form .mael-tbc-note {
	margin: 0;
	padding: var(--mael-sp-4);
	font-size: var(--mael-fs-body);
	line-height: 1.65;
	color: var(--mael-text);
}

/* ================================================ alerts + states ==== */

.mael-form.mael-form .mael-alert {
	margin: var(--mael-sp-4) 0 0;
	padding: var(--mael-sp-3) var(--mael-sp-4);
	border-radius: var(--mael-radius-sm);
	font-size: var(--mael-fs-body);
	line-height: 1.6;
	font-weight: 600;
}

.mael-form.mael-form .mael-alert p {
	margin: 0 0 var(--mael-sp-3);
}

.mael-form.mael-form .mael-alert p:last-child {
	margin-bottom: 0;
}

.mael-form.mael-form .mael-alert-error {
	background: var(--mael-danger-bg);
	border-left: 3px solid var(--mael-danger);
	color: var(--mael-danger);
}

.mael-form.mael-form .mael-empty,
.mael-form.mael-form .mael-empty-state {
	padding: var(--mael-sp-5);
	text-align: center;
	color: var(--mael-muted);
	background: var(--mael-surface);
	border-radius: var(--mael-radius-sm);
}

.mael-form.mael-form .mael-noscript {
	margin: 0;
	padding: var(--mael-sp-4);
	background: var(--mael-surface);
	border-radius: var(--mael-radius-sm);
	color: var(--mael-text);
}

.mael-form.mael-form .mael-noscript a {
	color: var(--mael-accent);
}

/* --- loading skeleton ---------------------------------------------- */

.mael-form.mael-form .mael-skeleton {
	display: flex;
	flex-direction: column;
	gap: var(--mael-sp-3);
	padding: var(--mael-sp-2) 0;
}

.mael-form.mael-form .mael-skeleton-line {
	display: block;
	height: 18px;
	border-radius: var(--mael-radius-sm);
	background: linear-gradient(
		90deg,
		var(--mael-surface) 0%,
		var(--mael-surface-2) 50%,
		var(--mael-surface) 100%
	);
	background-size: 200% 100%;
	animation: mael-shimmer 1.4s ease-in-out infinite;
}

.mael-form.mael-form .mael-skeleton-line.short {
	width: 55%;
}

@keyframes mael-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* --- success -------------------------------------------------------- */

.mael-form.mael-form .mael-thanks {
	padding: var(--mael-sp-6) var(--mael-sp-4);
	text-align: center;
}

.mael-form.mael-form .mael-thanks-mark {
	width: 56px;
	height: 56px;
	margin: 0 auto var(--mael-sp-4);
	border-radius: 50%;
	background: var(--mael-success-bg);
	color: var(--mael-success);
	font-size: 28px;
	line-height: 56px;
}

.mael-form.mael-form .mael-thanks p {
	margin: 0;
	color: var(--mael-muted);
}

/*
 * A second request starts here. Ghost rather than primary: the job the
 * customer came to do is finished, and this is an offer, not the next step.
 */
.mael-form.mael-form .mael-thanks-again {
	margin-top: var(--mael-sp-5);
}

.mael-form.mael-form .mael-turnstile {
	margin: var(--mael-sp-4) 0 0;
}

/* ============================================ reduced motion ========= */

@media (prefers-reduced-motion: reduce) {
	.mael-form.mael-form *,
	.mael-form.mael-form *::before,
	.mael-form.mael-form *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ================================================ larger screens ===== */

@media (min-width: 560px) {
	.mael-form.mael-form {
		padding: var(--mael-sp-6);
	}

	.mael-form.mael-form .mael-grid2 {
		grid-template-columns: 1fr 1fr;
		gap: var(--mael-sp-4);
	}

	.mael-form.mael-form .mael-cats {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}

	.mael-form.mael-form .mael-actions {
		flex-direction: row;
		justify-content: flex-end;
	}

	.mael-form.mael-form .mael-actions .mael-btn-primary {
		order: 2;
		/* Takes what Back leaves, so the call to action is the wide one. */
		flex: 1 1 auto;
	}

	.mael-form.mael-form .mael-result-head,
	.mael-form.mael-form .mael-result-price,
	.mael-form.mael-form .mael-result-section,
	.mael-form.mael-form .mael-tbc-note {
		padding-left: var(--mael-sp-5);
		padding-right: var(--mael-sp-5);
	}
}

/* The steps nav becomes numbers only when there is no room for labels. */
@media (max-width: 480px) {
	.mael-form.mael-form .mael-step-label {
		display: none;
	}

	.mael-form.mael-form .mael-steps li {
		justify-content: center;
		min-width: 0;
	}

	/*
	 * One category per row on a phone.
	 *
	 * Two 150px cards side by side on a 360px screen leave about 90px of
	 * text column, which is narrower than the word "TRANSPORTAS" - the label
	 * would wrap mid-word even with the clamp in place. A full-width row with
	 * the icon beside the name gives the longest category a whole line, and
	 * takes less vertical space than three stacked cards would.
	 */
	.mael-form.mael-form .mael-cats {
		grid-template-columns: 1fr;
		gap: var(--mael-sp-2);
	}

	.mael-form.mael-form .mael-cat-btn {
		flex-direction: row;
		align-items: center;
		gap: var(--mael-sp-3);
		min-height: 60px;
		padding: var(--mael-sp-3) calc(var(--mael-sp-3) + 26px) var(--mael-sp-3) var(--mael-sp-4);
	}

	.mael-form.mael-form .mael-cat-label {
		align-self: auto;
		width: auto;
		font-size: var(--mael-fs-base);
	}

	.mael-form.mael-form .mael-cat-btn.is-selected::after {
		top: 50%;
		margin-top: -10px;
	}
}