/* NetPharm Order Intake — front-end design system
   Matches the medicaat.nl storefront (not the CRM's internal teal system):
   warm off-white canvas, coral-orange accents, sky-blue pill CTA with navy
   text, Poppins headings. Borderless soft-fill inputs with a coral focus
   ring instead of boxed fields. */

.np-intake {
	--np-bg: #E6E4DF;
	--np-tint: #FBEAE0;
	--np-accent: #EF7B4C;
	--np-accent-dark: #DD6538;
	--np-cta-bg: #8FC5EA;
	--np-cta-bg-hover: #79B7E0;
	--np-cta-text: #232B3A;
	--np-focus-ring: rgba(239, 123, 76, 0.35);
	--np-input-bg: #F1EFE9;
	--np-input-bg-hover: #E9E6DE;
	--np-heading: #232B3A;
	--np-text: #232B3A;
	--np-text-muted: #6B7280;
	--np-border-soft: #DEDBD3;
	--np-radius-sm: 8px;
	--np-radius: 12px;
	--np-radius-lg: 20px;
	--np-danger: #B3261E;
	--np-success: #3F8A5B;
	--np-warning: #C9862B;
	--np-font-heading: 'Poppins', sans-serif;
	--np-font-body: 'Poppins', sans-serif;

	font-family: var(--np-font-body);
	color: var(--np-text);
	background: var(--np-bg);
	max-width: 1120px;
	margin: 0 auto;
	padding: 1.5rem;
	border-radius: var(--np-radius-lg);
	-webkit-font-smoothing: antialiased;
}

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

@media (max-width: 700px) {
	.np-intake {
		padding: 0.75rem;
	}
}

/* ---------- Header + stepper ---------- */

.np-header {
	background: linear-gradient(135deg, #FFFFFF 0%, var(--np-bg) 100%);
	border: 1px solid var(--np-border-soft);
	border-radius: var(--np-radius-lg);
	padding: 2rem 2rem 1.75rem;
	color: var(--np-heading);
	margin-bottom: 1.5rem;
}

.np-header__brand {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 1.75rem;
}

.np-header__title {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--np-heading);
}

.np-header__subtitle {
	font-size: 0.9rem;
	color: var(--np-text-muted);
}

.np-stepper {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.5rem;
}

.np-stepper__step {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	position: relative;
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

.np-stepper__step.is-active,
.np-stepper__step.is-complete {
	opacity: 1;
}

.np-stepper__icon {
	position: relative;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--np-input-bg);
	border: 1.5px solid var(--np-border-soft);
	color: var(--np-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.np-stepper__icon svg {
	width: 18px;
	height: 18px;
}

.np-stepper__step.is-active .np-stepper__icon {
	background: var(--np-accent);
	border-color: var(--np-accent);
	color: #fff;
}

.np-stepper__step.is-complete .np-stepper__icon {
	background: #fff;
	border-color: var(--np-accent);
	color: var(--np-accent);
}

.np-stepper__check {
	display: none;
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 50%;
	color: var(--np-accent);
}

.np-stepper__check svg {
	width: 16px;
	height: 16px;
}

.np-stepper__step.is-complete .np-stepper__check {
	display: flex;
}

.np-stepper__label {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--np-heading);
	display: none;
}

@media (min-width: 720px) {
	.np-stepper__label {
		display: inline;
	}
}

/* ---------- Checkout-style layout ---------- */

.np-intake__body {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
}

.np-intake__form {
	flex: 1;
	min-width: 0;
	background: #fff;
	border-radius: var(--np-radius-lg);
	padding: 2rem;
	/* Matches .np-summary__inner's own top padding (1.5rem) exactly, so
	   this card's content starts at the same height as the sidebar
	   card's — otherwise this card's extra 0.5rem of its own top padding
	   compounds with the .np-step__title that used to sit here, and the
	   two cards' first lines don't land on the same row. */
	padding-top: 1.5rem;
	border: 1px solid var(--np-border-soft);
}

@media (max-width: 860px) {
	.np-intake__body {
		flex-direction: column;
	}
	.np-intake__form {
		padding: 1.25rem;
		/* .np-intake__body's align-items: flex-start (needed at desktop
		   width so the two side-by-side cards don't stretch to match
		   each other's height) has a side effect once flex-direction
		   flips to column here: flex-start now controls the CROSS axis,
		   which is horizontal in a column layout, so without an explicit
		   width this card shrink-wraps to whatever its current content's
		   natural width is — narrower with just a short product list
		   showing, wider once longer dosage text/a "Wijzigen" chip are
		   visible. .np-summary already has its own width: 100% for this
		   same reason; this card needs the same explicit override. */
		width: 100%;
	}
}

.np-step__title {
	font-family: var(--np-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 0.4rem;
}

/* Both this and .np-summary__title below needed a SECOND attempt at
   this fix: adding !important directly on .np-step__title wasn't
   enough on its own, because Divi's own dark-layout heading rule
   (`.et_pb_bg_layout_dark h2`, or similar) also carries !important —
   and when both sides have !important, the tie is broken by
   specificity, not by whoever declared it, and Divi's class+tag
   selector out-specifies a plain single class. Anchoring to
   #np-intake-app (an ID, id() specificity always beats any number of
   classes/tags) is what actually wins regardless of exactly how Divi's
   own selector is written. */
#np-intake-app .np-step__title {
	color: var(--np-heading) !important;
}

.np-step__intro {
	color: var(--np-text-muted);
	font-size: 0.9rem;
	margin: 0 0 1.1rem;
}

/* Bevestigen-step-only note (step-confirm.php): same small
   icon + muted-text pattern as .np-summary__trust in the sidebar, so it
   reads as a quiet aside rather than a page intro. Placed at the bottom
   of that step's own markup, right above the shared Vorige/submit nav
   row in wizard.php — "u kunt terug om iets aan te passen" lands right
   next to the button it's actually talking about, instead of sitting as
   a top blurb before you've even seen what there is to check. */
.np-step__note {
	display: flex;
	/* flex-start, not center — this text wraps to 2 lines, and centering
	   the icon on the whole block (both lines together) pushes it down
	   past where line 1 actually sits, which read as MORE wrong than the
	   original top-alignment, not less. flex-start anchors the icon to
	   the block's top edge instead; the svg rule below then nudges it
	   down by exactly half the gap between line-height and icon size, so
	   it centers on line 1 alone — line 2 never factors in, no matter
	   how long the text gets. line-height is set explicitly (matching
	   .np-consent__points' own 1.5) because that nudge has to be computed
	   from a known value, not the browser/font's unspecified default. */
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--np-border-soft);
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--np-text-muted);
}

