/* ============================================================================
 * Meer voor Mama's — layout + components
 * No hardcoded brand colours. Everything references CSS custom properties
 * set by functions.php (per-brand) or theme.json (neutral palette).
 * Mobile-first: base styles target mobile, media queries add desktop.
 * ========================================================================= */

:root {
	--mvm-brand-primary:    #e31568;
	--mvm-brand-primary-dk: #b3114f;
	--mvm-navy:             #343852;
	--mvm-navy-dark:        #1f2235;
	--mvm-green:            #4bc924;
	--mvm-teal:             #3fc1b0;
	--mvm-surface:          #fdf5f8;
	--mvm-border:           #eadde3;
	--mvm-text:             #1f2235;
	--mvm-text-muted:       #6b6f80;
	--mvm-radius:           14px;
	--mvm-radius-pill:      999px;
	--mvm-shadow-sm:        0 2px 6px rgba(0,0,0,.06);
	--mvm-shadow-md:        0 10px 30px rgba(0,0,0,.08);
	--mvm-container:        1120px;
	--mvm-container-narrow: 720px;
}

/* Reset-ish ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--mvm-surface);
	color: var(--mvm-text);
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, svg, canvas { max-width: 100%; height: auto; }
a { color: var(--mvm-brand-primary); text-decoration: none; }
a:hover { color: var(--mvm-navy); text-decoration: underline; }

h1, h2, h3, h4 {
	font-family: Roboto, "Open Sans", sans-serif;
	color: var(--mvm-navy-dark);
	line-height: 1.15;
	margin: 0 0 .6em;
	font-weight: 800;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 700; }

/* Layout ------------------------------------------------------------------- */
.mvm-container        { width: 100%; max-width: var(--mvm-container);        margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.mvm-container--narrow{ width: 100%; max-width: var(--mvm-container-narrow); margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.mvm-section          { padding: clamp(40px, 8vw, 80px) 0; }
.mvm-section + .mvm-section { padding-top: 0; }

/* Header / footer ---------------------------------------------------------- */
.mvm-header {
	background: #fff;
	border-bottom: 1px solid var(--mvm-border);
	padding: 14px 0;
	position: sticky;
	top: 0;
	z-index: 100;
}
.mvm-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mvm-header__logo { font-family: Roboto, sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--mvm-brand-primary); text-decoration: none; }
.mvm-header__nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 20px; }
.mvm-header__nav a { color: var(--mvm-navy); font-weight: 600; font-size: .95rem; }

