/* ===========================================================================
 * Retrog - frisse laag (2026)
 *
 * Nieuwe visuele laag voor de configurator, in de stijl van primixquotes.com:
 * een rustige lichte pagina, witte kaarten met zachte schaduw, ronde hoeken,
 * veel witruimte en een genummerde stappenkolom links.
 *
 * Kleuren: neutraal zwart/wit/grijs als basis, het RetroG-geel (#fff100) is
 * bewust gereserveerd voor selectie - de gekozen optie, de actieve stap, de
 * voortgangsbalk. Zo blijft de huisstijl herkenbaar zonder dat de pagina
 * dichtslibt met geel.
 *
 * Dit bestand wordt als laatste ingeladen (zie index.php) en overschrijft
 * bewust de oudere opmaak in template_retrog.css en de <style>-blokken die
 * com_productbuilder zelf meestuurt. Die bestanden zijn met opzet ongemoeid
 * gelaten: ze bevatten de Joomla 3 -> 4 reparaties en het grid, en zo is deze
 * restyling terug te draaien door hieronder een regel in index.php te
 * verwijderen.
 *
 * Let op bij het aanpassen: het accordeon van com_productbuilder verbergt een
 * paneel door .group_details met een negatieve margin-top omhoog te schuiven,
 * ter grootte van de hoogte die bij het laden is opgemeten. Daarom staat op
 * .group_details box-sizing:border-box - anders telt de padding niet mee in
 * die meting en blijft er een strook van een dicht paneel zichtbaar.
 * ========================================================================= */

:root {
	--pb-bg:           #f5f6f8;
	--pb-surface:      #ffffff;
	--pb-surface-alt:  #fafbfc;

	--pb-ink:          #14171c;   /* koppen, knoppen, primaire tekst */
	--pb-ink-soft:     #5b6472;   /* labels, hulpteksten */
	--pb-ink-faint:    #98a0ad;   /* stapnummers, placeholders */

	--pb-line:         #e7eaef;   /* haarlijn */
	--pb-line-strong:  #d5dae2;   /* hover-rand, invoervelden */

	--pb-accent:       #fff100;   /* RetroG-geel: alleen selectie */
	--pb-accent-line:  #d9c400;   /* leesbare gele rand op wit */
	--pb-accent-tint:  #fffdf0;   /* zachte gele vulling */
	--pb-required:     #d64545;   /* stip bij een verplicht veld */
	--pb-ok:           #1a7f4b;   /* vinkje bij een ingevuld veld */

	--pb-radius:       10px;
	--pb-radius-lg:    14px;
	--pb-radius-pill:  999px;

	--pb-shadow-sm:    0 1px 2px rgba(16, 24, 40, .05);
	--pb-shadow-md:    0 4px 14px -4px rgba(16, 24, 40, .10);
	--pb-shadow-lg:    0 12px 28px -12px rgba(16, 24, 40, .18);

	--pb-font: "Inter", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
	           Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
 * Basis
 * ------------------------------------------------------------------------- */

body {
	font-family: var(--pb-font);
	font-size: 15px;
	line-height: 1.55;
	color: var(--pb-ink);
	background-color: var(--pb-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body,
#pb_mainPage,
#pb_mainPage input,
#pb_mainPage select,
#pb_mainPage textarea,
#pb_mainPage button {
	font-family: var(--pb-font);
}

a:link,
a:active,
a:visited {
	color: var(--pb-ink);
}

a:hover {
	color: var(--pb-ink-soft);
}

/* ---------------------------------------------------------------------------
 * Kop van de pagina
 *
 * De vaste hoogte van 116px verviel: de balk krijgt nu zijn hoogte van het
 * logo plus padding, zodat hij op elk scherm klopt. Blijft bovenin plakken
 * tijdens het scrollen, net als bij primixquotes.com.
 * ------------------------------------------------------------------------- */

#header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: auto;
	min-height: 0;
	padding: 14px 24px;
	background-color: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--pb-line);
	box-sizing: border-box;
}

#logomenu li a {
	display: inline-block;
	margin: 0;
	padding: 0;
}

#logomenu img {
	display: block;
	max-height: 54px;
	width: auto;
}

/* Hoofdmenu: van 22px/300 terug naar een rustige 15px, met een zachte
 * hover-pil in plaats van kale tekst. */
#mainmenualign ul.nav {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 2px;
	height: 100%;
	min-height: 54px;
}

#mainmenualign ul.nav > li {
	display: block;
	float: none;
}

#mainmenualign ul.nav > li > a {
	display: block;
	margin: 0;
	padding: 8px 14px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--pb-ink-soft);
	border-radius: var(--pb-radius);
	transition: background-color .15s ease, color .15s ease;
}

#mainmenualign ul.nav > li > a:hover,
#mainmenualign ul.nav > li > a:focus,
#mainmenualign ul.nav > li.active > a,
#mainmenualign ul.nav > li.current > a {
	color: var(--pb-ink);
	background-color: #eef0f4;
}

@media (max-width: 991px) {
	#mainmenualign ul.nav > li > a {
		font-size: 15px;
	}
}

/* Hamburger */
.navbar .btn-navbar,
.navbar .btn-navbar:hover,
.navbar .btn-navbar:focus,
.navbar .btn-navbar:active {
	padding: 10px 12px;
	color: var(--pb-ink);
	background: transparent;
	border: 1px solid var(--pb-line);
	border-radius: var(--pb-radius);
	box-shadow: none;
}

.navbar .btn-navbar .icon-bar {
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--pb-ink);
}

/* ---------------------------------------------------------------------------
 * Pagina-intro
 *
 * Was een donkergrijs blok van 45px boven en onder. Dat legde veel gewicht
 * bovenaan een pagina die verder juist licht en rustig hoort te zijn; de
 * tekst staat er nu gewoon op de pagina, links uitgelijnd boven de kaart.
 * ------------------------------------------------------------------------- */

#section-slogan {
	margin-bottom: 0;
	padding: 40px 0 8px;
	background-color: transparent;
}

#section-slogan .center {
	text-align: left;
	line-height: inherit;
}

#section-slogan h2,
#section-slogan h2.white,
#section-slogan .white {
	color: var(--pb-ink);
}

#section-slogan h2 {
	margin: 0 0 6px;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
	text-shadow: none;
}

#section-slogan p,
#section-slogan p.white {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	color: var(--pb-ink-soft);
}

/* ---------------------------------------------------------------------------
 * Knoppenrij "Offerte aanvraag / Login"
 * ------------------------------------------------------------------------- */

#topmenu {
	padding-top: 20px;
	padding-bottom: 4px;
}

#topmenu ul.nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

#topmenu ul.nav > li {
	display: block;
	float: none;
}

#topmenu ul.nav > li > a,
ul.menu_top li a:link,
ul.menu_top li a:visited,
ul.menu_top li a:active {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pb-ink-soft);
	background-color: transparent;
	border: 1px solid var(--pb-line);
	border-radius: var(--pb-radius-pill);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

#topmenu ul.nav > li:first-child > a {
	color: #fff;
	background-color: var(--pb-ink);
	border-color: var(--pb-ink);
}

#topmenu ul.nav > li:first-child > a:hover {
	color: #fff;
	background-color: #2b313b;
	border-color: #2b313b;
}

#topmenu ul.nav > li > a:hover,
ul.menu_top li a:hover {
	color: var(--pb-ink);
	background-color: #eef0f4;
	border-color: var(--pb-line-strong);
}