.np-step__note svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	/* Centers the icon within line 1's own line-box: (line-height − icon
	   height) ÷ 2. With font-size 0.8rem and line-height 1.5 above, the
	   line box is 0.8rem × 1.5 tall. */
	margin-top: calc((0.8rem * 1.5 - 16px) / 2);
	color: var(--np-accent);
}

/* ---------- Fields: borderless soft-fill inputs ---------- */

.np-form-grid {
	display: grid;
	/* minmax(0, 1fr), not plain 1fr — a bare `fr` track's real minimum
	   width is "auto" (the largest min-content size of anything ever
	   placed in it, across every row, not just its own row), not 0.
	   Every field here used to be small enough for that not to matter,
	   but a wide multi-part field (like Adres) spanning both columns
	   feeds its own minimum size into both columns' floors unevenly —
	   exactly what threw off the two columns' widths relative to each
	   other, on rows that have nothing to do with Adres. minmax(0, 1fr)
	   removes that content-based floor entirely, so both columns always
	   split the row exactly 50/50 regardless of what any field (on any
	   row) needs internally. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.1rem 1.25rem;
	margin-bottom: 1.25rem;
}

@media (max-width: 700px) {
	.np-form-grid {
		grid-template-columns: 1fr;
	}
}

.np-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

/* Voornaam/Tussenvoegsel/Achternaam, one full-width row: Voornaam and
   Achternaam each get a fixed, comfortable width (matching BSN above
   and each other, by request), and Tussenvoegsel takes up exactly
   whatever's left between them — not a separate narrow column of its
   own next to a leftover gap, but the gap itself. */
.np-field--split-name {
	display: grid;
	/* Voornaam and Achternaam both capped at the same 14rem (matching
	   BSN above them, and each other) — Achternaam is NOT meant to be
	   wider than Voornaam here, just no longer squeezed into a
	   leftover sliver next to a dead gap. Tussenvoegsel's 1fr now
	   properly absorbs the real remaining space between them (roughly
	   656px card width minus 2×14rem minus gaps ≈ 180px), instead of
	   being starved down near its own 4rem floor. */
	grid-template-columns: minmax(9rem, 14rem) minmax(4rem, 1fr) minmax(9rem, 14rem);
	gap: 0.75rem;
}

.np-field--split {
	display: grid;
	/* minmax() floors are a no-op at normal desktop widths (the 1fr/2fr
	   split already exceeds them) — they only kick in as a safety net if
	   this half of .np-form-grid ends up narrower than expected, so the
	   input can never be squeezed thinner than a usable typing width.
	   7rem is sized for "1234AB" (6 chars) plus this rule's own padding
	   now that the padding itself is protected against theme overrides. */
	grid-template-columns: minmax(7rem, 1fr) minmax(9rem, 2fr);
	gap: 0.75rem;
}

/* Straatnaam/Woonplaats/Land, one full-width row, each with its own
   label (like Postcode/Huisnr./Toev. below, not a shared label). Street
   name is the dominant column (can be a genuinely long name, e.g.
   "'s-Hertogenbosch"-style), Woonplaats and Land roughly equal and
   still generous. Straatnaam and Woonplaats are usually filled in
   automatically by bindAddressLookup() (intake-form.js) once
   Postcode/Huisnummer below are entered — still real, editable inputs
   either way, in case the lookup doesn't apply (non-Nederland) or
   doesn't find a match. These three are combined server-side into the
   single straat_db value the CRM's `orders` table actually stores (see
   Perl_Bridge::build_address_line()) — the CRM's own downstream crm.pl
   still re-splits that one combined string later by guessing where the
   house number starts, and this change doesn't touch or fix that (out
   of scope — see build_address_line()'s docblock). What this DOES
   guarantee is that the plugin itself never has to guess: huisnummer is
   always a real, separately-validated field, not something extracted
   after the fact from one free-text box that might not even contain a
   number. */
.np-field--split-address {
	display: grid;
	grid-template-columns: minmax(9rem, 1.6fr) minmax(9rem, 1.2fr) minmax(9rem, 1.2fr);
	gap: 0.75rem;
}

.np-field--split-3 {
	display: grid;
	/* Shares .np-field--split-bsn-date's wide column with BSN (BSN gets
	   a narrow fixed share, sized to its actual 10-digit max, and
	   Geboortedatum gets everything left over) — comfortable floors are
	   safe here since that wide column, not half of .np-form-grid, is
	   what these actually have to fit inside. Month is the dominant
	   column: it needs to hold a full month name ("September",
	   "Augustus"), not a 2-digit number. Day's floor is 6rem, not 5rem:
	   the "Dag" placeholder text itself (3 letters) needs about as much
	   room as any 2-digit day number, and 5rem was clipping it to "D…". */
	grid-template-columns: minmax(6rem, 0.8fr) minmax(9rem, 1.6fr) minmax(6.5rem, 1fr);
	gap: 0.6rem;
}

/* Postcode/Huisnummer/Toevoeging — one shared label above, like
   .np-field--split-3's Dag/Maand/Jaar, but with its own proportions:
   postcode is the dominant column (a Dutch postcode, "1234 AB", is
   still short but longer than a house number), huisnummer a medium
   one, and "toevoeging" (a letter or "-2", almost never more than a
   couple of characters) stays narrow. Comes BEFORE Straatnaam/
   Woonplaats/Land above so the natural top-to-bottom typing order
   matches what bindAddressLookup() (intake-form.js) needs — see
   step-personal.php's own comment on why the order was reversed. */
.np-field--split-postcode {
	display: grid;
	grid-template-columns: minmax(6rem, 1.2fr) minmax(5rem, 0.9fr) minmax(4rem, 0.7fr);
	gap: 0.6rem;
}

/* BSN/Geboortedatum, one full-width row. BSN itself only ever needs
   room for 9-10 digits, but by request its column is widened to match
   Achternaam/Voornaam's own width (.np-field--narrow) instead of just
   the minimum it actually needs, so BSN lines up with the fields
   directly below it — Geboortedatum's own Dag/Maand/Jaar split still
   gets everything else in the row. */
.np-field--split-bsn-date {
	display: grid;
	grid-template-columns: minmax(7rem, 14rem) 1fr;
	gap: 1.25rem;
}

/* Gewicht/Lengte/BMI: unlike .np-field--split(-3) above, each of these
   3 keeps its own label, so this is applied directly on the outer
   .np-field (one combined grid item) rather than nested inside one —
   same shape as the label+input pairs under Persoonlijke gegevens.
   grid-column spans the full .np-form-grid row since this replaces
   what used to be 3 separate .np-form-grid items; without it the
   group would only fill one of .np-form-grid's own 2 columns. Equal
   thirds are fine here (unlike birthdate) since weight/height/BMI are
   all short numbers, no long labels to make room for. */
.np-field--split-3-equal {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 1.1rem 1.25rem;
}

/* Every other .np-field--split* grid above sizes its columns with
   minmax(Xrem, ...) floors — fine at desktop/tablet widths, where the
   1fr/2fr/3fr side of each minmax always wins, but those floors don't
   shrink below their rem minimum on a real phone: their combined
   minimum widths add up to more than a narrow card can offer, and
   unlike a flex row a CSS grid track will NOT compress a column below
   its own minmax() floor — the row simply overflows its container
   instead (exactly the bug reported: Geboortedatum's "Jaar" column
   pushed outside the card on a narrow viewport). The standard, actually-
   reliable fix for a multi-column form row on mobile isn't a smaller
   floor (there's always a narrower phone), it's dropping to a single
   column below this breakpoint — same pattern already used above for
   .np-form-grid and .np-field--split-3-equal, just applied to every
   split field group instead of only two of them. */
@media (max-width: 700px) {
	.np-field--split-3-equal,
	.np-field--split-name,
	.np-field--split,
	.np-field--split-address,
	.np-field--split-3,
	.np-field--split-postcode,
	.np-field--split-bsn-date {
		grid-template-columns: 1fr;
	}
}

/* Generic "take the whole .np-form-grid row instead of one of its two
   columns" modifier — used on Adres (Straatnaam/Huisnr/Toev needs more
   room than one column can give it without overflowing; that's exactly
   what happened when it was squeezed into a single column: the row's
   minimum content width forced the whole grid wider than its card,
   spilling into the sidebar) and, so it lands on its own row right
   below Adres rather than pairing oddly with whatever field happens to
   come next in the markup, on Postcode/Woonplaats too. */
.np-field--full {
	grid-column: 1 / -1;
}

.np-label {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--np-text);
}

