/* ==========================================================================
   RedCommerce Multi-Step CF7
   Inherits accent color, fonts, and button styling from Salient / Nectar.
   ========================================================================== */

.rc-multistep {
	/* Salient accent → fallback chain */
	--rc-accent: var(--nectar-accent-color, #00b8d9);
	--rc-accent-hover: var(--nectar-accent-color, #00a3c4);
	/* ── Surface tokens ───────────────────────────────────────────────────
	   Every colour that assumes what is BEHIND the form lives here, so light
	   mode below is a token swap rather than a second copy of this stylesheet.
	   The defaults are the dark set, because that is what this component has
	   always been and every existing form still renders exactly as before. */
	--rc-line-bg: rgba(255, 255, 255, 0.12);
	--rc-circle-border: rgba(255, 255, 255, 0.2);
	--rc-circle-text: rgba(255, 255, 255, 0.35);
	--rc-field-bg: rgba(255, 255, 255, 0.08);
	--rc-field-bg-focus: rgba(255, 255, 255, 0.12);
	--rc-field-border: rgba(255, 255, 255, 0.18);
	--rc-field-text: #fff;
	/* 0.4 read as grey-on-grey against the 8%-white fill, so the prompt was harder to read
	   than the answer. 0.58 still sits clearly below --rc-field-text (#fff), which is what
	   keeps a placeholder looking like a prompt rather than like a filled-in value. */
	--rc-placeholder: rgba(255, 255, 255, 0.58);
	--rc-choice-bg: rgba(255, 255, 255, 0.04);
	--rc-choice-bg-hover: rgba(255, 255, 255, 0.08);
	--rc-choice-border: rgba(255, 255, 255, 0.15);
	--rc-back-border: rgba(255, 255, 255, 0.15);
	--rc-review-bg: rgba(255, 255, 255, 0.06);
	--rc-error: #ef4444;
	--rc-btn-radius: 10px;

	/* Inherit font from Salient body */
	font-family: inherit;
}

/*
 * Light mode. Set per form in the builder; RC_Form_Render puts .rcf-light on the
 * container.
 *
 * Only the tokens change — no rule is repeated, no sizing is touched. That matters:
 * the popup's own light block (`.rc-popup .rc-multistep`, in the widget stylesheets)
 * re-declares the whole field rule to squeeze it into a 380px card, so it also drops
 * the padding to 11px 14px and the type to 14px. A form embedded on a page is not in a
 * card and must keep its own size, so this changes colour and nothing else.
 *
 * Why it is needed at all: every default above assumes a DARK surface. The field is an
 * 8%-white fill inside an 18%-white border with white text — invisible on a white
 * section, which is what a school gets today if they drop [rc_form] anywhere but a dark
 * band. Text colour is stated here because .rc-multistep otherwise inherits it, and on a
 * light section a dark theme's body colour is the one thing that happens to work.
 */
.rc-multistep.rcf-light {
	--rc-line-bg: #e9ecef;
	--rc-circle-border: #dee2e6;
	--rc-circle-text: #adb5bd;
	--rc-field-bg: #f8f9fa;
	--rc-field-bg-focus: #fff;
	--rc-field-border: #dee2e6;
	--rc-field-text: #212529;
	--rc-placeholder: #adb5bd;
	--rc-choice-bg: #f8f9fa;
	--rc-choice-bg-hover: #fff;
	--rc-choice-border: #dee2e6;
	--rc-back-border: #dee2e6;
	--rc-review-bg: #f8f9fa;

	color: #212529;
}

/* ==========================================================================
   Tight field spacing
   ========================================================================== */

.rc-multistep fieldset.rc-step p {
	margin-top: 0 !important;
	margin-bottom: 10px !important;
}

.rc-multistep fieldset.rc-step > br,
.rc-multistep fieldset.rc-step > p > br,
.rc-multistep fieldset.rc-step > p:empty {
	display: none !important;
}

/* Hide the paragraph wrapping the hidden CF7 submit button */
.rc-multistep fieldset.rc-step > p:has(input[type="submit"]),
.rc-multistep fieldset.rc-step > p:has(.wpcf7-submit) {
	display: none !important;
	margin: 0 !important;
}

.rc-multistep fieldset.rc-step .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 0;
}

/* Hide back button — single forward flow */
.rc-multistep .rc-btn-back {
	display: none !important;
}

/* ==========================================================================
   Standalone input styling (when NOT inside popup)
   Match the popup's field appearance so both look identical.
   ========================================================================== */

.rc-multistep input[type="text"],
.rc-multistep input[type="email"],
.rc-multistep input[type="tel"],
.rc-multistep input[type="number"],
.rc-multistep input[type="url"],
.rc-multistep input[type="search"],
.rc-multistep input[type="date"],
.rc-multistep textarea,
.rc-multistep select {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 14px 16px !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.4 !important;
	font-size: 15px !important;
	font-family: inherit !important;
	background: var(--rc-field-bg) !important;
	/*
	 * The typed text. Every other property of this field is stated here with !important —
	 * fill, border, radius, padding, size — and the colour was the one left to the theme,
	 * so what a visitor sees themselves type was a per-theme lottery: white on enjoyriding,
	 * BLACK on dargo, on an 8%-white fill over a near-black section. The placeholder right
	 * below has always been white, so that form showed a white prompt and then swallowed
	 * the answer. Stated here because this whole block only makes sense on a dark surface.
	 */
	color: var(--rc-field-text) !important;
	border: 1.5px solid var(--rc-field-border) !important;
	border-radius: 10px !important;
	outline: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	transition: border-color 0.15s ease, background 0.15s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.rc-multistep input[type="text"]:focus,
.rc-multistep input[type="email"]:focus,
.rc-multistep input[type="tel"]:focus,
.rc-multistep input[type="number"]:focus,
.rc-multistep input[type="url"]:focus,
.rc-multistep textarea:focus,
.rc-multistep select:focus {
	border-color: var(--rc-accent, #00b8d9) !important;
	background: var(--rc-field-bg-focus) !important;
}

/*
 * Autofilled fields must look like every other field.
 *
 * Reported 2026-08-08 with a screenshot: on a dark form, the two fields the browser had
 * filled in came out WHITE with dark text while the empty ones stayed dark. Nothing in
 * this file explains that, and that is the point: Chrome paints an autofilled input at UA
 * level, and it beats a normal declaration no matter how many !importants are on it. Which
 * fields were affected is the tell — exactly the ones with a value in them.
 *
 * The inset box-shadow is the only way to repaint the fill: it is drawn over the UA
 * background, and it is 1000px so it covers the field at any height. -webkit-text-fill-color
 * is the matching trick for the text, because `color` is ignored there too.
 *
 * The absurd transition duration is deliberate and is the standard workaround: Chrome
 * repaints the yellow fill on its own schedule after the value lands, and a transition it
 * never finishes is what stops the flash. Do not "tidy" it to a sane number.
 *
 * :autofill without the prefix covers Firefox and anything else that implements the
 * standard selector. Listed separately, because one unknown selector in a group invalidates
 * the whole group in some engines and would take the -webkit- rule down with it.
 */
.rc-multistep input:-webkit-autofill,
.rc-multistep input:-webkit-autofill:hover,
.rc-multistep textarea:-webkit-autofill,
.rc-multistep select:-webkit-autofill {
	-webkit-text-fill-color: var(--rc-field-text) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--rc-field-bg) inset !important;
	box-shadow: 0 0 0 1000px var(--rc-field-bg) inset !important;
	caret-color: var(--rc-field-text) !important;
	border: 1.5px solid var(--rc-field-border) !important;
	border-radius: 10px !important;
	transition: background-color 100000s ease-in-out 0s !important;
}

.rc-multistep input:-webkit-autofill:focus,
.rc-multistep textarea:-webkit-autofill:focus,
.rc-multistep select:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--rc-field-bg-focus) inset !important;
	box-shadow: 0 0 0 1000px var(--rc-field-bg-focus) inset !important;
	border-color: var(--rc-accent, #00b8d9) !important;
}

.rc-multistep input:autofill,
.rc-multistep textarea:autofill,
.rc-multistep select:autofill {
	background: var(--rc-field-bg) !important;
	color: var(--rc-field-text) !important;
	border: 1.5px solid var(--rc-field-border) !important;
}

.rc-multistep input::placeholder,
.rc-multistep textarea::placeholder {
	color: var(--rc-placeholder) !important;
	opacity: 1 !important;
}

.rc-multistep textarea {
	min-height: 80px !important;
	/*
	 * A cap, because `height: auto` above hands the height to the rows attribute and
	 * CF7 defaults a bare [textarea] to rows="10". Inside a 340px popup that is a
	 * 240px box: the step holding the "Bericht" field came out 311px tall next to a
	 * 244px details step, so the card jumped a third of its height on the last step.
	 *
	 * 178px is 7 rows — 7 × 21px line (1.4 × 15px) + 28px padding + 3px border — which
	 * lands that step within a few pixels of the 4-field step beside it. A cap and not
	 * a height, so the native forms are untouched: RC_Form_Render emits rows="4" (115px)
	 * and stays exactly as it was. Over the cap the textarea scrolls internally.
	 */
	max-height: 178px !important;
	resize: vertical !important;
}

/* ==========================================================================
   Progress indicator
   ========================================================================== */

.rc-multistep .rc-progress {
	margin-bottom: 20px !important;
	padding: 0 4px !important;
}

.rc-multistep .rc-progress-inner {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	width: 100% !important;
}

.rc-multistep .rc-step-circle {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	flex-shrink: 0 !important;
	transition: all 0.3s ease;
	border: 2px solid var(--rc-circle-border) !important;
	background: transparent !important;
	color: var(--rc-circle-text) !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	box-shadow: none;
}

.rc-multistep .rc-step-circle.active {
	background: var(--rc-accent) !important;
	border-color: var(--rc-accent) !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(0, 184, 217, 0.35) !important;
}

.rc-multistep .rc-step-circle.completed {
	background: transparent !important;
	border-color: var(--rc-accent) !important;
	color: var(--rc-accent) !important;
}

.rc-multistep .rc-step-line {
	flex: 1 1 auto !important;
	height: 2px !important;
	min-height: 2px !important;
	background: var(--rc-line-bg) !important;
	position: relative !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.rc-multistep .rc-step-line-fill {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	height: 100% !important;
	width: 0%;
	background: var(--rc-accent) !important;
	transition: width 0.4s ease;
}

/* ==========================================================================
   Fieldset show / hide
   ========================================================================== */

.rc-multistep fieldset.rc-step {
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
}

.rc-multistep fieldset.rc-step.active {
	display: block !important;
	visibility: visible !important;
	height: auto !important;
	overflow: visible !important;
	opacity: 1 !important;
	max-height: none !important;
	animation: rcSlideIn 0.3s ease;
}

/* Ensure inputs/paragraphs inside active steps are never hidden by theme CSS.
   Salient hides <p> tags inside .wpcf7-form fieldset — override with !important.

   The picker is cut out of it, and that exclusion is load-bearing. This is a blanket
   `display: block !important` on every span in the step, and the picker's card is built
   out of spans on purpose (it is printed inside a <p>, which a browser closes before a
   <div>). Caught by this rule the card lost every flex row AND its `[hidden]`, so it
   stood open on the page with its header stacked three rows high. Shipped that way in
   4.134.0. `:not(.rc-pick *)` keeps the guarantee for every span this was written for
   and lets the card lay itself out.

   The read-back rows are cut out for exactly the same reason. A bevestiging field puts
   .rc-review-panel INSIDE a step (it used to be injected after the last one, out of this
   rule's reach), and each row is a flex pair of spans — label left, answer right. Blanket
   `display: block` stacks the answer under its own label on every row. */
.rc-multistep fieldset.rc-step.active p,
.rc-multistep fieldset.rc-step.active span:not(.rc-pick):not(.rc-pick *):not(.rc-review-row *),
.rc-multistep fieldset.rc-step.active .wpcf7-form-control-wrap {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	overflow: visible !important;
}

.rc-multistep fieldset.rc-step.active input,
.rc-multistep fieldset.rc-step.active textarea,
.rc-multistep fieldset.rc-step.active select {
	visibility: visible !important;
	opacity: 1 !important;
}

@keyframes rcSlideIn {
	from {
		opacity: 0;
		transform: translateX(10px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Hide the CF7 submit button — our shared button triggers it. */
.rc-multistep input[type="submit"],
.rc-multistep button[type="submit"],
.rc-multistep .wpcf7-submit {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ==========================================================================
   Buttons — inherit Salient styling
   ========================================================================== */

.rc-multistep .rc-btn-group {
	display: flex !important;
	flex-direction: row !important;
	/*
	 * Both buttons scale with the popup, so the pair always fits one row.
	 *
	 * The popup-width setting goes down to 320px, and at 16px type the last
	 * step's "Stuur aanvraag" no longer fit next to "Terug" — the label broke
	 * in half inside the button. --rc-w is the popup's own width, set inline
	 * on .rc-popup, so the buttons can simply follow it: 380px and up gives
	 * the 16px this always had, narrower shrinks the type and (through the em
	 * padding below) the padding and gaps with it.
	 *
	 * Unset --rc-w (the form outside a popup) resolves to 380px, so nothing
	 * outside the popup changes.
	 */
	font-size: clamp(12px, calc(var(--rc-w, 380px) * 0.042), 16px) !important;
	/* Last-ditch only: with the scaling above the pair fits at every width the
	   setting allows, but a freakishly wide theme font must stack rather than
	   spill out of the popup. */
	flex-wrap: wrap !important;
	gap: 0.625em !important;
	margin-top: 12px !important;
}

.rc-multistep .rc-btn-group .rc-btn-next {
	flex: 1 1 auto !important;
	/* The back button is nowrap, so it never gives up width; this one is
	   flex: 1 1 auto and took whatever was left. On a 380px popup the last
	   step's longer label ("Stuur aanvraag" instead of "Volgende") no longer
	   fit, and with no white-space rule it broke into two lines inside the
	   button. Match the back button: the row wraps, the label does not. */
	white-space: nowrap !important;
	min-width: 0 !important;
	/* em, so the padding shrinks with the type on a narrow popup. 0.875em/1.5em
	   is the 14px/24px this had at the 16px base. */
	padding: var(--rc-btn-padding, 0.875em 1.5em) !important;
	background: var(--rc-accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--rc-btn-radius) !important;
	font-size: var(--rc-btn-size, 1em) !important;
	font-weight: var(--rc-btn-weight, 700) !important;
	font-family: inherit !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5em !important;
	transition: opacity 0.2s ease, transform 0.1s ease;
	line-height: 1.4 !important;
	text-decoration: none !important;
	letter-spacing: var(--rc-btn-spacing, 0.5px) !important;
	text-transform: var(--rc-btn-transform, none) !important;
}

/* The icons are flex items, so they would shrink before the text does and
   arrive squashed to an oval. Fix the aspect, and size them in em so they
   follow the type down on a narrow popup (1.125em = the 18px at base). */
.rc-multistep .rc-btn-group .rc-btn-next svg,
.rc-multistep .rc-btn-group .rc-btn-back svg {
	flex-shrink: 0 !important;
	width: 1.125em !important;
	height: 1.125em !important;
}

/* The step that sends the aanvraag has no arrow, because there is nothing after it
   to point at. This is what the popup's own booking buttons already do (bookBtns()
   in rc-premium.js appends the arrow only while the label is "Volgende"); updateButtons()
   in multistep.js puts .is-final on the button for every other label. */
.rc-multistep .rc-btn-group .rc-btn-next.is-final svg {
	display: none !important;
}

.rc-multistep .rc-btn-group .rc-btn-next:hover {
	opacity: 0.88;
}

.rc-multistep .rc-btn-group .rc-btn-next:active {
	transform: scale(0.98);
}

.rc-multistep .rc-btn-group .rc-btn-back {
	/* em for the same reason as the next button: 0.875em/1.125em is the
	   14px/18px this had at the 16px base. */
	padding: var(--rc-btn-padding, 0.875em 1.125em) !important;
	background: transparent !important;
	color: inherit !important;
	border: 2px solid var(--rc-back-border) !important;
	border-radius: var(--rc-btn-radius) !important;
	font-size: var(--rc-btn-size, 1em) !important;
	font-weight: var(--rc-btn-weight, 700) !important;
	font-family: inherit !important;
	cursor: pointer !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.375em !important;
	transition: opacity 0.2s ease, transform 0.1s ease;
	white-space: nowrap !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	letter-spacing: var(--rc-btn-spacing, 0.5px) !important;
	text-transform: var(--rc-btn-transform, none) !important;
	opacity: 0.5;
}

.rc-multistep .rc-btn-group .rc-btn-back:hover {
	opacity: 0.75;
}

.rc-multistep .rc-btn-group .rc-btn-back:active {
	transform: scale(0.98);
}

.rc-multistep .rc-btn-group .rc-btn-back.visible {
	display: flex !important;
}

/* ==========================================================================
   The way out: WhatsApp

   A whatsapp field renders here, under the button row, rather than in the step
   it was dragged into. The button row is one element for the whole form and
   sits outside every fieldset, so a link drawn inside a step could only ever
   appear ABOVE it. RC_Form_Render::form() prints one .rc-wa per step instead,
   and multistep.js swaps which one is on screen.

   Hidden by default and shown by .active, NOT the other way round: a form
   whose JavaScript never runs then shows the block PHP marked active (step 1)
   and nothing else, rather than every step's block stacked at once.
   ========================================================================== */

.rc-multistep .rc-wa {
	display: none;
	margin-top: 14px;
}

.rc-multistep .rc-wa.active {
	display: block;
}

/*
 * On the page only. Never inside a popup.
 *
 * The popup does not render a second form: the booking widget CLONES the page's form out
 * of #rcp-bookform-src, and the WhatsApp popup renders the same markup inside .rc-popup.
 * One render, two places, so PHP cannot tell them apart and this has to be said here.
 *
 * Why it must not be in there: the popup already offers WhatsApp. In booking mode the
 * floating bar carries a Chat button, and in WhatsApp mode the popup IS the WhatsApp
 * button. A second one under the form is the same offer twice on one small card, and the
 * two are counted as different things.
 */
#rcp-root .rc-wa,
#rc-popup .rc-wa,
.rc-popup .rc-wa {
	display: none !important;
}

/* The word with a rule either side, copied from .rc-popup-divider in
   rc-popup-frontend.css down to the 10px gap and the 12px/500 type. That
   divider is the one a school already sees in WhatsApp mode ("of vul snel het
   formulier in"), and this is the same moment in the same product, so it is
   the same object. Only the wording is shorter: the form IS the page here, so
   there is nothing to send them to.

   Colours come from the theme tokens rather than the popup's literal #e9ecef /
   #adb5bd. The popup is always a white card; a form can be dropped on a black
   section, where a near-white hairline is a bright line across the page. In
   light mode the tokens resolve to #dee2e6 / #adb5bd, which is that same
   divider. */
.rc-multistep .rc-wa-or {
	display: flex !important;
	align-items: center;
	gap: 10px;
	margin: 10px 0;
	color: var(--rc-placeholder);
	font-size: 12px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
}

.rc-multistep .rc-wa-or::before,
.rc-multistep .rc-wa-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--rc-field-border);
}

/* The form's OWN outlined control, not the popup's green pill.

   Same border, fill and radius as .rc-choice-item, and the button row's padding
   and type, so it reads as one more control on this form rather than a piece of
   another product pasted in. Filled green here would be a second primary button
   beside Volgende, and a form with two primary buttons has none.

   The green is the glyph, and only the glyph. That mark is what a visitor
   recognises before reading a word; the border does not have to shout it too. */
.rc-multistep .rc-wa-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
	box-sizing: border-box;
	padding: var(--rc-btn-padding, 0.875em 1.125em) !important;
	background: var(--rc-choice-bg) !important;
	color: inherit !important;
	border: 2px solid var(--rc-choice-border) !important;
	border-radius: var(--rc-btn-radius) !important;
	font-size: var(--rc-btn-size, 1em) !important;
	/* 600, not the button row's 700. This is the quieter of the two ways on, and at
	   the same weight as Volgende it argued with it. Stated rather than taken from
	   --rc-btn-weight for that reason: it is deliberately not that number. */
	font-weight: 600 !important;
	font-family: inherit !important;
	line-height: 1.4 !important;
	letter-spacing: var(--rc-btn-spacing, 0.5px) !important;
	text-transform: var(--rc-btn-transform, none) !important;
	text-decoration: none !important;
	cursor: pointer;
	/*
	 * .rc-choice-item's transition, property for property and time for time — and
	 * !important, which is the whole reason the hover looked broken.
	 *
	 * Measured in Chrome on the live page: without it Salient's own rule for
	 * `.span_12.light .wpb_text_column a`, which sets transition to opacity .3s and
	 * colour .3s, has specificity (0,3,1). That outranks `.rc-multistep .rc-wa-btn`
	 * at (0,2,0) and replaces the shorthand
	 * wholesale, so border-color and background were not in the transition list at all
	 * and the hover SNAPPED. The card sitting above it animated perfectly, because a
	 * card is a <label> and no `a` rule ever reaches it. Reported as "where is hover
	 * animation", and it was a fair question.
	 */
	transition: border-color 0.15s ease, background 0.15s ease !important;
}

/* WhatsApp's own green, stated on the glyph rather than inherited, so the words
   stay the form's colour on every theme. */
.rc-multistep .rc-wa-btn svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: #25d366;
}

/*
 * Hover: .rc-choice-item's, and nothing else.
 *
 * The cards above it do exactly two things when a pointer arrives — the border
 * goes to the site's accent, the fill lifts one shade — so this does exactly
 * those two things, over the same 0.15s. No green fill, no rise, no shadow:
 * this button sits under a column of those cards, and a control that answers a
 * pointer differently from the ones above it looks like it came from another
 * form.
 *
 * The glyph keeps its green throughout. It is the only thing on the button that
 * has to say WhatsApp, and the hover is not what says it.
 *
 * :focus-visible is on the same rule. This is an <a>, so a keyboard reaches it,
 * and a button that reacts to a mouse and not to Tab is half a button.
 */
.rc-multistep .rc-wa-btn:hover,
.rc-multistep .rc-wa-btn:focus-visible {
	border-color: var(--rc-accent) !important;
	background: var(--rc-choice-bg-hover) !important;
	color: inherit !important;
	text-decoration: none !important;
}

/* ==========================================================================
   Validation error styling

   A failed field says so twice: a soft red edge on the box, and one line under
   it with a red mark in front of the words. The mark is not decoration — the
   sentence is four words long, sits under a column of near-identical grey
   boxes, and on a phone it is caught at a glance or not at all.

   What this replaces, and why it looked wrong: `wpcf7-not-valid` is put on the
   control AND on the `.wpcf7-form-control-wrap` around it, by CF7 and by our
   own validators alike. The old rule set a border colour plus a 3px shadow on
   whatever matched, so on the wrap — which has no border of its own and also
   contains the message — the colour did nothing and the shadow drew a pink
   rectangle around the field and its error together. Meanwhile the field itself
   stayed grey inside the popup, because `.rc-popup .rc-multistep
   input[type="text"]` is (0,3,1) with !important and a (0,2,0) rule loses to it
   however loudly it shouts. The one thing meant to be red was not; the one
   thing never meant to be outlined was.
   ========================================================================== */

.rc-multistep {
	/* The edge. Present without shouting: the line underneath is what says what
	   to do, and four full-strength red boxes at once read as breakage rather
	   than as four fields waiting to be filled. */
	--rc-error-edge: rgba(239, 68, 68, 0.45);
	--rc-error-size: 14px;
	--rc-error-mark: 16px;
}

.rc-popup .rc-multistep {
	/* The card is 380px wide and its own type is 14px, so the message steps back
	   one size with it — same relationship, smaller room. */
	--rc-error-size: 13px;
	--rc-error-mark: 15px;
}

/*
 * The control, never the wrap.
 *
 * Six selectors for one declaration, and it is specificity rather than
 * indecision — the same problem the field-icon block further down solves the
 * same way. The popup restates the entire field rule at (0,3,1) with
 * !important, so anything shorter wins on a page and loses in the popup, which
 * is the worst outcome: it looks deliberate.
 */
.rc-multistep .wpcf7-form-control-wrap input.wpcf7-not-valid,
.rc-multistep .wpcf7-form-control-wrap select.wpcf7-not-valid,
.rc-multistep .wpcf7-form-control-wrap textarea.wpcf7-not-valid,
.rc-popup .rc-multistep .wpcf7-form-control-wrap input.wpcf7-not-valid,
.rc-popup .rc-multistep .wpcf7-form-control-wrap select.wpcf7-not-valid,
.rc-popup .rc-multistep .wpcf7-form-control-wrap textarea.wpcf7-not-valid {
	border-color: var(--rc-error-edge) !important;
	box-shadow: none !important;
}

/* The wrap is a container and nothing else. It must never draw a box, because
   the message lives inside it and any box drawn here encloses both. */
.rc-multistep .wpcf7-form-control-wrap.wpcf7-not-valid,
.rc-popup .rc-multistep .wpcf7-form-control-wrap.wpcf7-not-valid {
	border: 0 !important;
	box-shadow: none !important;
	background: none !important;
}

/*
 * The message.
 *
 * Restated for an active step for the same reason the icon is: the "never
 * hidden by theme CSS" block above sets display/height/opacity with !important
 * on every <span> inside `fieldset.rc-step.active`, at (0,3,2). A two-class
 * selector loses to it, so the sizing here would apply on a page and be
 * silently overridden inside a step — the only place this element ever appears.
 */
.rc-multistep .wpcf7-not-valid-tip,
.rc-multistep fieldset.rc-step.active span.wpcf7-not-valid-tip {
	display: block !important;
	color: var(--rc-error) !important;
	font-size: var(--rc-error-size, 14px) !important;
	line-height: 1.35 !important;
	font-weight: 500 !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

/*
 * The mark in front of it: a filled red disc with the exclamation cut out of it.
 *
 * Drawn as a mask over `currentColor` rather than a coloured image, so it can
 * never drift from the words beside it — one colour, set once on the line. The
 * cut-out is `fill-rule="evenodd"`: the two inner rectangles are subpaths of the
 * same path, so they punch holes instead of painting bars.
 *
 * The `.rc-popup` selector is not a duplicate. That stylesheet kills
 * `.rc-popup .rc-multistep p::before` outright to strip Salient's field
 * decorations, at (0,2,2) — exactly the weight of the plain rule here — and the
 * native-form failure message is a <p>. A tie is decided by load order, which is
 * not a thing this should depend on.
 */
.rc-multistep .wpcf7-not-valid-tip::before,
.rc-multistep fieldset.rc-step.active span.wpcf7-not-valid-tip::before,
.rc-popup .rc-multistep .wpcf7-not-valid-tip::before {
	content: '';
	display: inline-block !important;
	vertical-align: -3px;
	width: var(--rc-error-mark, 16px);
	height: var(--rc-error-mark, 16px);
	margin-right: 8px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   Success message (after CF7 submission)
   ========================================================================== */

.rc-multistep .rc-success-message {
	display: none !important;
	text-align: center !important;
	padding: 20px 0 !important;
}

.rc-multistep .rc-success-message.active {
	display: block !important;
	animation: rcSlideIn 0.3s ease;
}

.rc-multistep .rc-success-icon {
	width: 56px !important;
	height: 56px !important;
	background: #22c55e !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto 16px !important;
}

.rc-multistep .rc-success-message h3 {
	font-size: 18px !important;
	color: inherit !important;
	margin-bottom: 8px !important;
}

/* Narrow on purpose. Full card width put the sentence on one long line that the eye has
   to travel; broken over two short centred lines it reads as one statement. ch, not px,
   so it stays roughly the same number of words whatever the theme's font size is. */
.rc-multistep .rc-success-message p {
	max-width: 26ch !important;
	margin-left: auto !important;
	margin-right: auto !important;
	font-size: 14px !important;
	opacity: 0.7;
}

/* "Nog een aanvraag doen". A text link rather than a button: the theme styles real buttons
   on these forms and a second one under the tick would read as the next thing to do. */
.rc-multistep .rc-success-message .rc-again {
	display: inline-block !important;
	margin-top: 14px !important;
	padding: 4px 2px !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit !important;
	font-size: 13px !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	opacity: 0.7;
	cursor: pointer;
	width: auto !important;
}

.rc-multistep .rc-success-message .rc-again:hover,
.rc-multistep .rc-success-message .rc-again:focus-visible {
	opacity: 1;
}

/* ==========================================================================
   Google Places Autocomplete compatibility
   ========================================================================== */

.rc-multistep .wpcf7-gmautocomplete {
	width: 100%;
}

.pac-container {
	z-index: 999999 !important;
}

/* ==========================================================================
   Checkmark animation on step completion
   ========================================================================== */

@keyframes rcCheckBounce {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.35); }
	70%  { transform: scale(0.9); }
	100% { transform: scale(1); }
}

.rc-multistep .rc-step-circle.completing {
	animation: rcCheckBounce 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}

/* ==========================================================================
   Review panel
   ========================================================================== */

.rc-review-panel {
	margin-bottom: 12px;
	animation: rcSlideIn 0.25s ease;
}

.rc-review-title {
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	opacity: 0.5;
	margin-bottom: 10px !important;
}

.rc-review-fields {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.rc-review-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	background: var(--rc-review-bg);
	border-radius: 8px;
	font-size: 14px;
}

.rc-review-label {
	opacity: 0.6;
	flex-shrink: 0;
	font-size: 13px;
}

.rc-review-value {
	font-weight: 600;
	text-align: right;
	word-break: break-word;
	min-width: 0;
}

/* Popup (white background) overrides */
.rc-popup .rc-review-row {
	background: #f8f9fa !important;
}

.rc-popup .rc-review-label {
	color: #868e96 !important;
	opacity: 1 !important;
}

.rc-popup .rc-review-value {
	color: #212529 !important;
}

.rc-popup .rc-review-title {
	color: #adb5bd !important;
	opacity: 1 !important;
}

/* ==========================================================================
   rc_choice — clickable card radio buttons
   ========================================================================== */

.rc-choice-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 4px;
	justify-content: center;
}

/* Items take up 1/3 of the row minus gap */
.rc-choice-group > .rc-choice-item {
	flex: 1 1 calc(33.333% - 6px);
	max-width: calc(50% - 4px);
}

.rc-choice-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-width: 0;
	gap: 6px;
	padding: 12px 14px;
	border: 2px solid var(--rc-choice-border);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
	background: var(--rc-choice-bg);
	text-align: center;
	user-select: none;
	position: relative;
}

