/**
 * De nieuwe huid over de boekingsfunnel.
 *
 * Deze stylesheet laadt óver main.css heen en verandert alleen hoe de funnel
 * eruitziet. De opbouw, de stappen, het rekenen en het versturen blijven waar
 * ze waren: dit is de pagina waar de aanvragen vandaan komen, en een nieuwe
 * kleur is dat risico niet waard.
 *
 * Bijna alles gaat via de tokens. main.css tekent de hele funnel met de namen
 * --dvv-night, --dvv-panel, --dvv-neon en zo verder; door die namen hier naar
 * het nieuwe palet te laten wijzen verandert alles in één keer mee, zonder dat
 * er honderd regels overschreven hoeven te worden. Wat daarna nog overblijft
 * staat eronder, met de reden erbij.
 */

body.dvv-kaal {
	/*
	 * Het palet van de nieuwe opzet, hier herhaald omdat home-v3.css op deze
	 * pagina niet laadt. Wijzigt het daar, dan moet het hier mee. Dat is de
	 * prijs van een funnel die op zijn eigen stylesheet blijft draaien, en die
	 * is lager dan de prijs van een funnel die stuk is.
	 */
	--pv-paars:        #B14CFF;
	--pv-paars-cta:    #7317CE;
	--pv-paars-hover:  #5A11A8;
	--pv-paars-diep:   #3B0F7A;
	--pv-paars-mist:   #F3EBFF;
	--pv-oranje:       #FF5A1F;
	--pv-oranje-hover: #E2440C;
	--pv-groen:        #15803D;
	--pv-inkt:         #141021;
	--pv-grijs:        #5A5568;
	--pv-grijs-licht:  #8B8698;
	--pv-wit:          #FFFFFF;
	--pv-mist:         #F3F1F7;
	--pv-rand:         #E6E3EE;

	/* De oude namen wijzen naar het nieuwe palet. */
	--dvv-night:      var(--pv-wit);
	--dvv-night-deep: var(--pv-mist);
	--dvv-panel:      var(--pv-wit);
	--dvv-neon:       var(--pv-paars-cta);
	--dvv-neon-soft:  var(--pv-paars-cta);
	--dvv-magenta:    var(--pv-oranje);
	--dvv-cyan:       var(--pv-paars-cta);
	--dvv-lime:       var(--pv-groen);
	--dvv-white:      var(--pv-inkt);
	--dvv-muted:      var(--pv-grijs);
	--dvv-rand:       var(--pv-rand);

	--dvv-radius:    10px;
	--dvv-radius-lg: 18px;

	--dvv-gloed-neon:
		0 0 0 1px color-mix(in srgb, var(--pv-paars) 40%, transparent),
		0 18px 40px -26px color-mix(in srgb, var(--pv-paars) 55%, transparent);

	background: var(--pv-wit);
	color: var(--pv-inkt);
}

/*
 * De koppen haalden hun kleur niet uit --dvv-white maar rechtstreeks uit de
 * themakleur wit, dus die veranderde niet mee en werden wit op wit. De hero
 * blijft donker en houdt zijn witte kop: die regel staat hieronder en weegt
 * zwaarder.
 */
body.dvv-kaal h1,
body.dvv-kaal h2,
body.dvv-kaal h3,
body.dvv-kaal h4 { color: var(--pv-inkt); }

/* ------------------------------------------------------------ de kop -- */

/*
 * De balk bovenaan in hetzelfde donker als de header op de rest van de site.
 * Hij plakt boven een donkere hero, dus licht zou hier een streep opleveren
 * precies op de plek waar het logo staat.
 */
body.dvv-kaal .dvv-kaalkop {
	background: rgba(11, 6, 20, 0.92);
	border-bottom: 0;
}

