/*
 * --gb-veldmaat is de lettergrootte van de invoervelden, en staat hier op de
 * wrapper in plaats van op het veld zelf. Reden: "1em" is in een veld niet
 * overal hetzelfde. Op de boekings- en beheerpagina staat het veld náást zijn
 * label en erft het de maat van de lopende tekst; op de voorstel- en
 * kindgegevenspagina staat het erín, en dan is 1em stilzwijgend de 20px van dat
 * label. Datzelfde adresveld zag er daardoor per pagina anders uit. Een
 * variabele erft wél door tot in het label, maar verandert onderweg niet van
 * waarde — dus houdt dit elk veld op de maat van de lopende tekst, waar het ook
 * hangt, inclusief de 15px van het bredere scherm onderaan dit bestand.
 */
.grote-boek-boeking {
	max-width: 640px;
	margin: 0 auto;
	--gb-veldmaat: 16px;
	font-size: var(--gb-veldmaat);
	box-sizing: border-box;
}

.grote-boek-boeking * {
	box-sizing: border-box;
}

.grote-boek-stappen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: 1.5em;
	font-size: 0.85em;
}

.grote-boek-stap-indicator {
	padding: 0.4em 0.8em;
	border-radius: 999px;
	background: #eee;
	color: #666;
}

.grote-boek-stap-indicator.is-actief {
	background: #d63638;
	color: #fff;
	font-weight: 600;
}

.grote-boek-boeking fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

.grote-boek-boeking p {
	margin: 0 0 1.2em;
}

/*
 * Veld- en labelopmaak van de Kadence-formulieren op Bedrijven en Scholen: het
 * label in Sorts Mill Goudy cursief op 20px met een inspringing van 10px, het
 * veld als pil met een rand in palette6. Die twee lettertypes (Rubik voor
 * lopende tekst, Goudy voor koppen en labels) laadt het thema sitebreed, dus
 * hier komt er geen webfont bij; de paletkleur staat als variabele in de
 * themastijl, met de huidige waarde als terugval voor een pagina zonder thema.
 *
 * De relatievraag ("Hoort dit kind bij een van de andere kinderen?") staat in een
 * span en niet in een label, omdat er twee keuzelijsten onder hangen en een label
 * maar naar één veld kan wijzen. Voor het oog is het wél een veldnaam als alle
 * andere, dus die hoort hier mee te doen — anders staat er één vraag in de
 * lopende tekst tussen allemaal cursieve labels.
 */
.grote-boek-boeking label,
.grote-boek-boeking .gb-relatie-label {
	display: block;
	font-family: "Sorts Mill Goudy", Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 20px;
	padding-left: 10px;
	margin-bottom: 0.35em;
}

/*
 * Een vinkje draagt een hele zin ("ik ga akkoord met …"), geen veldnaam. Die
 * blijft dus in de lopende tekst staan; cursief op 20px zou er een kop van
 * maken en de aandacht weghalen bij het veld waar het vinkje bij hoort.
 *
 * Gescoped op .grote-boek-boeking, anders wint `.grote-boek-boeking label`
 * hierboven (klasse + element) en stond de zin tóch cursief op 20px.
 */
.grote-boek-boeking .grote-boek-checkbox-label {
	font-family: inherit;
	font-style: normal;
	font-size: 1em;
	font-weight: normal;
	padding-left: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
}

/* Iets groter dan het standaardvinkje: op een telefoon is 13px nauwelijks te zien. */
.grote-boek-boeking .grote-boek-checkbox-label input {
	flex: none;
	height: 1.2em;
	margin: 0.15em 0 0;
	width: 1.2em;
}

/* Zie --gb-veldmaat bovenaan: bewust niet 1em, dat is in een veld ín een label
   de 20px van dat label. Het label eromheen blijft wél 20px. */