/* Offerte-items voor een ingelogde bezoeker.
 *
 * Ze erven de pil-vorm van de regel hierboven; alleen het onderscheid met de
 * gewone knoppen staat hier. "Uitloggen" is een uitgang en geen aanbod, dus
 * de tekst is een tint stiller — maar de rand blijft staan, anders leest de
 * knop als uitgeschakeld.
 *
 * Er staat bewust geen scheidingsstreep voor "Uitloggen": de rij mag
 * afbreken, en een streep aan de linkerkant komt dan halverwege een nieuwe
 * regel terecht in plaats van tussen twee knoppen.
 */
#topmenu ul.nav > li.pb-account-item > a {
	padding-right: 14px;
	padding-left: 14px;
	font-weight: 500;
}

#topmenu ul.nav > li.pb-account-item--logout > a {
	color: var(--pb-ink-faint);
}

/* ---------------------------------------------------------------------------
 * Raster van de configurator
 *
 * .pb-shell wordt door configurator-steps.js op de .container gezet; de
 * :has()-variant zorgt dat de indeling ook zonder JavaScript klopt. De
 * kolombreedtes staan vast in CSS en niet in JavaScript: het accordeon meet
 * bij het laden de hoogte van elk paneel op, en die meting moet gebeuren als
 * de rechterkolom al zijn definitieve breedte heeft.
 * ------------------------------------------------------------------------- */

.container:has(> form > #pb_mainPage),
.container.pb-shell {
	display: grid;
	grid-template-columns: 248px minmax(0, 1fr);

	/* De stappen en de productafbeelding zitten samen in .pb-side, dus kolom 1
	 * is één blok en er zijn nog maar twee rijen nodig. Eerder stonden die twee
	 * los in rij 2 en 3, en moest rij 3 op 1fr staan om te voorkomen dat de
	 * afbeelding van de stappen wegzakte. Dat is nu niet meer aan de orde. */
	grid-template-rows: auto 1fr;
	column-gap: 32px;
	align-items: start;
	padding-bottom: 64px;
}

.pb-shell > .pb-progress          { grid-column: 1 / -1; grid-row: 1; }
.pb-shell > .pb-side              { grid-column: 1;      grid-row: 2; }
.pb-shell > form                  { grid-column: 2;      grid-row: 2; }

/* De oude float-indeling (25% / 70%) is niet meer nodig binnen het raster.
 * Let op de selector: de afbeelding is geen direct kind van .pb-shell meer,
 * maar zit in .pb-side. */
.pb-shell #product_left_col,
#pb_mainPage .product_right_col,
#pb_mainPage #product_right_col {
	float: none;
	width: auto;
	margin-left: 0;
}

#pb_mainPage {
	position: relative;
}

/* ---------------------------------------------------------------------------
 * Voortgangsbalk
 * ------------------------------------------------------------------------- */

.pb-progress {
	margin: 20px 0 28px;
}

.pb-progress__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 8px;
}

.pb-progress__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--pb-ink-soft);
}

.pb-progress__pct {
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--pb-ink-faint);
}

.pb-progress__track {
	height: 6px;
	overflow: hidden;
	background-color: #e4e7ec;
	border-radius: var(--pb-radius-pill);
}

.pb-progress__bar {
	width: 0;
	height: 100%;
	background-color: var(--pb-accent);
	border-radius: inherit;
	transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------------------
 * Stappenkolom
 * ------------------------------------------------------------------------- */

/* De hele linkerkolom blijft staan, niet alleen de stappen. Toen alleen de
 * stappen bleven staan schoven ze over de productafbeelding eronder heen zodra
 * je ver genoeg naar beneden ging; nu bewegen de twee niet meer ten opzichte
 * van elkaar.
 *
 * De max-height is de vangnetregel: is de kolom hoger dan het scherm - een lang
 * gekozen product, veel stappen, of gewoon een laag venster - dan schuift de
 * kolom van binnen mee in plaats van dat de onderkant onbereikbaar wordt.
 * Boven die grens is er geen schuifbalk te zien. */
.pb-side {
	position: sticky;
	top: 100px;
	max-height: calc(100vh - 124px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.pb-steps {
	margin-bottom: 24px;
}

.pb-steps__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pb-steps__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pb-steps__btn {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
	color: var(--pb-ink-soft);
	background: transparent;
	border: 0;
	border-radius: 0 var(--pb-radius) var(--pb-radius) 0;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

/* Het staafje links markeert de stap waar je nu bent. */
.pb-steps__btn::before {
	content: "";
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 0;
	width: 3px;
	border-radius: var(--pb-radius-pill);
	background-color: transparent;
	transition: background-color .15s ease;
}

.pb-steps__btn:hover {
	color: var(--pb-ink);
	background-color: #edeff3;
}

.pb-steps__no {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.6;
	color: var(--pb-ink-faint);
}

.pb-steps__title {
	flex: 1 1 auto;
	min-width: 0;
}

.pb-steps__item.is-current .pb-steps__btn {
	font-weight: 700;
	color: var(--pb-ink);
}

.pb-steps__item.is-current .pb-steps__btn::before {
	background-color: var(--pb-accent);
}

.pb-steps__item.is-current .pb-steps__no {
	color: var(--pb-ink);
}

.pb-steps__item.is-done .pb-steps__btn {
	color: var(--pb-ink);
}

.pb-steps__item.is-done .pb-steps__no {
	color: var(--pb-ink-soft);
}

/* ---------------------------------------------------------------------------
 * Productafbeelding (linkerkolom)
 * ------------------------------------------------------------------------- */

#pb_mainPage #img_descr,
#img_descr {
	overflow: hidden;
}

/* Even groot als de stappen ernaast (.pb-steps__title is ook 14px): de
 * linkerkolom is bijzaak naast het formulier, en met 15px trok de
 * productomschrijving meer aandacht dan de vraag die je moet beantwoorden. */
#product_left_col {
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.45;
}

#product_left_col #imageContainer,
#imageContainer {
	margin: 0;
	padding: 16px;
	background-color: var(--pb-surface);
	border: 1px solid var(--pb-line);
	border-radius: var(--pb-radius-lg);
	box-shadow: var(--pb-shadow-sm);
}

#imageContainer img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--pb-radius);
	background-color: var(--pb-surface-alt);
}

#imageContainer h3,
#imageContainer h3#pb_header {
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--pb-ink);
}

#imageContainer h3:empty {
	display: none;
}

/* Onder de afbeelding staan drie dingen uit de component die niets tonen maar
 * wel ruimte innemen: twee <br/>'s, een lege <h3> en een lege werkbalk. Samen
 * zo'n 40px gat tussen de productnaam en de samenvatting eronder.
 *
 * De vorige versie van deze regel had #product_left_col > br staan. Die sloeg
 * nergens op aan: de <br/>'s zijn geen direct kind van die kolom maar staan een
 * niveau dieper, in #imageContainer. */
#product_left_col br,
#imageContainer br {
	display: none;
}

/* De <h3> die los in de kaart staat is in de component leeggelaten - de inhoud
 * is er weggecommentarieerd. De echte productnaam staat een niveau dieper, in
 * .activeContent, en blijft dus gewoon staan.
 *
 * Dit kan niet met :empty: er staat een regeleinde in, en dan telt een element
 * voor de browser niet als leeg. Vandaar de plaats in de boom als kenmerk. */
#imageContainer > h3#pb_header {
	display: none;
}

/* Lege blokken zonder hoogte, maar mét marge: die marge is het hele probleem. */
#imageContainer .pb_prod_img {
	display: none;
}

#imageContainer .pb_toolbar {
	margin-top: 0;
}

.group_product_desc,
#pb_mainPage .group_product_desc {
	background: transparent;
}