.np-input {
	appearance: none;
	border: none;
	outline: none;
	background: var(--np-input-bg);
	border-radius: var(--np-radius-sm);
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.3;
	color: var(--np-text);
	transition: box-shadow 0.15s ease, background 0.15s ease;
	/* This form is embedded inside arbitrary page-builder columns (Divi
	   confirmed via .et_pb_column) whose own default form-field styling
	   can override box-sizing/width/padding here, silently shrinking the
	   usable typing area without changing how wide the field LOOKS — the
	   exact bug reported: Postcode's real padding was measured at 10px/
	   20px (a Divi default), not this rule's declared 0.7rem/0.85rem.
	   !important here is deliberate and scoped to just the box-model
	   properties that must not be shrunk by host-theme CSS; nothing else
	   in this stylesheet uses it. */
	box-sizing: border-box !important;
	width: 100% !important;
	/* Asymmetric on purpose: left is tighter (text was sitting too far
	   from the edge) while right stays roomier so text doesn't crowd
	   that edge. Still less than the Divi default this overrides
	   (10px/20px each side, ~40px total). */
	padding: 0.7rem 0.85rem 0.7rem 0.4rem !important;
}

/* Proven via live DevTools box-model inspection (not a guess): a
   <select>'s rendered content box carries its own internal inset —
   here measured at 8px on every side — that is NOT CSS padding or
   border (both showed as 0/none in the Styles panel at the same
   time). It's the browser engine's own native rendering of the
   control, entirely outside what author CSS can reach on the <select>
   element itself. No padding/border value on a <select> can ever
   fully match a plain element's box model as a result.
   So the <select> is no longer used to DISPLAY anything: it's kept
   fully functional (real value, keyboard, native options popup) but
   invisible and stretched over the whole field to catch every click.
   The visible text is a plain <span> instead, kept in sync by JS on
   change — a span's padding is exactly as reliable as this wrapper
   div's, so it finally matches every other field pixel for pixel. */
