/**
 * Nexus Games, UI-laag.
 *
 * Een eigen, afhankelijkheidsvrije basislaag voor alles wat de plugin op
 * de site toont. Alles staat achter .nxg-ui zodat er niets naar het thema
 * lekt en omgekeerd.
 *
 * Twee dingen bepalen hoe dit eruitziet:
 *
 * 1. De kleuren komen uit het thema via --tg-primary-color, met een eigen
 *    terugval. Wijzigt de klant zijn accentkleur, dan volgt alles mee.
 * 2. Velden krijgen een breedte die past bij wat erin komt. Een veld van
 *    1600 pixels voor een spelersnummer van tien tekens is gewoon fout.
 */

.nxg-ui {
	--nxg-bg: #030B15;
	--nxg-surface: #0C1729;
	--nxg-surface-2: rgba( 255, 255, 255, .04 );
	--nxg-line: rgba( 164, 180, 195, .16 );
	--nxg-line-strong: rgba( 164, 180, 195, .32 );

	--nxg-text: #DCE7F3;
	--nxg-muted: #8B99AC;
	--nxg-heading: #FFFFFF;

	--nxg-accent: var( --tg-primary-color, #00C4F4 );
	--nxg-accent-2: var( --tg-secondary-color, #564DCA );
	--nxg-on-accent: #04121C;

	--nxg-ok: #12D176;
	--nxg-warn: #FF9700;
	--nxg-bad: #FF4581;

	--nxg-r: 12px;
	--nxg-r-sm: 8px;

	color: var( --nxg-text );
	font-size: 1rem;
	line-height: 1.6;
}

.nxg-ui *,
.nxg-ui *::before,
.nxg-ui *::after {
	box-sizing: border-box;
}

.nxg-ui :focus-visible {
	outline: 3px solid var( --nxg-accent );
	outline-offset: 2px;
	border-radius: 4px;
}

/* ------------------------------------------------------------- ruimte */

.nxg-ui__wrap {
	max-width: 62rem;
	margin: 0 auto;
}

.nxg-ui__wrap--smal {
	max-width: 44rem;
}

/* Bewust met gap en niet met marges. Een marge op een kind kan altijd
   overreden worden door een specifiekere regel, en dan valt de ruimte
   tussen de kaarten stilletjes weg. Gap staat op de ouder en is immuun. */
.nxg-stack {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

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

.nxg-ui .nxg-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem;
	margin: 0 0 1.75rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var( --nxg-line );
}

.nxg-eyebrow {
	margin: 0 0 .4rem;
	color: var( --nxg-accent );
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.nxg-ui .nxg-hero__name {
	margin: 0;
	color: var( --nxg-heading );
	font-size: clamp( 1.6rem, 4vw, 2.25rem );
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	text-transform: none;
}

/* ------------------------------------------------------- sectienavigatie */

/* Blijft bovenaan plakken, zodat je in een lang dashboard nooit hoeft
   terug te scrollen. */
.nxg-ui .nxg-jump {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	gap: .4rem;
	margin: 0 0 1.75rem;
	padding: .6rem .75rem;
	overflow-x: auto;
	scrollbar-width: none;
	border: 1px solid var( --nxg-line );
	border-radius: 999px;
	/* Eigen dekkende achtergrond, anders schemert de inhoud eronder door. */
	background: #0A1120;
}

.nxg-jump::-webkit-scrollbar {
	display: none;
}

.nxg-ui .nxg-jump a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: .3rem 1rem;
	border: 1px solid var( --nxg-line );
	border-radius: 999px;
	background: var( --nxg-surface-2 );
	color: var( --nxg-muted );
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.nxg-jump a:hover {
	color: var( --nxg-heading );
	border-color: var( --nxg-line-strong );
}

.nxg-jump a[aria-current="true"] {
	background: var( --nxg-accent );
	border-color: var( --nxg-accent );
	color: var( --nxg-on-accent );
}

/* ------------------------------------------------------------ kaarten */

.nxg-ui .nxg-card {
	position: relative;
	margin: 0;
	padding: 1.75rem;
	border: 1px solid var( --nxg-line );
	border-radius: var( --nxg-r );
	background: var( --nxg-surface );
	overflow: hidden;
}

/* Een kort streepje in de accentkleur linksboven. Genoeg om een kaart
   herkenbaar te maken zonder dat het een kader wordt. Het zit binnen de
   afgeronde hoek, vandaar de inzet. */
.nxg-ui .nxg-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 1.75rem;
	width: 3.5rem;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var( --nxg-card-accent, linear-gradient( 90deg, var( --nxg-accent ), var( --nxg-accent-2 ) ) );
}

.nxg-card[id] {
	/* Zodat de plakkende navigatie de titel niet bedekt na een sprong. */
	scroll-margin-top: 5rem;
}

.nxg-ui .nxg-card__title {
	margin: .4rem 0 1.1rem;
	color: var( --nxg-heading );
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.25;
	text-transform: none;
}

.nxg-card__label {
	margin: 0;
	color: var( --nxg-accent );
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.nxg-card__note {
	margin: 1rem 0 0;
	color: var( --nxg-muted );
	font-size: .9rem;
}

/* -------------------------------------------------------------- cijfers */

/* Het element staat er bewust bij. Themas zetten vaak padding op elke ul
   in de inhoud, en zo'n regel is specifieker dan één losse klasse. */
.nxg-ui ul.nxg-stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 9rem, 1fr ) );
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var( --nxg-line );
	border-radius: var( --nxg-r );
	overflow: hidden;
	background: var( --nxg-surface );
}

/* Echte randen tussen de vakken in plaats van een raster met gaten. Dat
   laatste laat aan de buitenrand altijd een streepje zien. */
.nxg-ui .nxg-stats > li {
	margin: 0;
	padding: 1.4rem 1.6rem;
	border-left: 1px solid var( --nxg-line );
	background: none;
	list-style: none;
}

.nxg-ui .nxg-stats > li:first-child {
	border-left: 0;
}

.nxg-ui .nxg-stats b {
	display: block;
	margin-bottom: .3rem;
	color: var( --nxg-heading );
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
}

.nxg-ui .nxg-stats span {
	display: block;
	color: var( --nxg-muted );
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Op smalle schermen worden het rijen, dus dan hoort de rand boven. */
@media (max-width: 560px) {
	.nxg-ui .nxg-stats > li {
		border-left: 0;
		border-top: 1px solid var( --nxg-line );
	}

	.nxg-ui .nxg-stats > li:first-child {
		border-top: 0;
	}
}

/* ---------------------------------------------------------- formulieren */

.nxg-form {
	max-width: 34rem;
}

/* Staat er tekst boven het formulier, dan hoort daar een scheiding
   tussen. Anders lopen de uitleg en de invulvelden in elkaar over. */
.nxg-punten + .nxg-form,
.nxg-card > p + .nxg-form {
	margin-top: 1.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var( --nxg-line );
}

.nxg-form--breed {
	max-width: none;
}

.nxg-field {
	margin: 0 0 1.1rem;
}

.nxg-ui .nxg-field label,
.nxg-ui .nxg-label {
	display: block;
	margin-bottom: .4rem;
	color: var( --nxg-muted );
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nxg-ui .nxg-field input,
.nxg-ui .nxg-field select,
.nxg-ui .nxg-field textarea {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: .65rem .85rem;
	border: 1px solid var( --nxg-line-strong );
	border-radius: var( --nxg-r-sm );
	background: rgba( 3, 11, 21, .55 );
	color: var( --nxg-heading );
	font: inherit;
	font-size: 1rem;
}

/* Velden krijgen een breedte die past bij hun inhoud. */
.nxg-field--kort input,
.nxg-field--kort select {
	max-width: 9rem;
}

.nxg-field--half input,
.nxg-field--half select {
	max-width: 18rem;
}

.nxg-ui .nxg-field textarea {
	min-height: 6rem;
	line-height: 1.55;
	resize: vertical;
}

.nxg-ui .nxg-field input::placeholder,
.nxg-ui .nxg-field textarea::placeholder {
	color: var( --nxg-muted );
}

.nxg-ui .nxg-field input:focus,
.nxg-ui .nxg-field select:focus,
.nxg-ui .nxg-field textarea:focus {
	border-color: var( --nxg-accent );
	outline: none;
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --nxg-accent ) 28%, transparent );
}

.nxg-field__hint {
	margin: .4rem 0 0;
	color: var( --nxg-muted );
	font-size: .85rem;
}

/* Datum- en tijdvelden hebben een zwart icoontje, onzichtbaar op donker. */
.nxg-ui input[type="date"]::-webkit-calendar-picker-indicator,
.nxg-ui input[type="time"]::-webkit-calendar-picker-indicator,
.nxg-ui input[type="datetime-local"]::-webkit-calendar-picker-indicator {
	filter: invert( 1 ) opacity( .65 );
	cursor: pointer;
}