.grote-boek-boeking input[type="text"],
.grote-boek-boeking input[type="email"],
.grote-boek-boeking input[type="tel"],
.grote-boek-boeking input[type="number"],
.grote-boek-boeking select,
.grote-boek-boeking textarea {
	width: 100%;
	padding: 0.7em 1.1em;
	font-size: var(--gb-veldmaat);
	border: 1px solid var(--global-palette6, #7b8794);
	border-radius: 50px;
}

/*
 * Een tekstvak mag hóger worden gesleept — bij "Interessante feitjes of grappige
 * verhalen" is meer ruimte precies de bedoeling — maar niet breder. De standaard
 * `resize: both` laat de bezoeker het vak buiten het witte blok trekken, en dan
 * staat de hele pagina scheef; met max-width blijft ook een van elders
 * meegegeven breedte binnen de kolom.
 *
 * De hoekronding staat hier op een vaste 24px en niet op de 50px van de velden
 * hierboven. Een browser knijpt een ronding nooit verder dan de helft van de
 * hoogte, en een invoerregel ís ongeveer 48px hoog — die 50px komt daar dus altijd
 * als een halve cirkel uit. Een tekstvak is hoger, en dan komt die 50px pas echt
 * tot zijn recht: hoe verder je het vak opentrekt, hoe boller de hoeken worden,
 * tot de rem van de halve hoogte wegvalt. Met de 24px die zo'n invoerregel in de
 * praktijk toont, blijft de hoek van het tekstvak gelijk aan die van de velden
 * eromheen én gelijk aan zichzelf, op elke hoogte.
 */
.grote-boek-boeking textarea {
	resize: vertical;
	max-width: 100%;
	border-radius: 24px;
}

/*
 * Mag afbreken: op de kindgegevenspagina staat hier "+ Nog een kind toevoegen
 * (+€7,50)" naast "Opslaan en doorgaan", en die twee passen op een telefoon niet
 * samen op één regel. Zonder wrap zouden ze allebei geperst worden tot een knop
 * met drie regels tekst; nu vallen ze onder elkaar, met dezelfde tussenruimte als
 * ernaast.
 */
.grote-boek-boeking .grote-boek-navigatie {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75em;
	margin-top: 1.5em;
}

/*
 * De tweede selector lijkt overbodig maar is het niet: de knopstijl die het thema
 * "secundair" noemt krijgt uit de customizer een eigen lettergrootte mee, in een
 * regel met twéé klassen (`.button.button-style-secondary`). Die weegt zwaarder
 * dan klasse-plus-element hierboven, en dus stond "+ Nog een kind toevoegen" op
 * de 18px van de site tussen knoppen van 15px. Met het element erbij wint deze
 * regel wel.
 */
.grote-boek-boeking button,
.grote-boek-boeking button.button-style-secondary {
	min-height: 44px;
	cursor: pointer;
	font-size: 1em;
}

.grote-boek-boeking button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/*
 * Bezig: er is iets onderweg naar de server. Het scherm gaat op halve sterkte
 * en de knop waarop geklikt is krijgt een draaiend rondje. Die knop houdt
 * bewust zijn volle dekking - hij is op dat moment het enige wat de klant nog
 * moet aflezen - en muisklikken op de rest worden geblokkeerd, zodat er niets
 * meer verandert aan gegevens die al onderweg zijn.
 *
 * Twee klassen, twee betekenissen (zie grote-boek-bezig.js): .is-versturen op
 * de wrapper zegt dát er iets onderweg is, .is-bezig op de knop zegt wélke knop
 * het deed. Op elke ándere klantflow-pagina dan het boekingsformulier zitten er
 * meer knoppen op het scherm - annuleren naast opslaan, drie uitwegen naast
 * elkaar op de voorstelpagina - en dan is dat onderscheid het hele punt.
 *
 * Alle formulieren van de wrapper gaan op slot en niet alleen het formulier dat
 * verstuurd wordt: annuleren terwijl het opslaan onderweg is, is precies de
 * dubbele actie waar dit tegen is.
 */
.grote-boek-boeking.is-versturen form {
	pointer-events: none;
}

/*
 * Dimmen per kind en niet op de fieldset zelf: opacity werkt door op alles
 * eronder, dus een doorzichtige fieldset zou de verstuurknop meeslepen. Om
 * dezelfde reden staan de knoppen hier apart: op de pagina's zonder fieldset
 * (betalen, verplaatsen, voorstel) is er verder niets om te dimmen, en juist
 * daar moet zichtbaar zijn dat de andere uitwegen even niet meer aan de beurt
 * zijn.
 */
.grote-boek-boeking.is-versturen fieldset > *:not(.grote-boek-navigatie),
.grote-boek-boeking.is-versturen .grote-boek-vorige,
.grote-boek-boeking.is-versturen button:not(.is-bezig) {
	opacity: 0.55;
}

.grote-boek-boeking .is-bezig {
	opacity: 1;
	cursor: progress;
}

.grote-boek-boeking .is-bezig::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.5em;
	vertical-align: -0.15em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: grote-boek-draai 0.8s linear infinite;
}

