.fhd-configurator { --fhd-lijn: #e2e2e2; --fhd-accent: #1a1a1a; }
.fhd-kolommen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 32px; align-items: start; }
.fhd-configurator fieldset { border: 1px solid var(--fhd-lijn); border-radius: 6px; padding: 16px 20px 20px; margin: 0 0 20px; }
/* Een fieldset groeit standaard mee met zijn breedste inhoud. De tabel met negen gebieden
   in stap 5 duwde de stap daardoor onder het prijspaneel (Roy, 24 sep 2026). */
.fhd-configurator fieldset { min-width: 0; }
.fhd-configurator legend { font-weight: 600; padding: 0 6px; }
.fhd-configurator label { display: block; margin-bottom: 14px; font-size: 0.95rem; }
.fhd-configurator label.fhd-vink { display: flex; align-items: center; gap: 8px; }
.fhd-configurator select,
.fhd-configurator input[type="text"],
.fhd-configurator input[type="email"],
.fhd-configurator input[type="tel"],
.fhd-configurator input[type="number"],
.fhd-configurator textarea { width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--fhd-lijn); border-radius: 4px; font: inherit; }
.fhd-configurator label.fhd-vink input { width: auto; margin: 0; }
.fhd-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* De kolom moet de hele hoogte pakken, anders heeft het prijsblok geen ruimte
   om mee te schuiven en verdwijnt het zodra je verder naar beneden vult. */