/* ---------------------------------------------------------------------------
 * Samenvatting onder de productafbeelding
 *
 * De component zet hier per stap een blokje neer met de omschrijving van wat je
 * hebt gekozen - het type dakluik, de verdiepingshoogte, de ladder. Die blokjes
 * staan er al vanaf het laden en zijn leeg tot je iets kiest. Ze stonden als
 * kale regels onder elkaar, even zwaar als de titel erboven en zonder enige
 * scheiding; hieronder krijgen ze de vorm van een lijstje.
 *
 * De eerste gevulde regel is je hoofdkeuze en blijft in de gewone tekstkleur
 * staan; wat daarna komt is toelichting daarbij en wordt een tint stiller. Dat
 * onderscheid loopt via de ~-selector en niet via een vast nummer: welk blokje
 * als eerste gevuld raakt hangt af van het product.
 * ------------------------------------------------------------------------- */

/* Lege blokjes horen geen ruimte in te nemen. */
#imageContainer .group_product_desc:empty {
	display: none;
}

#imageContainer .group_product_desc {
	margin: 0;
}

/* De haarlijn zit boven de eerste gevulde regel en niet onder de titel: zolang
 * er nog niets gekozen is, hoort er ook geen streep onder de productnaam te
 * hangen. */
#imageContainer .group_product_desc:not(:empty) {
	margin-top: 12px;
	border-top: 1px solid var(--pb-line);
}

#imageContainer .group_product_desc:not(:empty) ~ .group_product_desc:not(:empty) {
	margin-top: 0;
	border-top: 0;
}

#imageContainer .group_product_desc p {
	margin: 0;
	padding: 10px 0 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--pb-ink);
}

#imageContainer .group_product_desc:not(:empty) ~ .group_product_desc p {
	font-weight: 400;
	color: var(--pb-ink-soft);
}

/* ---------------------------------------------------------------------------
 * De kaart met de vragen
 * ------------------------------------------------------------------------- */

#groups_part {
	box-sizing: border-box;
	padding: 8px 24px 24px;
	background: var(--pb-surface);
	border: 1px solid var(--pb-line);
	border-radius: var(--pb-radius-lg);
	box-shadow: var(--pb-shadow-sm);
}

/* "Ik ben een geregistreerde gebruiker": een rustige regel bovenin de kaart,
 * gescheiden van de eerste vraag. */
/* Met de ID erbij, anders wint "#pb_mainPage label { display: inline-block }"
 * uit editable_pbproduct.css en krimpt de regel tot de breedte van zijn tekst. */
#pb_mainPage .pb-login-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 10px 0;
	font-size: 13px;
	color: var(--pb-ink-soft);
	border-bottom: 1px solid var(--pb-line);
	cursor: pointer;
}

#pb_mainPage .pb-login-toggle:hover {
	color: var(--pb-ink);
}

/* ---------------------------------------------------------------------------
 * Accordeon
 * ------------------------------------------------------------------------- */

#pb_mainPage .group,
#pb_mainPage .group_wrap_all .group {
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

#pb_mainPage .group_expander {
	box-sizing: border-box;
	overflow: hidden;          /* verbergt het opgeschoven paneel netjes */
	min-height: 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--pb-line);
}

#pb_mainPage .group:first-child .group_expander {
	border-top: 0;
}

/* De achtergrond van de kop moet dekkend blijven en boven .group_details
 * liggen. Een dichtgeklapt paneel wordt namelijk precies zover omhoog
 * geschoven dat zijn onderkant samenvalt met de onderkant van de kop: de kop
 * dekt het af. Maak je de kop doorzichtig, dan schemert de onderste strook van
 * het paneel - meestal de knop "Volgende" - er dwars doorheen. */
#pb_mainPage .group_header,
#pb_mainPage .group_header.header-active {
	/* De component zet hier width:100%; zonder border-box telt de padding
	 * daar bovenop en steekt de kop (en dus het open/dicht-pictogram) buiten
	 * de kaart uit. */
	box-sizing: border-box;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: 0;
	padding: 16px 34px 16px 0;
	background-color: var(--pb-surface);
	border: 0;
	border-radius: 0;
	color: var(--pb-ink);
	transition: color .15s ease;
}

#pb_mainPage .group_header:hover {
	color: var(--pb-ink-soft);
}

#pb_mainPage .group_header h3 {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 17px !important;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--pb-ink) !important;
	text-shadow: none !important;
}

#pb_mainPage .group_header.header-active h3 {
	color: var(--pb-ink) !important;
}

/* box-sizing is hier geen smaakkwestie: het accordeon rekent met de opgemeten
 * hoogte van dit blok, en die moet de padding meetellen. Zie de kop van dit
 * bestand. */
#pb_mainPage .group_details {
	box-sizing: border-box;

	/* Dichtgeklapt tot het accordeon bij het laden zelf de juiste marge zet.
	 * com_productbuilder bedoelt dit ook zo, maar template_retrog.css zette er
	 * met "#pb_mainPage .group_details { margin-top: 3px }" een selector met
	 * hogere voorrang overheen. Gevolg: tussen de eerste weergave en het
	 * moment dat het accordeon zijn werk doet stonden alle panelen open en
	 * over elkaar heen. */
	margin-top: -999px;
	margin-left: 0;
	margin-right: 0;

	/* De onderruimte is hier geen smaakkwestie. Een dichtgeklapt paneel wordt
	 * precies zover omhoog geschoven dat zijn onderkant samenvalt met de
	 * onderkant van de kop; de onderste strook ter hoogte van de kop valt
	 * daardoor binnen het zichtbare vlak en wordt door de kop afgedekt. Op
	 * halve pixels laat die afdekking een haarlijn van de inhoud door - in de
	 * praktijk de donkere knop "Volgende". Met minstens een kophoogte aan lege
	 * ruimte onderaan valt er in die strook niets meer te zien; de eigen witte
	 * achtergrond maakt het sluitend. */
	--pb-panel-pad: 60px;
	padding: 0 0 var(--pb-panel-pad);
	background-color: var(--pb-surface);
}

/* Zolang het paneel openstaat is die reserve alleen maar een gat tussen de
 * knop "Volgende" en de kop eronder. Hij wordt hier weggetrokken: er blijft
 * 15px van over, wat samen met de ruimte tussen de panelen op zo'n 30px
 * uitkomt. Het rekensommetje loopt via --pb-panel-pad, zodat de reserve en wat
 * ervan wordt weggetrokken niet uit elkaar kunnen lopen - ook niet op smalle
 * schermen, waar de reserve groter is.
 *
 * Dit moet een marge zijn en geen kleinere padding. De component meet de hoogte
 * van elk paneel één keer op en leidt daaruit af hoe ver een dicht paneel
 * omhoog geschoven wordt. Die meting is inclusief padding (border-box), dus
 * padding die daarna verandert zet het dichtklappen uit de pas en laat de
 * donkere knop onder de kop uitsteken. Een marge telt niet mee in die hoogte.
 *
 * De klasse komt uit configurator-steps.js; het accordeon zelf werkt met een
 * inline margin-top, en daar kan CSS niet op selecteren. De overgang van een
 * halve seconde is die van het accordeon, zodat het meeschuift in plaats van
 * verspringt. */
#pb_mainPage .group_expander.pb-open .group_details {
	margin-bottom: calc(15px - var(--pb-panel-pad));
	transition: margin-bottom .5s ease-in-out;
}

#pb_mainPage #groups_note,
#pb_mainPage .group_details #groups_note {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--pb-ink-soft);
}

#pb_mainPage #groups_note:empty {
	display: none;
	margin: 0;
}