.mvm-footer {
	background: var(--mvm-navy-dark);
	color: #c8cad6;
	padding: 40px 0 24px;
	margin-top: 60px;
	font-size: .9rem;
}
.mvm-footer a { color: #fff; }
.mvm-footer__cols { display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 24px; }
.mvm-footer__bar  { border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; text-align: center; }
@media (min-width: 720px) { .mvm-footer__cols { grid-template-columns: repeat(3, 1fr); } }

/* Buttons ------------------------------------------------------------------ */
.mvm-btn {
	display: inline-block;
	background: var(--mvm-brand-primary);
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	padding: 14px 32px;
	border-radius: var(--mvm-radius-pill);
	border: 0;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s, transform .1s;
	box-shadow: var(--mvm-shadow-sm);
}
.mvm-btn:hover  { background: var(--mvm-brand-primary-dk); color: #fff; text-decoration: none; }
.mvm-btn:active { transform: translateY(1px); }
.mvm-btn--ghost { background: transparent; color: var(--mvm-brand-primary); border: 2px solid var(--mvm-brand-primary); box-shadow: none; }
.mvm-btn--send  { background: var(--mvm-green); padding: 16px 48px; font-size: 1.1rem; letter-spacing: .03em; text-transform: uppercase; border-radius: 5px; box-shadow: none; width: 100%; }
.mvm-btn--send:hover { background: #3ea81c; }

/* Funnel pages (landing, step1, step2, thankyou) --------------------------
 * All four share the same chromeless layout: centered title, content block,
 * partner-logo strip at the bottom. No site header, no site footer.
 */
body.mvm-funnel { background: #fff; }

.mvm-funnel-page       { padding: clamp(20px, 4vw, 50px) 0 40px; }
.mvm-funnel__inner     { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 4vw, 40px); }
.mvm-funnel__title     {
	color: var(--mvm-brand-primary);
	text-align: center;
	/* Match the original Divi page exactly: Roboto 500/32px/pink. */
	font-family: "Roboto", Helvetica, Arial, "Lucida Sans Unicode", sans-serif;
	font-weight: 500;
	font-size: 32px;
	line-height: 1.4em;
	letter-spacing: 0;
	margin: 0;
	/* Thin grey divider line under the title (mirrors the Divi et_pb_divider
	   module that sat below the section heading on the original pages).
	   align-self:stretch forces the h1 to span the full width of the flex
	   column parent (.mvm-funnel__inner has align-items:center which would
	   otherwise shrink the heading to its text width). */
	align-self: stretch;
	width: 100%;
	padding-bottom: 20px;
	border-bottom: 1px solid #d8d8d8;
}

/* Partner logos strip — shared across all funnel pages ---------------------
 *
 * Two display modes:
 *   1. Static centred row    — desktop + ≤4 logos  (default .mvm-partners-strip)
 *   2. Infinite CSS marquee  — desktop with >4 logos (.mvm-partners-strip--marquee)
 *                              OR any mobile viewport (forced via media query)
 *
 * Sizes live in CONFIG variables at :root so Willem can request one-liner tweaks.
 */
:root {
	--mvm-partner-logo-w-desktop: 180px; /* target size on desktop, matches Logos_Size.png reference */
	--mvm-partner-logo-w-mobile:  120px;
	--mvm-partner-gap:            clamp(30px, 5vw, 70px);
	--mvm-partner-marquee-speed:  30s;   /* full loop duration */

	--mvm-box-width-desktop:      55vw;  /* target 50-60% viewport width (point 1) */
	--mvm-box-max-width:          720px;
}

.mvm-partners-strip {
	width: 100%;
	max-width: 1100px;
	padding-top: 30px;
	overflow: hidden;
}
.mvm-partners-strip__track {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--mvm-partner-gap);
	flex-wrap: nowrap;
}
.mvm-partners-strip__item { display: inline-flex; align-items: center; flex: 0 0 auto; }
.mvm-partners-strip__item img {
	width: var(--mvm-partner-logo-w-mobile);
	max-width: 100%;
	height: auto;
	opacity: .9;
	transition: opacity .15s;
}
.mvm-partners-strip__item:hover img { opacity: 1; }

@media (min-width: 720px) {
	.mvm-partners-strip__item img { width: var(--mvm-partner-logo-w-desktop); }
}

/* Marquee mode: scroll the doubled track infinitely left. Desktop opts in
 * via the --marquee modifier (applied by partners.php when count > 4). */
@media (min-width: 720px) {
	.mvm-partners-strip--marquee .mvm-partners-strip__track {
		justify-content: flex-start;
		width: max-content;
		animation: mvm-marquee var(--mvm-partner-marquee-speed) linear infinite;
	}
}
/* Mobile: always marquee regardless of count */
@media (max-width: 719px) {
	.mvm-partners-strip .mvm-partners-strip__track {
		justify-content: flex-start;
		width: max-content;
		animation: mvm-marquee var(--mvm-partner-marquee-speed) linear infinite;
	}
}
@keyframes mvm-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); } /* track is doubled → -50% = one full set */
}
.mvm-partners-strip .mvm-partners-strip__track:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.mvm-partners-strip .mvm-partners-strip__track { animation: none; }
}