@keyframes grote-boek-draai {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.grote-boek-boeking .is-bezig::before {
		animation: none;
	}
}

.grote-boek-honeypot {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	height: 0;
	width: 0;
	overflow: hidden;
	margin: 0 !important;
}

.grote-boek-dagen-grid,
.grote-boek-tijden-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 0.5em;
	margin-bottom: 1.2em;
}

.grote-boek-dag-knop,
.grote-boek-tijd-knop {
	padding: 0.6em 0.4em;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff;
	color: #111;
	text-align: center;
	font-size: 0.9em;
	min-height: 44px;
}

.grote-boek-dag-knop.is-geselecteerd,
.grote-boek-tijd-knop.is-geselecteerd {
	background: #d63638;
	color: #fff;
	border-color: #d63638;
}

/*
 * Alleen op de adminpagina "Huisbezoek voorstellen": de tijd waar de planner
 * vandaan kwam terwijl het blok geblokkeerd staat. Die komt niet uit de agenda —
 * die toont immers alleen vrije tijden — dus hij hoort er ook niet als een gewone
 * vrije tijd uit te zien. Een stippelrand en niet een eigen kleur, want geselecteerd
 * is hij meestal ook, en die twee moeten naast elkaar leesbaar blijven.
 */
.grote-boek-dag-knop.is-geblokkeerd,
.grote-boek-tijd-knop.is-geblokkeerd {
	border-style: dashed;
	border-width: 2px;
}

.grote-boek-melding {
	padding: 1em;
	border-radius: 6px;
	margin-bottom: 1.5em;
}

.grote-boek-melding--fout {
	background: #fbeaea;
	color: #8a1f1f;
	border: 1px solid #e0b4b4;
}

.grote-boek-melding--ok {
	background: #e9f7ef;
	color: #1e7e34;
	border: 1px solid #b7e2c2;
}

/*
 * Straatnaam, huisnummer, toevoeging en postcode staan in één rij, en die valt
 * per schermbreedte anders uiteen. Op een telefoon alles onder elkaar; vanaf
 * 480px schuiven huisnummer en toevoeging naast elkaar; vanaf 600px is het een
 * raster met straatnaam + nummer + toevoeging op de eerste regel en de postcode
 * eronder. Straatnaam en huisnummer horen daar bij elkaar — samen zijn ze één
 * adresregel, en een huisnummerveld op een eigen regel onder een veld van de
 * volle breedte leest als een los gegeven.
 *
 * Op dat brede scherm bewust grid en geen flex: met flex-basis moet je de
 * afbreekpunten uitrekenen, en dan hangt het van een paar pixels af of de
 * postcode nog mee omhoog springt. Met drie kolommen staat het vast.
 */
/*
 * De ruimte tússen twee regels van deze rij is dezelfde 1.2em die elk ander veld
 * onder zich heeft (zie .grote-boek-boeking p): een adresveld dat onder een
 * ander adresveld valt hoort niet dichter op zijn buurman te staan dan de rest
 * van het formulier. Horizontaal is 1em genoeg — daar staan de velden naast
 * elkaar en scheidt de witruimte twee kolommen, geen twee regels.
 */
.grote-boek-adres-rij {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2em 1em;
	margin-bottom: 1.2em;
}

.grote-boek-adres-veld {
	flex: 1 1 100%;
	margin-bottom: 0 !important;
}

@media (min-width: 480px) {
	.grote-boek-adres-veld--huisnummer,
	.grote-boek-adres-veld--toevoeging {
		flex: 1 1 calc(50% - 0.5em);
	}
}