/* Open/dicht-pictogram. De component wisselt met JavaScript de
 * background-position tussen 0 en -20px, dus dit blijft een sprite van
 * 20 bij 40 pixels: bovenste helft dicht, onderste helft open. */
#pb_mainPage .icon-close-open {
	top: 50%;
	right: 2px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' viewBox='0 0 20 40'%3E%3Cg fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3Cpath d='M5 30l5-5 5 5' stroke='%2314171c'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 20px 40px;
}

/* Verplicht-teken: was een pictogrambestand van 20 bij 20, nu een stipje dat
 * direct achter de veldnaam staat. Rood en niet geel: geel betekent in dit
 * ontwerp "dit heb je gekozen", en dat is iets anders dan "dit moet je nog
 * invullen". */
#pb_mainPage .icon-mandatory {
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 0 2px 1px;
	vertical-align: middle;
	background-image: none;
	background-color: var(--pb-required);
	border-radius: 50%;
}

/* Ingevuld-teken: het tegenhangertje van de stip hierboven, op precies dezelfde
 * plek achter de veldnaam. Het JavaScript van de configurator wisselt alleen de
 * klasse om (icon-mandatory <-> icon-checked), dus de twee moeten even zwaar
 * wegen; een vinkje van 12 bij 12 houdt de regel even rustig als het stipje.
 *
 * Het was een PNG van 20 bij 20: een grijs rondje met een vinkje erin, wazig op
 * een scherm met hoge resolutie. Nu een SVG in de stylesheet zelf. Bewust geen
 * pictogramlettertype: dat is een extra bestand dat opgehaald moet worden, en
 * tot het binnen is staat er niets of even iets verkeerds. Zo staat het vinkje
 * er meteen, blijft het scherp op elk scherm, en ligt de kleur hier vast in
 * plaats van in een plaatje.
 *
 * Let op bij aanpassen: het groen staat als #1a7f4b in de SVG hieronder en niet
 * als var(--pb-ok). Een CSS-variabele werkt niet binnen een data:-URL, dus wie
 * de kleur wijzigt moet dat op beide plekken doen.
 */
#pb_mainPage .icon-checked {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 0 1px 1px;
	vertical-align: middle;
	background-color: transparent;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%231a7f4b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
	border-radius: 0;
}

#pb_mainPage .man-attr-icon {
	display: inline-block;
	float: none;
	width: auto;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
 * Keuzelijst met producten (stap 1)
 *
 * Was zwart met gele rand en gele tekst. Nu witte regels met een haarlijn,
 * die bij aanwijzen iets omhoog komen - en geel oplichten als dit het
 * product is waarvoor je nu een offerte maakt.
 * ------------------------------------------------------------------------- */

#pb_mainPage #menuContainer {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#pb_mainPage .product-panel {
	display: block;
	margin: 0;
	padding: 0;
}

#pb_mainPage .product-panel .normalMenu,
#pb_mainPage .product-panel .activeMenu {
	display: block;
	background: transparent;
	border: 0;
}

#pb_mainPage .product-panel a,
#pb_mainPage .product-panel a:link,
#pb_mainPage .product-panel a:visited {
	display: block;
	text-decoration: none;
}

#pb_mainPage a .product-panel-heading,
#pb_mainPage a:link .product-panel-heading,
#pb_mainPage a:active .product-panel-heading,
#pb_mainPage a:visited .product-panel-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 500;
	color: var(--pb-ink);
	background-color: var(--pb-surface);
	border: 1px solid var(--pb-line);
	border-radius: var(--pb-radius);
	transition: border-color .15s ease, box-shadow .15s ease,
	            transform .15s ease, background-color .15s ease;
}

#pb_mainPage a:hover .product-panel-heading,
#pb_mainPage a:focus .product-panel-heading {
	color: var(--pb-ink);
	background-color: var(--pb-surface);
	border-color: var(--pb-line-strong);
	transform: translateY(-1px);
	box-shadow: var(--pb-shadow-md);
}

#pb_mainPage .product-panel-heading p {
	margin: 0;
	padding: 0;
}

#pb_mainPage .product-panel-heading img {
	flex: 0 0 auto;
	border-radius: 6px;
}

/* Het product waarvoor nu een offerte wordt samengesteld. Deze klasse wordt
 * door configurator-steps.js gezet; de component zelf markeert het niet. */
#pb_mainPage .product-panel.pb-current a .product-panel-heading,
#pb_mainPage .product-panel.pb-current a:link .product-panel-heading,
#pb_mainPage .product-panel.pb-current a:visited .product-panel-heading,
#pb_mainPage .product-panel.pb-current a:hover .product-panel-heading {
	font-weight: 600;
	color: var(--pb-ink);
	background-color: var(--pb-accent-tint);
	border-color: var(--pb-accent-line);
	box-shadow: inset 3px 0 0 var(--pb-accent-line);
}

/* ---------------------------------------------------------------------------
 * Formuliervelden
 * ------------------------------------------------------------------------- */

#pb_mainPage select,
#pb_mainPage textarea,
#pb_mainPage input[type="text"],
#pb_mainPage input[type="number"],
#pb_mainPage input[type="email"],
#pb_mainPage input[type="tel"],
#pb_mainPage input[type="password"],
#pb_mainPage input[type="search"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	min-height: 44px;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--pb-ink);
	background-color: var(--pb-surface);
	border: 1px solid var(--pb-line-strong);
	border-radius: var(--pb-radius);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

#pb_mainPage textarea {
	min-height: 110px;
	resize: vertical;
}

#pb_mainPage select {
	max-width: 100%;
	padding-right: 40px;
	background-color: var(--pb-surface);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235b6472' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 2l5 4 5-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
}

#pb_mainPage select:hover,
#pb_mainPage textarea:hover,
#pb_mainPage input[type="text"]:hover,
#pb_mainPage input[type="number"]:hover,
#pb_mainPage input[type="email"]:hover,
#pb_mainPage input[type="tel"]:hover {
	border-color: #b9c0cb;
}

/* De focusrand is bewust goed zichtbaar: dit is een offerteformulier dat ook
 * met het toetsenbord ingevuld moet kunnen worden. */
#pb_mainPage select:focus,
#pb_mainPage textarea:focus,
#pb_mainPage input[type="text"]:focus,
#pb_mainPage input[type="number"]:focus,
#pb_mainPage input[type="email"]:focus,
#pb_mainPage input[type="tel"]:focus {
	outline: none;
	border-color: var(--pb-accent-line);
	box-shadow: 0 0 0 3px rgba(255, 241, 0, .45);
}

#pb_mainPage ::placeholder {
	color: var(--pb-ink-faint);
	opacity: 1;
}

/* Velden die uit je account komen en hier niet te wijzigen zijn: e-mailadres,
 * contactpersoon en telefoon zodra je bent ingelogd. De component zet die als
 * kale tekst neer; hier krijgen ze de vorm van een invoerveld - zelfde hoogte,
 * ronding en uitlijning als de velden eronder - maar met de paginakleur als
 * vulling, een lichtere rand en gedempte tekst. Zo verspringt de rij niet en
 * zie je aan de kleur dat er niets in te vullen valt.
 *
 * Zelfde behandeling als .pb-userform__static op "Mijn gegevens wijzigen"; de
 * maten verschillen omdat de velden daar in een raster van twee kolommen staan
 * en hier onder elkaar. */
#pb_mainPage .pb-readonly {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 420px;
	min-height: 44px;
	margin-top: 2px;
	padding: 10px 14px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--pb-ink-soft);
	background-color: var(--pb-bg);
	border: 1px solid var(--pb-line);
	border-radius: var(--pb-radius);
}