/* Gift-box animation wrapper ----------------------------------------------- */
.mvm-box-animation {
	/* Mobile (landing page only): break out of the container's 20px side
	   padding so the canvas spans the full viewport width. JS makes the
	   gift box itself bigger on mobile (see CONFIG.box.widthMobile). */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
@media (min-width: 720px) {
	.mvm-box-animation {
		width: var(--mvm-box-width-desktop);
		max-width: var(--mvm-box-max-width);
		margin-left: auto;
		margin-right: auto;
	}
}

/* Form page — two-column image + form layout -------------------------------
 *
 * Left column (image + banner) must stretch to the full form height on
 * desktop. We use align-items: stretch and make the left column a flex
 * container with space-between: banner top, image bottom.
 */
.mvm-form-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	width: 100%;
	max-width: 1100px;
	align-items: start;
}
@media (min-width: 860px) {
	.mvm-form-layout {
		grid-template-columns: 1fr 1.2fr;
		gap: 50px;
		align-items: stretch;
	}
}

.mvm-form-layout__image {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	min-height: 100%;
}
.mvm-form-layout__image img {
	max-width: 100%;
	height: auto;
	display: block;
	margin-top: auto; /* pin image to bottom; banner stays at top */
}

/* Green "fill in your details" ribbon above the image.
 * Horizontal arrow pointing RIGHT (toward the form), matching the original
 * Divi page. Built with two CSS shapes stacked side-by-side so the right
 * edge is a clean chevron tip — not rotated, not tilted.
 */