.fhd-prijs { align-self: stretch; }
.fhd-prijs-vast { position: sticky; top: 24px; border: 1px solid var(--fhd-lijn); border-radius: 6px; padding: 20px; }
.fhd-prijs-label { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: #666; }
.fhd-bedrag { display: block; font-size: 2rem; line-height: 1.2; margin: 6px 0 12px; color: var(--fhd-accent); }
.fhd-toelichting { font-size: 0.85rem; color: #666; margin: 0; }
.fhd-per-stuk { font-size: 0.85rem; color: #666; margin: -10px 0 8px; }
.fhd-totaal { font-size: 0.95rem; font-weight: 600; margin: 0 0 12px; }
.fhd-bleken-volgt { margin: 4px 0 0; }
.fhd-fout { font-size: 0.85rem; color: #a1301f; margin: 12px 0 0; }
@media (max-width: 782px) { .fhd-kolommen { grid-template-columns: 1fr; } .fhd-prijs-vast { position: static; } }
.fhd-verstuur { margin-top: 16px; width: 100%; }
.fhd-verstuur[disabled] { opacity: 0.6; cursor: default; }
.fhd-bevestiging { font-size: 0.9rem; color: #1d6b3a; margin: 12px 0 0; }

/* Specificatiestappen. Blokken met een eigen kopje, zodat een stap met tien vragen
   leesbaar blijft en niet als een lange lijst velden oogt. */
.fhd-blok {
	padding: 14px 0;
	border-bottom: 1px solid #e6e6e6;
}

.fhd-blok:last-child {
	border-bottom: 0;
}

.fhd-blok-titel {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.fhd-uitleg {
	margin: 0 0 8px;
	font-size: 13px;
	color: #555;
}

.fhd-blok[hidden] {
	display: none;
}

/* De zestien clipposities als een compact raster, want zestien vinkjes onder elkaar
   maakt de stap twee schermen langer. */
.fhd-locaties {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 6px;
	max-width: 360px;
}

.fhd-locatie {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
}

/* Vraagteken met uitleg, zoals in de module die de salons kennen. */
.fhd-hulp {
	border: 0;
	background: #e2007a;
	color: #fff;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-size: 12px;
	line-height: 18px;
	padding: 0;
	cursor: pointer;
	vertical-align: middle;
}

.fhd-hulptekst {
	background: #f6f6f6;
	border-left: 3px solid #e2007a;
	padding: 10px 12px;
	margin: 8px 0;
	font-size: 13px;
	line-height: 1.5;
}

.fhd-blok-beeld {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 10px 0;
}

/* Stap voor stap. */
.fhd-stap[hidden] {
	display: none;
}

.fhd-stapbalk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid #e6e6e6;
}

.fhd-stapstand {
	font-size: 13px;
	color: #555;
}

.fhd-stapbalk button[disabled] {
	opacity: 0.4;
	cursor: default;
}

/* De twee tabellen over de negen gebieden. Op een smal scherm schuiven ze
   horizontaal, want negen kolommen passen daar nooit op. */
.fhd-tabel-rol {
	overflow-x: auto;
	margin: 10px 0;
}

.fhd-matrix {
	border-collapse: collapse;
	font-size: 13px;
	min-width: 620px;
}

.fhd-matrix th,
.fhd-matrix td {
	border: 1px solid #e6e6e6;
	padding: 4px 6px;
	text-align: left;
	vertical-align: middle;
}

.fhd-matrix thead th {
	background: #f6f6f6;
	text-align: center;
	font-weight: 600;
	white-space: nowrap;
}

.fhd-matrix thead th span {
	display: block;
	font-weight: 400;
	font-size: 11px;
	color: #666;
}

.fhd-matrix tbody th {
	background: #fafafa;
	white-space: nowrap;
}

.fhd-matrix input[type="text"],
.fhd-matrix input[type="number"] {
	width: 58px;
	padding: 4px;
}

.fhd-matrix tr[hidden] {
	display: none;
}

.fhd-rij-erbij {
	margin-top: 8px;
}

/* De eerste kolom van de kleurtabel draagt drie dingen onder elkaar, de naam van de
   rij, de kleurring en het kleurnummer. Zonder deze regels lopen die over elkaar
   heen, gezien op 12 sep 2026. */
.fhd-matrix tbody th {
	min-width: 190px;
}

.fhd-matrix tbody th > span,
.fhd-matrix tbody th > select,
.fhd-matrix tbody th > input {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 4px;
	box-sizing: border-box;
}

.fhd-matrix tbody th > *:last-child {
	margin-bottom: 0;
}

.fhd-matrix tbody th select,
.fhd-matrix tbody th input {
	font-size: 13px;
	padding: 4px 6px;
}

/* De cellen zelf even hoog houden, ook als de eerste kolom hoger is. */
.fhd-matrix td {
	height: 1px;
}

.fhd-matrix td input {
	width: 100%;
	min-width: 52px;
	box-sizing: border-box;
}

/* De modellen als tekeningen, zoals in de module die de salons kennen. Je kiest
   door op het plaatje te klikken. */
.fhd-modellen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
	margin-top: 8px;
}

.fhd-model {
	display: block;
	text-align: center;
	cursor: pointer;
	border: 2px solid transparent;
	padding: 4px;
	font-size: 12px;
	line-height: 1.3;
}

.fhd-model img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 4px;
}

.fhd-model input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.fhd-model:hover {
	border-color: #e6e6e6;
}

.fhd-model:has(input:checked) {
	border-color: #e2007a;
}

/* De materiaalposities, een tekening per aantal gebieden. */
.fhd-posities {
	display: flex;
	gap: 12px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.fhd-positie {
	margin: 0;
	text-align: center;
	font-size: 12px;
	max-width: 120px;
}

.fhd-positie img {
	display: block;
	width: 100%;
	height: auto;
}

.fhd-positie[hidden] {
	display: none;
}

/* Verborgen is verborgen. De regel hierboven die elk label op display block zet,
   won het van de standaardregel voor [hidden], waardoor gebied B en C bleven staan
   terwijl ze wel waren uitgeschakeld. Gezien op 12 sep 2026. */
.fhd-configurator [hidden] {
	display: none !important;
}

/* Er staat er steeds een in beeld, namelijk die bij het gekozen aantal gebieden. */
.fhd-positie {
	max-width: 160px;
}

/* maatwerk 15-09 */

/* Clips per locatie, een regel met soort en kleur per aangeklikte locatie. */
.fhd-clipregels {
	margin-top: 10px;
}

.fhd-cliprij {
	display: grid;
	grid-template-columns: 90px 1fr 1fr;
	gap: 10px;
	align-items: end;
	padding: 6px 0;
	border-top: 1px solid #f0f0f0;
}

.fhd-cliprij label {
	margin-bottom: 0;
}

.fhd-cliprij-naam {
	font-weight: 600;
	font-size: 13px;
	padding-bottom: 10px;
}

@media (max-width: 520px) {
	.fhd-cliprij { grid-template-columns: 1fr 1fr; }
	.fhd-cliprij-naam { grid-column: 1 / -1; padding-bottom: 0; }
}

/* Rand aanzet en type aanzet kiezen door op de tekening te klikken. */
.fhd-beeldkeuze {
	position: relative;
	display: inline-block;
	max-width: 100%;
	margin: 6px 0 10px;
}

.fhd-beeldkeuze img {
	display: block;
	max-width: 100%;
	height: auto;
}

.fhd-configurator label.fhd-beeldvlak {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 4px;
}

.fhd-beeldvlak:hover {
	border-color: #e6e6e6;
}

.fhd-beeldvlak:has(input:checked) {
	border-color: #e2007a;
	background: rgba(226, 0, 122, 0.05);
}

.fhd-beeldvlak:focus-within {
	outline: 2px solid #1a1a1a;
	outline-offset: 1px;
}

.fhd-beeldvlak input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.fhd-onzichtbaar {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Keuzelijsten in de tabellen. Met 58px werd Recht op 1400px afgekapt tot Rech,
   want het pijltje van de lijst neemt ook ruimte. 78px past ook Medium, de langste
   keuze. De tabel schuift op een smal scherm, dus breder mag. 15 sep 2026. */
.fhd-matrix td select {
	width: 100%;
	min-width: 78px;
	padding: 4px 2px;
	font-size: 13px;
	box-sizing: border-box;
	text-overflow: clip;
}

.fhd-doorzetten {
	display: block;
	margin-top: 4px;
	padding: 2px 6px;
	font-size: 11px;
	border: 1px solid #d6d6d6;
	background: #fff;
	border-radius: 3px;
	cursor: pointer;
}

.fhd-doorzetten:hover {
	border-color: #e2007a;
}

.fhd-som {
	text-align: center;
	font-size: 12px;
	color: #1d6b3a;
}

.fhd-som.fhd-som-fout {
	color: #a1301f;
	font-weight: 600;
}

.fhd-kleur-weg {
	border: 0;
	background: none;
	color: #a1301f;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.fhd-kleur-toevoegen {
	display: flex;
	gap: 10px;
	align-items: end;
	flex-wrap: wrap;
	margin-top: 8px;
}

.fhd-kleur-toevoegen label {
	margin-bottom: 0;
}

/* Controle voor de volgende stap. */
.fhd-controle {
	border: 1px solid #a1301f;
	border-left-width: 4px;
	background: #fdf4f2;
	color: #5a1a10;
	padding: 10px 14px;
	margin-top: 16px;
	font-size: 14px;
}

.fhd-controle p {
	margin: 0 0 6px;
	font-weight: 600;
}

.fhd-controle ul {
	margin: 0;
	padding-left: 18px;
}

.fhd-controle .button {
	margin-left: 6px;
	font-size: 12px;
	padding: 2px 8px;
}

.fhd-configurator .fhd-ontbreekt {
	outline: 2px solid #a1301f;
	outline-offset: 2px;
}

/* Het overzicht in de laatste stap. */
.fhd-overzicht-stap {
	margin-bottom: 16px;
}

.fhd-overzicht-stap h4 {
	margin: 0 0 6px;
	font-size: 15px;
}

.fhd-overzicht dl {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 2px 14px;
	margin: 0;
	font-size: 13px;
}

.fhd-overzicht dt {
	color: #666;
}

.fhd-overzicht dd {
	margin: 0;
	font-weight: 600;
}

.fhd-overzicht-tabelnaam {
	margin: 10px 0 0;
	font-size: 13px;
	color: #666;
}

.fhd-matrix-overzicht tbody th {
	min-width: 0;
	font-weight: 400;
}

/* Opslaan als offerte, sinds 0.10.0. Rustiger dan de knop versturen. */
.fhd-configurator .fhd-prijs-vast .fhd-opslaan.button,
.fhd-configurator .fhd-prijs-vast .fhd-opslaan.button:hover { margin-top: 10px; width: 100%; background: #fff; color: var(--fhd-accent); border: 1px solid var(--fhd-accent); }
.fhd-opslaan[disabled] { opacity: 0.6; cursor: default; }
.fhd-opgeslagen { margin: 10px 0 0; }