/**
 * TablePress custom CSS – Taus Gym tarieven
 * Gebruik: voeg in TablePress > Plugin Options > Custom CSS of in Weergave > Customizer > Extra CSS.
 * Tip: geef je tarieven-tabel in TablePress een extra CSS class: tg-pricing (in "Tabel-opties" > "Extra CSS-classes")
 * Dan werkt de scoping en beïnvloed je geen andere tabellen.
 */
:root {
	--tg-bg: #0f0f12; /* pagina / sectie achtergrondkleur (optioneel) */
	--tg-card: #17181d; /* rij achtergrond */
	--tg-text: #e9edf1; /* hoofdtekst */
	--tg-muted: #aab3bd; /* subtiele tekst */
	--tg-accent: #79ff6c; /* knoppen/hover accent */
	--tg-accent-ink: #0b1d0a; /* tekstkleur op accent */
	--tg-border: #272a31; /* randen */
}

/* ===== Basis stijl voor juist die ene tabel ===== */
.tablepress.tg-pricing {
	border-collapse: separate; /* nodig voor border-radius */
	border-spacing: 0;
	width: 100%;
	color: var(--tg-text);
	background: var(--tg-card);
	border: 1px solid var(--tg-border);
	border-radius: 16px;
	overflow: hidden; /* rondingen zichtbaar houden */
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* Kop */
.tablepress.tg-pricing thead th {
	background: linear-gradient(180deg,#1e2026,#17181d);
	color: var(--tg-text);
	text-align: left;
	font-weight: 700;
	border-bottom: 1px solid var(--tg-border);
	padding: 14px 16px;
}

/* Cellen */
.tablepress.tg-pricing td,
.tablepress.tg-pricing th {
	border-color: var(--tg-border);
	padding: 14px 16px;
}

/* Rij afwisseling en hover */
.tablepress.tg-pricing tbody tr:nth-child(odd) {
	background: rgba(255,255,255,.02);
}

.tablepress.tg-pricing tbody tr:hover {
	background: rgba(121,255,108,.05);
}

/* Prijs-kolom markeren – vervang :nth-child(3) indien jouw prijs-kolom elders staat */
.tablepress.tg-pricing tbody td:nth-child(3) {
	font-weight: 800;
	font-size: 1.1rem;
	white-space: nowrap;
}

/* Knoppen in laatste kolom of overal met class .tg-btn */
.tablepress.tg-pricing tbody td:last-child a,
.tablepress.tg-pricing a.tg-btn {
	display: inline-block;
	text-decoration: none;
	border-radius: 999px;
	padding: 10px 16px;
	border: 2px solid var(--tg-accent);
	color: var(--tg-text);
	font-weight: 700;
	transition: transform .08s ease, background .2s ease, color .2s ease;
}

.tablepress.tg-pricing tbody td:last-child a:hover,
.tablepress.tg-pricing a.tg-btn:hover {
	background: var(--tg-accent);
	color: var(--tg-accent-ink);
	transform: translateY(-1px);
}

.tablepress.tg-pricing tbody td:last-child a:active,
.tablepress.tg-pricing a.tg-btn:active {
	transform: translateY(0);
}

/* Smalle schermen – iets grotere touch-targets en stack-achtige layout zonder plugin */
@media (max-width: 720px) {
	.tablepress.tg-pricing thead {
		display: none;
	}

	/* header verbergen voor eenvoud */
	.tablepress.tg-pricing,
	.tablepress.tg-pricing tbody,
	.tablepress.tg-pricing tr,
	.tablepress.tg-pricing td {
		display: block;
		width: 100%;
	}

	.tablepress.tg-pricing tbody tr {
		border-bottom: 1px solid var(--tg-border);
	}

	.tablepress.tg-pricing tbody td {
		padding: 10px 16px;
	}

	.tablepress.tg-pricing tbody td:nth-child(3) {
		font-size: 1.2rem;
	}

	.tablepress.tg-pricing tbody td:last-child {
		padding-bottom: 16px;
	}
}

/* Optioneel: badge-stijl voor lidmaatschapsnaam in kolom 1 */
.tablepress.tg-pricing tbody td:first-child strong {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(121,255,108,.1);
	border: 1px solid var(--tg-accent);
}

/* Optioneel: subtiele bullet-styling binnen cellen */
.tablepress.tg-pricing td ul {
	margin: 0;
	padding-left: 1.1rem;
}

.tablepress.tg-pricing td li {
	color: var(--tg-muted);
}

/* Linkkleur in tabel (niet-knoppen) */
.tablepress.tg-pricing td a:not(.tg-btn) {
	color: var(--tg-accent);
}

/* Visuele focus voor toetsenbordnavigatie */
.tablepress.tg-pricing a:focus {
	outline: 2px solid var(--tg-accent);
	outline-offset: 2px;
}

/* Lettertype en algemene stijl */
.tablepress.tg-pricing {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400; /* standaard regular */
}

/* Kopteksten */
.tablepress.tg-pricing thead th {
	font-weight: 700;
}

/* Alle prijzen in de tabel dikgedrukt */
.tablepress.tg-pricing tbody td {
/* Pas eventueel aan als je niet alles bold wil */
}

.tablepress.tg-pricing tbody td:nth-child(n+2) {
	font-weight: 700;
}

/* Optioneel: Montserrat bold voor de lidmaatschapsnamen ook */
.tablepress.tg-pricing tbody td:first-child strong {
	font-weight: 700;
}

/* ===== Overrides volgens je wensen (zet dit ONDERAAN) ===== */
/* 1) Hele bovenste rij egaal zwart (zoals de laatste 3 cellen) */
.tablepress.tg-pricing thead th {
	background: #000 !important;
	color: #fff !important;
	border-bottom: 1px solid #000; /* optioneel: naadloos zwart */
}

/* 2) Geen groen ‘badge’-randje meer rond KRAV MAGA BASIC / ALL IN */
.tablepress.tg-pricing tbody td:first-child strong {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	color: inherit !important;
}

/* 3) Prijzen horizontaal én verticaal centreren */
/* Verticaal centreren van álle cellen (mag ook) */
.tablepress.tg-pricing td {
	vertical-align: middle;
}

/* Alleen de prijs-kolommen (alles vanaf kolom 2) horizontaal centreren */
.tablepress.tg-pricing tbody td:nth-child(n+2),
.tablepress.tg-pricing thead th:nth-child(n+2) {
	text-align: center;
}

/* (optioneel) Eerste kolom met namen/omschrijving links houden */
.tablepress.tg-pricing tbody td:first-child,
.tablepress.tg-pricing thead th:first-child {
	text-align: left;
}

/* Hele header zwart, ook de eerste cel */
.tablepress.tg-pricing thead th {
	background: #000 !important;
	color: #fff !important;
}

/* Specifiek de eerste headercel forceren */
.tablepress.tg-pricing thead th:first-child {
	background: #000 !important;
}

/* HEADER 100% zwart – ongeacht sorteer-states of themakleuren */
.tablepress.tg-pricing thead th,
.tablepress.tg-pricing thead tr th,
.tablepress.tg-pricing thead th:first-child,
.tablepress.tg-pricing thead th.column-1,
.tablepress.tg-pricing thead th.sorting,
.tablepress.tg-pricing thead th.sorting_asc,
.tablepress.tg-pricing thead th.sorting_desc {
	background: #000 !important;
	background-image: none !important;
	color: #fff !important;
	box-shadow: none !important;
	border-color: #000 !important;
}

/* Ronding linksboven blijft netjes zwart */
.tablepress.tg-pricing thead th:first-child {
	border-top-left-radius: 16px !important;
}

/* "Bewerken" verbergen in meer thema's/posities */
.tablepress.tg-pricing ~ .post-edit-link,
.tablepress.tg-pricing ~ .edit-link,
.post-edit-link,
.edit-link {
	display: none !important;
}

/* Header echt 100% zwart, ook bij DataTables sorteer-states */
.tablepress.tg-pricing thead,
.tablepress.tg-pricing thead tr {
	background: #000 !important;
}

.tablepress.tg-pricing thead th,
.tablepress.tg-pricing thead th:first-child,
.tablepress.tg-pricing thead th.column-1,
.dt-container .tablepress.tg-pricing thead th,
.dt-container .tablepress.tg-pricing thead th.sorting,
.dt-container .tablepress.tg-pricing thead th.sorting_asc,
.dt-container .tablepress.tg-pricing thead th.sorting_desc,
.tablepress.tg-pricing thead th.sorting,
.tablepress.tg-pricing thead th.sorting_asc,
.tablepress.tg-pricing thead th.sorting_desc {
	background: #000 !important;
	background-image: none !important;
	color: #fff !important;
	box-shadow: none !important;
	border-color: #000 !important;
}

/* Soms zit de kleur op pseudo-elementen of wrappers */
.tablepress.tg-pricing thead th::before,
.tablepress.tg-pricing thead th::after {
	background: transparent !important;
}

/* Linkerboven hoek netjes zwart en rond */
.tablepress.tg-pricing thead th:first-child {
	border-top-left-radius: 16px !important;
}

/* ===== Mobiel: géén stacked weergave, gewoon de tabel houden ===== */
@media (max-width: 720px) {
	/* Draai de eerdere display:block-regels terug */
	.tablepress.tg-pricing {
		display: table !important;
		table-layout: fixed; /* kolommen krimpen netter */
		width: 100%;
	}

	.tablepress.tg-pricing thead {
		display: table-header-group !important;
	}

	.tablepress.tg-pricing tbody {
		display: table-row-group !important;
	}

	.tablepress.tg-pricing tr {
		display: table-row !important;
	}

	.tablepress.tg-pricing th,
	.tablepress.tg-pricing td {
		display: table-cell !important;
	}

	/* Compacter: minder padding en kleinere tekst */
	.tablepress.tg-pricing th,
	.tablepress.tg-pricing td {
		padding: 10px 8px !important;
		font-size: .95rem;
		line-height: 1.2;
	}

	/* Kop iets kleiner */
	.tablepress.tg-pricing thead th {
		font-size: 1rem !important;
	}

	/* Prijs-kolommen mogen iets kleiner en niet afkappen */
	.tablepress.tg-pricing tbody td:nth-child(n+2) {
		white-space: nowrap; /* prijzen blijven op één regel */
		font-size: 1rem;
	}

	/* Als het toch breder is dan het scherm: swipe/scroll */
	.tablepress.tg-pricing {
		overflow-x: auto;
		display: block !important; /* nodig om overflow te laten werken */
	}

	.tablepress.tg-pricing table {
		width: 100%;
	}
}

/* === Gelijke kolombreedtes voor prijs-kolommen === */
/* Stel in hoeveel ruimte kolom 1 (naam/omschrijving) krijgt */
:root {
	--tg-first-col: 34%; /* pas aan naar smaak */
	--tg-price-col: calc((100% - var(--tg-first-col)) / 4);
}

/* Zorg dat de tabel vaste kolombreedtes respecteert */
.tablepress.tg-pricing {
	table-layout: fixed;
}

/* Kolom 1 = breedte voor omschrijving */
.tablepress.tg-pricing thead th:first-child,
.tablepress.tg-pricing tbody td:first-child {
	width: var(--tg-first-col) !important;
}

/* Kolommen 2 t/m 5 = alle prijzen even breed (zoals "3 maanden") */
.tablepress.tg-pricing thead th:nth-child(n+2):nth-child(-n+5),
.tablepress.tg-pricing tbody td:nth-child(n+2):nth-child(-n+5) {
	width: var(--tg-price-col) !important;
	white-space: nowrap; /* prijzen op één regel */
}