#pb_mainPage select:disabled,
#pb_mainPage input:disabled {
	color: var(--pb-ink-faint);
	background-color: var(--pb-surface-alt);
	cursor: not-allowed;
}

#pb_mainPage input[type="checkbox"],
#pb_mainPage input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	vertical-align: middle;
	accent-color: var(--pb-ink);
	cursor: pointer;
}

/* Adresgegevens.
 *
 * De component zet de veldnaam, het verplicht-teken en het invoerveld als
 * broertjes in een <label>, met een vaste labelbreedte van 200px ernaast. Dat
 * paste op smalle schermen niet en liet de velden ongelijk uitlijnen. De
 * veldnaam staat nu boven het veld: het invoerveld krijgt display:block en
 * begint daardoor op een nieuwe regel.
 *
 * Alleen tekstvelden krijgen die eigen regel - het vinkje van de
 * privacyverklaring hoort juist naast zijn tekst te blijven staan. */
#pb_mainPage .fields_wrap > span > div {
	margin-bottom: 16px;
}

#pb_mainPage .fields_wrap label {
	display: block;
	cursor: pointer;
}

#pb_mainPage .form-label,
#pb_mainPage div.form-label {
	float: none;
	display: inline-block;
	width: auto;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--pb-ink-soft);
}

#pb_mainPage .fields_wrap input[type="text"],
#pb_mainPage .fields_wrap input[type="email"],
#pb_mainPage .fields_wrap input[type="tel"],
#pb_mainPage .fields_wrap textarea,
#pb_mainPage .fields_wrap select {
	display: block;
	margin-top: 6px;
}

#pb_mainPage .pb_optional,
#pb_mainPage #pb_company,
#pb_mainPage #pb_contact {
	float: none;
}

/* Privacyregel: vinkje en tekst naast elkaar. Het lege label dat de component
 * hier alleen voor de uitlijning meestuurt, en de twee <br>'s ervoor, kunnen
 * weg nu de velden niet meer in twee kolommen staan. */
#pb_mainPage .fields_wrap div:has(> label a.privacy) {
	margin-top: 20px;
}

#pb_mainPage .fields_wrap div:has(> label a.privacy) br {
	display: none;
}

#pb_mainPage .fields_wrap div:has(> label a.privacy) > label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

#pb_mainPage .fields_wrap div:has(> label a.privacy) .form-label {
	display: none;
}

/* Aantal */
#pb_mainPage .pb_group_quantity {
	display: inline-flex;
	flex-direction: column;
	gap: 6px;
}

#pb_mainPage .pb_quantity_label {
	font-size: 13px;
	font-weight: 600;
	color: var(--pb-ink-soft);
}

#pb_mainPage .pb_quantity_input,
#pb_mainPage input.pb_quantity_input {
	width: 96px;
	max-width: 96px;
}

#pb_mainPage .product_wrap,
#pb_mainPage .product_wrap_r {
	float: none;
	width: auto;
}

#pb_mainPage .product_wrap_r {
	margin-top: 16px;
}

/* Akkoordverklaring privacy */
#pb_mainPage input#attrib3 {
	margin: 0 8px 0 0;
}

#pb_mainPage a.privacy:link,
#pb_mainPage a.privacy:active,
#pb_mainPage a.privacy:visited {
	color: var(--pb-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* De prijs- en kortingsregel onderaan blijft in deze configurator leeg (er
 * worden geen prijzen getoond); zonder deze regel houdt hij onderin de kaart
 * een strook witruimte bezet. */
#pb_mainPage .pb_product_footer {
	margin: 0;
	padding: 0;
}

#pb_mainPage .toral_discount_wrapper,
#pb_mainPage .pb_product_footer .pr_price {
	font-size: 15px;
	color: var(--pb-ink-soft);
}

/* De prijsregel houdt 15px marge boven zich, ook als er geen prijs in staat.
 * Of hij iets toont hangt af van een instelling in de component: staan prijzen
 * uit, dan zet die het veld op type="hidden" en blijft de regel leeg. Precies
 * dat geval wordt hier opgeruimd - zet iemand de prijzen later aan, dan wordt
 * het veld weer type="text" en komt de marge vanzelf terug. */
#pb_mainPage .pb_product_footer .pr_price:has(> input[type="hidden"]),
#pb_mainPage .toral_discount_wrapper:has(> input[type="hidden"]) {
	margin-top: 0;
}

/* Het laadbalkje hoort bij "in winkelwagen" en neemt 20px in beslag zonder ooit
 * iets te tonen: de component zet die knop alleen neer als de offerteknop uit
 * staat, en hier staat die juist aan. Het blijft wel in de pagina staan - de
 * component zoekt het op id op en zou struikelen over een element dat er niet
 * is. Zodra de winkelwagenknop er wél staat, telt deze regel niet meer mee en
 * is het balkje gewoon zichtbaar. */
#pb_mainPage #cartLoader {
	min-height: 0;
}

#pb_mainPage .pb_product_footer:not(:has(.addtocart_button)) #cartLoader {
	height: 0;
	margin-top: 0;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Knoppen
 * ------------------------------------------------------------------------- */

#pb_mainPage .next_prev_btn,
#pb_mainPage .pbbutton,
#pb_mainPage .addtoquote_button,
#pb_mainPage button,
#pb_mainPage input[type="button"],
#pb_mainPage input[type="submit"],
#pb_mainPage .btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 44px;
	margin: 0;
	padding: 11px 24px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-shadow: none;
	color: #fff;
	background-color: var(--pb-ink);
	background-image: none;
	border: 1px solid var(--pb-ink);
	border-radius: var(--pb-radius);
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease,
	            transform .1s ease;
}

#pb_mainPage .next_prev_btn:hover,
#pb_mainPage .pbbutton:hover,
#pb_mainPage .addtoquote_button:hover,
#pb_mainPage button:hover,
#pb_mainPage input[type="button"]:hover,
#pb_mainPage input[type="submit"]:hover,
#pb_mainPage .btn:hover {
	color: #fff;
	background-color: #2b313b;
	border-color: #2b313b;
}

#pb_mainPage .next_prev_btn:active,
#pb_mainPage button:active,
#pb_mainPage .btn:active {
	transform: translateY(1px);
}

#pb_mainPage .next_prev_btn:focus-visible,
#pb_mainPage .pbbutton:focus-visible,
#pb_mainPage button:focus-visible,
#pb_mainPage input[type="button"]:focus-visible,
#pb_mainPage input[type="submit"]:focus-visible,
#pb_mainPage .btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 241, 0, .6);
}

#pb_mainPage .btn.disabled,
#pb_mainPage .btn[disabled],
#pb_mainPage button[disabled] {
	color: var(--pb-ink-faint);
	background-color: #eef0f4;
	border-color: #eef0f4;
	opacity: 1;
	cursor: default;
}

#pb_mainPage #pb_next_button_2,
#pb_mainPage [id^="pb_next_button_"] {
	margin-top: 20px;
}

#pb_mainPage #quotebutton {
	margin-top: 8px;
}

/* De knop stond met een vaste breedte van 60px in de oude opmaak; hij groeit
 * nu mee met zijn tekst. */
#pb_mainPage .next_prev_btn,
#pb_mainPage div.next_prev_btn:hover {
	width: auto;
}

/* Knoppen buiten de configurator (offertelijst, aanmelden) */
.btn,
button {
	font-family: var(--pb-font);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	text-shadow: none;
	background-color: var(--pb-ink);
	background-image: none;
	border: 1px solid var(--pb-ink);
	border-radius: var(--pb-radius);
	box-shadow: none;
}