.np-select-wrap {
	position: relative;
	background: var(--np-input-bg);
	border-radius: 999px;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

.np-select-wrap:hover {
	background-color: var(--np-input-bg-hover);
}

.np-select-wrap:focus-within {
	background-color: #fff;
	box-shadow: 0 0 0 3px var(--np-focus-ring);
}

.np-field.has-error .np-select-wrap {
	box-shadow: 0 0 0 2px var(--np-danger);
}

/* Left inset is 0.4rem (6.4px) + 20px, not just 0.4rem: the site's own
   global CSS applies `input, textarea { text-indent: 20px; }` — an
   extra push that ONLY targets those two tag names. Every other field
   in this form is a plain <input>, so it gets 6.4px padding + 20px
   text-indent = ~26.4px of real visual inset. This is a <span>, not an
   input/textarea, so that rule never touched it — it was only ever
   getting the 6.4px, which is why it looked flush next to every other
   field despite having "the same" padding value. Baking the site's
   20px directly in here (rather than relying on text-indent, which
   only applies to input/textarea anyway) matches the actual rendered
   result instead of just the declared .np-input formula. */
.np-select-display {
	display: block;
	box-sizing: border-box;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.95rem;
	/* Matches .np-input's own line-height exactly. Without this, a real
	   <input> and this plain <span> render at different heights even
	   with identical font-size/padding — browsers give the two element
	   types different default line-heights, so "the same" CSS still
	   produced a visibly taller select-style box (Dag/Maand/Jaar, Land)
	   than a plain text field (BSN, Postcode/Woonplaats) next to it. */
	line-height: 1.3;
	color: var(--np-text);
	padding: 0.7rem 2.25rem 0.7rem 26.4px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 14px;
	pointer-events: none;
}

.np-select-wrap select.np-select-native {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border: none;
	outline: none;
	background: transparent;
	opacity: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.np-input:hover {
	background: var(--np-input-bg-hover);
}

.np-input:focus {
	background: #fff;
	box-shadow: 0 0 0 3px var(--np-focus-ring);
}

.np-input--textarea {
	resize: vertical;
	min-height: 4.5rem;
}

/* Same root cause as the Land/birthdate dropdowns: this is a plain
   <div>, not a real <input>, so it never receives the site's own
   global override (`input[type=...] { border-radius:100px; ... }`)
   that gives Gewicht/Lengte their actual rounded, padded look — it was
   only ever rendering our own base .np-input values (8px radius,
   0.4rem-only left padding), not what every real input around it
   actually displays. Restating the real numbers directly, same as
   .np-select-display. */
.np-input--readonly {
	display: flex;
	align-items: center;
	color: var(--np-text-muted);
	border-radius: 999px;
	padding-left: 26.4px !important;
}

.np-field.has-error .np-input,
.np-field.has-error .np-pill-toggle {
	box-shadow: 0 0 0 2px var(--np-danger);
}

.np-field-error {
	font-size: 0.78rem;
	color: var(--np-danger);
}

/* ---------- Product / dosage: compact selectable list ---------- */
/*
 * Deliberately a slim list, not a grid of big cards — a catalog with many
 * products/dosages needs to stay scannable without the step turning into
 * a wall of oversized boxes. .np-choice (the label, which carries the
 * native `hidden` attribute for dosage rows that don't belong to the
 * selected product) must never get a `display` declaration of its own —
 * same rule as .np-qflow__question, for the same reason. The row layout
 * lives on the always-present .np-choice__inner child instead.
 */

.np-field-group {
	border: none;
	padding: 0;
	margin: 0 0 1.1rem;
}

.np-field-group__legend {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--np-heading);
	margin: 0.3rem 0 0.55rem;
	padding: 0;
}

.np-choice-list {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--np-border-soft);
	border-radius: var(--np-radius);
	overflow: hidden;
	background: #fff;
}