.mvm-form-banner {
	position: relative;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	background: var(--mvm-green);
	color: #fff;
	font-family: "Open Sans", sans-serif;
	font-weight: 800;
	font-size: clamp(.85rem, 1.3vw, 1.05rem);
	letter-spacing: .02em;
	padding: 14px 22px 14px 22px;
	box-shadow: 0 4px 14px rgba(75, 201, 36, .28);
	z-index: 2;
	white-space: nowrap;
	margin: 10px 0 20px;
}
.mvm-form-banner::after {
	content: "";
	position: absolute;
	right: -22px;
	top: 0;
	bottom: 0;
	width: 24px;
	background: var(--mvm-green);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Mobile: hide the green banner on step 1 only, so the first form fields
   are visible right under the image without scrolling past the banner.
   Also bump form input + label font sizes a bit for legibility on phone. */
@media (max-width: 719px) {
	.mvm-form-layout:has(#mvmf-step1) .mvm-form-banner { display: none; }
	.mvm-form {
		--mvm-form-input-size: 18px;
		--mvm-form-label-size: 18px;
	}
	/* Shrink the funnel title so "Gefeliciteerd met je cadeaupakket!" fits
	   on a single line on the narrowest iPhones (320px) and leaves the
	   partner logo strip visible in the initial viewport. */
	.mvm-funnel__title {
		font-size: clamp(14px, 4.4vw, 22px);
		line-height: 1.3em;
		white-space: nowrap;
		padding-bottom: 12px;
	}
	/* Floated-label fields (select + date): push the input itself down so the
	   permanently-floated label ("Geboortedatum kind x") doesn't overlap the
	   value rendered by the native date picker on mobile. The label is
	   absolutely positioned at top:24px (translated to y≈2px when floated),
	   so we add top padding directly to the input so it starts below it.
	   Using padding on the input (not the field) keeps the label's anchor
	   point untouched. */
	.mvm-form__field--floated input,
	.mvm-form__field--floated select {
		padding-top: 18px;
	}
}

/* Form card — flat, no border, no shadow ----------------------------------- */
.mvm-form-page__intro { text-align: center; margin-bottom: 10px; color: var(--mvm-navy); }

.mvm-form {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 40px 0 0;
	box-shadow: none;
	width: 100%;
}
.mvm-form--narrow { max-width: 640px; margin: 0 auto; }
.mvm-form__row     { display: grid; gap: 12px 18px; margin-bottom: 4px; grid-template-columns: 1fr; }
.mvm-form__row[hidden] { display: none; }
/* Mobile: 2-column rows stay 2-column (matching desktop). 3-column rows
 * collapse to 2+1 so the labels stay readable on narrow screens. */
.mvm-form__row--2  { grid-template-columns: 1fr 1fr; }
.mvm-form__row--3  { grid-template-columns: 1fr 1fr 2fr; }
.mvm-form__row--3a { grid-template-columns: 1fr 1fr; }
/* postcode | toev | huisnr — four equal tracks so postcode spans the left
   half (matching Straat/Email below) and huisnr sits in track 4 so its
   right edge lines up with Plaats/Telefoon below. toev fills track 3.
   Explicit grid-row:1 on every child forces them onto a single row — grid
   was otherwise auto-flowing toev to row 2 on narrow viewports because the
   intrinsic min-width of the input exceeded the 1fr track. min-width:0 on
   the field AND its input lets them shrink below min-content. */
.mvm-form__row--3b { grid-template-columns: 1fr 1fr 1fr 1fr; }
.mvm-form__row--3b > .mvm-form__field       { min-width: 0; }
.mvm-form__row--3b > .mvm-form__field input { min-width: 0; }
.mvm-form__row--3b > :nth-child(1) { grid-column: 1 / 3; grid-row: 1; } /* postcode */
.mvm-form__row--3b > :nth-child(2) { grid-column: 3;     grid-row: 1; } /* huisnr  */
.mvm-form__row--3b > :nth-child(3) { grid-column: 4;     grid-row: 1; } /* toev    */
.mvm-form__row--3a > :nth-child(3) { grid-column: 1 / -1; }
@media (min-width: 600px) {
	.mvm-form__row--3  { grid-template-columns: 1fr 1fr 2fr; }
	/* voornaam | tussenvoegsel | achternaam */
	.mvm-form__row--3a { grid-template-columns: 2fr 1fr 2fr; }
	.mvm-form__row--3a > :nth-child(3) { grid-column: auto; }
}

/* Honeypot — visually hidden, kept in DOM so bots still fill it */
.mvm-hp {
	position: absolute !important;
	left: -10000px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Form typography — CONFIG (Willem-tunable via :root below)
 *   --mvm-form-label-size    field labels (resting/floated state share size)
 *   --mvm-form-input-size    input/select text (>=16px prevents iOS zoom-on-focus)
 *   --mvm-form-consent-size  consent paragraph
 *   --mvm-form-error-size    inline error message
 *   --mvm-form-accent        material accent (radios + focused underline + link)
 */
:root {
	--mvm-form-label-size:   16px;
	--mvm-form-input-size:   16px;
	--mvm-form-consent-size: 14px;
	--mvm-form-error-size:   13px;
	--mvm-form-accent:       #1976d2;
	--mvm-form-label-rest:   #9aa0a6;
}

/* Inline per-field error message below the input */
.mvm-form__error {
	display: block;
	min-height: 1em;
	margin-top: 4px;
	color: #cc0033;
	font-size: var(--mvm-form-error-size);
	line-height: 1.3;
}

/* Material design field: input first, label absolutely positioned over it,
 * floats up when the input is focused or non-empty (placeholder=" " hack). */
.mvm-form__field {
	position: relative;
	padding-top: 14px;
}
.mvm-form__field input,
.mvm-form__field select,
.mvm-form__field textarea {
	font: inherit;
	font-size: var(--mvm-form-input-size);
	width: 100%;
	padding: 6px 0 6px;
	min-height: 36px;
	border: 0;
	border-bottom: 1px solid var(--mvm-border);
	border-radius: 0;
	background: transparent;
	color: var(--mvm-text);
	transition: border-color .15s;
}
.mvm-form__field input:focus,
.mvm-form__field select:focus,
.mvm-form__field textarea:focus {
	outline: 0;
	border-bottom-color: var(--mvm-form-accent);
	border-bottom-width: 2px;
	box-shadow: none;
}
.mvm-form__field label {
	position: absolute;
	left: 0;
	top: 24px;
	font-size: var(--mvm-form-label-size);
	color: var(--mvm-form-label-rest);
	font-weight: 400;
	pointer-events: none;
	transform-origin: 0 0;
	transition: transform .15s ease, color .15s ease;
}
/* Float label up when input has content (placeholder=" ") or is focused */
.mvm-form__field input:focus + label,
.mvm-form__field input:not(:placeholder-shown) + label {
	transform: translateY(-22px) scale(.78);
	color: var(--mvm-form-accent);
}
.mvm-form__field input:not(:focus) + label {
	color: var(--mvm-form-label-rest);
}
.mvm-form__field input:not(:focus):not(:placeholder-shown) + label {
	color: var(--mvm-form-label-rest);
}
.mvm-form__field--error input,
.mvm-form__field--error select,
.mvm-form__field--error textarea { border-bottom-color: #cc0033; }
.mvm-form__field--error label { color: #cc0033 !important; }

/* Always-floated label variant for <select> and date inputs (these don't
 * support :placeholder-shown so we permanently park the label up top).
 * nowrap keeps "Geboortedatum kind 1" on a single line — otherwise the
 * scaled label wraps to two lines on mobile and the second line collides
 * with the date value rendered inside the native date input. */
.mvm-form__field--floated label {
	transform: translateY(-22px) scale(.78);
	white-space: nowrap;
}
.mvm-form__field--floated input:focus + label,
.mvm-form__field--floated select:focus + label {
	color: var(--mvm-form-accent);
}
.mvm-form__field--floated select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%239aa0a6' d='M6 8L0 0h12z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 4px center;
	padding-right: 22px;
}

/* Compact field — narrow column for short selects (e.g. aantal kinderen).
 * Keeps a generous min-height so the tap target stays mobile-friendly. */
.mvm-form__field--compact {
	max-width: 220px;
}
.mvm-form__field--compact label,
.mvm-form__field--compact select:focus + label {
	/* Question label uses the regular dark body text colour (not the light
	   grey floated-label colour) and doesn't pick up the blue focus accent. */
	color: var(--mvm-text) !important;
	/* Render the question label at the same size as the select's
	   placeholder/value text instead of the .78 scaled-down floated size. */
	transform: translateY(-20px) scale(1);
}
.mvm-form__field--compact select {
	min-height: 44px;
	/* Extra breathing room between the floated label
	   ("Uit hoeveel kinderen bestaat je gezin?") and the value/placeholder
	   inside the select — Willem wants ~2 blank lines below the question. */
	padding-top: 56px;
	/* The shared rule above pins the dropdown arrow vertically centered, but
	   our extra padding-top pushes the value down — recenter the arrow on the
	   value row instead of the whole (now tall) select box. */
	background-position: right 4px bottom 14px;
}
/* Greys out the "Aantal kinderen" placeholder so it matches the light grey
   floated labels used in the other fields (e.g. "Uitgerekende datum").
   Once a real value is picked the select is no longer :invalid and the text
   reverts to the normal --mvm-text colour. */
.mvm-form__field--compact select:invalid {
	color: var(--mvm-form-label-rest);
}

/* Mevr / Dhr radio row -------------------------------------------------------- */
.mvm-form__radios {
	display: flex;
	gap: 32px;
	align-items: center;
	margin-bottom: 8px;
}
.mvm-radio {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 16px;
	color: var(--mvm-text);
	user-select: none;
}
.mvm-radio input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.mvm-radio__dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #b0b0b0;
	background: #fff;
	display: inline-block;
	position: relative;
	transition: border-color .15s;
}
.mvm-radio input:checked + .mvm-radio__dot {
	border-color: var(--mvm-form-accent);
}
.mvm-radio input:checked + .mvm-radio__dot::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--mvm-form-accent);
}
.mvm-radio input:focus-visible + .mvm-radio__dot {
	box-shadow: 0 0 0 3px rgba(25, 118, 210, .2);
}
.mvm-radio__label { line-height: 1; }

/* Consent checkbox row -------------------------------------------------------- */
.mvm-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 24px 0 10px;
	font-size: var(--mvm-form-consent-size);
	line-height: 1.5;
	color: var(--mvm-text);
}
.mvm-form__consent input {
	margin-top: 2px;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	accent-color: var(--mvm-form-accent);
}
.mvm-voorwaarden-link,
.mvm-form__consent a { color: var(--mvm-form-accent); }