.nxg-row {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
	gap: 0 1rem;
}

.nxg-row > * {
	min-width: 0;
}

/* Selectievakjes zijn geen invulvelden en horen niet in hoofdletters. */
.nxg-ui .nxg-check label {
	display: flex;
	align-items: center;
	gap: .7rem;
	min-height: 42px;
	margin: 0;
	color: var( --nxg-text );
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.nxg-ui .nxg-check input {
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 0;
	padding: 0;
	accent-color: var( --nxg-accent );
}

.nxg-checks {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) );
	gap: .1rem 1.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

.nxg-ui .nxg-checks legend {
	padding: 0;
	margin-bottom: .6rem;
	color: var( --nxg-muted );
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

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

.nxg-ui .nxg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 48px;
	padding: .65rem 1.6rem;
	border: 1px solid var( --nxg-line-strong );
	border-radius: var( --nxg-r-sm );
	background: var( --nxg-surface-2 );
	color: var( --nxg-text );
	font: inherit;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.nxg-ui .nxg-btn:hover {
	border-color: var( --nxg-accent );
	color: var( --nxg-heading );
}

/* Donkere tekst op de accentkleur. Wit haalt daar geen leesbaar
   contrast, hoe mooi het ook lijkt. */
.nxg-ui .nxg-btn--primair {
	border-color: var( --nxg-accent );
	background: var( --nxg-accent );
	color: var( --nxg-on-accent );
}

.nxg-ui .nxg-btn--primair:hover {
	color: var( --nxg-on-accent );
	filter: brightness( 1.12 );
}

.nxg-ui .nxg-btn--stil {
	min-height: 40px;
	padding: .35rem 1rem;
	border-color: transparent;
	background: none;
	color: var( --nxg-muted );
	font-size: .85rem;
}

.nxg-ui .nxg-btn--stil:hover {
	color: var( --nxg-heading );
}

.nxg-ui .nxg-btn--gevaar:hover {
	border-color: var( --nxg-bad );
	color: var( --nxg-bad );
}

.nxg-acties {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1.5rem 0 0;
}

/* -------------------------------------------------------------- lijsten */

.nxg-ui ul.nxg-lijst,
.nxg-ui ol.nxg-lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-lijst > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem 1rem;
	padding: .95rem 0;
	border-bottom: 1px solid var( --nxg-line );
}

.nxg-ui .nxg-lijst > li {
	list-style: none;
}

.nxg-ui .nxg-lijst > li:first-child {
	padding-top: 0;
}