.np-choice {
	cursor: pointer;
}

.np-choice__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 1rem;
	border-bottom: 1px solid var(--np-border-soft);
	/* Reserved on every row, not just the selected one — transparent by
	   default, recolored on selection (see below). Reserving it always
	   means selecting a row never shifts its text by the border's width. */
	border-left: 3px solid transparent;
	transition: background 0.15s ease;
}

/* !important is a deliberate, scoped exception — same precedent as
   .np-input's box-sizing/width/padding above. Confirmed via live
   getComputedStyle()/getBoundingClientRect() (not a guess): something
   with higher specificity than this rule — almost certainly Divi's own
   default radio-input styling, this form runs inside Divi page-builder
   columns — was winning and resetting this back to position: relative
   with a native-control size. Because it stayed position: relative
   instead of absolute, the browser never took it out of flow: it
   remained a real, sized flex item ahead of the payment row's
   indicator/icon/label, and its native rendered width apparently varies
   a couple of px between instances — exactly what was shoving
   "Bankoverschrijving" (and only that row, since its native radio
   happened to render ~2.7px narrower) sideways relative to the other
   two. Forcing position/size back here removes it from flow again,
   which is what makes every row's indicator/icon/label start at an
   identical, guaranteed X regardless of the radio's own native
   rendering quirks. */
.np-choice__input {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
}

.np-choice__label {
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--np-heading);
}

/* Payment method rows (step-confirm.php): radio indicator on the LEFT
   (unlike every other .np-choice list in this form, which puts it on
   the right via .np-choice__inner's own space-between) — this overrides
   that to a plain left-packed flex row instead, so indicator, icon and
   label sit in that order with
   consistent gaps.
   A CSS Grid version of this rule was tried and reverted — it broke
   rendering completely (label text collapsed to one character per
   line) rather than fixing the ~2.7px label-position drift confirmed
   via getBoundingClientRect() on the plain-SVG-icon row. Back to this
   known-working flex version; the small drift is still unresolved but
   nowhere near as bad as what the grid attempt did. Do not retry the
   grid approach without being able to actually render the page first. */
.np-choice--payment .np-choice__inner {
	justify-content: flex-start;
	gap: 1rem;
}

/* Fixed width regardless of what's inside (a short "iDEAL" badge, a
   longer "Bancontact" badge, an uploaded logo image, or the plain SVG
   icon) — this is what makes every row's label text start at the exact
   same horizontal position (with one confirmed exception: the plain-
   SVG-icon row still measures ~2.7px off via getBoundingClientRect(),
   cause not yet found — see conversation history, not this comment,
   for what's already been ruled out before touching this again). */
.np-payment-icon-col {
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	flex-basis: 110px !important;
	width: 110px !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.np-payment-icon-col svg {
	width: 26px;
	height: 26px;
}

.np-payment-logo {
	max-width: 100%;
	max-height: 28px;
	width: auto;
	height: auto;
}

/* Simple styled wordmark badges, not the official brand artwork (no
   source asset available to reproduce it exactly) — an admin can
   replace either with a real uploaded logo via Instellingen → Betaling
   without touching this file at all (see Catalog_Admin::payment_methods()
   and step-confirm.php's np-payment-logo <img> branch). */
.np-payment-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 0.6rem;
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
	white-space: nowrap;
}

.np-payment-badge--ideal {
	background: #cc0066;
}

.np-payment-badge--bancontact {
	background: #1b3e8c;
}

.np-choice--payment .np-choice__label {
	font-size: 1.05rem;
}

.np-choice__indicator {
	position: relative;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1.5px solid var(--np-border-soft);
	transition: border-color 0.15s ease;
}

.np-choice__indicator::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--np-accent);
	transform: scale(0);
	transition: transform 0.15s ease;
}

.np-choice:hover .np-choice__inner {
	background: var(--np-input-bg);
}

/* Same understated treatment as the collapsed summary chip — a thin
   accent edge, not a solid tinted fill, so a selected row still reads
   as calm/settled rather than highlighted like an alert. */
.np-choice:has(.np-choice__input:checked) .np-choice__inner,
.np-choice.is-selected .np-choice__inner {
	border-left-color: var(--np-accent);
}

.np-choice:has(.np-choice__input:checked) .np-choice__indicator,
.np-choice.is-selected .np-choice__indicator {
	border-color: var(--np-accent);
}

.np-choice:has(.np-choice__input:checked) .np-choice__indicator::after,
.np-choice.is-selected .np-choice__indicator::after {
	transform: scale(1);
}

.np-choice:has(.np-choice__input:focus-visible) .np-choice__inner {
	box-shadow: 0 0 0 3px var(--np-focus-ring) inset;
}