.rc-choice-item:hover {
	border-color: var(--rc-accent);
	background: var(--rc-choice-bg-hover);
}

/* :has() for modern browsers */
.rc-choice-item:has(.rc-choice-radio:checked),
.rc-choice-item.selected {
	border-color: var(--rc-accent);
	background: rgba(0, 184, 217, 0.12);
}

.rc-choice-radio {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.rc-choice-icon {
	font-size: 28px;
	line-height: 1;
	color: inherit;
	opacity: 0.65;
	transition: opacity 0.15s ease, color 0.15s ease;
}

/* Built-in inline SVG sizing */
.rc-choice-icon svg {
	width: 28px;
	height: 28px;
	display: block;
}

/* Salient nectar_icon output inside choice cards */
.rc-choice-icon--nectar .nectar_icon,
.rc-choice-icon--nectar .nectar_icon_wrap {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
}

.rc-choice-icon--nectar .nectar_icon svg,
.rc-choice-icon--nectar .nectar_icon img {
	width: 28px !important;
	height: 28px !important;
	display: block !important;
}

.rc-choice-icon--nectar i[class*="im-icon-"] {
	font-size: 28px !important;
	line-height: 1 !important;
}

.rc-choice-item:has(.rc-choice-radio:checked) .rc-choice-icon,
.rc-choice-item.selected .rc-choice-icon {
	opacity: 1;
	color: var(--rc-accent);
}

.rc-choice-label {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	/* The theme colours this and we did not, so on Salient the labels came out in the site's
	   accent (#0dbfe7 on enjoyriding) while the icon beside them stayed #212529 — one card,
	   two colours, and the label read as a link. inherit takes the colour from
	   .rc-choice-item, which is what keeps it right on both the dark base and the .rc-popup
	   light override instead of hard-coding either. !important because the rule we are
	   outranking is the theme's. */
	color: inherit !important;
}

/* Validation error on rc-choice group */
.rc-choice-group.wpcf7-not-valid {
	outline: 2px solid var(--rc-error);
	outline-offset: 4px;
	border-radius: 10px;
}

/* Popup (white background) overrides */
.rc-popup .rc-choice-item {
	border-color: #e9ecef;
	background: #f8f9fa;
	color: #212529;
}

.rc-popup .rc-choice-item:hover {
	border-color: var(--rc-accent);
	background: #eef9fb;
}

.rc-popup .rc-choice-item:has(.rc-choice-radio:checked),
.rc-popup .rc-choice-item.selected {
	border-color: var(--rc-accent);
	background: rgba(0, 184, 217, 0.08);
}

.rc-popup .rc-choice-item .rc-choice-icon {
	opacity: 0.5;
}

.rc-popup .rc-choice-item:has(.rc-choice-radio:checked) .rc-choice-icon,
.rc-popup .rc-choice-item.selected .rc-choice-icon {
	opacity: 1;
	color: var(--rc-accent);
}

/* ==========================================================================
   Mobile responsive
   ========================================================================== */

@media (max-width: 480px) {
	/*
	 * The pair used to be stacked outright on a phone, from before the type scaled with the
	 * popup. It does now: a 340px card gives the row 14px type and both buttons fit beside
	 * each other, which is what the design draws and what a school expects to see. If a
	 * freakishly wide theme font still cannot fit them, flex-wrap up in the .rc-btn-group
	 * rule stacks them anyway. Do not put a flex-direction back here: it fires on the
	 * VIEWPORT, so it stacked the buttons even in a popup that had room for them.
	 *
	 * Compact padding on small screens.
	 */
	.rc-choice-item {
		padding: 10px 6px;
	}

}

/* Spam trap — off-screen rather than display:none, because some bots skip anything that
   is not rendered. Never visible to a human, never focusable.

   This rule LIVES HERE, not in rc-popup-frontend.css, because RC_Form_Render emits
   .rcf-trap and multistep.css is the stylesheet that always ships with that markup.
   It used to live only in rc-popup-frontend.css, which loads in WhatsApp mode ONLY — so
   every booking-mode site rendered [rc_form] with a visible text box labelled "Laat dit
   veld leeg". A visitor who filled it had their lead thrown away as spam. Do not move it
   back. tests/form-trap-hidden.php pins it. */
.rcf-trap {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* The field's accessible name. These forms are placeholder-only — the text lives inside
   the box and there is no heading above it, which is why the builder has no title input —
   but a placeholder is not an accessible name: it vanishes the moment someone types. So
   RC_Form_Render still emits a real <label for="…"> and this parks it off-screen, the
   same way .rcf-trap above is parked. Never display:none: that would drop it out of the
   accessibility tree along with the pixels, which is the one thing it exists for.
   Lives here, beside .rcf-trap, for the reason spelled out above it — this stylesheet is
   the one that always ships with the markup, in BOTH widget modes. */
.rcf-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* The step heading. RC_Form_Render emits <legend class="rc-step-title"> for every step
   that has a title, and this had no rule at all — so the most prominent line on each step
   ("Welke opleiding zoek je?") rendered as a raw browser legend: small, and inside a
   fieldset a legend also punches a gap in the border. It read as a mistake, which is why
   nobody could see what the field was for.

   DO NOT FLOAT THIS. The first fix used the old `float:left; width:100%` trick, with
   `.rc-step-title + * { clear: both }` to undo the float again. That clear lands on the
   wrong element: `+` takes the IMMEDIATELY following sibling, and the renderer emits a
   hidden <input> straight after the legend, which being display:none generates no box and
   clears nothing. The <p> wrappers still looked fine, because a plain block box overlaps a
   float and only its line boxes move — but `.rc-choice-group` is display:flex, and a box
   establishing an independent formatting context may NOT overlap a float. It shrank into
   the room left beside a width:100% float, which is zero: cards collapsed to their 16px of
   padding and the fixed 28px icons burst out sideways off the page. CF7 forms hid it
   (no legend, so no float); only the native renderer emits one.

   display:block does the same job — it takes the legend out of the browser's special
   notched-into-the-border legend positioning — without leaving a float behind.
   tests/step-title-no-float.php pins it. */
.rc-multistep .rc-step-title {
	display: block !important;
	width: 100% !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: inherit !important;
}

/* ==========================================================================
   Field icons (experiment)

   A small icon INSIDE the left of each box, saying what the field wants: a
   person for the name, an envelope for the e-mail, a pin for the address. A
   column of identical grey rectangles reads as work; the same column with icons
   can be recognised without reading it. Whether that moves the number is the
   thing being measured, so this is OFF unless a site sets the
   rc_premium_form_icons option, and neither renderer emits this markup until it
   does.

   Nothing here is a bare element selector. Every rule is scoped to
   .rcf-row--icon or .rcf-ico, so a form without the experiment on cannot be
   reached by it.

   Two selectors for one thing, all the way down. .rcf-row--icon is the native
   renderer, which builds the <p> and can say so. The :has() is the CF7 path,
   where the markup arrives already built by another plugin and all we can do is
   slot an icon in front of the control — so the row has to be found by what it
   contains. This stylesheet already relies on :has() further up (the rule that
   hides the paragraph around CF7's own submit button), so it is not a new
   dependency, and the class keeps the native path working without it.
   ========================================================================== */

/*
 * The field is not one height, and the icon has to sit on its centre line in
 * both. On a page the box is 52px (14px padding twice, a 15px line at 1.4, a
 * 1.5px border twice) and its text starts 16px in; inside the popup card the
 * widget stylesheets squeeze it to 45px with 14px of inset. So the offsets are
 * tokens the popup overrides, rather than numbers that are right in one place
 * and visibly wrong in the other. tests/form-field-icons.php derives all of
 * them from the padding and type that actually produce them, in the stylesheets
 * that set them, and fails if either drifts.
 */
.rc-multistep {
	--rcf-ico-size: 18px;
	--rcf-ico-left: 16px; /* the field's own left inset, so the icon lines up with the text it replaces */
	--rcf-ico-top: 17px;  /* (52 - 18) / 2 */
	--rcf-ico-pad: 42px;  /* left + icon + a gap, which is where the typing now starts */

	/* How far both the icon and the placeholder sit back from the text colour. One
	   number, used twice, because the icon and the words beside it are one line of
	   prompt: two values that were meant to match would drift the first time either
	   was nudged, and the mismatch is the kind nobody can name but everybody sees. */
	--rcf-ico-fade: 0.45;
}

.rc-popup .rc-multistep {
	--rcf-ico-left: 14px;
	--rcf-ico-top: 13px; /* (45 - 18) / 2 */
	--rcf-ico-pad: 38px;

	/*
	 * The one context that has to name the colour. Everywhere else the icon inherits
	 * the text around it and the placeholder inherits the field, and those are the same
	 * colour — but the popup card's text is #0a0a0a while the widget stylesheet hardcodes
	 * its inputs to #212529, so icon and placeholder came out a shade apart. Barely
	 * visible, and still wrong: they are meant to be one prompt.
	 *
	 * This must match the `color` in that stylesheet's own field rule, and the test
	 * reads it from there rather than trusting this comment.
	 */
	--rcf-ico-color: #212529;
}

.rc-multistep .rcf-row--icon,
.rc-multistep p:has(> .rcf-ico) {
	position: relative;
}

/*
 * Offset from the TOP of the row, not centred on it.
 *
 * Centring looked identical until a field failed validation: CF7 prints its
 * "Dit veld is verplicht" inside the same wrapper, the row grows, and a centred
 * icon slides down to the middle of the box PLUS its error message — drifting
 * off the field exactly when the visitor is looking hardest at it. A fixed
 * offset cannot move. It also lands the icon on the first line of a textarea
 * for free, so that case needs no special rule.
 */
.rc-multistep .rcf-ico {
	position: absolute;
	left: var(--rcf-ico-left, 16px);
	top: var(--rcf-ico-top, 17px);
	width: var(--rcf-ico-size, 18px);
	height: var(--rcf-ico-size, 18px);
	display: block;
	z-index: 1;

	/*
	 * Colour comes from the text around it, NOT from --rc-field-*. Those tokens
	 * only tell the truth where .rcf-light has been applied, and inside the popup
	 * it has not: that form gets its light look from the widget stylesheet
	 * styling the inputs directly, while the tokens sit at their dark defaults.
	 * The first version drew a white icon on a white card — present, correct in
	 * every measurement, and invisible.
	 */
	color: var(--rcf-ico-color, inherit);
	opacity: var(--rcf-ico-fade, 0.45);

	/* It is decoration sitting on top of a text box. A click on it must reach the
	   field underneath, and a caret must never land on it. */
	pointer-events: none;

	transition: opacity 0.15s ease, color 0.15s ease;
}

.rc-multistep .rcf-ico > svg {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * Room for it, taken out of the field's own left padding.
 *
 * Four selectors because of specificity, not indecision. The field rule this has
 * to beat is `.rc-popup .rc-multistep input[type="text"]` with !important — two
 * classes, an attribute and an element — so a two-class selector loses even with
 * !important of its own, and the icons would sit on top of the placeholder in
 * the popup only.
 */
/*
 * .rc-pick__trigger is named alongside .wpcf7-form-control on purpose, and it is not
 * decoration: the picker's visible control is a BUTTON, and .wpcf7-form-control sits on
 * the hidden input behind it. So the row drew its icon and then indented nothing, and the
 * icon landed hard against the first letter of "Kies je pakket" with no gap at all.
 *
 * Every rule in this block that indents for the icon has to name it, or the two go out of
 * step again — the padding and the placeholder colour are one look, not two rules.
 */
.rc-multistep .rcf-row--icon .wpcf7-form-control,
.rc-multistep .rcf-row--icon .rc-pick__trigger,
.rc-multistep p:has(> .rcf-ico) .wpcf7-form-control,
.rc-multistep p:has(> .rcf-ico) .rc-pick__trigger,
.rc-popup .rc-multistep .rcf-row--icon .wpcf7-form-control,
.rc-popup .rc-multistep .rcf-row--icon .rc-pick__trigger,
.rc-popup .rc-multistep p:has(> .rcf-ico) .wpcf7-form-control,
.rc-popup .rc-multistep p:has(> .rcf-ico) .rc-pick__trigger {
	padding-left: var(--rcf-ico-pad, 42px) !important;
}

/* The closed field's own text is a placeholder in everything but name, so it fades with
   the icon exactly like a real one does in the rule below. */
.rc-multistep .rcf-row--icon .rc-pick__triggertext.is-empty,
.rc-multistep p:has(> .rcf-ico) .rc-pick__triggertext.is-empty,
.rc-popup .rc-multistep .rcf-row--icon .rc-pick__triggertext.is-empty,
.rc-popup .rc-multistep p:has(> .rcf-ico) .rc-pick__triggertext.is-empty {
	color: currentColor;
	opacity: var(--rcf-ico-fade, 0.45);
}

/*
 * The placeholder matches the icon, because on an icon row they are one prompt: a
 * person and the word "naam", read together. Left alone they were two greys chosen
 * years apart — the icon a fade of the text colour, the placeholder a hardcoded
 * #adb5bd in the popup and a token elsewhere — close enough to look accidental
 * rather than deliberate.
 *
 * currentColor here is the field's own text colour, which is what the visitor is
 * about to type into it. So the prompt is literally the answer, faded: the same
 * relationship the icon has to the row it sits in.
 *
 * Same four selectors, same reason. `.rc-popup .rc-multistep input::placeholder`
 * carries !important, so anything shorter loses and the popup alone keeps its old
 * grey while every other form changes — the worst outcome, because it looks
 * deliberate.
 */
.rc-multistep .rcf-row--icon .wpcf7-form-control::placeholder,
.rc-multistep p:has(> .rcf-ico) .wpcf7-form-control::placeholder,
.rc-popup .rc-multistep .rcf-row--icon .wpcf7-form-control::placeholder,
.rc-popup .rc-multistep p:has(> .rcf-ico) .wpcf7-form-control::placeholder {
	color: currentColor !important;
	opacity: var(--rcf-ico-fade, 0.45) !important;
}

/* The icon follows the field it belongs to, so the pair reads as one control
   rather than a mark that happens to sit inside a box. */
.rc-multistep .rcf-row--icon:focus-within > .rcf-ico,
.rc-multistep p:has(> .rcf-ico):focus-within > .rcf-ico {
	opacity: 1;
	color: var(--rc-accent, #00b8d9);
}

/*
 * Restated for an active step. Further up, "Ensure inputs/paragraphs inside
 * active steps are never hidden by theme CSS" exists to undo Salient hiding <p>
 * and <span> inside a wpcf7 fieldset, and it sets display:block AND height:auto
 * with !important on every one of them. The height would stretch this to the
 * height of the glyph's own line box instead of the 18px square it is.
 */
/*
 * The two :not()s mirror the blanket rule above, and they are load-bearing arithmetic.
 *
 * That rule reads `…active span:not(.rc-pick):not(.rc-pick *)` — (0,5,2). This one used to
 * be `…active span.rcf-ico` — (0,4,2) — and lost, so every field icon in the ACTIVE step
 * ran at full strength while the ones on the steps either side were faded. Nothing broke,
 * both looked plausible on their own, and it only showed up next to the picker's own icon.
 * Matching the count puts this back in front, where it was before the exclusion was added.
 */
.rc-multistep fieldset.rc-step.active span.rcf-ico:not(.rc-pick):not(.rc-pick *) {
	display: block !important;
	width: var(--rcf-ico-size, 18px) !important;
	height: var(--rcf-ico-size, 18px) !important;

	/*
	 * The fade too. That block also sets `opacity: 1 !important` on every span in an
	 * active step, so the icon quietly ran at full strength from the day it shipped
	 * while the placeholder beside it was faded — the exact mismatch the shared token
	 * exists to prevent, hidden because nothing failed and both looked plausible alone.
	 */
	opacity: var(--rcf-ico-fade, 0.45) !important;
}

/* Full strength on focus, and it has to shout to be heard over the same rule. */
.rc-multistep .rcf-row--icon:focus-within > .rcf-ico,
.rc-multistep p:has(> .rcf-ico):focus-within > .rcf-ico,
.rc-multistep fieldset.rc-step.active .rcf-row--icon:focus-within > span.rcf-ico,
.rc-multistep fieldset.rc-step.active p:has(> .rcf-ico):focus-within > span.rcf-ico {
	opacity: 1 !important;
}

/* Under ~360px the indent costs a tenth of the line. The room to type is worth
   more than the icon, so it goes and the field takes its padding back. */
@media (max-width: 359px) {
	.rc-multistep .rcf-ico,
	.rc-multistep fieldset.rc-step.active span.rcf-ico {
		display: none !important;
	}

	.rc-multistep .rcf-row--icon .wpcf7-form-control,
	.rc-multistep p:has(> .rcf-ico) .wpcf7-form-control,
	.rc-popup .rc-multistep .rcf-row--icon .wpcf7-form-control,
	.rc-popup .rc-multistep p:has(> .rcf-ico) .wpcf7-form-control {
		padding-left: var(--rcf-ico-left, 16px) !important;
	}
}

/* ==========================================================================
   Dropdown as a picker
   --------------------------------------------------------------------------
   A <select> drawn as a card in an overlay: a tab per service, a row per
   option. See docs/2026-08-09-package-picker-spec.md.

   Sized to be COMPACT. The first build was drawn from a mockup shot at phone
   scale and came out enormous on a real page — a 560px card with 19px rows
   for what is, in the end, a dropdown. Everything here is one step down from
   that, and the card is 400px rather than 560px.

   The CARD carries its own colours and is light in both themes: multistep.js
   moves it to <body> at init (a fixed overlay is positioned against a
   transformed ancestor, and the popup animates on transform), so it inherits
   none of .rc-multistep's tokens. The TRIGGER stays in the form and uses the
   form's field tokens, so it matches the boxes above and below it.
   ========================================================================== */

.rc-pick {
	display: block;
}

/*
 * The theme owns <button>, and this component is made of them.
 *
 * Salient has a site-wide button style — enjoyriding is on "rounded_shadow" — and it is
 * emitted as `body[data-button-style^="rounded"] button { border-radius: 200px !important }`.
 * Every button here inherited it: the closed field, the two header buttons, the tab
 * arrows, the tabs themselves, every option row and both footer buttons came out as
 * pills, beside inputs that are 10px. Reported as "why is the border radius different",
 * which was the one place it was visible next to something else.
 *
 * So the shapes are restated as a group, with !important, because the rule being
 * outranked has it. The other three are the rest of that same button style: a shadow, and
 * the letter-spacing and capitalisation a theme puts on its call-to-action buttons — none
 * of which belong on a row in a list.
 */
.rc-multistep .rc-pick__trigger,
.rc-pick__card .rc-pick__iconbtn,
.rc-pick__card .rc-pick__arrow,
.rc-pick__card .rc-pick__tab,
.rc-pick__card .rc-pick__opt,
.rc-pick__card .rc-pick__btn {
	box-shadow: none !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/*
 * TWO classes each, and that is the whole reason the card is named here.
 *
 * `body[data-button-style^="rounded"] button` is (0,1,2), and !important on both sides
 * settles nothing — the more specific selector still wins. A single class is (0,1,0) and
 * loses, which is exactly what happened: the field came right because it is written as
 * `.rc-multistep .rc-pick__trigger`, and every button inside the card stayed a pill.
 */
.rc-multistep .rc-pick__trigger        { border-radius: var(--rc-btn-radius, 10px) !important; }
.rc-pick__card .rc-pick__iconbtn       { border-radius: 11px !important; }
.rc-pick__card .rc-pick__arrow         { border-radius: 9px !important; }
.rc-pick__card .rc-pick__tab           { border-radius: 0 !important; }
.rc-pick__card .rc-pick__opt           { border-radius: 13px !important; }
.rc-pick__card .rc-pick__btn           { border-radius: 12px !important; }

/*
 * This has to come out the same HEIGHT as the boxes above and below it, and two of the
 * five numbers that decide that were wrong. Measured on enjoyriding: an input is
 * 14 + 21 + 14 + 1.5x2 = 52px and this was 14 + 27 + 14 + 1x2 = 57px.
 *
 *   line-height  a button inherits the theme's (Prompt at 1.8 = 27px on Salient) unless
 *                it says otherwise. Every field in this stylesheet states 1.4, and it is
 *                stated here for the same reason: the number cannot be left to the theme
 *                or the field is a different height on every site.
 *   border       1.5px, not 1px. Every field here is 1.5px, and 0.5px per side is half of
 *                what a person can see and all of what a row of boxes shows.
 */
.rc-pick__trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 14px 16px;
	border: 1.5px solid var(--rc-field-border, #dee2e6);
	border-radius: var(--rc-btn-radius, 10px);
	background: var(--rc-field-bg, #f8f9fa);
	color: var(--rc-field-text, #212529);
	font: inherit;
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.rc-pick__trigger:hover {
	background: var(--rc-field-bg-focus, #fff);
}

.rc-pick__triggertext {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rc-pick__triggertext.is-empty {
	color: var(--rc-placeholder, #adb5bd);
}

.rc-pick__caret {
	flex: 0 0 auto;
	display: block;
	width: 18px;
	height: 18px;
	opacity: 0.6;
}

.rc-pick__caret svg {
	width: 18px;
	height: 18px;
	display: block;
}

/*
 * The field icon when it is showing the ANSWER rather than the kind of question.
 *
 * What lands in that slot is a tab's icon, and a tab's icon is whatever RC_Choice_Tag
 * resolved: an icon-font glyph on a Salient site, an inline SVG otherwise. The slot was
 * built for one 18px SVG, so both have to be told what size they are — a glyph inherits a
 * font-size from wherever it lands and came out at the field's own 15px, half a step
 * smaller than every other icon in the column.
 */
.rc-multistep .rcf-ico--answer,
.rc-multistep .rcf-ico--answer .rc-choice-icon {
	display: block;
	font-size: var(--rcf-ico-size, 18px);
	line-height: 1;
	/*
	 * The same colour and the same fade as every other icon in the column. NOT the accent.
	 *
	 * What is copied in here is a TAB's icon, and a tab is drawn in the accent when it is
	 * the open one — .rc-choice-icon takes its colour from whatever it lands in, and on
	 * Salient an iconsmind glyph is coloured by the theme as well. Left alone the answer
	 * icon came out blue and fully opaque beside a column of faded grey ones, which reads
	 * as a link or an error rather than as the same kind of thing.
	 */
	color: var(--rcf-ico-color, inherit) !important;
	opacity: var(--rcf-ico-fade, 0.45);
}

.rc-multistep .rcf-ico--answer i[class*="iconsmind-"],
.rc-multistep .rcf-ico--answer i[class*="im-icon-"] {
	font-size: var(--rcf-ico-size, 18px) !important;
	line-height: 1 !important;
	visibility: visible !important;
	color: inherit !important;
}

.rc-multistep .rcf-ico--answer svg [stroke],
.rc-multistep .rcf-ico--answer svg [fill]:not([fill="none"]) {
	stroke: currentColor;
	fill: currentColor;
}

.rc-multistep .rcf-ico--answer svg {
	width: var(--rcf-ico-size, 18px);
	height: var(--rcf-ico-size, 18px);
	display: block;
}

/* The step validator marks the WRAPPER; the input it marks is invisible here. */
.wpcf7-form-control-wrap.wpcf7-not-valid .rc-pick__trigger {
	border-color: var(--rc-error, #ef4444);
}

/*
 * Inside the popup card the trigger has to match the fields above and below it, and the
 * tokens above do not get it there.
 *
 * The widget stylesheets squeeze every field into a 380px card by re-declaring the whole
 * rule at 11px 14px / 14px on ELEMENT selectors — input, textarea, select. A button is
 * none of those, so the trigger kept its page-sized 14px 16px / 15px and stood a head
 * taller than the boxes around it, with a caret sized for a field that big. Reported on
 * mobile, which is where the card is narrowest and the difference is loudest.
 *
 * Stated here rather than in the two widget stylesheets because multistep.css is the one
 * that ships in BOTH widget modes; there it would have to be written twice and would
 * drift, which is the mistake .rcf-trap already made once.
 */
.rc-popup .rc-multistep .rc-pick__trigger {
	padding: 11px 14px;
	font-size: 14px;
	line-height: 1.4;
	color: #212529;
	background: #f8f9fa;
	border: 1.5px solid #dee2e6;
}

.rc-popup .rc-multistep .rc-pick__trigger:hover {
	background: #fff;
}

.rc-popup .rc-multistep .rc-pick__triggertext.is-empty {
	color: #adb5bd;
}

.rc-popup .rc-multistep .rc-pick__caret,
.rc-popup .rc-multistep .rc-pick__caret svg {
	width: 16px;
	height: 16px;
}

/* ---- the card ---------------------------------------------------------- */

.rc-pick__modal {
	--rc-pick-accent: var(--nectar-accent-color, #189ec4);
	--rc-pick-ink: #14181c;
	--rc-pick-line: #eceff1;

	position: fixed;
	inset: 0;
	/*
	 * Above the widget, which is the thing this opens out of.
	 *
	 * 100000 looked like plenty and was not: the floating bar sits at 999999 and the
	 * WhatsApp card goes to 9999999 !important, so on a phone the picker opened UNDER the
	 * popup it belongs to and looked like nothing had happened at all. The card is in
	 * <body>, a sibling of the widget root, so this is a straight comparison — it only has
	 * to be a bigger number, and this is as big as one gets.
	 */
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-size: 15px;
	line-height: 1.35;
	color: var(--rc-pick-ink);
}

/* A <span> has no display:none of its own to fall back on. */
.rc-pick__modal[hidden] {
	display: none;
}

/* Opening and closing both move. The card settles a few pixels and the dim behind it
   fades, so an answer being taken reads as the card leaving rather than as the page
   having jumped. */
.rc-pick__modal .rc-pick__card {
	animation: rcPickIn 0.16s ease-out;
}

.rc-pick__modal.is-closing .rc-pick__card {
	animation: rcPickOut 0.16s ease-in forwards;
}

.rc-pick__modal.is-closing .rc-pick__backdrop {
	animation: rcPickFade 0.16s ease-in forwards;
}

@keyframes rcPickIn {
	from { opacity: 0; transform: translateY(8px) scale(0.99); }
	to   { opacity: 1; transform: none; }
}

@keyframes rcPickOut {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(6px) scale(0.99); }
}

@keyframes rcPickFade {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.rc-pick__modal .rc-pick__card,
	.rc-pick__modal.is-closing .rc-pick__card,
	.rc-pick__modal.is-closing .rc-pick__backdrop {
		animation: none;
	}
}

/*
 * The page behind the card stays where it is.
 *
 * NEVER put `position: fixed` back on <body> here. It held the page just as well, but a
 * pinned body reports a scroll position of 0, and a theme with a shrinking or transparent
 * header reads that as "the visitor is back at the top" and rebuilds the whole navbar for
 * as long as the card is open. Measured on Salient: out of `small-nav`, back to 199px tall,
 * different logo, different menu colours, and all of it snapping back on close.
 *
 * overflow:hidden holds the page at the offset it already has and tells nobody. What the
 * pin used to cover, multistep.js now handles: the scrollbar's width goes onto the body's
 * padding so nothing shifts sideways, and a touchmove listener refuses drags that start
 * outside the card, which is the part iOS ignores overflow for.
 */
html.rc-pick-open,
body.rc-pick-open {
	overflow: hidden;
	overscroll-behavior: none;
}

/* And the card's own list does not hand its scroll on to whatever is behind it once it
   reaches the end. */
.rc-pick__body {
	overscroll-behavior: contain;
}

.rc-pick__backdrop {
	position: absolute;
	inset: 0;
	display: block;
	background: rgba(10, 15, 20, 0.55);
}

.rc-pick__card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(400px, 100%);
	max-height: min(80vh, 640px);
	overflow: hidden;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

/* ---- head -------------------------------------------------------------- */

.rc-pick__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 12px 8px;
}

.rc-pick__title {
	flex: 1 1 auto;
	display: block;
	min-width: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

.rc-pick__iconbtn,
.rc-pick__arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid #e9ecef;
	border-radius: 11px;
	background: #fff;
	color: var(--rc-pick-ink);
	cursor: pointer;
}

.rc-pick__iconbtn:hover,
.rc-pick__arrow:hover {
	background: #f1f3f5;
}

.rc-pick__iconbtn svg,
.rc-pick__arrow svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* ---- tabs -------------------------------------------------------------- */

/* The hairline runs the full width and the active tab's bar sits ON it, which is
   what makes the bar read as "this one" rather than as a second border. */
.rc-pick__tabs {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 8px;
	border-bottom: 1px solid var(--rc-pick-line);
}

.rc-pick__arrow {
	width: 28px;
	height: 28px;
	border-radius: 9px;
}

.rc-pick__arrow[disabled] {
	opacity: 0.3;
	cursor: default;
}

/*
 * NO scroll-snap. It was tried and it is what stopped this scrolling at all.
 *
 * With `scroll-snap-type: x mandatory` the strip refused to move anywhere: measured on the
 * page, even `tablist.scrollLeft = 59` came back 0, with a scrollWidth of 357 in a 256
 * scrollport and a snap point sitting at 59. The arrow looked broken and was not — the
 * container was.
 *
 * Nothing is lost by dropping it: multistep.js already scrolls to a tab's exact start, so
 * there is nothing left for snapping to tidy up.
 */
.rc-pick__tablist {
	flex: 1 1 auto;
	display: flex;
	/*
	 * flex-start, not space-around. Distributing the tabs gives a strip that cannot be
	 * scrolled anywhere useful once it overflows — the spare space is spent on gaps rather
	 * than left of the first tab, and a mandatory snap then had one position it liked and
	 * returned to it. The tabs grow to fill the row instead, so a strip that fits still
	 * looks spread out and one that does not can actually move.
	 */
	justify-content: flex-start;
	gap: 2px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	/* NO scroll-behavior: smooth. It does not merely fail to animate here — it stops the
	   strip scrolling at all. See the note beside the arrow handler in multistep.js. */
	-webkit-overflow-scrolling: touch;
}

.rc-pick__card .rc-pick__tab {
	flex: 1 0 auto;
}

.rc-pick__tablist::-webkit-scrollbar {
	display: none;
}

/* Inactive is BLACK, not grey. Every one of these is clickable, and grey reads as
   switched off. */
.rc-pick__tab {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	max-width: 130px;
	padding: 8px 12px 10px;
	border: 0;
	background: none;
	color: var(--rc-pick-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.rc-pick__tab.is-active {
	color: var(--rc-pick-accent);
}

/* Sits on the hairline, not above it. */
.rc-pick__tab.is-active::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: -1px;
	height: 3px;
	border-radius: 2px 2px 0 0;
	background: var(--rc-pick-accent);
}

.rc-pick__tabico {
	display: block;
	height: 24px;
}

.rc-pick__tabico .rc-choice-icon {
	font-size: 22px;
	opacity: 1;
	color: inherit;
}

.rc-pick__tabico svg,
.rc-pick__tabico .rc-choice-icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

/* ---- rows -------------------------------------------------------------- */

.rc-pick__body {
	flex: 1 1 auto;
	display: block;
	overflow-y: auto;
	padding: 12px;
}

.rc-pick__panel {
	display: none;
}

/*
 * A tab change is a small move, not a cut. 120ms and four pixels: enough that the eye
 * follows the list to the new tab, short enough that nobody waits for it.
 */
.rc-pick__panel.is-active {
	display: block;
	animation: rcPickPanel 0.12s ease-out;
}

@keyframes rcPickPanel {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

/* Somebody who asked their system not to animate things does not get an exception. */
@media (prefers-reduced-motion: reduce) {
	.rc-pick__panel.is-active {
		animation: none;
	}
}

.rc-pick__opt {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0 0 8px;
	padding: 9px 12px;
	border: 1.5px solid #f1f3f5;
	border-radius: 13px;
	background: #fff;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.rc-pick__opt:hover {
	border-color: #dee2e6;
}

.rc-pick__opt.is-selected {
	border-color: var(--rc-pick-accent);
	background: #f2fafd;
	background: color-mix(in srgb, var(--rc-pick-accent) 7%, #fff);
}

.rc-pick__optico {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #eaf6fb;
	background: color-mix(in srgb, var(--rc-pick-accent) 12%, #fff);
	color: var(--rc-pick-accent);
}

.rc-pick__optico .rc-choice-icon {
	font-size: 20px;
	opacity: 1;
	color: inherit;
}

.rc-pick__optico svg,
.rc-pick__optico .rc-choice-icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

.rc-pick__optlabel {
	flex: 1 1 auto;
	display: block;
	min-width: 0;
	font-size: 15px;
	/* 500, not 600. A list where every row is bold has no emphasis in it — the chosen row
	   is already told apart by its border, its tint and its tick. */
	font-weight: 500;
	line-height: 1.3;
}

.rc-pick__optmark {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #b0b6bb;
}

.rc-pick__optmark svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Two marks are printed and one is shown: a tick on the chosen row, a chevron on every
   other. Swapping a class beats rebuilding the markup on every tap. */
.rc-pick__optmark svg:first-child {
	display: none;
}

.rc-pick__opt.is-selected .rc-pick__optmark {
	background: var(--rc-pick-accent);
	color: #fff;
}

.rc-pick__opt.is-selected .rc-pick__optmark svg:first-child {
	display: block;
}

.rc-pick__opt.is-selected .rc-pick__optmark svg:last-child {
	display: none;
}

/* ---- footer ------------------------------------------------------------ */

/* This is the FORM's button row: Terug closes the card, and the filled one presses
   .rc-btn-next, whose wording it copies. See the spec, section 6. */
.rc-pick__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px 12px;
}

.rc-pick__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 16px;
	border: 1.5px solid transparent;
	border-radius: 12px;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.rc-pick__btn svg {
	width: 16px;
	height: 16px;
	display: block;
}

.rc-pick__btn--ghost {
	flex: 0 0 auto;
	border-color: #e9ecef;
	background: #fff;
	color: var(--rc-pick-ink);
}

.rc-pick__btn--ghost:hover {
	background: #f1f3f5;
}

.rc-pick__btn--primary {
	flex: 1 1 auto;
	background: var(--rc-pick-accent);
	color: #fff;
}

.rc-pick__btn--primary:hover {
	filter: brightness(0.95);
}

/* On a phone the card takes the width but stays a card: the overlay is what says
   "this is on top of the page", and a full-bleed sheet loses that. */
@media (max-width: 640px) {
	.rc-pick__modal {
		padding: 12px;
	}

	.rc-pick__card {
		width: 100%;
		max-height: 86vh;
	}
}