@media (min-width: 600px) {
	.grote-boek-adres-rij {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 120px 100px;
		align-items: start;
	}

	/* Een postcode is zeven tekens; over de hele straatnaamkolom uitgerekt zou
	   het veld beloven dat er meer in moet. */
	.grote-boek-adres-veld--postcode {
		grid-column: 1;
		max-width: 180px;
	}
}

.grote-boek-bankgegevens {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0;
}

.grote-boek-bankgegevens th,
.grote-boek-bankgegevens td {
	text-align: left;
	padding: 0.5em 0.7em;
	border-bottom: 1px solid #eee;
}

.grote-boek-bankgegevens th {
	width: 40%;
	font-weight: 600;
	color: #555;
}

/*
 * Op een telefoon het label boven de waarde. Naast elkaar was de tabel met
 * "Rekeninghouder" en een IBAN van achttien tekens 50px breder dan de kaart
 * waar hij in staat, en een IBAN hoort niet midden in afgebroken te worden:
 * die wordt overgetypt of gekopieerd.
 */
@media (max-width: 479px) {
	.grote-boek-boeking .grote-boek-bankgegevens,
	.grote-boek-boeking .grote-boek-bankgegevens tbody,
	.grote-boek-boeking .grote-boek-bankgegevens tr,
	.grote-boek-boeking .grote-boek-bankgegevens th,
	.grote-boek-boeking .grote-boek-bankgegevens td {
		display: block;
		width: auto;
	}

	.grote-boek-boeking .grote-boek-bankgegevens tr {
		border-bottom: 1px solid #eee;
		padding: 0.55em 0;
	}

	.grote-boek-boeking .grote-boek-bankgegevens th,
	.grote-boek-boeking .grote-boek-bankgegevens td {
		border-bottom: 0;
		padding: 0;
	}

	.grote-boek-boeking .grote-boek-bankgegevens th {
		font-size: 0.85em;
	}
}

.button-link-delete {
	background: none;
	border: 1px solid #d63638;
	color: #d63638;
	border-radius: 4px;
	padding: 0.5em 1em;
}

.grote-boek-info {
	font-size: 0.9em;
	color: #555;
}

/* Een zin onder een invoerveld die uitlegt waaróm we iets vragen. Bewust een
   <span> in dezelfde <p> als het veld en niet een losse alinea: zo blijft de
   uitleg bij het veld horen als de browser de regels anders breekt. */
.grote-boek-boeking .grote-boek-veldhint {
	display: block;
	margin-top: 0.35em;
	font-size: 0.85em;
	color: #555;
}

/* Het boekingsnummer boven aan de klantpagina's: rustig, maar goed over te
   typen en door de telefoon voor te lezen. */
.grote-boek-boekingsnummer {
	font-size: 0.9em;
	color: #555;
	letter-spacing: 0.03em;
	font-variant-numeric: tabular-nums;
}

.grote-boek-laden {
	color: #777;
	font-style: italic;
}

.grote-boek-bedankt {
	text-align: center;
	padding: 2em 1em;
}

/*
 * De klasse .grote-boek-boeking staat er bewust vóór, ook al zou .gb-kind-blok
 * alleen genoeg moeten zijn: een kindblok ís een fieldset, en bovenaan dit
 * bestand zet `.grote-boek-boeking fieldset` rand, binnenruimte én marge op nul.
 * Dat is bedoeld voor de stappen van het boekingsformulier, maar klasse + element
 * weegt zwaarder dan één losse klasse, dus won die regel het hier van alles
 * hieronder — de rand, de binnenruimte en de ruimte tussen twee kinderen bleven
 * daardoor onzichtbaar. Twee klassen winnen wél.
 *
 * De ruimte tússen twee kindblokken is ruim het dubbele van de 1.2em die de
 * velden binnen een blok van elkaar scheidt, en dat is de bedoeling: de sprong
 * van het ene kind naar het volgende is een grotere sprong dan die van het ene
 * veld naar het volgende.
 */