/* ---------- Segmented Ja/Nee pill toggles ---------- */

.np-pill-toggle {
	display: inline-flex;
	align-self: flex-start;
	background: var(--np-input-bg);
	border-radius: 999px;
	padding: 3px;
	gap: 2px;
}

.np-pill {
	appearance: none;
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--np-text-muted);
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.np-pill:hover {
	color: var(--np-text);
}

.np-pill.is-active {
	background: var(--np-accent);
	color: #fff;
}

.np-pill:focus-visible {
	box-shadow: 0 0 0 3px var(--np-focus-ring);
}

.np-pill-toggle--yn {
	flex-shrink: 0;
}

/* Bloeddruk reuses the same .np-choice-list selectable-row pattern as
   product/dosage/quantity (see step-product.php's header comment for
   why: compact, scannable, no custom control invented per-question) —
   just with a small colored status dot ahead of the label as its own
   twist, since "which bucket am I in" benefits from an at-a-glance
   color cue that plain product/dosage rows don't need. */
.np-choice__bp-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 0.5rem;
	vertical-align: middle;
}

.np-choice__bp-dot--normaal {
	background: var(--np-success);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--np-success) 18%, transparent);
}

.np-choice__bp-dot--laag {
	background: var(--np-warning);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--np-warning) 18%, transparent);
}

.np-choice__bp-dot--hoog {
	background: var(--np-danger);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--np-danger) 18%, transparent);
}

.np-choice__sublabel {
	font-weight: 400;
	color: var(--np-text-muted);
	font-size: 0.85rem;
}

/* Same .np-choice-list/.np-choice design as above, laid out as columns
   instead of stacked rows — just the outer arrangement changes: each
   row's own internal layout (dot, label, sublabel, radio indicator)
   is untouched, and the divider moves from a bottom border between
   rows to a right border between columns. */
.np-choice-list--row {
	flex-direction: row;
}

.np-choice-list--row .np-choice {
	flex: 1;
}

.np-choice-list--row .np-choice__inner {
	height: 100%;
	padding: 0.4rem 0.75rem;
	border-bottom: none;
	border-right: 1px solid var(--np-border-soft);
}

.np-choice-list--row .np-choice:last-child .np-choice__inner {
	border-right: none;
}

/* ---------- Collapsed "done" summary chip (step-product.php) ----------
   Shown in place of a fieldset's full choice list once a selection is
   made; .np-selected-chip carries the actual flex layout, never the
   element `hidden` toggles directly (see step-product.php's header
   comment for why — the same display-vs-hidden rule that's bitten this
   form before). Deliberately understated — a thin accent edge and a
   plain white ground rather than a solid tinted block, tighter padding,
   and a lighter-weight "Wijzigen" that reads as a link, not a second
   button competing with it — a confirmed choice should look settled and
   quiet, not like another call to action. */
.np-selected-chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--np-border-soft);
	border-left: 3px solid var(--np-accent);
	border-radius: var(--np-radius);
	background: #fff;
}

.np-selected-chip__label {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 500;
	font-size: 0.92rem;
	color: var(--np-heading);
}

.np-selected-chip__check {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--np-accent);
}

.np-selected-chip .np-btn {
	padding: 0;
	background: none;
	font-family: inherit;
	font-weight: 500;
	font-size: 0.8rem;
	color: var(--np-accent);
}

.np-selected-chip .np-btn:hover {
	color: var(--np-heading);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Sublabel moves to its own centered line under the dot+word instead
   of running inline after it — keeps all 3 columns the same shape
   (and therefore the radio circles level with each other) regardless
   of how long each option's main word is. Smaller font so the range
   fits on that one line without wrapping again. */
.np-choice-list--row .np-choice__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1rem;
	text-align: center;
}

.np-choice-list--row .np-choice__label-main {
	display: flex;
	align-items: center;
	font-size: 0.9rem;
}

.np-choice-list--row .np-choice__sublabel {
	font-size: 0.7rem;
	white-space: nowrap;
	opacity: 0.85;
}

@media (max-width: 700px) {
	.np-choice-list--row {
		flex-direction: column;
	}

	.np-choice-list--row .np-choice__inner {
		border-right: none;
		border-bottom: 1px solid var(--np-border-soft);
	}

	.np-choice-list--row .np-choice:last-child .np-choice__inner {
		border-bottom: none;
	}
}

/* Only the "Medische vragenlijst" fieldset gets this — scoped via
   .np-field-group--questionnaire so the Product/Dosering legends on step 1
   are untouched. Deliberately padding-top, not margin-top: margin-top on a
   <legend> can get collapsed against the preceding sibling's margin by the
   parent's own box, which is the most likely reason margin-top kept not
   showing up on staging across three attempts. Padding never collapses, so
   this removes that ambiguity outright. !important stays, since <legend> is
   a common target for theme/page-builder form resets (the same class of
   Divi override already confirmed on .np-input's padding). */
.np-field-group--questionnaire .np-field-group__legend {
	padding-top: 2.5rem !important;
	margin-bottom: 1rem;
	font-size: 1rem;
}

