/**
 * De kamerpagina.
 *
 * Een andere sfeer dan de rest van de site: warmer, met perkament en goud
 * in plaats van cyaan en violet. Dat is met opzet, want dit is één ruimte
 * met een eigen karakter en geen zoveelste formulier.
 *
 * De kleuren blijven wel binnen dezelfde donkere achtergrond, zodat het
 * bij de site hoort en er niet uitspringt als een vreemde pagina.
 */

.nxg-dnd {
	--dnd-goud: #C9A227;
	--dnd-goud-licht: #E8C766;
	--dnd-rood: #8C2F26;
	--dnd-perkament: #E8DCC0;
	--dnd-diep: #120E09;
	--dnd-paneel: #1A140D;
	--dnd-lijn: rgba( 201, 162, 39, .26 );
}

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

.nxg-dnd__kop {
	position: relative;
	margin-bottom: 1.25rem;
	padding: 2.75rem 1.75rem 2.25rem;
	overflow: hidden;
	border: 1px solid var( --dnd-lijn );
	border-radius: 14px;
	background:
		radial-gradient( 90% 130% at 50% 0%, rgba( 201, 162, 39, .1 ), transparent 62% ),
		var( --dnd-paneel );
	text-align: center;
}

/* Met een foto vervalt de binnenmarge: de foto gaat tot de rand. */
.nxg-dnd__kop[data-foto] {
	padding: 0;
}

.nxg-dnd__foto {
	position: relative;
	aspect-ratio: 21 / 9;
	overflow: hidden;
}

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

/* Een verloop over de onderkant van de foto, zodat de tekst eronder
   aansluit in plaats van er los op te liggen. */
.nxg-dnd__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 18, 14, 9, .1 ) 40%, var( --dnd-paneel ) 100% );
}

.nxg-dnd__kop-tekst {
	position: relative;
	margin-top: -2.5rem;
	padding: 0 1.75rem 2.25rem;
}

@media (max-width: 600px) {
	.nxg-dnd__foto {
		aspect-ratio: 16 / 10;
	}

	.nxg-dnd__kop-tekst {
		margin-top: -1.5rem;
		padding: 0 1.15rem 1.75rem;
	}
}

.nxg-dnd__zegel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	margin-bottom: 1rem;
	border: 1px solid var( --dnd-lijn );
	border-radius: 50%;
	background: rgba( 201, 162, 39, .1 );
	color: var( --dnd-goud-licht );
}

.nxg-dnd__zegel svg {
	width: 32px;
	height: 32px;
}

.nxg-ui .nxg-dnd__titel {
	margin: 0 0 .65rem;
	color: var( --dnd-perkament );
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp( 1.9rem, 4vw, 2.75rem );
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.1;
}

.nxg-dnd__intro {
	max-width: 38rem;
	margin: 0 auto;
	color: #B9AE95;
	font-size: 1rem;
	line-height: 1.65;
}