.btn:hover,
.btn:focus,
button:hover {
	color: #fff;
	background-color: #2b313b;
	border-color: #2b313b;
}

/* ---------------------------------------------------------------------------
 * Inloggen en offerte-overzicht
 *
 * Deze schermen staan buiten #pb_mainPage en vielen daardoor terug op de kale
 * browserstandaard voor invoervelden; de configurator ernaast zag er wel
 * verzorgd uit. Zelfde velden, zelfde knoppen.
 * ------------------------------------------------------------------------- */

.container input[type="text"],
.container input[type="password"],
.container input[type="email"],
.container input[type="tel"],
.container input[type="search"],
.container select,
.container textarea {
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: var(--pb-ink);
	background-color: var(--pb-surface);
	border: 1px solid var(--pb-line-strong);
	border-radius: var(--pb-radius);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.container input[type="text"]:focus,
.container input[type="password"]:focus,
.container input[type="email"]:focus,
.container select:focus,
.container textarea:focus {
	outline: none;
	border-color: var(--pb-accent-line);
	box-shadow: 0 0 0 3px rgba(255, 241, 0, .45);
}

/* Het inlogformulier is een blok en geen inline-block zoals de kaarten
 * hieronder. Dat scheelt: de component zet de zin "Login met uw gegevens..."
 * als losse tekst vóór het formulier neer, en naast een inline-block gaat die
 * op dezelfde regel staan - op een breed scherm belandde hij daardoor links
 * náást de kaart in plaats van erboven.
 *
 * De maximumbreedte houdt de kaart bij elkaar; twee invoervelden hoeven niet
 * over de volle breedte van een groot scherm uit te lopen. */
.container > form.pb-login {
	box-sizing: border-box;
	display: block;
	max-width: 640px;
}

/* De lijst met offertes hoort juist de volle breedte te krijgen. Als
 * inline-block kroop de kaart mee met zijn inhoud; sinds de kolommen flexibel
 * zijn is die inhoud zo smal mogelijk, en klapte de hele tabel in elkaar tot
 * een strookje van een paar honderd pixels. */
.container > form.pb-quotes-form {
	box-sizing: border-box;
	display: block;
	width: 100%;
}

/* Het inlogformulier is een tabelindeling uit de component; met wat lucht om
 * de cellen en een kaart eromheen sluit het aan bij de rest. */
.container > form[name="adminForm"] {
	display: inline-block;
	margin-bottom: 64px;
	padding: 20px 24px;
	background-color: var(--pb-surface);
	border: 1px solid var(--pb-line);
	border-radius: var(--pb-radius-lg);
	box-shadow: var(--pb-shadow-sm);
}

.container > form[name="adminForm"] td {
	padding: 6px 10px 6px 0;
	font-size: 14px;
	color: var(--pb-ink-soft);
	vertical-align: middle;
}

.container > h3 {
	margin: 28px 0 6px;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--pb-ink);
}

/* ---------------------------------------------------------------------------
 * Inloggen op de offertepagina
 *
 * Deze pagina valt buiten #pb_mainPage, dus de veldopmaak van de configurator
 * geldt hier niet; die wordt hieronder herhaald zodat de twee er hetzelfde
 * uitzien.
 *
 * De rij wikkelt: naast elkaar zolang het past, onder elkaar zodra het niet
 * meer past. Er staat bewust geen mediaquery met een vast breekpunt - het gaat
 * om de ruimte die de velden nodig hebben, en die hangt af van de lengte van
 * de labels in de gekozen taal.
 * ------------------------------------------------------------------------- */

.pb-login__row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
	margin: 18px 0 0;
}

.pb-login__field {
	display: flex;
	/* 180px en niet breder: bij 220px duwden de twee velden samen de knop naar
	 * de volgende regel, terwijl er ruimte genoeg was. */
	flex: 1 1 180px;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.pb-login__label {
	font-size: 14px;
	font-weight: 500;
	color: var(--pb-ink-soft);
}

.pb-login input[type="text"],
.pb-login input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: var(--pb-ink);
	background-color: var(--pb-surface);
	border: 1px solid var(--pb-line-strong);
	border-radius: var(--pb-radius);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.pb-login input[type="text"]:hover,
.pb-login input[type="password"]:hover {
	border-color: #b9c0cb;
}

.pb-login input[type="text"]:focus,
.pb-login input[type="password"]:focus {
	outline: none;
	border-color: var(--pb-accent-line);
	box-shadow: 0 0 0 3px rgba(255, 241, 0, .45);
}

/* De knop staat op één lijn met de velden zolang de rij niet afbreekt, en
 * krijgt daarna de volle breedte - een knop van 80px onderaan een kolom van
 * schermbrede velden leest als een restje. */
.pb-login__actions {
	flex: 0 0 auto;
}

.pb-login__actions button {
	min-height: 44px;
	padding: 10px 22px;
}

@media (max-width: 560px) {
	.pb-login__actions,
	.pb-login__actions button {
		width: 100%;
	}
}

.pb-login__forgot {
	margin: 14px 0 0;
	font-size: 14px;
}

.pb-login-intro {
	max-width: 640px;
	margin: 0 0 12px;
	color: var(--pb-ink-soft);
}

/* ---------------------------------------------------------------------------
 * Mijn gegevens wijzigen
 *
 * Een raster van velden met het label erboven, net als in de configurator.
 * Eén kolom op een smal scherm, twee zodra er ruimte is.
 *
 * Bewust twee en niet "zoveel als er passen": met auto-fit werden het er op een
 * breed scherm drie, en dan valt een gegevensformulier uiteen in losse stukjes
 * in plaats van dat het als één blok leest.
 * ------------------------------------------------------------------------- */

/* Dezelfde witte kaart als op de offertepagina's. Die krijgt hij niet vanzelf:
 * de regel daarvoor geldt voor een formulier dat direct in .container staat, en
 * dit formulier zit een niveau dieper, in #DialogMenu. */
.container > form.pb-userform,
#DialogMenu form.pb-userform {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 900px;
	margin-bottom: 64px;
	padding: 24px;
	background-color: var(--pb-surface);
	border: 1px solid var(--pb-line);
	border-radius: var(--pb-radius-lg);
	box-shadow: var(--pb-shadow-sm);
}

@media (max-width: 560px) {
	.container > form.pb-userform,
	#DialogMenu form.pb-userform {
		padding: 20px 16px;
	}
}

.pb-userform fieldset.userform {
	margin: 0;
	padding: 0;
	border: 0;
}

.pb-userform__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px 24px;
	margin: 4px 0 0;
}

@media (min-width: 620px) {
	.pb-userform__grid {
		grid-template-columns: 1fr 1fr;
	}

	/* Het adres is de langste waarde en krijgt de volle breedte. Alleen hier:
	 * in één kolom valt er niets te overspannen. */
	.pb-userform__field--wide {
		grid-column: 1 / -1;
	}
}

.pb-userform__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.pb-userform__label {
	font-size: 14px;
	font-weight: 500;
	color: var(--pb-ink-soft);
}

.pb-userform input[type="text"] {
	width: 100%;
}

/* Gebruikersnaam en e-mailadres liggen vast in de component. Ze krijgen wel de
 * vorm van een invoerveld - zelfde hoogte, zelfde ronding, zelfde uitlijning -
 * zodat de rij velden niet halverwege verspringt, maar dan grijs: gevuld met de
 * paginakleur in plaats van wit, een lichtere rand en gedempte tekst. Zo zie je
 * aan de kleur dat hier niets in te vullen valt.
 *
 * Het blijft een <p> en geen <input disabled>. Dat leest hetzelfde, maar de
 * tekst is wel te selecteren en te kopiëren - handig bij een e-mailadres - en
 * er valt niets te focussen wat vervolgens niets doet. De waarden gaan als
 * verborgen veld met het formulier mee, precies zoals de component verwacht. */