/* ---------- One-question-at-a-time medical questionnaire ---------- */
/*
 * .np-qflow__question and .np-qflow__followup carry the native `hidden`
 * attribute (toggled via JS as a plain DOM property) and MUST NEVER get a
 * `display` declaration of their own — any author-stylesheet `display` on
 * an element also wins over that same element's `[hidden]{display:none}`
 * default, regardless of specificity, which would silently break the
 * show/hide (this is exactly what broke the previous version of this
 * component). The actual flex layout lives one level down, on the
 * always-present *-inner wrapper, which never has `hidden` on it.
 */

.np-qflow {
	background: var(--np-input-bg);
	border-radius: var(--np-radius);
	padding: 1.25rem 1.25rem 1rem;
}

.np-qflow__counter {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--np-text-muted);
	margin: 0 0 1rem;
}

.np-qflow__question-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: #fff;
	border-radius: var(--np-radius-sm);
	padding: 1.5rem 1.25rem;
	animation: npQFadeSlide 0.22s ease;
}

.np-qflow__question.has-error .np-pill-toggle {
	box-shadow: 0 0 0 2px var(--np-danger);
	border-radius: 999px;
}

.np-qflow__question-label {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.35;
	flex: 1;
	min-width: 200px;
}

@keyframes npQFadeSlide {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* flex-basis/width go on .np-qflow__followup itself (the actual flex item
   of .np-qflow__question-inner's row layout) — putting them on the
   -inner grandchild instead did nothing, since -inner isn't a flex item
   of that row at all. That's why the textarea/button were only ever as
   wide as their own content instead of the full row down to "Nee". */
.np-qflow__followup {
	flex-basis: 100%;
	width: 100%;
	margin-top: 0.25rem;
}

.np-qflow__followup-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.65rem;
}

/* Same full-width-row problem as .np-qflow__followup above (it's a direct
   flex-item sibling of the label/pill-toggle row too), same fix. Shown
   when a question is revisited via "Vorige vraag" and already has an
   answer, so the patient has an unambiguous way to continue again. */
.np-qflow__revisit-continue {
	flex-basis: 100%;
	width: 100%;
	margin-top: 0.25rem;
}

/* Shown in place of the last question once it's answered — same viewport
   slot, same entrance animation as any other question swap. */
.np-qflow__complete-inner {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	background: #fff;
	border-radius: var(--np-radius-sm);
	padding: 1.5rem 1.25rem;
	animation: npQFadeSlide 0.22s ease;
}

.np-qflow__complete-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--np-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.np-qflow__complete-icon svg {
	width: 16px;
	height: 16px;
}

.np-qflow__complete-text {
	font-size: 1rem;
	font-weight: 500;
	color: var(--np-heading);
}

.np-qflow__nav {
	display: flex;
	justify-content: flex-start;
	margin-top: 0.75rem;
}

.np-btn--sm {
	padding: 0.5rem 1.1rem;
	font-size: 0.82rem;
}

/* Follow-up "Volgende vraag" — deliberately quieter than a normal button
   so it reads as a small nudge, not a competing call to action next to
   the Ja/Nee pills above it. */
.np-btn--xs {
	padding: 0.3rem 0.7rem;
	font-size: 0.76rem;
}

.np-btn--ghost:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* ---------- Consent ---------- */

.np-consent {
	background: var(--np-tint);
	border-radius: var(--np-radius);
	padding: 1.1rem 1.25rem;
	margin-top: 1rem;
}

.np-consent__terms {
	max-height: 11rem;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--np-border-soft);
	border-radius: var(--np-radius-sm);
	padding: 0.9rem 1rem;
	/* Now the last element in .np-consent (checkbox + note moved above
	   it) — margin-top for the gap from the note, not margin-bottom. */
	margin-top: 1rem;
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--np-text-muted);
}

.np-consent__terms p {
	margin: 0 0 0.75rem;
}

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

.np-consent__row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
}

.np-consent__row input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	accent-color: var(--np-accent);
}

.np-consent__text {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--np-heading);
}

.np-consent__terms-link {
	color: var(--np-accent);
	text-decoration: underline;
}

.np-consent__terms-link:hover {
	color: var(--np-accent-dark);
}

.np-consent__note {
	font-size: 0.78rem;
	color: var(--np-text-muted);
	margin: 0.6rem 0 0 2.2rem;
}

/* Wraps whatever admin-authored HTML comes out of the "Medische
   verklaring — punten" editor (normally a real <ol><li> list via
   TinyMCE's list button) — the indent lives on the nested <ol>, not
   this wrapper, and its own default browser margin is reset since
   the wrapper's margin-top already provides that spacing. */
.np-consent__points {
	margin: 0.6rem 0 0 2.2rem;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--np-text-muted);
}

.np-consent__points ol,
.np-consent__points ul {
	margin: 0;
	padding-left: 1.1rem;
}

.np-consent__points li {
	margin-bottom: 0.5rem;
}

.np-consent__points li:last-child {
	margin-bottom: 0;
}

.np-consent__points p {
	margin: 0 0 0.5rem;
}

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

.np-review {
	background: var(--np-input-bg);
	border-radius: var(--np-radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
	font-size: 1rem;
}

.np-review__row {
	display: flex;
	justify-content: space-between;
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--np-border-soft);
}