body.dvv-kaal .dvv-kaalkop__terug { color: rgba(255, 255, 255, 0.72); }
body.dvv-kaal .dvv-kaalkop__terug:hover { color: #fff; }

/* ----------------------------------------------------------- de hero -- */

/*
 * Hetzelfde paars naar zwart als de kop van elke andere pagina. Daarmee begint
 * deze pagina op dezelfde hoogte en in hetzelfde ritme als de pagina waar de
 * bezoeker net vandaan komt.
 */
body.dvv-kaal .dvv-boekhero {
	background:
		radial-gradient(120% 140% at 88% -20%, color-mix(in srgb, var(--pv-paars) 45%, transparent) 0%, color-mix(in srgb, var(--pv-paars) 12%, transparent) 42%, transparent 72%),
		linear-gradient(205deg, var(--pv-paars-diep) 0%, #2C0A5C 36%, #150432 68%, #070113 100%);
	border-bottom: 0;
	color: rgba(255, 255, 255, 0.78);
}

body.dvv-kaal .dvv-boekhero h1 { color: #fff; }

/* Het labeltje in dezelfde vorm als het oranje label op de andere pagina's, en
   niet in het pixelfont: dat komt op de rest van de site nergens meer voor. */
body.dvv-kaal .dvv-boekhero__eyebrow {
	font-family: var(--dvv-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--pv-oranje);
}

body.dvv-kaal .dvv-boekhero__tagline {
	color: rgba(255, 255, 255, 0.72);
	font-weight: 600;
}

/* ---------------------------------------------------------- de stappen -- */

/* Witte kaarten met een lichte rand en een zachte schaduw, net als overal. */
body.dvv-kaal .dvv-stap {
	background: var(--pv-wit);
	border: 1px solid var(--pv-rand);
	box-shadow: 0 22px 48px -42px rgba(20, 16, 33, 0.9);
}

body.dvv-kaal .dvv-stap.is-open:not(.is-af) {
	border-color: color-mix(in srgb, var(--pv-paars) 40%, var(--pv-rand));
}

/* Een stap die nog op slot staat is grijs in plaats van wit: zo zie je zonder
   te lezen welke stap aan de beurt is. */
body.dvv-kaal .dvv-stap.is-slot {
	background: var(--pv-mist);
	box-shadow: none;
}

body.dvv-kaal .dvv-stap__nummer { color: #fff; }

/*
 * Het nummer terug in de regel.
 *
 * Er staan twee soorten .dvv-stap in de stylesheet: de blokjes op de oude
 * homepage en de stappen van deze funnel. De eerste zet het nummer los in de
 * linkerbovenhoek, en die regel lekt hierheen omdat de funnel zelf geen
 * position opgeeft. Op een breed scherm viel dat niet op; op een telefoon is
 * de binnenmarge kleiner en stond het nummer dwars door de kop heen.
 *
 * De kop van een stap is een flexregel met ruimte voor dat nummer, dus hij
 * hoort er gewoon in te staan.
 */
body.dvv-kaal .dvv-stap__nummer {
	position: static;
	border-radius: 999px;
}

/* ------------------------------------------------- bij elke maat erbij -- */

/*
 * Wat er bij élke maat in zit, één keer onder de maten.
 *
 * Niet op elke kaart erbij, want dan staat hetzelfde rijtje acht keer op één
 * scherm en leest niemand het meer. Eén keer, met een lijn erboven zodat het
 * hoort bij alles erboven en niet bij de laatste kaart.
 */
body.dvv-kaal .dvv-inbegrepen {
	margin-top: 1.4rem;
	padding-top: 1.3rem;
	border-top: 1px solid var(--pv-rand);
}

body.dvv-kaal .dvv-inbegrepen__kop {
	margin: 0 0 0.9rem;
	font-family: var(--dvv-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pv-grijs-licht);
}

body.dvv-kaal .dvv-inbegrepen ul {
	display: grid;
	gap: 0.7rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

body.dvv-kaal .dvv-inbegrepen li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.6rem;
	align-items: start;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--pv-inkt);
}

body.dvv-kaal .dvv-inbegrepen svg {
	width: 1rem;
	height: 1rem;
	margin-top: 0.2rem;
	color: var(--pv-paars-cta);
}

/* Staat de stap dicht, dan hoort dit blok er ook niet te zijn. */
body.dvv-kaal .dvv-stap.is-slot .dvv-inbegrepen { display: none; }
/* -------------------------------------------------------- de keuzes -- */

body.dvv-kaal .dvv-keuze {
	border-radius: var(--dvv-radius);
	background: var(--pv-wit);
}

body.dvv-kaal .dvv-keuze.is-gekozen {
	border-color: var(--pv-paars-cta);
	background: var(--pv-paars-mist);
	box-shadow: 0 0 0 1px var(--pv-paars-cta);
}

/*
 * De extra's als vakjes naast elkaar.
 *
 * De maten eronder blijven brede regels: daar hoort een rij tekst bij een
 * prijs. Een extra is een product, en dat kijk je aan in plaats van dat je
 * het leest. Vandaar de foto bovenaan en alles eronder gecentreerd.
 *
 * Twee kolommen en niet auto-fit: zo staan er straks bij acht extra's ook
 * twee op een rij en niet ineens drie smalle.
 */
body.dvv-kaal .dvv-stap [data-keuzes="extra"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.dvv-kaal [data-keuzes="extra"] .dvv-keuze {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0.7rem;
	padding: 0.9rem 0.9rem 1rem;
	text-align: center;
}

/*
 * De foto onderaan, met de naam en de prijs erboven. In de opmaak staat
 * hij eerst, dus hij wordt hier met order verplaatst en niet in het
 * sjabloon: daar hoort hij vlak bij de naam te staan voor een schermlezer.
 *
 * Contain en geen cover: het zijn uitgeknipte productfoto's, en die wil je
 * heel zien en niet bijgesneden. De automarge duwt hem naar de onderkant,
 * zodat de foto's op elke kaart op dezelfde hoogte staan.
 */
body.dvv-kaal [data-keuzes="extra"] .dvv-keuze__beeld {
	order: 3;
	width: 100%;
	height: 150px;
	margin: auto 0 0;
	padding: 0.4rem;
	border-radius: 8px;
	/* Wit en geen grijs vlak: productfoto's met een witte achtergrond lieten
	   anders een wit blok midden in het grijs zien. */
	background: var(--pv-wit);
	object-fit: contain;
}

body.dvv-kaal [data-keuzes="extra"] .dvv-keuze__tekst { order: 1; gap: 0.3rem; }

/*
 * Een vakje zonder foto houdt toch de ruimte ervoor vrij. Anders staat er
 * één laag kaartje tussen de hoge en valt de rij uit elkaar. Leeg en niet
 * grijs: een grijs vlak leest als een foto die niet geladen is.
 */
body.dvv-kaal [data-keuzes="extra"] .dvv-keuze:not(:has( .dvv-keuze__beeld ))::after {
	content: "";
	order: 3;
	margin-top: auto;
	height: 150px;
}

/* De prijs direct onder de naam. */
body.dvv-kaal [data-keuzes="extra"] .dvv-keuze__prijs {
	order: 2;
	font-size: 1.0625rem;
}

/* Op een telefoon onder elkaar. Twee vakjes naast elkaar is daar nog geen
   160 pixels per stuk, en dan valt de omschrijving uit elkaar. */
@media (max-width: 30rem) {
	body.dvv-kaal .dvv-stap [data-keuzes="extra"] {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------- de velden -- */

body.dvv-kaal .dvv-invoer input,
body.dvv-kaal .dvv-invoer textarea {
	background: var(--pv-wit);
	border-radius: var(--dvv-radius);
}

/* De datumkiezer van de browser stond op donker; die volgt nu de pagina. */
body.dvv-kaal .dvv-invoer input[type="date"] { color-scheme: light; }

/* --------------------------------------------------------- de knoppen -- */

/*
 * Eén kleur en geen verloop. De oude knop liep van paars naar magenta; met het
 * nieuwe palet zou dat van paars naar oranje lopen en dat is geen knop maar
 * een zonsondergang. Verder de ronde vorm van de andere knoppen op de site.
 */
body.dvv-kaal .dvv-header__cta {
	padding: 0.85rem 1.5rem;
	border-radius: 999px;
	background: var(--pv-oranje);
	box-shadow: none;
}

body.dvv-kaal .dvv-header__cta:hover {
	background: var(--pv-oranje-hover);
	box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--pv-oranje) 70%, transparent);
}

body.dvv-kaal .dvv-slotcta__tweede {
	border-radius: 999px;
}

/* --------------------------------------------------------- het vinkje -- */

/*
 * Het akkoordvakje was onzichtbaar.
 *
 * Het vakje en de kaart eromheen waren getekend met wit op een paar procent
 * dekking: op de donkere pagina van vroeger een subtiel randje, op deze witte
 * pagina wit op wit. Het stond er dus wel, maar je moest weten waar je moest
 * klikken.
 *
 * Nu een echt vakje met een grijze rand, en groen zodra het aan staat. Groen
 * omdat dat hier hetzelfde betekent als bij de vinkjes in de vergelijking:
 * dit is in orde.
 */
body.dvv-kaal .dvv-akkoord {
	background: var(--pv-wit);
	border-color: var(--pv-rand);
	border-radius: var(--dvv-radius);
	align-items: center;
	gap: 0.85rem;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

body.dvv-kaal .dvv-akkoord:hover {
	border-color: color-mix(in srgb, var(--pv-paars) 45%, var(--pv-rand));
}

body.dvv-kaal .dvv-akkoord__vink {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border: 2px solid var(--pv-grijs-licht);
	background: var(--pv-wit);
	color: #fff;
	margin-block-start: 0;
}

body.dvv-kaal .dvv-akkoord input:checked + .dvv-akkoord__vink {
	background: var(--pv-groen);
	border-color: var(--pv-groen);
}

body.dvv-kaal .dvv-akkoord input:focus-visible + .dvv-akkoord__vink {
	outline: 2px solid var(--pv-oranje);
	outline-offset: 3px;
}

/* De regel eronder is een toelichting, geen tweede zin van gelijk gewicht. */
body.dvv-kaal .dvv-akkoord__tekst small {
	display: block;
	margin-top: 0.15rem;
	color: var(--pv-grijs);
}
/* ------------------------------------------------------ de foutmelding -- */

/*
 * Rood, en niet oranje.
 *
 * De melding werd getekend met de kleur die vroeger magenta heette. In het
 * nieuwe palet wijst die naam naar het oranje van de knoppen, en dan ziet een
 * foutmelding eruit als iets waar je op moet klikken. Een waarschuwing hoort
 * een eigen kleur te hebben die verder nergens op de pagina voorkomt.
 */
body.dvv-kaal .dvv-funnel__fout {
	border-color: color-mix(in srgb, #C0243C 40%, transparent);
	background: color-mix(in srgb, #C0243C 7%, var(--pv-wit));
	color: #8A1226;
}

body.dvv-kaal .dvv-akkoord--fout {
	border-color: color-mix(in srgb, #C0243C 55%, transparent);
	background: color-mix(in srgb, #C0243C 5%, var(--pv-wit));
}

body.dvv-kaal .dvv-akkoord--fout .dvv-akkoord__vink { border-color: #C0243C; }
/* -------------------------------------------------------- het overzicht -- */

body.dvv-kaal .dvv-overzicht {
	background: var(--pv-wit);
	border: 1px solid var(--pv-rand);
	box-shadow: 0 22px 48px -42px rgba(20, 16, 33, 0.9);
}

/* ------------------------------------------------------------ de voet -- */

body.dvv-kaal .dvv-kaalvoet {
	background: var(--pv-mist);
	border-top: 1px solid var(--pv-rand);
}

body.dvv-kaal .dvv-kaalvoet a { color: var(--pv-paars-cta); }
body.dvv-kaal .dvv-kaalvoet a:hover { color: var(--pv-paars-hover); }