.mvm-form__actions { display: block; margin-top: 14px; }
.mvm-form__message { min-height: 1.5em; margin: 14px 0; text-align: center; font-weight: 600; }
.mvm-form__message--error   { color: #cc0033; }
.mvm-form__message--success { color: #4bc924; }

/* Voorwaarden modal -------------------------------------------------------- */
.mvm-voorwaarden-link { text-decoration: underline; cursor: pointer; }
.mvm-voorwaarden-link:hover { filter: brightness(.85); }

.mvm-modal[hidden] { display: none; }
.mvm-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.mvm-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 30, .55);
}
.mvm-modal__dialog {
	position: relative;
	background: #fff;
	border-radius: var(--mvm-radius);
	max-width: 720px;
	width: 100%;
	max-height: 80vh;
	box-shadow: 0 20px 60px rgba(0,0,0,.3);
	padding: 40px 30px 30px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.mvm-modal__close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: transparent;
	border: 0;
	font-size: 28px;
	line-height: 1;
	color: var(--mvm-brand-primary);
	cursor: pointer;
	padding: 4px 10px;
}
.mvm-modal__close:hover { color: var(--mvm-brand-primary-dk); }
.mvm-modal__body {
	overflow-y: auto;
	padding-right: 10px;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--mvm-text);
}
.mvm-modal__body h2 { font-size: 1.2rem; margin-top: 0; color: var(--mvm-brand-primary); }
.mvm-modal__body p  { margin: 0 0 1em; }
body.mvm-modal-open { overflow: hidden; }