.np-review__row:last-child {
	border-bottom: none;
}

.np-review__label {
	color: var(--np-text-muted);
}

/* ---------- Nav buttons ---------- */

.np-intake__error {
	background: #FCEBEA;
	color: var(--np-danger);
	border-radius: var(--np-radius-sm);
	padding: 0.75rem 1rem;
	font-size: 0.85rem;
	margin-bottom: 1rem;
}

.np-intake__nav {
	display: flex;
	justify-content: space-between;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--np-border-soft);
}

.np-btn {
	appearance: none;
	border: none;
	font-family: var(--np-font-heading);
	font-weight: 600;
	font-size: 0.92rem;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease;
}

.np-btn:active {
	transform: scale(0.98);
}

.np-btn--primary {
	background: var(--np-cta-bg);
	color: var(--np-cta-text);
	margin-left: auto;
}

.np-btn--primary:hover {
	background: var(--np-cta-bg-hover);
}

.np-btn--primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.np-btn--ghost {
	background: transparent;
	color: var(--np-text-muted);
}

.np-btn--ghost:hover {
	color: var(--np-heading);
}

/* "Volgende vraag" (data-qflow-continue only ever exists on that one
   button, in the questionnaire flow) gets the accent orange instead of
   .np-btn--ghost's default muted grey — differentiates it at a glance
   from "Vorige vraag" right below it, which both otherwise share the
   exact same .np-btn--ghost style. The arrow is plain text appended
   after the label (see step-health.php), so this covers both. */
[data-qflow-continue] {
	color: var(--np-accent);
}

[data-qflow-continue]:hover {
	color: var(--np-accent-dark);
}

/* ---------- Sticky sidebar summary ---------- */

.np-summary {
	width: 320px;
	flex-shrink: 0;
	position: sticky;
	top: 1.5rem;
}

@media (max-width: 860px) {
	.np-summary {
		width: 100%;
		position: static;
	}
}

.np-summary__inner {
	background: #fff;
	border: 1px solid var(--np-border-soft);
	border-radius: var(--np-radius-lg);
	padding: 1.5rem;
}

/* Per-product photo (from the Featured Image set on the np_product post
   — see Catalog_Cpt::get_active_catalog()'s image_url), shown once a
   product is picked. Negative margins bleed it out to the card's own
   edges/top corners rather than sitting inset like the rest of the
   padded content below it. The `hidden` toggle lives on this element's
   plain, style-free parent wrapper in sidebar-summary.php, never here —
   this class carries `display: flex`, which would silently defeat
   `hidden` if the two were ever combined on the same element (the same
   display-vs-hidden rule that has bitten this form before). */
.np-summary__image {
	/* Bottom margin matches .np-intake__form's own top padding (1.5rem)
	   exactly, so "Uw bestelling" sits as far below the image as
	   "Gezondheidsprofiel" (or any other step title) sits below the
	   left card's own top edge — same gap on both sides. */
	margin: -1.5rem -1.5rem 1.5rem;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--np-radius-lg) var(--np-radius-lg) 0 0;
	background: radial-gradient(
		circle at 50% 65%,
		color-mix( in srgb, var(--np-tint) 75%, var(--np-accent) 25% ) 0%,
		var(--np-tint) 60%,
		var(--np-bg) 100%
	);
}

.np-summary__image img {
	max-width: 65%;
	max-height: 75%;
	object-fit: contain;
}

.np-summary__title {
	font-family: var(--np-font-heading);
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.4rem;
}

/* See #np-intake-app .np-step__title's comment — same Divi
   dark-layout !important-vs-!important specificity fix, needed here
   too. */
#np-intake-app .np-summary__title {
	color: var(--np-heading) !important;
}

.np-summary__empty {
	font-size: 0.85rem;
	color: var(--np-text-muted);
}

.np-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0;
	font-size: 0.88rem;
}

.np-summary__label {
	color: var(--np-text-muted);
}

.np-summary__value {
	font-weight: 500;
	text-align: right;
}

.np-summary__value--total {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--np-heading);
}

.np-summary__divider {
	height: 1px;
	background: var(--np-border-soft);
	margin: 0.5rem 0;
}

.np-summary__trust {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--np-border-soft);
	font-size: 0.75rem;
	color: var(--np-text-muted);
}

/* "Gratis" perks (Online consult / Verzending), right below the price —
   same divider/spacing treatment as .np-summary__trust below it, since
   both sit inside .np-summary__product and share its card. */
.np-summary__perks {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--np-border-soft);
}

.np-summary__perk {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 0;
}

.np-summary__perk-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.np-summary__perk-title {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--np-heading);
}

.np-summary__perk-sub {
	font-size: 0.75rem;
	color: var(--np-text-muted);
}

.np-summary__perk-badge {
	flex-shrink: 0;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--np-accent);
	white-space: nowrap;
}

.np-summary__trust svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--np-accent);
	margin-top: 0.15rem;
}

.np-intake-error {
	font-family: 'Poppins', sans-serif;
	color: #B3261E;
	background: #FCEBEA;
	border-radius: 8px;
	padding: 1rem;
}