/* De feiten onder de titel: plaatsen, duur, prijs. */
.nxg-ui .nxg-dnd__feiten {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem 0;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-dnd__feiten li + li {
	border-left: 1px solid rgba( 201, 162, 39, .2 );
}

.nxg-ui .nxg-dnd__feiten li {
	margin: 0;
	padding: 0 1.5rem;
	list-style: none;
}

.nxg-dnd__feiten strong {
	display: block;
	color: var( --dnd-goud-licht );
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.35rem;
	line-height: 1.25;
}

.nxg-dnd__feiten span {
	color: #8D8371;
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

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

.nxg-dnd__melding {
	margin: 0 0 1.5rem;
	padding: .9rem 1.15rem;
	border: 1px solid var( --dnd-lijn );
	border-left: 3px solid var( --dnd-goud );
	border-radius: 10px;
	background: rgba( 201, 162, 39, .07 );
	color: var( --dnd-perkament );
}

.nxg-dnd__melding[data-soort="let"] {
	border-left-color: var( --dnd-rood );
	background: rgba( 140, 47, 38, .12 );
}

/* ------------------------------------------------------- het formulier */

/* De blokken vormen samen één paneel met dunne scheidingen ertussen, in
   plaats van drie losse dozen onder elkaar. Dat oogt rustiger en houdt de
   stappen bij elkaar. */
.nxg-dnd__form {
	border: 1px solid var( --dnd-lijn );
	border-radius: 14px;
	background: var( --dnd-paneel );
	overflow: hidden;
}

.nxg-dnd__blok {
	margin: 0;
	padding: 1.5rem 1.6rem 1.4rem;
	border: 0;
	border-radius: 0;
	background: none;
}

.nxg-dnd__blok + .nxg-dnd__blok {
	border-top: 1px solid rgba( 201, 162, 39, .14 );
}

.nxg-dnd__label {
	margin: 0 0 1rem;
	color: var( --dnd-goud );
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------ de dagen */

.nxg-dnd__dagen {
	display: flex;
	gap: .75rem;
	overflow-x: auto;
	padding: .25rem .25rem 1rem;
	scroll-snap-type: x proximity;
}

/* De dagtegels mogen tot tegen de rand van het paneel schuiven, anders
   lijkt de rij eerder te stoppen dan ze doet. */
.nxg-dnd__dagen::after {
	content: "";
	flex: 0 0 .25rem;
}

.nxg-dnd__dagen .nxg-dnd__dag {
	scroll-snap-align: start;
}

.nxg-dnd__dag {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .1rem;
	width: 4.6rem;
	padding: .85rem .5rem .75rem;
	border: 1px solid rgba( 201, 162, 39, .18 );
	border-radius: 10px;
	background: rgba( 255, 255, 255, .02 );
	cursor: pointer;
	transition: border-color .15s, background .15s, transform .15s;
}

/* Het bolletje zelf weg: de hele tegel is de knop. */
.nxg-dnd__dag input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.nxg-dnd__dag:hover {
	border-color: rgba( 201, 162, 39, .5 );
	transform: translateY( -1px );
}

.nxg-dnd__dag:has( input:checked ) {
	border-color: var( --dnd-goud );
	background: rgba( 201, 162, 39, .14 );
}

/* Voor wie met het toetsenbord werkt. */
.nxg-dnd__dag:has( input:focus-visible ) {
	outline: 2px solid var( --dnd-goud-licht );
	outline-offset: 2px;
}

.nxg-dnd__dag-naam {
	color: #8D8371;
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nxg-dnd__dag-cijfer {
	color: var( --dnd-perkament );
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.35rem;
	line-height: 1.1;
}

.nxg-dnd__dag:has( input:checked ) .nxg-dnd__dag-cijfer {
	color: var( --dnd-goud-licht );
}

.nxg-dnd__dag-maand {
	color: #8D8371;
	font-size: .68rem;
	text-transform: lowercase;
}

/* --------------------------------------------------------- de tijdbalk */

.nxg-dnd__balk {
	margin-bottom: .5rem;
}

/* De balk als een gang: donkere steen, met de open uren als verlichte
   stukken en jouw keuze als het licht van een fakkel. */
.nxg-dnd__spoor {
	position: relative;
	height: 3.25rem;
	overflow: hidden;
	border: 1px solid rgba( 201, 162, 39, .14 );
	border-radius: 8px;
	background:
		repeating-linear-gradient(
			90deg,
			rgba( 255, 255, 255, .022 ) 0,
			rgba( 255, 255, 255, .022 ) 1px,
			transparent 1px,
			transparent 22px
		),
		rgba( 0, 0, 0, .3 );
}

/* De uren waarop de winkel open is. */
.nxg-dnd__open {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 6px;
	background:
		linear-gradient( 180deg, rgba( 201, 162, 39, .2 ), rgba( 201, 162, 39, .1 ) );
	box-shadow: inset 0 0 0 1px rgba( 201, 162, 39, .18 );
}

/* Wat al geboekt is, als ruwe steen die de gang afsluit. Een aanvraag die
   nog niet bevestigd is, staat lichter gestreept: die ruimte is nog niet
   zeker weg. */
.nxg-dnd__bezet {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 6px;
	background: repeating-linear-gradient(
		45deg,
		rgba( 140, 47, 38, .7 ),
		rgba( 140, 47, 38, .7 ) 6px,
		rgba( 110, 36, 29, .7 ) 6px,
		rgba( 110, 36, 29, .7 ) 12px
	);
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .35 );
}

.nxg-dnd__bezet[data-status="aangevraagd"] {
	background: repeating-linear-gradient(
		45deg,
		rgba( 140, 47, 38, .5 ),
		rgba( 140, 47, 38, .5 ) 5px,
		rgba( 140, 47, 38, .22 ) 5px,
		rgba( 140, 47, 38, .22 ) 10px
	);
}

/* De balk is sleepbaar: over het spoor slepen kiest een nieuw stuk. */
.nxg-dnd__spoor {
	cursor: crosshair;
	touch-action: none;
	user-select: none;
}

.nxg-dnd__spoor.is-sleep {
	cursor: grabbing;
}

/* Jouw keuze, met een handvat aan elke kant. */
.nxg-dnd__keuze {
	position: absolute;
	top: -3px;
	bottom: -3px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid var( --dnd-goud-licht );
	border-radius: 7px;
	background: linear-gradient( 180deg, rgba( 232, 199, 102, .62 ), rgba( 201, 162, 39, .5 ) );
	/* Het schijnsel van een fakkel: een warme gloed rond je uren. */
	box-shadow:
		0 0 0 1px rgba( 18, 14, 9, .6 ),
		0 0 14px rgba( 201, 162, 39, .45 );
}

/* Geen overgang tijdens het slepen: anders loopt het blok achter je
   vinger aan in plaats van eronder te blijven. */
.nxg-dnd__spoor:not( .is-sleep ) .nxg-dnd__keuze {
	transition: left .12s, width .12s;
}

/* De uren midden in het gekozen stuk, zolang er plaats voor is. */
.nxg-dnd__keuze-uren {
	flex: 1;
	overflow: hidden;
	color: #1B1405;
	font-size: .72rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
	white-space: nowrap;
}

/* De handvatten: breed genoeg om met een vinger te pakken. */
.nxg-dnd__greep {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 100%;
	border-radius: 6px;
	background: var( --dnd-goud-licht );
	cursor: ew-resize;
	touch-action: none;
}

/* Twee streepjes in het handvat, zodat je ziet dat je het kan pakken. */
.nxg-dnd__greep::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4px;
	height: 12px;
	transform: translate( -50%, -50% );
	border-left: 1px solid rgba( 27, 20, 5, .5 );
	border-right: 1px solid rgba( 27, 20, 5, .5 );
}

.nxg-dnd__greep:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

/* Op een smalle balk past de tekst niet meer; dan blijven de handvatten
   over en staat de duur eronder al. */
@media (max-width: 480px) {
	.nxg-dnd__keuze-uren {
		display: none;
	}
}

.nxg-dnd__sleep {
	margin: .6rem 0 0;
	color: #7C7361;
	font-size: .8rem;
}

.nxg-dnd__schaal {
	position: relative;
	height: 1.25rem;
	margin-top: .3rem;
}

.nxg-dnd__schaal span {
	position: absolute;
	transform: translateX( -50% );
	color: #9A907B;
	font-size: .72rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
	white-space: nowrap;
}

/* De legende onder de balk. Elk item staat in een eigen vakje met een
   kleurstaal ervoor, zodat de woorden niet aan elkaar plakken. */
.nxg-ui .nxg-dnd__legende {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .9rem 0 0;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-dnd__legende li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: .3rem .75rem .3rem .55rem;
	border: 1px solid rgba( 201, 162, 39, .2 );
	border-radius: 999px;
	background: rgba( 255, 255, 255, .02 );
	color: #9A907B;
	font-size: .76rem;
	letter-spacing: .02em;
	list-style: none;
}

.nxg-dnd__vlag {
	display: inline-block;
	width: .85rem;
	height: .85rem;
	border-radius: 3px;
}

.nxg-dnd__vlag[data-soort="vrij"] {
	background: rgba( 201, 162, 39, .22 );
	box-shadow: inset 0 0 0 1px rgba( 201, 162, 39, .35 );
}

/* Ingenomen krijgt dezelfde steenstructuur als in de balk. */
.nxg-dnd__vlag[data-soort="bezet"] {
	background: repeating-linear-gradient(
		45deg,
		rgba( 140, 47, 38, .75 ),
		rgba( 140, 47, 38, .75 ) 3px,
		rgba( 140, 47, 38, .4 ) 3px,
		rgba( 140, 47, 38, .4 ) 6px
	);
}

/* En jouw uren gloeien, zoals de fakkel in de balk. */
.nxg-dnd__vlag[data-soort="keuze"] {
	background: var( --dnd-goud );
	box-shadow: 0 0 6px rgba( 201, 162, 39, .7 );
}

/* ------------------------------------------------------------- de uren */

/* Knoppen in plaats van keuzelijsten. Aan een telefoon tik je liever op een
   uur dan dat je door een lijst scrolt, en je ziet in één blik welke uren
   er zijn. Wat niet kan, staat er niet tussen. */
.nxg-dnd__tijd {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 720px) {
	.nxg-dnd__tijd {
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}
}

.nxg-dnd__tijd-kop {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 .65rem;
	color: #8D8371;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.nxg-dnd__pillen {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	max-height: 13.5rem;
	overflow-y: auto;
	padding: .2rem;
	scrollbar-width: thin;
}

.nxg-dnd__pil {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .15rem;
	min-width: 5rem;
	min-height: 3.4rem;
	padding: .6rem .75rem .55rem;
	border: 1px solid rgba( 201, 162, 39, .2 );
	border-radius: 9px;
	background: rgba( 255, 255, 255, .02 );
	cursor: pointer;
	transition: border-color .12s, background .12s;
}

.nxg-dnd__pil input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.nxg-dnd__pil span {
	color: var( --dnd-perkament );
	font-size: .98rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

/* De duur onder het uur, met een dun lijntje ertussen zodat de twee
   getallen niet aan elkaar plakken. */
.nxg-dnd__pil em {
	width: 100%;
	padding-top: .2rem;
	border-top: 1px solid rgba( 201, 162, 39, .14 );
	color: #7C7361;
	font-size: .68rem;
	font-style: normal;
	line-height: 1.3;
	text-align: center;
}

.nxg-dnd__pil:has( input:checked ) em {
	border-top-color: rgba( 201, 162, 39, .32 );
	color: #B9AE95;
}

.nxg-dnd__pil:hover {
	border-color: rgba( 201, 162, 39, .5 );
	background: rgba( 201, 162, 39, .06 );
}

.nxg-dnd__pil:has( input:checked ) {
	border-color: var( --dnd-goud );
	background: rgba( 201, 162, 39, .18 );
}

.nxg-dnd__pil:has( input:checked ) span {
	color: var( --dnd-goud-licht );
	font-weight: 700;
}

.nxg-dnd__pil:has( input:focus-visible ) {
	outline: 2px solid var( --dnd-goud-licht );
	outline-offset: 2px;
}

.nxg-dnd__geen {
	margin: 0;
	padding: .75rem .25rem;
	color: #7C7361;
	font-size: .88rem;
}

/* De duur naast het kopje "Tot". */
.nxg-dnd__duur {
	padding: .2rem .6rem;
	border-radius: 999px;
	background: rgba( 201, 162, 39, .14 );
	color: var( --dnd-goud-licht );
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.nxg-dnd__duur:empty {
	display: none;
}

/* ------------------------------------------------------- de hele dag */

.nxg-dnd__heledag {
	margin: 0 0 1.15rem;
}

.nxg-dnd__heledag button {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1.1rem;
	border: 1px dashed rgba( 201, 162, 39, .45 );
	border-radius: 999px;
	background: none;
	color: var( --dnd-goud-licht );
	font: inherit;
	font-size: .88rem;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}

.nxg-dnd__heledag button:hover {
	border-color: var( --dnd-goud );
	background: rgba( 201, 162, 39, .1 );
}

.nxg-dnd__heledag span {
	color: #9A907B;
	font-variant-numeric: tabular-nums;
}

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

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

.nxg-dnd__veld {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.nxg-dnd__veld--breed {
	margin-top: 1rem;
}

.nxg-dnd label,
.nxg-dnd__uur label,
.nxg-dnd__veld label {
	color: #8D8371;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nxg-dnd input[type="text"],
.nxg-dnd input[type="email"],
.nxg-dnd input[type="tel"],
.nxg-dnd input[type="number"],
.nxg-dnd select,
.nxg-dnd textarea {
	width: 100%;
	min-height: 48px;
	padding: .65rem .85rem;
	border: 1px solid var( --dnd-lijn );
	border-radius: 9px;
	background: rgba( 8, 6, 4, .55 );
	color: var( --dnd-perkament );
	font: inherit;
	font-size: 1rem;
}

.nxg-dnd textarea {
	min-height: auto;
	line-height: 1.55;
	resize: vertical;
}

.nxg-dnd input:focus,
.nxg-dnd select:focus,
.nxg-dnd textarea:focus {
	border-color: var( --dnd-goud );
	outline: none;
}

.nxg-dnd input::placeholder,
.nxg-dnd textarea::placeholder {
	color: rgba( 185, 174, 149, .45 );
}

/* ---------------------------------------------------------- de knop */

.nxg-dnd__verzend {
	margin: 0;
	padding: 1.5rem 1.6rem;
	border-top: 1px solid rgba( 201, 162, 39, .14 );
	background: rgba( 201, 162, 39, .04 );
	text-align: center;
}

.nxg-dnd__verzend button {
	min-width: 15rem;
	padding: .85rem 2rem;
	border: 1px solid var( --dnd-goud );
	border-radius: 8px;
	background: var( --dnd-goud );
	color: #171105;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background .15s, box-shadow .15s;
}

.nxg-dnd__verzend button:hover {
	background: var( --dnd-goud-licht );
	box-shadow: 0 6px 20px rgba( 201, 162, 39, .22 );
}

.nxg-dnd__klein {
	margin: 0;
	padding: 0 1.6rem 1.5rem;
	color: #8D8371;
	font-size: .82rem;
	text-align: center;
}

/* De waarschuwing binnen een blok staat links, niet gecentreerd. */
.nxg-dnd__blok .nxg-dnd__klein {
	margin-top: .75rem;
	padding: 0;
	text-align: left;
}

.nxg-dnd__leeg {
	padding: 2rem;
	border: 1px dashed var( --dnd-lijn );
	border-radius: 12px;
	color: #8D8371;
	text-align: center;
}

/* --------------------------------------------------------- op een gsm */

@media (max-width: 600px) {
	.nxg-dnd__kop {
		padding: 2rem 1.15rem 1.75rem;
	}

	.nxg-dnd__blok {
		padding: 1.15rem 1.15rem 1rem;
	}

	.nxg-dnd__feiten {
		gap: .85rem 1.75rem;
	}

	.nxg-dnd__uren {
		gap: .75rem;
	}

	.nxg-dnd__uur {
		flex: 1 1 8rem;
	}

	.nxg-dnd__verzend button {
		width: 100%;
		min-width: 0;
	}
}


/* ------------------------------------------------- de schuifbalken */

/* De standaardbalk van de browser is grijs en springt eruit op een
   donkere pagina in goudtinten. Deze volgt het thema. */
.nxg-dnd__dagen,
.nxg-dnd__pillen {
	scrollbar-width: thin;
	scrollbar-color: rgba( 201, 162, 39, .45 ) rgba( 255, 255, 255, .04 );
}

.nxg-dnd__dagen::-webkit-scrollbar,
.nxg-dnd__pillen::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.nxg-dnd__dagen::-webkit-scrollbar-track,
.nxg-dnd__pillen::-webkit-scrollbar-track {
	border-radius: 999px;
	background: rgba( 255, 255, 255, .04 );
}

.nxg-dnd__dagen::-webkit-scrollbar-thumb,
.nxg-dnd__pillen::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: rgba( 201, 162, 39, .45 );
}

.nxg-dnd__dagen::-webkit-scrollbar-thumb:hover,
.nxg-dnd__pillen::-webkit-scrollbar-thumb:hover {
	background: rgba( 201, 162, 39, .7 );
}

/* --------------------------------------------- de samenvatting */

/* Vlak voor de knop nog eens wat er gereserveerd wordt. Wie tot hier
   gescrold heeft, ziet de balk niet meer staan. */
.nxg-dnd__samen {
	margin: 0;
	padding: 1.35rem 1.6rem;
	border-top: 1px solid rgba( 201, 162, 39, .14 );
	background: rgba( 201, 162, 39, .05 );
}

.nxg-dnd__samen-kop {
	margin: 0 0 .85rem;
	color: var( --dnd-goud );
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.nxg-dnd__samen-rij {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem 0;
}

.nxg-dnd__samen-deel {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: 0 1.5rem;
}

.nxg-dnd__samen-deel:first-child {
	padding-left: 0;
}

.nxg-dnd__samen-deel + .nxg-dnd__samen-deel {
	border-left: 1px solid rgba( 201, 162, 39, .2 );
}

.nxg-dnd__samen-label {
	color: #8D8371;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.nxg-dnd__samen-deel strong {
	color: var( --dnd-perkament );
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.1rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1.25;
}

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

	.nxg-dnd__samen-deel {
		flex: 1 1 45%;
		padding: 0 .75rem;
	}

	/* Op twee kolommen hoort de derde weer links te beginnen. */
	.nxg-dnd__samen-deel:nth-child( odd ) {
		padding-left: 0;
		border-left: 0;
	}
}

/* Een kleine hint onder een veld, zoals het maximum aantal personen. */
.nxg-dnd__hint {
	color: #7C7361;
	font-size: .74rem;
}

/* ============================================ meer sfeer op de pagina */

/* Een perkamentachtige structuur onder de panelen. Geen afbeelding maar
   twee heel zachte verlopen: dat laadt niets bij en blijft scherp op elk
   scherm. */
.nxg-dnd__kop,
.nxg-dnd__form {
	background-image:
		radial-gradient( 40% 60% at 15% 0%, rgba( 201, 162, 39, .05 ), transparent 70% ),
		radial-gradient( 45% 55% at 85% 100%, rgba( 140, 47, 38, .05 ), transparent 70% );
	background-color: var( --dnd-paneel );
}

/* Hoekversieringen op de kop: vier korte gouden haakjes, zoals de
   beslagen hoeken van een oud boek. */
.nxg-dnd__kop::before,
.nxg-dnd__kop::after {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	border: 1px solid rgba( 201, 162, 39, .45 );
	pointer-events: none;
}

.nxg-dnd__kop::before {
	top: 10px;
	left: 10px;
	border-right: 0;
	border-bottom: 0;
	border-radius: 6px 0 0 0;
}

.nxg-dnd__kop::after {
	right: 10px;
	bottom: 10px;
	border-top: 0;
	border-left: 0;
	border-radius: 0 0 6px 0;
}

/* Met een foto staan die haakjes in de weg. */
.nxg-dnd__kop[data-foto]::before,
.nxg-dnd__kop[data-foto]::after {
	display: none;
}

/* De sierlijn tussen de kop en het formulier. */
.nxg-dnd__sier {
	display: flex;
	justify-content: center;
	margin: 0 0 1.25rem;
	color: rgba( 201, 162, 39, .55 );
}

.nxg-dnd__sier svg {
	width: 13rem;
	height: auto;
}

/* Het stapnummer in Romeinse cijfers, in een ruitje voor het label.
   Het ruitje is een vierkantje op zijn kant; het cijfer erin draait terug,
   anders staat het scheef. */
.nxg-dnd__label {
	display: flex;
	align-items: center;
}

.nxg-dnd__stap {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-right: .8rem;
	border: 1px solid rgba( 201, 162, 39, .45 );
	border-radius: 3px;
	background: rgba( 201, 162, 39, .1 );
	transform: rotate( 45deg );
}

.nxg-dnd__stap i {
	display: block;
	color: var( --dnd-goud-licht );
	font-family: Georgia, 'Times New Roman', serif;
	font-size: .7rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	transform: rotate( -45deg );
}

/* ==================================================== donkerder maken */

/* De pagina zelf dieper en kouder, met een vignet naar de randen toe. Een
   kelder is donker aan de zijkanten en licht waar de fakkel hangt. */
.nxg-dnd {
	position: relative;
	/* Niets mag buiten de pagina steken. Zonder deze regel kon je op een
	   telefoon naar rechts schuiven naar lege ruimte. */
	overflow-x: clip;
}

/* Het vignet staat vast aan het scherm in plaats van aan de pagina. Het
   liep eerder met een negatieve marge tot buiten de randen, en dat is
   precies wat een telefoon breder maakt dan hij is. */
.nxg-dnd::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient( 55% 45% at 50% 0%, rgba( 201, 162, 39, .07 ), transparent 70% ),
		radial-gradient( 120% 90% at 50% 40%, transparent 35%, rgba( 0, 0, 0, .55 ) 100% );
	pointer-events: none;
}

/* De panelen krijgen een zwaardere schaduw en een koude rand onderaan,
   alsof ze uit de muur steken. */
.nxg-dnd__kop,
.nxg-dnd__form {
	border-bottom-color: rgba( 0, 0, 0, .5 );
	box-shadow:
		0 18px 40px rgba( 0, 0, 0, .45 ),
		inset 0 1px 0 rgba( 201, 162, 39, .08 );
}

/* De spinnenwebben. */
.nxg-dnd__web {
	position: absolute;
	top: 0;
	width: 5.5rem;
	height: 5.5rem;
	color: rgba( 232, 220, 192, .13 );
	pointer-events: none;
}

.nxg-dnd__web svg {
	width: 100%;
	height: 100%;
}

.nxg-dnd__web--links { left: 0; }

.nxg-dnd__web--rechts {
	right: 0;
	transform: scaleX( -1 );
}

@media (max-width: 520px) {
	.nxg-dnd__web {
		width: 3.75rem;
		height: 3.75rem;
	}
}

/* De titel licht op alsof er een fakkel op schijnt. */
.nxg-ui .nxg-dnd__titel {
	text-shadow: 0 0 22px rgba( 201, 162, 39, .28 );
}

/* Het zegel met de dobbelsteen ademt heel traag. */
@keyframes nxg-adem {
	0%, 100% { box-shadow: 0 0 0 rgba( 201, 162, 39, 0 ); }
	50%      { box-shadow: 0 0 18px rgba( 201, 162, 39, .28 ); }
}

.nxg-dnd__zegel {
	animation: nxg-adem 5.5s ease-in-out infinite;
}

/* Het fakkellicht op je keuze flikkert, licht en onregelmatig. Te sterk
   zou storen bij het slepen, dus het blijft binnen een smalle marge. */
@keyframes nxg-fakkel {
	0%   { box-shadow: 0 0 0 1px rgba( 18, 14, 9, .6 ), 0 0 12px rgba( 201, 162, 39, .38 ); }
	18%  { box-shadow: 0 0 0 1px rgba( 18, 14, 9, .6 ), 0 0 20px rgba( 201, 162, 39, .55 ); }
	34%  { box-shadow: 0 0 0 1px rgba( 18, 14, 9, .6 ), 0 0 14px rgba( 201, 162, 39, .42 ); }
	52%  { box-shadow: 0 0 0 1px rgba( 18, 14, 9, .6 ), 0 0 22px rgba( 201, 162, 39, .6 ); }
	71%  { box-shadow: 0 0 0 1px rgba( 18, 14, 9, .6 ), 0 0 13px rgba( 201, 162, 39, .4 ); }
	100% { box-shadow: 0 0 0 1px rgba( 18, 14, 9, .6 ), 0 0 18px rgba( 201, 162, 39, .5 ); }
}

.nxg-dnd__keuze:not( [hidden] ) {
	animation: nxg-fakkel 4.2s ease-in-out infinite;
}

/* Tijdens het slepen niets dat beweegt: dan wil je enkel zien waar je
   vinger staat. */
.nxg-dnd__spoor.is-sleep .nxg-dnd__keuze {
	animation: none;
}

/* Wie liever geen beweging heeft, krijgt ze niet. Dat is geen detail:
   flikkerend licht kan mensen echt hinderen. */
@media (prefers-reduced-motion: reduce) {
	.nxg-dnd__zegel,
	.nxg-dnd__keuze:not( [hidden] ) {
		animation: none;
	}
}


/* ------------------------------------ niets dat naar rechts uitsteekt */

/* Een vangnet: alles binnen de pagina blijft binnen de pagina. Een balk,
   een rij dagtegels of een lange naam mag scrollen in zijn eigen vakje,
   maar nooit de hele pagina meeslepen. */
.nxg-dnd,
.nxg-dnd * {
	max-width: 100%;
}

.nxg-dnd__spoor,
.nxg-dnd__schaal {
	overflow: hidden;
}

/* Het laatste uur op de schaal staat op 100% en zou zijn tekst half buiten
   de balk duwen. */
.nxg-dnd__schaal span:last-child {
	transform: translateX( -100% );
}

.nxg-dnd__schaal span:first-child {
	transform: translateX( 0 );
}


/* De kamerpagina smaller. Een balk met uren en een rij dagtegels hebben
   geen volle breedte nodig, en alles staat dichter bij elkaar. */
.nxg-dnd .nxg-ui__wrap {
	max-width: 48rem;
}


/* --------------------------------- de uren onder de balk op een telefoon */

/* Elk vol uur naast elkaar past niet op een smal scherm: dan lopen de
   cijfers in elkaar en lees je niets meer. Om het andere uur volstaat om
   te zien waar je zit. */
@media (max-width: 600px) {
	.nxg-dnd__schaal {
		height: 1.5rem;
	}

	.nxg-dnd__schaal span {
		font-size: .74rem;
	}

	.nxg-dnd__schaal span:nth-child( even ) {
		display: none;
	}
}

/* Op een heel smal scherm blijft zelfs dat krap. */
@media (max-width: 380px) {
	.nxg-dnd__schaal span:nth-child( 4n + 3 ) {
		display: none;
	}
}

/* =========================================== wat al voorbij is */

/* Het verstreken deel van vandaag. Donker en doorstreept, zodat het leest
   als gesloten en niet als vrij. Ligt boven de open uren maar onder een
   boeking: wie er zat, blijft zichtbaar. */
.nxg-dnd__voorbij {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	border-radius: 6px 0 0 6px;
	background:
		repeating-linear-gradient(
			135deg,
			rgba( 0, 0, 0, .55 ),
			rgba( 0, 0, 0, .55 ) 5px,
			rgba( 0, 0, 0, .35 ) 5px,
			rgba( 0, 0, 0, .35 ) 10px
		);
	pointer-events: none;
}

.nxg-dnd__bezet,
.nxg-dnd__keuze {
	z-index: 2;
}

/* Het streepje op het huidige uur, met een puntje erboven. */
.nxg-dnd__nu {
	position: absolute;
	top: -4px;
	bottom: -4px;
	z-index: 3;
	width: 2px;
	background: #E8C766;
	box-shadow: 0 0 8px rgba( 232, 199, 102, .8 );
	pointer-events: none;
}

.nxg-dnd__nu::before {
	content: "";
	position: absolute;
	top: -3px;
	left: 50%;
	width: 8px;
	height: 8px;
	transform: translateX( -50% );
	border-radius: 50%;
	background: #E8C766;
}

.nxg-dnd__nu span {
	position: absolute;
	top: -1.35rem;
	left: 50%;
	transform: translateX( -50% );
	color: #E8C766;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nxg-dnd__vlag[data-soort="voorbij"] {
	background: repeating-linear-gradient(
		135deg,
		rgba( 0, 0, 0, .6 ),
		rgba( 0, 0, 0, .6 ) 3px,
		rgba( 255, 255, 255, .12 ) 3px,
		rgba( 255, 255, 255, .12 ) 6px
	);
}

/* Het label "nu" heeft ruimte boven de balk nodig. */
.nxg-dnd__balk {
	padding-top: 1.35rem;
}