/**
 * 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;
}

.nxg-dnd__spoor {
	position: relative;
	height: 3.25rem;
	border-radius: 8px;
	background: rgba( 255, 255, 255, .03 );
}

/* De uren waarop de winkel open is. */
.nxg-dnd__open {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 6px;
	background: rgba( 201, 162, 39, .16 );
}

/* Wat al geboekt is. Een aanvraag die nog niet bevestigd is, staat
   gestreept: die ruimte is nog niet zeker weg. */
.nxg-dnd__bezet {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 6px;
	background: rgba( 140, 47, 38, .55 );
}

.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: rgba( 201, 162, 39, .5 );
	box-shadow: 0 0 0 1px rgba( 18, 14, 9, .6 );
}

/* 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: #6F6757;
	font-size: .66rem;
	font-variant-numeric: tabular-nums;
}

.nxg-dnd__legende {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem 1.25rem;
	margin: .75rem 0 0;
	color: #8D8371;
	font-size: .76rem;
}

.nxg-dnd__legende span {
	display: inline-block;
	width: .9rem;
	height: .9rem;
	margin-right: .35rem;
	border-radius: 3px;
	vertical-align: -2px;
}

.nxg-dnd__legende span[data-soort="vrij"] { background: rgba( 201, 162, 39, .16 ); }
.nxg-dnd__legende span[data-soort="bezet"] { background: rgba( 140, 47, 38, .55 ); }
.nxg-dnd__legende span[data-soort="keuze"] { background: rgba( 201, 162, 39, .5 ); }

/* ------------------------------------------------------------- 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;
}