.lotto-site h1 { margin-bottom: 4px; }
.lotto-site .lotto-status { font-weight: bold; margin-bottom: 1rem; }
.lotto-handleiding-link { margin-bottom: 1rem; font-size: 0.9rem; }
/* Handleidingpagina: eenvoudige, leesbare opmaak voor een langere, doorlopende tekst. */
.lotto-handleiding h2 { margin-top: 1.75rem; margin-bottom: 0.5rem; }
.lotto-handleiding p { margin-bottom: 0.75rem; }
.lotto-handleiding ul, .lotto-handleiding ol { margin-bottom: 0.75rem; }
.lotto-handleiding-inhoud { margin-bottom: 1.5rem; }
.lotto-handleiding-inhoud ol { margin-bottom: 0; }
table.lotto-tabel { border-collapse: collapse; width: 100%; margin-bottom: 1.5rem; }
table.lotto-tabel th, table.lotto-tabel td { border: 1px solid #ddd; padding: 6px 8px; text-align: left; }
/* Expliciete tekstkleur op de koprij, met !important: het sitethema zet blijkbaar zelf ook
   een kleurregel op th-elementen (waarschijnlijk met even hoge of hogere specificiteit, of na
   dit bestand geladen), dus zonder !important won ons "leesbare" kleurtje niet. De databalken
   zelf laten we ongemoeid, zodat de rest van de sjabloonstyling (bv. het donkere thema) intact
   blijft. */
table.lotto-tabel th {
	background: #f5f5f5 !important;
	color: #1a1a1a !important;
}
table.lotto-tabel th a { color: #1a1a1a !important; }
/* Speler(s) met het huidige hoogste aantal goed opvallend in rood weergeven. */
table.lotto-tabel tr.lotto-koploper td {
	color: #c0392b !important;
	font-weight: bold;
}
/* Ronde "lottobal" weergave van getallen, geïnspireerd op de officiële trekkingsuitslagen */
.lotto-ballen {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.lotto-ball {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	margin: 1px;
	box-shadow:
		inset -2px -2px 4px rgba(0, 0, 0, 0.35),
		inset 2px 2px 3px rgba(255, 255, 255, 0.35),
		0 1px 2px rgba(0, 0, 0, 0.25);
}
.lotto-ball.is-getrokken {
	background: radial-gradient(circle at 35% 30%, #ffe479, #d9a520 75%);
	color: #3a2c00;
}
.lotto-ball.is-geraakt {
	background: radial-gradient(circle at 35% 30%, #ff8c7c, #c0392b 75%);
	color: #fff;
}
.lotto-ball.is-niet-geraakt {
	background: radial-gradient(circle at 35% 30%, #ffe479, #d9a520 75%);
	color: #3a2c00;
}

/* Aanmeldformulier: getallenrooster (zelfde look als in het beheerdersgedeelte, zie
   media/css/admin.css) en wat basisruimte tussen de formuliervelden. */
.lotto-aanmeldform .mb-3 { margin-bottom: 1rem; }
/* Het sitethema heeft een donkere (bordeauxrode) achtergrond. Joomla's standaard grijze
   veldomschrijving (de kleine hulptekst onder elk formulierveld, class "form-text" en/of
   "text-muted") is daar vrijwel onleesbaar op. Binnen ons eigen aanmeldformulier zetten we
   die tekst daarom expliciet lichtgrijs/wit i.p.v. het standaard donkergrijs. !important is
   nodig omdat het sitethema zelf ook een (donkere) kleur op deze Bootstrap-klassen zet. */
.lotto-aanmeldform .form-text,
.lotto-aanmeldform .text-muted,
.lotto-aanmeldform small {
	color: rgba(255, 255, 255, 0.75) !important;
}
.lotto-aanmeldingen-lijst { margin: 0; padding-left: 1.2rem; }
.lotto-aanmeldingen-lijst li { margin-bottom: 10px; }
.lotto-aanmeldingen-lijst .lotto-ballen { margin-top: 6px; }
.lotto-wijzig-geblokkeerd { opacity: 0.75; }
.lotto-wijzig-details { margin-top: 4px; }
.lotto-wijzig-details summary { cursor: pointer; color: #0d6efd; }
.lotto-wijzig-details form { margin-top: 8px; }
/* Getallen die al klaarstaan voor de volgende ronde (nog niet actief), en de uitleg in het
   wijzigformulier dat een nieuwe keuze pas bij de volgende ronde ingaat. Kleur expliciet lichtgrijs/
   wit i.p.v. het standaard donkergrijs, om dezelfde reden als de veldomschrijvingen hierboven. */
.lotto-klaargezet { margin-top: 6px; }
.lotto-klaargezet small,
.lotto-wijzig-uitleg small {
	color: rgba(255, 255, 255, 0.75);
}
.lotto-wijzig-uitleg { margin: 0 0 6px; }
.lotto-getallen-uitleg { font-size: 0.9rem; opacity: 0.75; margin-bottom: 6px; }
.lotto-getallen-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-width: 560px;
	margin-bottom: 6px;
}
.lotto-getallen-grid .lotto-getal {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid #ccc;
	background: #f4f5f6;
	color: #2c3e50;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .1s, color .1s, border-color .1s;
}
.lotto-getallen-grid .lotto-getal input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}
.lotto-getallen-grid .lotto-getal:has(input:checked) {
	background: radial-gradient(circle at 35% 30%, #ff8c7c, #c0392b 75%);
	color: #fff;
	border-color: #c0392b;
	font-weight: bold;
	box-shadow:
		inset -2px -2px 4px rgba(0, 0, 0, 0.35),
		inset 2px 2px 3px rgba(255, 255, 255, 0.35),
		0 1px 2px rgba(0, 0, 0, 0.25);
}
.lotto-getallen-grid .lotto-getal:has(input:disabled):not(:has(input:checked)) {
	opacity: .35;
	cursor: not-allowed;
}
.lotto-getallen-teller {
	font-weight: bold;
	color: #c0392b;
}