.grote-boek-boeking .gb-kind-blok {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 1.2em;
	margin-bottom: 2.5em;
	/* Een fieldset krimpt van zichzelf niet onder zijn min-content-breedte;
	   zonder dit kan een lange optie in een keuzelijst het blok op een telefoon
	   breder maken dan het scherm. */
	min-width: 0;
}

/*
 * Op een telefoon staat het blok al binnen de witte kaart van de pagina, met
 * haar eigen binnenruimte; twee keer 1.2em aan elke kant liet de velden daar
 * maar tweederde van de schermbreedte.
 */
@media (max-width: 479px) {
	.grote-boek-boeking .gb-kind-blok {
		padding: 1em 0.75em;
	}
}

.grote-boek-boeking .gb-kind-blok--extra {
	border-color: #d63638;
}

.gb-extra-notitie {
	font-style: italic;
}

/*
 * In een kindblok staat het veld ín zijn label, dus de ondermarge van dat label
 * is de ruimte ónder het veld — en die hoort uit één bron te komen: de <p>
 * eromheen, met de 1.2em die elk veld in de klantflow onder zich heeft.
 *
 * Stond hier eerder 1em, en dat was onzichtbaar zolang een veld gewoon onder een
 * ander stond: die marge viel dan samen met de 1.2em van de <p>. In een
 * .gb-veld-rij hieronder gebeurt dat níet — een flex-item laat geen marge door
 * zich heen vallen — en dus telden ze daar op tot 2.2em, precies onder de twee
 * rijen met twee velden. Vandaar nul: dan kan die marge nergens meer opgeteld
 * worden.
 *
 * De vraag boven de relatieregel is geen label maar een span en houdt dus wel de
 * gewone 0.35em tussen vraag en veld.
 */
.grote-boek-boeking .gb-kind-blok label {
	margin-bottom: 0;
}

/* De onderste marge van het blok komt van de padding; anders staat er onderin
   1.2em meer lucht dan bovenin. */
.grote-boek-boeking .gb-kind-blok > *:last-child {
	margin-bottom: 0;
}

/*
 * Dezelfde maat als de velden hierboven, ook hier expliciet: bijna elk veld in
 * een kindblok staat ín zijn label, en de twee keuzelijsten van de relatie
 * staan er juist buiten — die kunnen niet in een label, ze delen er één. Zonder
 * deze regel zou dat verschil terugkomen als twee formaten naast elkaar.
 */
.grote-boek-boeking .gb-kind-blok input,
.grote-boek-boeking .gb-kind-blok select,
.grote-boek-boeking .gb-kind-blok textarea {
	width: 100%;
	padding: 0.7em 1.1em;
	font-size: var(--gb-veldmaat);
	border: 1px solid var(--global-palette6, #7b8794);
	/* Bewust géén border-radius: die hoort bij de vorm van het veld en niet bij de
	   plek waar het staat, dus komt hij uit de regels bovenaan — 50px voor een
	   invoerregel, 24px voor een tekstvak. Stond hij hier ook, dan won deze
	   selector (twee klassen) het van die van het tekstvak. */
	margin-top: 0.35em;
	font-weight: normal;
}

/*
 * De twee keuzelijsten van de relatie ("broertje/zusje" + "van Sem") horen op
 * één regel te staan, en de regel hierboven maakt élke select in een kindblok
 * volledig breed. Vandaar flex met een eigen basis: op een smal scherm wikkelen
 * ze vanzelf onder elkaar in plaats van dat ze elkaar wegduwen.
 *
 * Dezelfde inspringing van 10px als de labels hierboven: bij elk ander veld zit
 * het invoervak ín het label en schuift het met die padding mee, en zonder deze
 * regel begint juist deze ene rij tien pixels verder naar links dan de rest.
 */
.grote-boek-boeking .gb-relatie-regel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
	/* Dezelfde 1.2em als onder elk ander veld: deze regel is een veld als alle
	   andere, alleen met twee keuzelijsten naast elkaar. */
	margin-bottom: 1.2em;
	padding-left: 10px;
}

.grote-boek-boeking .gb-relatie-regel select {
	flex: 1 1 12em;
	width: auto;
	margin-top: 0;
}

