/* OZ Forms — frontend styles. Uses design tokens from oz-theme. */

/* Universal [hidden] safety: any element with the hidden attribute MUST be
   display:none, regardless of later display rules (otherwise [hidden] on
   buttons/steps gets overridden by display: inline-flex / grid). */
.oz-form [hidden] {
	display: none !important;
}

.oz-form {
	container-type: inline-size;
	container-name: ozform;
	position: relative;
	display: grid;
	/* Same 12-col grid as .oz-form__step so single-step forms (no step
	 * fieldset wrapper) honour the same span-6 / span-4 width modifiers
	 * on their fields. Without this, custom-kleur and other one-step
	 * forms fall back to auto-sized implicit columns and span-6 fields
	 * end up uneven (one ~640px, the other ~110px). */
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 12px;
	max-width: 640px;
	margin: 24px auto;
	padding: 22px 24px 20px;
	background: #fff;
	border: 1px solid #ece9e3;
	border-radius: 10px;
	box-shadow: 0 2px 16px rgba(20, 30, 40, 0.04);
	font-family: var(--oz-font-body, Arial, sans-serif);
	color: var(--oz-color-text, #333);
}

.oz-form--steps {
	max-width: 720px;
}

@media (max-width: 600px) {
	.oz-form {
		margin: 16px auto;
		padding: 18px 16px 16px;
	}
}

.oz-form__field {
	display: grid;
	gap: 4px;
}

.oz-form__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--oz-color-teal, #135350);
	letter-spacing: 0.01em;
}

.oz-form__req {
	color: #b32d2e;
	margin-left: 2px;
}

.oz-form__field input[type="text"],
.oz-form__field input[type="email"],
.oz-form__field input[type="tel"],
.oz-form__field input[type="number"],
.oz-form__field input[type="url"],
.oz-form__field input[type="date"],
.oz-form__field select,
.oz-form__field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	border: 1px solid #d6d3ce;
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: 14px;
	color: inherit;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.oz-form__field input:focus,
