/* traint.me componenten — herbruikbaar door de hele site.
   Specs: ~/claude-projecten/wordpress/design-regels.md */

/* ---------- Scharnier / hinge (§5) ---------- */
.tm-hinge {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 0 8px;
	pointer-events: none;
}
/* Compactere top-padding wanneer hinge direct na page-hero komt —
   zorgt dat breadcrumb → stippellijn niet onnodig veel lucht heeft. */
.tm-page-hero + .tm-hinge {
	padding-top: 8px;
}
.tm-hinge__line {
	width: 1px;
	height: 56px;
	border-left: 1px dashed rgba(30, 27, 75, 0.20);
}
.tm-hinge__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tm-orange);
	margin-top: 10px;
}
.tm-hinge__label {
	margin-top: 14px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tm-ink-mute);
	line-height: 1;
}

/* Mobile: scharnier iets compacter */
@media (max-width: 767px) {
	.tm-hinge {
		padding: 20px 0 4px;
	}
	.tm-hinge__line {
		height: 40px;
	}
}

/* Smal mobile: scharnier maximaal compact + section-spacing rond hinge omlaag.
   De Elementor-sections op de homepage hebben default ~60-80px top/bottom padding
   die op 390px-screens onevenredig veel lucht geeft tussen content en hinge. */
@media (max-width: 479px) {
	.tm-hinge {
		padding: 8px 0 2px;
	}
	.tm-hinge__line {
		height: 24px;
	}
	.tm-hinge__dot {
		margin-top: 6px;
	}
	.tm-hinge__label {
		margin-top: 8px;
	}
	/* `!important` om Elementor's per-section padding-overrides in
	   /uploads/elementor/css/post-13480.css op smal mobile op te heffen;
	   die zijn op desktop bedoeld (60-95px) en op 390px viewports onevenredig. */
	body.home .elementor-section.elementor-top-section {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
}

/* ---------- Sectie-head (§2 / §3) ---------- */
.tm-section-head {
	max-width: 720px;
	margin: 24px 0 36px;
	text-align: left;
}
.tm-section-head--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.tm-section-head__eyebrow {
	display: block;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tm-ink-mute);
	margin: 0 0 16px;
	line-height: 1;
}
.tm-section-head__title {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 38px;
	font-weight: 800;
	line-height: 1.10;
	letter-spacing: -0.015em;
	color: var(--tm-ink);
	margin: 0;
	text-wrap: balance;
	text-transform: none;
}
.tm-section-head__accent {
	color: var(--tm-orange);
}
.tm-section-head__lede {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--tm-ink-soft);
	margin: 16px 0 0;
}

@media (max-width: 767px) {
	.tm-section-head__title {
		font-size: 28px;
	}
	.tm-section-head__lede {
		font-size: 16px;
	}
}

/* ---------- Trainer-blok (§3 2-kolom, §7 primary button) ---------- */
.tm-trainer {
	display: grid;
	grid-template-columns: minmax(260px, 340px) 1fr;
	gap: 64px;
	align-items: center;
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 0;
}

.tm-trainer__photo {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 24px 50px rgba(30, 27, 75, 0.14);
	background:
		radial-gradient(circle at 35% 25%, #FFE6D0 0%, #E8A77A 55%, #C97D52 100%);
}
.tm-trainer__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tm-trainer__photo-caption {
	position: absolute;
	bottom: 18px;
	left: 0;
	right: 0;
	text-align: center;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tm-ink-mute);
	line-height: 1;
}

.tm-trainer__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.tm-trainer__title {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 38px;
	font-weight: 800;
	line-height: 1.10;
	letter-spacing: -0.015em;
	color: var(--tm-ink);
	margin: 0;
	text-wrap: balance;
	text-transform: none;
}
.tm-trainer__accent {
	color: var(--tm-orange);
}

.tm-trainer__body {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--tm-ink-soft);
	margin: 0;
	max-width: 600px;
}

.tm-trainer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.tm-trainer__list-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--tm-ink);
	line-height: 1.45;
}
.tm-trainer__list-item svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--tm-orange);
}

.tm-trainer__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--tm-purple);
	color: #fff;
	padding: 15px 26px;
	border-radius: 10px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	align-self: flex-start;
	line-height: 1;
	transition: background .15s ease, transform .15s ease;
}
.tm-trainer__cta:hover {
	background: var(--tm-purple-deep);
	color: #fff;
	transform: translateY(-1px);
}
.tm-trainer__cta svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 899px) {
	.tm-trainer {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 16px 0;
	}
	.tm-trainer__photo {
		max-width: 360px;
		margin: 0 auto;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.tm-trainer__title {
		font-size: 28px;
	}
	.tm-trainer__body {
		font-size: 16px;
	}
}

/* ---------- Stats-strip (§1 donker blok, §2 cijfers, §3 radius) ---------- */
.tm-stats {
	position: relative;
	max-width: 1312px;
	margin: 0 auto;
	background: var(--tm-ink);
	color: #fff;
	border-radius: 18px;
	padding: 32px 40px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 32px;
	align-items: center;
	overflow: hidden;
}
/* Subtiele dashed cirkels op de hoeken — cirkel-DNA in donkere blokken */
.tm-stats::before,
.tm-stats::after {
	content: "";
	position: absolute;
	width: 220px;
	height: 220px;
	border: 1px dashed rgba(255, 255, 255, 0.10);
	border-radius: 50%;
	pointer-events: none;
}
.tm-stats::before {
	top: -110px;
	right: -60px;
}
.tm-stats::after {
	bottom: -110px;
	left: -60px;
}

.tm-stats__intro {
	position: relative;
	z-index: 1;
	max-width: 280px;
}
.tm-stats__title {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 0 0 8px;
	text-transform: none;
}
.tm-stats__accent {
	color: var(--tm-orange);
}
.tm-stats__lede {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.65);
	margin: 0;
	line-height: 1.5;
}

.tm-stat {
	position: relative;
	z-index: 1;
}
.tm-stat__number {
	display: inline-flex;
	align-items: baseline;
}
.tm-stat__value {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.tm-stat__suffix {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 18px;
	font-weight: 800;
	color: var(--tm-orange);
	margin-left: 2px;
	line-height: 1;
}
.tm-stat__label {
	margin-top: 10px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.3;
	white-space: nowrap;
}
@media (max-width: 479px) {
	/* Op smalste mobile font + spacing iets terug zodat 'Trainingen in het
	   portfolio' / 'Beveelt traint.me aan' op één regel passen. */
	.tm-stat__label {
		font-size: 10px;
		letter-spacing: 0.08em;
	}
}
.tm-stat__stars {
	margin-left: 12px;
	align-self: center;
	height: 18px;
	width: auto;
	flex-shrink: 0;
}

@media (max-width: 899px) {
	.tm-stats {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
		padding: 28px 28px;
	}
	.tm-stats__intro {
		grid-column: 1 / -1;
		max-width: none;
	}
}

@media (max-width: 539px) {
	/* 3 stats naast elkaar onder de intro: tile blijft compact en de
	   getallen zijn in één oogopslag te scannen. Labels mogen wrappen
	   over 2 regels — anders past 'Beveelt traint.me aan' niet. */
	.tm-stats {
		grid-template-columns: repeat(3, 1fr);
		padding: 24px 18px;
		gap: 18px 12px;
	}
	.tm-stats__intro {
		grid-column: 1 / -1;
	}
	.tm-stat__value {
		font-size: 26px;
	}
	.tm-stat__suffix {
		font-size: 14px;
	}
	.tm-stat__label {
		white-space: normal;
		font-size: 9px;
		letter-spacing: 0.05em;
		margin-top: 6px;
	}
}

/* ---------- Contact-strip (§1 paars blok, §3 radius + dashed cirkel-DNA) ---------- */
.tm-contact {
	position: relative;
	max-width: 1312px;
	margin: 0 auto;
	background: var(--tm-purple);
	color: #fff;
	border-radius: 18px;
	padding: 36px 48px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 32px;
	align-items: center;
	overflow: hidden;
}
/* Cirkel-DNA hoekdecoratie */
.tm-contact::before,
.tm-contact::after {
	content: "";
	position: absolute;
	width: 240px;
	height: 240px;
	border: 1px dashed rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	pointer-events: none;
}
.tm-contact::before {
	top: -120px;
	right: -80px;
}
.tm-contact::after {
	bottom: -120px;
	left: -80px;
}

.tm-contact__cell {
	position: relative;
	z-index: 1;
}
.tm-contact__cell:first-child {
	text-align: right;
}
.tm-contact__cell:last-child {
	text-align: left;
}
.tm-contact__label {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 6px;
	line-height: 1;
}
.tm-contact__value {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #fff;
	text-decoration: none;
	line-height: 1.2;
	transition: color .15s ease;
}
a.tm-contact__value:hover {
	color: var(--tm-orange);
}

.tm-contact__connector {
	position: relative;
	z-index: 1;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #fff;
	color: var(--tm-purple);
	display: grid;
	place-items: center;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-weight: 800;
	font-size: 14px;
	font-style: normal;
	box-shadow: 0 6px 18px rgba(30, 27, 75, 0.22);
}

@media (max-width: 767px) {
	.tm-contact {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 28px 24px;
		text-align: center;
	}
	.tm-contact__cell:first-child,
	.tm-contact__cell:last-child {
		text-align: center;
	}
	.tm-contact__connector {
		justify-self: center;
		width: 44px;
		height: 44px;
		font-size: 13px;
	}
	.tm-contact__value {
		font-size: 20px;
	}
}

/* ---------- Footer (design-regels §1 + §2 + §7) ---------- */
.tm-footer {
	background: var(--tm-bg);
	color: var(--tm-ink-soft);
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-weight: 500;
	border-top: 1px solid var(--tm-line);
	padding: 56px 24px 28px;
}
.tm-footer__inner {
	max-width: 1312px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
	gap: 56px;
	align-items: start;
}
/* Reset alle <li>-margins die parent-theme injecteert */
.tm-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tm-footer ul li {
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

/* Brand column */
.tm-footer__col--brand {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.tm-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}
.tm-footer__logo img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}
.tm-footer__wordmark {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1;
}
.tm-footer__wordmark .traint { color: var(--tm-ink); }
.tm-footer__wordmark .me     { color: var(--tm-orange); }
.tm-footer__about {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--tm-ink-soft);
}
.tm-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	line-height: 1.4;
}
.tm-footer__contact li {
	color: var(--tm-ink-soft);
}
.tm-footer__contact a {
	color: var(--tm-ink-soft);
	text-decoration: none;
	transition: color .15s ease;
}
.tm-footer__contact a:hover {
	color: var(--tm-purple);
}