.pb-userform__static {
	box-sizing: border-box;
	min-height: 44px;
	margin: 0;
	padding: 10px 14px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--pb-ink-soft);
	background-color: var(--pb-bg);
	border: 1px solid var(--pb-line);
	border-radius: var(--pb-radius);
}

.pb-userform__actions {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--pb-line);
}

.pb-userform__actions button {
	min-height: 44px;
	padding: 11px 24px;
}

/* ---------------------------------------------------------------------------
 * Offertes (lijst, bevestiging)
 * ------------------------------------------------------------------------- */

.quotetitle {
	font-size: 26px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--pb-ink);
}

.adminlist {
	color: #fff;
	background-color: var(--pb-ink);
}

table.quotelist {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--pb-surface);
	border: 1px solid var(--pb-line);
	border-radius: var(--pb-radius-lg);
	overflow: hidden;
}

table.quotelist th,
table.quotelist td {
	padding: 12px 14px;
	font-size: 14px;
	text-align: left;
	border-bottom: 1px solid var(--pb-line);
}

.quotebuttons input {
	padding: 10px 20px;
	color: #fff;
	background-color: var(--pb-ink);
	border: 1px solid var(--pb-ink);
	border-radius: var(--pb-radius);
}

.quotebuttons input:hover {
	color: #fff;
	background-color: #2b313b;
}

#row0 {
	background-color: var(--pb-surface);
}

#row1 {
	background-color: var(--pb-surface-alt);
}

#row0:hover,
#row1:hover {
	background-color: var(--pb-accent-tint);
}

tr.quotelisttitle {
	color: #fff;
	background-color: var(--pb-ink);
}

/* ---------------------------------------------------------------------------
 * Lijst met offertes
 *
 * Vier kolommen naast elkaar, tot het scherm te smal wordt; dan wordt elke
 * offerte een kaartje met de kolomnaam als label ervoor. Zie de mediaquery
 * verderop.
 * ------------------------------------------------------------------------- */