.grote-boek-boeking .gb-relatie-van {
	flex: 0 0 auto;
}

/*
 * Twee korte velden die bij elkaar horen, naast elkaar: school/groep +
 * leerkracht op de kindgegevenspagina, voor- + achternaam in de laatste stap van
 * het boekingsformulier. Op een smal scherm vallen ze onder elkaar — twee inputs
 * naast elkaar op een telefoon worden allebei te smal om een schoolnaam of een
 * dubbele achternaam in te lezen. Dat afbreekpunt komt uit de flex-basis van
 * 14em en niet uit een media-query, zodat het ook klopt als zo'n rij ooit in een
 * smallere kolom belandt.
 */
/*
 * De ruimte tussen en onder de velden komt van de rij en niet van de <p>'s erin.
 * Een <p> is hier namelijk een flex-item, en de ondermarge van het laatste item
 * op een regel telt niet mee in de hoogte van de rij. Zolang de twee velden
 * naast elkaar staan valt dat niet op, maar op een telefoon vallen ze onder
 * elkaar en dan stonden er drie verschillende afstanden in één kindblok: ruim
 * tussen de twee velden van een rij, en bijna niets tussen de laatste van een
 * rij en het veld eronder. row-gap zegt nu wat er tússen twee regels van de rij
 * komt en margin-bottom wat eronder — allebei dezelfde 1.2em als tussen twee
 * gewone velden. Hetzelfde model als .grote-boek-adres-rij hierboven.
 */
.grote-boek-boeking .gb-veld-rij {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2em 1em;
	margin-bottom: 1.2em;
}

.grote-boek-boeking .gb-veld-rij > p {
	flex: 1 1 14em;
	min-width: 0;
	margin-bottom: 0;
}

a.button {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	line-height: 2.2;
	padding: 0 1em;
}

/*
 * Het thema (Kadence) zet text-transform: capitalize op álle knoppen, waardoor
 * "Deze tijd kiezen" als "Deze Tijd Kiezen" bij de klant aankomt. De teksten
 * zijn in de admin bewerkbaar, dus de opmaak hoort de ingevoerde tekst te
 * respecteren en er geen hoofdletters bij te verzinnen.
 */
.grote-boek-boeking button,
.grote-boek-boeking .button,
/* Zelfde reden als bij de lettergrootte hierboven: de secundaire knopstijl komt
   uit een regel met twee klassen en zou anders alsnog hoofdletters krijgen. */
.grote-boek-boeking button.button-style-secondary,
.grote-boek-boeking input[type="submit"],
.grote-boek-boeking .button-link-delete {
	text-transform: none;
}

/*
 * De verzendknop van de Kadence-formulieren is een pil; de knoppen hier volgen
 * dezelfde ronding, anders staat er een rechthoekige knop onder een rij ronde
 * velden. De dag- en tijdknoppen van de agenda blijven erbuiten: dat is een
 * raster van vlakken, geen actieknop.
 */
.grote-boek-boeking .grote-boek-navigatie button,
.grote-boek-boeking .grote-boek-navigatie .button,
.grote-boek-boeking button[type="submit"],
.grote-boek-boeking input[type="submit"] {
	border-radius: 50px;
}

/* Voorgestelde tijden op de verplaatspagina: op mobiel de knop onder de tijd,
   vanaf 480px ernaast. De lijst is gescoped op .grote-boek-boeking omdat de
   lijstregels van het thema zwaarder wegen dan één klasse: die zetten er anders
   32px inspringing en hun eigen marges op, net als bij het rooster. */
.grote-boek-boeking .grote-boek-verplaats-opties {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
}

.grote-boek-boeking .grote-boek-verplaats-optie {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 1em;
	margin-bottom: 0.8em;
}

.grote-boek-verplaats-optie.is-bezet {
	background: #f6f6f6;
	color: #777;
}

.grote-boek-verplaats-optie-tijd {
	font-weight: 600;
}

.grote-boek-verplaats-optie.is-bezet .grote-boek-verplaats-optie-tijd {
	text-decoration: line-through;
	font-weight: normal;
}