.nxg-ui .nxg-lijst > li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.nxg-lijst time {
	flex: 0 0 100%;
	color: var( --nxg-accent );
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.nxg-ui .nxg-lijst__naam {
	color: var( --nxg-heading );
	font-size: 1.02rem;
	font-weight: 700;
	text-decoration: none;
}

.nxg-ui .nxg-lijst__naam:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nxg-lijst__extra {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: .75rem;
}

/* ----------------------------------------------------------- opsomming */

/* Voor voordelen en korte punten. Bewust anders dan .nxg-lijst, die voor
   rijen met gegevens is en daarom scheidingslijnen heeft. */
.nxg-ui ul.nxg-punten {
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-punten > li {
	position: relative;
	margin: 0 0 .6rem;
	padding: 0 0 0 1.9rem;
	border: 0;
	color: var( --nxg-text );
	font-size: .98rem;
	line-height: 1.55;
	list-style: none;
}

.nxg-ui .nxg-punten > li:last-child {
	margin-bottom: 0;
}

/* Een vinkje, geen bolletje. Dit zijn dingen die je krijgt. */
.nxg-ui .nxg-punten > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .42em;
	width: .85rem;
	height: .48rem;
	border-left: 2px solid var( --nxg-accent );
	border-bottom: 2px solid var( --nxg-accent );
	transform: rotate( -45deg );
}

/* --------------------------------------------------------------- labels */

.nxg-badge {
	display: inline-block;
	padding: .15rem .7rem;
	border: 1px solid var( --nxg-line-strong );
	border-radius: 999px;
	color: var( --nxg-muted );
	font-size: .74rem;
	font-weight: 700;
	white-space: nowrap;
}

.nxg-badge--ok {
	border-color: rgba( 18, 209, 118, .5 );
	color: var( --nxg-ok );
}

.nxg-badge--wacht {
	border-color: rgba( 255, 151, 0, .5 );
	color: var( --nxg-warn );
}

.nxg-badge--af {
	border-color: rgba( 255, 69, 129, .5 );
	color: var( --nxg-bad );
}

/* ------------------------------------------------------------ meldingen */

.nxg-melding {
	margin: 0 0 1.5rem;
	padding: .95rem 1.2rem;
	border-left: 3px solid var( --nxg-accent );
	border-radius: 0 var( --nxg-r-sm ) var( --nxg-r-sm ) 0;
	background: color-mix( in srgb, var( --nxg-accent ) 12%, transparent );
	font-size: .96rem;
}

.nxg-melding--ok {
	border-left-color: var( --nxg-ok );
	background: rgba( 18, 209, 118, .10 );
}

.nxg-melding--fout {
	border-left-color: var( --nxg-bad );
	background: rgba( 255, 69, 129, .10 );
}

.nxg-leeg {
	margin: 0;
	padding: 1.5rem;
	border: 1px dashed var( --nxg-line-strong );
	border-radius: var( --nxg-r-sm );
	color: var( --nxg-muted );
	text-align: center;
}

@media (max-width: 600px) {
	.nxg-card {
		padding: 1.35rem;
	}

	.nxg-card::before {
		left: 1.35rem;
	}

	.nxg-lijst__extra {
		margin-left: 0;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nxg-ui * {
		transition: none !important;
	}
}

/* Het verborgen veld tegen bots. Onzichtbaar, maar wel in de code, want
   een bot leest de code en geen scherm. */
.nxg-trap {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* --------------------------------------------------------- nieuwsbrief */

/* Het vinkje staat bewust apart van de rest van het formulier, met een
   lijn erboven. Zo is meteen duidelijk dat het los staat van waar je je
   voor inschrijft, en dat het geen voorwaarde is. */
.nxg-optin {
	margin: 1.5rem 0 0;
	padding: 1rem 1.1rem;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .16 ) );
	border-radius: 8px;
	background: rgba( 255, 255, 255, .03 );
}

/* Verticaal gecentreerd. Bij een label van twee regels hing het vakje
   anders bovenaan te zweven. */
.nxg-optin label {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 0;
	color: var( --nxg-text, #DCE7F3 );
	font-size: .92rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.nxg-optin input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 0;
	padding: 0;
	accent-color: var( --nxg-accent, #00C4F4 );
}

/* De tekst mag niet breder worden dan nodig, anders breekt hij af op een
   plek waar de zin nog makkelijk op één regel had gekund. */
.nxg-optin label span {
	max-width: 44rem;
}

/* De snelle contactregels boven het formulier. */
.nxg-contact__snel {
	margin-bottom: 1.5rem;
}

.nxg-ui .nxg-contact__snel a {
	color: var( --nxg-accent );
	font-weight: 700;
}

/* -------------------------------------------------------- keuzelijsten */

/* Het uitklapmenu wordt door het besturingssysteem getekend, niet door de
   pagina. In Chrome en Edge kan je de opties wel kleuren, en zonder dat
   krijg je een grijze lijst midden in een donkere site. */
.nxg-ui .nxg-field select {
	appearance: none;
	padding-right: 2.5rem;
	background-image:
		linear-gradient( 45deg, transparent 50%, var( --nxg-muted ) 50% ),
		linear-gradient( 135deg, var( --nxg-muted ) 50%, transparent 50% );
	background-position: calc( 100% - 20px ) 55%, calc( 100% - 14px ) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.nxg-ui select option {
	background-color: #0B1D33;
	color: #DCE7F3;
}

.nxg-ui select option:checked {
	background-color: #123255;
}

/* ------------------------------------------------------- selecteren */

/* Zonder dit gebruikt de browser zijn eigen grijsblauw, dat op een
   donkere achtergrond als een vlek oogt. */
.nxg-ui ::selection,
.nxg-reserve ::selection,
.nxg-calendar ::selection,
.nxg-home ::selection,
.nxg-page ::selection,
.nxg-hours ::selection {
	background: color-mix( in srgb, var( --nxg-accent, #00C4F4 ) 35%, transparent );
	color: #FFFFFF;
}

/* =================================================== mijn deelnames */

.nxg-ui .nxg-deelnames {
	display: grid;
	gap: .85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Nadrukkelijk grid en niet flex. Het thema maakt van elke li in de
   inhoud een flexregel, en dan vallen de foto, de kop en de gegevens
   naast elkaar op één lijn. */
.nxg-ui ul.nxg-deelnames > li.nxg-deelname,
.nxg-ui .nxg-deelname {
	position: relative;
	display: grid;
	grid-template-columns: 5.5rem minmax( 0, 1fr );
	gap: 1.1rem;
	align-items: start;
	margin: 0;
	padding: 1.1rem 1.25rem 1.1rem 1.1rem;
	overflow: hidden;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .18 ) );
	border-radius: 14px;
	background:
		radial-gradient( 70% 130% at 100% 0%, color-mix( in srgb, var( --nxg-game-color, #00C4F4 ) 10%, transparent ), transparent 70% ),
		rgba( 255, 255, 255, .025 );
	list-style: none;
}

@media (max-width: 560px) {
	.nxg-ui ul.nxg-deelnames > li.nxg-deelname,
	.nxg-ui .nxg-deelname {
		grid-template-columns: 3.75rem minmax( 0, 1fr );
		gap: .85rem;
		padding: 1rem;
	}
}

/* Een streepje links in de kleur van de toestand. Genoeg om in één blik
   te zien welke deelname nog iets van je vraagt. */
.nxg-ui .nxg-deelname::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var( --nxg-muted, #6B7684 );
}

/* Oranje zolang er niets beslist is, groen zodra er iets voor je
   klaarligt. Groen tijdens het wachten zou suggereren dat je al iets
   hebt. */
.nxg-ui .nxg-deelname[data-tone="wacht"]::before {
	background: #FF9700;
}

.nxg-ui .nxg-deelname[data-tone="ok"]::before {
	background: #12D176;
}

.nxg-ui .nxg-deelname[data-tone="af"] {
	opacity: .72;
}

/* -------------------------------------------------------------- beeld */

.nxg-deelname__beeld {
	display: block;
	aspect-ratio: 1;
	padding: .35rem;
	overflow: hidden;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .16 ) );
	border-radius: 10px;
	background: rgba( 3, 11, 21, .55 );
}

.nxg-deelname__beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Zonder foto een gekleurd vlak, zodat elk blok even hoog blijft en de
   rij niet rafelt. */
.nxg-deelname__leeg {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	background:
		radial-gradient( 70% 90% at 30% 20%, color-mix( in srgb, var( --nxg-game-color, #00C4F4 ) 30%, transparent ), transparent 70% ),
		rgba( 86, 77, 202, .25 );
}

/* De titel van een reservatie is een datum, en die mag wat rustiger dan
   een producttitel. */
.nxg-ui span.nxg-deelname__titel {
	display: block;
	color: var( --nxg-heading, #FFFFFF );
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.25;
	text-transform: capitalize;
}

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

.nxg-deelname__body {
	min-width: 0;
}

.nxg-deelname__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-bottom: .9rem;
}

.nxg-deelname__spel {
	display: block;
	margin-bottom: .15rem;
	color: var( --nxg-game-color, var( --nxg-accent, #00C4F4 ) );
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.nxg-ui .nxg-deelname__titel {
	color: var( --nxg-heading, #FFFFFF );
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
}

.nxg-ui .nxg-deelname__titel:hover {
	color: var( --nxg-game-color, var( --nxg-accent, #00C4F4 ) );
}

.nxg-deelname__staat {
	flex: 0 0 auto;
	padding: .22rem .8rem;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .08 );
	color: var( --nxg-muted, #6B7684 );
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.nxg-deelname__staat::before {
	content: "";
	display: inline-block;
	width: .42rem;
	height: .42rem;
	margin-right: .45rem;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
}

.nxg-deelname[data-tone="wacht"] .nxg-deelname__staat {
	background: rgba( 255, 151, 0, .16 );
	color: #FF9700;
}

.nxg-deelname[data-tone="ok"] .nxg-deelname__staat {
	background: #12D176;
	color: #04120A;
}

/* ---------------------------------------------------------- gegevens */

.nxg-deelname__cijfers {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem 2rem;
	margin: 0;
}

.nxg-deelname__cijfers > div {
	min-width: 0;
}

.nxg-deelname__cijfers dt {
	margin: 0 0 .25rem;
	color: var( --nxg-muted, #6B7684 );
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxg-deelname__cijfers dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 0;
	color: var( --nxg-heading, #FFFFFF );
	font-size: .96rem;
	font-weight: 700;
}

.nxg-deelname__cijfers code {
	padding: .12rem .5rem;
	border-radius: 6px;
	background: rgba( 0, 0, 0, .35 );
	color: var( --nxg-accent, #00C4F4 );
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9rem;
	letter-spacing: .06em;
}

.nxg-ui .nxg-deelname__actie {
	margin: .9rem 0 0;
	color: #12D176;
	font-size: .86rem;
	font-weight: 600;
	line-height: 1.5;
}

/* ============================================ aanmelden om mee te doen */

.nxg-aanmelden-nodig {
	padding: 1.75rem;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .18 ) );
	border-radius: 14px;
	background: rgba( 0, 196, 244, .07 );
	text-align: center;
}

.nxg-aanmelden-nodig__titel {
	margin: 0 0 .5rem;
	color: var( --nxg-heading, #FFFFFF );
	font-size: 1.15rem;
	font-weight: 700;
}

.nxg-aanmelden-nodig__uitleg {
	max-width: 44ch;
	margin: 0 auto 1.5rem;
	color: var( --nxg-muted, #6B7684 );
	font-size: .95rem;
	line-height: 1.6;
}

.nxg-aanmelden-nodig__knoppen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 0;
}

.nxg-aanmelden-nodig__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: .7rem 2rem;
	border-radius: 999px;
	background: var( --nxg-accent, #00C4F4 );
	color: #030B15;
	font-weight: 800;
	text-decoration: none;
}

.nxg-aanmelden-nodig__knop:hover {
	color: #030B15;
	filter: brightness( 1.12 );
}

.nxg-aanmelden-nodig__link {
	color: var( --nxg-muted, #6B7684 );
	font-size: .92rem;
}

/* De teller in een deelnameblok. */
.nxg-ui .nxg-aftellen {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .12rem .6rem;
	border-radius: 999px;
	background: rgba( 255, 151, 0, .16 );
	color: #FF9700;
	font-size: .74rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.nxg-ui .nxg-aftellen::before {
	content: "";
	width: .35rem;
	height: .35rem;
	border-radius: 50%;
	background: currentColor;
}

.nxg-ui .nxg-aftellen--voorbij {
	background: rgba( 255, 255, 255, .08 );
	color: var( --nxg-muted, #6B7684 );
}

@media (prefers-reduced-motion: reduce) {
	.nxg-ui .nxg-aftellen {
		display: none;
	}
}

/* ================================================ even bevestigen */

/* Eén klik mag nooit iets ongedaan maken wat je niet terugkrijgt. Deze
   tussenstap is bewust een echte pagina en geen javascript-venster: die
   zijn te blokkeren, en op een telefoon verschijnen ze soms boven het
   scherm. */
.nxg-ui .nxg-bevestig {
	border-color: rgba( 255, 151, 0, .4 );
	background: rgba( 255, 151, 0, .07 );
}

.nxg-ui .nxg-bevestig .nxg-card__label {
	color: #FF9700;
}

.nxg-ui .nxg-btn--gevaar {
	background: #FF4581;
	color: #FFFFFF;
	border-color: #FF4581;
}

.nxg-ui .nxg-btn--gevaar:hover {
	color: #FFFFFF;
	filter: brightness( 1.1 );
}

.nxg-ui .nxg-btn--stil {
	background: none;
	border-color: var( --nxg-line-strong, rgba( 164, 180, 195, .34 ) );
	color: var( --nxg-text, #DCE7F3 );
}

.nxg-ui .nxg-btn--stil:hover {
	border-color: var( --nxg-accent, #00C4F4 );
	color: var( --nxg-heading, #FFFFFF );
}

/* De intrekknop in een deelnameblok blijft klein. Het is een uitweg, geen
   uitnodiging. */
.nxg-ui .nxg-deelname__stop {
	margin: .9rem 0 0;
}

.nxg-ui .nxg-deelname__stop a {
	color: var( --nxg-muted, #6B7684 );
	font-size: .84rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nxg-ui .nxg-deelname__stop a:hover {
	color: #FF4581;
}

/* Kopjes en vette tekst in het account en de andere schermen die op de
   ui-laag draaien. Het thema zet die donker, en dat is hier onleesbaar. */
.nxg-ui h1,
.nxg-ui h2,
.nxg-ui h3,
.nxg-ui h4,
.nxg-ui h5,
.nxg-ui h6 {
	color: var( --nxg-heading, #FFFFFF );
}

.nxg-ui strong,
.nxg-ui b {
	color: var( --nxg-heading, #FFFFFF );
}

.nxg-ui li,
.nxg-ui dd,
.nxg-ui dt,
.nxg-ui blockquote {
	color: var( --nxg-text, #DCE7F3 );
}

/* Zelfde verhaal als in de hoofdstijl: met de klasse op de body erbij
   wegen deze regels zwaarder dan die van het thema. */
.nxg-plugin-pagina .nxg-ui h1,
.nxg-plugin-pagina .nxg-ui h2,
.nxg-plugin-pagina .nxg-ui h3,
.nxg-plugin-pagina .nxg-ui h4,
.nxg-plugin-pagina .nxg-ui h5,
.nxg-plugin-pagina .nxg-ui h6,
.nxg-donkere-pagina .nxg-ui h1,
.nxg-donkere-pagina .nxg-ui h2,
.nxg-donkere-pagina .nxg-ui h3,
.nxg-donkere-pagina .nxg-ui h4 {
	color: var( --nxg-heading, #FFFFFF );
}

/* Behalve de opschriften boven een kaart, die horen gedempt te blijven. */
.nxg-plugin-pagina .nxg-ui .nxg-card__label,
.nxg-donkere-pagina .nxg-ui .nxg-card__label {
	color: var( --nxg-muted, #6B7684 );
}

/* ============================================ voorwaarden en privacy */

/* Lange leesteksten. Smallere regels en meer lucht tussen de alinea's,
   want dit leest niemand vrijwillig en dan helpt elke rustpunt. */
.nxg-juridisch .nxg-card {
	padding: 2.5rem;
}

@media (max-width: 600px) {
	.nxg-juridisch .nxg-card {
		padding: 1.5rem;
	}
}

.nxg-ui .nxg-juridisch__titel {
	margin: 0 0 2rem;
	color: var( --nxg-heading, #FFFFFF );
	font-size: clamp( 1.6rem, 4vw, 2.1rem );
	line-height: 1.15;
}

.nxg-ui .nxg-juridisch h2 {
	margin: 2.25rem 0 .85rem;
	padding-top: 1.5rem;
	border-top: 1px solid var( --nxg-line, rgba( 164, 180, 195, .16 ) );
	color: var( --nxg-heading, #FFFFFF );
	font-size: 1.15rem;
	line-height: 1.3;
}

.nxg-ui .nxg-juridisch h2:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.nxg-ui .nxg-juridisch p {
	max-width: 68ch;
	margin: 0 0 1rem;
	color: var( --nxg-text, #DCE7F3 );
	line-height: 1.7;
}

.nxg-ui .nxg-juridisch ul {
	max-width: 68ch;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-juridisch li {
	position: relative;
	margin: 0 0 .85rem;
	padding-left: 1.4rem;
	color: var( --nxg-text, #DCE7F3 );
	line-height: 1.7;
}

.nxg-ui .nxg-juridisch li::before {
	content: "";
	position: absolute;
	top: .72em;
	left: 0;
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var( --nxg-accent, #00C4F4 );
}

.nxg-ui .nxg-juridisch a {
	color: var( --nxg-accent, #00C4F4 );
}

.nxg-ui .nxg-juridisch__datum {
	margin: 2.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var( --nxg-line, rgba( 164, 180, 195, .16 ) );
	color: var( --nxg-muted, #6B7684 );
	font-size: .85rem;
}

/* Koppen in zinsvorm, ook hier. Alleen de eerste letter een hoofdletter,
   want een kop is een zin. De kleine labels boven een kaart blijven in
   kapitalen: dat zijn wegwijzers, geen koppen. */
.nxg-ui h1,
.nxg-ui h2,
.nxg-ui h3,
.nxg-ui h4,
.nxg-ui h5,
.nxg-ui h6,
.nxg-ui .nxg-card__title,
.nxg-ui .nxg-hero__titel {
	text-transform: none;
	letter-spacing: normal;
}

/* De regel over de nieuwsbrief bij de voorkeuren. */
.nxg-ui .nxg-nieuwsbrief {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var( --nxg-line, rgba( 164, 180, 195, .16 ) );
	color: var( --nxg-muted, #6B7684 );
	font-size: .92rem;
}

.nxg-ui .nxg-nieuwsbrief a {
	color: var( --nxg-accent, #00C4F4 );
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==================================================== de lidkaart */

.nxg-lidkaart__blok {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.75rem;
	margin: 1.25rem 0 1.5rem;
	padding: 1.5rem;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .18 ) );
	border-radius: 14px;
	background: rgba( 255, 255, 255, .02 );
}

/* De code op wit, altijd. Een QR-code op een donkere achtergrond met
   lichte vlakjes lezen veel scanners niet: die verwachten donker op
   licht. */
/* De code op wit met een ruime rand eromheen. Een QR-code die tot tegen
   de rand loopt, leest slechter: een scanner heeft die stille zone nodig
   om de code te vinden. */
.nxg-lidkaart__qr {
	flex: 0 0 auto;
	width: 8.5rem;
	padding: 1rem;
	border-radius: 12px;
	background: #FFFFFF;
}

.nxg-lidkaart__qr svg {
	display: block;
	width: 100%;
	height: auto;
}

.nxg-lidkaart__tekst {
	flex: 1 1 12rem;
	min-width: 0;
}

.nxg-ui .nxg-lidkaart__saldo {
	margin: 0 0 .35rem;
	color: var( --nxg-heading, #FFFFFF );
	line-height: 1;
}

.nxg-lidkaart__saldo strong {
	font-size: 2.1rem;
	font-weight: 800;
	letter-spacing: -.02em;
}

.nxg-lidkaart__saldo span {
	color: var( --nxg-muted, #6B7684 );
	font-size: .95rem;
	font-weight: 600;
}

.nxg-ui .nxg-lidkaart__nummer {
	margin: 0 0 .75rem;
	color: var( --nxg-muted, #6B7684 );
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nxg-lidkaart__nummer code {
	margin-left: .4rem;
	padding: .15rem .5rem;
	border-radius: 6px;
	background: rgba( 0, 0, 0, .3 );
	color: var( --nxg-accent, #00C4F4 );
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1rem;
	letter-spacing: .1em;
}

.nxg-ui .nxg-lidkaart__uitleg {
	margin: 0;
	color: var( --nxg-muted, #6B7684 );
	font-size: .88rem;
	line-height: 1.55;
}

.nxg-ui .nxg-lidkaart__kop {
	margin: 1.75rem 0 .85rem;
	padding-top: 1.25rem;
	border-top: 1px solid var( --nxg-line, rgba( 164, 180, 195, .16 ) );
	font-size: .95rem;
}

/* --------------------------------------------------- de beloningen */

.nxg-ui .nxg-beloningen {
	display: grid;
	gap: .6rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-beloning {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: .9rem 1rem;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .18 ) );
	border-radius: 12px;
	background: rgba( 255, 255, 255, .025 );
	list-style: none;
}

.nxg-ui .nxg-beloning[data-kan="ja"] {
	border-color: rgba( 18, 209, 118, .4 );
	background: rgba( 18, 209, 118, .07 );
}

.nxg-beloning__foto img {
	display: block;
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	border-radius: 8px;
}

.nxg-beloning__info {
	flex: 1 1 auto;
	min-width: 0;
}

.nxg-beloning__naam {
	display: block;
	color: var( --nxg-heading, #FFFFFF );
	font-weight: 700;
}

.nxg-beloning__kost {
	display: block;
	color: var( --nxg-accent, #00C4F4 );
	font-size: .85rem;
	font-weight: 700;
}

.nxg-beloning__staat {
	flex: 0 0 auto;
	color: var( --nxg-muted, #6B7684 );
	font-size: .8rem;
	text-align: right;
}

.nxg-beloning[data-kan="ja"] .nxg-beloning__staat {
	color: #12D176;
	font-weight: 700;
}

/* ------------------------------------------------------ het logboek */

.nxg-ui .nxg-punt__log {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-punt__log li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: .6rem 0;
	border-bottom: 1px solid var( --nxg-line, rgba( 164, 180, 195, .12 ) );
	color: var( --nxg-text, #DCE7F3 );
	font-size: .9rem;
}

.nxg-ui .nxg-punt__log li:last-child {
	border-bottom: 0;
}

.nxg-punt__log strong {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}

.nxg-punt__log strong[data-teken="plus"] {
	color: #12D176;
}

.nxg-punt__log strong[data-teken="min"] {
	color: #FF9700;
}

/* ==================================================== snelmenu beheer */

/* Alleen zichtbaar voor wie iets mag. Bewust een lijst en geen rij
   knoppen: dit zijn dingen die je een paar keer per maand doet, en dan
   helpt een regel uitleg meer dan een strakke knop. */
.nxg-ui .nxg-snelmenu {
	display: grid;
	gap: .5rem;
	margin: 1.5rem 0 1rem;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-snelmenu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-snelmenu a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .25rem 1rem;
	padding: .8rem 1rem;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .18 ) );
	border-radius: 10px;
	background: rgba( 255, 255, 255, .025 );
	text-decoration: none;
}

.nxg-ui .nxg-snelmenu a:hover {
	border-color: var( --nxg-accent, #00C4F4 );
}

.nxg-snelmenu__naam {
	color: var( --nxg-heading, #FFFFFF );
	font-weight: 700;
}

.nxg-snelmenu__naam::after {
	content: " \2192";
	color: var( --nxg-accent, #00C4F4 );
}

.nxg-snelmenu__wat {
	color: var( --nxg-muted, #6B7684 );
	font-size: .85rem;
}

/* ---------------------------------------- de balk voor medewerkers */

/* Onder de gewone navigatie, en duidelijk anders van kleur. Dit zijn
   dingen die de bezoeker nooit ziet, en dan hoort het er ook niet
   hetzelfde uit te zien. */
.nxg-ui .nxg-jump--beheer {
	/* Nooit plakkend: twee balken op dezelfde hoogte schuiven over
	   elkaar, en samen met het logo van het thema wordt dat een knoop. */
	position: static;
	margin-top: -.5rem;
	border-style: dashed;
	border-color: rgba( 255, 151, 0, .35 );
	background: rgba( 255, 151, 0, .06 );
}

.nxg-ui .nxg-jump--beheer a {
	border-color: rgba( 255, 151, 0, .3 );
	color: var( --nxg-muted, #6B7684 );
}

.nxg-ui .nxg-jump--beheer a:hover {
	border-color: #FF9700;
	color: #FF9700;
}

/* Het toogscherm eerst en opvallender: dat is wat er dagelijks gebruikt
   wordt, de rest een paar keer per maand. */
.nxg-ui .nxg-jump--beheer .nxg-jump__toog {
	border-color: #FF9700;
	background: #FF9700;
	color: #1A1000;
	font-weight: 800;
}

.nxg-ui .nxg-jump--beheer .nxg-jump__toog:hover {
	color: #1A1000;
	filter: brightness( 1.08 );
}

/* ==================================================== het niveau */

/* De kleur komt per niveau uit PHP mee. Zo hoeft er geen klasse per
   niveau te bestaan en kan er later een niveau bij zonder dat hier iets
   moet veranderen. */
.nxg-niveau {
	margin: 0 0 1.25rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .18 ) );
	border-left: 3px solid var( --nxg-niveau-kleur, #6B7684 );
	border-radius: 12px;
	background:
		radial-gradient( 80% 130% at 0% 0%, color-mix( in srgb, var( --nxg-niveau-kleur, #6B7684 ) 12%, transparent ), transparent 70% ),
		rgba( 255, 255, 255, .025 );
}

.nxg-niveau__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .9rem;
	margin-bottom: .85rem;
}

.nxg-niveau__pil {
	padding: .25rem .9rem;
	border-radius: 999px;
	background: var( --nxg-niveau-kleur, #6B7684 );
	color: #08111C;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nxg-niveau__voordeel {
	flex: 1 1 12rem;
	color: var( --nxg-text, #DCE7F3 );
	font-size: .9rem;
}

/* Het balkje naar het volgende niveau. Mensen sparen sneller als ze
   zien dat ze er bijna zijn. */
.nxg-niveau__balk {
	height: .5rem;
	margin-bottom: .7rem;
	overflow: hidden;
	border-radius: 999px;
	background: rgba( 0, 0, 0, .35 );
}

.nxg-niveau__balk span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var( --nxg-niveau-kleur, #6B7684 );
}

.nxg-ui .nxg-niveau__uitleg {
	margin: 0;
	color: var( --nxg-heading, #FFFFFF );
	font-size: .92rem;
	font-weight: 600;
}

.nxg-ui .nxg-niveau__klein {
	margin: .5rem 0 0;
	color: var( --nxg-muted, #6B7684 );
	font-size: .82rem;
	line-height: 1.5;
}

/* Het teken bij een niveau. Meeschalend met de tekst, en in dezelfde
   kleur, zodat het één geheel blijft. */
.nxg-niveau__pil {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.nxg-niveau__teken {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
}

.nxg-niveau__pil .nxg-niveau__teken {
	width: 1.1em;
	height: 1.1em;
}

/* Waar je naartoe gaat, in de kleur van dat niveau. */
.nxg-niveau__doel {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	color: var( --nxg-niveau-doel, #6B7684 );
	font-weight: 800;
}

/* ============================================== uitleg over de punten */

.nxg-punten-uitleg .nxg-card {
	margin-bottom: 1.25rem;
	padding: 1.75rem;
}

/* Hoe je spaart: het getal groot links, de uitleg ernaast. */
.nxg-ui .nxg-uitleg__manieren {
	display: grid;
	gap: .75rem;
	margin: 1.25rem 0 1rem;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-uitleg__manieren li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem 1.25rem;
	margin: 0;
	padding: 1rem 1.15rem;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .18 ) );
	border-radius: 10px;
	background: rgba( 255, 255, 255, .025 );
	list-style: none;
}

.nxg-uitleg__hoeveel {
	flex: 0 0 auto;
	min-width: 7rem;
	color: var( --nxg-accent, #00C4F4 );
	font-size: 1.2rem;
	font-weight: 800;
	white-space: nowrap;
}

.nxg-uitleg__wat {
	flex: 1 1 14rem;
	color: var( --nxg-text, #DCE7F3 );
	font-size: .95rem;
	line-height: 1.55;
}

.nxg-ui .nxg-uitleg__klein {
	margin: 0;
	color: var( --nxg-muted, #6B7684 );
	font-size: .86rem;
	line-height: 1.6;
}

/* De niveaus onder elkaar, met het teken groot ervoor. */
.nxg-ui .nxg-uitleg__niveaus {
	display: grid;
	gap: .6rem;
	margin: 1.25rem 0 1rem;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-uitleg__niveaus li {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: .9rem 1.15rem;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .18 ) );
	border-left: 3px solid var( --nxg-niveau-kleur, #6B7684 );
	border-radius: 10px;
	background: rgba( 255, 255, 255, .025 );
	list-style: none;
}

.nxg-uitleg__teken {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: color-mix( in srgb, var( --nxg-niveau-kleur, #6B7684 ) 16%, transparent );
	color: var( --nxg-niveau-kleur, #6B7684 );
}

.nxg-uitleg__teken .nxg-niveau__teken {
	width: 1.4rem;
	height: 1.4rem;
}

.nxg-uitleg__niveau {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2rem .75rem;
	min-width: 0;
}

.nxg-uitleg__niveau strong {
	color: var( --nxg-niveau-kleur, #FFFFFF );
	font-size: 1.02rem;
	letter-spacing: .02em;
}

.nxg-uitleg__vanaf {
	color: var( --nxg-muted, #6B7684 );
	font-size: .82rem;
}

.nxg-uitleg__voordeel {
	flex: 1 1 100%;
	color: var( --nxg-text, #DCE7F3 );
	font-size: .9rem;
	line-height: 1.5;
}

/* De vragen. */
.nxg-uitleg__vragen {
	margin: 1.25rem 0 0;
}

.nxg-uitleg__vragen > div {
	padding: 1rem 0;
	border-bottom: 1px solid var( --nxg-line, rgba( 164, 180, 195, .14 ) );
}

.nxg-uitleg__vragen > div:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.nxg-ui .nxg-uitleg__vragen dt {
	margin: 0 0 .35rem;
	color: var( --nxg-heading, #FFFFFF );
	font-size: 1rem;
	font-weight: 700;
}

.nxg-ui .nxg-uitleg__vragen dd {
	margin: 0;
	color: var( --nxg-muted, #6B7684 );
	font-size: .92rem;
	line-height: 1.6;
}

.nxg-uitleg__slot {
	border-color: rgba( 0, 196, 244, .35 );
	background: rgba( 0, 196, 244, .06 );
}

/* De knop met de laatste boeking ernaast. Wie net iets gekocht heeft
   wil één ding weten: staat het erop. Dat hoort niet onderaan de pagina
   te staan. */
.nxg-lidkaart__rij {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .85rem 1.1rem;
	margin-top: 1rem;
}

.nxg-ui .nxg-lidkaart__knop {
	flex: 0 0 auto;
	padding: .45rem 1.2rem;
	border: 1px solid var( --nxg-line-strong, rgba( 164, 180, 195, .34 ) );
	border-radius: 999px;
	background: none;
	color: var( --nxg-text, #DCE7F3 );
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
}

/* De volle achtergrond bij hover vroeg om een donkere letter. Cyaan op
   cyaan las niet. */
.nxg-ui .nxg-lidkaart__knop:hover,
.nxg-ui .nxg-lidkaart__knop:focus-visible {
	border-color: var( --nxg-accent, #00C4F4 );
	background: var( --nxg-accent, #00C4F4 );
	color: #04121C;
	font-weight: 700;
}

.nxg-ui .nxg-lidkaart__knop[aria-busy="true"] {
	opacity: .5;
}

.nxg-ui .nxg-lidkaart__laatste {
	flex: 1 1 12rem;
	min-width: 0;
	margin: 0;
	padding-left: 1.1rem;
	border-left: 2px solid var( --nxg-line, rgba( 164, 180, 195, .2 ) );
}

.nxg-lidkaart__laatste-kop {
	display: block;
	color: var( --nxg-muted, #6B7684 );
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxg-lidkaart__laatste-kop strong {
	margin-left: .3rem;
	font-size: .95rem;
	letter-spacing: normal;
}

.nxg-lidkaart__laatste-kop strong[data-teken="plus"] {
	color: #12D176;
}

.nxg-lidkaart__laatste-kop strong[data-teken="min"] {
	color: #FF9700;
}

.nxg-lidkaart__laatste-wat {
	display: block;
	margin-top: .2rem;
	color: var( --nxg-text, #DCE7F3 );
	font-size: .92rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.nxg-lidkaart__laatste-wat span {
	display: block;
	color: var( --nxg-muted, #6B7684 );
	font-size: .78rem;
}



/* ============================================= alle boekingen */

.nxg-ui .nxg-lidkaart__alles {
	margin: .85rem 0 0;
}

.nxg-lidkaart__alles a {
	color: var( --nxg-accent, #00C4F4 );
	font-size: .88rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nxg-ui .nxg-historie__saldo {
	margin: 1rem 0 1.5rem;
	color: var( --nxg-heading, #FFFFFF );
	line-height: 1;
}

.nxg-historie__saldo strong {
	font-size: 2.1rem;
	font-weight: 800;
}

.nxg-historie__saldo span {
	color: var( --nxg-muted, #6B7684 );
	font-size: .95rem;
	font-weight: 600;
}

.nxg-ui .nxg-historie__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-historie__lijst li {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: .85rem 0;
	border-bottom: 1px solid var( --nxg-line, rgba( 164, 180, 195, .14 ) );
	list-style: none;
}

.nxg-ui .nxg-historie__lijst li:last-child {
	border-bottom: 0;
}

.nxg-historie__wat {
	flex: 1 1 auto;
	min-width: 0;
	color: var( --nxg-text, #DCE7F3 );
	font-size: .95rem;
}

.nxg-historie__wanneer {
	display: block;
	margin-top: .15rem;
	color: var( --nxg-muted, #6B7684 );
	font-size: .8rem;
}

.nxg-historie__lijst strong {
	flex: 0 0 auto;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
}

.nxg-historie__lijst strong[data-teken="plus"] {
	color: #12D176;
}

.nxg-historie__lijst strong[data-teken="min"] {
	color: #FF9700;
}

.nxg-historie__bladeren {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var( --nxg-line, rgba( 164, 180, 195, .16 ) );
}

.nxg-historie__bladeren a {
	color: var( --nxg-accent, #00C4F4 );
	font-size: .9rem;
	font-weight: 600;
}

.nxg-historie__terug {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var( --nxg-line, rgba( 164, 180, 195, .16 ) );
}


/* Datum en uur bij een boeking. Onder de omschrijving, zodat de bedragen
   rechts netjes onder elkaar blijven staan. */
.nxg-punt__wat {
	flex: 1 1 auto;
	min-width: 0;
}

.nxg-punt__wanneer {
	display: block;
	margin-top: .12rem;
	color: var( --nxg-muted, #6B7684 );
	font-size: .78rem;
}

.nxg-ui .nxg-punt__log li {
	align-items: flex-start;
}

/* De onderste regel van een blok: links de uitweg, rechts de teller. */
.nxg-deelname__voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6rem 1rem;
	margin-top: .9rem;
	padding-top: .85rem;
	border-top: 1px solid var( --nxg-line, rgba( 164, 180, 195, .14 ) );
}

.nxg-ui .nxg-deelname__voet .nxg-deelname__stop {
	margin: 0;
}

/* Staat er alleen een teller, dan hoort die ook rechts. */
.nxg-deelname__voet > .nxg-aftellen:only-child {
	margin-left: auto;
}

.nxg-deelname__voet .nxg-aftellen {
	margin-top: 0;
}


/* ======================================= beloningen bij de klant */

/* Een balkje dat volloopt tot wat de beloning kost. Zien dat je er bijna
   bent werkt beter dan lezen hoeveel je nog mist. */
.nxg-ui .nxg-beloningen--klant .nxg-beloning {
	align-items: center;
}

/* De foto in het midden naast de tekst. Met stretch werd hij naar boven
   getrokken en stond hij scheef tegenover het balkje. */
.nxg-beloningen--klant .nxg-beloning__foto {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

/* De foto volledig in beeld in plaats van bijgesneden.
   
   Met object-fit: cover werd een staande productfoto boven- en onderaan
   weggeknipt, en dan lijkt het product hoog te staan terwijl het vierkant
   zelf netjes gecentreerd is. Met contain zie je de hele foto, gecentreerd
   op een eigen plaatje, net als bij de releasekaarten. */
.nxg-ui .nxg-beloning__foto img {
	width: 3.5rem;
	height: 3.5rem;
	margin: 0;
	padding: .2rem;
	object-fit: contain;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .18 ) );
	border-radius: 8px;
	background: rgba( 3, 11, 21, .55 );
}

/* Geen foto? Dan een gekleurd vlak, zodat de rij niet rafelt. */
.nxg-beloning__foto--leeg {
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 8px;
	background:
		radial-gradient( 70% 90% at 30% 20%, rgba( 0, 196, 244, .3 ), transparent 70% ),
		rgba( 86, 77, 202, .28 );
}

.nxg-beloningen--klant .nxg-beloning__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .15rem .75rem;
	margin-bottom: .5rem;
}

.nxg-beloningen--klant .nxg-beloning__naam {
	font-size: 1rem;
}

.nxg-beloningen--klant .nxg-beloning__kost {
	flex: 0 0 auto;
	font-size: .88rem;
	white-space: nowrap;
}

.nxg-beloning__balk {
	height: .4rem;
	margin-bottom: .45rem;
	overflow: hidden;
	border-radius: 999px;
	background: rgba( 0, 0, 0, .35 );
}

.nxg-beloning__balk span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var( --nxg-accent, #00C4F4 );
}

.nxg-beloning[data-kan="ja"] .nxg-beloning__balk span {
	background: #12D176;
}

.nxg-beloningen--klant .nxg-beloning__staat {
	display: block;
	color: var( --nxg-muted, #6B7684 );
	font-size: .84rem;
	text-align: left;
}

.nxg-beloningen--klant .nxg-beloning[data-kan="ja"] .nxg-beloning__staat {
	color: #12D176;
	font-weight: 700;
}

@media (max-width: 520px) {
	.nxg-ui .nxg-beloningen--klant .nxg-beloning {
		gap: .8rem;
		padding: .8rem;
	}

	.nxg-ui .nxg-beloning__foto img,
	.nxg-beloning__foto--leeg {
		width: 2.75rem;
		height: 2.75rem;
	}
}


/* ================================= de kop van het evenementenblok */

/* De knop links, de tellers rechts. Zo staat de stand meteen naast de
   plek waar je naartoe gaat, in plaats van als losse balk bovenaan de
   pagina waar niemand ernaar kijkt. */
.nxg-eventkop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.5rem 0 0;
}

.nxg-ui .nxg-eventkop .nxg-stats {
	display: flex;
	flex: 0 1 auto;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
}

.nxg-ui .nxg-eventkop .nxg-stats li {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.nxg-eventkop .nxg-stats b {
	color: var( --nxg-heading, #FFFFFF );
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
}

.nxg-eventkop .nxg-stats span {
	color: var( --nxg-muted, #6B7684 );
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

@media (max-width: 560px) {
	.nxg-eventkop {
		gap: 1.1rem;
	}

	.nxg-ui .nxg-eventkop .nxg-stats {
		flex: 1 1 100%;
		justify-content: space-between;
		gap: 1rem;
	}

	.nxg-eventkop .nxg-stats b {
		font-size: 1.3rem;
	}
}

/* ====================================== de uitleg bij de lidkaart */

/* Het label links, het knopje rechts. Bescheiden gehouden: het is iets
   wat je één keer leest en daarna nooit meer nodig hebt, dus het mag de
   kaart niet overstemmen. */
.nxg-lidkaart__balk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
}

.nxg-ui .nxg-lidkaart__balk .nxg-card__label {
	margin: 0;
}

.nxg-ui .nxg-lidkaart__hoe {
	flex: 0 0 auto;
	padding: .3rem .85rem;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .22 ) );
	border-radius: 999px;
	color: var( --nxg-muted, #6B7684 );
	font-size: .78rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.nxg-ui .nxg-lidkaart__hoe:hover,
.nxg-ui .nxg-lidkaart__hoe:focus-visible {
	border-color: var( --nxg-accent, #00C4F4 );
	color: var( --nxg-accent, #00C4F4 );
}

/* ================================================= het verjaardagscadeau */

.nxg-ui .nxg-jarig {
	border-color: rgba( 255, 122, 24, .38 );
	background:
		radial-gradient( 80% 130% at 100% 0%, rgba( 255, 122, 24, .12 ), transparent 70% ),
		rgba( 255, 255, 255, .02 );
}

.nxg-ui .nxg-jarig .nxg-card__label {
	color: #FF7A18;
}

.nxg-ui .nxg-jarig__wanneer {
	margin: 0 0 1.25rem;
	color: var( --nxg-heading, #FFFFFF );
	font-size: 1rem;
	font-weight: 600;
}

.nxg-jarig__blok {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.75rem;
	padding: 1.5rem;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .18 ) );
	border-radius: 14px;
	background: rgba( 255, 255, 255, .02 );
}

/* De code op wit, met de stempel eroverheen zodra hij gebruikt is. */
.nxg-jarig__qr {
	position: relative;
	flex: 0 0 auto;
	width: 8.5rem;
	padding: 1rem;
	border-radius: 12px;
	background: #FFFFFF;
}

.nxg-jarig__qr svg {
	display: block;
	width: 100%;
	height: auto;
}

/* De stempel dekt het midden van de code af. Dat is niet alleen voor het
   oog: zo is de code ook echt niet meer te scannen. */
.nxg-jarig__stempel {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68%;
	height: auto;
	transform: translate( -50%, -50% ) rotate( -12deg );
	color: #D6263B;
	opacity: .92;
}

.nxg-jarig__qr[data-gebruikt] svg:first-child {
	opacity: .35;
}

.nxg-jarig__tekst {
	flex: 1 1 12rem;
	min-width: 0;
}

.nxg-ui .nxg-jarig__cadeau {
	margin: 0 0 .6rem;
	color: var( --nxg-heading, #FFFFFF );
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
}

.nxg-ui .nxg-jarig__uitleg {
	margin: 0;
	color: var( --nxg-muted, #6B7684 );
	font-size: .92rem;
	line-height: 1.6;
}

.nxg-ui .nxg-jarig__klein {
	margin: .6rem 0 0;
	color: var( --nxg-muted, #6B7684 );
	font-size: .82rem;
}

@media (max-width: 520px) {
	.nxg-jarig__blok {
		gap: 1.25rem;
		padding: 1.1rem;
	}

	.nxg-jarig__qr {
		width: 7.5rem;
	}
}


/* ============================ de datum in plaats van een leeg vlak */

/* Staat er geen foto bij een evenement of reservatie, dan komt de datum
   in dat vak. Net als op de kaarten in de kalender, in plaats van een
   gekleurd vlak dat niets zegt. */
.nxg-deelname__datum {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 5.5rem;
	border-radius: 10px;
	background:
		radial-gradient( 70% 90% at 30% 20%, color-mix( in srgb, var( --nxg-game-color, #00C4F4 ) 22%, transparent ), transparent 70% ),
		rgba( 3, 11, 21, .55 );
	text-align: center;
}

.nxg-deelname__dag {
	display: block;
	color: var( --nxg-heading, #FFFFFF );
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.nxg-deelname__maand {
	display: block;
	margin-top: .2rem;
	color: var( --nxg-game-color, var( --nxg-accent, #00C4F4 ) );
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* ===================================== de bezetting als balkje */

/* Overal waar er plaatsen zijn: een balkje in plaats van een zin. Je ziet
   meteen of je moet opschieten, zonder eerst te rekenen. */
.nxg-plaatsen {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-width: 7rem;
}

.nxg-plaatsen__balk {
	flex: 1 1 4rem;
	height: .4rem;
	min-width: 3rem;
	overflow: hidden;
	border-radius: 999px;
	background: rgba( 0, 0, 0, .35 );
}

.nxg-plaatsen__balk > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: #12D176;
}

.nxg-plaatsen[data-staat="bijna"] .nxg-plaatsen__balk > span {
	background: #FF9700;
}

.nxg-plaatsen[data-staat="vol"] .nxg-plaatsen__balk > span {
	background: #FF4581;
}

.nxg-plaatsen__tekst {
	flex: 0 0 auto;
	color: var( --nxg-text, #DCE7F3 );
	font-size: .82rem;
	font-variant-numeric: tabular-nums;
}

.nxg-plaatsen[data-staat="vol"] .nxg-plaatsen__tekst {
	color: #FF4581;
	font-weight: 700;
}

/* ============================================== mijn voorkeuren */

.nxg-ui .nxg-vk__intro {
	margin: 0 0 1.75rem;
	color: var( --nxg-muted, #6B7684 );
	font-size: .95rem;
}

/* Drie blokken onder elkaar met een lijntje ertussen: spellen,
   gegevens, berichten. Zonder die indeling is het één lange sliert
   velden. */
.nxg-vk__blok {
	padding-bottom: 1.75rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var( --nxg-line, rgba( 164, 180, 195, .14 ) );
}

.nxg-vk__blok--laatste {
	padding-bottom: 0;
	border-bottom: 0;
}

.nxg-ui .nxg-vk__kop {
	margin: 0 0 1rem;
	color: var( --nxg-heading, #FFFFFF );
	font-size: 1.05rem;
	font-weight: 700;
}

.nxg-vk__kop span {
	display: block;
	margin-top: .2rem;
	color: var( --nxg-muted, #6B7684 );
	font-size: .85rem;
	font-weight: 400;
	line-height: 1.5;
}

/* De legende is er voor schermlezers; op het scherm zegt de kop het al. */
.nxg-vk__legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* De spellen als vlakken in hun eigen kleur. */
.nxg-spellen {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

.nxg-spel {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .55rem 1rem .55rem .75rem;
	border: 1px solid var( --nxg-line-strong, rgba( 164, 180, 195, .3 ) );
	border-radius: 999px;
	background: rgba( 255, 255, 255, .02 );
	color: var( --nxg-text, #DCE7F3 );
	font-size: .92rem;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.nxg-spel:hover {
	border-color: var( --nxg-game-color, #00C4F4 );
}

.nxg-spel input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.nxg-spel__vink {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.15rem;
	height: 1.15rem;
	border: 2px solid var( --nxg-line-strong, rgba( 164, 180, 195, .35 ) );
	border-radius: 6px;
	background: transparent;
}

/* Het vinkje zelf, getekend met twee randen. */
.nxg-spel__vink::after {
	content: "";
	width: .3rem;
	height: .55rem;
	margin-top: -.15rem;
	border: solid #08111C;
	border-width: 0 2px 2px 0;
	opacity: 0;
	transform: rotate( 45deg );
}

.nxg-spel input:checked + .nxg-spel__vink {
	border-color: var( --nxg-game-color, #00C4F4 );
	background: var( --nxg-game-color, #00C4F4 );
}

.nxg-spel input:checked + .nxg-spel__vink::after {
	opacity: 1;
}

.nxg-spel:has( input:checked ) {
	border-color: var( --nxg-game-color, #00C4F4 );
	background: color-mix( in srgb, var( --nxg-game-color, #00C4F4 ) 12%, transparent );
	color: var( --nxg-heading, #FFFFFF );
	font-weight: 600;
}

.nxg-spel:has( input:focus-visible ) {
	outline: 2px solid var( --nxg-game-color, #00C4F4 );
	outline-offset: 2px;
}

/* Een schakelaar in plaats van een vinkje voor de kalenderkeuze. */
.nxg-schakel {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	cursor: pointer;
}

.nxg-schakel input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.nxg-schakel__knop {
	flex: 0 0 auto;
	position: relative;
	width: 2.75rem;
	height: 1.5rem;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .12 );
	transition: background .15s;
}

.nxg-schakel__knop::after {
	content: "";
	position: absolute;
	top: .2rem;
	left: .2rem;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: #FFFFFF;
	transition: transform .15s;
}

.nxg-schakel input:checked + .nxg-schakel__knop {
	background: var( --nxg-accent, #00C4F4 );
}

.nxg-schakel input:checked + .nxg-schakel__knop::after {
	transform: translateX( 1.25rem );
}

.nxg-schakel input:focus-visible + .nxg-schakel__knop {
	outline: 2px solid var( --nxg-accent, #00C4F4 );
	outline-offset: 2px;
}

.nxg-schakel__tekst {
	color: var( --nxg-text, #DCE7F3 );
	font-size: .92rem;
	line-height: 1.4;
}

.nxg-ui .nxg-vk__bewaren {
	margin: 0;
}

.nxg-vk__bewaren .nxg-btn {
	min-height: 52px;
	padding-inline: 2.25rem;
}

/* ================================================== de nieuwsbrief */

/* Eén schakelaar die beide kanten op werkt. Vroeger stond hier een vinkje
   om je in te schrijven en een link naar een andere pagina om je uit te
   schrijven: twee keer iets anders voor dezelfde keuze. */
.nxg-brief {
	padding: 1.15rem 1.25rem;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .18 ) );
	border-radius: 12px;
	background: rgba( 255, 255, 255, .02 );
	transition: border-color .15s, background .15s;
}

.nxg-brief[data-aan] {
	border-color: rgba( 18, 209, 118, .35 );
	background: rgba( 18, 209, 118, .06 );
}

.nxg-brief__schakel {
	align-items: flex-start;
}

.nxg-brief__schakel .nxg-schakel__knop {
	margin-top: .15rem;
}

.nxg-brief__schakel .nxg-schakel__tekst strong {
	display: block;
	color: var( --nxg-heading, #FFFFFF );
	font-size: 1rem;
}

.nxg-brief__schakel .nxg-schakel__tekst > span {
	display: block;
	margin-top: .2rem;
	color: var( --nxg-muted, #6B7684 );
	font-size: .88rem;
	line-height: 1.5;
}

.nxg-brief[data-aan] .nxg-schakel input:checked + .nxg-schakel__knop {
	background: #12D176;
}

.nxg-brief__staat {
	margin-top: 1rem;
	padding-top: .9rem;
	border-top: 1px solid var( --nxg-line, rgba( 164, 180, 195, .16 ) );
}

.nxg-ui .nxg-brief__sinds {
	margin: 0 0 .35rem;
	color: var( --nxg-text, #DCE7F3 );
	font-size: .88rem;
	font-weight: 600;
}

.nxg-ui .nxg-brief__klein {
	margin: 0;
	color: var( --nxg-muted, #6B7684 );
	font-size: .82rem;
	line-height: 1.55;
}

/* Nog te bevestigen: oranje, want er moet nog iets gebeuren. */
.nxg-brief[data-wacht] {
	border-color: rgba( 255, 151, 0, .38 );
	background: rgba( 255, 151, 0, .07 );
}

.nxg-brief[data-wacht] .nxg-schakel input:checked + .nxg-schakel__knop {
	background: #FF9700;
}

/* De kaart voor een deelnamebeloning: dezelfde vorm als het
   verjaardagscadeau, maar in het cyaan van de site zodat je de twee uit
   elkaar houdt. */
.nxg-ui .nxg-beloning-kaart {
	border-color: rgba( 0, 196, 244, .38 );
	background:
		radial-gradient( 80% 130% at 100% 0%, rgba( 0, 196, 244, .12 ), transparent 70% ),
		rgba( 255, 255, 255, .02 );
}

.nxg-ui .nxg-beloning-kaart .nxg-card__label {
	color: var( --nxg-accent, #00C4F4 );
}

.nxg-beloning-kaart .nxg-jarig__stempel {
	color: #00A6CF;
}


/* ================== de snelnavigatie op een smal of ingezoomd scherm */

/* Het thema heeft een kopbalk met een groot logo dat blijft plakken. Onze
   navigatie plakt ook, en dan schuiven de twee over elkaar zodra het
   scherm smal wordt: bij inzoomen, en op een telefoon in liggende stand.

   Onder de 1100 pixels laten we het plakken los en breken de knoppen
   gewoon af naar een volgende regel.

   Deze regels staan met opzet onderaan het bestand: wat later komt,
   wint. Stonden ze hoger, dan zou een latere regel het plakken weer
   aanzetten. Dat is precies wat er eerder misging. */
@media (max-width: 1100px) {
	.nxg-ui .nxg-jump,
	.nxg-ui .nxg-jump--beheer {
		position: static;
		flex-wrap: wrap;
		overflow-x: visible;
		border-radius: 16px;
	}
}

/* ============================================ de cadeaus bij elkaar */

/* Eerst stonden de verjaardag en de deelnamebeloningen als losse kaarten
   boven de punten. Dan schuift het saldo naar beneden zodra er iets
   klaarstaat, en dat is net wat mensen het vaakst komen bekijken. */
.nxg-cadeaus {
	scroll-margin-top: 5rem;
}

/* De kaarten zitten nu in een blok en erven de ruimte van de stapel
   niet meer. Zonder deze regel plakken ze tegen elkaar. */
.nxg-cadeaus > .nxg-card + .nxg-card {
	margin-top: 1.25rem;
}

.nxg-cadeaus > .nxg-card:last-child {
	margin-bottom: 0;
}

.nxg-ui .nxg-cadeaus__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .85rem;
	margin: 0 0 1rem;
	color: var( --nxg-heading, #FFFFFF );
	font-size: 1.15rem;
}

.nxg-cadeaus__teller {
	padding: .2rem .75rem;
	border-radius: 999px;
	background: rgba( 255, 69, 129, .16 );
	color: #FF4581;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .04em;
}

/* Het rode bolletje in het snelmenu. Een cadeau dat je niet ziet, is
   hetzelfde als geen cadeau. */
.nxg-jump__teller {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.15rem;
	height: 1.15rem;
	margin-left: .4rem;
	padding: 0 .3rem;
	border-radius: 999px;
	background: #FF4581;
	color: #FFFFFF;
	font-size: .7rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* De knop zelf mag ook opvallen zolang er iets klaarstaat. */
.nxg-ui .nxg-jump a:has( .nxg-jump__teller ) {
	border-color: rgba( 255, 69, 129, .5 );
	color: var( --nxg-heading, #FFFFFF );
}

/* ============================ de voorbereidingsstand */

/* Een balk bovenaan elke pagina zolang er nog niets ingeschreven kan
   worden. Zonder die balk lijkt een site waarop je niets kan doen gewoon
   stuk. */
/* De balk staat onderaan het scherm, op elk formaat.

   Bovenaan botst ze altijd met de kopbalk: die staat bij dit thema over de
   bovenkant van de pagina heen. Leg je de balk erboven, dan bedekt ze het
   logo; leg je ze eronder, dan zie je ze niet. Onderaan is er wel plaats,
   en daar blijft ze in beeld terwijl je scrolt. */
.nxg-voorbereiding {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
	padding: .7rem 1.25rem;
	background: linear-gradient( 90deg, #00C4F4, #564DCA );
	box-shadow: 0 -6px 20px rgba( 0, 0, 0, .35 );
	color: #FFFFFF;
	font-size: .9rem;
	line-height: 1.45;
	text-align: center;
}

/* Ruimte onderaan de pagina, zodat de balk nooit over de laatste knop of
   over de voettekst valt. */
body:has( .nxg-voorbereiding ) {
	padding-bottom: 4rem;
}

@media (max-width: 991px) {
	.nxg-voorbereiding {
		padding: .65rem 1rem;
		font-size: .84rem;
	}

	body:has( .nxg-voorbereiding ) {
		padding-bottom: 4.75rem;
	}
}

.nxg-voorbereiding span {
	font-weight: 800;
	letter-spacing: .02em;
}

.nxg-voorbereiding span::after {
	content: " · ";
	opacity: .6;
}

/* Het blok dat in de plaats van een formulier komt. */
.nxg-ui .nxg-binnenkort {
	margin: 1.5rem 0 0;
	padding: 1.5rem 1.6rem;
	border: 1px dashed var( --nxg-line-strong, rgba( 164, 180, 195, .3 ) );
	border-radius: 12px;
	background: rgba( 255, 255, 255, .02 );
	text-align: center;
}

.nxg-binnenkort__kop {
	margin: 0 0 .5rem;
	color: var( --nxg-heading, #FFFFFF );
	font-size: 1.15rem;
	font-weight: 700;
}

.nxg-ui .nxg-binnenkort p:last-child {
	margin: 0;
	color: var( --nxg-muted, #8B99AC );
	line-height: 1.6;
}