.pb-quotes__head,
.pb-quotes__row {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.pb-quotes__head {
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background-color: var(--pb-ink);
	border-radius: var(--pb-radius) var(--pb-radius) 0 0;
}

.pb-quotes__row {
	padding: 12px 14px;
	font-size: 14px;
	cursor: pointer;
	border-bottom: 1px solid var(--pb-line);
}

.pb-quotes__cell {
	min-width: 0;
	overflow-wrap: anywhere;
}

.pb-quotes__cell--name   { flex: 4 1 0; }
.pb-quotes__cell--price  { flex: 2 1 0; }
.pb-quotes__cell--date   { flex: 2 1 0; }
.pb-quotes__cell--status { flex: 2 1 0; }

/* ---------------------------------------------------------------------------
 * De offertepagina op een smal scherm
 *
 * Deze pagina bestaat uit twee tabellen uit de component: bovenin een blok met
 * offertegegevens en de PDF-knop, daaronder de regels van de offerte met vijf
 * kolommen. Beide hebben vaste kolombreedtes in de HTML staan (width="200",
 * width="400"), en een tabel kan niet smaller dan zijn inhoud. Op een telefoon
 * werd de pagina daardoor 541px breed terwijl er 390px is; de browser zoomde
 * dan uit naar 72% en alles werd onleesbaar klein en liep rechts weg.
 *
 * Onder 720px worden het daarom losse regels in plaats van kolommen. De
 * kolomkoppen verdwijnen en komen terug als label vóór elke waarde, uit de
 * data-label-attributen die de view meegeeft.
 * ------------------------------------------------------------------------- */

@media (max-width: 720px) {

	/* De kaart is een inline-block en kruipt daardoor mee met de breedste
	 * tabel erin. Als blok blijft hij binnen het scherm. */
	.container > form.pb-quote {
		display: block;
		max-width: 100%;
	}

	/* --- blok met offertegegevens bovenaan --- */

	/* De vaste breedtes staan als HTML-attribuut in de opmaak. Dat telt als een
	 * presentatie-hint en weegt lichter dan een gewone stijlregel, dus dit is
	 * genoeg om ze te overrulen - !important is niet nodig. */
	.pb-quote fieldset.adminform table.admintable,
	.pb-quote fieldset.adminform table.admintable > tbody,
	.pb-quote fieldset.adminform table.admintable > tbody > tr,
	.pb-quote fieldset.adminform table.admintable > tbody > tr > td {
		display: block;
		width: auto;
		max-width: 100%;
		text-align: left;
	}

	/* Label boven de waarde in plaats van ernaast. */
	.pb-quote fieldset.adminform td.key {
		padding: 0;
	}

	.pb-quote fieldset.adminform table.admintable table.admintable td.key:first-child {
		padding-top: 10px;
		font-size: 13px;
		color: var(--pb-ink-soft);
	}

	/* --- lijst met offertes --- */

	/* De kolomkoppen vervallen; ze staan per waarde als label in beeld. */
	.pb-quotes__head {
		display: none;
	}

	.pb-quotes__row {
		display: block;
		padding: 16px 14px;
	}

	.pb-quotes__cell {
		display: block;
	}

	/* Zelfde labelvorm als bij de offerteregels hieronder. */
	.pb-quotes__cell[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .06em;
		color: var(--pb-ink-faint);
	}

	/* Het offertenummer is de kop van het kaartje. */
	.pb-quotes__cell--name {
		margin-bottom: 8px;
		font-size: 15px;
		font-weight: 600;
	}

	/* Met [data-label] erbij, anders weegt deze regel lichter dan de regel die
	 * het label neerzet en blijft "Offerte" boven het nummer staan. */
	.pb-quotes__cell--name[data-label]::before {
		display: none;
	}

	.pb-quotes__cell--price,
	.pb-quotes__cell--date,
	.pb-quotes__cell--status {
		margin-top: 6px;
	}

	/* --- regels van de offerte --- */

	table.quotelist,
	table.quotelist > tbody,
	table.quotelist > tbody > tr,
	table.quotelist > tbody > tr > td {
		display: block;
		width: auto;
		max-width: 100%;
	}

	/* De kolomkoppen zijn hier zinloos: er zijn geen kolommen meer. Ze staan
	 * per waarde als label in beeld. */
	table.quotelist > thead {
		display: none;
	}

	/* Elke regel wordt een kaartje. De ruimte boven en onder is gelijk, zodat
	 * de scheidingslijn tussen twee kaartjes in het midden ligt en niet tegen
	 * de tekst aan plakt. */
	table.quotelist > tbody > tr {
		padding: 16px 0;
		border-bottom: 1px solid var(--pb-line);
	}

	table.quotelist > tbody > tr:last-child {
		border-bottom: 0;
	}

	/* Met .pb-quote ervoor, en dat is geen sierletter: de regel
	 * ".container > form[name=\"adminForm\"] td" verderop zet padding-left op 0
	 * en telt twee klassen/attributen, waar deze selector er zonder voorvoegsel
	 * maar één heeft. Die won dus, en de tekst plakte tegen de rand van de
	 * kaart. Met .pb-quote erbij zijn het er ook twee en geeft het aantal
	 * elementen de doorslag. */
	.pb-quote table.quotelist > tbody > tr > td {
		padding: 6px 14px;
		text-align: left;
		border-bottom: 0;
	}

	/* Lege cellen zouden anders een label zonder waarde tonen. */
	table.quotelist > tbody > tr > td:empty {
		display: none;
	}

	/* De omschrijving komt als <p> uit de database en neemt zijn eigen marge
	 * van 14px mee; die zette een gat tussen het label en de tekst eronder. */
	table.quotelist > tbody > tr > td > p {
		margin: 0;
	}

	table.quotelist > tbody > tr > td > p + p {
		margin-top: 6px;
	}

	/* Op desktop staan deze woorden als kolomkoppen in de zwarte balk. Hier
	 * doen ze hetzelfde werk per waarde, en krijgen ze daarom ook de vorm van
	 * een kop: klein, in kapitalen en met wat letterruimte. Zo zie je in één
	 * oogopslag wat label is en wat waarde, zonder dat het even zwaar weegt
	 * als het bedrag ernaast. */
	table.quotelist > tbody > tr > td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .06em;
		color: var(--pb-ink-faint);
	}

	/* Aantal, prijs en totaal zijn korte waarden; die passen naast hun label,
	 * wat rustiger leest dan een lijst van losse regels. De omschrijving is
	 * daarvoor te lang en blijft eronder staan. */
	table.quotelist > tbody > tr > td:nth-child(3),
	table.quotelist > tbody > tr > td:nth-child(4),
	table.quotelist > tbody > tr > td:nth-child(5) {
		display: flex;
		gap: 16px;
		align-items: baseline;
		justify-content: space-between;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	table.quotelist > tbody > tr > td:nth-child(3)::before,
	table.quotelist > tbody > tr > td:nth-child(4)::before,
	table.quotelist > tbody > tr > td:nth-child(5)::before {
		flex: 0 0 auto;
	}

	/* Het regeltotaal is waar het om draait; dat mag zwaarder wegen. */
	table.quotelist > tbody > tr > td:nth-child(5) {
		margin-top: 4px;
		font-weight: 600;
	}

	table.quotelist > tbody > tr > td:nth-child(2)::before {
		margin-bottom: 3px;
	}

	/* De productnaam is de kop van het kaartje en heeft geen label nodig. */
	table.quotelist > tbody > tr > td:first-child {
		padding-bottom: 10px;
		font-size: 16px;
		font-weight: 600;
	}

	table.quotelist > tbody > tr > td:first-child::before {
		display: none;
	}

	/* De totaalregel heeft geen data-label - het woord "Totaal" staat al in de
	 * cel zelf - en hoort als afsluiting zwaarder te wegen. */
	table.quotelist > tbody > tr.quotelist-total {
		padding: 0;
		background-color: var(--pb-surface-alt);
		border-top: 1px solid var(--pb-line);
		border-bottom: 0;
	}

	table.quotelist > tbody > tr.quotelist-total > td {
		padding: 10px 14px;
		font-size: 15px;
	}

	table.quotelist > tbody > tr.quotelist-total > td:first-child {
		padding-bottom: 0;
		font-weight: 500;
	}
}

/* ---------------------------------------------------------------------------
 * Smalle schermen
 *
 * Onder 900px vervalt de kolomindeling: de stappen worden een rij chips boven
 * de kaart en de productafbeelding schuift eronder.
 * ------------------------------------------------------------------------- */

@media (max-width: 900px) {
	/* Eén kolom. Flexbox in plaats van blok, zodat de productafbeelding onder
	 * de vragen komt: op een telefoon wil je eerst de vraag zien, niet eerst
	 * een schermvullende foto. In de HTML staat die afbeelding nog vóór het
	 * formulier - dat is de volgorde van de component. */
	.container:has(> form > #pb_mainPage),
	.container.pb-shell {
		display: flex;
		flex-direction: column;

		/* De align-items:start uit de rasterversie betekent in een kolom-flex
		 * "zo smal als de inhoud"; daardoor kromp de voortgangsbalk mee met
		 * zijn tekst. Hier hoort alles de volle breedte te krijgen. */
		align-items: stretch;
		padding-bottom: 40px;
	}

	/* Het omhulsel van de linkerkolom verdwijnt hier uit de opmaak, zodat de
	 * stappen en de afbeelding weer los in de kolom staan en er tussen het
	 * formulier door gesorteerd kan worden. De selectors hieronder staan
	 * daarom zonder >: in de HTML zijn het kinderen van .pb-side. */
	.pb-side {
		display: contents;
	}

	.pb-shell > .pb-progress    { order: 1; }
	.pb-shell .pb-steps         { order: 2; }
	.pb-shell > form            { order: 3; }
	.pb-shell #product_left_col { order: 4; }

	.pb-steps {
		position: static;
		margin-bottom: 20px;
	}

	.pb-steps__list {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.pb-steps__list::-webkit-scrollbar {
		display: none;
	}

	.pb-steps__item {
		flex: 0 0 auto;
	}

	.pb-steps__btn {
		align-items: center;
		padding: 8px 14px;
		white-space: nowrap;
		background-color: var(--pb-surface);
		border: 1px solid var(--pb-line);
		border-radius: var(--pb-radius-pill);
	}

	.pb-steps__btn::before {
		display: none;
	}

	.pb-steps__item.is-current .pb-steps__btn {
		background-color: var(--pb-accent-tint);
		border-color: var(--pb-accent-line);
	}

	/* Volledige vraagteksten passen niet op een chip; het nummer en het begin
	 * van de titel zijn genoeg om je plaats te herkennen. */
	.pb-steps__title {
		display: block;
		max-width: 150px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	#product_left_col {
		margin-top: 24px;
	}

	#imageContainer img {
		width: auto;
		max-width: 100%;
		max-height: 220px;
		margin: 0 auto;
	}
}

@media (max-width: 767px) {
	#header {
		padding: 12px 16px;
	}

	#section-slogan {
		padding-top: 28px;
	}

	#section-slogan h2 {
		font-size: 24px;
	}

	#groups_part {
		padding: 4px 16px 16px;
	}

	#pb_mainPage .group_header {
		padding: 14px 30px 14px 0;
	}

	#pb_mainPage .group_header h3 {
		font-size: 16px !important;
	}

	/* Koppen lopen hier vaak over twee regels; de lege strook onderaan een
	 * paneel moet minstens zo hoog blijven als de kop. Zie de toelichting bij
	 * .group_details hierboven. */
	/* Grotere reserve, want de koppen breken hier over twee regels. Via de
	 * variabele, zodat de negatieve marge van een open paneel meeloopt. */
	#pb_mainPage .group_details {
		--pb-panel-pad: 84px;
	}

	/* De oude opmaak zette hier width:95% met !important op de velden. */
	#pb_mainPage input[type="text"],
	#pb_mainPage input[type="password"],
	#pb_mainPage #pb_email {
		width: 100%;
		max-width: none;
	}

	#pb_mainPage .pb_quantity_input,
	#pb_mainPage input.pb_quantity_input {
		width: 96px;
	}

	#mainmenualign ul.nav {
		display: block;
		min-height: 0;
	}

	#mainmenualign .nav-collapse {
		border-radius: 0 0 var(--pb-radius-lg) var(--pb-radius-lg);
		border-top: 1px solid var(--pb-line);
		box-shadow: var(--pb-shadow-lg);
	}

	#mainmenualign ul.nav > li > a {
		padding: 14px 20px;
		font-size: 16px;
		border-radius: 0;
		border-bottom: 1px solid var(--pb-line);
	}

	#mainmenualign ul.nav > li > a:hover,
	#mainmenualign ul.nav > li > a:focus,
	#mainmenualign ul.nav > li.active > a,
	#mainmenualign ul.nav > li.current > a {
		color: var(--pb-ink);
		background-color: var(--pb-accent-tint);
	}
}