.oz-form__field select:focus,
.oz-form__field textarea:focus {
	outline: none;
	border-color: var(--oz-color-teal, #135350);
	box-shadow: 0 0 0 3px rgba(19, 83, 80, 0.15);
}

.oz-form__field textarea {
	resize: vertical;
	min-height: 92px;
}

.oz-form__field--checkbox .oz-form__check {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	cursor: pointer;
}

.oz-form__help {
	font-size: 12px;
	color: #777;
}

.oz-form__error {
	font-size: 13px;
	color: var(--oz-error, #b32d2e);
}

.oz-form__error:empty {
	display: none;
}

.oz-form__field.is-invalid input,
.oz-form__field.is-invalid select,
.oz-form__field.is-invalid textarea {
	border-color: #b32d2e;
	background: #fff7f7;
}

/* Honeypot — visually + functionally hidden but reachable enough that bots fill it.
   !important on every rule because LiteSpeed's "remove unused CSS" / theme overrides
   can strip the off-screen positioning, leaking the field as a visible "Website" input.
   pointer-events:none guarantees real users can't accidentally focus or type into it
   even if some other rule (browser zoom, RTL, etc.) brings it back into view. */
.oz-form__hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.oz-form__turnstile {
	grid-column: 1 / -1;
	min-height: 65px;
}

/* ───────── Buttons (self-contained, no theme dependency) ───────── */

.oz-form__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 42px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: 7px;
	background: #f0ede8;
	color: var(--oz-color-teal, #135350);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease, box-shadow 150ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.oz-form__btn:hover {
	background: #e3dfd8;
}

.oz-form__btn:focus-visible {
	outline: 2px solid var(--oz-color-teal, #135350);
	outline-offset: 2px;
}

.oz-form__btn:active {
	transform: translateY(1px);
}

.oz-form__btn--primary {
	background: var(--oz-color-teal, #135350);
	color: #fff;
}

.oz-form__btn--primary:hover {
	background: #0f4441;
	color: #fff;
	box-shadow: 0 4px 12px rgba(19, 83, 80, 0.18);
}

.oz-form__prev {
	background: transparent;
	color: var(--oz-color-teal, #135350);
	border-color: #d6d3ce;
}

.oz-form__prev:hover {
	background: #f0ede8;
	border-color: #c0bcb6;
}

.oz-form__submit {
	min-width: 0;
}

.oz-form__btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.oz-form__status {
	font-size: 14px;
	padding: 12px 14px;
	border-radius: 6px;
	background: transparent;
	min-height: 0;
}

.oz-form__status.is-success {
	background: #eaf3f1;
	color: var(--oz-color-teal, #135350);
	border: 1px solid #c7ddd9;
	min-height: auto;
}

.oz-form__status.is-error {
	background: #fbeceb;
	color: #b32d2e;
	border: 1px solid #f0c8c5;
	min-height: auto;
}

/* Replaces the form body on successful submit. Big enough that a user
   scrolled to the submit button still sees it clearly. */
.oz-form__success-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 40px 24px;
	background: #eaf3f1;
	border: 1px solid #c7ddd9;
	border-radius: 10px;
	color: var(--oz-color-teal, #135350);
}

.oz-form__success-icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	font-weight: 700;
	color: #fff;
	background: var(--oz-color-teal, #135350);
	border-radius: 50%;
	line-height: 1;
}

.oz-form__success-heading {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	color: var(--oz-color-teal, #135350);
}

.oz-form__success-body {
	margin: 0;
	max-width: 480px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--oz-color-text, #333);
}

@media (max-width: 600px) {
	.oz-form {
		gap: 14px;
	}
	.oz-form__nav {
		flex-direction: column-reverse;
		align-items: stretch;
	}
	.oz-form__btn {
		width: 100%;
	}
	.oz-form__nav .oz-form__prev {
		margin-right: 0;
	}
}

/* ───────── Multi-step ───────── */

.oz-form__step {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 12px;
	border: none;
	margin: 0;
	padding: 0;
}

/* Default: a field claims the whole row. Width modifiers below let pairs
 * (voornaam/achternaam, postcode/huisnummer) share a row. */
.oz-form__field {
	grid-column: span 12;
}
.oz-form__field--w-half      { grid-column: span 6; }
.oz-form__field--w-third     { grid-column: span 4; }
.oz-form__field--w-two-thirds{ grid-column: span 8; }
.oz-form__field--w-quarter   { grid-column: span 3; }

@media (max-width: 600px) {
	.oz-form__field--w-half,
	.oz-form__field--w-third,
	.oz-form__field--w-two-thirds,
	.oz-form__field--w-quarter {
		grid-column: span 12;
	}
	/* Postcode + huisnummer stay paired on mobile — short inputs that fit
	 * comfortably side-by-side, and matching the NL checkout muscle memory. */
	.oz-form__field--postcode,
	.oz-form__field--huisnummer {
		grid-column: span 6;
	}
}

.oz-form__step[hidden] {
	display: none;
}

/* Step title + intro must span all 12 columns — without an explicit
 * grid-column they fall into the first track (~1/12 of the form) and
 * the intro text breaks word-by-word into a thin column. */
.oz-form__step-title {
	grid-column: 1 / -1;
	font-family: var(--oz-font-heading, Georgia, serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--oz-color-teal, #135350);
	padding: 0;
	margin: 0;
}

.oz-form__step-intro {
	grid-column: 1 / -1;
	margin: -6px 0 0;
	color: #555;
	font-size: 13px;
}

.oz-form__progress {
	grid-column: 1 / -1;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	gap: 6px;
	counter-reset: step;
}

.oz-form__progress-step {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	background: #f7f5f2;
	border: 1px solid #e5e5e3;
	border-radius: 6px;
	font-size: 12px;
	color: #888;
	cursor: default;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.oz-form__progress-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #e5e5e3;
	color: #888;
	font-weight: 600;
	font-size: 12px;
	flex-shrink: 0;
}

.oz-form__progress-label {
	font-weight: 500;
}

.oz-form__progress-step.is-active {
	background: #fff;
	border-color: var(--oz-color-teal, #135350);
	color: var(--oz-color-teal, #135350);
}

.oz-form__progress-step.is-active .oz-form__progress-num {
	background: var(--oz-color-teal, #135350);
	color: #fff;
}

.oz-form__progress-step.is-done {
	color: var(--oz-color-teal, #135350);
	cursor: pointer;
}

.oz-form__progress-step.is-done .oz-form__progress-num {
	background: var(--oz-color-teal, #135350);
	color: #fff;
}

.oz-form__progress-step.is-done .oz-form__progress-num::before {
	content: "✓";
}

.oz-form__progress-step.is-done .oz-form__progress-num {
	font-size: 0; /* hide the number */
}

.oz-form__progress-step.is-done .oz-form__progress-num::before {
	font-size: 14px;
}

.oz-form__nav {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	align-items: center;
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid #ece9e3;
}

.oz-form__nav .oz-form__prev {
	margin-right: auto;
}

/* Container query: when the form itself is narrow (e.g. inside a column on
   /workshops/), buttons can't sit side-by-side without wrapping ugly. Stack
   them in priority order: primary on top, prev underneath, full width. */
@container ozform (max-width: 460px) {
	.oz-form__nav {
		flex-direction: column-reverse;
		align-items: stretch;
	}
	.oz-form__btn {
		width: 100%;
	}
	.oz-form__nav .oz-form__prev {
		margin-right: 0;
	}
}

.oz-form__radios {
	display: grid;
	gap: 8px;
}

.oz-form__radio {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid #d6d3ce;
	border-radius: 6px;
	cursor: pointer;
	transition: border-color 120ms ease, background 120ms ease;
}

.oz-form__radio:has( input:checked ) {
	border-color: var(--oz-color-teal, #135350);
	background: #eaf3f1;
}

@media (max-width: 600px) {
	.oz-form__progress {
		flex-direction: column;
	}
	.oz-form__progress-step {
		justify-content: flex-start;
	}
}

/* ───────── Kleur swatch picker (links .oz-kleur-grid → form) ───────── */

.oz-kleur-grid--pickable .oz-kleur-swatch {
	position: relative;
	cursor: pointer;
	transition: transform 120ms ease, box-shadow 120ms ease, outline-color 120ms ease;
	outline: 2px solid transparent;
	outline-offset: -2px;
}

.oz-kleur-grid--pickable .oz-kleur-swatch:focus-visible {
	outline-color: var(--oz-color-teal, #135350);
}

.oz-kleur-grid--pickable .oz-kleur-swatch.is-selected {
	outline-color: var(--oz-color-teal, #135350);
	box-shadow: 0 4px 14px rgba(19, 83, 80, 0.18);
}

.oz-kleur-swatch__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--oz-color-teal, #135350);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	display: none;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	pointer-events: none;
	z-index: 2;
}

.oz-kleur-swatch.is-selected .oz-kleur-swatch__badge {
	display: flex;
}

/* ───────── Kleur lightbox (preview + add CTA on swatch click) ───────── */

.oz-kleur-lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity 180ms ease;
}

.oz-kleur-lb.is-open {
	pointer-events: auto;
	opacity: 1;
}

.oz-kleur-lb__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 22, 24, 0.62);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.oz-kleur-lb__dialog {
	position: relative;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	width: min(480px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 20px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transform: translateY(8px) scale(0.98);
	transition: transform 180ms ease;
}

.oz-kleur-lb.is-open .oz-kleur-lb__dialog {
	transform: translateY(0) scale(1);
}

.oz-kleur-lb__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: #444;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 120ms ease;
}

.oz-kleur-lb__close:hover,
.oz-kleur-lb__close:focus-visible {
	background: #f0ede8;
}

.oz-kleur-lb__preview {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #f0ede8;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.oz-kleur-lb__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.oz-kleur-lb__title {
	margin: 4px 0 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--oz-color-text, #333);
	line-height: 1.2;
}

.oz-kleur-lb__status {
	margin: 0;
	font-size: 14px;
	color: #6b6b6b;
	min-height: 1.4em;
}

.oz-kleur-lb__cta {
	appearance: none;
	border: 0;
	border-radius: 8px;
	padding: 14px 18px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	background: var(--oz-color-teal, #135350);
	color: #fff;
	transition: background 120ms ease, transform 120ms ease;
}

.oz-kleur-lb__cta:hover,
.oz-kleur-lb__cta:focus-visible {
	background: #0f4441;
}

.oz-kleur-lb__cta:active {
	transform: translateY(1px);
}

.oz-kleur-lb__cta--remove {
	background: #b32d2e;
}

.oz-kleur-lb__cta--remove:hover,
.oz-kleur-lb__cta--remove:focus-visible {
	background: #8d2424;
}

.oz-kleur-lb__cta--full {
	background: #6b6b6b;
}

.oz-kleur-lb__cta--full:hover,
.oz-kleur-lb__cta--full:focus-visible {
	background: #4a4a4a;
}

html.oz-kleur-lb-open {
	overflow: hidden;
}

@media (max-width: 540px) {
	.oz-kleur-lb__dialog {
		width: calc(100vw - 16px);
		padding: 16px 16px 18px;
	}

	.oz-kleur-lb__title {
		font-size: 20px;
	}

	.oz-kleur-lb__cta {
		padding: 16px 18px;
		font-size: 17px;
	}
}

/* ───────── Sticky progress bar (0/4..4/4 + advance CTA) ───────── */

.oz-kleur-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9000;
	background: #fff;
	border-top: 1px solid #e3dfd8;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(110%);
	transition: transform 220ms ease;
	pointer-events: none;
}

.oz-kleur-bar.is-visible {
	transform: translateY(0);
	pointer-events: auto;
}

.oz-kleur-bar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 64px;
}

.oz-kleur-bar__slots {
	display: flex;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
}

.oz-kleur-bar__slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	min-width: 56px;
	max-width: 140px;
	padding: 0 10px;
	border-radius: 999px;
	background: #f0ede8;
	color: #6b6b6b;
	font-size: 13px;
	font-weight: 500;
	border: 1px dashed #c8c3bc;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 0 1 auto;
}

.oz-kleur-bar__slot.is-filled {
	background: #eaf3f1;
	color: var(--oz-color-teal, #135350);
	border-style: solid;
	border-color: var(--oz-color-teal, #135350);
	font-weight: 600;
}

.oz-kleur-bar__copy {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	flex: 0 0 auto;
}

.oz-kleur-bar__count {
	font-size: 14px;
	font-weight: 700;
	color: var(--oz-color-text, #333);
}

.oz-kleur-bar__hint {
	font-size: 12px;
	color: #777;
}

.oz-kleur-bar__cta {
	appearance: none;
	border: 0;
	border-radius: 8px;
	padding: 12px 18px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	background: #f0ede8;
	color: var(--oz-color-teal, #135350);
	border: 1px solid #d6d3ce;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
	flex: 0 0 auto;
}

.oz-kleur-bar__cta:hover,
.oz-kleur-bar__cta:focus-visible {
	background: #e3dfd8;
}

.oz-kleur-bar.is-complete .oz-kleur-bar__cta {
	background: var(--oz-color-teal, #135350);
	color: #fff;
	border-color: var(--oz-color-teal, #135350);
	animation: oz-kleur-bar-pulse 1.4s ease-in-out 0s 2;
}

.oz-kleur-bar.is-complete .oz-kleur-bar__cta:hover,
.oz-kleur-bar.is-complete .oz-kleur-bar__cta:focus-visible {
	background: #0f4441;
}

@keyframes oz-kleur-bar-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(19, 83, 80, 0); }
	50%      { box-shadow: 0 0 0 6px rgba(19, 83, 80, 0.18); }
}

@media (max-width: 640px) {
	.oz-kleur-bar__inner {
		padding: 10px 12px;
		gap: 10px;
		flex-wrap: wrap;
	}

	.oz-kleur-bar__slots {
		order: 1;
		flex-basis: 100%;
		gap: 4px;
	}

	.oz-kleur-bar__slot {
		min-width: 0;
		flex: 1 1 0;
		max-width: none;
		font-size: 11px;
		padding: 0 6px;
	}

	.oz-kleur-bar__copy {
		order: 2;
		flex: 1 1 auto;
	}

	.oz-kleur-bar__cta {
		order: 3;
		padding: 10px 14px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oz-kleur-lb,
	.oz-kleur-lb__dialog,
	.oz-kleur-bar,
	.oz-kleur-bar__cta {
		transition: none;
		animation: none;
	}
}

/* ───────────────────────── Multiselect (autocomplete) ───────────────────────── */
.oz-form__multiselect {
	position: relative;
}

.oz-form__ms-ui {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 6px 8px;
	border: 1px solid #d6d3ce;
	border-radius: 6px;
	background: #fff;
	min-height: 42px;
	align-items: center;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.oz-form__ms-ui:focus-within {
	border-color: var(--oz-color-teal, #135350);
	box-shadow: 0 0 0 3px rgba(19, 83, 80, 0.15);
}

.oz-form__ms-chips {
	display: contents;
}

.oz-form__ms-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 4px 4px 10px;
	background: rgba(19, 83, 80, 0.08);
	color: var(--oz-color-teal, #135350);
	border-radius: 999px;
	font-size: 13px;
	line-height: 1.2;
}

.oz-form__ms-chip-x {
	all: unset;
	cursor: pointer;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: var(--oz-color-teal, #135350);
	opacity: 0.7;
	transition: background 120ms ease, opacity 120ms ease;
}

.oz-form__ms-chip-x:hover,
.oz-form__ms-chip-x:focus-visible {
	background: rgba(19, 83, 80, 0.18);
	opacity: 1;
}

.oz-form__ms-search {
	flex: 1;
	min-width: 140px;
	border: 0;
	outline: none;
	padding: 4px 6px;
	font: inherit;
	font-size: 14px;
	background: transparent;
	color: inherit;
}

.oz-form__ms-suggest {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 240px;
	overflow-y: auto;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #d6d3ce;
	border-radius: 6px;
	box-shadow: 0 4px 18px rgba(20, 30, 40, 0.08);
	z-index: 20;
}

.oz-form__ms-suggest-item {
	padding: 8px 12px;
	font-size: 14px;
	cursor: pointer;
	color: var(--oz-color-text, #333);
}

.oz-form__ms-suggest-item.is-active,
.oz-form__ms-suggest-item:hover {
	background: rgba(19, 83, 80, 0.08);
	color: var(--oz-color-teal, #135350);
}

/* ───────────────────────── Autocomplete (single-select combobox) ───────────────────────── */
.oz-form__autocomplete {
	position: relative;
}

.oz-form__ac-ui {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border: 1px solid #d6d3ce;
	border-radius: 6px;
	background: #fff;
	min-height: 42px;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.oz-form__ac-ui:focus-within {
	border-color: var(--oz-color-teal, #135350);
	box-shadow: 0 0 0 3px rgba(19, 83, 80, 0.15);
}

.oz-form__ac-search {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	padding: 4px 6px;
	font: inherit;
	font-size: 14px;
	background: transparent;
	color: inherit;
}

.oz-form__ac-clear {
	all: unset;
	cursor: pointer;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: var(--oz-color-teal, #135350);
	opacity: 0.7;
	transition: background 120ms ease, opacity 120ms ease;
}

.oz-form__ac-clear:hover,
.oz-form__ac-clear:focus-visible {
	background: rgba(19, 83, 80, 0.12);
	opacity: 1;
}

/* Dropdown arrow on the right so it reads as a combobox, not a text input. */
.oz-form__ac-ui::after {
	content: "";
	width: 10px;
	height: 10px;
	border-right: 1.5px solid #8a8680;
	border-bottom: 1.5px solid #8a8680;
	transform: rotate(45deg) translate(-2px, -2px);
	margin-right: 6px;
	pointer-events: none;
	transition: transform 120ms ease;
}

.oz-form__autocomplete.has-selection .oz-form__ac-ui::after {
	/* Hide arrow when a value is selected — clear button takes its place. */
	display: none;
}

.oz-form__ac-suggest {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 240px;
	overflow-y: auto;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #d6d3ce;
	border-radius: 6px;
	box-shadow: 0 4px 18px rgba(20, 30, 40, 0.08);
	z-index: 20;
}

.oz-form__ac-suggest-item {
	padding: 8px 12px;
	font-size: 14px;
	cursor: pointer;
	color: var(--oz-color-text, #333);
}

.oz-form__ac-suggest-item.is-active,
.oz-form__ac-suggest-item:hover {
	background: rgba(19, 83, 80, 0.08);
	color: var(--oz-color-teal, #135350);
}

.oz-form__ac-suggest-item.is-selected {
	font-weight: 600;
}

/* ───────────────────────── File input ───────────────────────── */
.oz-form__field--file .oz-form__file-input {
	display: block;
	width: 100%;
	padding: 8px 10px;
	border: 1px dashed #d6d3ce;
	border-radius: 6px;
	background: #fafaf8;
	font: inherit;
	font-size: 13px;
	color: inherit;
}

.oz-form__field--file .oz-form__file-input:focus {
	outline: none;
	border-color: var(--oz-color-teal, #135350);
	border-style: solid;
	box-shadow: 0 0 0 3px rgba(19, 83, 80, 0.15);
}

/* ───────────────────────── Star rating picker ───────────────────────── */
/* Radios are rendered 5→1 (reversed) so :checked ~ label can fill leftward. */
.oz-form__rating {
	display: inline-flex;
	flex-direction: row-reverse; /* flips visual order back to 1→5 left-to-right */
	gap: 4px;
}

.oz-form__rating input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.oz-form__rating label {
	cursor: pointer;
	color: #d9d4cc;
	transition: color 120ms ease, transform 120ms ease;
	line-height: 0;
}

.oz-form__rating label svg {
	width: 34px;
	height: 34px;
	fill: currentColor;
}

/* Fill hovered star + all to its left (earlier in reversed DOM = to the right, */
/* so :hover ~ label means higher-value stars, which are visually left of it). */
.oz-form__rating label:hover,
.oz-form__rating label:hover ~ label,
.oz-form__rating input[type="radio"]:checked ~ label {
	color: #f5a623;
}

.oz-form__rating label:hover {
	transform: scale(1.1);
}

.oz-form__rating input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--oz-color-teal, #135350);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ───────── Kleurstalen step-2 progress preview ─────────
 * When the user moves past step 1, the four picked colors render as
 * read-only thumbnails inside step 1's progress <li>. Image source is
 * the page's swatch grid (cloned via JS). No delete affordance: this
 * is a recap, not an editor. Image thumbs carry no caption (the image
 * IS the cue, with title attribute for hover); only code-only fallback
 * chips render their value as text. */
.oz-form__progress-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}
.oz-form__progress-thumb {
	margin: 0;
}
.oz-form__progress-thumb img {
	display: block;
	width: 32px;
	height: 32px;
	object-fit: cover;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.05);
}
.oz-form__progress-thumb--code {
	min-width: 32px;
	min-height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.04);
	border-radius: 3px;
	padding: 0 6px;
}
.oz-form__progress-thumb--code figcaption {
	font-size: 11px;
	line-height: 1.1;
	color: rgba(0, 0, 0, 0.65);
}