/* Link columns */
.tm-footer__heading {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tm-ink-mute);
	margin: 0 0 18px;
	line-height: 1;
}
.tm-footer__links {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tm-footer__links a {
	color: var(--tm-ink);
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	display: inline-block;
	transition: color .15s ease;
}
.tm-footer__links a:hover {
	color: var(--tm-purple);
}

/* Newsletter column */
.tm-footer__col--newsletter {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.tm-footer__newsletter-lede {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--tm-ink-soft);
}
.tm-footer__newsletter-form {
	display: flex;
	gap: 0;
	margin: 4px 0 0;
}
.tm-footer__newsletter-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 16px;
	border: 1px solid var(--tm-line);
	border-right: none;
	border-radius: 8px 0 0 8px;
	background: #fff;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 14px;
	color: var(--tm-ink);
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.tm-footer__newsletter-input::placeholder {
	color: var(--tm-ink-mute);
}
.tm-footer__newsletter-input:focus {
	border-color: var(--tm-purple);
	box-shadow: 0 0 0 3px rgba(91, 79, 229, 0.18);
	border-right: 1px solid var(--tm-purple);
}
.tm-footer__newsletter-cta {
	background: var(--tm-purple);
	color: #fff;
	border: 0;
	padding: 12px 22px;
	border-radius: 0 8px 8px 0;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: background .15s ease;
	white-space: nowrap;
}
.tm-footer__newsletter-cta:hover {
	background: var(--tm-purple-deep);
}

/* Bevestigings-/foutmelding na submit (zichtbaar bij ?nl=pending / ?nl=err).
   `?nl=confirmed` redirect't naar de aparte /inschrijving-bevestigd/-pagina,
   `?nl=invalid` rendert een footer-flash met --err-styling. */
.tm-footer__newsletter-msg {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 500;
}
.tm-footer__newsletter-msg--ok  { color: #1F8F4E; }
.tm-footer__newsletter-msg--err { color: #C0392B; }

.tm-footer__socials {
	display: flex;
	gap: 10px;
	margin-top: 6px;
}
.tm-footer__social {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--tm-line);
	background: #fff;
	color: var(--tm-ink);
	display: grid;
	place-items: center;
	transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.tm-footer__social:hover {
	color: var(--tm-purple);
	border-color: var(--tm-purple);
	transform: translateY(-1px);
}
.tm-footer__social svg {
	width: 16px;
	height: 16px;
}

/* Legal row.
   Symmetrische horizontale padding (80px) zodat de "Cookies"-link op brede
   en smalle viewports niet onder de fixed back-to-top button valt
   (parent EduBlink: `.devsblink-progress-parent` op right:30, 46px breed → 76px
   footprint vanaf de viewport-rand). Tegelijk schuift het copyright-blok
   even ver van de linkerkant, zodat de rij visueel gebalanceerd blijft. */
.tm-footer__legal {
	max-width: 1312px;
	margin: 32px auto 0;
	padding: 22px 80px 0;
	border-top: 1px solid var(--tm-line);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: var(--tm-ink-mute);
}
.tm-footer__legal-left {
	line-height: 1.4;
}
.tm-footer__sep {
	margin: 0 4px;
	color: var(--tm-ink-mute);
}
.tm-footer__legal-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 16px;
}
.tm-footer__legal-links a {
	color: var(--tm-ink-mute);
	text-decoration: none;
	transition: color .15s ease;
}
.tm-footer__legal-links a:hover {
	color: var(--tm-purple);
}

@media (max-width: 1023px) {
	.tm-footer {
		padding: 48px 32px 24px;
	}
	.tm-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
}

@media (max-width: 599px) {
	.tm-footer__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.tm-footer__legal {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Smal mobile: kleinere footer-padding én newsletter-form vertikaal stacken,
   anders duwt de input + 'Inschrijven'-knop de column buiten viewport. */
@media (max-width: 479px) {
	.tm-footer {
		padding-left: 16px;
		padding-right: 16px;
	}
	.tm-footer__newsletter-form {
		flex-direction: column;
		gap: 8px;
	}
	.tm-footer__newsletter-input {
		border-right: 1px solid var(--tm-line);
		border-radius: 8px;
	}
	.tm-footer__newsletter-input:focus {
		border-right-color: var(--tm-purple);
	}
	.tm-footer__newsletter-cta {
		border-radius: 8px;
		width: 100%;
	}
	/* Legal-blok netjes gecentreerd; padding-right vrijhouden voor de
	   parent-theme scroll-up-knop zodat 'Cookies' niet eronder verdwijnt. */
	.tm-footer__legal {
		padding: 22px 60px 16px 16px;
		align-items: center;
		text-align: center;
	}
	.tm-footer__legal-left {
		text-align: center;
	}
	.tm-footer__legal-links {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 16px;
	}
}

/* ---------- EduBlink testimonial Style 1 — overrides ----------
   We laten de Swiper-carrousel intact (animatie blijft) en stylen alleen
   de kaart visueel om aan design-regels te voldoen:
   - Avatar + quote-bubble overlay verborgen (geen namen/foto's)
   - Velden hergebruiken: h5.title = locatie, span.subtitle = training
   - Witte kaart, dunne border, radius 14px, paarse quote-mark rechtsboven
   - Sterren oranje, copy in --tm-ink-soft */

.eb-testimonial-wrapper-style-1 {
	/* Achtergrond-decoraties (zoals dotted patterns) van EduBlink uit */
	background-image: none !important;
}
.eb-testimonial-wrapper-style-1 .eb-testimonial-item {
	/* Geen eigen kaart-styling: de inner .eb-testimonial-grid is al de witte kaart.
	   `display: flow-root` voorkomt margin-collapse zodat de 30px top-margin van
	   de inner grid daadwerkelijk binnen deze container telt — die ruimte is
	   waar de oranje quote rechtsboven hangt. */
	background: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	position: relative;
	overflow: visible;
	box-shadow: none;
	display: flow-root;
}
/* Edublink-default decoraties op outer ::before uit. */
.eb-testimonial-wrapper-style-1 .eb-testimonial-item::before {
	content: none;
	background: none !important;
	background-image: none !important;
}
/* Oranje quote-mark BUITEN de witte kaart, in de top-marge-strook van de outer.
   Outer heeft display:flow-root + overflow:visible — quote hangt boven de kaart. */
.eb-testimonial-wrapper-style-1 .eb-testimonial-item::after {
	content: "\201D";
	position: absolute;
	top: -8px;
	right: 12px;
	font-family: "Plus Jakarta Sans", "Montserrat", sans-serif;
	font-size: 48px;
	font-weight: 800;
	line-height: 1;
	color: var(--tm-orange);
	pointer-events: none;
	z-index: 2;
	background: transparent !important;
	background-image: none !important;
}

/* Avatar-thumbnail volledig verbergen */
.eb-testimonial-wrapper-style-1 .eb-testimonial-grid .thumbnail {
	display: none !important;
}

/* EduBlink's default `.eb-testimonial-grid:after` zet een dotted-pattern PNG
   (testimonial-1-shape-1.png). Andere stijlen (2/6/7/9/10/13/15) hide 'm al;
   Style 1 niet — daarom hier expliciet uit. */
.eb-testimonial-wrapper-style-1 .eb-testimonial-grid::after {
	content: none !important;
	display: none !important;
}

/* Content: grid-areas zodat we velden kunnen herschikken zonder HTML-edit.
   Bron-volgorde in DOM: description, rating-icon, h5.title, span.subtitle.
   Doel-volgorde: title + subtitle (één regel) → sterren → quote. */
.eb-testimonial-wrapper-style-1 .eb-testimonial-grid {
	display: block;
}
.eb-testimonial-wrapper-style-1 .eb-testimonial-grid .content {
	display: grid;
	grid-template-areas:
		"title subtitle"
		"stars stars"
		"quote quote";
	grid-template-columns: auto 1fr;
	column-gap: 6px;
	row-gap: 12px;
	align-items: baseline;
	padding: 0;
	background: none;
	box-shadow: none;
}
.eb-testimonial-wrapper-style-1 .eb-testimonial-grid .content .title {
	grid-area: title;
	margin: 0;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: var(--tm-ink);
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
}
.eb-testimonial-wrapper-style-1 .eb-testimonial-grid .content .subtitle {
	grid-area: subtitle;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--tm-ink-soft);
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
}
.eb-testimonial-wrapper-style-1 .eb-testimonial-grid .content .subtitle::before {
	content: "·";
	color: var(--tm-ink-mute);
	margin-right: 4px;
	font-weight: 800;
}
.eb-testimonial-wrapper-style-1 .eb-testimonial-grid .content .rating-icon {
	grid-area: stars;
	color: var(--tm-orange);
	font-size: 14px;
	line-height: 1;
	display: inline-flex;
	gap: 3px;
}
.eb-testimonial-wrapper-style-1 .eb-testimonial-grid .content .rating-icon i {
	color: var(--tm-orange);
}
.eb-testimonial-wrapper-style-1 .eb-testimonial-grid .content .description {
	grid-area: quote;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--tm-ink-soft);
	line-height: 1.55;
	margin: 0;
	padding-right: 36px;
}
.eb-testimonial-wrapper-style-1 .eb-testimonial-grid .content .description::before {
	content: "\201C";
	margin-right: 1px;
}
.eb-testimonial-wrapper-style-1 .eb-testimonial-grid .content .description::after {
	content: "\201D";
	margin-left: 1px;
}


/* ---------------------------------------------------------------------------
 * tm-archive-hero — page-hero op /courses/ (en cursus-taxonomie-archieven).
 * Vervangt EduBlink's standaard "Archieven: …"-titel.
 * ------------------------------------------------------------------------- */
.tm-archive-hero {
	background: var(--tm-bg, #FAFAFC);
	padding: clamp(48px, 8vw, 96px) 16px clamp(40px, 6vw, 64px);
}
.tm-archive-hero__inner {
	max-width: 1440px;
	margin: 0 auto;
	text-align: center;
}
.tm-archive-hero__title {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 800;
	line-height: 1.05;
	color: var(--tm-ink, #1E1B4B);
	margin: 0 0 16px;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.tm-archive-hero__accent {
	color: var(--tm-orange, #FF8A1F);
}
.tm-archive-hero__breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	gap: 10px;
	font-size: 0.95rem;
	color: var(--tm-ink-mute, #767492);
}
.tm-archive-hero__breadcrumb li + li::before {
	content: "›";
	margin-right: 10px;
	color: var(--tm-orange, #FF8A1F);
}
.tm-archive-hero__breadcrumb a {
	color: var(--tm-orange, #FF8A1F);
	text-decoration: none;
}
.tm-archive-hero__breadcrumb a:hover {
	text-decoration: underline;
}
.tm-archive-hero__breadcrumb [aria-current="page"] span {
	color: var(--tm-ink-soft, #4A4870);
}

/* ---------------------------------------------------------------------------
 * tm-logo — site-logo: orange "d" badge + "traint.me" wordmark.
 * Override van EduBlink's the_custom_logo() output. Hoogte vast op 40px
 * zodat 'm in alle headers (sticky/normaal) consistent oogt.
 * ------------------------------------------------------------------------- */
/* Force de logo-wrapper om verticaal te centreren binnen .site-branding,
   zodat 'm op één lijn met het menu staat. */
.edublink-header-area .site-branding,
.edublink-header-area .logo-wrapper {
	align-items: center !important;
	align-self: center !important;
	display: flex !important;
}
.edublink-header-area a.tm-logo,
.tm-logo {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px !important;
	text-decoration: none !important;
	line-height: 1 !important;
	height: 48px;
	padding: 0 !important;
	margin: 0 !important;
}
.edublink-header-area .tm-logo .tm-logo__icon,
img.tm-logo__icon {
	width: 48px !important;
	height: 48px !important;
	max-height: 48px !important;
	flex: 0 0 48px;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: middle;
	align-self: center;
}
.tm-logo .tm-logo__wordmark {
	display: inline-flex;
	align-items: center;
	align-self: center;
	height: 48px;
	margin: 0;
	padding: 0;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--tm-ink, #1E1B4B);
	line-height: 1;
	white-space: nowrap;
}
.tm-logo__accent {
	color: var(--tm-orange, #FF8A1F);
}
.tm-logo:hover .tm-logo__wordmark { color: var(--tm-ink, #1E1B4B); }

/* Verberg de oude <img class="site-logo"> die EduBlink elders nog kan
   renderen (bv. in de mobile-header), zodat alleen de tm-logo wordmark
   doorkomt. tm-logo__icon zelf heeft .site-logo en blijft wel zichtbaar. */
.logo-wrapper > a:not(.tm-logo) > img.site-logo { max-height: 40px; }

/* ---------------------------------------------------------------------------
 * Header-breedte gelijk aan hero (max 1440px, gecentreerd).
 * EduBlink rendert het header-blok in container-fluid (full-bleed); we
 * trekken het terug naar dezelfde breedte als de pagina-content.
 * ------------------------------------------------------------------------- */
.edublink-header-area .edublink-container-fluid {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(16px, 4vw, 64px);
	padding-right: clamp(16px, 4vw, 64px);
}

/* ---------------------------------------------------------------------------
 * Site-wide bg fixes (hogere specificiteit dan EduBlink's body { background })
 * ------------------------------------------------------------------------- */
html,
body,
#content,
.site-content,
.site-content-inner,
.edublink-main-content-inner,
.site-header,
.edublink-header-area {
	background: var(--tm-bg, #FAFAFC) !important;
}

/* Sub-menus (Over dropdown), mega-menu en de Trainingen-categorie krijgen
 * dezelfde achtergrond als de header zelf, zodat ze visueel doorlopen.
 * Selector via #masthead voor maximale specificiteit (ID + class). */
header#masthead ul.edublink-dropdown-menu,
header#masthead .sub-cat-dropdown,
header#masthead .edublink-mega-menu {
	background-color: var(--tm-bg, #FAFAFC) !important;
	/* Schaduw alleen naar beneden: y-offset ≥ blur, anders bleed-up over menu. */
	box-shadow: 0 14px 14px rgba(0, 0, 0, 0.08) !important;
}

/* Header boven content. Parent zet .site-header op z-index:2 — te laag naast
   `.hero-c5__step` (z:3) en andere absolute badges, waardoor de Over-dropdown
   onder de cirkel-pillen verdwijnt op homepage en op pagina's met tm-page-hero. */
.site-header,
.edublink-sticky-header-wrapper {
	z-index: 100;
}

/* ---------------------------------------------------------------------------
 * Hero-tekst groter + breadcrumb leesbaar.
 * Design-regels §2: H1 60px / 800 / 1.05; we gaan bewust naar 72-88 voor
 * impact op archive-pagina's. Breadcrumb: --tm-ink-soft i.p.v. mute.
 * ------------------------------------------------------------------------- */
.tm-archive-hero {
	padding-top: clamp(72px, 9vw, 128px);
	padding-bottom: 32px;
}
.tm-archive-hero__title {
	font-size: clamp(2.5rem, 6vw, 5.5rem); /* tot 88px op wide screens */
	margin-bottom: 24px;
}
.tm-archive-hero__breadcrumb ol {
	font-size: 1.375rem;
	font-weight: 500;
	gap: 16px;
}
.tm-archive-hero__breadcrumb a {
	color: var(--tm-orange, #FF8A1F);
	font-weight: 500;
}
.tm-archive-hero__breadcrumb a:hover {
	color: var(--tm-orange, #FF8A1F);
	text-decoration: underline;
}
.tm-archive-hero__breadcrumb [aria-current="page"] span {
	color: var(--tm-ink, #1E1B4B);
	font-weight: 500;
}
.tm-archive-hero__breadcrumb li + li::before {
	color: var(--tm-ink-mute, #767492);
}

/* Subtiele horizontale streep onder de hero, vóór de scharnier — design-regels §1
   geen kleurblok, wél een dunne 1px lijn als rust-overgang. */
.tm-archive-divider {
	max-width: 1440px;
	margin: 0 auto;
	border-top: 1px solid var(--tm-line, #ECEAF6);
}

/* ---------------------------------------------------------------------------
 * Header: zoekveld als 40px pill in 40px wrapper, op gelijke hoogte met de
 * menu-items en de account-pill ernaast.
 *
 * Zie LESSONS.md (2026-05-01 — EduBlink header-structuur) voor de volledige
 * DOM-uitleg. Korte versie:
 *  - Hoogte 40px (NIET 50px) — anders steekt de pill onder de menu-bullets uit.
 *  - max-width: 140px is compact en proportioneel met de account-pill.
 *  - Shrinken creëert extra ruimte LINKS van "Trainingen" (menu rechts uitgelijnd
 *    binnen flex:1), niet tussen "Contact" en de pill.
 * ------------------------------------------------------------------------- */
/* SEARCH-PILL — collapsed: 40px-rondje met vergrootglas. Op focus expandeert
   het rondje naar links (right-anchored) over het menu, input wordt zichtbaar.
   Eerste klik op de submit-button focust het input via JS (zie tm-components.js);
   tweede klik (form-submit) gaat dan door naar de search-resultpagina. */
.edublink-header-area .edu-header-search-field {
	display: inline-flex !important;
	height: 40px !important;
	width: 40px !important;
	max-width: 40px !important;
	margin: 0 8px !important;
	padding: 0 !important;
	flex-shrink: 0;
	position: relative;
	align-self: center;
	border: 0 !important;
}
.edublink-header-area .edu-header-search-field .inner {
	position: absolute;
	right: 0;
	top: 0;
	height: 40px !important;
	width: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--tm-line, #ECEAF6) !important;
	overflow: hidden;
	display: flex !important;
	align-items: center !important;
	line-height: 1 !important;
	transition: width 0.3s ease;
	z-index: 6;
}
.edublink-header-area .edu-header-search-field:focus-within .inner {
	width: 173px !important;
	background: var(--tm-line, #ECEAF6) !important;
	box-shadow: 0 4px 16px rgba(30, 27, 75, 0.08);
}
.edublink-header-area .edu-header-search-field .inner form,
.edublink-header-area .edu-header-search-field .inner form.search-form {
	height: 40px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	display: flex !important;
	align-items: center !important;
	line-height: 1 !important;
	position: relative;
}
.edublink-header-area .edu-header-search-field .inner input,
.edublink-header-area .edu-header-search-field .inner input[type="text"] {
	height: 40px !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 48px 0 18px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 13px !important;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif !important;
	font-weight: 500 !important;
	line-height: 40px !important;
	color: var(--tm-ink, #1E1B4B) !important;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s 0.1s ease;
}
.edublink-header-area .edu-header-search-field:focus-within .inner input {
	opacity: 1;
	pointer-events: auto;
}
.edublink-header-area .edu-header-search-field .inner input::placeholder {
	color: var(--tm-ink-mute, #767492) !important;
	font-weight: 500;
	opacity: 1;
}

/* Vergrootglas-knop: rechts vast, altijd zichtbaar */
.edublink-header-area .edu-header-search-field .inner .submit-button,
.edublink-header-area .search-form .submit-button {
	display: flex !important;
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	border: 0 !important;
	cursor: pointer;
	color: var(--tm-ink-soft, #4A4870) !important;
	transition: color 0.2s ease;
	z-index: 2;
	padding: 0 !important;
}
.edublink-header-area .edu-header-search-field .submit-button:hover {
	color: var(--tm-purple) !important;
}
.edublink-header-area .edu-header-search-field .submit-button i {
	font-size: 14px;
	line-height: 1;
}

/* Verberg de hele `.header-quote`-wrapper rondom de search-trigger button.
 * NB: alleen `.quote-icon.quote-search` verbergen is niet genoeg — de outer
 * `.header-quote` heeft `margin: 0 -17px` (EduBlink main.css ~3813), wat
 * elementen ernaast (zoekveld, account-widget) 17px naar elkaar toe trekt en
 * pills laat overlappen. */
.edublink-header-area .header-quote { display: none !important; }

/* ---------------------------------------------------------------------------
 * Header: Inloggen / Inschrijven pills (uitgelogd) + avatar (ingelogd).
 * Komt uit inc/tm-header-account.php, gehangen aan
 * `edublink_header_right_after_content` na het zoekveld.
 * ------------------------------------------------------------------------- */
.tm-header-account {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-left: 8px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 14px;
	line-height: 1;
}
/* Balans: search-margin-right (8) + account-margin-left (8) + link-padding-left (8)
 * = link-padding-right (8) + gap (16) → 24px aan weerszijden van "Inloggen". */

/* Uitgelogd: tekst-link "Inloggen" + oranje pill "Inschrijven" */
.tm-header-account__link {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 8px;
	color: var(--tm-ink, #1E1B4B);
	font-weight: 600;
	text-decoration: none;
	border-radius: 999px;
	transition: color .15s ease, background .15s ease;
}
.tm-header-account__link:hover,
.tm-header-account__link:focus-visible {
	color: var(--tm-orange, #FF8A1F);
	text-decoration: none;
}

.tm-header-account__btn {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--tm-orange, #FF8A1F);
	color: #fff !important;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid var(--tm-orange, #FF8A1F);
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.tm-header-account__btn:hover,
.tm-header-account__btn:focus-visible {
	background: #E8741A;
	border-color: #E8741A;
	color: #fff !important;
	text-decoration: none;
}

/* Ingelogd: avatar + voornaam + uitlog-icoon (compact, 40px hoog) */
.tm-header-account--in {
	gap: 4px;
}
.tm-header-account__user {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 14px 0 4px;
	border-radius: 999px;
	background: var(--tm-line, #ECEAF6);
	color: var(--tm-ink, #1E1B4B);
	text-decoration: none;
	transition: background .15s ease;
	line-height: 1;
}
.tm-header-account__user:hover,
.tm-header-account__user:focus-visible {
	background: #E2DFF2;
	color: var(--tm-ink, #1E1B4B);
	text-decoration: none;
}
.tm-header-account__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tm-orange, #FF8A1F);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	flex: 0 0 auto;
}
.tm-header-account__greet {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
	line-height: 1;
}
.tm-header-account__greet small { display: none; }
.tm-header-account__greet strong { font-weight: 700; }
.tm-header-account__logout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--tm-ink-mute, #767492);
	background: transparent;
	transition: color .15s ease, background .15s ease;
}
.tm-header-account__logout:hover,
.tm-header-account__logout:focus-visible {
	color: var(--tm-orange, #FF8A1F);
	background: var(--tm-orange-soft, #FFF1DF);
}

/* Mobile: verberg de tekst-link en groet om ruimte te besparen, behoud knop/avatar */
@media (max-width: 575px) {
	.tm-header-account__link,
	.tm-header-account__greet { display: none; }
	.tm-header-account__btn { padding: 0 14px; font-size: 13px; }
}


/* Header-breakpoints — schone "optie A" implementatie:
   - ≥1200px: volledig desktop-menu (Edublink default kicks in via .edublink-d-xl-block).
              Trainingen wordt getoond als .header-category mega-menu (9-dot icon + dropdown).
   - 1200-1350px: Edublink verstopt .header-category default; we forceren 'm zichtbaar
                  zodat de mega-menu ook in deze zone werkt.
   - ≤1199px: Edublink hamburger-mode; main-nav weg, mobile-menu open via hamburger.
              Trainingen wordt geïnjecteerd in mobile-menu via inc/tm-header-trainingen.php.
              Search-rondje (40px) en account-pil blijven náást de hamburger zichtbaar.
   - ≤575px: account-pil collapse'd al naar avatar-only (zie .tm-header-account regels). */

/* Edublink hide't `.theme-header-1 .edu-header-search-field` op ≤1699px
   (parent main.css §4196). Wij willen het 40px-search-rondje gewoon zichtbaar
   houden tot in hamburger-mode. */
@media (max-width: 1699px) {
	.theme-header-1 .edublink-header-area .edu-header-search-field {
		display: inline-flex !important;
	}
}

/* Heel smal: alleen logo + hamburger. Search-rondje en account-blok weg.
   Moet ná de 1699px-regel hierboven staan om die te overrulen (gelijke
   specificiteit, last-rule-wins). */
@media (max-width: 599px) {
	.theme-header-1 .edublink-header-area .edu-header-search-field,
	.theme-header-1 .edublink-header-area .tm-header-account { display: none !important; }
}

/* Zoekveld in mobile-menu (hamburger). Markup uit inc/tm-mobile-menu-search.php */
.tm-mobile-menu-search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 24px 24px 16px;
	padding: 0 14px;
	height: 44px;
	background: var(--tm-line, #ECEAF6);
	border-radius: 999px;
}
.tm-mobile-menu-search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 14px;
	color: var(--tm-ink, #1E1B4B);
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
}
.tm-mobile-menu-search input[type="search"]::placeholder {
	color: var(--tm-ink-mute, #767492);
}
.tm-mobile-menu-search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--tm-ink-soft, #4A4870);
	cursor: pointer;
}
.tm-mobile-menu-search button:hover {
	color: var(--tm-orange, #FF8A1F);
}
.tm-mobile-menu-search button i {
	font-size: 16px;
}

/* Edublink hide't `.header-category` (Trainingen-mega-menu) op ≤1350px
   (parent main.css §4236). Houd 'm zichtbaar tot 700px — ook in hamburger-mode
   blijft de Trainingen-knop zichtbaar náást het hamburger-icoon. Onder 700px
   gaat 'm via de mobile-menu. */
@media (min-width: 700px) and (max-width: 1350px) {
	.edublink-header-area .header-category { display: block !important; }
}

/* ---------------------------------------------------------------------------
 * WISHLIST-HARTJE op course-cards en in profiel-wishlist:
 *  - Geen oranje cirkel-achtergrond meer
 *  - Positie: top-right van de course-card (Edublink default; we overrulen
 *    badges.css's static-position-reset op `.tm-cta-row__wishlist`)
 *  - Default state: icomoon outline-heart (\e915) in oranje
 *  - Wishlisted state: FA duotone solid heart (\f004), oranje
 * ------------------------------------------------------------------------- */
/* Course-card maximale breedte — voorkomt dat kaarten in 1-koloms contexten
   (zoals de wishlist-tab op /lp-profile/) over de hele breedte uitrekken.
   In grid-contexten (4-col homepage, /trainingen/-archive) zit elke card-wrap
   al onder de 360px en heeft de regel geen effect. */
.edublink-single-course.course-style-1 {
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
}

.edublink-wishlist-wrapper,
.edublink-single-course.course-style-1 .edublink-wishlist-wrapper,
.edublink-single-course .tm-cta-row__wishlist .edublink-wishlist-wrapper,
.edublink-course-14-hover .edublink-wishlist-wrapper {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	z-index: 5;
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	width: 36px !important;
	height: 36px !important;
	line-height: 1 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	font-size: 0 !important;
	cursor: pointer;
}
.edublink-wishlist-wrapper:hover,
.edublink-single-course.course-style-1 .edublink-wishlist-wrapper:hover,
.edublink-single-course.course-style-1 .eb-wishlisted .edublink-wishlist-wrapper,
.edublink-single-course.course-style-1 .edublink-wishlist-wrapper.on,
.edublink-course-14-hover .edublink-wishlist-wrapper:hover,
.edublink-course-14-hover .eb-wishlisted .edublink-wishlist-wrapper {
	background: transparent !important;
}

/* De `.tm-cta-row__wishlist` <span> die op course-cards rond de button zit
   neemt nu geen ruimte meer in de CTA-row in (button is absolute geplaatst). */
.edublink-single-course .tm-cta-row__wishlist {
	width: 0;
	height: 0;
	flex: 0 0 0;
	overflow: visible;
}

/* `.tm-card-heart` zit als directe child in `.edublink-single-course` (die
   `position: relative` is) zodat het hartje in de échte rechterboven-hoek
   van de kaart staat — niet in `.course-hover-content` (die `top: 50%` is
   en het hartje midden in de kaart zou ankeren). Alleen-zichtbaar bij
   kaart-hover, met fade-in. */
.edublink-single-course .tm-card-heart {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 6;
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}
.edublink-single-course:hover .tm-card-heart {
	opacity: 1;
	pointer-events: auto;
}
.edublink-single-course .tm-card-heart .edublink-wishlist-wrapper {
	position: static !important;
	top: auto !important;
	right: auto !important;
}

/* Default: outline heart als inline SVG (geen font-dependency) */
.edublink-wishlist-wrapper::before,
.edublink-single-course.course-style-1 .edublink-wishlist-wrapper::before,
.edublink-single-course .tm-cta-row__wishlist .edublink-wishlist-wrapper::before,
.edublink-course-14-hover .edublink-wishlist-wrapper::before {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FF8A1F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>') !important;
	width: 24px;
	height: 24px;
	display: inline-block;
	visibility: visible !important;
	font-size: 0 !important;
}

/* Wishlisted: solid heart als inline SVG */
.eb-wishlisted .edublink-wishlist-wrapper::before,
.edublink-wishlist-wrapper.on::before,
.edublink-single-course.course-style-1 .eb-wishlisted .edublink-wishlist-wrapper::before,
.edublink-single-course.course-style-1 .edublink-wishlist-wrapper.on::before,
.edublink-course-14-hover .eb-wishlisted .edublink-wishlist-wrapper::before {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF8A1F"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>') !important;
}

/* Mobile menu opent vanaf rechts (matcht hamburger-positie). Edublink default
   schuift 'm in vanaf links (main.css §4623+4589) — wij flippen naar right. */
.edublink-mobile-menu-nav-wrapper {
	left: auto !important;
	right: -350px !important;
}
.edublink-mobile-menu-nav-wrapper.edublink-mobile-menu-visible {
	left: auto !important;
	right: 0 !important;
}

/* "Trainingen" als extra mobile-menu-item bovenaan, met EduBlink icon-1 ervoor.
   Aangehangen via `edublink_mobile_menu_before_nav` — zie inc/tm-header-trainingen.php. */
.tm-mobile-menu-extras,
.tm-mobile-menu-account { margin: 0; padding: 0; list-style: none; }

.tm-mobile-menu-trainingen .nav-link,
.tm-mobile-menu-account .nav-link {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
}
.tm-mobile-menu-trainingen .nav-link i,
.tm-mobile-menu-account .nav-link i {
	font-size: 16px;
	color: var(--tm-orange);
	line-height: 1;
	width: 18px;
	text-align: center;
}

/* Account-section in mobile menu — visuele scheiding boven, ruimte tussen items */
.tm-mobile-menu-account {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px dashed var(--tm-line);
}

/* ---------------------------------------------------------------------------
 * Filter-bar onder de "CATEGORIEËN"-scharnier op /courses/.
 * Pill-knoppen per course_category + toolbar (count + zoekveld).
 * ------------------------------------------------------------------------- */
.tm-filter {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 15px 12px;
}

/* Client-side paginatie op /courses/ — door tm-courses-filter.js
   gegenereerd. Knoppen: ronde 40px-cirkels, actieve pagina met
   primary-fill, prev/next als pijl-glyph in primary-color. */
.tm-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 32px auto 16px;
	padding: 0;
}
.tm-pagination[hidden] {
	display: none;
}
.tm-pagination__btn {
	background: transparent;
	border: 0;
	color: var(--tm-ink, #1E1B4B);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
	padding: 0;
	border-radius: 50%;
	min-width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s ease, color .2s ease;
}
.tm-pagination__btn:hover {
	background-color: rgba(91, 79, 229, .1);
}
.tm-pagination__btn.is-active,
.tm-pagination__btn.is-active:hover {
	background-color: var(--tm-purple, #5B4FE5);
	color: #fff;
}
.tm-pagination__nav {
	color: var(--tm-purple, #5B4FE5);
	font-size: 18px;
}

/* EduBlink's eigen archive-toolbar (duplicaat van mijn .tm-filter) verbergen +
   80px top-padding van .edublink-main-content-inner naar 0 trekken op
   cursus-archieven, want mijn .tm-filter regelt de spacing al. */
.post-type-archive-lp_course .edublink-course-archive-top-bar-wrapper,
.tax-course_category .edublink-course-archive-top-bar-wrapper,
.tax-course_tag .edublink-course-archive-top-bar-wrapper,
.tax-course_level .edublink-course-archive-top-bar-wrapper {
	display: none !important;
}
.post-type-archive-lp_course .edublink-main-content-inner,
.tax-course_category .edublink-main-content-inner,
.tax-course_tag .edublink-main-content-inner,
.tax-course_level .edublink-main-content-inner {
	padding-top: 0 !important;
	padding-bottom: 40px !important;
}
/* Cards-grid direct onder de filter — kleine negatieve top-margin om
   restspacing van EduBlink-wrappers te compenseren. */
.post-type-archive-lp_course .edublink-lms-courses-grid,
.tax-course_category .edublink-lms-courses-grid,
.tax-course_tag .edublink-lms-courses-grid,
.tax-course_level .edublink-lms-courses-grid {
	margin-top: 16px !important;
	padding-top: 0 !important;
}
.post-type-archive-lp_course #content.site-content,
.tax-course_category #content.site-content,
.tax-course_tag #content.site-content,
.tax-course_level #content.site-content,
.post-type-archive-lp_course .site-content-inner,
.tax-course_category .site-content-inner,
.tax-course_tag .site-content-inner,
.tax-course_level .site-content-inner {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
.tm-filter__pills {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* Mobile: collapse de 17 categorie-pills onder een toggle-button.
   Desktop (≥768px) toggle-button wordt gehide, pills altijd zichtbaar. */
.tm-filter__toggle {
	display: none;
}
@media (max-width: 767px) {
	.tm-filter__toggle {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		margin: 0 auto 16px;
		padding: 10px 18px;
		background: #fff;
		border: 1px solid var(--tm-line, #ECEAF6);
		border-radius: 999px;
		font: 600 14px/1 "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
		color: var(--tm-ink, #1E1B4B);
		cursor: pointer;
		box-shadow: 0 2px 8px rgba(30, 27, 75, 0.06);
		transition: box-shadow .15s ease, border-color .15s ease;
	}
	.tm-filter__toggle:hover,
	.tm-filter__toggle:focus-visible {
		border-color: var(--tm-purple, #5B4FE5);
		box-shadow: 0 4px 14px rgba(30, 27, 75, 0.10);
		outline: none;
	}
	.tm-filter__toggle strong {
		color: var(--tm-purple, #5B4FE5);
		font-weight: 700;
	}
	.tm-filter__toggle-chevron {
		flex-shrink: 0;
		transition: transform .2s ease;
	}
	.tm-filter[data-tm-open] .tm-filter__toggle-chevron {
		transform: rotate(180deg);
	}
	/* tm-filter wrapper centreren zodat de toggle-button gecentreerd
	   onder het hero-blok komt te staan. */
	.tm-filter {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tm-filter__pills {
		display: none;
	}
	.tm-filter[data-tm-open] .tm-filter__pills {
		display: flex;
	}
}
.tm-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	color: var(--tm-ink, #1E1B4B);
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tm-pill:hover {
	border-color: var(--tm-ink, #1E1B4B);
	color: var(--tm-ink, #1E1B4B);
}
.tm-pill__count {
	display: inline-block;
	min-width: 22px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--tm-line, #ECEAF6);
	color: var(--tm-ink-mute, #767492);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	line-height: 1.4;
}
.tm-pill.is-active {
	background: var(--tm-ink, #1E1B4B);
	border-color: var(--tm-ink, #1E1B4B);
	color: #fff;
}
.tm-pill.is-active .tm-pill__count {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.tm-filter__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 8px;
}
.tm-filter__count {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--tm-ink-soft, #4A4870);
}
.tm-filter__count strong {
	color: var(--tm-purple, #5B4FE5);
	font-weight: 700;
}
.tm-filter__search input {
	width: 320px;
	max-width: 100%;
	height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	border: 1px solid var(--tm-line, #ECEAF6);
	background: #fff;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 14px;
	color: var(--tm-ink, #1E1B4B);
}
.tm-filter__search input::placeholder {
	color: var(--tm-ink-mute, #767492);
}
.tm-filter__search input:focus {
	outline: 2px solid var(--tm-purple, #5B4FE5);
	outline-offset: 2px;
	border-color: transparent;
}

@media (max-width: 767px) {
	.tm-filter__toolbar {
		flex-direction: column;
		align-items: stretch;
	}
	.tm-filter__search input {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * tm-cta-strip — "Liever op maat?" donker blok onder cursussen-archief.
 * Design-regels §1 (donker blok = --tm-ink, witte tekst, oranje accent),
 * §3 (radius 14-18px, hangt aan gutter), §4 (cirkel-DNA via dashed cirkels
 * op de hoeken).
 * ------------------------------------------------------------------------- */
.tm-cta-strip {
	max-width: 1200px;
	margin: 16px auto 64px;
	padding: 0 15px;
}
@media (max-width: 479px) {
	/* Strakker op smal mobile: paginatie strak tegen de laatste card,
	   hinge + 'Liever op maat?' direct erna i.p.v. losse witruimte. */
	.tm-pagination {
		margin: 8px auto 4px;
	}
	.tm-cta-strip {
		margin: 16px auto 24px;
	}
	/* Courses-archive: standaard EduBlink-grid heeft een ruime bottom-margin,
	   plus de archive-page eigen bottom-padding. Comprimeer beide zodat de
	   'Liever op maat?'-hinge direct na de paginatie komt. */
	body.post-type-archive-lp_course .edublink-lms-courses-grid,
	body.tax-course_category .edublink-lms-courses-grid {
		margin-bottom: 0;
	}
	body.post-type-archive-lp_course .site-content,
	body.tax-course_category .site-content {
		padding-bottom: 16px;
	}
	/* Alle archive-page wrappers (article, entry-content, main, primary,
	   site-content-inner) hebben default WP/EduBlink spacing onderaan die
	   op smal mobile cumulatief leidt tot grote witruimte vóór de
	   'Liever op maat?'-CTA. Neutraliseer ze allemaal — !important omdat
	   parent-theme-CSS in main.css meer specificity heeft. */
	body.post-type-archive-lp_course article,
	body.post-type-archive-lp_course .entry-content,
	body.post-type-archive-lp_course #primary,
	body.post-type-archive-lp_course #main,
	body.post-type-archive-lp_course .site-content-inner,
	body.tax-course_category article,
	body.tax-course_category .entry-content,
	body.tax-course_category #primary,
	body.tax-course_category #main,
	body.tax-course_category .site-content-inner {
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
}
.tm-cta-strip__inner {
	position: relative;
	background: var(--tm-ink, #1E1B4B);
	color: #fff;
	border-radius: 18px;
	padding: 40px 48px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 40px;
	align-items: center;
	overflow: hidden;
}
.tm-cta-strip__inner::before,
.tm-cta-strip__inner::after {
	content: "";
	position: absolute;
	width: 240px;
	height: 240px;
	border: 1px dashed rgba(255, 255, 255, 0.10);
	border-radius: 50%;
	pointer-events: none;
}
.tm-cta-strip__inner::before { top: -120px; right: -80px; }
.tm-cta-strip__inner::after  { bottom: -120px; left: -80px; }

.tm-cta-strip__text {
	position: relative;
	z-index: 1;
}
.tm-cta-strip__title {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: clamp(1.875rem, 3vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: #fff;
	margin: 0 0 16px;
}
.tm-cta-strip__lede {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
	max-width: 600px;
}

.tm-cta-strip__actions {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-end;
	align-items: center;
}
.tm-cta-strip__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 10px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1;
	transition: background .15s ease, color .15s ease, transform .15s ease;
	white-space: nowrap;
}
.tm-cta-strip__btn svg {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}
.tm-cta-strip__btn--primary {
	background: var(--tm-orange, #FF8A1F);
	color: var(--tm-ink, #1E1B4B);
	border: 0;
}
.tm-cta-strip__btn--primary:hover {
	background: #E06700;
	color: var(--tm-ink, #1E1B4B);
	transform: translateY(-1px);
}
.tm-cta-strip__btn--ghost {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.30);
}
.tm-cta-strip__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.50);
}

@media (max-width: 899px) {
	.tm-cta-strip__inner {
		grid-template-columns: 1fr;
		padding: 32px 28px;
		gap: 24px;
	}
	.tm-cta-strip__actions {
		justify-content: flex-start;
	}
}

/* ---------------------------------------------------------------------------
 * tm-course — single course detail (hero + body wrapper).
 * ------------------------------------------------------------------------- */
.tm-course {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}
.tm-course__breadcrumb {
	padding: 24px 0 12px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--tm-ink-soft, #4A4870);
}
.tm-course__breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.tm-course__breadcrumb li + li::before {
	content: "›";
	margin-right: 12px;
	color: var(--tm-ink-mute, #767492);
}
.tm-course__breadcrumb a {
	color: var(--tm-orange, #FF8A1F);
	text-decoration: none;
}
.tm-course__breadcrumb a:hover { text-decoration: underline; }
.tm-course__breadcrumb [aria-current="page"] span {
	color: var(--tm-ink, #1E1B4B);
}

/* Hero: split layout — cover-tile links, info rechts */
.tm-course__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 48px;
	align-items: center;
	padding: 16px 0 32px;
}
.tm-course__cover {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 16 / 11;
}
.tm-course__cover .tm-hero {
	width: 100%;
	height: 100%;
}

.tm-course__info {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	color: var(--tm-ink, #1E1B4B);
}
.tm-course__title {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: clamp(2rem, 4.2vw, 3.25rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--tm-ink, #1E1B4B);
	margin: 0 0 16px;
	text-wrap: balance;
}
.tm-course__title-accent { color: var(--tm-orange, #FF8A1F); }

.tm-course__lede {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--tm-ink-soft, #4A4870);
	margin: 0 0 20px;
	max-width: 600px;
}

.tm-course__chips {
	margin-bottom: 24px;
}

.tm-course__meta-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--tm-ink-soft, #4A4870);
}
.tm-course__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.tm-course__author-bubble {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: linear-gradient(135deg, #5B4FE5, #FF8A1F);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
}
.tm-course__stars { color: var(--tm-orange, #FF8A1F); letter-spacing: 1px; }

/* Body wrapper voor sectie 2-6 (komt later) */
.tm-course__body {
	padding: 24px 0 64px;
}

@media (max-width: 899px) {
	.tm-course__hero {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.tm-course__cover {
		aspect-ratio: 16 / 11;
	}
}

/* ---------------------------------------------------------------------------
 * tm-course-section — generieke sectie-styling op single course page
 * (Wat je leert / Onderwerpen / Trainer / Data / FAQ).
 * ------------------------------------------------------------------------- */
.tm-course-section {
	padding: 32px 0;
}
.tm-course-section + .tm-course-section {
	border-top: 1px solid var(--tm-line, #ECEAF6);
}
.tm-course-section__title {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--tm-ink, #1E1B4B);
	margin: 0 0 16px;
	text-wrap: balance;
}
.tm-course-section__accent { color: var(--tm-orange, #FF8A1F); }
.tm-course-section__intro {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--tm-ink-soft, #4A4870);
	margin: 0 0 20px;
	max-width: 760px;
}

/* Bullets met solide oranje dot — overrult EduBlink's
   `ul { list-style: disc }` en `ul li { margin: 10px 0 }`. */
.tm-course-bullets {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 32px;
}
.tm-course-bullets li {
	list-style: none !important;
	position: relative;
	margin: 0 !important;
	padding-left: 22px !important;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--tm-ink-soft, #4A4870);
}
.tm-course-bullets li::marker { content: none; }
.tm-course-bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tm-orange, #FF8A1F);
}

@media (max-width: 767px) {
	.tm-course-bullets {
		grid-template-columns: 1fr;
	}
}

/* ---------- "Voor wie en wat heb je nodig" — twee kolommen naast elkaar ---------- */
.tm-course-pre {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 48px);
}
.tm-course-pre__col {
	min-width: 0;
}
.tm-course-pre__heading {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
	margin: 0 0 12px;
	letter-spacing: -0.01em;
}
/* Binnen de twee kolommen wil je geen 2-kolom-bullets meer (dat is al krap),
   dus override .tm-course-bullets naar één kolom. */
.tm-course-pre .tm-course-bullets {
	grid-template-columns: 1fr;
	gap: 8px;
}

@media (max-width: 700px) {
	.tm-course-pre {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ---------- Trainer-card ---------- */
.tm-trainer-card {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 24px;
	align-items: center;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 14px;
}
.tm-trainer-card__avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: linear-gradient(135deg, #5B4FE5 0%, #C97D52 60%, #FF8A1F 100%);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 36px;
	font-weight: 800;
	box-shadow: 0 6px 18px rgba(30, 27, 75, 0.10);
	border: 1px dashed rgba(30, 27, 75, 0.20);
}
.tm-trainer-card__name {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 18px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
	line-height: 1;
}
.tm-trainer-card__tagline {
	margin-top: 4px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--tm-orange, #FF8A1F);
	line-height: 1.3;
}
.tm-trainer-card__bio {
	margin: 12px 0 0;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--tm-ink-soft, #4A4870);
	max-width: 720px;
}
@media (max-width: 599px) {
	.tm-trainer-card { grid-template-columns: 1fr; text-align: left; }
	.tm-trainer-card__avatar { margin-bottom: 8px; }
}

/* ---------- Eerstvolgende data placeholder ---------- */
.tm-dates-empty {
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 14px;
	padding: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
}
.tm-dates-empty__lede {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--tm-ink-soft, #4A4870);
	margin: 0;
	max-width: 540px;
	line-height: 1.55;
}
.tm-dates-empty__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
	border-radius: 10px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background .15s ease, transform .15s ease;
}
.tm-dates-empty__btn:hover {
	background: var(--tm-purple-deep, #3F35B8);
	color: #fff;
	transform: translateY(-1px);
}
.tm-dates-empty__btn svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* ---------- Eerstvolgende data — lijst van geplande events ---------- */
.tm-dates-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tm-date-item {
	display: grid;
	grid-template-columns: 2fr 1.5fr 1fr auto;
	align-items: center;
	gap: 24px;
	padding: 18px 22px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 14px;
	box-shadow: 0 4px 12px rgba(30, 27, 75, 0.04);
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
}
.tm-date-item.is-full {
	background: #FAFAFC;
	opacity: 0.85;
}
.tm-date-item__date,
.tm-date-item__loc,
.tm-date-item__seats {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--tm-ink-soft, #4A4870);
}
.tm-date-item__date strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
	line-height: 1.3;
}
.tm-date-item__time {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--tm-ink-mute, #767492);
}
.tm-date-item .tm-ico {
	font-size: 20px;
	width: 22px;
	flex: 0 0 22px;
}
.tm-date-item__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.tm-date-item__btn.is-loading,
.tm-date-item__btn.is-success {
	cursor: progress;
}
.tm-date-item__btn:disabled {
	opacity: 1;
}
.tm-date-item__btn:hover {
	background: var(--tm-purple-deep, #3F35B8);
	color: #fff;
	transform: translateY(-1px);
}
.tm-date-item__btn svg { width: 14px; height: 14px; flex: 0 0 14px; }
.tm-date-item__btn--full {
	background: var(--tm-canvas-soft, #F0EEFA);
	color: var(--tm-ink-soft, #4A4870);
	cursor: default;
}
.tm-date-item__btn--full:hover {
	background: var(--tm-canvas-soft, #F0EEFA);
	color: var(--tm-ink-soft, #4A4870);
	transform: none;
}
@media (max-width: 767px) {
	.tm-date-item {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.tm-date-item__btn {
		justify-self: start;
	}
}

/* ---------- Agenda-pagina (shortcode [tm_events]) ----------
 * Hero gebruikt .tm-page-hero (zelfde als In-company / Over / Contact —
 * styling staat verderop in deze file). Hieronder alleen de filter-toolbar
 * + spacing tussen hero en list.
 */
.tm-page-agenda .tm-page-hero {
	padding-bottom: 24px;
}
/* Spacing tussen hinge en toolbar/list — matcht .tm-incompany .tm-section
   (32px padding) zodat agenda dezelfde ademruimte heeft als in-company. */
.tm-agenda-page {
	padding-top: 32px;
	padding-bottom: 32px;
}

/* === Filter toolbar === */
.tm-agenda-toolbar {
	max-width: 1200px;
	margin: 0 auto 24px;
	padding: 0 15px;
	display: grid;
	grid-template-columns: 2fr repeat(3, 1fr) auto;
	gap: 12px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
}
.tm-agenda-toolbar__search {
	position: relative;
	display: flex;
	align-items: center;
}
.tm-agenda-toolbar__search .tm-ico {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	color: var(--tm-ink-mute, #767492);
	pointer-events: none;
	--fa-primary-color: var(--tm-purple, #5B4FE5);
	--fa-secondary-color: var(--tm-orange, #FF8A1F);
}
.tm-agenda-toolbar__search input {
	width: 100%;
	padding: 12px 16px 12px 44px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 10px;
	font: 500 14px/1.4 inherit;
	color: var(--tm-ink, #1E1B4B);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.tm-agenda-toolbar__search input:focus {
	outline: none;
	border-color: var(--tm-purple, #5B4FE5);
	box-shadow: 0 0 0 3px rgba(91, 79, 229, 0.15);
}
.tm-agenda-toolbar__select {
	padding: 12px 36px 12px 16px;
	background: #fff url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%234A4870' d='M6 8 0 0h12z'/%3e%3c/svg%3e") no-repeat right 14px center;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 10px;
	font: 500 14px/1.4 inherit;
	color: var(--tm-ink, #1E1B4B);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.tm-agenda-toolbar__select:focus {
	outline: none;
	border-color: var(--tm-purple, #5B4FE5);
	box-shadow: 0 0 0 3px rgba(91, 79, 229, 0.15);
}
.tm-agenda-toolbar__reset {
	padding: 12px 16px;
	background: transparent;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 10px;
	font: 700 13px/1 inherit;
	color: var(--tm-ink-soft, #4A4870);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tm-agenda-toolbar__reset:hover {
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
	border-color: var(--tm-purple, #5B4FE5);
}
.tm-agenda-toolbar__empty {
	max-width: 1200px;
	margin: 16px auto 32px;
	padding: 32px 15px;
	text-align: center;
	color: var(--tm-ink-soft, #4A4870);
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
}
@media (max-width: 1023px) {
	.tm-agenda-toolbar {
		grid-template-columns: 1fr 1fr;
	}
	.tm-agenda-toolbar__search {
		grid-column: 1 / -1;
	}
	.tm-agenda-toolbar__reset {
		grid-column: 1 / -1;
	}
}
@media (max-width: 599px) {
	.tm-agenda-toolbar {
		grid-template-columns: 1fr;
	}
}

.tm-agenda {
	list-style: none;
	margin: 32px auto 64px;
	padding: 0 15px;
	max-width: 1200px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
}
.tm-agenda--empty {
	text-align: center;
	color: var(--tm-ink-soft, #4A4870);
	margin: 32px auto 64px;
	max-width: 1200px;
	padding: 48px 15px;
}
.tm-agenda__item {
	display: grid;
	grid-template-columns: 1.3fr 2fr 1.3fr 1fr auto;
	align-items: center;
	gap: 24px;
	padding: 18px 22px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 14px;
	box-shadow: 0 4px 12px rgba(30, 27, 75, 0.04);
}
.tm-agenda__item.is-full {
	background: #FAFAFC;
	opacity: 0.85;
}
.tm-agenda__date,
.tm-agenda__loc,
.tm-agenda__seats {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--tm-ink-soft, #4A4870);
}
.tm-agenda__date strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
	line-height: 1.3;
}
.tm-agenda__time {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--tm-ink-mute, #767492);
}
.tm-agenda__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
}
.tm-agenda__title a {
	color: inherit;
	text-decoration: none;
	transition: color .15s ease;
}
.tm-agenda__title a:hover {
	color: var(--tm-orange, #FF8A1F);
}
.tm-agenda .tm-ico {
	font-size: 20px;
	width: 22px;
	flex: 0 0 22px;
}
.tm-agenda__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.tm-agenda__btn.is-loading,
.tm-agenda__btn.is-success {
	cursor: progress;
}
.tm-agenda__btn:disabled {
	opacity: 1;
}
.tm-agenda__btn:hover {
	background: var(--tm-purple-deep, #3F35B8);
	color: #fff;
	transform: translateY(-1px);
}
.tm-agenda__btn svg { width: 14px; height: 14px; flex: 0 0 14px; }
.tm-agenda__btn--full {
	background: var(--tm-canvas-soft, #F0EEFA);
	color: var(--tm-ink-soft, #4A4870);
	cursor: default;
}
.tm-agenda__btn--full:hover {
	background: var(--tm-canvas-soft, #F0EEFA);
	color: var(--tm-ink-soft, #4A4870);
	transform: none;
}
/* "Al ingeschreven"-state — groene pill, zelfde token als status-pill
 * "Voltooid" op de profile-trainings (rgba(16,185,129,0.12) + #047857). */
.tm-agenda__btn--enrolled {
	background: rgba(16, 185, 129, 0.12);
	color: #047857;
	cursor: default;
}
.tm-agenda__btn--enrolled:hover {
	background: rgba(16, 185, 129, 0.12);
	color: #047857;
	transform: none;
}
@media (max-width: 1023px) {
	.tm-agenda__item { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
	.tm-agenda__item { grid-template-columns: 1fr; gap: 12px; }
	.tm-agenda__btn { justify-self: start; }
}

/* ---------------------------------------------------------------------------
 * CHECKOUT-PAGINA — bevestig je inschrijving
 * --------------------------------------------------------------------------- */

/* Step-indicator + lede onder de hero */
.tm-checkout-hero__lede {
	margin: -8px 0 32px;
	font-size: 17px;
	color: var(--tm-ink-soft, #4A4870);
	line-height: 1.5;
	text-wrap: balance;
}
.tm-checkout-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 16px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 999px;
	padding: 10px 24px;
}
.tm-checkout-steps__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tm-ink-mute, #767492);
	position: relative;
}
.tm-checkout-steps__item:not(:last-child)::after {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--tm-line, #ECEAF6);
	margin-left: 8px;
}
.tm-checkout-steps__num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--tm-canvas-soft, #F0EEFA);
	color: var(--tm-ink-mute, #767492);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
}
.tm-checkout-steps__item.is-done .tm-checkout-steps__num {
	background: #10B981;
	color: #fff;
}
.tm-checkout-steps__item.is-done {
	color: var(--tm-ink, #1E1B4B);
}
.tm-checkout-steps__item.is-active .tm-checkout-steps__num {
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
}
.tm-checkout-steps__item.is-active {
	color: var(--tm-ink, #1E1B4B);
}

/* Page-page wrapper container */
.tm-page-checkout .site-content {
	background: var(--tm-bg, #FAFAFC);
	padding: 32px 0 64px;
}

/* 2-koloms grid: form-sections links, summary rechts */
.tm-checkout-form {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 16px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
}
.tm-checkout-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 32px;
	align-items: start;
}
.tm-checkout-main {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
@media (max-width: 1023px) {
	.tm-checkout-grid {
		grid-template-columns: 1fr;
	}
}

/* Form section card */
.tm-checkout-section {
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 18px;
	padding: 32px;
	box-shadow: 0 8px 24px rgba(30, 27, 75, 0.04);
}
.tm-checkout-section--final {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}
.tm-checkout-section__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}
.tm-checkout-section__num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tm-canvas-soft, #F0EEFA);
	color: var(--tm-purple, #5B4FE5);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 800;
	flex: 0 0 32px;
}
.tm-checkout-section__title {
	font-size: 22px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
	margin: 0;
	flex: 1 1 auto;
	letter-spacing: -0.01em;
}
.tm-checkout-section__hint {
	font-size: 13px;
	color: var(--tm-ink-mute, #767492);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.tm-checkout-section__hint .fa-lock {
	--fa-primary-color: var(--tm-purple, #5B4FE5);
	--fa-secondary-color: var(--tm-orange, #FF8A1F);
}

/* "Aangemeld als" balk */
.tm-checkout-loginbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--tm-canvas-soft, #F0EEFA);
	border-radius: 12px;
	margin-bottom: 20px;
	font-size: 14px;
	color: var(--tm-ink-soft, #4A4870);
}
.tm-checkout-loginbar__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	flex: 0 0 32px;
}
.tm-checkout-loginbar__text { flex: 1 1 auto; }
.tm-checkout-loginbar__action {
	color: var(--tm-purple, #5B4FE5);
	font-weight: 700;
	text-decoration: none;
}
.tm-checkout-loginbar__action:hover { text-decoration: underline; }

/* Form-fields grid (2 columns, full-width row option) */
.tm-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 20px;
}
.tm-form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.tm-form-field--full {
	grid-column: 1 / -1;
}
.tm-form-field__label {
	font-size: 13px;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
}
.tm-form-field__req {
	color: var(--tm-orange, #FF8A1F);
}
.tm-form-field__opt {
	font-weight: 500;
	color: var(--tm-ink-mute, #767492);
}
.tm-form-field input,
.tm-form-field select,
.tm-form-field textarea {
	width: 100%;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 10px;
	font: 500 14px/1.4 inherit;
	color: var(--tm-ink, #1E1B4B);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.tm-form-field textarea {
	resize: vertical;
	min-height: 90px;
}
.tm-form-field input:focus,
.tm-form-field select:focus,
.tm-form-field textarea:focus {
	outline: none;
	border-color: var(--tm-purple, #5B4FE5);
	box-shadow: 0 0 0 3px rgba(91, 79, 229, 0.15);
}
@media (max-width: 599px) {
	.tm-form-grid { grid-template-columns: 1fr; }
}

/* Inline-toggle voor "Gelijk aan koper" boven een form-field. */
.tm-form-field__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 6px;
}
.tm-inline-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--tm-ink-mute, #767492);
	cursor: pointer;
	user-select: none;
}
.tm-inline-toggle input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.tm-inline-toggle__box {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	border: 1.5px solid var(--tm-line, #ECEAF6);
	background: #fff;
	flex: 0 0 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, border-color .15s ease;
}
.tm-inline-toggle input:checked ~ .tm-inline-toggle__box {
	background: var(--tm-purple, #5B4FE5);
	border-color: var(--tm-purple, #5B4FE5);
}
.tm-inline-toggle input:checked ~ .tm-inline-toggle__box::after {
	content: "";
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}
/* Locked state: disabled-look op het input wanneer "gelijk aan boven" actief is. */
.tm-form-field input[data-tm-billing-name][readonly] {
	background: var(--tm-canvas-soft, #F0EEFA);
	color: var(--tm-ink-soft, #4A4870);
	cursor: not-allowed;
}

/* "Voor iemand anders" toggle + extra deelnemer-velden */
.tm-attendee-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.tm-attendee-check {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tm-ink-soft, #4A4870);
	cursor: pointer;
	user-select: none;
}
.tm-attendee-check__box {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	border: 1.5px solid var(--tm-line, #ECEAF6);
	background: #fff;
	flex: 0 0 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, border-color .15s ease;
}
.tm-attendee-toggle:checked + .tm-attendee-check .tm-attendee-check__box {
	background: var(--tm-purple, #5B4FE5);
	border-color: var(--tm-purple, #5B4FE5);
}
.tm-attendee-toggle:checked + .tm-attendee-check .tm-attendee-check__box::after {
	content: "";
	width: 6px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}
.tm-attendee-toggle:focus-visible + .tm-attendee-check .tm-attendee-check__box {
	box-shadow: 0 0 0 3px rgba(91, 79, 229, 0.20);
}
.tm-attendee-fields {
	margin-top: 16px;
	padding: 20px;
	background: var(--tm-canvas-soft, #F0EEFA);
	border-radius: 12px;
	display: none;
}
.tm-attendee-toggle:checked ~ .tm-attendee-fields {
	display: grid;
}
.tm-attendee-fields__note {
	grid-column: 1 / -1;
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--tm-ink-soft, #4A4870);
	line-height: 1.5;
}

/* Terms + trust */
.tm-checkout-terms {
	display: flex;
	gap: 12px;
	font-size: 14px;
	color: var(--tm-ink-soft, #4A4870);
	line-height: 1.55;
	background: #fff;
	padding: 20px 24px;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 14px;
}
.tm-checkout-terms input {
	margin-top: 3px;
	flex: 0 0 auto;
	accent-color: var(--tm-purple, #5B4FE5);
}
.tm-checkout-terms a {
	color: var(--tm-purple, #5B4FE5);
	text-decoration: underline;
	font-weight: 600;
}
.tm-checkout-terms.is-error {
	border-color: var(--tm-orange, #FF8A1F);
	background: #FFF5EE;
}
.tm-checkout-akkoord-error[hidden] { display: none; }
.tm-checkout-akkoord-error {
	margin: 8px 0 16px;
	padding: 10px 14px;
	background: #FFF5EE;
	border: 1px solid var(--tm-orange, #FF8A1F);
	border-radius: 10px;
	font-size: 13px;
	color: var(--tm-ink, #1E1B4B);
	line-height: 1.5;
}

/* EduBlink-button-widget border-radius gelijktrekken met de huisstijl-CTAs (12px). */
.edublink-button-item { border-radius: 12px !important; }
.tm-checkout-trust {
	list-style: none;
	margin: 16px 0 0;
	padding: 14px 24px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	font-size: 13px;
	color: var(--tm-ink-soft, #4A4870);
}
.tm-checkout-trust li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.tm-checkout-trust .fa-shield-check {
	--fa-primary-color: #10B981;
	--fa-secondary-color: #10B981;
}
.tm-checkout-trust .fa-circle-check {
	--fa-primary-color: var(--tm-orange, #FF8A1F);
	--fa-secondary-color: var(--tm-orange, #FF8A1F);
}
.tm-checkout-trust .fa-clock {
	--fa-primary-color: var(--tm-purple, #5B4FE5);
	--fa-secondary-color: var(--tm-orange, #FF8A1F);
}

/* Consistent vertikaal ritme: blok 3 als flex-column met 16px gap.
   Reset eigen margins op alle children zodat alleen de gap telt. */
.tm-checkout-section--payment {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.tm-checkout-section--payment > .tm-checkout-section__head,
.tm-checkout-section--payment > .tm-form-grid,
.tm-checkout-section--payment > .payment-methods,
.tm-checkout-section--payment > .tm-checkout-terms,
.tm-checkout-section--payment > #checkout-order-action,
.tm-checkout-section--payment > .tm-checkout-trust {
	margin: 0;
}
.tm-checkout-section--payment .lp-button.button.alt,
.tm-checkout-section--payment #learn-press-checkout-place-order {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 18px 24px;
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
	border: 0;
	border-radius: 12px;
	font: 700 16px/1 inherit;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.tm-checkout-section--payment .lp-button.button.alt:hover,
.tm-checkout-section--payment #learn-press-checkout-place-order:hover {
	background: var(--tm-purple-deep, #3F35B8);
	transform: translateY(-1px);
}
.tm-place-order-btn__amount {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: rgba(255, 255, 255, 0.22);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.tm-place-order-btn svg {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}
/* Terms-checkbox + trust binnen blok 3 */
.tm-checkout-section--payment .tm-checkout-terms {
	margin: 16px 0 0;
	padding: 16px 18px;
	background: var(--tm-canvas-soft, #F0EEFA);
	border: 0;
}
.tm-checkout-section--payment .tm-checkout-trust {
	margin: 16px 0 0;
	padding: 12px 18px;
	background: transparent;
	border: 0;
	font-size: 12px;
}
.tm-checkout-section--payment .payment-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Eigen payment-method markup (zie learnpress/checkout/payment-method.php). */
.tm-payment-method {
	background: #fff;
	border: 1.5px solid var(--tm-line, #ECEAF6);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color .15s ease, background .15s ease;
}
.tm-payment-method.is-selected,
.tm-payment-method:has(.tm-payment-method__input:checked) {
	border-color: var(--tm-purple, #5B4FE5);
	background: var(--tm-canvas-soft, #F0EEFA);
}
.tm-payment-method__label {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	cursor: pointer;
}
.tm-payment-method__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.tm-payment-method__radio {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--tm-line, #ECEAF6);
	background: #fff;
	flex: 0 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color .15s ease;
}
.tm-payment-method__input:checked + .tm-payment-method__radio {
	border-color: var(--tm-purple, #5B4FE5);
}
.tm-payment-method__input:checked + .tm-payment-method__radio::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--tm-purple, #5B4FE5);
}
.tm-payment-method__input:focus-visible + .tm-payment-method__radio {
	box-shadow: 0 0 0 3px rgba(91, 79, 229, 0.20);
}
.tm-payment-method__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.tm-payment-method__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
}
.tm-payment-method__desc {
	font-size: 13px;
	color: var(--tm-ink-soft, #4A4870);
	line-height: 1.4;
}
.tm-payment-method__icon {
	flex: 0 0 auto;
}
.tm-payment-method__icon img {
	max-height: 28px;
	width: auto;
	display: block;
}
.tm-payment-method__icon--fa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 32px;
	background: var(--tm-canvas-soft, #F0EEFA);
	border-radius: 8px;
}
.tm-payment-method__fa {
	font-size: 18px;
	--fa-primary-color: var(--tm-purple, #5B4FE5);
	--fa-secondary-color: var(--tm-orange, #FF8A1F);
	--fa-secondary-opacity: 0.7;
}
/* Payment-form binnen de method (bv. CC-velden) */
.tm-payment-method .payment-method-form {
	padding: 0 20px 18px 54px;
	font-size: 13px;
	color: var(--tm-ink-soft, #4A4870);
	line-height: 1.5;
}
.tm-payment-method .payment-method-form p {
	margin: 0;
}

/* Sidebar — Jouw inschrijving */
.tm-checkout-aside {
	position: sticky;
	top: 88px;
}
.tm-checkout-summary {
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 18px;
	padding: 24px;
	box-shadow: 0 8px 24px rgba(30, 27, 75, 0.04);
}
.tm-checkout-summary__title {
	margin: 0 0 16px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tm-ink-mute, #767492);
}
.tm-checkout-summary__course {
	display: flex;
	gap: 14px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--tm-line, #ECEAF6);
	margin-bottom: 16px;
}
.tm-checkout-summary__thumb {
	width: 72px;
	height: 72px;
	border-radius: 12px;
	overflow: hidden;
	flex: 0 0 72px;
	background: var(--tm-canvas-soft, #F0EEFA);
	display: flex;
	align-items: stretch;
	justify-content: stretch;
}
/* Hero-thumbnail variant: alleen het linker (gekleurde) deel uit tm_render_course_thumb. */
.tm-checkout-summary__thumb .tm-hero,
.tm-checkout-summary__thumb .tm-hero--thumb {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 0;
	overflow: hidden;
}
.tm-checkout-summary__thumb .tm-hero__left {
	width: 100%;
	height: 100%;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.tm-checkout-summary__thumb .tm-hero__glyph {
	font-size: 56px;
	line-height: 1;
}
.tm-checkout-summary__thumb .tm-hero__name {
	display: none;
}
.tm-checkout-summary__thumb-fallback {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 800;
	color: var(--tm-purple, #5B4FE5);
}
.tm-checkout-summary__course-title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
	line-height: 1.3;
	margin-bottom: 6px;
}
.tm-checkout-summary__course-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 12px;
	color: var(--tm-ink-soft, #4A4870);
	margin-bottom: 6px;
}
.tm-checkout-summary__course-badges span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.tm-checkout-summary__course-badges .tm-ico {
	font-size: 13px;
	width: 14px;
	flex: 0 0 14px;
}
.tm-checkout-summary__course-price {
	display: block;
	font-size: 15px;
	font-weight: 800;
	color: var(--tm-orange, #FF8A1F);
}
.tm-checkout-summary__details {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tm-checkout-summary__row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--tm-canvas-soft, #F0EEFA);
	border-radius: 10px;
	font-size: 14px;
	color: var(--tm-ink-soft, #4A4870);
}
.tm-checkout-summary__row .tm-ico {
	font-size: 20px;
	width: 22px;
	flex: 0 0 22px;
}
.tm-checkout-summary__row-eyebrow {
	display: block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tm-ink-mute, #767492);
	line-height: 1;
	margin-bottom: 4px;
}
.tm-checkout-summary__row strong {
	display: block;
	font-size: 14px;
	color: var(--tm-ink, #1E1B4B);
	line-height: 1.3;
}
.tm-checkout-summary__row-action {
	font-size: 13px;
	font-weight: 700;
	color: var(--tm-purple, #5B4FE5);
	text-decoration: none;
}
.tm-checkout-summary__row-action:hover {
	text-decoration: underline;
}
.tm-checkout-summary__totals {
	border-top: 1px solid var(--tm-line, #ECEAF6);
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	color: var(--tm-ink-soft, #4A4870);
}
.tm-checkout-summary__totals > div {
	display: flex;
	justify-content: space-between;
}
.tm-checkout-summary__total-row {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--tm-line, #ECEAF6);
	font-size: 16px;
}
.tm-checkout-summary__total-row strong {
	font-size: 22px;
	font-weight: 800;
	color: var(--tm-orange, #FF8A1F);
}
.tm-checkout-summary__total-note {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--tm-ink-mute, #767492);
	text-align: right;
}
.tm-checkout-summary__contact {
	margin-top: 16px;
	padding: 14px 16px;
	background: #FFF7EE;
	border-radius: 12px;
	display: flex;
	gap: 12px;
	font-size: 13px;
	color: var(--tm-ink-soft, #4A4870);
}
.tm-checkout-summary__contact .tm-ico { font-size: 24px; flex: 0 0 24px; }
.tm-checkout-summary__contact strong {
	display: block;
	color: var(--tm-ink, #1E1B4B);
	margin-bottom: 4px;
}
.tm-checkout-summary__contact p { margin: 0; line-height: 1.4; }
.tm-checkout-summary__contact a {
	color: var(--tm-orange, #FF8A1F);
	font-weight: 700;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * CHECKOUT — orderbevestiging (lp-order-received view)
 * --------------------------------------------------------------------------- */
.tm-confirmation {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 16px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
}
.tm-confirmation__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 32px;
	align-items: start;
}
@media (max-width: 1023px) {
	.tm-confirmation__grid { grid-template-columns: 1fr; }
}
.tm-confirmation__main {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Success-blok: groene check links + heading + lede rechts */
.tm-confirmation__success {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 32px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(30, 27, 75, 0.04);
}
.tm-confirmation__check {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(16, 185, 129, 0.12);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tm-confirmation__check .fa-circle-check {
	font-size: 32px;
	--fa-primary-color: #10B981;
	--fa-secondary-color: #10B981;
	--fa-secondary-opacity: 0.18;
}
.tm-confirmation__heading {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
	letter-spacing: -0.015em;
}
.tm-confirmation__lede {
	margin: 0;
	font-size: 15px;
	color: var(--tm-ink-soft, #4A4870);
	line-height: 1.55;
}

/* Spam/contact-fallback */
.tm-confirmation__note {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 20px 24px;
	background: #FFF7EE;
	border-radius: 14px;
}
.tm-confirmation__note .tm-ico {
	font-size: 24px;
	flex: 0 0 24px;
	margin-top: 2px;
	--fa-primary-color: var(--tm-orange, #FF8A1F);
	--fa-secondary-color: var(--tm-purple, #5B4FE5);
}
.tm-confirmation__note strong {
	display: block;
	color: var(--tm-ink, #1E1B4B);
	margin-bottom: 4px;
	font-size: 15px;
}
.tm-confirmation__note p {
	margin: 0;
	font-size: 14px;
	color: var(--tm-ink-soft, #4A4870);
	line-height: 1.55;
}
.tm-confirmation__note a {
	color: var(--tm-orange, #FF8A1F);
	font-weight: 700;
	text-decoration: none;
}
.tm-confirmation__note a:hover { text-decoration: underline; }
.tm-confirmation__note--more {
	background: var(--tm-canvas-soft, #F0EEFA);
}
.tm-confirmation__note--more .tm-ico {
	--fa-primary-color: var(--tm-purple, #5B4FE5);
	--fa-secondary-color: var(--tm-orange, #FF8A1F);
}
.tm-confirmation__note--more a {
	color: var(--tm-purple, #5B4FE5);
}

/* CTA-knoppen onderaan */
.tm-confirmation__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.tm-confirmation__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.tm-confirmation__btn svg { width: 16px; height: 16px; }
.tm-confirmation__btn--primary {
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
}
.tm-confirmation__btn--primary:hover {
	background: var(--tm-purple-deep, #3F35B8);
	color: #fff;
	transform: translateY(-1px);
}
.tm-confirmation__btn--ghost {
	background: #fff;
	color: var(--tm-purple, #5B4FE5);
	border: 1px solid var(--tm-line, #ECEAF6);
}
.tm-confirmation__btn--ghost:hover {
	border-color: var(--tm-purple, #5B4FE5);
	color: var(--tm-purple-deep, #3F35B8);
}

/* Sticky-summary aan de zijkant — herbruikt veel van .tm-checkout-summary */
.tm-confirmation__aside {
	position: sticky;
	top: 88px;
}

/* ---------- FAQ accordion ---------- */
.tm-faq {
	border-top: 1px solid var(--tm-line, #ECEAF6);
}
.tm-faq__item {
	border-bottom: 1px solid var(--tm-line, #ECEAF6);
}
.tm-faq__q {
	cursor: pointer;
	padding: 20px 0;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	list-style: none;
}
.tm-faq__q::-webkit-details-marker { display: none; }
.tm-faq__icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 400;
	color: var(--tm-ink-mute, #767492);
	transition: transform .15s ease, color .15s ease;
}
.tm-faq__item[open] .tm-faq__icon {
	transform: rotate(45deg);
	color: var(--tm-orange, #FF8A1F);
}
.tm-faq__a {
	padding: 0 0 20px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--tm-ink-soft, #4A4870);
}
.tm-faq__a p { margin: 0 0 12px; }
.tm-faq__a p:last-child { margin: 0; }

/* ---------- Gerelateerde trainingen ---------- */
.tm-related {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 15px 64px;
}
.tm-related__title {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 800;
	line-height: 1.10;
	letter-spacing: -0.015em;
	color: var(--tm-ink, #1E1B4B);
	margin: 0 0 24px;
	text-align: center;
}
.tm-related__accent { color: var(--tm-orange, #FF8A1F); }
.tm-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 1023px) {
	.tm-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.tm-related__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Single-course body wordt 2-koloms zodra er een sidebar is.
 * ------------------------------------------------------------------------- */
.tm-course__body--with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 48px;
	align-items: flex-start;
}
.tm-course__sidebar {
	position: sticky;
	top: 100px;
}

@media (max-width: 1023px) {
	.tm-course__body--with-sidebar {
		grid-template-columns: 1fr;
	}
	.tm-course__sidebar { position: static; }
}

/* ---------- Sidebar-card cursusdetails ---------- */
.tm-sidebar-card {
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 18px;
	padding: 28px 28px 24px;
	box-shadow: 0 16px 36px rgba(30, 27, 75, 0.05);
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
}
.tm-sidebar-card__eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tm-ink-mute, #767492);
	margin-bottom: 20px;
	line-height: 1;
}

/* === Tabs in sidebar (Open inschrijving / In-company) === */
.tm-sidebar-tabs {
	margin-bottom: 4px;
}
.tm-sidebar-tablist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	padding: 4px;
	background: var(--tm-canvas-soft, #F5F4FB);
	border-radius: 12px;
	margin-bottom: 24px;
}
.tm-sidebar-tab {
	border: 0;
	background: transparent;
	color: var(--tm-ink-soft, #4A4870);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	padding: 10px 12px;
	border-radius: 8px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.tm-sidebar-tab:hover {
	color: var(--tm-ink, #1E1B4B);
}
.tm-sidebar-tab.is-active {
	background: #fff;
	color: var(--tm-ink, #1E1B4B);
	box-shadow: 0 2px 6px rgba(30, 27, 75, 0.08);
}
.tm-sidebar-tab:focus-visible {
	outline: 2px solid var(--tm-purple, #5B4FE5);
	outline-offset: 2px;
}
.tm-sidebar-panel {
	display: block;
}
.tm-sidebar-panel[hidden] {
	display: none;
}

/* === Oranje accent voor de prijs-rij === */
.tm-sidebar-row__price {
	color: var(--tm-orange, #FF8A1F);
}
.tm-sidebar-row__price strong {
	color: var(--tm-orange, #FF8A1F);
}
.tm-sidebar-row__muted {
	font-style: italic;
	font-weight: 500;
	color: var(--tm-ink-mute, #767492);
}

/* === In-company CTA: ghost variant van de paarse knop === */
.tm-sidebar-card__cta--ic,
.tm-sidebar-card__cta--ghost {
	background: #fff;
	color: var(--tm-purple, #5B4FE5);
	border: 2px solid var(--tm-purple, #5B4FE5);
	padding: 14px 24px;
}
.tm-sidebar-card__cta--ic:hover,
.tm-sidebar-card__cta--ic:focus,
.tm-sidebar-card__cta--ghost:hover,
.tm-sidebar-card__cta--ghost:focus {
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
	transform: translateY(-1px);
}

.tm-sidebar-card__list {
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.tm-sidebar-row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid var(--tm-line, #ECEAF6);
}
.tm-sidebar-row:first-child { border-top: 0; padding-top: 0; }
.tm-sidebar-row dt {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--tm-ink-soft, #4A4870);
	margin: 0;
}
.tm-sidebar-row dt svg,
.tm-sidebar-row dt .tm-ico {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	font-size: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--tm-ink-mute, #767492);
}

/* === Duotone-kleuren per icoon (FA Pro 6.4.2) ===
   --fa-primary-color = donkere/main laag
   --fa-secondary-color = lichte achtergrond-laag
   --fa-secondary-opacity = standaard 0.4 — laten staan tenzij we vol-doek willen
*/
.tm-ico--euro {
	--fa-primary-color: var(--tm-orange, #FF8A1F);
	--fa-secondary-color: var(--tm-orange, #FF8A1F);
}
.tm-ico--cal {
	--fa-primary-color: var(--tm-orange, #FF8A1F);
	--fa-secondary-color: #19B6B9; /* teal accent */
}
.tm-ico--clock {
	--fa-primary-color: var(--tm-orange, #FF8A1F);
	--fa-secondary-color: var(--tm-orange, #FF8A1F);
}
.tm-ico--team {
	--fa-primary-color: #19B6B9; /* teal */
	--fa-secondary-color: var(--tm-purple, #5B4FE5);
	--fa-secondary-opacity: 0.6;
}
.tm-ico--cert {
	--fa-primary-color: var(--tm-ink, #1E1B4B);
	--fa-secondary-color: var(--tm-orange, #FF8A1F);
	--fa-secondary-opacity: 0.7;
}
.tm-ico--loc {
	--fa-primary-color: var(--tm-orange, #FF8A1F);
	--fa-secondary-color: var(--tm-purple, #5B4FE5);
	--fa-secondary-opacity: 0.5;
}
.tm-sidebar-row dd {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
	text-align: right;
}
.tm-sidebar-row dd strong {
	font-size: 18px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
}
.tm-sidebar-row__cents {
	font-size: 12px;
	font-weight: 600;
	color: var(--tm-ink-mute, #767492);
	margin-left: 1px;
	vertical-align: super;
}

.tm-sidebar-card__cta-form {
	display: block;
	width: 100%;
	margin: 0;
}
.tm-sidebar-card__cta {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	text-align: center;
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
	padding: 16px 24px;
	border: 0;
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.tm-sidebar-card__cta:hover,
.tm-sidebar-card__cta:focus {
	background: var(--tm-purple-deep, #3F35B8);
	color: #fff;
	transform: translateY(-1px);
}
/* States gezet door tm-purchase-button.js tijdens checkout-flow. */
.tm-sidebar-card__cta:disabled {
	opacity: 1;
	cursor: progress;
}
.tm-sidebar-card__cta.is-loading {
	background: var(--tm-purple-deep, #3F35B8);
	cursor: progress;
	transform: none;
}
.tm-sidebar-card__cta.is-success {
	background: #10B981;
	color: #fff;
	cursor: default;
	transform: none;
}
.tm-sidebar-card__cta.is-success:hover {
	background: #10B981;
	transform: none;
}
.tm-sidebar-card__cta.is-error {
	background: #B00020;
}
/* LearnPress plakt na een succesvolle purchase een feedback-divje in de form
   (".learn-press-message success"). Wij doen onze eigen feedback via de
   button-states; deze div blijft verborgen. */
.tm-sidebar-card__cta-form .learn-press-message {
	display: none;
}

.tm-sidebar-card__wishlist {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	padding: 8px 0;
	color: var(--tm-orange, #FF8A1F);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1;
}
.tm-sidebar-card__wishlist:hover { color: var(--tm-orange, #FF8A1F); text-decoration: underline; }
.tm-sidebar-card__wishlist svg { width: 16px; height: 16px; }

.tm-sidebar-card__share {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--tm-line, #ECEAF6);
}
.tm-sidebar-card__share-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--tm-ink-soft, #4A4870);
	margin-right: 6px;
}
.tm-share-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--tm-purple-soft, #EEEBFD);
	color: var(--tm-purple, #5B4FE5);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, color .15s ease;
}
.tm-share-icon svg {
	width: 16px;
	height: 16px;
}
.tm-share-icon:hover {
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * tm-topics — "Onderwerpen op de dag" als verticale timeline:
 *   open ring-marker links, dashed-line die ze verbindt, horizontale
 *   subtiele lijn tussen items. Markers liggen op de dashed line.
 * ------------------------------------------------------------------------- */
.tm-topics {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
}
/* Verticale dashed line van bovenkant eerste marker tot onderkant laatste */
.tm-topics::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 18px;
	bottom: 18px;
	width: 0;
	border-left: 1px dashed rgba(30, 27, 75, 0.20);
	pointer-events: none;
}
.tm-topics__item {
	list-style: none !important;
	margin: 0 !important;
	padding: 18px 0;
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 14px;
	align-items: start;
	position: relative;
}
.tm-topics__item + .tm-topics__item {
	border-top: 1px solid var(--tm-line, #ECEAF6);
}
.tm-topics__item::marker { content: none; }
.tm-topics__marker {
	width: 18px;
	height: 18px;
	margin-top: 4px;
	border: 2px solid var(--tm-orange, #FF8A1F);
	border-radius: 50%;
	background: var(--tm-bg, #FAFAFC);
	display: block;
	flex: 0 0 18px;
	position: relative;
	z-index: 1;
}
.tm-topics__title {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--tm-ink, #1E1B4B);
	margin: 0 0 6px;
}
.tm-topics__desc {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--tm-ink-soft, #4A4870);
	margin: 0;
}

/* ===========================================================================
 * IN-COMPANY PAGINA
 * =========================================================================== */
.tm-incompany {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	color: var(--tm-ink, #1E1B4B);
}
.tm-incompany .tm-section {
	padding: 32px 0;
}
.tm-section-title {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: clamp(1.625rem, 2.6vw, 2.125rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--tm-ink, #1E1B4B);
	margin: 0 0 16px;
	text-wrap: balance;
}

/* ---------- Page-hero (standaard voor sub-pagina's, gelijk aan tm-archive-hero) ---------- */
.tm-page-hero {
	padding: clamp(36px, 4.5vw, 64px) 0 16px;
	text-align: center;
}
.tm-page-hero__title {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: clamp(2.5rem, 6vw, 5.5rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--tm-ink, #1E1B4B);
	margin: 0 0 24px;
	text-wrap: balance;
}
.tm-page-hero__accent { color: var(--tm-orange, #FF8A1F); }
.tm-page-hero__breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	gap: 16px;
	font-size: 1.375rem;
	font-weight: 500;
	color: var(--tm-ink, #1E1B4B);
}
.tm-page-hero__breadcrumb li + li::before {
	content: "›";
	margin-right: 16px;
	color: var(--tm-ink-mute, #767492);
}
.tm-page-hero__breadcrumb a {
	color: var(--tm-orange, #FF8A1F);
	text-decoration: none;
	font-weight: 500;
}
.tm-page-hero__breadcrumb a:hover { color: var(--tm-orange, #FF8A1F); text-decoration: underline; }
.tm-page-hero__breadcrumb [aria-current="page"] span {
	color: var(--tm-ink, #1E1B4B);
	font-weight: 500;
}

/* ---------- Sectie 3: intro + zijvak ---------- */
.tm-intro-aside {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}
.tm-intro-aside__text p {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.65;
	color: var(--tm-ink-soft, #4A4870);
	margin: 0 0 16px;
	max-width: 640px;
}
.tm-intro-aside__list {
	background: var(--tm-purple-soft, #EEEBFD);
	border-radius: 14px;
	padding: 28px 28px;
}
.tm-checkmark-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tm-checkmark-list li {
	list-style: none !important;
	margin: 0 !important;
	padding-left: 32px !important;
	position: relative;
	font-size: 14px;
	font-weight: 600;
	color: var(--tm-ink, #1E1B4B);
	line-height: 1.4;
}
.tm-checkmark-list li::marker { content: none; }
.tm-checkmark-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--tm-orange, #FF8A1F);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

@media (max-width: 899px) {
	.tm-intro-aside { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Sectie 4: 4 features (watermark cards) ---------- */
.tm-features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.tm-feature {
	position: relative;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 14px;
	padding: 28px 24px;
	overflow: hidden;
}
.tm-feature__num {
	position: absolute;
	top: -12px;
	right: 8px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 110px;
	font-weight: 800;
	color: var(--tm-purple-soft, #EEEBFD);
	line-height: 1;
	letter-spacing: -0.03em;
	pointer-events: none;
	z-index: 0;
}
.tm-feature__title {
	position: relative;
	z-index: 1;
	font-size: 18px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
	margin: 0 0 8px;
	line-height: 1.25;
}
.tm-feature__body {
	position: relative;
	z-index: 1;
	font-size: 14px;
	font-weight: 500;
	color: var(--tm-ink-soft, #4A4870);
	margin: 0;
	line-height: 1.55;
}

@media (max-width: 1023px) {
	.tm-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.tm-features { grid-template-columns: 1fr; }
}

/* ---------- Sectie 6: 3 vorm-cards ---------- */
.tm-vormen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}
.tm-vormen__note {
	grid-column: 1 / -1;
	margin: 8px 0 0;
	padding: 14px 22px;
	background: var(--tm-purple-soft, #EEEBFD);
	border-radius: 12px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--tm-ink-soft, #4A4870);
	text-align: center;
}
.tm-vorm__body--note {
	font-size: 13px;
	font-style: italic;
	color: var(--tm-ink-mute, #767492);
	margin-top: -8px;
}
.tm-vorm--featured .tm-vorm__body--note { color: rgba(255,255,255,0.65); }
.tm-vorm {
	position: relative;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 14px;
	padding: 28px;
	display: flex;
	flex-direction: column;
}
.tm-vorm__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--tm-purple-soft, #EEEBFD);
	color: var(--tm-purple-deep, #3F35B8);
	font-weight: 800;
	font-size: 16px;
	margin-bottom: 16px;
}
.tm-vorm__title {
	font-size: 20px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
	margin: 0 0 4px;
	line-height: 1.25;
}
.tm-vorm__sub {
	font-size: 13px;
	font-weight: 700;
	color: var(--tm-orange, #FF8A1F);
	margin-bottom: 12px;
}
.tm-vorm__body {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--tm-ink-soft, #4A4870);
	margin: 0 0 20px;
	flex: 1;
}
.tm-vorm__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--tm-line, #ECEAF6);
	font-size: 13px;
	color: var(--tm-ink-mute, #767492);
}
.tm-vorm__price strong {
	font-size: 24px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
}
/* Featured (middelste) — donker */
.tm-vorm--featured {
	background: var(--tm-ink, #1E1B4B);
	border-color: var(--tm-ink, #1E1B4B);
	color: #fff;
}
.tm-vorm--featured .tm-vorm__title { color: #fff; }
.tm-vorm--featured .tm-vorm__body  { color: rgba(255,255,255,0.78); }
.tm-vorm--featured .tm-vorm__num   { background: rgba(255,255,255,0.10); color: #fff; }
.tm-vorm--featured .tm-vorm__price { border-top-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.65); }
.tm-vorm--featured .tm-vorm__price strong { color: #fff; }
.tm-vorm__pill {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--tm-orange, #FF8A1F);
	color: var(--tm-ink, #1E1B4B);
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (max-width: 899px) {
	.tm-vormen { grid-template-columns: 1fr; }
	.tm-vorm__pill { left: 24px; transform: none; }
}

/* ---------- Sectie 8: prijstabel ---------- */
.tm-pricing__wrap {
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 14px;
	padding: 8px;
	overflow-x: auto;
}
.tm-pricing__table {
	width: 100%;
	border-collapse: collapse;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
}
.tm-pricing__table thead th {
	background: var(--tm-bg, #FAFAFC);
	font-size: 13px;
	font-weight: 800;
	text-align: left;
	padding: 16px 18px;
	color: var(--tm-ink, #1E1B4B);
	border-bottom: 1px solid var(--tm-line, #ECEAF6);
	vertical-align: top;
}
.tm-pricing__table thead th span {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--tm-ink-mute, #767492);
	text-transform: none;
	letter-spacing: normal;
	margin-top: 2px;
}
.tm-pricing__table thead th.is-discount {
	color: var(--tm-orange, #FF8A1F);
	background: rgba(255, 138, 31, 0.08);
}
.tm-pricing__table tbody td.is-discount {
	background: rgba(255, 138, 31, 0.05);
}
.tm-pricing__table tbody td {
	padding: 14px 18px;
	font-size: 14px;
	color: var(--tm-ink, #1E1B4B);
	border-bottom: 1px solid var(--tm-line, #ECEAF6);
	font-weight: 600;
}
.tm-pricing__table tbody tr:last-child td { border-bottom: 0; }
.tm-pricing__table tbody td:first-child { font-weight: 700; }
.tm-pricing__table tbody td.is-discount {
	color: var(--tm-orange, #FF8A1F);
	font-weight: 800;
}
.tm-pricing__note {
	margin: 16px 0 0;
	padding: 0 8px;
	font-size: 12px;
	color: var(--tm-ink-mute, #767492);
	line-height: 1.5;
}
.tm-pricing__intro {
	margin: 0 0 16px;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--tm-ink-soft, #4A4870);
	text-align: center;
	line-height: 1.5;
}

/* Mobile: tabel compacter zodat alle 4 kolommen passen op 390px viewport
   (cellen kleiner padding + font, kolombreedte vrij i.p.v. forceren). */
@media (max-width: 479px) {
	.tm-pricing__wrap {
		padding: 4px;
	}
	.tm-pricing__table thead th,
	.tm-pricing__table tbody td {
		padding: 8px 6px;
		font-size: 11px;
	}
	.tm-pricing__table thead th {
		font-size: 11px;
	}
	.tm-pricing__table thead th span {
		font-size: 10px;
	}
	.tm-pricing__table tbody td:first-child,
	.tm-pricing__table thead th:first-child {
		font-size: 12px;
	}
}

/* ---------- Sectie 10: checklist (2-koloms ronde checks) ---------- */
.tm-checklist {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 32px;
}
.tm-checklist li {
	list-style: none !important;
	margin: 0 !important;
	padding-left: 32px !important;
	position: relative;
	font-size: 15px;
	font-weight: 600;
	color: var(--tm-ink, #1E1B4B);
	line-height: 1.45;
}
.tm-checklist li::marker { content: none; }
.tm-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--tm-orange, #FF8A1F);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}
@media (max-width: 599px) {
	.tm-checklist { grid-template-columns: 1fr; }
}

/* ---------- Sectie 12: paarse CTA ---------- */
.tm-cta-purple {
	padding: 16px 0 64px;
}
.tm-cta-purple__inner {
	position: relative;
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
	border-radius: 18px;
	padding: 40px 48px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px;
	align-items: center;
	overflow: hidden;
}
.tm-cta-purple__inner::before,
.tm-cta-purple__inner::after {
	content: "";
	position: absolute;
	width: 240px;
	height: 240px;
	border: 1px dashed rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	pointer-events: none;
}
.tm-cta-purple__inner::before { top: -120px; right: -80px; }
.tm-cta-purple__inner::after  { bottom: -120px; left: -80px; }
.tm-cta-purple__title {
	font-size: clamp(1.625rem, 2.6vw, 2.125rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: #fff;
	margin: 0 0 12px;
	text-wrap: balance;
	position: relative;
	z-index: 1;
}
.tm-cta-purple__lede {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
	max-width: 600px;
	position: relative;
	z-index: 1;
}
.tm-cta-purple__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	position: relative;
	z-index: 1;
}
.tm-cta-purple__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	transition: background .15s ease, transform .15s ease;
}
.tm-cta-purple__btn--primary {
	background: var(--tm-orange, #FF8A1F);
	color: var(--tm-ink, #1E1B4B);
}
.tm-cta-purple__btn--primary:hover {
	background: #E06700;
	color: var(--tm-ink, #1E1B4B);
	transform: translateY(-1px);
}
.tm-cta-purple__btn--ghost {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.30);
}
.tm-cta-purple__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.10);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.50);
}
@media (max-width: 899px) {
	.tm-cta-purple__inner { grid-template-columns: 1fr; padding: 32px 28px; gap: 24px; }
}

/* ---------------------------------------------------------------------------
 * CONFIRMATION (lp-order-received) — "Je inschrijving is rond" v2 layout
 *
 * Nieuwe sub-blokken voor de bedankpagina-redesign. Bestaande
 * .tm-confirmation__success / __actions / __btn / __note--more blijven
 * staan voor backwards-compat maar worden niet meer gebruikt door de
 * huidige template.
 * --------------------------------------------------------------------------- */

/* ---------- Course-card (groot wit blok bovenaan main) ---------- */
.tm-confirmation__course-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(30, 27, 75, 0.04);
}
.tm-confirmation__course-card-top {
	display: grid;
	/* Hero-kolom lijnt uit met datum-tile (1/3 van strip-breedte met gap 12px). */
	grid-template-columns: calc((100% - 24px) / 3) minmax(0, 1fr);
	column-gap: 12px;
}
.tm-confirmation__course-hero {
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
	align-self: start;
}
.tm-confirmation__course-hero .tm-hero {
	border-radius: 14px;
}
.tm-confirmation__course-hero .tm-hero__glyph {
	font-size: 80px;
}
.tm-confirmation__course-thumb .tm-hero,
.tm-confirmation__course-thumb .tm-hero--thumb {
	width: 100%;
	height: 100%;
	border-radius: 14px;
}
.tm-confirmation__course-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	min-width: 0;
}
@media (max-width: 640px) {
	.tm-confirmation__course-card-top {
		grid-template-columns: 1fr;
	}
	.tm-confirmation__course-hero {
		width: 100%;
	}
}

/* Pills row (categorie + status) */
.tm-confirmation__course-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tm-confirmation__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: 999px;
}
.tm-confirmation__pill--cat {
	background: var(--tm-canvas-soft, #F0EEFA);
	color: var(--tm-purple, #5B4FE5);
	text-transform: uppercase;
}
.tm-confirmation__pill--ok {
	background: rgba(16, 185, 129, 0.12);
	color: #047857;
}
.tm-confirmation__pill--ok .fa-circle-check {
	font-size: 14px;
	--fa-primary-color: #10B981;
	--fa-secondary-color: #10B981;
	--fa-secondary-opacity: 0.25;
}

.tm-confirmation__course-title {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
	letter-spacing: -0.015em;
	line-height: 1.15;
}
.tm-confirmation__course-meta-line {
	margin: 0;
	font-size: 14px;
	color: var(--tm-ink-soft, #4A4870);
}
.tm-confirmation__course-meta-line strong {
	color: var(--tm-ink, #1E1B4B);
	font-weight: 700;
}

/* Meta-strip (Datum / Locatie / Trainer) — 3 gelijke kolommen, links uitgelijnd met hero. */
.tm-confirmation__course-card > .tm-confirmation__meta-strip {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
	margin-inline-start: 0;
	width: 100%;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
/* Fallback voor 1 of 2 zichtbare tiles (bv. event zonder locatie). */
.tm-confirmation__meta-strip:has(> .tm-confirmation__meta-item:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tm-confirmation__meta-strip:has(> .tm-confirmation__meta-item:only-child) {
	grid-template-columns: 1fr;
}
@media (max-width: 720px) {
	.tm-confirmation__meta-strip,
	.tm-confirmation__meta-strip:has(> .tm-confirmation__meta-item:nth-child(2):last-child) {
		grid-template-columns: 1fr;
	}
}
.tm-confirmation__meta-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 16px;
	background: var(--tm-canvas-soft, #F7F5FB);
	border-radius: 12px;
}
.tm-confirmation__meta-ico {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: #fff;
	font-size: 18px;
	--fa-secondary-opacity: 0.25;
}
.tm-confirmation__meta-ico--cal {
	--fa-primary-color: var(--tm-purple, #5B4FE5);
	--fa-secondary-color: var(--tm-purple, #5B4FE5);
}
.tm-confirmation__meta-ico--loc {
	--fa-primary-color: var(--tm-orange, #FF8A1F);
	--fa-secondary-color: var(--tm-orange, #FF8A1F);
}
.tm-confirmation__meta-ico--trainer {
	--fa-primary-color: #10B981;
	--fa-secondary-color: #10B981;
}
.tm-confirmation__meta-eyebrow {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tm-ink-mute, #767492);
	margin-bottom: 2px;
}
.tm-confirmation__meta-item strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
	line-height: 1.3;
}
.tm-confirmation__meta-item small {
	display: block;
	font-size: 12px;
	color: var(--tm-ink-soft, #4A4870);
	margin-top: 2px;
}

/* Actions-row (4 stub-knoppen onder course-card) */
.tm-confirmation__actions-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.tm-confirmation__action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	font-size: 13px;
	font-weight: 700;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	color: var(--tm-ink, #1E1B4B);
	border-radius: 10px;
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
	transition: border-color .15s, color .15s, background .15s;
}
.tm-confirmation__action:not(.is-stub):hover {
	border-color: var(--tm-purple, #5B4FE5);
	color: var(--tm-purple, #5B4FE5);
}
.tm-confirmation__action i {
	font-size: 14px;
	--fa-secondary-opacity: 0.3;
}
.tm-confirmation__action--primary {
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
	border-color: var(--tm-purple, #5B4FE5);
}
.tm-confirmation__action--primary i {
	--fa-primary-color: #fff;
	--fa-secondary-color: #fff;
}
.tm-confirmation__action.is-stub {
	opacity: 0.65;
	cursor: not-allowed;
}

/* Section titles ("Wat gebeurt er nu?", "Voorbereiden voor de trainingsdag") */
.tm-confirmation__section-title {
	margin: 8px 0 -4px;
	font-size: 22px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
	letter-spacing: -0.015em;
}
.tm-confirmation__accent {
	color: var(--tm-orange, #FF8A1F);
}

/* Timeline ("Wat gebeurt er nu?") */
.tm-confirmation__timeline {
	list-style: none;
	margin: 0;
	padding: 12px 40px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(30, 27, 75, 0.04);
	position: relative;
}
.tm-confirmation__timeline-item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 12px 40px 12px 16px;
	position: relative;
}
.tm-confirmation__timeline-item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 35px;
	top: 50px;
	bottom: -2px;
	border-left: 1px dashed var(--tm-line, #ECEAF6);
}
.tm-confirmation__timeline-icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	background: var(--tm-canvas-soft, #F0EEFA);
	color: var(--tm-purple, #5B4FE5);
	--fa-primary-color: var(--tm-purple, #5B4FE5);
	--fa-secondary-color: var(--tm-purple, #5B4FE5);
	--fa-secondary-opacity: 0.25;
	z-index: 1;
}
.tm-confirmation__timeline-item.is-done .tm-confirmation__timeline-icon {
	background: #10B981;
	--fa-primary-color: #fff;
	--fa-secondary-color: #fff;
	--fa-secondary-opacity: 0.4;
}
.tm-confirmation__timeline-body {
	flex: 1;
	min-width: 0;
}
.tm-confirmation__timeline-eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tm-purple, #5B4FE5);
	margin-bottom: 2px;
}
.tm-confirmation__timeline-item.is-done .tm-confirmation__timeline-eyebrow {
	color: #10B981;
}
.tm-confirmation__timeline-title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
	margin-bottom: 4px;
}
.tm-confirmation__timeline-body p {
	margin: 0;
	font-size: 14px;
	color: var(--tm-ink-soft, #4A4870);
	line-height: 1.55;
}

/* Prep-card (Voorbereiden voor de trainingsdag) */
.tm-confirmation__prep {
	list-style: none;
	margin: 0;
	padding: 4px 40px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(30, 27, 75, 0.04);
}
.tm-confirmation__prep-item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 16px 40px 16px 16px;
	border-bottom: 1px dashed var(--tm-line, #ECEAF6);
	font-size: 14px;
	color: var(--tm-ink-soft, #4A4870);
	line-height: 1.55;
}
.tm-confirmation__prep-item:last-child { border-bottom: none; }
.tm-confirmation__prep-item strong {
	color: var(--tm-ink, #1E1B4B);
	font-weight: 700;
	margin-right: 4px;
}
.tm-confirmation__prep-icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	--fa-primary-color: var(--tm-purple, #5B4FE5);
	--fa-secondary-color: var(--tm-orange, #FF8A1F);
	--fa-secondary-opacity: 0.55;
}

/* ---------- Order-card (rechtersidebar) ---------- */
.tm-confirmation__order-card {
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(30, 27, 75, 0.04);
	padding: 24px;
	margin-bottom: 16px;
}
.tm-confirmation__order-eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tm-ink-mute, #767492);
	margin-bottom: 12px;
}
.tm-confirmation__order-summary {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 4px 0 16px;
	border-bottom: 1px solid var(--tm-line, #ECEAF6);
}
.tm-confirmation__order-thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--tm-canvas-soft, #F0EEFA);
	display: flex;
	align-items: stretch;
	justify-content: stretch;
}
.tm-confirmation__order-thumb .tm-hero,
.tm-confirmation__order-thumb .tm-hero--thumb {
	width: 100%;
	height: 100%;
	border-radius: 0;
	display: block;
	overflow: hidden;
}
.tm-confirmation__order-thumb .tm-hero__left {
	width: 100%;
	height: 100%;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.tm-confirmation__order-thumb .tm-hero__glyph {
	font-size: 56px;
	line-height: 1;
}
.tm-confirmation__order-thumb .tm-hero__name {
	display: none;
}
.tm-confirmation__order-summary strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
	line-height: 1.2;
}
.tm-confirmation__order-summary small {
	display: block;
	font-size: 12px;
	color: var(--tm-ink-mute, #767492);
	margin-top: 4px;
}
.tm-confirmation__order-rows {
	list-style: none;
	margin: 16px 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tm-confirmation__order-rows li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	color: var(--tm-ink-soft, #4A4870);
}
.tm-confirmation__order-rows li > span:last-child {
	font-weight: 600;
	color: var(--tm-ink, #1E1B4B);
}
.tm-confirmation__order-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em;
	color: #10B981 !important;
}
.tm-confirmation__order-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #10B981;
}
.tm-confirmation__order-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 16px;
	border-top: 1px solid var(--tm-line, #ECEAF6);
	margin-bottom: 16px;
}
.tm-confirmation__order-total > span {
	font-size: 14px;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
}
.tm-confirmation__order-total strong {
	font-size: 26px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
	letter-spacing: -0.015em;
}
.tm-confirmation__order-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
	cursor: pointer;
	text-decoration: none;
	margin-bottom: 8px;
	font-family: inherit;
	transition: border-color .15s, color .15s, background .15s;
}
.tm-confirmation__order-btn:not(.is-stub):hover {
	border-color: var(--tm-purple, #5B4FE5);
	color: var(--tm-purple, #5B4FE5);
}
.tm-confirmation__order-btn.is-stub {
	opacity: 0.65;
	cursor: not-allowed;
}
.tm-confirmation__order-btn--primary {
	background: var(--tm-purple, #5B4FE5);
	border-color: var(--tm-purple, #5B4FE5);
	color: #fff;
}
.tm-confirmation__order-btn--primary:hover {
	background: var(--tm-purple-deep, #3F35B8);
	border-color: var(--tm-purple-deep, #3F35B8);
	color: #fff;
}
.tm-confirmation__order-btn i { font-size: 14px; }

/* ---------- Trainer-card (donkere variant, default) ----------
 * Markup gerenderd door tm_render_trainer_card() of [tm_trainer_card].
 * Donkere card met avatar, quote, bellen/mailen-knoppen.
 * Op de single-course pagina staat dezelfde container met andere child-markup
 * (.__name/__bio uit de light-variant); we forceren die tekstkleuren wit
 * verderop zodat alles leesbaar blijft op de donkere achtergrond. */
.tm-trainer-card {
	background: var(--tm-ink, #1E1B4B);
	color: #fff;
	border-radius: 18px;
	padding: 24px;
}
/* Single-course light-variant child-classes wit kleuren op de donkere card. */
.tm-trainer-card .tm-trainer-card__name { color: #fff; }
.tm-trainer-card .tm-trainer-card__bio  { color: rgba(255, 255, 255, 0.82); }
/* Confirmation-aside: forceer block-stacking. De light-variant op single-course
 * zet `display: grid; grid-template-columns: 96px 1fr` op `.tm-trainer-card` —
 * dat zou hier de tagline in een smalle 96px-kolom persen en de buttons knellen. */
.tm-confirmation__aside .tm-trainer-card {
	display: block;
}
.tm-trainer-card__head {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 14px;
}
.tm-trainer-card__avatar {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tm-orange, #FF8A1F);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 800;
}
.tm-trainer-card__head strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}
.tm-trainer-card__tagline {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.55);
	margin-top: 3px;
}
.tm-trainer-card__quote {
	margin: 0 0 16px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.55;
	font-style: italic;
}
.tm-trainer-card__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.tm-trainer-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	transition: background .15s ease;
}
.tm-trainer-card__btn:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}
.tm-trainer-card__btn i {
	--fa-primary-color: #fff;
	--fa-secondary-color: #fff;
	--fa-secondary-opacity: 0.5;
}

/* ---------- "Verder kijken" strook ---------- */
.tm-confirmation__verder-kijken-wrap {
	margin-top: 24px;
	text-align: center;
}
.tm-confirmation__verder-kijken-wrap .tm-hinge {
	margin-bottom: 16px;
}
.tm-confirmation__verder-kijken {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 640px) {
	.tm-confirmation__verder-kijken { grid-template-columns: 1fr; }
}
.tm-confirmation__nav-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 24px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 16px;
	text-decoration: none;
	text-align: left;
	color: var(--tm-ink, #1E1B4B);
	transition: border-color .15s, box-shadow .15s;
}
.tm-confirmation__nav-card:hover {
	border-color: var(--tm-purple, #5B4FE5);
	box-shadow: 0 4px 16px rgba(91, 79, 229, 0.08);
}
.tm-confirmation__nav-icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	background: var(--tm-canvas-soft, #F0EEFA);
	--fa-primary-color: var(--tm-purple, #5B4FE5);
	--fa-secondary-color: var(--tm-orange, #FF8A1F);
}
.tm-confirmation__nav-card > div {
	flex: 1;
	min-width: 0;
}
.tm-confirmation__nav-card strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 4px;
}
.tm-confirmation__nav-card p {
	margin: 0;
	font-size: 13px;
	color: var(--tm-ink-soft, #4A4870);
	line-height: 1.5;
}
.tm-confirmation__nav-arrow {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--tm-line, #ECEAF6);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--tm-ink-soft, #4A4870);
	transition: border-color .15s, color .15s;
}
.tm-confirmation__nav-card:hover .tm-confirmation__nav-arrow {
	border-color: var(--tm-purple, #5B4FE5);
	color: var(--tm-purple, #5B4FE5);
}

/* ---------------------------------------------------------------------------
 * PROFILE (lp-profile) — "Mijn account"
 *
 * Hero injectie via inc/tm-profile.php. Body krijgt class .tm-page-profile.
 * Templates: learnpress/profile/sidebar/header.php, profile/tabs.php,
 *            profile/tabs/orders/list.php
 * --------------------------------------------------------------------------- */

/* Page-canvas */
body.tm-page-profile #content.site-content {
	background: var(--tm-bg, #FAFAFC);
	padding: 32px 0 64px;
}

/* Hero (zelfde stijl als checkout-hero, kleinere lede) */
.tm-profile-hero { /* extends .tm-page-hero */
}
.tm-profile-hero__intro {
	max-width: 640px;
	margin: 0 auto 16px;
	padding: 0 16px;
	text-align: center;
}
.tm-profile-hero__intro .tm-hinge {
	padding: 8px 0 0;
}
.tm-profile-hero__lede {
	margin: 12px 0 0;
	font-size: 15px;
	color: var(--tm-ink-soft, #4A4870);
	line-height: 1.55;
	text-align: center;
}
/* Hero zelf iets minder padding-bottom zodat hinge-block dichter aansluit */
body.tm-page-profile .tm-page-hero {
	padding-bottom: 8px;
}
/* Site-content padding-top minder zodat de profile-grid dichter onder de
   hero/lede begint (default tm-page-profile heeft 32px). */
body.tm-page-profile #content.site-content {
	padding-top: 16px;
}

/* ---------------------------------------------------------------------------
 * Login + register pagina's (`/login/`, `/register/`).
 * Pattern matched aan tm-profile-hero: max-width 640px container, hinge
 * gecentreerd boven de lede, cross-link onder het formulier ook gecentreerd.
 * Markup komt uit inc/tm-auth-pages.php.
 * ------------------------------------------------------------------------- */
.tm-auth-hero__intro {
	max-width: 640px;
	margin: 0 auto 16px;
	padding: 0 16px;
	text-align: center;
}
.tm-auth-hero__intro .tm-hinge {
	padding: 8px 0 0;
}
.tm-auth-hero__lede {
	margin: 12px 0 0;
	font-size: 15px;
	color: var(--tm-ink-soft, #4A4870);
	line-height: 1.55;
	text-align: center;
}
body.tm-page-auth .tm-auth-cross-link,
.entry-content > p.tm-auth-cross-link {
	display: block;
	max-width: 640px;
	margin: 24px auto 0 !important;
	padding: 0 16px;
	text-align: center !important;
	font-size: 15px;
	color: var(--tm-ink-soft, #4A4870);
}
body.tm-page-auth .tm-auth-cross-link a,
.entry-content > p.tm-auth-cross-link a {
	color: var(--tm-orange, #FF8A1F);
	font-weight: 600;
	text-decoration: none;
}
body.tm-page-auth .tm-auth-cross-link a:hover,
.entry-content > p.tm-auth-cross-link a:hover { text-decoration: underline; }

/* Hero iets dichter op de hinge */
body.tm-page-auth .tm-page-hero {
	padding-bottom: 8px;
}

/* LP wrappers neutraal maken */
body.tm-page-profile #learn-press-profile {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 16px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
}
body.tm-page-profile #learn-press-profile .lp-content-area {
	padding: 0;
}
body.tm-page-profile .wrapper-profile-header,
body.tm-page-profile .wrapper-profile-header.wrap-fullwidth {
	padding: 0;
	margin: 0 0 24px;
	background: transparent;
}
body.tm-page-profile .wrapper-profile-header .lp-content-area {
	max-width: none;
	padding: 0;
}
body.tm-page-profile .lp-profile-content-area {
	display: block;
}

/* Layout: PHP-wrappers .tm-profile-grid + __sidebar + __main rond LP's render
   (zie inc/tm-profile.php action-hooks). Flexbox: 280px sidebar + 1fr main. */
body.tm-page-profile .tm-profile-grid {
	display: flex;
	gap: 28px;
	align-items: flex-start;
}
body.tm-page-profile .tm-profile-grid__sidebar {
	flex: 0 0 280px;
	width: 280px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
body.tm-page-profile .tm-profile-grid__sidebar .wrapper-profile-header {
	margin: 0;
	padding: 0;
	background: transparent;
	width: auto;
}
/* Reset EduBlink's card-styling op .lp-profile-content-area zodat alleen
   onze eigen .tm-profile-card visueel is. Anders krijg je dubbele padding,
   border en shadow rond de avatar/name. */
body.tm-page-profile .tm-profile-grid__sidebar .wrapper-profile-header .lp-content-area,
body.tm-page-profile .tm-profile-grid__sidebar .wrapper-profile-header .lp-profile-content-area {
	max-width: none;
	padding: 0;
	margin: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
	display: block;
	align-items: initial;
}
/* LP rendert standaard <div class="lp-profile-left"> met de WP-avatar; onze
   eigen header.php heeft een initiaal-cirkel dus die LP-avatar verbergen. */
body.tm-page-profile .tm-profile-grid__sidebar .lp-profile-left {
	display: none;
}
body.tm-page-profile .tm-profile-grid__main {
	flex: 1;
	min-width: 0;
}
/* LP zet defaults op #profile-sidebar (float:left + width:270 + margin-top
   + margin-bottom + border) en op .lp-profile-content (float:right +
   width:calc(100%-300px) + padding-top + margin-bottom). Die breken onze
   flex-layout. Resetten naar block-default zodat .tm-profile-grid het
   layoutwerk doet. NB: `.lp-user-profile` zit op #learn-press-profile, NIET
   op body — dus selector via descendant matchen. */
body.tm-page-profile #profile-sidebar {
	float: none;
	width: auto;
	margin: 0;
	border: 0;
	padding: 0;
}
body.tm-page-profile .lp-profile-content,
body.tm-page-profile #profile-content {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

@media (max-width: 1023px) and (min-width: 768px) {
	/* Tablet: sidebar smaller (220px) zodat main meer ruimte krijgt;
	   geen kolom-stack, content blijft naast elkaar. */
	body.tm-page-profile .tm-profile-grid {
		gap: 20px;
	}
	body.tm-page-profile .tm-profile-grid__sidebar {
		flex: 0 0 220px;
		width: 220px;
	}
}

@media (max-width: 767px) {
	/* Echt mobile: kolom-stack + sidebar-menu horizontaal zodat de
	   menu-card niet onnodig veel verticale ruimte vreet. */
	body.tm-page-profile .tm-profile-grid {
		flex-direction: column;
	}
	body.tm-page-profile .tm-profile-grid__sidebar {
		flex: 1 1 auto;
		width: auto;
	}
}

/* Smal mobile: profile-pagina compleet binnen 390px viewport houden.
   - grid-containers krimpen met content
   - trainer-card actions: min-width:220 opheffen
   - inschrijfcode-form: input + button stacken
   - aankomende-trainingen card-actions: wrappen */
@media (max-width: 479px) {
	body.tm-page-profile,
	body.tm-page-profile .tm-profile-grid,
	body.tm-page-profile .tm-profile-grid__sidebar,
	body.tm-page-profile .tm-profile-grid__main {
		min-width: 0;
		max-width: 100%;
	}
	body.tm-page-profile {
		overflow-x: clip;
	}
	.tm-trainer-card--wide .tm-trainer-card__actions {
		min-width: 0;
	}
	.tm-trainer-card__btn {
		font-size: 12px;
		padding: 10px 8px;
	}
	body.tm-page-profile .lp-order-recover {
		flex-direction: column;
		gap: 8px;
	}
	body.tm-page-profile .lp-order-recover input[type="text"],
	body.tm-page-profile .lp-order-recover button {
		width: 100%;
	}
	/* Card-padding kleiner zodat content meer breedte krijgt;
	   __right rij i.p.v. kolom met space-between zodat prijs links
	   en knoppen rechts samen op één regel staan (gewonnen breedte). */
	.tm-training-card {
		padding: 14px;
	}
	.tm-training-card__right {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 8px;
	}
	.tm-training-card__total {
		margin-right: auto;
	}
	.tm-training-card__actions {
		flex-wrap: wrap;
	}
}

/* Verberg eventuele LP cover-image (we hebben geen cover-foto in huisstijl). */
body.tm-page-profile .lp-profile-cover-image,
body.tm-page-profile .lp-cover-image {
	display: none;
}

/* Wishlist-tab gebruikt EduBlink's block-1.php voor course-cards (zelfde
   markup als homepage / archive). 2 kolommen op de standaard rechter-kolom
   (≥640px), 1 kolom op smaller. Geen EduBlink-grid-classes op de wrapper —
   die schalen anders en breken de 2-up layout. */
.tm-wishlist-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (max-width: 640px) {
	.tm-wishlist-grid { grid-template-columns: 1fr; }
}
.tm-wishlist-grid__item {
	min-width: 0;
	max-width: 100%;
}
.tm-wishlist-grid__item .edublink-single-course {
	height: 100%;
}

/* ---------- Profile-card (avatar + name + bio) ---------- */
.tm-profile-card {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(30, 27, 75, 0.04);
}
.tm-profile-card__avatar {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--tm-orange, #FF8A1F);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 800;
}
.tm-profile-card__body {
	flex: 1;
	min-width: 0;
}
.tm-profile-card__name {
	display: block;
	font-size: 18px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
	letter-spacing: -0.01em;
	margin-bottom: 4px;
}
.tm-profile-card__bio {
	margin: 0;
	font-size: 13px;
	color: var(--tm-ink-soft, #4A4870);
	line-height: 1.5;
}

/* ---------- Sidebar nav ---------- */
.tm-profile-nav {
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(30, 27, 75, 0.04);
	padding: 8px;
}
.tm-profile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tm-profile-nav__item {
	display: block;
}
.tm-profile-nav__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tm-ink-soft, #4A4870);
	text-decoration: none;
	transition: background .15s, color .15s;
}
.tm-profile-nav__link:hover {
	background: var(--tm-canvas-soft, #F0EEFA);
	color: var(--tm-ink, #1E1B4B);
}
.tm-profile-nav__link i {
	font-size: 16px;
	width: 20px;
	text-align: center;
	--fa-secondary-opacity: 0.4;
}
.tm-profile-nav__item.is-active .tm-profile-nav__link {
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
}
.tm-profile-nav__item.is-active .tm-profile-nav__link i {
	--fa-primary-color: #fff;
	--fa-secondary-color: #fff;
}
.tm-profile-nav__item.logout .tm-profile-nav__link {
	color: var(--tm-ink-mute, #767492);
}

/* ---------- Profile-content area ---------- */
body.tm-page-profile #profile-content,
body.tm-page-profile .lp-profile-content {
	background: transparent;
}
body.tm-page-profile .profile-heading {
	display: none; /* eigen section-titles in list.php */
}

/* ---------- Trainingen — sectie-headings ---------- */
.tm-trainings-section + .tm-trainings-section {
	margin-top: 32px;
}
.tm-trainings-section__title {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
	letter-spacing: -0.015em;
}
.tm-trainings-section__accent {
	color: var(--tm-orange, #FF8A1F);
}

/* ---------- Trainings-card (per order/event) ---------- */
.tm-trainings-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tm-training-card {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(30, 27, 75, 0.04);
}
@media (max-width: 720px) {
	.tm-training-card {
		grid-template-columns: 56px minmax(0, 1fr);
		grid-template-areas:
			"thumb body"
			"right right";
		column-gap: 24px;
		row-gap: 12px;
	}
	.tm-training-card__thumb {
		grid-area: thumb;
		flex: 0 0 56px;
		width: 56px;
		height: 56px;
		overflow: hidden;
	}
	.tm-training-card__body  { grid-area: body; }
	.tm-training-card__right { grid-area: right; align-items: stretch; }
}
/* Thumb-styling 1-op-1 zoals .tm-confirmation__order-thumb op de
   bedankpagina: 72x72, groot glyph (56px) gecentreerd, geen wordmark. */
.tm-training-card__thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--tm-canvas-soft, #F0EEFA);
	display: flex;
	align-items: stretch;
	justify-content: stretch;
}
.tm-training-card__thumb .tm-hero,
.tm-training-card__thumb .tm-hero--thumb {
	width: 100%;
	height: 100%;
	border-radius: 0;
	display: block;
	overflow: hidden;
}
.tm-training-card__thumb .tm-hero__left {
	width: 100%;
	height: 100%;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.tm-training-card__thumb .tm-hero__glyph {
	font-size: 56px;
	line-height: 1;
}
.tm-training-card__thumb .tm-hero__name {
	display: none;
}
.tm-training-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.tm-training-card__eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tm-purple, #5B4FE5);
}
.tm-training-card.is-past .tm-training-card__eyebrow {
	color: var(--tm-ink-mute, #767492);
}
.tm-training-card__title {
	font-size: 16px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.tm-training-card__meta {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--tm-ink-mute, #767492);
}
.tm-training-card__pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: 999px;
}
.tm-training-card__pill--ok {
	background: rgba(16, 185, 129, 0.12);
	color: #047857;
}
.tm-training-card__pill--mute {
	background: var(--tm-canvas-soft, #F0EEFA);
	color: var(--tm-ink-soft, #4A4870);
}
.tm-training-card__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}
.tm-training-card__total {
	font-size: 18px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
	letter-spacing: -0.01em;
}
.tm-training-card__actions {
	display: flex;
	gap: 8px;
}
.tm-training-card__action,
.tm-training-card__view {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid var(--tm-line, #ECEAF6);
	background: #fff;
	color: var(--tm-ink, #1E1B4B);
	cursor: pointer;
	font-family: inherit;
	transition: border-color .15s, color .15s;
}
.tm-training-card__action.is-stub {
	opacity: 0.6;
	cursor: not-allowed;
}
.tm-training-card__view {
	background: var(--tm-purple, #5B4FE5);
	border-color: var(--tm-purple, #5B4FE5);
	color: #fff;
}
.tm-training-card__view:hover {
	background: var(--tm-purple-deep, #3F35B8);
	border-color: var(--tm-purple-deep, #3F35B8);
	color: #fff;
}
.tm-training-card__view i { font-size: 11px; }
.tm-training-card__action i {
	font-size: 13px;
	--fa-secondary-opacity: 0.4;
}

/* ---------- Empty state ---------- */
.tm-trainings-empty {
	text-align: center;
	padding: 64px 24px;
	background: #fff;
	border: 1px dashed var(--tm-line, #ECEAF6);
	border-radius: 18px;
}
.tm-trainings-empty i {
	font-size: 48px;
	color: var(--tm-purple, #5B4FE5);
	--fa-secondary-color: var(--tm-orange, #FF8A1F);
	--fa-secondary-opacity: 0.5;
	margin-bottom: 16px;
}
.tm-trainings-empty strong {
	display: block;
	font-size: 18px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
	margin-bottom: 8px;
}
.tm-trainings-empty p {
	margin: 0;
	font-size: 14px;
	color: var(--tm-ink-soft, #4A4870);
}
.tm-trainings-empty a {
	color: var(--tm-purple, #5B4FE5);
	font-weight: 700;
	text-decoration: none;
}
.tm-trainings-empty a:hover {
	text-decoration: underline;
}

/* ---------- Pagination ---------- */
.tm-trainings-pagination {
	margin-top: 24px;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Profile → "Bekijk training" → order-detail-pagina (LP).
 *
 * LP rendert (via ProfileOrderTemplate::render_order_details — AJAX):
 *   <h3>Bestel Details</h3>
 *   <table class="lp-list-table order-table-details">…</table>
 *   <p><strong>Bestelsleutel:</strong> ORDER…</p>
 *   <p><strong>Bestelstatus:</strong> <span class="lp-label label-completed">Voltooid</span></p>
 *
 * We kunnen alleen stylen (markup is AJAX). Card-look matched aan
 * .tm-training-card; status-pills hergebruiken de --pill--ok kleurschaal.
 * ------------------------------------------------------------------------- */
/* LP wishlist-plugin print een hardcoded <h3>My Wishlist Courses</h3> boven
   de cards. Onze gettext-filter (inc/tm-profile.php) zet de translation op leeg,
   maar de lege <h3> blijft als layout-element staan en duwt de cards omlaag.
   Hier verbergen we 'm volledig zodat de cards bovenaan uitlijnen met de sidebar. */
body.tm-page-profile h3:empty,
body.tm-page-profile h2:empty {
	display: none !important;
}

body.tm-page-profile #lp-profile-view-order-details > h3,
body.tm-page-profile .order-table-details + p ~ h3 {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
	letter-spacing: -0.015em;
	text-transform: none;
}
body.tm-page-profile .order-table-details {
	width: 100%;
	margin: 0 0 16px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(30, 27, 75, 0.04);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-family: inherit;
}
body.tm-page-profile .order-table-details th,
body.tm-page-profile .order-table-details td {
	padding: 14px 20px;
	text-align: left;
	border-bottom: 1px solid var(--tm-line, #ECEAF6);
	font-size: 14px;
	background: transparent;
}
body.tm-page-profile .order-table-details thead th {
	background: var(--tm-canvas-soft, #F0EEFA);
	color: var(--tm-ink-soft, #4A4870);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
body.tm-page-profile .order-table-details tbody td {
	color: var(--tm-ink, #1E1B4B);
}
body.tm-page-profile .order-table-details tbody a {
	color: var(--tm-ink, #1E1B4B);
	font-weight: 600;
	text-decoration: none;
}
body.tm-page-profile .order-table-details tbody a:hover {
	color: var(--tm-orange, #FF8A1F);
}
body.tm-page-profile .order-table-details tfoot th,
body.tm-page-profile .order-table-details tfoot td {
	color: var(--tm-ink, #1E1B4B);
	font-weight: 700;
}
body.tm-page-profile .order-table-details tfoot tr:last-child th,
body.tm-page-profile .order-table-details tfoot tr:last-child td {
	border-bottom: 0;
	font-size: 16px;
}
body.tm-page-profile .order-table-details td:last-child,
body.tm-page-profile .order-table-details th:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* LP's tfoot heeft 2 eigen rijen ("Subtotaal" + "Totaal") die beide het
 * excl-BTW bedrag zonder context tonen — wij vervangen door 3 eigen rijen:
 * Subtotaal (excl) / BTW (21%) / Totaal (incl). LP's eigen rijen verbergen
 * via :not(.tm-order-row). */
body.tm-page-profile .order-table-details tfoot > tr:not(.tm-order-row) {
	display: none;
}
body.tm-page-profile .order-table-details tfoot .tm-order-row th,
body.tm-page-profile .order-table-details tfoot .tm-order-row td {
	font-weight: 500;
	color: var(--tm-ink-soft, #4A4870);
	font-size: 13px;
}
body.tm-page-profile .order-table-details tfoot .tm-order-row--subtotal-ex th,
body.tm-page-profile .order-table-details tfoot .tm-order-row--subtotal-ex td {
	border-top: 1px solid var(--tm-line, #ECEAF6);
}
/* Totaal incl. BTW = zwaarste rij (donker, vetter, groter, geen border-bottom) */
body.tm-page-profile .order-table-details tfoot .tm-order-row--total-inc th,
body.tm-page-profile .order-table-details tfoot .tm-order-row--total-inc td {
	color: var(--tm-ink, #1E1B4B);
	font-weight: 800;
	font-size: 16px;
	border-bottom: 0;
}

/* "Bestelsleutel:" + "Bestelstatus:" → compacte info-rij */
body.tm-page-profile #lp-profile-view-order-details > p,
body.tm-page-profile .order-table-details + p,
body.tm-page-profile .order-table-details + p + p {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 0 8px;
	padding: 10px 16px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 10px;
	font-size: 13px;
	color: var(--tm-ink-soft, #4A4870);
}
body.tm-page-profile #lp-profile-view-order-details > p strong,
body.tm-page-profile .order-table-details + p strong,
body.tm-page-profile .order-table-details + p + p strong {
	color: var(--tm-ink, #1E1B4B);
	font-weight: 700;
	margin-right: 4px;
}

/* Status-pill (LP renders <span class="lp-label label-{status}">) */
body.tm-page-profile .lp-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: 999px;
	line-height: 1.5;
}
body.tm-page-profile .lp-label.label-completed {
	background: rgba(16, 185, 129, 0.12);
	color: #047857;
}
body.tm-page-profile .lp-label.label-cancelled,
body.tm-page-profile .lp-label.label-failed {
	background: rgba(255, 111, 97, 0.12);
	color: #c1392b;
}
body.tm-page-profile .lp-label.label-pending,
body.tm-page-profile .lp-label.label-processing {
	background: var(--tm-orange-soft, #FFF1DF);
	color: #c75e10;
}

/* Back-link bovenaan, vóór de h3 (geïnjecteerd via tm-profile.php hook) */
.tm-order-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 8px 14px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	color: var(--tm-ink, #1E1B4B);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .15s, color .15s;
}
.tm-order-back:hover {
	border-color: var(--tm-purple, #5B4FE5);
	color: var(--tm-purple, #5B4FE5);
}
.tm-order-back i { font-size: 11px; }

/* Trainer-card op profile-content (boven Trainingen-tab) — full-width
   horizontaal: head (avatar+naam+tagline) links, quote in midden,
   bellen/mailen-knoppen rechts. */
.tm-profile-trainer-wrap {
	margin: 0 0 24px;
}
.tm-trainer-card--wide {
	display: grid;
	grid-template-columns: minmax(220px, auto) minmax(0, 1fr) minmax(220px, auto);
	gap: 24px;
	align-items: center;
}
.tm-trainer-card--wide .tm-trainer-card__head {
	margin-bottom: 0;
	white-space: nowrap;
}
.tm-trainer-card--wide .tm-trainer-card__tagline {
	white-space: nowrap;
}
.tm-trainer-card--wide .tm-trainer-card__quote {
	margin: 0;
}
.tm-trainer-card--wide .tm-trainer-card__actions {
	grid-template-columns: 1fr 1fr;
	min-width: 220px;
}
@media (max-width: 900px) {
	.tm-trainer-card--wide {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.tm-trainer-card--wide .tm-trainer-card__head {
		margin-bottom: 0;
		white-space: normal;
	}
	.tm-trainer-card--wide .tm-trainer-card__tagline {
		white-space: normal;
	}
}

/* Profile-verder-kijken: minder bovenmarge dan op bedankpagina */
.tm-profile-verder.tm-confirmation__verder-kijken-wrap {
	margin-top: 16px;
}

/* ---------- Recover-order form (Inschrijfcode) ---------- */
body.tm-page-profile .profile-recover-order {
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 18px;
	padding: 24px;
	margin-top: 24px;
}
body.tm-page-profile .profile-recover-order .recover-order__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
	margin: 0 0 8px;
}
body.tm-page-profile .profile-recover-order .recover-order__description {
	font-size: 14px;
	color: var(--tm-ink-soft, #4A4870);
	margin: 0 0 16px;
}
body.tm-page-profile .lp-order-recover {
	display: flex;
	gap: 12px;
}
body.tm-page-profile .lp-order-recover input[type="text"] {
	flex: 1;
	padding: 12px 14px;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
}
body.tm-page-profile .lp-order-recover input[type="text"]:focus {
	outline: none;
	border-color: var(--tm-purple, #5B4FE5);
}
body.tm-page-profile .lp-order-recover button {
	padding: 12px 24px;
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
}
body.tm-page-profile .lp-order-recover button:hover {
	background: var(--tm-purple-deep, #3F35B8);
}

/* ---------------------------------------------------------------------------
 * Cursus-archief: rustige fade-in + soft filter-overgang.
 *
 * 1) Eigen fade-in vervangt SAL's slide-up van 1.25s.
 *    EduBlink zet `data-sal` op iedere card en animeert die met
 *    `[data-sal].sal-animate { animation: edublink--slide-up 1.25s }`
 *    (parent main.css ~regel 8238). De SAL-CSS staat in main.css en
 *    de .sal-animate class wordt pas door SAL's JS toegevoegd, dus
 *    cards renderen eerst zichtbaar, springen dan naar opacity:0
 *    (begin van de SAL-keyframe) en sliden in over 1.25s — dat is de
 *    "verdwijnen-en-faden-in"-flicker. Op homepage doet Elementor
 *    hetzelfde subtieler met `elementor-invisible` (CSS-class die op
 *    opacity:0 zet vanuit een vroeg geladen stylesheet). Wij doen het
 *    principe ook hier: cards meteen op opacity:0 via een inline
 *    <style> in <head> (zie tm_courses_archive_critical_css() in
 *    inc/tm-courses-hero.php), daarna onze eigen tmCardFadeIn over
 *    500ms met een lichte 50ms stagger per card.
 *
 * 2) View Transitions voor pill-clicks.
 *    Pill-klikken filteren client-side via tm-courses-filter.js — dat
 *    draait de DOM-toggle onder document.startViewTransition() voor een
 *    soft crossfade in moderne browsers. We benoemen alleen de grid als
 *    view-transition-area zodat de browser 'm als één snapshot animeert;
 *    de filter-bar blijft statisch onder de root.
 * ------------------------------------------------------------------------- */

/* Matcht EduBlink's `edublink--slide-up` (parent main.css ~regel 8217)
   qua distance + easing + duration, zodat de inkomanimatie identiek
   voelt aan de homepage-cards die Elementor met dezelfde keyframe
   laat afspelen. */
@keyframes tmCardFadeIn {
	from { opacity: 0; transform: translate3d(0, 3rem, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.post-type-archive-lp_course .edublink-course-archive [data-sal],
.post-type-archive-lp_course .edublink-course-archive [data-sal].sal-animate,
.tax-course_category .edublink-course-archive [data-sal],
.tax-course_category .edublink-course-archive [data-sal].sal-animate,
.tax-course_tag .edublink-course-archive [data-sal],
.tax-course_tag .edublink-course-archive [data-sal].sal-animate,
.tax-course_level .edublink-course-archive [data-sal],
.tax-course_level .edublink-course-archive [data-sal].sal-animate {
	animation: tmCardFadeIn 1250ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

/* Stagger 50ms tussen cards voor een zachte ripple. Tot 12 cards
   (genoeg ruimte voor groei; cards 13+ vallen op delay 0). */
.edublink-course-archive [data-sal]:nth-child(2)  { animation-delay:  50ms; }
.edublink-course-archive [data-sal]:nth-child(3)  { animation-delay: 100ms; }
.edublink-course-archive [data-sal]:nth-child(4)  { animation-delay: 150ms; }
.edublink-course-archive [data-sal]:nth-child(5)  { animation-delay: 200ms; }
.edublink-course-archive [data-sal]:nth-child(6)  { animation-delay: 250ms; }
.edublink-course-archive [data-sal]:nth-child(7)  { animation-delay: 300ms; }
.edublink-course-archive [data-sal]:nth-child(8)  { animation-delay: 350ms; }
.edublink-course-archive [data-sal]:nth-child(9)  { animation-delay: 400ms; }
.edublink-course-archive [data-sal]:nth-child(10) { animation-delay: 450ms; }
.edublink-course-archive [data-sal]:nth-child(11) { animation-delay: 500ms; }
.edublink-course-archive [data-sal]:nth-child(12) { animation-delay: 550ms; }

.post-type-archive-lp_course .edublink-course-archive,
.tax-course_category .edublink-course-archive,
.tax-course_tag .edublink-course-archive,
.tax-course_level .edublink-course-archive {
	view-transition-name: tm-courses-grid;
}

::view-transition-old(tm-courses-grid),
::view-transition-new(tm-courses-grid) {
	animation-duration: 220ms;
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media (prefers-reduced-motion: reduce) {
	.edublink-course-archive [data-sal] {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	::view-transition-old(tm-courses-grid),
	::view-transition-new(tm-courses-grid) {
		animation: none !important;
	}
}

/* ===========================================================================
 * INFO-BLOCK — altijd-zichtbare cards (vraag-heading + antwoord-body).
 * Gebruikt op over-ons en in-company; rendert via template-parts/info-block.php.
 * Bewust geen <details>-accordion: de drie items zijn klein genoeg om uitgevouwen
 * te tonen en daar wint prominentie het van compactheid.
 * =========================================================================== */
.tm-info-block {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tm-info-card {
	background: #fff;
	border: 1px solid var(--tm-line);
	border-radius: 14px;
	padding: 22px 26px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tm-info-card:hover {
	border-color: rgba(91, 79, 229, 0.25);
	box-shadow: 0 4px 16px rgba(30, 27, 75, 0.04);
}
.tm-info-card__title {
	margin: 0 0 10px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 800;
	color: var(--tm-ink);
	line-height: 1.35;
	letter-spacing: -0.005em;
}
.tm-info-card__body {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.65;
	color: var(--tm-ink-soft);
}

/* ===========================================================================
 * Section CTA's — standalone knoppen op een sectie-achtergrond.
 * Niet voor knoppen in cards, forms, headers, footer-input-combinaties of
 * navigatie. (Course-card hover-knop, agenda-rij-knop, footer-newsletter,
 * hoofdmenu-knoppen en form-submits hebben hun eigen styling.)
 *
 * Eén canonical recipe (paars + shadow + 12px radius + fade-fill hover),
 * gedeeld tussen drie systemen via één bron-regel:
 *   1. .tm-btn / --primary / --secondary  — generieke class voor PHP-templates
 *      (search.php, page-nl-bevestigd.php, wishlist-empty)
 *   2. .hero-c5__cta / --primary / --secondary  — homepage-hero CTAs
 *   3. .tm-hero-style-cta op .edublink-button-item  — Elementor button widget
 *      ("Bekijk meer trainingen", "Alle referenties")
 *
 * Specificiteit: dubbel-class (`.tm-btn.tm-btn--primary`) wint van
 * EduBlink's `a.edu-btn.btn-primary` als het child-theme later laadt;
 * voor `<a>`-elementen toch even `a.tm-btn.tm-btn--primary` toevoegen
 * voor de zekerheid bij selectoren met element-prefix in parent.
 * =========================================================================== */
.tm-btn,
a.tm-btn,
button.tm-btn,
.hero-c5__cta,
.tm-hero-style-cta .edublink-button-item.default-style {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: auto;            /* override EduBlink-button-item: 60px */
	padding: 14px 22px;      /* override EduBlink-button-item: 0 30px */
	border: 0;
	border-radius: 12px;     /* override EduBlink-button-item: 5px */
	font-size: 15px;
	font-weight: 700;        /* override EduBlink-button-item: 500 */
	line-height: 1;          /* override EduBlink-button-item: 62px */
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow .15s ease, color .15s ease;
}

/* `.hero-c5__cta.hero-c5__cta--primary` (specificiteit 0,2,0) i.p.v.
   alleen `.hero-c5__cta--primary` (0,1,0) — dat laatste verloor van
   Elementor's `.elementor a { box-shadow: none }` (0,1,1) in
   custom-frontend.min.css, waardoor de hero-CTA shadowless oogde
   terwijl de bottom-CTA (selector 0,3,0) wel rendered. */
.tm-btn--primary,
a.tm-btn.tm-btn--primary,
button.tm-btn.tm-btn--primary,
.hero-c5__cta.hero-c5__cta--primary,
.tm-hero-style-cta .edublink-button-item.default-style {
	background: var(--tm-purple);
	color: #fff;
	box-shadow: 0 6px 14px rgba(30, 27, 75, 0.30), 0 16px 36px rgba(91, 79, 229, 0.55);
}
.tm-btn--primary:hover,
.tm-btn--primary:focus,
.hero-c5__cta--primary:hover,
.tm-hero-style-cta .edublink-button-item:hover,
.tm-hero-style-cta .edublink-button-item:focus,
.tm-hero-style-cta .edublink-button-item:active {
	background: var(--tm-purple);
	color: #fff;
}

/* Fade-fill hover. .tm-btn en .hero-c5__cta gebruiken ::before; het
   Elementor-button-widget heeft al een ::after uit parent-CSS (main.css
   §5767), dus daar alleen background en radius bijstellen. */
.tm-btn--primary::before,
.hero-c5__cta--primary::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 0;
	background: linear-gradient(
		-90deg,
		color-mix(in srgb, var(--tm-purple) 65%, white) 0%,
		var(--tm-purple) 100%
	);
	transition: width 0.4s ease;
	z-index: -1;
}
.tm-btn--primary:hover::before,
.hero-c5__cta--primary:hover::before {
	left: 0;
	width: 100%;
}
.tm-hero-style-cta .edublink-button-item.default-style::after {
	background: linear-gradient(
		-90deg,
		color-mix(in srgb, var(--tm-purple) 65%, white) 0%,
		var(--tm-purple) 100%
	);
	border-radius: 12px;
}

/* Pijl-icoon: SVG (16×16) of icon-font (`<i class="icon-4">`, ~14px). Gap
   tussen tekst en icon komt uit `gap: 10px` op de flex-container — de
   parent `a.edu-btn i { padding-left: 9px }` wordt overschreven. */
.tm-btn svg,
.hero-c5__cta svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.tm-btn i,
.hero-c5__cta i,
.tm-hero-style-cta .edublink-button-item i {
	padding-left: 0;
	font-size: 14px;
	line-height: 1;
}
/* Specifiek voor het Elementor-button-widget: parent gebruikt geen flex
   gap, dus daar moet padding-left wél terug. */
.tm-hero-style-cta .edublink-button-item i {
	padding-left: 10px;
}

/* Secundair: transparant + ink-tekst, geen shadow; paars op hover. Voor
   bijvoorbeeld "Onze methode →" naast de primary in de hero. */
.tm-btn--secondary,
a.tm-btn.tm-btn--secondary,
button.tm-btn.tm-btn--secondary,
.hero-c5__cta--secondary {
	background: transparent;
	color: var(--tm-ink);
	box-shadow: none;
	padding: 14px 12px;
}
.tm-btn--secondary:hover,
.hero-c5__cta--secondary:hover {
	color: var(--tm-purple);
	background: transparent;
}

/* ===========================================================================
 * Homepage gutter — alle Elementor boxed-secties op de homepage matchen
 * dezelfde visible-content-breedte (1200px) en horizontale gutter
 * (clamp 16-32px) als de hero (.hero-c5__inner). Daardoor staan hero,
 * "Populaire trainingen"-grid, hinges, trainer-blok en testimonials op
 * exact dezelfde linker-/rechterrand op elk viewport-formaat.
 *
 * Scope = `.elementor-13480` (homepage post-id). Andere Elementor-pagina's
 * raken niet, en stats-/contact-/footer-strips (intentioneel breder
 * volgens design-regels) worden niet aangetast — die zitten op 1312px.
 *
 * Specificiteit (0,3,1) matcht Elementor's per-section overrides
 * (`.elementor-13480 .elementor-element.elementor-element-... > .elementor-container`,
 * ook 0,3,1); child-theme-CSS laadt ná Elementor's post-13480.css, dus
 * deze regel wint via cascade-volgorde. Geen `!important` nodig.
 * =========================================================================== */
.elementor-13480 .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1264px;
	padding-inline: clamp(16px, 4vw, 32px);
}

/* ===========================================================================
 * tm_featured_courses — homepage course-grid (los van Elementor/EduBlink).
 * ---------------------------------------------------------------------------
 * Server-side gerenderde grid die het Elementor "Course Block"-widget op
 * de homepage vervangt. Hergebruikt block-1.php (zelfde card als /trainingen/)
 * en de bestaande `tmCardFadeIn`-keyframe; geen JS, geen elementor-invisible,
 * dus geen race-condition meer. Cards op homepage zijn van nature smaller
 * dan op /trainingen/ omdat de grid 4 kolommen telt binnen een nauwere
 * Elementor-section dan de full-width archive.
 * =========================================================================== */
.tm-featured-courses {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 280px));
	justify-content: center;
	gap: 24px;
}
.tm-featured-courses--cols-1 { grid-template-columns: minmax(0, 280px); }
.tm-featured-courses--cols-2 { grid-template-columns: repeat(2, minmax(0, 280px)); }
.tm-featured-courses--cols-3 { grid-template-columns: repeat(3, minmax(0, 280px)); }

/* Initial state: cards onzichtbaar tot ze in viewport komen.
   `.is-revealed` wordt door IntersectionObserver in tm-components.js gezet,
   waarna de keyframe afspeelt en de card op zijn natuurlijke staat eindigt
   (forwards = behoud van eindstand). Hetzelfde patroon als SAL op /trainingen/,
   maar in eigen JS — los van EduBlink en Elementor. */
.tm-featured-courses__item {
	opacity: 0;
	transform: translate3d(0, 3rem, 0);
}
.tm-featured-courses__item.is-revealed {
	animation: tmCardFadeIn 1250ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.tm-featured-courses__item.is-revealed:nth-child(2) { animation-delay:  50ms; }
.tm-featured-courses__item.is-revealed:nth-child(3) { animation-delay: 100ms; }
.tm-featured-courses__item.is-revealed:nth-child(4) { animation-delay: 150ms; }
.tm-featured-courses__item.is-revealed:nth-child(5) { animation-delay: 200ms; }
.tm-featured-courses__item.is-revealed:nth-child(6) { animation-delay: 250ms; }

@media (max-width: 1199px) {
	.tm-featured-courses,
	.tm-featured-courses--cols-3,
	.tm-featured-courses--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 280px));
	}
}
@media (max-width: 575px) {
	.tm-featured-courses,
	.tm-featured-courses--cols-2,
	.tm-featured-courses--cols-3,
	.tm-featured-courses--cols-4 {
		grid-template-columns: minmax(0, 280px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tm-featured-courses__item {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

/* ===========================================================================
 * 404 — Pagina niet gevonden (404.php). Hergebruikt het hero-circle-component
 * van de homepage via template-parts/hero-circle-404.php, maar zonder de
 * copy-zijde — die wordt geleverd door tm-page-hero + tm-hinge bovenaan.
 * Deze regels overschrijven de homepage-grid naar 1-koloms gecentreerd en
 * stylen het centrum-"404" en de pillen-als-links.
 * =========================================================================== */

/* Pillen worden klikbare anchors — reset standaard a-styling, behoud
   hero-c5__step- positionering en kleuren uit hero-circle.css. Geen
   hover-translate of -shadow: pillen blijven stilstaan op hover. */
.hero-c5__step--link,
.hero-c5__step--link:hover,
.hero-c5__step--link:focus,
.hero-c5__step--link:active {
	color: inherit;
	text-decoration: none;
}
.hero-c5__step--link {
	cursor: pointer;
}

/* Centrum: prominent "404" ipv logo + wordmark. Schaal en positionering
   komen uit hero-circle.css's .hero-c5__center-inner; we overschrijven
   alleen de typografie + voegen de subtiele tegen-rotatie toe. */
.hero-c5__center-inner--404 {
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero-c5__center-404 {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(48px, 6vw, 72px);
	line-height: 1;
	color: var(--tm-ink, #1E1B4B);
	letter-spacing: -0.02em;
}

/* ===========================================================================
 * Zoekresultaten (search.php) — eigen tegellijst voor non-course-hits naast
 * de tm-featured-courses-grid voor lp_course-hits, plus lege-staat.
 * =========================================================================== */
.tm-search .tm-section {
	padding: 48px 0 64px;
}
.tm-search-list {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: grid;
	gap: 16px;
}
.tm-featured-courses + .tm-search-list {
	margin-top: 48px;
}
.tm-search-list__item {
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 14px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.tm-search-list__item:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(30, 27, 75, 0.06);
}
.tm-search-list__link {
	display: block;
	padding: 20px 24px;
	color: inherit;
	text-decoration: none;
}
.tm-search-list__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
	margin: 0 0 6px;
	line-height: 1.3;
}
.tm-search-list__excerpt {
	font-size: 14px;
	line-height: 1.55;
	color: var(--tm-ink-soft, #4A4870);
	margin: 0;
}

.tm-search__empty {
	max-width: 560px;
	margin: 24px auto 64px;
	text-align: center;
}
.tm-search__empty-text {
	font-size: 17px;
	line-height: 1.55;
	color: var(--tm-ink-soft, #4A4870);
	margin: 0 0 24px;
}
.tm-search__empty-actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* ===========================================================================
 * Nieuwsbrief-bevestigingspagina (page-templates/page-nl-bevestigd.php).
 * Gerenderd na klik op confirm-link uit de DOI-mail. Page-hero + hinge worden
 * door het standaard tm-page-template-patroon geleverd; deze regels stylen
 * alleen de centered content-tile binnen de tm-section.
 * =========================================================================== */
.tm-nl-confirmed__inner {
	max-width: 640px;
	margin: 0 auto;
	padding: 24px 24px 80px;
	text-align: center;
}
.tm-nl-confirmed__check {
	font-size: 56px;
	margin-bottom: 16px;
	--fa-primary-color: #1F8F4E;
	--fa-secondary-color: #1F8F4E;
	--fa-secondary-opacity: 0.18;
}
.tm-nl-confirmed__heading {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
	margin: 0 0 12px;
	line-height: 1.2;
}
.tm-nl-confirmed__lede {
	font-size: 17px;
	line-height: 1.55;
	color: var(--tm-ink-soft, #4A4870);
	margin: 0 auto 32px;
	max-width: 480px;
}
.tm-nl-confirmed__actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
@media (max-width: 575px) {
	.tm-nl-confirmed__inner { padding: 20px 20px 64px; }
	.tm-nl-confirmed__actions .tm-btn { width: 100%; }
}

/* ===========================================================================
 * Wishlist-tab empty state — vervangt LP's blauwe `info`-notice (gerenderd
 * via Template::print_message) door een huisstijl-blok met CTA.
 * =========================================================================== */
.tm-wishlist-empty {
	text-align: center;
	padding: 48px 24px;
}
.tm-wishlist-empty__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--edublink-color-dark);
	margin: 0 0 8px;
}
.tm-wishlist-empty__body {
	font-size: 15px;
	color: var(--edublink-color-body, #5d666f);
	margin: 0 0 24px;
}
/* .tm-wishlist-empty__cta erft visueel van .tm-btn--primary; deze class
   blijft alleen als haak voor evt. layout-tweaks (geen styling meer). */

/* ===========================================================================
 * Order-detail (Bestel Details) — eigen markup uit
 * inc/tm-profile-order-details.php. Header-card (thumb + titel + status) +
 * compacte price-summary + meta + factuur-download.
 * =========================================================================== */
.tm-order-detail {
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 18px;
	box-shadow: 0 4px 18px rgba(30, 27, 75, 0.05);
	overflow: hidden;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	min-width: 0;
	max-width: 100%;
}
.tm-order-detail__header {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	padding: 22px 24px;
	border-bottom: 1px solid var(--tm-line, #ECEAF6);
}
.tm-order-detail__thumb {
	width: 64px;
	height: 64px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--tm-bg, #FAFAFC);
	display: flex;
	align-items: stretch;
	justify-content: stretch;
}
.tm-order-detail__thumb .tm-hero,
.tm-order-detail__thumb .tm-hero--thumb {
	width: 100%;
	height: 100%;
	border-radius: 0;
	display: block;
	overflow: hidden;
}
.tm-order-detail__thumb-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tm-purple-soft, #EEEBFD);
	color: var(--tm-purple, #5B4FE5);
	font-weight: 800;
	font-size: 26px;
}
.tm-order-detail__head-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tm-order-detail__eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tm-orange, #FF8A1F);
}
.tm-order-detail__title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--tm-ink, #1E1B4B);
	line-height: 1.25;
}
.tm-order-detail__title a {
	color: inherit;
	text-decoration: none;
}
.tm-order-detail__title a:hover { color: var(--tm-purple, #5B4FE5); }
.tm-order-detail__date {
	font-size: 13px;
	color: var(--tm-ink-mute, #767492);
}

/* Status-pill */
.tm-order-detail__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.tm-order-detail__status .tm-order-detail__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.tm-order-detail__status.is-pending { background: rgba(255, 138, 31, 0.12); color: #C45F00; }
.tm-order-detail__status.is-ok      { background: rgba(31, 143, 78, 0.12); color: #1F8F4E; }
.tm-order-detail__status.is-cancel  { background: rgba(255, 111, 97, 0.12); color: #B33A2F; }

/* Price-summary — !important voor padding omdat LP/EduBlink agressieve ul/li
   resets overrulen via `body .lp-user-profile ...` selectors. */
.tm-order-detail__summary {
	list-style: none;
	margin: 0 !important;
	padding: 22px 24px !important;
}
.tm-order-detail__summary li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: 1px dashed var(--tm-line, #ECEAF6);
	font-size: 14px;
	color: var(--tm-ink-soft, #4A4870);
}
.tm-order-detail__summary li:last-child { border-bottom: 0; }
.tm-order-detail__summary li.is-total {
	margin-top: 6px;
	padding-top: 14px;
	border-top: 1px solid var(--tm-line, #ECEAF6);
	font-size: 16px;
	color: var(--tm-ink, #1E1B4B);
}
.tm-order-detail__summary li.is-total strong:last-child {
	font-weight: 800;
	font-size: 18px;
}

/* Meta (Bestelsleutel / Besteldatum) */
.tm-order-detail__meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 0 !important;
	padding: 0 24px 22px !important;
}
.tm-order-detail__meta > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.tm-order-detail__meta dt {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tm-ink-mute, #767492);
	margin: 0;
}
.tm-order-detail__meta dd {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--tm-ink, #1E1B4B);
}
.tm-order-detail__meta code {
	font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 13px;
	color: var(--tm-purple, #5B4FE5);
	background: transparent;
	padding: 0;
}

/* Actions (factuur-download) */
.tm-order-detail__actions {
	padding: 0 24px 24px;
}
.tm-order-detail__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: background .15s ease;
}
.tm-order-detail__btn:hover {
	background: var(--tm-purple-deep, #3F35B8);
	color: #fff;
}

@media (max-width: 599px) {
	.tm-order-detail__header {
		grid-template-columns: 56px minmax(0, 1fr);
		grid-template-areas:
			"thumb head"
			"status status";
		row-gap: 12px;
		padding: 18px;
	}
	.tm-order-detail__thumb { grid-area: thumb; width: 56px; height: 56px; }
	.tm-order-detail__head-text { grid-area: head; }
	.tm-order-detail__status { grid-area: status; align-self: flex-start; }
	.tm-order-detail__summary,
	.tm-order-detail__actions { padding-left: 18px; padding-right: 18px; }
	.tm-order-detail__meta {
		grid-template-columns: 1fr;
		gap: 14px;
		padding-left: 18px;
		padding-right: 18px;
	}
}

/* ===========================================================================
 * Profiel-settings (mockup #47): tab-pills + 3 secties + save-bar + danger.
 * Markup uit learnpress/profile/tabs/settings/basic-information.php (override).
 * Save-handler in inc/tm-profile-settings.php (extra user-meta).
 * =========================================================================== */
.tm-settings {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Reset eventuele padding/margin op LP/EduBlink wrappers boven de pill-tabs
   zodat de tab-pills op dezelfde Y als de sidebar-name-card beginnen. */
body.tm-page-profile .learnpress,
body.tm-page-profile #learn-press-profile,
body.tm-page-profile .lp-content-area,
body.tm-page-profile #profile-content,
body.tm-page-profile #profile-content-settings,
body.tm-page-profile .lp-profile-content,
body.tm-page-profile .lp-profile-content-area,
body.tm-page-profile article#profile-content,
body.tm-page-profile .tm-profile-grid__main,
body.tm-page-profile .tm-profile-grid__main > * {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
/* EduBlink rendert een lege wrapper <div class="learn-press-tabs"> bovenin
   #profile-content-settings (de oude sub-tab-host). Wij vervangen 'm met
   onze eigen pill-tabs .tm-settings__tabs, dus de hele wrapper kan weg. */
body.tm-page-profile .learn-press-tabs {
	display: none !important;
}
.tm-settings__flash {
	padding: 14px 18px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
}
.tm-settings__flash--ok {
	background: rgba(31, 143, 78, 0.10);
	color: #1F8F4E;
	border: 1px solid rgba(31, 143, 78, 0.25);
}

/* Tab-pills bovenaan */
.tm-settings__tabs {
	display: inline-flex;
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 999px;
	padding: 6px;
	gap: 2px;
	align-self: flex-start;
	box-shadow: 0 2px 10px rgba(30, 27, 75, 0.04);
}
.tm-settings__tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	color: var(--tm-ink-soft, #4A4870);
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.tm-settings__tab i {
	font-size: 14px;
}
.tm-settings__tab:hover {
	background: var(--tm-bg, #FAFAFC);
	color: var(--tm-ink, #1E1B4B);
}
.tm-settings__tab.is-active {
	background: var(--tm-ink, #1E1B4B);
	color: #fff;
}
.tm-settings__tab.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* Form-wrapper als tm-card */
body.tm-page-profile .tm-settings__form,
.tm-settings__form {
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 18px;
	padding: 0;
	box-shadow: 0 4px 18px rgba(30, 27, 75, 0.05);
	display: flex;
	flex-direction: column;
}

/* Header in de card: avatar + naam + meta + verified pill */
.tm-settings__header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 28px 32px;
	border-bottom: 1px solid var(--tm-line, #ECEAF6);
	overflow: hidden;
}
/* Subtiele cirkel-DNA decoratie */
.tm-settings__header::after {
	content: "";
	position: absolute;
	top: -80px;
	right: -80px;
	width: 200px;
	height: 200px;
	border: 1px dashed rgba(91, 79, 229, 0.18);
	border-radius: 50%;
	pointer-events: none;
}
.tm-settings__header-left {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}
.tm-settings__avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--tm-orange, #FF8A1F);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 26px;
	font-weight: 800;
	flex-shrink: 0;
	box-shadow: 0 6px 20px rgba(255, 138, 31, 0.28);
}
.tm-settings__id { min-width: 0; }
.tm-settings__name {
	display: block;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 20px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.tm-settings__meta {
	margin-top: 4px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	color: var(--tm-ink-mute, #767492);
}
.tm-settings__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.tm-settings__meta-item i {
	font-size: 12px;
	color: var(--tm-ink-mute, #767492);
}
.tm-settings__meta-sep { color: var(--tm-line, #ECEAF6); }

/* Geverifieerd-pill (header + inline in input) */
.tm-settings__verified-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: rgba(91, 79, 229, 0.10);
	color: var(--tm-purple, #5B4FE5);
	border-radius: 999px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	flex-shrink: 0;
	z-index: 1;
}
.tm-settings__verified-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tm-purple, #5B4FE5);
}
.tm-settings__verified-pill--inline {
	position: absolute;
	right: 8px;
	bottom: 8px;
	top: auto;
	transform: none;
	background: rgba(31, 143, 78, 0.10);
	color: #1F8F4E;
	font-size: 10px;
	letter-spacing: 0.06em;
	padding: 5px 10px;
}
.tm-settings__verified-pill--inline i {
	color: #1F8F4E;
}

/* Sectie */
.tm-settings__section {
	padding: 28px 32px;
	border-bottom: 1px solid var(--tm-line, #ECEAF6);
}
.tm-settings__section:last-of-type { border-bottom: 0; }
.tm-settings__section-head {
	position: relative;
	margin-bottom: 18px;
}
.tm-settings__section-eyebrow {
	display: block;
	color: var(--tm-orange, #FF8A1F);
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.tm-settings__section-eyebrow::before {
	content: "● ";
	color: var(--tm-orange, #FF8A1F);
}
.tm-settings__section-title {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 22px;
	font-weight: 800;
	color: var(--tm-ink, #1E1B4B);
	letter-spacing: -0.015em;
	margin: 0 0 4px;
	line-height: 1.2;
}
.tm-settings__section-lede {
	margin: 0;
	font-size: 14px;
	color: var(--tm-ink-soft, #4A4870);
	line-height: 1.55;
}
.tm-settings__section-action {
	position: absolute;
	top: 0;
	right: 0;
	color: var(--tm-purple, #5B4FE5);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.tm-settings__section-action:hover { color: var(--tm-purple-deep, #3F35B8); }

/* Form-grid + fields */
.tm-settings__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 24px;
}
.tm-field { display: flex; flex-direction: column; min-width: 0; }
.tm-field--wide { grid-column: 1 / -1; }
.tm-field label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--tm-ink, #1E1B4B);
	margin: 0 0 6px;
}
.tm-field__req { color: var(--tm-orange, #FF8A1F); }
.tm-field__hint {
	font-weight: 500;
	color: var(--tm-ink-mute, #767492);
	font-size: 12px;
}
.tm-field input[type="text"],
.tm-field input[type="email"],
.tm-field input[type="tel"],
.tm-field input[type="password"],
.tm-field input[type="url"],
.tm-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 10px;
	background: var(--tm-bg, #FAFAFC);
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 14px;
	color: var(--tm-ink, #1E1B4B);
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
	box-sizing: border-box;
}
.tm-field input:hover { border-color: rgba(91, 79, 229, 0.3); }
.tm-field input:focus {
	border-color: var(--tm-purple, #5B4FE5);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(91, 79, 229, 0.18);
}
.tm-field--with-pill { position: relative; }
.tm-field--with-pill input { padding-right: 130px; }
.tm-field__help {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--tm-ink-mute, #767492);
	line-height: 1.5;
}

/* Toggles */
.tm-settings__toggles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.tm-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px dashed var(--tm-line, #ECEAF6);
}
.tm-toggle:last-child { border-bottom: 0; }
.tm-toggle__text { display: flex; flex-direction: column; min-width: 0; }
.tm-toggle__text strong {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--tm-ink, #1E1B4B);
}
.tm-toggle__text span {
	margin-top: 2px;
	font-size: 13px;
	color: var(--tm-ink-soft, #4A4870);
	line-height: 1.5;
}

/* Switch — checkbox + faux track */
.tm-switch {
	position: relative;
	display: inline-block;
	width: 46px;
	height: 26px;
	flex-shrink: 0;
	cursor: pointer;
}
.tm-switch input {
	opacity: 0;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}
.tm-switch__track {
	position: absolute;
	inset: 0;
	background: var(--tm-line, #ECEAF6);
	border-radius: 999px;
	transition: background .2s ease;
}
.tm-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	transition: transform .2s ease;
}
.tm-switch input:checked + .tm-switch__track {
	background: var(--tm-purple, #5B4FE5);
}
.tm-switch input:checked + .tm-switch__track::after {
	transform: translateX(20px);
}
.tm-switch.is-locked .tm-switch__track {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Save-bar */
.tm-settings__save-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 32px;
	background: var(--tm-bg, #FAFAFC);
	border-top: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 0 0 18px 18px;
}
.tm-settings__last-saved {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--tm-ink-mute, #767492);
}
.tm-settings__last-saved-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #1F8F4E;
}
.tm-settings__save-actions {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.tm-settings__cancel {
	color: var(--tm-ink-soft, #4A4870);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	padding: 10px 14px;
}
.tm-settings__cancel:hover { color: var(--tm-ink, #1E1B4B); }
body.tm-page-profile .tm-settings__form .lp-button.tm-settings__save,
.tm-settings__save {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: background .15s ease;
}
body.tm-page-profile .tm-settings__form .lp-button.tm-settings__save:hover,
.tm-settings__save:hover { background: var(--tm-purple-deep, #3F35B8); }

/* Danger zone */
.tm-settings__danger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 22px 28px;
	background: rgba(255, 111, 97, 0.06);
	border: 1px solid rgba(255, 111, 97, 0.30);
	border-radius: 18px;
}
.tm-settings__danger-text strong {
	display: block;
	color: #B33A2F;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-weight: 800;
	font-size: 15px;
	margin-bottom: 4px;
}
.tm-settings__danger-text span {
	display: block;
	font-size: 13px;
	color: var(--tm-ink-soft, #4A4870);
	line-height: 1.5;
}
.tm-settings__danger-form { margin: 0; }
.tm-settings__danger-btn {
	background: #fff;
	color: var(--tm-ink, #1E1B4B);
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 10px;
	padding: 10px 18px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	transition: border-color .15s ease, color .15s ease;
}
.tm-settings__danger-btn:hover {
	border-color: #B33A2F;
	color: #B33A2F;
}

@media (max-width: 767px) {
	.tm-settings__tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
	.tm-settings__tab { padding: 10px 14px; font-size: 13px; white-space: nowrap; }
	.tm-settings__header { padding: 20px 18px; flex-wrap: wrap; }
	.tm-settings__section { padding: 22px 18px; }
	.tm-settings__grid { grid-template-columns: 1fr; gap: 14px; }
	.tm-settings__section-action {
		position: static;
		margin-bottom: 8px;
		display: inline-flex;
	}
	.tm-settings__save-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 18px;
	}
	.tm-settings__save-actions { width: 100%; justify-content: flex-end; }
	.tm-settings__danger { flex-direction: column; align-items: flex-start; padding: 18px; }
	.tm-settings__danger-btn { align-self: flex-start; }
}

/* ===========================================================================
 * Profile-settings — tm-design op LP's settings-tab (Algemeen / Wachtwoord).
 * LP rendert default `.learn-press-form` met `.form-fields` (ul) en
 * `.lp-button` save-knop. Hier overschrijven we naar tm-card + tm-input +
 * tm-btn-stijl, plus de sub-tabs in een tm-pill-look.
 * =========================================================================== */

/* Form-wrapper als tm-card */
body.tm-page-profile .learn-press-form {
	background: #fff;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 18px;
	padding: 32px;
	box-shadow: 0 4px 16px rgba(30, 27, 75, 0.04);
}

/* Form-fields grid (50/50) */
body.tm-page-profile .learn-press-form .form-fields {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 24px;
}
body.tm-page-profile .learn-press-form .form-field__clear,
body.tm-page-profile .learn-press-form .form-field__bio {
	grid-column: 1 / -1;
}
@media (max-width: 599px) {
	body.tm-page-profile .learn-press-form .form-fields {
		grid-template-columns: 1fr;
	}
	body.tm-page-profile .learn-press-form {
		padding: 22px;
	}
}

/* Reset li-defaults (parent EduBlink zet margin op `ul li`) */
body.tm-page-profile .learn-press-form .form-field {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Labels: niet cursief, donker, fontweight 600 */
body.tm-page-profile .learn-press-form .form-field label {
	display: block;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--tm-ink, #1E1B4B);
	font-style: normal;
	margin: 0 0 6px;
	letter-spacing: 0;
}
body.tm-page-profile .learn-press-form .form-field label .required {
	color: var(--tm-orange, #FF8A1F);
	margin-left: 2px;
}

/* Inputs / textarea — tm-stijl */
body.tm-page-profile .learn-press-form input[type="text"],
body.tm-page-profile .learn-press-form input[type="email"],
body.tm-page-profile .learn-press-form input[type="password"],
body.tm-page-profile .learn-press-form input[type="url"],
body.tm-page-profile .learn-press-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--tm-line, #ECEAF6);
	border-radius: 10px;
	background: #fff;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-size: 14px;
	color: var(--tm-ink, #1E1B4B);
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}
body.tm-page-profile .learn-press-form input:focus,
body.tm-page-profile .learn-press-form textarea:focus {
	border-color: var(--tm-purple, #5B4FE5);
	box-shadow: 0 0 0 3px rgba(91, 79, 229, 0.18);
}

/* Save-knop = tm-btn--primary */
body.tm-page-profile .learn-press-form .lp-button,
body.tm-page-profile .learn-press-form button[type="submit"] {
	margin-top: 8px;
	padding: 12px 28px;
	background: var(--tm-purple, #5B4FE5);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: background .15s ease;
}
body.tm-page-profile .learn-press-form .lp-button:hover,
body.tm-page-profile .learn-press-form button[type="submit"]:hover {
	background: var(--tm-purple-deep, #3F35B8);
}

/* Sub-tabs (Algemeen / Wachtwoord) — pill-onderlijn in tm-purple. LP gebruikt
   verschillende selector-namen tussen versies; meerdere selectors voor
   robustheid. */
body.tm-page-profile .learn-press-subtabs,
body.tm-page-profile ul.subtabs,
body.tm-page-profile .lp-profile-content > ul.subtabs,
body.tm-page-profile .lp-profile-settings > ul,
body.tm-page-profile .learn-press-subtab {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--tm-line, #ECEAF6);
	flex-wrap: wrap;
}
body.tm-page-profile .learn-press-subtabs li,
body.tm-page-profile ul.subtabs li,
body.tm-page-profile .lp-profile-settings > ul li {
	margin: 0;
	padding: 0;
}
body.tm-page-profile .learn-press-subtabs li a,
body.tm-page-profile ul.subtabs li a,
body.tm-page-profile .lp-profile-settings > ul li a {
	display: inline-block;
	padding: 12px 20px;
	color: var(--tm-ink-soft, #4A4870);
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color .15s ease, border-color .15s ease;
}
body.tm-page-profile .learn-press-subtabs li a:hover,
body.tm-page-profile ul.subtabs li a:hover {
	color: var(--tm-purple, #5B4FE5);
}
body.tm-page-profile .learn-press-subtabs li.active a,
body.tm-page-profile .learn-press-subtabs li.current a,
body.tm-page-profile ul.subtabs li.active a,
body.tm-page-profile .lp-profile-settings > ul li.active a {
	color: var(--tm-purple, #5B4FE5);
	border-bottom-color: var(--tm-purple, #5B4FE5);
}