/**
 * DE KAR.  Mobiel eerst, want de intake wordt op een telefoon ingevuld.
 *
 * [price-cart 2026-08-22] Spec section 2.1.
 *
 * Tot en met 768px : een vaste balk onderaan het scherm, een regel hoog. Tikken
 *                    opent een blad tot 85% schermhoogte met de volledige opbouw.
 * Vanaf 769px      : een kolom naast het formulier die meescrollt.
 *
 * De formulierkolom krijgt onderaan padding ter grootte van de balk, zodat de
 * knop "Opslaan en verder" er nooit achter verdwijnt. Dat is QA-punt T9 en het
 * is de reden dat .pc--sticky-host bestaat.
 */

:root {
	--pc-bar-h: 3.5rem;
}

.pc {
	font-size: .95rem;
	line-height: 1.5;
}

.pc-body {
	background: #fff;
	border: 1px solid var(--line, #dcdcde);
	border-radius: .6rem;
	padding: 1rem 1.1rem;
}

.pc-sheet-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 .75rem;
}

.pc-head {
	margin: 0;
	font-size: 1.05rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.pc-close {
	display: none;
	background: none;
	border: 0;
	padding: .4rem .2rem;
	min-height: 44px;
	font: inherit;
	color: var(--muted, #56606a);
	text-decoration: underline;
	cursor: pointer;
}

/* ---- Regels ---- */

.pc-line {
	padding: .55rem 0;
	border-top: 1px solid var(--line, #ececef);
}

.pc-line:first-of-type { border-top: 0; }

.pc-line-main {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
}

.pc-line-label { flex: 1 1 auto; }

.pc-line-amount {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pc-line--base .pc-line-label,
.pc-line--base .pc-line-amount {
	font-weight: 700;
	font-size: 1.1rem;
}

.pc-line-reason {
	margin: .2rem 0 0;
	font-size: .85rem;
	color: var(--muted, #56606a);
}

.pc-pending,
.pc-free {
	font-style: normal;
	font-weight: 400;
	color: var(--muted, #56606a);
	white-space: normal;
}

.pc-line--pending { background: #fbf7ef; margin: 0 -.5rem; padding-inline: .5rem; }
.pc-line--blocked { background: #fbf1f1; margin: 0 -.5rem; padding-inline: .5rem; }

/* ---- [webshop-eigen-prijs 2026-08-26] De indicatieregel ----
   Zelfde warme tint als de wachtende regel, want het is dezelfde boodschap:
   dit bedrag ligt nog niet vast. Het verschil is dat er nu WEL een bedrag
   staat, dus het merkje staat naast dat bedrag en niet in plaats ervan. */

.pc-line--estimate { background: #fbf7ef; margin: 0 -.5rem; padding-inline: .5rem; }

.pc-estimate-tag {
	display: inline-block;
	margin-left: .4rem;
	padding: .05rem .35rem;
	border: 1px solid #8c5e10;
	border-radius: .2rem;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #8c5e10;
	white-space: nowrap;
}

.pc-estimate-note {
	margin: .75rem 0 0;
	padding: .6rem .7rem;
	background: #fbf7ef;
	border-left: 3px solid #8c5e10;
	font-size: .9rem;
}

.pc-estimate-note p { margin: 0 0 .4rem; }
.pc-estimate-note p:last-child { margin-bottom: 0; }
.pc-estimate-note-head { font-weight: 700; }

.pc-remove,
.pc-jump,
.pc-choose {
	margin-top: .35rem;
	background: none;
	border: 0;
	padding: .35rem 0;
	min-height: 44px;
	font: inherit;
	font-size: .85rem;
	color: var(--brand, #12233b);
	text-decoration: underline;
	cursor: pointer;
}

.pc-remove:hover,
.pc-jump:hover,
.pc-choose:hover { text-decoration: none; }

.pc-line--restored { color: var(--muted, #56606a); }

/* ---- Totalen ---- */

.pc-totals {
	margin: .75rem 0 0;
	padding: .75rem 0 0;
	border-top: 2px solid var(--ink, #12233b);
}

.pc-totals--year1 { border-top-width: 1px; }

/* [maatwerk-splitsing 2026-08-26] HET MAATWERKBLOK STAAT VISUEEL LOS.
   Geen zware bovenrand zoals de totalen die hebben, maar de zachte oker van de
   indicatiemerkjes: dit hoort bij de indicatie en NIET bij het bedrag dat de
   klant afrekent. Dat onderscheid moet het oog maken voordat het de woorden
   leest, want dit is precies het bedrag dat niemand per ongeluk mag optellen. */
.pc-totals--maatwerk {
	border-top: 1px dashed #c9a227;
	margin-top: .6rem;
	padding-top: .6rem;
}

.pc-totals--maatwerk .pc-total { color: #8c5e10; }

.pc-maatwerk-buiten {
	margin: .4rem 0 0;
	font-size: .85rem;
	line-height: 1.45;
	color: #8c5e10;
}

.pc-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin: 0 0 .3rem;
}

.pc-total dt { margin: 0; }

.pc-total dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pc-total--strong dt,
.pc-total--strong dd { font-weight: 700; }

.pc-incomplete {
	margin: .75rem 0 0;
	padding: .6rem .7rem;
	background: #fbf7ef;
	border-left: 3px solid #8c5e10;
	font-size: .9rem;
}

/* ---- De trap, beide kanten op ---- */

.pc-step {
	margin: .9rem 0 0;
	padding: .7rem .8rem;
	border-radius: .4rem;
	font-size: .9rem;
}

.pc-step--down { background: #eef6f1; border-left: 3px solid #00694e; }
.pc-step--down p { margin: 0; }
.pc-step--up { background: transparent; padding-inline: 0; color: var(--muted, #56606a); }

.pc-pagelist {
	list-style: none;
	margin: .6rem 0 0;
	padding: 0;
}

.pc-pagelist li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .25rem 0;
	border-top: 1px solid rgba(0, 0, 0, .08);
}

.pc-keep { font-size: .8rem; color: var(--muted, #56606a); }

.pc-locked,
.pc-foot {
	margin: .9rem 0 0;
	font-size: .85rem;
	color: var(--muted, #56606a);
}

.pc-empty-line { margin: 0; }

/* ---- De delta-strook. Verschijnt onder het veld dat is aangeraakt. ---- */

.pc-delta {
	margin: .5rem 0 0;
	padding: .6rem .75rem;
	border-radius: .4rem;
	background: #eef2f7;
	border-left: 3px solid var(--brand, #12233b);
	font-size: .9rem;
}

.pc-delta--down { background: #eef6f1; border-left-color: #00694e; }
.pc-delta--pending { background: #fbf7ef; border-left-color: #8c5e10; }
.pc-delta p { margin: 0; }

.pc-delta button {
	margin: .4rem .75rem 0 0;
	background: none;
	border: 0;
	padding: .35rem 0;
	min-height: 44px;
	font: inherit;
	font-size: .85rem;
	color: var(--brand, #12233b);
	text-decoration: underline;
	cursor: pointer;
}

/* =========================================================================
 * MOBIEL: de vaste balk en het blad.
 * ========================================================================= */

.pc-bar { display: none; }

@media (max-width: 768px) {

	.pc--sticky .pc-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		/* [mobiel-fix 2026-08-25] Boven de sticky sitekop (z-index 900), onder het
		   menupaneel en zijn overlay (990 en hoger). Anders schoof de bovenrand
		   van het blad, met de knop Sluiten, ONDER de kop zodra zij elkaar raakten. */
		z-index: 960;
		width: 100%;
		min-height: var(--pc-bar-h);
		padding: .6rem 1rem;
		background: var(--ink, #12233b);
		color: #fff;
		border: 0;
		font: inherit;
		font-size: .95rem;
		text-align: left;
		cursor: pointer;
	}

	.pc--sticky .pc-bar-cta { text-decoration: underline; white-space: nowrap; }
	.pc-bar-amount { font-weight: 700; font-variant-numeric: tabular-nums; }

	/* [testronde-fixes 2026-08-25] De balk draagt nu twee regels: het eenmalige
	   bedrag groot, en daaronder klein de hosting en het eerste jaar. Beide
	   ALTIJD excl. btw. De balk blijft zo laag mogelijk: op een gewone telefoon
	   past dit in een regel plus een dunne onderregel, en de hoogte groeit
	   alleen mee als de tekst het echt nodig heeft. */
	.pc--sticky .pc-bar-main {
		display: flex;
		flex-direction: column;
		gap: .1rem;
		min-width: 0;
	}
	.pc--sticky .pc-bar-sub {
		font-size: .78rem;
		line-height: 1.25;
		opacity: .82;
		font-variant-numeric: tabular-nums;
	}
	/* [maatwerk-splitsing 2026-08-26] Het maatwerk op de balk: klein, oker, en
	   nadrukkelijk NIET vet, zodat het hoofdgetal het te betalen bedrag blijft. */
	.pc--sticky .pc-bar-mw {
		font-size: .78rem;
		line-height: 1.25;
		font-weight: 400;
		color: #8c5e10;
		font-variant-numeric: tabular-nums;
	}

	/* Het blad. Gesloten is het echt weg (display:none), zodat een schermlezer
	   er niet doorheen loopt en de tabvolgorde klopt. */
	.pc--sticky .pc-body {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 961;
		max-height: 85vh;
		overflow-y: auto;
		border-radius: .8rem .8rem 0 0;
		border-bottom: 0;
		box-shadow: 0 -.5rem 2rem rgba(0, 0, 0, .25);
		display: none;
	}

	.pc--sticky.is-open .pc-body { display: block; }
	.pc--sticky.is-open .pc-bar { display: none; }
	.pc--sticky .pc-close { display: inline-block; }

	/* De formulierkolom houdt onderaan ruimte vrij voor de balk. */
	.pc-sticky-host { padding-bottom: calc(var(--pc-bar-h) + 1rem); }

	/* Alleen-lezen op /ontwerp/ is geen balk maar gewoon een blok in de pagina. */
	.pc--readonly .pc-body { position: static; max-height: none; display: block; box-shadow: none; border-radius: .6rem; }
	.pc--readonly .pc-bar { display: none; }
}

/* =========================================================================
 * DESKTOP: een kolom die meescrollt.
 * ========================================================================= */

@media (min-width: 769px) {
	.pc-close { display: none; }
	.pc-bar { display: none; }
}

/* De twee-koloms opmaak van de intake.
 *
 * Het GRID ZIT OP HET FORMULIER ZELF, niet op een wrapper eromheen, omdat de kar
 * binnen het formulier moet staan: zonder JavaScript zijn haar Weghalen-knoppen
 * echte submits en een knop buiten het formulier verstuurt niets. Alle andere
 * kinderen worden expliciet in kolom 1 gezet.
 *
 * Onder de splitsingsgrens is dit gewoon een enkele kolom, want dat is wat grid
 * doet als er geen tweede kolom is gedefinieerd. */
/* [intake-breed 2026-08-25] De splitsing begint pas bij 1024px, niet bij 900px.
   Tussen 900 en 1024 nam de kar van 23rem zoveel weg dat de vraagkolom op 428px
   uitkwam: SMALLER dan de 760px-kolom van voor deze wijziging, en precies op de
   maat van een kleine laptop. Onder 1024px staat de kar daarom gewoon onder het
   formulier, over de volle breedte, en zijn de vragen zo breed als het scherm
   toestaat. Boven 1024px is er ruimte voor allebei. */
@media (min-width: 1024px) {
	.onb-form.pc-host {
		display: grid;
		/* 22rem was krap voor een regellijst met per regel een reden eronder;
		   23rem geeft die reden een tweede woord op de regel zonder de
		   vraagkolom merkbaar te versmallen. */
		grid-template-columns: minmax(0, 1fr) 23rem;
		column-gap: 2.5rem;
		align-items: start;
	}

	.onb-form.pc-host > * { grid-column: 1; }

	.onb-form.pc-host > .pc {
		grid-column: 2;
		grid-row: 1 / 400;
		position: sticky;
		/* [intake-breed 2026-08-25] De site-header is zelf position:sticky met
		   top:0 en legt zich dus over meescrollende inhoud heen. Zonder marge
		   schoof de bovenkant van de kar eronder. 5rem laat de header vrij, in
		   dezelfde geest als de .pricing-switch die op top:61px staat. */
		top: 5rem;
		align-self: start;

		/* [intake-breed 2026-08-25] "Zodat u altijd weet wat het kost."
		   De kar mag nooit hoger worden dan het scherm, anders zakt het totaal
		   onderuit beeld en is juist het bedrag onzichtbaar. Zij krijgt daarom
		   een eigen maximum; wordt de opbouw langer, dan schuift de kaart
		   binnenin en blijft het eindtotaal onderaan staan. */
		max-height: calc(100vh - 6.5rem);
	}

	/* De kaart schuift binnenin zodra de opbouw langer is dan de kolom. Alleen
	   hier, want op de prijsstap (.pc--wide, readonly) IS de kar de inhoud van
	   de pagina en hoort zij gewoon mee te scrollen. */
	.onb-form.pc-host > .pc .pc-body {
		max-height: calc(100vh - 6.5rem);
		overflow-y: auto;
		/* Ruimte onder de laatste regel, zodat de vastgezette totalenstrook de
		   tekst eronder niet afdekt. */
		scrollbar-gutter: stable;
	}

	/* De laatste totalenstrook (uw eerste jaar) plakt onderaan de schuivende
	   kaart. Zo staat het bedrag er ALTIJD, ook midden in een lange lijst.
	   De achtergrond is nodig omdat de regels eronder doorlopen. */
	.onb-form.pc-host > .pc .pc-body > .pc-totals--year1 {
		position: sticky;
		bottom: 0;
		z-index: 1;
		margin-bottom: 0;
		padding-bottom: .35rem;
		background: #fff;
		box-shadow: 0 -.6rem .8rem -.6rem rgba(0, 0, 0, .18);
	}
}

/* Op de prijsstap staat de kar in de kolom van het formulier zelf, want daar IS
   zij de inhoud. */
.onb-form.pc-host > .onb-step .pc--wide { max-width: none; }

/* De prijsstap zelf: daar IS de kar de inhoud, geen bijvak. */
.pc--wide { max-width: 44rem; margin-inline: auto; }
.pc--wide .pc-body { padding: 1.4rem 1.5rem; }

/* De begeleide paginakeuze van spec section 5.1. */
.onb-suggest {
	margin: 0 0 1.25rem;
	padding: .9rem 1rem;
	background: #f4f6f9;
	border-radius: .5rem;
}

.onb-suggest p { margin: 0 0 .5rem; }
.onb-suggest .help { margin: .6rem 0 0; font-size: .85rem; }

.onb-price-head { margin: 0 0 1rem; font-size: 1.25rem; }

/* De <details> om de paginakiezer. Zonder JavaScript opent hij gewoon. */
.pc-choose-wrap > summary { list-style: none; }
.pc-choose-wrap > summary::-webkit-details-marker { display: none; }

/* =====================================================================
   [paginas-plus 2026-08-25] DE PAGINA'S BIJ NAAM IN DE KAR

   De teller zei "8 inhoudspagina's" en noemde er geen een. Wie zelf een
   pagina had toegevoegd zag zijn eigen naam nergens en concludeerde dat
   die niet meetelde. Hij telde wel mee. Deze lijst maakt dat zichtbaar,
   met de eigen pagina's herkenbaar gemerkt.
   ===================================================================== */
.pc-pagenames {
  list-style: none;
  margin: -.2rem 0 .8rem;
  padding: 0 0 0 .1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.pc-pagename {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  font-size: .78rem;
  line-height: 1.3;
  color: var(--muted, #5a6472);
  background: rgba(0, 0, 0, .035);
  border-radius: 999px;
  padding: .2rem .55rem;
  overflow-wrap: anywhere;
}
.pc-pagename--extra {
  color: #1d4e6b;
  background: #eaf4fa;
  font-weight: 600;
}
.pc-pagename-tag {
  font-size: .68rem;
  font-weight: 500;
  opacity: .8;
  white-space: nowrap;
}

/* =====================================================================
   [herprijzing 2026-08-25] INBEGREPEN, GEEN MEERPRIJS

   Wat de klant gratis krijgt en nergens ziet staan, heeft hij in zijn
   beleving niet gekregen. Deze sectie maakt het zichtbaar en houdt zich
   tegelijk STIL: klein, gedempt, geen bedrag. Zij mag de aandacht niet
   wegnemen van de regels die wel geld kosten, want dan gaat de kar liegen
   over waar het geld heen gaat. Zij staat buiten de totalen en kan er per
   constructie ook niet in terechtkomen: de server stuurt haar apart.
   ===================================================================== */
.pc-included {
  margin: .2rem 0 .9rem;
  padding-top: .6rem;
  border-top: 1px dashed var(--line, #e3e7ec);
}
.pc-included-head {
  margin: 0 0 .35rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--muted, #5a6472);
}
.pc-included-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.pc-included-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--muted, #5a6472);
}
.pc-included-label { overflow-wrap: anywhere; }
.pc-included-amount {
  flex: 0 0 auto;
  font-style: italic;
  opacity: .85;
  white-space: nowrap;
}

/* [mobiel-fix 2026-08-25] DE ZANDLOPER. Zodra een opslag onderweg is, dempt de
   kar heel licht en pulseert het bedrag, zodat de klant ZIET dat zijn keuze is
   geland en het bedrag zo meebeweegt. De server blijft de enige rekenmachine;
   dit is uitsluitend een wachtsignaal. */
.pc.pc-busy .pc-line-amount,
.pc.pc-busy .pc-total dd,
.pc.pc-busy .pc-bar-amount {
	opacity: .45;
	transition: opacity .2s ease;
	animation: pc-pols 1s ease-in-out infinite alternate;
}

@keyframes pc-pols {
	from { opacity: .45; }
	to   { opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
	.pc.pc-busy .pc-line-amount,
	.pc.pc-busy .pc-total dd,
	.pc.pc-busy .pc-bar-amount { animation: none; }
}

/* =========================================================================
 * [tweetraps 2026-08-26] DE VASTGELEGDE KAR. Spec section 4.2 en 4.3.
 *
 * In trap 2 is de prijs een AFSPRAAK en geen werkblad meer. Zij verliest haar
 * bewerk-vocabulaire, krijgt een inktrand in plaats van een accentrand, en
 * verschiet een tint: van `--surface` wit naar `--page-bg`. Zij leest daarmee
 * als VASTGELEGD in plaats van als LEVEND.
 *
 * De inktrand is geen nieuwe vondst maar een zin in de eigen grammatica van dit
 * ontwerp: `.pc-totals` gebruikt al `2px solid var(--ink)` voor "hier is het
 * afgelopen", terwijl de prijskaarten op de marketingpagina's een accentrand
 * gebruiken voor "dit is in de aanbieding". De wissel zegt dus iets wat de
 * klant elders op deze site al geleerd heeft.
 * ========================================================================= */

.pc--settled {
	--pc-settled: 1;
	transition: background-color .42s ease, border-color .42s ease;
}

/* De bovenrand van inkt: dit is afgesproken. */
.pc--settled .pc-body {
	border-top: 2px solid var(--ink, #12233b);
	background: var(--page-bg, #f9fbfd);
}

/* Een tint gedempter. Bedragen blijven leesbaar, maar zij staan niet meer te
   bewegen: zij zijn opgetekend. */
.pc--settled .pc-line,
.pc--settled .pc-amount { color: var(--muted, #5f6a7d); }
.pc--settled .pc-totals { color: var(--ink, #12233b); }

/* Spec section 5.3: de maatwerkindicatie is het ENE dat werkelijk nog openstaat,
   en dus het ene dat er nog warm uit moet blijven zien terwijl de rest afkoelt.
   Contrast doet het werk: vastgelegde dingen zijn koel, openstaande warm. */
.pc--settled .pc-line--pending,
.pc--settled .pc-line--estimate { background: #fbf7ef; }

/* De ene repareerroute, stil aan de voet. */
.pc-reopen {
	margin: .75rem 0 0;
	font-size: .88rem;
}
.pc-reopen .pc-jump { color: var(--muted, #5f6a7d); }
.pc-reopen .pc-jump:hover { color: var(--ink, #12233b); }

@media (prefers-reduced-motion: reduce) {
	.pc--settled { transition-duration: .12s; }
}