.grote-boek-verplaats-optie-bezet {
	font-size: 0.9em;
	font-style: italic;
}

.grote-boek-verplaats-optie form {
	margin: 0;
}

@media (min-width: 480px) {
	.grote-boek-boeking .grote-boek-verplaats-optie {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

@media (min-width: 600px) {
	/* Alleen de variabele: de font-size van de wrapper hangt eraan, en de velden
	   zakken zo mee in plaats van op de mobiele maat te blijven staan. */
	.grote-boek-boeking {
		--gb-veldmaat: 15px;
	}

	.grote-boek-dagen-grid,
	.grote-boek-tijden-grid {
		grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	}
}

/* ------------------------------------------------ rooster (werknemers) -- */

/*
 * De pagina waarop een werknemer doorgeeft welke tijdsblokken hij niet kan.
 *
 * De blokken staan als lijst en niet als raster zoals de agenda van de klant:
 * hier is de tijd niet iets om uit te kiezen maar iets om langs te lopen, en een
 * rij van één blok breed is op een telefoon met één duim af te vinken.
 */
.gb-rooster-intro {
	font-weight: 600;
}

.gb-rooster-eerder {
	font-size: 0.95em;
	font-style: italic;
}

.gb-rooster-dag {
	margin: 1.5em 0;
	padding-top: 0.5em;
	border-top: 1px solid #dcdcde;
}

/*
 * Datum links, dagschakelaar rechts. flex-wrap erbij omdat een lange datum met
 * de schakelaar ernaast op een telefoon niet op één regel past; dan zakt de
 * schakelaar eronder en blijft hij door de auto-marge rechts staan.
 */
.gb-rooster-dagkop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3em 1em;
	margin-bottom: 0.4em;
}

.gb-rooster-datum {
	margin: 0;
	font-size: 1.35em;
	line-height: 1.3;
}

/*
 * De dagschakelaar is een <button> (het is een actie, geen bestemming) maar
 * ziet uit als een link: als knop stond hij visueel gelijk aan "Doorgeven" en
 * trok hij de aandacht weg van de vinkjes waar het scherm over gaat.
 *
 * De reset staat bewust óók op :hover, :focus en :active. Kadence zet in één
 * regel `button:hover, button:focus, button:active { background: …; box-shadow:
 * … }`, en die is met een element én een pseudo-klasse specifieker dan een
 * losse reset op de rustende stand: bij muisover kwam de knop dan terug.
 *
 * margin-left: auto duwt hem naar de rechterkant van de dagkop, ook als de
 * datum kort is.
 */
.gb-rooster-dagknop,
.gb-rooster-dagknop:hover,
.gb-rooster-dagknop:focus,
.gb-rooster-dagknop:active {
	display: inline;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	font-size: 0.9em;
	color: inherit;
	cursor: pointer;
	text-decoration: underline;
}

.gb-rooster-dagknop:hover,
.gb-rooster-dagknop:focus {
	text-decoration: none;
}

/*
 * Wel zichtbaar voor een schermlezer, niet op het scherm: het zichtbare label
 * van een blok zegt wat er staat ("Fam. Jansen (Dordrecht)"), en dat is geen
 * beschrijving van wat het vinkje doet.
 */
.gb-rooster-verborgen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Gescoped op .grote-boek-boeking: de lijstregels van het thema (padding-left van
 * 32px, marges) zijn zwaarder dan een losse klasse, en op een telefoon kostte die
 * inspringing een tiende van de breedte zonder dat hij iets betekende.
 */
.grote-boek-boeking .gb-rooster-blokken {
	list-style: none;
	margin: 0.6em 0 0;
	padding: 0;
}

.grote-boek-boeking .gb-rooster-blok {
	margin: 0;
	padding: 0;
}

/*
 * Het hele label is het raakvlak, inclusief de tijd: op een telefoon is een los
 * vierkantje van 13 pixels niet te raken. Vandaar ook de ruime padding.
 */
.gb-rooster-blok label {
	/* Ook dit label is een aanvinkregel en geen veldnaam: lopende tekst dus,
	   net als .grote-boek-checkbox-label. */
	font-family: inherit;
	font-style: normal;
	font-size: 1em;
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.55em 0.6em;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	margin-bottom: 0.4em;
	cursor: pointer;
}

/* Het label is het raakvlak, maar het vinkje moet op een telefoon ook te zién zijn. */
.gb-rooster-blok input[type="checkbox"] {
	flex: none;
	height: 1.2em;
	margin: 0;
	width: 1.2em;
}

.gb-rooster-blok input[type="checkbox"]:checked ~ .gb-rooster-tijd {
	text-decoration: line-through;
}

/*
 * Een aangevinkt blok is een afmelding, dus de nadruk hoort op "hier ben ik er
 * niet". :has() valt terug op niets in oudere browsers; dan blijft alleen de
 * doorhaling van de tijd over, en dat is genoeg om het te kunnen lezen.
 */
.gb-rooster-blok label:has(input:checked) {
	border-color: #b32d2e;
	background: #fcf0f1;
}

.gb-rooster-tijd {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.gb-rooster-blok-label {
	flex: 1;
	font-size: 0.95em;
	color: #50575e;
}

.gb-rooster-verstuur {
	margin-top: 1.5em;
	text-align: right;
}

/*
 * Het scherm waarop de planner afvinkt wie er een reviewverzoek krijgt.
 *
 * Komt uit admin-post.php en niet van een shortcodepagina, dus het staat in de
 * kale themawrapper: de lijst krijgt hier zijn eigen opmaak omdat de li-regels
 * anders de opsommingstekens en de regelafstand van het thema meekrijgen.
 * Vandaar ook de scoping op .grote-boek-boeking — zonder die klasse ervoor
 * winnen de element-selectors van het thema.
 */
.grote-boek-boeking .gb-reviewkeuze-lijst {
	margin: 1.5em 0;
	padding: 0;
	list-style: none;
}

.grote-boek-boeking .gb-reviewkeuze-lijst li {
	margin: 0 0 0.5em;
	padding: 0;
}

.grote-boek-boeking .gb-reviewkeuze-lijst label {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	flex-wrap: wrap;
	padding: 0.7em 0.9em;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	cursor: pointer;
}

/*
 * Een reden die het vinkje blokkeert is een feit en geen keuze, dus de regel
 * mag als gelezen ogen — maar niet zó licht dat je hem overslaat: hij vertelt
 * juist waarom iemand ontbreekt in wat er straks weggaat.
 */
.grote-boek-boeking .gb-reviewkeuze-lijst li.is-geblokkeerd label {
	background: #f6f7f7;
	cursor: default;
}

.grote-boek-boeking .gb-reviewkeuze-naam {
	font-weight: 600;
}

.grote-boek-boeking .gb-reviewkeuze-reden {
	flex-basis: 100%;
	/* Uitlijnen onder de naam en niet onder het vinkje: de reden hoort bij het
	   bezoek, niet bij het aankruisvakje. */
	padding-left: 1.9em;
	font-size: 0.9em;
	color: #50575e;
}

/*
 * De afmeldpagina onder de marketingmails. Hij leent de lijst van het
 * reviewkeuzescherm hierboven, maar een reden is een hele zin en geen veldnaam:
 * dus in de lopende tekst in plaats van cursief op 20px, net als de vinkjes van
 * .grote-boek-checkbox-label, en het rondje op dezelfde regel als de zin. Het
 * label boven het tekstvak is wél een veldnaam en houdt de klantflowstijl.
 */
.grote-boek-boeking.grote-boek-afmelden fieldset {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.grote-boek-boeking.grote-boek-afmelden legend {
	font-weight: 600;
	margin-bottom: 0.4em;
	padding: 0;
}

.grote-boek-boeking.grote-boek-afmelden .gb-reviewkeuze-lijst label {
	align-items: center;
	flex-wrap: nowrap;
	font-family: inherit;
	font-size: 1em;
	font-style: normal;
	margin-bottom: 0;
}

.grote-boek-boeking.grote-boek-afmelden .gb-reviewkeuze-lijst input {
	flex: 0 0 auto;
	margin: 0;
}

.grote-boek-boeking.grote-boek-afmelden textarea {
	width: 100%;
}