/* Thank you ----------------------------------------------------------------
 * Reuses the form-page two-column layout (.mvm-form-layout). Right column
 * holds heading + body + CTA button. Typography matches the original
 * cadeau.meervoormamas.nl Divi page exactly:
 *   - heading: Divi default h1 (30px / #333 / weight 500), bolded to 700
 *   - body:    Divi "bg layout light" defaults (14px / #666)
 *   - button:  #4bc824 / #fff / 18px / 700 / uppercase / 5px radius
 */
.mvm-thankyou__body {
	color: #666;
	font-size: 14px;
	line-height: 1.7em;
}
.mvm-thankyou__heading {
	margin: 0 0 14px;
	font-weight: 700;
	font-size: 30px;
	line-height: 1.4em;
	color: #333;
}
.mvm-thankyou__body p { margin: 0 0 1em; }
.mvm-thankyou__cta { margin: 20px 0 0; }
.mvm-btn--cta {
	/* Override .mvm-btn--send so the CTA matches the original Divi button:
	   sized to content, smaller padding, fixed font-size, always 5px radius. */
	display: inline-block;
	width: auto;
	padding: 0.3em 1em;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	border-radius: 5px;
	background: #4bc824;
	color: #fff;
}
.mvm-btn--cta:hover { background: #3ea81c; color: #fff; }

/* ---------------------------------------------------------------------------
   BE leveradres autocomplete (Zoek je leveradres)
--------------------------------------------------------------------------- */
.mvm-form__leveradres-title { margin-top: 4px; }
.mvm-form__section-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--brand-primary, #660032);
	text-transform: none;
	letter-spacing: 0;
}
.mvm-form__field--leveradres { position: relative; }
.mvm-autocomplete {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin: 2px 0 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
	max-height: 280px;
	overflow-y: auto;
	z-index: 50;
}
.mvm-autocomplete li {
	padding: 8px 12px;
	font-size: 15px;
	line-height: 1.3;
	cursor: pointer;
	color: #222;
}
.mvm-autocomplete li:hover,
.mvm-autocomplete li.is-active {
	background: var(--brand-primary, #660032);
	color: #fff;
}
.mvm-ac__count {
	color: #888;
	font-size: 13px;
	margin-left: 4px;
}
.mvm-autocomplete li:hover .mvm-ac__count,
.mvm-autocomplete li.is-active .mvm-ac__count { color: #f5d6e3; }
.mvm-leveradres-count {
	margin: 4px 2px 0;
	font-size: 13px;
	line-height: 1.3;
	color: #777;
	min-height: 1.3em;
}
.mvm-leveradres-count.is-found    { color: var(--brand-primary, #660032); font-weight: 600; }
.mvm-leveradres-count.is-empty    { color: #b00020; }
.mvm-leveradres-count.is-hint     { color: #999; font-style: italic; }
.mvm-leveradres-count.is-selected { color: #1f7a1f; font-weight: 600; }