/* =============================================================================
   TRICURA OPLEIDINGEN — de winkel in de vormtaal van de site

   Geen tweede ontwerp naast het thema, maar hetzelfde ontwerp doorgetrokken.
   Alle kleuren, rondingen en overgangen komen uit de variabelen van main.css;
   de waarden erachter zijn dezelfde kleuren, hard genoteerd, zodat de winkel
   ook klopt wanneer deze plugin ooit onder een ander thema draait.

   WooCommerce laadt hier alleen nog woocommerce-general. Zijn layout- en
   smallscreen-stylesheets staan uit (zie includes/opmaak.php), dus de indeling
   en het gedrag op een telefoon staan hieronder, en niet half hier en half daar.

   Volgorde: eerst wat overal geldt, dan pagina per pagina, en onderaan het
   smalle scherm.
   ============================================================================= */

/* =============================================
   1. RAAMWERK
   ============================================= */

/*
 * De band met het kruimelpad boven een productpagina. Op de rest van de site
 * staat het kruimelpad in de mintgroene kop; hier hoort het dus ook daar.
 */
.tricura-kruimelband {
	padding: 26px 0 0;
	background: var(--mint-soft, #F1F8F4);
}

.tricura-kruimelband .kruimel {
	margin: 0;
	padding-bottom: 26px;
}

.tricura-winkel .woocommerce-breadcrumb {
	font-size: 0.82rem;
	color: var(--tekst-zacht, #5C6B63);
}

/* De inhoudskolom van elke winkelpagina. */
.tricura-shop {
	color: var(--tekst, #1E2B24);
}

.tricura-shop h2 {
	font-size: 1.35rem;
	margin-bottom: 18px;
}

.tricura-shop h3 {
	font-size: 1.08rem;
	margin-bottom: 14px;
}

/*
 * WooCommerce ruimt zijn floats op met ::before en ::after op de containers.
 * In een raster zijn dat geen onzichtbare hulpjes meer maar echte cellen: het
 * eerste product schoof daardoor een kolom op, en op Mijn account belandde het
 * menu rechts van de inhoud. Ze staan uit op elke container die hieronder een
 * raster wordt.
 */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce div.product::before,
.woocommerce div.product::after,
.woocommerce-cart .tricura-shop::before,
.woocommerce-cart .tricura-shop::after,
.woocommerce form.checkout::before,
.woocommerce form.checkout::after,
.woocommerce .woocommerce-Addresses::before,
.woocommerce .woocommerce-Addresses::after {
	content: none;
	display: none;
}

/* =============================================
   2. KNOPPEN
   ============================================= */

/*
 * WooCommerce geeft zijn knoppen een grijze en een paarse variant. Hier worden
 * het de knoppen van het thema: pilvorm, groen, en dezelfde beweging bij hover.
 * De selectorlijst is die van WooCommerce zelf, want anders wint zijn eigen
 * regel met #respond input#submit.
 */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt,
.woocommerce-page input.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 28px;
	border: 2px solid var(--groen, #2E6E58);
	border-radius: 100px;
	background: var(--groen, #2E6E58);
	color: #FFFFFF;
	font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
	font-size: 0.94rem;
	font-weight: 500;
	line-height: 1.3;
	text-transform: none;
	text-decoration: none;
	white-space: normal;
	transition: all var(--transitie, 0.25s ease);
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover,
.woocommerce-page input.button.alt:hover {
	background: var(--groen-dark, #245645);
	border-color: var(--groen-dark, #245645);
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(46, 110, 88, 0.28);
}

/*
 * De tweede knop op een scherm — "Winkelwagen bijwerken", "Coupon toepassen" —
 * mag niet even hard roepen als de knop die de bezoeker verder brengt.
 */
.woocommerce button.button[name="update_cart"],
.woocommerce button.button[name="apply_coupon"],
.woocommerce a.button.wc-backward,
.woocommerce-page a.button.wc-backward {
	background: transparent;
	color: var(--groen, #2E6E58);
}

.woocommerce button.button[name="update_cart"]:hover,
.woocommerce button.button[name="apply_coupon"]:hover,
.woocommerce a.button.wc-backward:hover,
.woocommerce-page a.button.wc-backward:hover {
	background: var(--groen, #2E6E58);
	color: #FFFFFF;
}

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	opacity: 0.45;
	background: var(--groen, #2E6E58);
	border-color: var(--groen, #2E6E58);
	color: #FFFFFF;
	transform: none;
	box-shadow: none;
}

/* De knop die de bestelling plaatst, krijgt het volle scherm. */
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
	width: 100%;
	padding: 16px 28px;
	font-size: 1rem;
}

/* =============================================
   3. MELDINGEN
   ============================================= */

/*
 * Dezelfde vorm als .form-melding in het thema: een gevuld vlak met een ronding,
 * geen streep bovenaan zoals WooCommerce doet.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 26px;
	padding: 16px 20px;
	border: none;
	border-radius: var(--radius-sm, 8px);
	background: var(--groen-light, #E8F1ED);
	color: var(--groen, #2E6E58);
	font-size: 0.93rem;
	line-height: 1.55;
	list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}

.woocommerce-info {
	background: var(--mint-soft, #F1F8F4);
	color: var(--donkergroen, #0A371A);
}

.woocommerce-error {
	background: var(--roze-soft, #FFF3F2);
	border: 1px solid var(--roze, #FECECC);
	color: #9B2C2C;
	display: block;
}

.woocommerce-error li {
	margin: 0 0 6px;
}

.woocommerce-error li:last-child {
	margin-bottom: 0;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
	padding: 9px 20px;
	font-size: 0.85rem;
}

/* =============================================
   4. FORMULIERVELDEN
   ============================================= */

/*
 * Overgenomen van .veld in het thema, zodat een invoerveld aan de kassa er
 * hetzelfde uitziet als een invoerveld op het contactformulier.
 */
.tricura-winkel .form-row {
	display: block;
	margin: 0 0 18px;
	padding: 0;
}

.tricura-winkel .form-row label,
.tricura-winkel .woocommerce-form-row label {
	display: block;
	margin-bottom: 7px;
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--donkergroen, #0A371A);
}

.tricura-winkel .required {
	color: var(--groen, #2E6E58);
	text-decoration: none;
	border: none;
}

.tricura-winkel .form-row input.input-text,
.tricura-winkel .form-row textarea,
.tricura-winkel .form-row select,
.tricura-winkel input[type="text"],
.tricura-winkel input[type="email"],
.tricura-winkel input[type="tel"],
.tricura-winkel input[type="password"],
.tricura-winkel input[type="number"],
.tricura-winkel textarea,
.tricura-winkel select,
.tricura-winkel .select2-container .select2-selection--single {
	width: 100%;
	height: auto;
	padding: 13px 16px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius-sm, 8px);
	background: #FFFFFF;
	font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--tekst, #1E2B24);
	box-shadow: none;
	transition: border-color var(--transitie, 0.25s ease), box-shadow var(--transitie, 0.25s ease);
}

.tricura-winkel .form-row input.input-text:focus,
.tricura-winkel .form-row textarea:focus,
.tricura-winkel .form-row select:focus,
.tricura-winkel input[type="text"]:focus,
.tricura-winkel input[type="email"]:focus,
.tricura-winkel input[type="tel"]:focus,
.tricura-winkel input[type="password"]:focus,
.tricura-winkel textarea:focus,
.tricura-winkel select:focus {
	outline: none;
	border-color: var(--groen, #2E6E58);
	box-shadow: 0 0 0 3px rgba(46, 110, 88, 0.12);
}

.tricura-winkel textarea {
	min-height: 120px;
	resize: vertical;
}

/* De keuzelijst van WooCommerce (select2) meetrekken. */
.tricura-winkel .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	min-height: 48px;
}

.tricura-winkel .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: var(--tekst, #1E2B24);
}

.tricura-winkel .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
}

.select2-dropdown {
	border-color: var(--lijn, #E2E8E4);
	border-radius: var(--radius-sm, 8px);
	overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--groen, #2E6E58);
}

/* Vinkjes: dezelfde vorm als .veld-check. */
.tricura-winkel .woocommerce-form__label-for-checkbox,
.tricura-winkel .form-row .checkbox {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 0.88rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--tekst-zacht, #5C6B63);
}

.tricura-winkel .woocommerce-terms-and-conditions-checkbox-text,
.tricura-winkel .woocommerce-form__label-for-checkbox > span {
	flex: 0 1 auto;
	width: auto;
}

.tricura-winkel .woocommerce-form__input-checkbox,
.tricura-winkel input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--groen, #2E6E58);
}

.tricura-winkel .form-row .description,
.tricura-winkel .form-row .woocommerce-input-wrapper .description,
.tricura-winkel span.description {
	display: block;
	margin-top: 6px;
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--tekst-zacht, #5C6B63);
}

/* Twee velden naast elkaar, zoals .form-rij in het thema. */
.tricura-winkel .form-row-first,
.tricura-winkel .form-row-last {
	width: 100%;
}

@media (min-width: 601px) {
	.tricura-winkel .woocommerce-billing-fields__field-wrapper,
	.tricura-winkel .woocommerce-shipping-fields__field-wrapper,
	.tricura-winkel .woocommerce-address-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 20px;
	}

	.tricura-winkel .form-row-wide,
	.tricura-winkel .woocommerce-billing-fields__field-wrapper > .form-row-wide,
	.tricura-winkel #order_comments_field {
		grid-column: 1 / -1;
	}
}

/* =============================================
   5. PRODUCTPAGINA
   ============================================= */

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 56px;
	align-items: start;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce div.product div.images img {
	border-radius: var(--radius, 14px);
}

.woocommerce div.product .woocommerce-product-gallery {
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius, 14px);
	overflow: hidden;
	background: var(--neutraal, #FAFAF8);
}

.woocommerce div.product .product_title {
	margin: 0 0 14px;
	font-family: var(--font-titel, 'Montserrat', system-ui, sans-serif);
	font-size: clamp(1.7rem, 3vw, 2.15rem);
	line-height: 1.15;
	color: var(--donkergroen, #0A371A);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0 0 20px;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--groen, #2E6E58);
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	margin-right: 8px;
	font-size: 1rem;
	font-weight: 400;
	opacity: 0.5;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	text-decoration: none;
	font-weight: 600;
	background: none;
}

/* De prijs inclusief btw: kleiner, eronder, want het is een toelichting. */
.tricura-prijs-incl {
	display: block;
	margin-top: 4px;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--tekst-zacht, #5C6B63);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin-bottom: 22px;
	color: var(--tekst-zacht, #5C6B63);
	line-height: 1.7;
}

.woocommerce div.product form.cart {
	margin: 26px 0 0;
}

.woocommerce div.product form.cart .quantity {
	margin-right: 12px;
}

.woocommerce .quantity .qty {
	width: 72px;
	padding: 12px 8px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius-sm, 8px);
	text-align: center;
}

.woocommerce div.product .product_meta {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--lijn, #E2E8E4);
	font-size: 0.84rem;
	color: var(--tekst-zacht, #5C6B63);
}

.woocommerce div.product .product_meta a {
	color: var(--groen, #2E6E58);
}

/* Het informatieblok: uren en navorming. */
.tricura-opl-info {
	margin: 0 0 20px;
	padding: 16px 20px;
	border-left: 3px solid var(--groen, #2E6E58);
	border-radius: var(--radius-sm, 8px);
	background: var(--mint-soft, #F1F8F4);
	font-size: 0.92rem;
	line-height: 1.6;
}

.tricura-opl-info p { margin: 0; }

.tricura-opl-info__uren { color: var(--donkergroen, #0A371A); }

.tricura-opl-info__navorming {
	font-weight: 600;
	color: var(--groen, #2E6E58);
}

/*
 * De uitzondering op de kortingsregel valt bewust op. Wie met een pakket komt
 * en hier de volle prijs betaalt, moet dat lezen voor hij afrekent en niet erna.
 */
.tricura-opl-info__geen-korting {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(10, 55, 26, 0.12);
	color: var(--donkergroen, #0A371A);
}

/* Wie al ingeschreven is, ziet geen knop meer. */
.tricura-ingeschreven {
	margin: 22px 0;
	padding: 16px 20px;
	border-radius: var(--radius-sm, 8px);
	background: var(--groen-light, #E8F1ED);
	color: var(--donkergroen, #0A371A);
	font-size: 0.93rem;
}

.tricura-ingeschreven a {
	margin-left: 6px;
	color: var(--groen, #2E6E58);
}

/* De annulatievoorwaarden: informatie, geen waarschuwing. */
.tricura-annulatie {
	margin: 22px 0 0;
	padding: 18px 22px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius-sm, 8px);
}

.tricura-annulatie__kop {
	margin: 0 0 10px;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--groen, #2E6E58);
}

.tricura-annulatie__lijst {
	margin: 0;
	padding-left: 18px;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--tekst-zacht, #5C6B63);
}

.tricura-annulatie__lijst li { margin-bottom: 7px; }
.tricura-annulatie__lijst li:last-child { margin-bottom: 0; }

/* De tabbladen onder het product. */
.woocommerce div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: 24px;
	padding-top: 40px;
	border-top: 1px solid var(--lijn, #E2E8E4);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 100px;
	background: var(--groen-light, #E8F1ED);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 10px 22px;
	font-weight: 500;
	font-size: 0.9rem;
	color: var(--groen, #2E6E58);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--groen, #2E6E58);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: #FFFFFF;
}

.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: 0;
	line-height: 1.75;
	color: var(--tekst-zacht, #5C6B63);
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	display: none;
}

/* Verwante producten onderaan. */
.woocommerce .related,
.woocommerce .upsells {
	grid-column: 1 / -1;
	margin-top: 8px;
	padding-top: 40px;
	border-top: 1px solid var(--lijn, #E2E8E4);
}

/* =============================================
   6. PRODUCTOVERZICHT
   ============================================= */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	padding: 26px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius, 14px);
	background: #FFFFFF;
	transition: transform var(--transitie, 0.25s ease), box-shadow var(--transitie, 0.25s ease), border-color var(--transitie, 0.25s ease);
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	border-color: var(--mint, #93C8AD);
	box-shadow: var(--schaduw-md, 0 12px 32px rgba(10, 55, 26, 0.09));
}

.woocommerce ul.products li.product img {
	margin-bottom: 18px;
	border-radius: var(--radius-sm, 8px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	font-family: var(--font-titel, 'Montserrat', system-ui, sans-serif);
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--donkergroen, #0A371A);
}

.woocommerce ul.products li.product .price {
	display: block;
	margin: 8px 0 16px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--groen, #2E6E58);
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: 26px;
	font-size: 0.88rem;
	color: var(--tekst-zacht, #5C6B63);
}

/* =============================================
   7. TABELLEN
   ============================================= */

.woocommerce table.shop_table,
.woocommerce table.shop_table_responsive,
.tricura-shop table.woocommerce-orders-table {
	width: 100%;
	margin: 0 0 28px;
	border: none;
	border-collapse: collapse;
	border-radius: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 16px 12px;
	border: none;
	border-bottom: 1px solid var(--lijn, #E2E8E4);
	vertical-align: middle;
}

.woocommerce table.shop_table thead th {
	padding-top: 0;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tekst-zacht, #5C6B63);
}

.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
	font-weight: 500;
}

.woocommerce table.shop_table td.product-name a,
.woocommerce table.woocommerce-orders-table td a {
	color: var(--donkergroen, #0A371A);
	font-weight: 500;
}

.woocommerce table.shop_table td.product-name a:hover,
.woocommerce table.woocommerce-orders-table td a:hover {
	color: var(--groen, #2E6E58);
}

.woocommerce table.shop_table .product-thumbnail img {
	width: 62px;
	border-radius: var(--radius-sm, 8px);
}

.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--groen-light, #E8F1ED);
	color: var(--groen, #2E6E58) !important;
	font-size: 1rem;
	line-height: 1;
}

.woocommerce a.remove:hover {
	background: var(--roze, #FECECC);
	color: #9B2C2C !important;
}

/* De regel met de pakketkorting mag opvallen: het is goed nieuws. */
.woocommerce table.shop_table tr.tricura-korting th,
.woocommerce table.shop_table tr.tricura-korting td,
.woocommerce-checkout-review-order-table tr.tricura-korting th,
.woocommerce-checkout-review-order-table tr.tricura-korting td {
	color: var(--groen, #2E6E58);
	font-weight: 500;
}

.tricura-korting-regel {
	display: block;
	margin-top: 4px;
	font-size: 0.8rem;
	color: var(--groen, #2E6E58);
}

/* =============================================
   8. WINKELWAGEN
   ============================================= */

.woocommerce-cart .tricura-shop {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.woocommerce-cart .woocommerce {
	display: contents;
}

.woocommerce-cart form.woocommerce-cart-form {
	grid-column: 1;
	margin: 0;
}

.woocommerce-cart .cart-collaterals {
	grid-column: 2;
	width: auto;
	float: none;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	width: auto;
	float: none;
	padding: 26px;
	border-radius: var(--radius, 14px);
	background: var(--mint-soft, #F1F8F4);
}

.woocommerce-cart .cart_totals h2 {
	margin-bottom: 16px;
	font-size: 1.1rem;
}

.woocommerce-cart .cart_totals table.shop_table td,
.woocommerce-cart .cart_totals table.shop_table th {
	padding: 12px 0;
	border-bottom: 1px solid rgba(10, 55, 26, 0.1);
}

.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total th {
	border-bottom: none;
	font-size: 1.1rem;
	color: var(--donkergroen, #0A371A);
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding: 18px 0 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	width: 100%;
	font-size: 1rem;
	padding: 15px 24px;
}

.woocommerce-cart table.cart td.actions {
	padding: 22px 0 0;
	border-bottom: none;
}

.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	float: none;
	margin-bottom: 16px;
}

.woocommerce-cart table.cart td.actions .coupon label {
	display: none;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	width: 200px;
	margin: 0;
}

.woocommerce-cart table.cart td.actions > .button {
	float: none;
}

/* De lege winkelwagen: geen kale zin maar een verwijzing naar het aanbod. */
.woocommerce-cart .cart-empty {
	margin-bottom: 10px;
	font-size: 1.05rem;
	color: var(--donkergroen, #0A371A);
}

.woocommerce-cart .return-to-shop {
	margin-top: 20px;
}

/* =============================================
   9. KASSA
   ============================================= */

.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.woocommerce-checkout form.checkout #customer_details {
	grid-column: 1;
}

/* De kop staat nu binnen het blok, zie includes/thema-integratie.php. */
.woocommerce-checkout form.checkout #order_review_heading {
	display: none;
}

.tricura-besteloverzicht__kop {
	margin: 0 0 16px;
	font-size: 1.15rem;
	color: var(--donkergroen, #0A371A);
}

.woocommerce-checkout form.checkout #customer_details .col-1,
.woocommerce-checkout form.checkout #customer_details .col-2 {
	width: auto;
	float: none;
}

.woocommerce-checkout form.checkout h3 {
	margin: 0 0 20px;
	font-size: 1.15rem;
	color: var(--donkergroen, #0A371A);
}

.woocommerce-checkout form.checkout #order_review {
	grid-column: 2;
	padding: 26px;
	border-radius: var(--radius, 14px);
	background: var(--mint-soft, #F1F8F4);
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	padding: 12px 0;
	border-bottom: 1px solid rgba(10, 55, 26, 0.1);
}

.woocommerce-checkout #order_review table.shop_table {
	margin-bottom: 20px;
}

.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
	border-bottom: none;
	font-size: 1.08rem;
	color: var(--donkergroen, #0A371A);
}

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border-bottom: 1px solid rgba(10, 55, 26, 0.1);
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin-bottom: 10px;
	list-style: none;
}

.woocommerce-checkout #payment div.payment_box {
	margin: 10px 0 0;
	padding: 14px 16px;
	border-radius: var(--radius-sm, 8px);
	background: #FFFFFF;
	font-size: 0.86rem;
	line-height: 1.6;
	color: var(--tekst-zacht, #5C6B63);
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce-checkout #payment .form-row.place-order {
	padding: 20px 0 0;
	margin: 0;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 16px;
	font-size: 0.86rem;
}

/* Het inlogblok boven de kassa. */
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .checkout_coupon {
	margin: 0 0 26px;
	padding: 24px 26px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius, 14px);
	background: #FFFFFF;
}

/* =============================================
   10. BEDANKPAGINA
   ============================================= */

.woocommerce-order .woocommerce-thankyou-order-received {
	margin-bottom: 26px;
	padding: 20px 24px;
	border-radius: var(--radius, 14px);
	background: var(--groen-light, #E8F1ED);
	font-size: 1.05rem;
	color: var(--donkergroen, #0A371A);
}

.woocommerce ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
}

.woocommerce ul.order_details li {
	flex: 1 1 160px;
	margin: 0;
	padding: 16px 20px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius-sm, 8px);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tekst-zacht, #5C6B63);
	border-right-width: 1px;
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: 6px;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--donkergroen, #0A371A);
}

.woocommerce .woocommerce-customer-details address {
	padding: 20px 24px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius-sm, 8px);
	font-style: normal;
	line-height: 1.7;
}

.tricura-btw {
	margin-top: 10px;
	font-size: 0.9rem;
}

/* =============================================
   11. MIJN ACCOUNT
   ============================================= */

.tricura-inloggen .woocommerce-account .woocommerce,
.tricura-registreren .woocommerce-account .woocommerce,
.woocommerce-account.tricura-inloggen .woocommerce,
.woocommerce-account.tricura-registreren .woocommerce {
	display: block;
}

/*
 * Het raster met het menu naast de inhoud en de opmaak van het menu staan
 * sinds 16 september 2026 in de sectie HET PORTAAL ALS WERKPLEK, onderaan
 * dit bestand. Het menu is daar een vaste zijbalk.
 */

.woocommerce-account .woocommerce-MyAccount-content {
	width: auto;
	float: none;
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

.woocommerce-account .woocommerce-MyAccount-content mark {
	background: none;
	font-weight: 600;
	color: var(--groen, #2E6E58);
}

.woocommerce-account fieldset {
	margin: 28px 0 0;
	padding: 24px 26px 8px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius, 14px);
}

.woocommerce-account fieldset legend {
	padding: 0 8px;
	font-weight: 600;
	color: var(--donkergroen, #0A371A);
}

.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}

.woocommerce-account .woocommerce-Address {
	width: auto;
	float: none;
	padding: 24px 26px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius, 14px);
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 1.05rem;
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
	color: var(--tekst-zacht, #5C6B63);
}

/* =============================================
   12. INLOGGEN EN REGISTREREN
   ============================================= */

/*
 * Eén van de twee tegelijk. WooCommerce zet ze naast elkaar; welke er staat,
 * bepaalt de klasse op de body (zie includes/inloggen.php).
 */
.tricura-winkel #customer_login {
	display: block;
	max-width: 460px;
}

.tricura-inloggen #customer_login .u-column2,
.tricura-registreren #customer_login .u-column1 {
	display: none;
}

.tricura-winkel #customer_login .u-column1,
.tricura-winkel #customer_login .u-column2 {
	width: auto;
	float: none;
	padding: 30px 32px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius, 14px);
	background: #FFFFFF;
}

.woocommerce form.login,
.woocommerce form.register {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
}

/* De kop staat al in de mintgroene band boven de pagina. */
.tricura-winkel #customer_login > div > h2 {
	display: none;
}

.tricura-winkel .woocommerce-form-login__rememberme {
	margin: 4px 0 18px;
}

.tricura-winkel .woocommerce-LostPassword {
	margin: 14px 0 0;
	font-size: 0.86rem;
}

.tricura-winkel .woocommerce-LostPassword a,
.tricura-wissel a {
	color: var(--groen, #2E6E58);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tricura-wissel {
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--lijn, #E2E8E4);
	font-size: 0.9rem;
	color: var(--tekst-zacht, #5C6B63);
}

.tricura-uitleg {
	margin: 0 0 22px;
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--tekst-zacht, #5C6B63);
}

.tricura-winkel .woocommerce-form-login .form-row,
.tricura-winkel .woocommerce-form-register .form-row {
	margin-bottom: 16px;
}

.tricura-winkel .woocommerce-form-login button.button,
.tricura-winkel .woocommerce-form-register button.button {
	width: 100%;
	margin-top: 6px;
}

.tricura-winkel .woocommerce-privacy-policy-text {
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--tekst-zacht, #5C6B63);
}

/* De winkellinks in het hoofdmenu. */
.tricura-mandje-teller {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	margin-left: 5px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--groen, #2E6E58);
	color: #FFFFFF;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1;
}

/* =============================================
   13. MIJN OPLEIDINGEN
   ============================================= */

/*
 * De teller bovenaan het tabblad. Het cijfer is het antwoord op de vraag
 * waarmee iemand hier komt, dus dat komt eerst; de balk is er om dat cijfer in
 * één oogopslag te kunnen plaatsen, niet om het te vervangen.
 */
.tricura-teller {
	margin: 0 0 36px;
	padding: 24px 26px;
	background: var(--mint-soft, #F1F8F4);
	border-radius: var(--radius, 14px);
}

.tricura-teller__cijfer {
	margin: 0 0 14px;
	font-size: 1.05rem;
	color: var(--donkergroen, #0A371A);
}

.tricura-teller__balk {
	height: 10px;
	background: rgba(10, 55, 26, 0.1);
	border-radius: 999px;
	overflow: hidden;
}

.tricura-teller__vulling {
	display: block;
	height: 100%;
	background: var(--groen, #2E6E58);
	border-radius: 999px;
	transition: width 0.4s ease;
}

.tricura-teller--gehaald .tricura-teller__vulling {
	background: var(--mint, #93C8AD);
}

.tricura-teller__uitleg {
	margin: 12px 0 0;
	font-size: 0.88rem;
	color: var(--tekst-zacht, #5C6B63);
}

.tricura-kop {
	margin: 36px 0 16px;
	font-size: 1.08rem;
}

.tricura-opleidingen-tabel {
	width: 100%;
	margin-bottom: 8px;
	border-collapse: collapse;
}

.tricura-opleidingen-tabel th,
.tricura-opleidingen-tabel td {
	padding: 14px 10px;
	text-align: left;
	border-bottom: 1px solid var(--lijn, #E2E8E4);
	vertical-align: top;
}

.tricura-opleidingen-tabel th {
	padding-top: 0;
	font-size: 0.72rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--tekst-zacht, #5C6B63);
}

.tricura-opleidingen-tabel__actie { text-align: right; }

.tricura-opleidingen-tabel__actie a {
	color: var(--groen, #2E6E58);
	font-size: 0.88rem;
}

.tricura-aantal {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 9px;
	font-size: 0.74rem;
	border-radius: 999px;
	background: var(--groen-light, #E8F1ED);
	color: var(--groen, #2E6E58);
}

.tricura-tekort {
	font-size: 0.8rem;
	color: var(--tekst-zacht, #5C6B63);
}

.tricura-leeg {
	padding: 18px 0;
	color: var(--tekst-zacht, #5C6B63);
}

/* :not() en niet zomaar "a": in een leeg blok staat vaak een knop, en die
   regel maakte de tekst daarop groen op een groene achtergrond. Op Facturen
   stond daardoor een knop zonder leesbare tekst. */
.tricura-leeg a:not(.portaal-knop) {
	color: var(--groen, #2E6E58);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =============================================
   14. SMALLE SCHERMEN
   ============================================= */

@media (max-width: 900px) {
	.woocommerce div.product,
	.woocommerce-cart .tricura-shop,
	.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	/* Alles weer op één rij, zodat de volgorde in de opmaak de leesvolgorde is. */
	.woocommerce-cart form.woocommerce-cart-form,
	.woocommerce-cart .cart-collaterals,
	.woocommerce-checkout form.checkout #customer_details,
	.woocommerce-checkout form.checkout #order_review {
		grid-column: 1;
		grid-row: auto;
	}

}

@media (max-width: 600px) {
	/*
	 * Tabellen worden blokjes. WooCommerce zet op elke cel een data-title met de
	 * kolomkop erin; die gebruiken we als etiket. Dat leest op een telefoon beter
	 * dan een tabel die zijwaarts moet schuiven.
	 */
	.woocommerce table.shop_table_responsive thead,
	.tricura-opleidingen-tabel thead {
		display: none;
	}

	.woocommerce table.shop_table_responsive tr,
	.tricura-opleidingen-tabel tr {
		display: block;
		margin-bottom: 8px;
		padding: 14px 0;
		border-bottom: 1px solid var(--lijn, #E2E8E4);
	}

	.woocommerce table.shop_table_responsive tr td,
	.tricura-opleidingen-tabel td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 16px;
		padding: 5px 0;
		border: none;
		text-align: right;
	}

	/*
	 * Het etiket links, de waarde rechts. De waarde kan uit meer dan één stuk
	 * bestaan ("€ 0,00" en "voor 2 artikelen"): die blijven bij elkaar
	 * rechts in plaats van over de breedte verspreid te worden.
	 */
	.woocommerce table.shop_table_responsive tr td {
		flex-wrap: wrap;
		justify-content: flex-end;
		column-gap: 6px;
	}

	/* Het bestelnummer is de kop van het blokje, zonder lijn eronder. */
	.woocommerce table.shop_table_responsive tr th {
		display: block;
		padding: 0 0 6px;
		border: none;
		font-size: 1rem;
	}

	.woocommerce table.shop_table_responsive tr td::before,
	.tricura-opleidingen-tabel td[data-titel]::before {
		content: attr(data-title);
		flex-shrink: 0;
		margin-right: auto;
		font-size: 0.72rem;
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		text-align: left;
		color: var(--tekst-zacht, #5C6B63);
	}

	.tricura-opleidingen-tabel td[data-titel]::before {
		content: attr(data-titel);
	}

	.woocommerce table.shop_table_responsive tr td.product-thumbnail,
	.woocommerce table.shop_table_responsive tr td.actions::before {
		display: none;
	}

	.woocommerce-cart table.cart td.actions {
		display: block;
	}

	.woocommerce-cart table.cart td.actions .coupon .input-text {
		width: 100%;
	}

	.woocommerce-cart table.cart td.actions > .button,
	.woocommerce-cart table.cart td.actions .coupon .button {
		width: 100%;
	}

	.tricura-opleidingen-tabel__actie { justify-content: flex-start; }

	.woocommerce ul.order_details li {
		flex-basis: 100%;
	}

	.tricura-winkel #customer_login .u-column1,
	.tricura-winkel #customer_login .u-column2 {
		padding: 24px 22px;
	}

	.woocommerce div.product form.cart .quantity {
		margin-bottom: 12px;
	}

	.woocommerce div.product form.cart .button {
		width: 100%;
	}
}

/* =============================================
   15. HET OOGJE BIJ HET WACHTWOORD
   ============================================= */

/*
 * WooCommerce zet naast een wachtwoordveld een knopje om het even zichtbaar te
 * maken. Het icoontje daarvoor zat in woocommerce-layout, en dat laden we niet
 * meer; zonder opmaak bleef er een streepje onder het veld hangen. Hier staat
 * het oogje weer op zijn plaats, als tekening in de regel zelf zodat er geen
 * extra bestand voor geladen hoeft te worden.
 */
.tricura-winkel .password-input {
	position: relative;
	display: block;
	width: 100%;
}

.tricura-winkel .show-password-input {
	position: absolute;
	top: 50%;
	right: 12px;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B63' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.8-6.5 10-6.5S22 12 22 12s-3.8 6.5-10 6.5S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity var(--transitie, 0.25s ease);
}

.tricura-winkel .show-password-input:hover,
.tricura-winkel .show-password-input.display-password {
	opacity: 1;
}

.tricura-winkel .password-input input.input-text {
	padding-right: 46px;
}

/*
 * Het sterretje naast het akkoordvinkje stond als los element helemaal rechts
 * in de regel. Een vinkje dat je moet aanzetten om te kunnen bestellen heeft
 * geen sterretje nodig: de tekst zegt het, en de kassa laat je er niet langs.
 */
.tricura-winkel .woocommerce-terms-and-conditions-wrapper abbr.required {
	display: none;
}

/* =============================================
   16. ELDERS GEVOLGDE OPLEIDINGEN
   ============================================= */

/*
 * Het formulier staat onder de eigen opleidingen. Twee velden zijn verplicht,
 * de rest is er om het overzicht later leesbaar te houden; daarom staan de
 * korte velden naast elkaar en de naam over de volle breedte.
 */
.tricura-extern-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 16px 20px;
	align-items: end;
	margin-top: 22px;
	padding: 22px 24px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius, 14px);
	background: var(--neutraal, #FAFAF8);
}

.tricura-extern-form__veld { margin: 0; }

.tricura-extern-form__veld--breed { grid-column: 1 / -1; }

.tricura-extern-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.84rem;
	font-weight: 500;
	color: var(--donkergroen, #0A371A);
}

.tricura-extern-form .required {
	color: var(--groen, #2E6E58);
	text-decoration: none;
	border: none;
}

.tricura-extern-form input,
.tricura-extern-form select {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius-sm, 8px);
	background: #FFFFFF;
	font-family: inherit;
	font-size: 0.92rem;
	color: var(--tekst, #1E2B24);
}

.tricura-extern-form input:focus,
.tricura-extern-form select:focus {
	outline: none;
	border-color: var(--groen, #2E6E58);
	box-shadow: 0 0 0 3px rgba(46, 110, 88, 0.12);
}

.tricura-extern-form__knop {
	grid-column: 1 / -1;
	margin: 4px 0 0;
}

.tricura-inline { display: inline; margin: 0; }

/*
 * Verwijderen is een knop en geen link, want het verandert iets. Hij ziet er
 * wel uit als een link: het is een kleine, zeldzame handeling en hij hoort niet
 * te concurreren met de knop die de deelnemer echt gebruikt.
 */
.tricura-schakel {
	padding: 0;
	border: none;
	background: none;
	font-family: inherit;
	font-size: 0.86rem;
	color: var(--tekst-zacht, #5C6B63);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.tricura-schakel:hover { color: var(--groen, #2E6E58); }

/* De annuleerknop staat in de rij van de inschrijving, niet als losse actie. */
.tricura-annuleer { margin: 0; }

.tricura-annuleer .tricura-tekort {
	display: block;
	margin-top: 2px;
	font-size: 0.76rem;
}

.tricura-kop--eerste { margin-top: 0; }

/* =============================================
   17. WACHTLIJST
   ============================================= */

/*
 * Dichtgeklapt zolang er plaatsen zijn, open zodra de zaal vol is. Zo staat het
 * er altijd, maar dringt het zich alleen op wanneer het het antwoord is op de
 * vraag die de bezoeker net kreeg.
 */
.tricura-wachtlijst {
	margin: 22px 0 0;
	padding: 16px 20px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius-sm, 8px);
	background: var(--neutraal, #FAFAF8);
}

.tricura-wachtlijst__kop {
	font-family: var(--font-titel, 'Montserrat', system-ui, sans-serif);
	font-size: 0.94rem;
	font-weight: 600;
	color: var(--donkergroen, #0A371A);
	cursor: pointer;
}

.tricura-wachtlijst[open] .tricura-wachtlijst__kop { margin-bottom: 12px; }

.tricura-wachtlijst__uitleg {
	margin: 0 0 14px;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--tekst-zacht, #5C6B63);
}

.tricura-wachtlijst__form p { margin: 0 0 12px; }

.tricura-wachtlijst__form label {
	display: block;
	margin-bottom: 5px;
	font-size: 0.84rem;
	font-weight: 500;
	color: var(--donkergroen, #0A371A);
}

.tricura-wachtlijst__form input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius-sm, 8px);
	background: #FFFFFF;
	font-family: inherit;
	font-size: 0.92rem;
	color: var(--tekst, #1E2B24);
}

.tricura-wachtlijst__form input:focus {
	outline: none;
	border-color: var(--groen, #2E6E58);
	box-shadow: 0 0 0 3px rgba(46, 110, 88, 0.12);
}

.tricura-wachtlijst__form p:last-child { margin-bottom: 0; }

/* =============================================
   HET PORTAAL
   Mijn account als portaal. Het beginscherm is een raster van panelen die
   zich aanmelden (zie includes/portaal-overzicht.php), geen vaste indeling.
   Een nieuw paneel hoeft hier dus niets toe te voegen: het is een halve of
   een hele breedte, en de rest volgt.
   ============================================= */

/*
 * Het profiel, het menu en het kader staan in de sectie HET PORTAAL ALS
 * WERKPLEK, onderaan dit bestand.
 */

/* ---------- Er staat niets open ---------- */

.portaal-inorde {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	border-radius: var(--radius-sm, 8px);
	background: var(--mint-soft, #F1F8F4);
}

.portaal-inorde__vink {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	color: var(--groen, #2E6E58);
}

.portaal-inorde strong {
	display: block;
	font-weight: 500;
	line-height: 1.4;
	color: var(--donkergroen, #0A371A);
}

.portaal-inorde span {
	display: block;
	margin-top: 2px;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--tekst-zacht, #5C6B63);
}

/* ---------- Het raster ---------- */

.portaal-raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

.portaal-paneel {
	display: flex;
	flex-direction: column;
	padding: 26px 28px 28px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius, 14px);
	background: var(--wit, #FFFFFF);
}

.portaal-paneel--vol {
	grid-column: 1 / -1;
}

/* Een paneel dat zelf zijn kader meebrengt, of er geen nodig heeft. */
.portaal-paneel--kaal {
	padding: 0;
	border: none;
	background: none;
}

.portaal-paneel--nadruk {
	align-items: center;
	text-align: center;
	background: var(--mint-soft, #F1F8F4);
	border-color: transparent;
}

.portaal-paneel--zacht {
	background: var(--groen-light, #E8F1ED);
	border-color: transparent;
}

/* Met .tricura-shop erbij: anders wint de algemene h3-regel van de winkel
   (0,1,1) en worden de paneeltitels even groot als een tussenkop. */
.portaal-kaart__titel,
.tricura-shop .portaal-kaart__titel {
	margin: 0 0 18px;
	font-family: var(--font-body, sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tekst-zacht, #5C6B63);
}

.portaal-paneel--kaal .portaal-kaart__titel {
	margin-bottom: 12px;
}

/* ---------- Nog even dit ---------- */

.portaal-acties {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.portaal-actie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	padding: 16px 18px;
	border-radius: var(--radius-sm, 8px);
	background: var(--mint-soft, #F1F8F4);
}

.portaal-actie--dringend {
	background: var(--roze-soft, #FFF3F2);
}

.portaal-actie__tekst {
	min-width: 0;
	flex: 1 1 16rem;
}

.portaal-actie__tekst strong {
	display: block;
	font-weight: 500;
	line-height: 1.4;
	color: var(--donkergroen, #0A371A);
}

.portaal-actie__tekst span {
	display: block;
	margin-top: 2px;
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--tekst-zacht, #5C6B63);
}

/* ---------- De ring ---------- */

.portaal-ring {
	position: relative;
	width: 164px;
	max-width: 100%;
	margin: 0 auto;
}

.portaal-ring svg {
	display: block;
	width: 100%;
	height: auto;
	/* De ring begint bovenaan in plaats van rechts. */
	transform: rotate(-90deg);
}

.portaal-ring__baan {
	fill: none;
	stroke: var(--wit, #FFFFFF);
	stroke-width: 11;
}

.portaal-ring__vulling {
	fill: none;
	stroke: var(--groen, #2E6E58);
	stroke-width: 11;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.portaal-ring__cijfer {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	line-height: 1;
}

.portaal-ring__cijfer strong {
	font-family: var(--font-titel, sans-serif);
	font-size: 2.6rem;
	font-weight: 600;
	color: var(--donkergroen, #0A371A);
	font-variant-numeric: tabular-nums;
}

.portaal-ring__cijfer span {
	font-size: 0.8rem;
	color: var(--tekst-zacht, #5C6B63);
}

.portaal-ring__uitleg {
	margin: 18px 0 20px;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--tekst-zacht, #5C6B63);
}

.portaal-ring--gehaald + .portaal-ring__uitleg {
	color: var(--groen, #2E6E58);
	font-weight: 500;
}

/* ---------- De statistiekenstrook ---------- */

.portaal-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}

.portaal-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px 20px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius, 14px);
	background: var(--wit, #FFFFFF);
	color: var(--tekst, #1E2B24);
	transition: border-color var(--transitie, 0.25s ease), box-shadow var(--transitie, 0.25s ease);
}

a.portaal-stat:hover {
	border-color: var(--groen, #2E6E58);
	box-shadow: var(--schaduw, 0 2px 8px rgba(10, 55, 26, 0.05));
	color: var(--tekst, #1E2B24);
}

.portaal-stat__label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tekst-zacht, #5C6B63);
}

.portaal-stat__waarde {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--font-titel, sans-serif);
	font-size: 1.9rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--donkergroen, #0A371A);
	font-variant-numeric: tabular-nums;
}

.portaal-stat__waarde em {
	font-family: var(--font-body, sans-serif);
	font-size: 0.82rem;
	font-style: normal;
	font-weight: 400;
	color: var(--tekst-zacht, #5C6B63);
}

.portaal-stat__balk {
	display: block;
	height: 5px;
	margin-top: 4px;
	border-radius: 999px;
	background: var(--lijn, #E2E8E4);
	overflow: hidden;
}

.portaal-stat__balk span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--groen, #2E6E58);
	transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.portaal-stat__bij {
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--tekst-zacht, #5C6B63);
}

/* De toestand kleurt het cijfer en het balkje, niet het hele kader: een kaart
   die helemaal oplicht trekt de aandacht weg van wat ernaast staat. */
.portaal-stat--goed .portaal-stat__balk span,
.portaal-stat--goed .portaal-stat__waarde {
	color: var(--groen, #2E6E58);
}

.portaal-stat--let-op .portaal-stat__balk span {
	background: #C9973F;
}

.portaal-stat--let-op .portaal-stat__bij {
	color: #9A6F22;
}

.portaal-stat--actie {
	border-color: var(--roze, #FECECC);
	background: var(--roze-soft, #FFF3F2);
}

.portaal-stat--actie .portaal-stat__balk span {
	background: #C2564F;
}

/* ---------- De eerstvolgende opleiding ---------- */

.portaal-volgend__naam {
	margin: 0 0 6px;
	font-family: var(--font-titel, sans-serif);
	font-size: 1.35rem;
	line-height: 1.3;
}

.portaal-volgend__naam a {
	color: var(--donkergroen, #0A371A);
}

.portaal-volgend__naam a:hover {
	color: var(--groen, #2E6E58);
}

.portaal-volgend__wanneer {
	margin: 0;
	font-size: 1rem;
	color: var(--tekst, #1E2B24);
}

.portaal-volgend__wanneer span {
	color: var(--tekst-zacht, #5C6B63);
}

.portaal-volgend__aftellen {
	/* Het paneel is een kolom-flexbox: zonder align-self rekt de pil zich over
	   de hele breedte uit en leest ze als een balk in plaats van als een label. */
	align-self: flex-start;
	display: inline-block;
	margin: 12px 0 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--roze-soft, #FFF3F2);
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--donkergroen, #0A371A);
}

.portaal-volgend__rest {
	margin: 16px 0 0;
	font-size: 0.88rem;
}

.portaal-paneel--volgend .tricura-annuleer {
	margin-top: auto;
	padding-top: 20px;
}

.portaal-let-op {
	margin: 14px 0 0;
	padding: 11px 14px;
	border-radius: var(--radius-sm, 8px);
	background: var(--roze-soft, #FFF3F2);
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--donkergroen, #0A371A);
}

.portaal-leeg {
	margin: 0 0 18px;
	color: var(--tekst-zacht, #5C6B63);
}

/* ---------- Knoppen ---------- */

.portaal-knop {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-top: auto;
	padding: 11px 22px;
	border-radius: 999px;
	background: var(--groen, #2E6E58);
	color: #FFFFFF;
	font-size: 0.9rem;
	font-weight: 500;
	transition: background var(--transitie, 0.25s ease);
}

.portaal-knop:hover {
	background: var(--donkergroen, #0A371A);
	color: #FFFFFF;
}

.portaal-knop--zacht {
	background: transparent;
	color: var(--groen, #2E6E58);
	border: 1px solid var(--groen, #2E6E58);
}

.portaal-knop--zacht:hover {
	background: var(--groen, #2E6E58);
	color: #FFFFFF;
}

.portaal-knop--klein {
	margin-top: 0;
	padding: 8px 16px;
	font-size: 0.84rem;
	white-space: nowrap;
}

.portaal-paneel--nadruk .portaal-knop {
	align-self: center;
}

/* ---------- De tegels ---------- */

.portaal-tegels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
}

.portaal-tegel {
	display: block;
	padding: 20px 20px 22px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius, 14px);
	color: var(--tekst, #1E2B24);
	transition: border-color var(--transitie, 0.25s ease), transform var(--transitie, 0.25s ease), box-shadow var(--transitie, 0.25s ease);
}

.portaal-tegel:hover {
	border-color: var(--groen, #2E6E58);
	transform: translateY(-2px);
	box-shadow: var(--schaduw, 0 2px 8px rgba(10, 55, 26, 0.05));
	color: var(--tekst, #1E2B24);
}

.portaal-tegel__icoon {
	width: 22px;
	height: 22px;
	margin-bottom: 14px;
	color: var(--groen, #2E6E58);
}

.portaal-tegel__titel {
	display: block;
	font-weight: 500;
	line-height: 1.35;
}

.portaal-tegel__bij {
	display: block;
	margin-top: 3px;
	font-size: 0.84rem;
	color: var(--tekst-zacht, #5C6B63);
}

/* ---------- Formule en hulp ---------- */

.portaal-paneel--formule p {
	margin: 0 0 16px;
	font-size: 0.94rem;
	line-height: 1.7;
}

.portaal-paneel--hulp p {
	margin: 0 0 12px;
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--tekst, #1E2B24);
}

.portaal-hulp__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.94rem;
	font-weight: 500;
}

.portaal-hulp__lijst li + li {
	margin-top: 4px;
}

/* ---------- Smaller ---------- */

@media (max-width: 900px) {
	.portaal-raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.portaal-paneel--vol {
		grid-column: 1;
	}

}

@media (max-width: 540px) {
	.portaal-paneel {
		padding: 22px 20px 24px;
	}

	.portaal-actie {
		align-items: flex-start;
	}

	.portaal-knop--klein {
		width: 100%;
		justify-content: center;
	}
}

/* =============================================
   HET BEHEER IN HET PORTAAL
   Tricura werkt op dezelfde plek als de klanten, niet in het
   WordPress-beheer. Zie includes/beheer.php.
   ============================================= */

.beheer__titel {
	margin: 0 0 6px;
	font-family: var(--font-titel, sans-serif);
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--donkergroen, #0A371A);
}

/* Even specifiek als de paneeltitel, en later in het bestand: anders zet die
   de marge bovenaan terug op nul. */
.beheer__kop,
.tricura-shop .portaal-kaart__titel.beheer__kop {
	margin-top: 34px;
}

/* Het getal vooraan een werkpunt: hoeveel er ligt, in één oogopslag. */
.beheer__aantal {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--wit, #FFFFFF);
	font-family: var(--font-titel, sans-serif);
	font-size: 1rem;
	font-weight: 600;
	color: var(--donkergroen, #0A371A);
	font-variant-numeric: tabular-nums;
}

.portaal-actie--dringend .beheer__aantal {
	background: var(--roze, #FECECC);
}

.beheer__werk .portaal-actie {
	align-items: center;
}

/* ---------- Meldingen ---------- */

.beheer__melding {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: var(--radius-sm, 8px);
	font-size: 0.9rem;
	line-height: 1.6;
}

.beheer__melding--goed   { background: var(--groen-light, #E8F1ED); color: var(--donkergroen, #0A371A); }
.beheer__melding--let-op { background: #FDF0D5; color: #7A5A15; }
.beheer__melding--fout   { background: var(--roze-soft, #FFF3F2); color: #7A2A24; }

/* ---------- Tabellen ---------- */

/* Een lijst kan breder zijn dan de kolom; dan mag ze schuiven in plaats van
   de hele pagina scheef te trekken. */
.beheer__tabel {
	overflow-x: auto;
	margin-bottom: 24px;
}

/* Een minimumbreedte in plaats van 100%: anders perst de tabel zich samen tot
   de kolommen onleesbaar worden, in plaats van te schuiven. */
.beheer__tabel table {
	min-width: 44rem;
}

.beheer__terug {
	margin: 0 0 14px;
	font-size: 0.88rem;
}

/* ---------- Standen ---------- */

.beheer__stand {
	display: inline-block;
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--lijn, #E2E8E4);
	font-size: 0.76rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--tekst, #1E2B24);
}

.beheer__stand--nieuw,
.beheer__stand--nazicht     { background: var(--roze, #FECECC); color: #7A2A24; }
.beheer__stand--opgenomen,
.beheer__stand--afspraak,
.beheer__stand--verzonden   { background: #FDF0D5; color: #7A5A15; }
.beheer__stand--gesprek     { background: var(--groen-light, #E8F1ED); color: var(--groen, #2E6E58); }
.beheer__stand--klant,
.beheer__stand--aanvaard    { background: var(--groen, #2E6E58); color: #FFFFFF; }
.beheer__stand--geen-match,
.beheer__stand--geweigerd,
.beheer__stand--afgewezen,
.beheer__stand--ingetrokken { background: var(--lijn, #E2E8E4); color: var(--tekst-zacht, #5C6B63); }

/* ---------- Twee kaarten naast elkaar ---------- */

.beheer__kaarten {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

@media (max-width: 860px) {
	.beheer__kaarten {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Gegevenslijstjes ---------- */

.beheer__gegevens {
	display: grid;
	grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
	gap: 6px 18px;
	margin: 0 0 8px;
	font-size: 0.92rem;
}

.beheer__gegevens dt {
	color: var(--tekst-zacht, #5C6B63);
}

.beheer__gegevens dd {
	margin: 0;
	color: var(--tekst, #1E2B24);
	overflow-wrap: anywhere;
}

.beheer__gegevens--breed {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--lijn, #E2E8E4);
	font-size: 0.86rem;
}

/* ---------- Formulieren ---------- */

.beheer__formulier p {
	margin: 0 0 16px;
}

.beheer__formulier label {
	display: block;
	margin-bottom: 5px;
	font-size: 0.86rem;
	font-weight: 500;
}

.beheer__formulier select,
.beheer__formulier textarea,
.beheer__formulier input[type="text"],
.beheer__formulier input[type="number"],
.beheer__formulier input[type="date"] {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius-sm, 8px);
	background: var(--wit, #FFFFFF);
	font-family: inherit;
	font-size: 0.9rem;
	color: var(--tekst, #1E2B24);
}

.beheer__formulier select:focus,
.beheer__formulier textarea:focus,
.beheer__formulier input:focus {
	outline: none;
	border-color: var(--groen, #2E6E58);
	box-shadow: 0 0 0 3px rgba(46, 110, 88, 0.12);
}

.beheer__hulp {
	display: block;
	margin-top: 5px;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--tekst-zacht, #5C6B63);
}

.beheer__nazicht {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--lijn, #E2E8E4);
}

.beheer__nazicht p {
	margin-bottom: 12px;
}

/* ---------- Bladeren ---------- */

.beheer__bladeren {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 20px;
}

.beheer__bladeren .portaal-knop {
	margin-top: 0;
}

.beheer__bladeren-tekst {
	font-size: 0.86rem;
	color: var(--tekst-zacht, #5C6B63);
	font-variant-numeric: tabular-nums;
}

/* ---------- Schakelaars op een beheerscherm ---------- */

.beheer__schakelgroep {
	margin-bottom: 22px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius, 14px);
	overflow: hidden;
}

.beheer__schakelkop {
	margin: 0;
	padding: 12px 20px;
	background: var(--mint-soft, #F1F8F4);
	font-family: var(--font-body, sans-serif);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--groen, #2E6E58);
}

.beheer__schakel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	padding: 14px 20px;
	border-top: 1px solid var(--lijn, #E2E8E4);
}

.beheer__schakel-tekst {
	flex: 1 1 18rem;
	min-width: 0;
}

.beheer__schakel-tekst strong {
	display: block;
	font-weight: 500;
	line-height: 1.4;
	color: var(--donkergroen, #0A371A);
}

.beheer__schakel-tekst span {
	display: block;
	margin-top: 2px;
	font-size: 0.84rem;
	line-height: 1.55;
	color: var(--tekst-zacht, #5C6B63);
}

.beheer__schakel-pakket {
	color: var(--groen, #2E6E58) !important;
	font-weight: 500;
}

/* De keuzelijst hoort niet mee te rekken met de uitleg ernaast. */
.beheer__formulier .beheer__schakel select {
	flex: 0 0 auto;
	width: auto;
	min-width: 13rem;
}

/* ---------- Vinkjes ---------- */

.beheer__vinkje label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-bottom: 0;
	font-size: 0.92rem;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.beheer__vinkje input {
	flex: 0 0 auto;
	margin-top: 3px;
	accent-color: var(--groen, #2E6E58);
}

.beheer__formulier input[type="search"] {
	padding: 9px 14px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.88rem;
}

/* Zoekveld, keuzelijst en knop op één rij. Zonder deze regel nam de
   keuzelijst de volle breedte in en viel de knop eronder. */
.portaal-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin: 0 0 22px;
}

.tricura-winkel .portaal-filters select {
	width: auto;
	min-width: 12rem;
	padding-top: 9px;
	padding-bottom: 9px;
	border-radius: 999px;
	font-size: 0.88rem;
}

.portaal-filters__wissen {
	font-size: 0.86rem;
}

.portaal-filters input[type="search"] {
	flex: 1 1 14rem;
	max-width: 22rem;
	padding: 9px 14px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 999px;
	background: var(--wit, #FFFFFF);
	font-family: inherit;
	font-size: 0.88rem;
	color: var(--tekst, #1E2B24);
}

.portaal-filters input[type="search"]:focus {
	outline: none;
	border-color: var(--groen, #2E6E58);
	box-shadow: 0 0 0 3px rgba(46, 110, 88, 0.12);
}

/* =========================================================================
   ATTESTEN EN FACTUREN (ronde 4)
   ========================================================================= */

/* ---------- De stand van een opgave, bij de klant ---------- */

/* Zelfde vorm als .beheer__stand, maar dan in het klantportaal. Bewust niet
   dezelfde klasse: het beheer mag later een eigen kant op zonder dat de
   klantkant meeverandert. */
.tricura-stand {
	display: inline-block;
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--lijn, #E2E8E4);
	font-size: 0.76rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--tekst, #1E2B24);
}

.tricura-stand--nazicht,
.tricura-stand--wacht       { background: #FDF0D5; color: #7A5A15; }
.tricura-stand--goedgekeurd { background: var(--groen, #2E6E58); color: #FFFFFF; }
.tricura-stand--afgekeurd   { background: var(--lijn, #E2E8E4); color: var(--tekst-zacht, #5C6B63); }

/* Dezelfde twee standen in het beheer. */
.beheer__stand--goedgekeurd { background: var(--groen, #2E6E58); color: #FFFFFF; }
.beheer__stand--afgekeurd   { background: var(--lijn, #E2E8E4); color: var(--tekst-zacht, #5C6B63); }

/* ---------- Uitleg die om aandacht vraagt ---------- */

.tricura-uitleg--wacht {
	padding: 11px 15px;
	border-left: 3px solid #D9A62B;
	border-radius: 4px;
	background: #FDF6E6;
	color: var(--tekst, #1E2B24);
}

/* ---------- Het attestveld in het formulier ---------- */

.tricura-veldhulp {
	display: block;
	margin-top: 6px;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--tekst-zacht, #5C6B63);
}

/* Het bestandsveld in dezelfde vorm als de andere velden. De knop die de
   browser zelf tekent laten we staan: die is per browser anders, en hem
   nabouwen kost meer dan het opbrengt. */
.tricura-extern-form input[type="file"] {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 6px;
	background: #FFFFFF;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--tekst, #1E2B24);
	cursor: pointer;
}
.tricura-extern-form input[type="file"]:focus-visible {
	outline: none;
	border-color: var(--groen, #2E6E58);
	box-shadow: 0 0 0 3px rgba(46, 110, 88, 0.12);
}

/* ---------- Een kleinere kop binnen een beheerscherm ---------- */

.beheer__titel--klein {
	margin-top: 38px;
	font-size: 1.05rem;
}

/* ---------- De facturentabel ---------- */

/* Het bedrag en het factuurnummer staan in kolommen onder elkaar; cijfers
   met gelijke breedte laten die kolommen kloppen. */
.tricura-facturen__tabel td {
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
   HET BEELD BIJ EEN OPLEIDING ZONDER FOTO (ronde 4)
   =========================================================================
   Zie includes/winkelbeeld.php voor het waarom. Kort: een grijze placeholder
   leest als een fout, dit leest als een keuze. De drie maten volgen de drie
   plaatsen waar een productfoto staat: het overzicht, de productpagina en de
   regel in het winkelwagentje.
   ========================================================================= */

.tricura-beeld {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 24px;
	border-radius: 10px;
	background: linear-gradient(150deg, #F1F8F4 0%, #DCEBE3 100%);
	color: var(--groen, #2E6E58);
	text-align: center;
}

.tricura-beeld__icoon {
	width: 40px;
	height: 40px;
	flex: none;
}

.tricura-beeld__soort {
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.3;
}

.tricura-beeld__uren {
	font-size: 0.78rem;
	color: var(--tekst-zacht, #5C6B63);
}

/* In het overzicht: even hoog als een productfoto zou zijn. */
.tricura-beeld--klein {
	aspect-ratio: 4 / 3;
	margin-bottom: 16px;
}

/* Op de productpagina: de volle beeldkolom. */
.tricura-beeld--groot {
	aspect-ratio: 1 / 1;
	gap: 14px;
	padding: 40px;
}
.tricura-beeld--groot .tricura-beeld__icoon { width: 64px; height: 64px; }
.tricura-beeld--groot .tricura-beeld__soort { font-size: 1.05rem; }

/* In het winkelwagentje: een klein vierkantje naast de naam. */
.tricura-beeld--mini {
	width: 58px;
	height: 58px;
	padding: 8px;
	gap: 0;
	border-radius: 8px;
}
.tricura-beeld--mini .tricura-beeld__icoon { width: 24px; height: 24px; }
.tricura-beeld--mini .tricura-beeld__soort,
.tricura-beeld--mini .tricura-beeld__uren { display: none; }

/* =========================================================================
   OVERZICHT EN LEEG WINKELWAGENTJE (ronde 4)
   ========================================================================= */

.tricura-winkel__inleiding {
	max-width: 62ch;
	margin: 0 0 30px;
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--tekst-zacht, #5C6B63);
}

.tricura-leegmandje {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 520px;
	margin: 0 auto;
	padding: 48px 32px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 14px;
	background: var(--mint-soft, #F1F8F4);
	text-align: center;
}

.tricura-leegmandje svg {
	width: 46px;
	height: 46px;
	color: var(--groen, #2E6E58);
}

.tricura-leegmandje__titel {
	margin: 0;
	font-family: var(--font-kop, 'Playfair Display', Georgia, serif);
	font-size: 1.35rem;
	color: var(--donkergroen, #0A371A);
}

.tricura-leegmandje__tekst {
	max-width: 46ch;
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--tekst-zacht, #5C6B63);
}

.tricura-leegmandje .portaal-knop {
	margin-top: 6px;
}

@media (max-width: 600px) {
	.tricura-leegmandje { padding: 36px 22px; }
	.tricura-beeld--groot { aspect-ratio: 4 / 3; padding: 30px; }
}

/* ---------- De onderste rij van het winkelwagentje (ronde 4) ---------- */

/* Het couponveld, de couponknop en de bijwerkknop stonden onder elkaar
   uitgelijnd op links, met een halve regel ertussen. Nu één rij, met de
   bijwerkknop aan de andere kant: die hoort bij de tabel erboven, de coupon
   bij zichzelf. */
/* Let op: hier mag GEEN display:flex op de cel zelf. Dit is een <td> met
   colspan="6"; zodra hij een flexcontainer wordt, doet hij niet meer mee aan
   de tabelindeling, valt de colspan weg en krimpt hij tot de breedte van de
   eerste kolom. De cel blijft dus een tabelcel, en het schikken gebeurt in
   .coupon en met een zweving voor de bijwerkknop. */
.woocommerce-cart .shop_table .actions {
	padding-top: 22px;
	overflow: hidden; /* neemt de zweving van de bijwerkknop op */
}

.woocommerce-cart .shop_table .actions .coupon {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	float: none;
}

.woocommerce-cart .shop_table .actions .coupon .input-text {
	width: auto;
	min-width: 190px;
	margin: 0;
}

.woocommerce-cart .shop_table .actions .coupon button {
	white-space: nowrap;
}

.woocommerce-cart .shop_table .actions button[name="update_cart"] {
	float: right;
	white-space: nowrap;
}

/* Zolang er niets gewijzigd is, staat de bijwerkknop uit. Dat is WooCommerce'
   eigen gedrag en het klopt — maar een half doorzichtige groene pil leest als
   iets dat stuk is. Hier is hij rustig en duidelijk uitgeschakeld. */
.woocommerce-cart .shop_table .actions button[name="update_cart"]:disabled,
.woocommerce-cart .shop_table .actions button[name="update_cart"][disabled] {
	background: transparent;
	border-color: var(--lijn, #E2E8E4);
	color: var(--tekst-zacht, #5C6B63);
	opacity: 1;
	box-shadow: none;
	transform: none;
	cursor: default;
}

/* Het vaste aantal bij een opleiding: één plaats per persoon. */
.tricura-aantal-vast {
	display: inline-block;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
	.woocommerce-cart .shop_table .actions .coupon { display: flex; width: 100%; }
	.woocommerce-cart .shop_table .actions .coupon .input-text { min-width: 0; flex: 1 1 auto; }
	.woocommerce-cart .shop_table .actions button[name="update_cart"] { float: none; width: 100%; margin-top: 12px; }
}

/* ---------- Het lege winkelwagentje (ronde 4) ---------- */

/* Eén kolom: er is geen tabel om een totaalblok naast te zetten. De klasse
   komt uit tricura_opl_bodyklassen(); zonder haar blijft het blok in de
   smalle rechterkolom hangen. */
.tricura-mandje-leeg .tricura-shop {
	grid-template-columns: minmax(0, 1fr);
}

/* De knop "Terug naar winkel" van WooCommerce staat nu in het blok zelf, met
   een duidelijker label. */
.tricura-mandje-leeg .return-to-shop,
.tricura-mandje-leeg .wc-empty-cart-message {
	display: none;
}

/* =========================================================================
   HET PORTAAL ALS WERKPLEK (16 september 2026)

   Mijn account voor wie ingelogd is. De kop van de site en de zijbalk delen
   één lichte kleur en vormen samen een kader. Daarin ligt de inhoud op een
   wit blad met een ronde hoek linksboven. Zo lees je de werkplek als één
   geheel, en krijgt de inhoud de hele breedte naast het menu.

   Het actieve menu-item is wit, net als het blad: het is uit hetzelfde papier
   gesneden als de pagina waar je op staat.

   Sjabloon: templates/pagina-portaal.php. Menu:
   templates/myaccount/navigation.php. Gedrag op een telefoon:
   assets/portaal.js.
   ========================================================================= */

.tricura-portaal {
	--portaal-zijbalk: 264px;
	--portaal-kader: var(--mint-soft, #F1F8F4);
	--portaal-top: var(--nav-hoogte, 62px);
	--portaal-blad-breedte: 1160px;
	--portaal-rand: 48px;
}

/* De admin bar van WordPress staat boven de kop; alles wat vast staat, schuift
   mee naar onder. Zelfde breekpunten als in main.css van het thema. */
.admin-bar.tricura-portaal {
	--portaal-top: calc(var(--nav-hoogte, 62px) + 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar.tricura-portaal {
		--portaal-top: calc(var(--nav-hoogte, 62px) + 46px);
	}
}

@media screen and (max-width: 600px) {
	.admin-bar.tricura-portaal {
		--portaal-top: var(--nav-hoogte, 62px);
	}
}

/* ---------- Het kader ---------- */

body.tricura-portaal {
	background: var(--portaal-kader);
}

/* De kop krijgt de kleur van het kader, en loopt over de volle breedte zodat
   het logo boven de zijbalk staat in plaats van ergens halverwege. */
.tricura-portaal .site-header {
	background: rgba(241, 248, 244, 0.94);
}

.tricura-portaal .site-header.is-scrolled {
	box-shadow: none;
}

.tricura-portaal .nav-inner {
	max-width: none;
	padding: 0 32px;
}

.portaal-app {
	display: flex;
	min-height: calc(100vh - var(--portaal-top));
	min-height: calc(100dvh - var(--portaal-top));
	padding-left: var(--portaal-zijbalk);
}

.portaal-blad {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	background: var(--wit, #FFFFFF);
	border-top: 1px solid var(--lijn, #E2E8E4);
	border-left: 1px solid var(--lijn, #E2E8E4);
	border-top-left-radius: 12px;
}

.portaal-blad__binnen {
	flex: 1 1 auto;
	width: 100%;
	max-width: calc(var(--portaal-blad-breedte) + 2 * var(--portaal-rand));
	margin: 0 auto;
	padding: 36px var(--portaal-rand) 56px;
}

/* Het raster van het oude account staat uit: het menu staat niet meer naast
   de inhoud in dezelfde kolom, maar vast tegen de rand. */
.tricura-portaal .woocommerce {
	display: block;
}

.tricura-portaal .woocommerce-MyAccount-content {
	min-width: 0;
}

/* ---------- De zijbalk ---------- */

.tricura-portaal .portaal-menu {
	position: fixed;
	z-index: 40;
	top: var(--portaal-top);
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: var(--portaal-zijbalk);
	background: var(--portaal-kader);
}

.portaal-menu__profiel {
	position: relative;
	padding: 22px 20px 18px 24px;
}

.portaal-menu__groepen {
	flex: 1 1 auto;
	min-height: 0;
	padding: 2px 14px 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--mint, #93C8AD) transparent;
}

.portaal-menu__voet {
	padding: 12px 14px 18px;
	border-top: 1px solid var(--lijn, #E2E8E4);
}

.portaal-menu__groep + .portaal-menu__groep {
	margin-top: 20px;
}

.portaal-menu__label {
	margin: 0 0 6px;
	padding: 0 12px;
	font-family: var(--font-body, sans-serif);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tekst-zacht, #5C6B63);
}

.portaal-menu ul {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.portaal-menu li {
	margin: 0;
}

.portaal-menu li a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 40px;
	padding: 9px 12px;
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--tekst, #1E2B24);
	transition: background var(--transitie, 0.25s ease), color var(--transitie, 0.25s ease), box-shadow var(--transitie, 0.25s ease);
}

.portaal-menu li a:hover {
	background: var(--groen-light, #E8F1ED);
	color: var(--donkergroen, #0A371A);
}

.portaal-menu li a:focus-visible {
	outline: 2px solid var(--groen, #2E6E58);
	outline-offset: -2px;
}

/* Het actieve item: wit, zoals het blad waarop je staat, met een groene
   streep links die zegt waar je bent. */
.portaal-menu li.is-active a {
	background: var(--wit, #FFFFFF);
	color: var(--donkergroen, #0A371A);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--groen, #2E6E58), 0 0 0 1px var(--lijn, #E2E8E4);
}

.portaal-icoon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--groen, #2E6E58);
	opacity: 0.7;
	transition: opacity var(--transitie, 0.25s ease);
}

.portaal-menu li a:hover .portaal-icoon,
.portaal-menu li.is-active .portaal-icoon {
	opacity: 1;
}

.portaal-menu__tekst {
	flex: 1 1 auto;
	min-width: 0;
}

.portaal-menu__teller {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 4px;
	background: var(--groen, #2E6E58);
	color: var(--wit, #FFFFFF);
	font-size: 0.72rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Het beheer is werk, geen eigen dossier: het krijgt een lijntje erboven en
   een groen label, zodat het zich van de rest van het menu onderscheidt. */
.portaal-menu__groep--beheer {
	padding-top: 18px;
	border-top: 1px solid var(--lijn, #E2E8E4);
}

.portaal-menu__groep--beheer .portaal-menu__label {
	color: var(--groen, #2E6E58);
}

.portaal-menu__voet li a {
	color: var(--tekst-zacht, #5C6B63);
}

.portaal-menu__voet li a .portaal-icoon {
	color: currentColor;
}

/* ---------- Het profiel bovenaan de zijbalk ---------- */

.portaal-kop {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.portaal-kop__avatar {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: var(--groen, #2E6E58);
	color: var(--wit, #FFFFFF);
	font-family: var(--font-titel, sans-serif);
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.portaal-kop__tekst {
	min-width: 0;
	padding-top: 2px;
}

.portaal-kop__naam {
	margin: 0 0 4px;
	font-family: var(--font-titel, sans-serif);
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--donkergroen, #0A371A);
	overflow-wrap: anywhere;
}

.portaal-kop__kenmerken {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.portaal-badge {
	display: block;
	font-size: 0.8rem;
	line-height: 1.4;
}

.portaal-badge--formule {
	font-weight: 600;
	color: var(--groen, #2E6E58);
}

.portaal-badge--nummer {
	color: var(--tekst-zacht, #5C6B63);
	font-variant-numeric: tabular-nums;
}

/* Het kruisje staat er alleen op een telefoon, waar het menu een lade is. */
.portaal-menu__sluit {
	position: absolute;
	top: 18px;
	right: 14px;
	display: none;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 6px;
	background: var(--wit, #FFFFFF);
	color: var(--donkergroen, #0A371A);
	cursor: pointer;
}

.portaal-menu__sluit svg {
	display: block;
	width: 16px;
	height: 16px;
	margin: auto;
}

.portaal-menu__sluit:focus-visible,
.portaal-balk__knop:focus-visible {
	outline: 2px solid var(--groen, #2E6E58);
	outline-offset: 2px;
}

/* ---------- De titel bovenaan het blad ---------- */

.portaal-paginakop {
	margin: 0 0 28px;
}

.portaal-paginakop__boven {
	margin: 0 0 6px;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--groen, #2E6E58);
}

.portaal-paginakop .portaal-paginakop__titel {
	margin: 0;
	font-family: var(--font-titel, sans-serif);
	font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.35rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--donkergroen, #0A371A);
}

/* De meldingen van WooCommerce komen onder de titel. */
.tricura-portaal .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ---------- De knop voor het menu op een telefoon ---------- */

.portaal-balk {
	display: none;
}

.portaal-balk__knop {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 11px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 6px;
	background: var(--wit, #FFFFFF);
	color: var(--donkergroen, #0A371A);
	font-family: var(--font-body, sans-serif);
	font-size: 0.88rem;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
}

.portaal-balk__knop svg {
	width: 20px;
	height: 20px;
	color: var(--groen, #2E6E58);
}

.portaal-balk__knop[hidden],
.portaal-menu__sluit[hidden] {
	display: none;
}

/* ---------- De voet onderaan het blad ---------- */

.portaal-voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	width: calc(100% - 2 * var(--portaal-rand));
	max-width: var(--portaal-blad-breedte);
	margin: 0 auto;
	padding: 18px 0 26px;
	border-top: 1px solid var(--lijn, #E2E8E4);
	font-size: 0.8rem;
	color: var(--tekst-zacht, #5C6B63);
}

.portaal-voet p {
	margin: 0;
}

.portaal-voet ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.portaal-voet a {
	color: var(--tekst-zacht, #5C6B63);
}

.portaal-voet a:hover {
	color: var(--groen, #2E6E58);
}

/* ---------- De eerstvolgende opleiding, met kalenderblaadje ---------- */

.portaal-volgend {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

.portaal-volgend__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.portaal-datumblad {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	width: 68px;
	overflow: hidden;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 6px;
	background: var(--wit, #FFFFFF);
	text-align: center;
	line-height: 1;
}

.portaal-datumblad__maand {
	align-self: stretch;
	padding: 5px 0 4px;
	background: var(--groen, #2E6E58);
	color: var(--wit, #FFFFFF);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.portaal-datumblad__dag {
	padding: 9px 0 2px;
	font-family: var(--font-titel, sans-serif);
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--donkergroen, #0A371A);
	font-variant-numeric: tabular-nums;
}

.portaal-datumblad__weekdag {
	padding: 0 0 9px;
	font-size: 0.72rem;
	color: var(--tekst-zacht, #5C6B63);
}

.portaal-datumblad--open .portaal-datumblad__maand {
	background: var(--mint, #93C8AD);
	color: var(--donkergroen, #0A371A);
}

.portaal-datumblad--open .portaal-datumblad__dag {
	color: var(--tekst-zacht, #5C6B63);
}

.portaal-volgend .portaal-volgend__naam {
	margin-top: 2px;
}

/* ---------- Bestellingen in het portaal ---------- */

/* De knoppen in de tabel staan in HET KLANTENPORTAAL, ZAKELIJK, onderaan. */

.tricura-portaal .woocommerce-orders-table .woocommerce-button + .woocommerce-button {
	margin-left: 6px;
}

/* Een bolletje voor de status, in de kleuren van Tricura: groen is rond,
   mint loopt nog, roze is gestopt. Op een telefoon staat daar het etiket van de
   kolom, dus daar niet. */
@media (min-width: 601px) {
	.tricura-portaal .woocommerce-orders-table__cell-order-status::before {
		content: '';
		display: inline-block;
		width: 8px;
		height: 8px;
		margin-right: 9px;
		border-radius: 50%;
		background: var(--mint, #93C8AD);
		vertical-align: 1px;
	}

	.tricura-portaal .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status::before {
		background: var(--groen, #2E6E58);
	}

	.tricura-portaal .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status::before,
	.tricura-portaal .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status::before,
	.tricura-portaal .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status::before {
		background: var(--mint, #93C8AD);
	}

	.tricura-portaal .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status::before,
	.tricura-portaal .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status::before {
		background: var(--roze, #FECECC);
		box-shadow: inset 0 0 0 1px rgba(10, 55, 26, 0.25);
	}

	.tricura-portaal .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status::before {
		background: var(--tekst-zacht, #5C6B63);
	}
}

/* ---------- Formulieren in het portaal ---------- */

/* Een formulier over de volle breedte van het blad leest slecht: het oog moet
   te ver van het label naar het einde van het veld. 760 pixels, zoals een
   leeskolom op de rest van de site. */
.tricura-portaal .woocommerce-EditAccountForm,
.tricura-portaal .woocommerce-address-fields {
	max-width: 760px;
}

/* Voor- en achternaam naast elkaar, zoals de adresvelden al stonden. */
@media (min-width: 601px) {
	.tricura-portaal .woocommerce-EditAccountForm {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0 20px;
	}

	.tricura-portaal .woocommerce-EditAccountForm > * {
		grid-column: 1 / -1;
	}

	.tricura-portaal .woocommerce-EditAccountForm > .form-row-first {
		grid-column: 1;
	}

	.tricura-portaal .woocommerce-EditAccountForm > .form-row-last {
		grid-column: 2;
	}
}

/* ---------- Kleiner scherm: minder marge ---------- */

@media (max-width: 1200px) {
	.tricura-portaal {
		--portaal-zijbalk: 244px;
		--portaal-rand: 36px;
	}
}

/* ---------- Telefoon en smalle tablet: het menu wordt een lade ---------- */

@media (max-width: 860px) {
	.tricura-portaal {
		--portaal-rand: 20px;
	}

	.tricura-portaal .nav-inner {
		padding: 0 20px;
	}

	.portaal-app {
		display: block;
		padding-left: 0;
	}

	.portaal-blad {
		min-height: inherit;
		border: 0;
		border-radius: 0;
	}

	.portaal-blad__binnen {
		padding-top: 0;
		padding-bottom: 40px;
	}

	/* Zonder script: het menu staat gewoon boven de inhoud. */
	.tricura-portaal .portaal-menu {
		position: static;
		width: auto;
		border-bottom: 1px solid var(--lijn, #E2E8E4);
	}

	.portaal-menu__groepen {
		overflow: visible;
	}

	/* Met script: een lade die van links inschuift.

	   Sinds 18 september 2026 loopt ze door tot de bovenkant van het scherm in
	   plaats van tot onder de kop van de site. Ze schoof eerst onder de kop
	   vandaan, en dan bleef daar een strook van de pagina staan waar je nog op
	   kon duwen terwijl het menu openstond. De lade ligt boven de kop
	   (z-index 102 tegen 100), het scherm erachter ligt ertussenin.

	   Eén ding blijft erboven: de zwarte adminbalk van WordPress. Die staat op
	   z-index 99999 en is niet te overtreffen, dus de lade begint eronder.
	   WordPress zet zelf --wp-admin--admin-bar--height (32px, of 46px op een
	   smal scherm) en laadt die regel alleen als de balk er is; zonder balk
	   valt de variabele terug op 0 en begint de lade echt bovenaan. Dit raakt
	   dus alleen beheerders; een klant ziet die balk niet. */
	.portaal-js .tricura-portaal .portaal-menu {
		position: fixed;
		z-index: 102;
		top: var(--wp-admin--admin-bar--height, 0px);
		bottom: 0;
		left: 0;
		width: min(320px, 86vw);
		border-bottom: 0;
		border-top-right-radius: 0;
		box-shadow: var(--schaduw-lg, 0 24px 60px rgba(10, 55, 26, 0.13));
		visibility: hidden;
		transform: translateX(-104%);
		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s;
	}

	.portaal-js .portaal-menu-open .portaal-menu {
		visibility: visible;
		transform: none;
		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.portaal-js .portaal-menu__groepen {
		overflow-y: auto;
	}

	.portaal-js .portaal-menu__profiel {
		padding-right: 64px;
	}

	.portaal-js .portaal-menu__sluit {
		display: block;
	}

	.portaal-js .portaal-menu__sluit[hidden] {
		display: none;
	}

	.portaal-js .portaal-balk {
		position: sticky;
		z-index: 20;
		top: var(--portaal-top);
		display: block;
		margin: 0 calc(-1 * var(--portaal-rand)) 22px;
		padding: 10px var(--portaal-rand);
		border-bottom: 1px solid var(--lijn, #E2E8E4);
		background: rgba(255, 255, 255, 0.94);
		backdrop-filter: blur(10px);
	}

	.portaal-js .tricura-portaal .portaal-paginakop {
		margin-top: 0;
	}

	.portaal-schaduw {
		position: fixed;
		z-index: 101;
		inset: 0;
		background: rgba(10, 55, 26, 0.34);
		animation: portaal-schaduw-in 0.25s ease;
	}

	body.portaal-menu-open {
		overflow: hidden;
	}

	.portaal-voet {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Zonder script is er geen balk, dus het blad begint met wat lucht. */
@media (max-width: 860px) {
	html:not(.portaal-js) .portaal-blad__binnen {
		padding-top: 24px;
	}
}

@keyframes portaal-schaduw-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.portaal-js .tricura-portaal .portaal-menu,
	.portaal-js .portaal-menu-open .portaal-menu {
		transition: none;
	}

	.portaal-schaduw {
		animation: none;
	}
}

/* =========================================================================
   HET KLANTENPORTAAL, ZAKELIJK (16 september 2026)

   Feedback: het portaal oogde te speels. Pilvormige knoppen die bij hover
   omhoog zweefden, pastelvlakken, ronde labels, een oogje met een knoprand
   uit de jaren negentig. Hier wordt het rustiger, met alleen de kleuren van
   Tricura:

   - knoppen en velden: een hoek van 6px, geen beweging of schaduw bij hover;
   - kaders: een hoek van 8px, wit, met een dunne lijn;
   - labels en tellers: een hoek van 4px in plaats van een pil;
   - geen oranje of rood meer: wat loopt of wacht is mint, wat rond is groen,
     wat dringend is of gestopt is, is roze.

   Alles hangt aan .woocommerce-account, de klasse die WooCommerce op elke
   accountpagina zet: het portaal, inloggen, registreren en wachtwoord
   vergeten. De winkel en de rest van de site houden hun eigen vormtaal.
   ========================================================================= */

/* ---------- Knoppen ---------- */

.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button,
.woocommerce-account .portaal-knop {
	padding: 10px 20px;
	border: 1px solid var(--groen, #2E6E58);
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.35;
	box-shadow: none;
	transform: none;
}

.woocommerce-account .woocommerce a.button:hover,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce input.button:hover,
.woocommerce-account .portaal-knop:hover {
	border-color: var(--groen-dark, #245645);
	background: var(--groen-dark, #245645);
	color: var(--wit, #FFFFFF);
	box-shadow: none;
	transform: none;
}

.woocommerce-account .woocommerce a.button:focus-visible,
.woocommerce-account .woocommerce button.button:focus-visible,
.woocommerce-account .portaal-knop:focus-visible {
	outline: 2px solid var(--groen, #2E6E58);
	outline-offset: 2px;
}

/* De tweede knop op een scherm: wit met een lijn, zodat de hoofdknop de
   enige is die roept. */
.woocommerce-account .portaal-knop--zacht {
	border-color: var(--lijn, #E2E8E4);
	background: var(--wit, #FFFFFF);
	color: var(--donkergroen, #0A371A);
}

.woocommerce-account .portaal-knop--zacht:hover {
	border-color: var(--groen, #2E6E58);
	background: var(--mint-soft, #F1F8F4);
	color: var(--groen, #2E6E58);
}

.woocommerce-account .portaal-knop--klein {
	padding: 7px 14px;
	font-size: 0.84rem;
}

/* De knop in elke rij van Bestellingen is een tweede knop. */
.woocommerce-account .woocommerce-orders-table .woocommerce-button.button {
	padding: 6px 14px;
	border-color: var(--lijn, #E2E8E4);
	background: var(--wit, #FFFFFF);
	color: var(--donkergroen, #0A371A);
	font-size: 0.84rem;
}

.woocommerce-account .woocommerce-orders-table .woocommerce-button.button:hover {
	border-color: var(--groen, #2E6E58);
	background: var(--mint-soft, #F1F8F4);
	color: var(--groen, #2E6E58);
}

/* De knoppen in de sitekop, alleen op de accountpagina's: daar hoort de kop
   bij het portaal, dat al een eigen, volle breedte en kleur heeft. */
.woocommerce-account .nav-menu a {
	border-radius: 6px;
}

/* In een filterrij even hoog als de velden ernaast. */
.woocommerce-account .portaal-filters .portaal-knop {
	align-self: stretch;
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* ---------- Velden ---------- */

.woocommerce-account :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], input[type="url"], textarea, select),
.woocommerce-account .select2-container .select2-selection--single {
	border-radius: 6px;
}

/* ---------- Kaders ---------- */

.woocommerce-account :is(.portaal-paneel, .portaal-stat, .portaal-tegel, .tricura-teller, .tricura-extern-form, .beheer__schakelgroep, .woocommerce-Address, fieldset) {
	border-radius: 8px;
}

.woocommerce-account :is(.portaal-inorde, .portaal-actie, .portaal-let-op, .beheer__melding, .tricura-uitleg--wacht, .tricura-ingeschreven, .tricura-annulatie, .woocommerce-message, .woocommerce-info, .woocommerce-error) {
	border-radius: 6px;
}

/* Niets zweeft meer omhoog bij hover: een lijn in groen zegt genoeg. */
.woocommerce-account .portaal-tegel:hover,
.woocommerce-account a.portaal-stat:hover {
	border-color: var(--groen, #2E6E58);
	box-shadow: none;
	transform: none;
}

/* Het blok met de ring is wit, net als de andere blokken. */
.woocommerce-account .portaal-paneel--nadruk {
	border-color: var(--lijn, #E2E8E4);
	background: var(--wit, #FFFFFF);
}

.woocommerce-account .portaal-ring {
	width: 148px;
}

.woocommerce-account .portaal-ring__baan {
	stroke: var(--mint-soft, #F1F8F4);
	stroke-width: 9;
}

.woocommerce-account .portaal-ring__vulling {
	stroke-width: 9;
	stroke-linecap: butt;
}

.woocommerce-account .portaal-paneel--zacht {
	background: var(--mint-soft, #F1F8F4);
}

/* ---------- Labels, tellers en balkjes ---------- */

.woocommerce-account :is(.portaal-volgend__aftellen, .beheer__stand, .tricura-stand, .tricura-aantal) {
	border-radius: 4px;
}

.woocommerce-account .beheer__aantal {
	border-radius: 6px;
	background: var(--mint-soft, #F1F8F4);
}

.woocommerce-account :is(.portaal-stat__balk, .portaal-stat__balk span, .tricura-teller__balk, .tricura-teller__vulling) {
	border-radius: 2px;
}

.woocommerce-account .portaal-volgend__aftellen {
	padding: 4px 9px;
	background: var(--mint-soft, #F1F8F4);
	color: var(--groen, #2E6E58);
	font-size: 0.8rem;
}

/* ---------- Wat er nog moet gebeuren ---------- */

/* Witte regels met een streep links: mint voor gewoon, donkergroen voor
   dringend, en dan staat het woord Dringend er ook bij. Kleur alleen is geen
   boodschap. */
.woocommerce-account .portaal-acties {
	gap: 8px;
}

.woocommerce-account .portaal-actie {
	padding: 14px 16px 14px 18px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-left: 3px solid var(--mint, #93C8AD);
	background: var(--wit, #FFFFFF);
}

.woocommerce-account .portaal-actie--dringend {
	border-left-color: var(--donkergroen, #0A371A);
	background: var(--wit, #FFFFFF);
}

/* Drie klassen: .portaal-actie__tekst span (0,1,1) maakt elke span anders een
   blok in de zachte tekstkleur. */
.portaal-actie .portaal-actie__tekst .portaal-actie__label {
	display: inline-block;
	margin: 0 0 5px;
	padding: 2px 7px;
	border-radius: 4px;
	background: var(--roze, #FECECC);
	color: var(--donkergroen, #0A371A);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
}

.woocommerce-account .portaal-let-op {
	border-left: 3px solid var(--roze, #FECECC);
}

/* ---------- Cijfers ---------- */

.woocommerce-account .portaal-stat--let-op .portaal-stat__balk span {
	background: var(--mint, #93C8AD);
}

.woocommerce-account .portaal-stat--let-op .portaal-stat__bij {
	color: var(--tekst-zacht, #5C6B63);
}

.woocommerce-account .portaal-stat--actie {
	border-color: var(--roze, #FECECC);
	background: var(--wit, #FFFFFF);
}

.woocommerce-account .portaal-stat--actie .portaal-stat__balk span {
	background: var(--donkergroen, #0A371A);
}

/* ---------- Standen ---------- */

.woocommerce-account .beheer__stand--nieuw,
.woocommerce-account .beheer__stand--nazicht {
	background: var(--roze, #FECECC);
	color: var(--donkergroen, #0A371A);
}

.woocommerce-account .beheer__stand--opgenomen,
.woocommerce-account .beheer__stand--afspraak,
.woocommerce-account .beheer__stand--verzonden,
.woocommerce-account .tricura-stand--nazicht,
.woocommerce-account .tricura-stand--wacht {
	background: var(--mint-soft, #F1F8F4);
	color: var(--groen, #2E6E58);
	box-shadow: inset 0 0 0 1px var(--mint, #93C8AD);
}

/* ---------- Meldingen ---------- */

.woocommerce-account .beheer__melding--goed,
.woocommerce-account .woocommerce-message {
	border-left: 3px solid var(--groen, #2E6E58);
	background: var(--mint-soft, #F1F8F4);
	color: var(--donkergroen, #0A371A);
}

.woocommerce-account .beheer__melding--let-op,
.woocommerce-account .woocommerce-info,
.woocommerce-account .tricura-uitleg--wacht {
	border-left: 3px solid var(--mint, #93C8AD);
	background: var(--mint-soft, #F1F8F4);
	color: var(--donkergroen, #0A371A);
}

.woocommerce-account .beheer__melding--fout,
.woocommerce-account .woocommerce-error {
	border: none;
	border-left: 3px solid var(--roze, #FECECC);
	background: var(--roze-soft, #FFF3F2);
	color: var(--donkergroen, #0A371A);
}

/* ---------- Het oogje bij het wachtwoord ---------- */

/*
 * Een knop zonder eigen rand, rechts in het veld, met een oog dat een
 * doorgestreept oog wordt zodra het wachtwoord zichtbaar is. Het icoon is een
 * masker in de tekstkleur, zodat het meekleurt bij hover en focus.
 */
.woocommerce-account .password-input {
	position: relative;
	display: block;
	width: 100%;
}

.woocommerce-account .show-password-input {
	position: absolute;
	top: 50%;
	right: 5px;
	display: block;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--tekst-zacht, #5C6B63);
	opacity: 1;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background var(--transitie, 0.25s ease), color var(--transitie, 0.25s ease);
}

.woocommerce-account .show-password-input::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce-account .show-password-input.display-password::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.1A10.4 10.4 0 0 1 12 5c6.4 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2'/%3E%3Cpath d='M6.6 6.6C3.9 8.3 2 12 2 12s3.6 7 10 7c1.9 0 3.6-.6 5-1.5'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.1A10.4 10.4 0 0 1 12 5c6.4 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2'/%3E%3Cpath d='M6.6 6.6C3.9 8.3 2 12 2 12s3.6 7 10 7c1.9 0 3.6-.6 5-1.5'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
}

.woocommerce-account .show-password-input:hover,
.woocommerce-account .show-password-input.display-password {
	background: var(--mint-soft, #F1F8F4);
	color: var(--groen, #2E6E58);
}

.woocommerce-account .show-password-input:focus-visible {
	outline: 2px solid var(--groen, #2E6E58);
	outline-offset: 0;
}

.woocommerce-account .password-input input.input-text {
	padding-right: 48px;
}

/* ---------- Inloggen, registreren, wachtwoord vergeten ---------- */

/*
 * Eén kader in het midden: links het formulier, rechts in het groen wat je in
 * het portaal vindt. Zie templates/pagina-inloggen.php.
 */
.tricura-auth {
	padding: 56px 0 96px;
	background: var(--mint-soft, #F1F8F4);
}

.tricura-auth__kader {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	max-width: 980px;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 12px;
	background: var(--wit, #FFFFFF);
	box-shadow: 0 1px 3px rgba(10, 55, 26, 0.05);
}

.tricura-auth__formulier {
	min-width: 0;
	padding: 48px 56px 44px;
}

.tricura-auth .tricura-auth__titel {
	margin: 0 0 8px;
	font-family: var(--font-titel, sans-serif);
	font-size: clamp(1.7rem, 1.4rem + 0.9vw, 2.1rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--donkergroen, #0A371A);
}

.tricura-auth__lead {
	margin: 0 0 28px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--tekst-zacht, #5C6B63);
}

.tricura-auth__zijde {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 48px 44px 40px;
	background: var(--groen, #2E6E58);
	color: var(--wit, #FFFFFF);
}

.tricura-auth__boven {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.tricura-auth__kop {
	margin: -12px 0 0;
	font-family: var(--font-titel, sans-serif);
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wit, #FFFFFF);
}

.tricura-auth__lijst {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tricura-auth__lijst li {
	position: relative;
	padding-left: 30px;
	font-size: 0.92rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
}

.tricura-auth__lijst li::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2393C8AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 10.5 3.2 3.2L15 6.8'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.tricura-auth__hulp {
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.88rem;
}

.tricura-auth__hulp p {
	margin: 0 0 6px;
	color: rgba(255, 255, 255, 0.72);
}

.tricura-auth__hulp ul {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tricura-auth__hulp a {
	color: var(--wit, #FFFFFF);
	font-weight: 500;
	text-decoration: none;
}

.tricura-auth__hulp a:hover {
	color: var(--wit, #FFFFFF);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Het groene vlak vult de hoogte tot de footer, zodat er op een hoog scherm
   geen witte strook onder de footer blijft hangen. De kop staat vast en telt
   niet mee in deze kolom. */
.woocommerce-account.tricura-inloggen,
.woocommerce-account.tricura-registreren {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.woocommerce-account.tricura-inloggen #hoofdinhoud,
.woocommerce-account.tricura-registreren #hoofdinhoud {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
}

.woocommerce-account.tricura-inloggen .tricura-auth,
.woocommerce-account.tricura-registreren .tricura-auth {
	flex: 1 0 auto;
}

/* Het oude kaartje rond het formulier valt weg: het kader doet dat werk. */
.tricura-auth #customer_login {
	max-width: none;
}

.tricura-auth #customer_login .u-column1,
.tricura-auth #customer_login .u-column2 {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.tricura-auth .tricura-shop {
	color: var(--tekst, #1E2B24);
}

/*
 * Het inlogformulier: Onthouden links en Wachtwoord vergeten rechts op één
 * regel, en daaronder de knop over de volle breedte. Zo staat de link niet
 * meer tegen de knop aan.
 *
 * WooCommerce zet het vinkje en de knop samen in één alinea. Die alinea
 * verdwijnt uit het raster (display: contents), zodat het vinkje en de knop
 * elk hun eigen plek krijgen. Wat na de link komt, zoals "Nog geen account?",
 * schuift via order naar achteren.
 */
.tricura-auth .woocommerce-form-login {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 16px;
}

.tricura-auth .woocommerce-form-login > * {
	grid-column: 1 / -1;
}

.tricura-auth .woocommerce-form-login > p.form-row:not(.woocommerce-form-row) {
	display: contents;
}

/* Met label en form erbij: .woocommerce form .form-row label (0,2,2) van
   WooCommerce maakt het label anders een blok. */
.tricura-auth form.woocommerce-form-login label.woocommerce-form-login__rememberme {
	display: inline-flex;
	grid-column: 1;
	order: 1;
	align-items: center;
	gap: 9px;
	margin: 2px 0 0;
	font-size: 0.9rem;
	cursor: pointer;
}

.tricura-auth .woocommerce-form-login__rememberme input[type="checkbox"] {
	margin: 0;
}

.tricura-auth .woocommerce-form-login > .woocommerce-LostPassword {
	grid-column: 2;
	order: 2;
	margin: 2px 0 0;
	font-size: 0.88rem;
	text-align: right;
}

.tricura-auth .woocommerce-form-login button.woocommerce-form-login__submit {
	grid-column: 1 / -1;
	order: 3;
	width: 100%;
	margin-top: 26px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.tricura-auth .woocommerce-form-login > .woocommerce-LostPassword ~ * {
	order: 4;
}

.tricura-auth .woocommerce-LostPassword a,
.tricura-auth .tricura-wissel a {
	color: var(--groen, #2E6E58);
	font-weight: 500;
	text-decoration: none;
}

.tricura-auth .woocommerce-LostPassword a:hover,
.tricura-auth .tricura-wissel a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tricura-auth .tricura-wissel {
	margin: 28px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--lijn, #E2E8E4);
	font-size: 0.9rem;
	text-align: center;
}

/* Voornaam en achternaam naast elkaar op het registratieformulier. */
@media (min-width: 601px) {
	.tricura-auth .tricura-naamvelden {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0 16px;
	}
}

/* Registreren en wachtwoord vergeten: de knop ook over de volle breedte. */
.tricura-auth .woocommerce-form-register button.woocommerce-form-register__submit,
.tricura-auth .woocommerce-ResetPassword button.button {
	width: 100%;
	padding-top: 12px;
	padding-bottom: 12px;
}

.tricura-auth .woocommerce-ResetPassword > p:first-child {
	margin: 0 0 22px;
	color: var(--tekst-zacht, #5C6B63);
}

@media (max-width: 860px) {
	.tricura-auth {
		padding: 28px 0 56px;
	}

	.tricura-auth__kader {
		grid-template-columns: minmax(0, 1fr);
	}

	.tricura-auth__formulier {
		padding: 32px 24px 28px;
	}

	.tricura-auth__zijde {
		padding: 28px 24px;
	}
}

@media (max-width: 380px) {
	/* Te smal voor twee dingen naast elkaar: Wachtwoord vergeten eronder. */
	.tricura-auth .woocommerce-form-login > .woocommerce-LostPassword {
		grid-column: 1 / -1;
		margin-top: 12px;
		text-align: left;
	}
}

/* =========================================================================
   ONBOARDING EN DOSSIER (17 september 2026)

   Het tabblad Mijn dossier: de stappenrij, de vier delen van het dossier als
   kaarten, de documenten met hun stand, en de formulieren per deel. Dezelfde
   zakelijke vormtaal als de rest van het portaal. Zie includes/onboarding.php,
   dossier.php en documenten.php.
   ========================================================================= */

/* ---------- De stappenrij ---------- */

.onboarding-stappen {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px 12px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.onboarding-stap {
	position: relative;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px 12px 12px 10px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 6px;
	background: var(--wit, #FFFFFF);
}

.onboarding-stap__bol {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 50%;
	background: var(--wit, #FFFFFF);
	color: var(--tekst-zacht, #5C6B63);
	font-size: 0.74rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.onboarding-stap__bol svg {
	width: 14px;
	height: 14px;
}

.onboarding-stap__tekst {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.onboarding-stap__tekst strong {
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--donkergroen, #0A371A);
}

.onboarding-stap__tekst span {
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--tekst-zacht, #5C6B63);
}

.onboarding-stap--klaar {
	border-color: var(--mint, #93C8AD);
	background: var(--mint-soft, #F1F8F4);
}

.onboarding-stap--klaar .onboarding-stap__bol {
	border-color: var(--groen, #2E6E58);
	background: var(--groen, #2E6E58);
	color: var(--wit, #FFFFFF);
}

.onboarding-stap--bezig {
	border-color: var(--groen, #2E6E58);
	box-shadow: inset 3px 0 0 var(--groen, #2E6E58);
}

.onboarding-stap--bezig .onboarding-stap__bol {
	border-color: var(--groen, #2E6E58);
	color: var(--groen, #2E6E58);
}

.onboarding-stap--komt .onboarding-stap__tekst strong {
	color: var(--tekst-zacht, #5C6B63);
	font-weight: 500;
}

/* De compacte versie op het overzicht: acht kleine stappen op één rij. */
.onboarding-stappen--compact {
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 6px;
	margin-bottom: 16px;
}

.onboarding-stappen--compact .onboarding-stap {
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 6px;
	text-align: center;
}

.onboarding-stappen--compact .onboarding-stap__bol {
	width: 22px;
	height: 22px;
	font-size: 0.68rem;
}

.onboarding-stappen--compact .onboarding-stap__tekst strong {
	font-size: 0.72rem;
	font-weight: 500;
}

.onboarding-overzicht__stand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
}

.onboarding-overzicht__teller {
	margin: 0;
	font-family: var(--font-titel, sans-serif);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--donkergroen, #0A371A);
}

.onboarding-overzicht__volgende {
	flex: 1 1 16rem;
	margin: 0;
	font-size: 0.9rem;
	color: var(--tekst-zacht, #5C6B63);
}

/* ---------- Blokken op het tabblad ---------- */

.dossier-blok {
	margin: 0 0 32px;
}

.dossier-blok__teller {
	margin-left: 10px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tekst-zacht, #5C6B63);
}

.dossier-secties {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.dossier-sectie {
	display: flex;
	flex-direction: column;
	padding: 18px 20px 20px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 8px;
	background: var(--wit, #FFFFFF);
}

.dossier-sectie--open {
	border-left: 3px solid var(--mint, #93C8AD);
}

.dossier-sectie__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin-bottom: 12px;
}

.dossier-sectie__kop h4 {
	margin: 0;
	font-family: var(--font-titel, sans-serif);
	font-size: 1rem;
	font-weight: 600;
	color: var(--donkergroen, #0A371A);
}

.dossier-sectie__stand {
	font-size: 0.78rem;
	color: var(--tekst-zacht, #5C6B63);
}

.dossier-sectie__lijst {
	display: grid;
	gap: 6px;
	margin: 0 0 16px;
	font-size: 0.88rem;
}

.dossier-sectie__regel {
	display: grid;
	grid-template-columns: minmax(8rem, 40%) minmax(0, 1fr);
	gap: 12px;
	padding: 5px 0;
	border-bottom: 1px solid var(--mint-soft, #F1F8F4);
}

.dossier-sectie__regel dt {
	color: var(--tekst-zacht, #5C6B63);
}

.dossier-sectie__regel dd {
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--tekst, #1E2B24);
}

.dossier-sectie__regel--leeg dd {
	color: var(--groen, #2E6E58);
	font-style: italic;
}

.dossier-sectie .portaal-knop {
	margin-top: auto;
}

.dossier-sectie__lijst--invulvelden {
	max-width: 760px;
}

.dossier-sectie__lijst--invulvelden code {
	font-size: 0.84rem;
	color: var(--groen, #2E6E58);
}

/* ---------- Documenten ---------- */

.dossier-documenten {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dossier-document {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding: 14px 16px 14px 18px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-left: 3px solid var(--mint, #93C8AD);
	border-radius: 6px;
	background: var(--wit, #FFFFFF);
}

.dossier-document--goedgekeurd { border-left-color: var(--groen, #2E6E58); }
.dossier-document--nazicht { border-left-color: var(--mint, #93C8AD); }
.dossier-document--ontbreekt { border-left-color: var(--lijn, #E2E8E4); }
.dossier-document--afgekeurd,
.dossier-document--vervallen { border-left-color: var(--donkergroen, #0A371A); }

.dossier-document__tekst {
	display: flex;
	flex: 1 1 18rem;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.dossier-document__tekst strong {
	font-weight: 600;
	color: var(--donkergroen, #0A371A);
}

.dossier-document__tekst .tricura-stand {
	align-self: flex-start;
}

.dossier-document__uitleg,
.dossier-document__meta,
.dossier-document__reden {
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--tekst-zacht, #5C6B63);
}

.dossier-document__reden {
	color: var(--donkergroen, #0A371A);
}

.dossier-document__upload {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.dossier-document__upload input[type="file"] {
	max-width: 16rem;
	font-size: 0.82rem;
}

.dossier-document__beoordeling {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	flex: 1 1 100%;
	padding-top: 10px;
	border-top: 1px solid var(--mint-soft, #F1F8F4);
}

.dossier-document__keuren {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.dossier-document__keuren label {
	margin: 0;
	font-size: 0.84rem;
}

.dossier-document__keuren input[type="date"],
.dossier-document__keuren input[type="text"] {
	width: auto;
	min-width: 12rem;
	padding: 7px 10px;
}

.tricura-stand--ontbreekt { background: var(--mint-soft, #F1F8F4); color: var(--tekst-zacht, #5C6B63); }
.tricura-stand--vervalt-binnenkort { background: var(--mint-soft, #F1F8F4); color: var(--groen, #2E6E58); box-shadow: inset 0 0 0 1px var(--mint, #93C8AD); }
.tricura-stand--vervallen { background: var(--roze, #FECECC); color: var(--donkergroen, #0A371A); }

/* De stap van een onboarding in het beheer. */
.beheer__stand--gegevens-aanvullen,
.beheer__stand--formule-gekozen,
.beheer__stand--portaal-actief { background: var(--mint-soft, #F1F8F4); color: var(--groen, #2E6E58); }
.beheer__stand--dossier-volledig { background: var(--roze, #FECECC); color: var(--donkergroen, #0A371A); }
.beheer__stand--dossier-gecontroleerd,
.beheer__stand--contract-gegenereerd,
.beheer__stand--contract-getekend { background: var(--groen-light, #E8F1ED); color: var(--groen, #2E6E58); }
.beheer__stand--implementatie-gestart { background: var(--groen, #2E6E58); color: var(--wit, #FFFFFF); }

/* ---------- Het verloop ---------- */

.dossier-verloop {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.86rem;
}

.dossier-verloop li {
	display: grid;
	grid-template-columns: minmax(9rem, auto) minmax(0, 1fr);
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--mint-soft, #F1F8F4);
}

.dossier-verloop__tijd {
	color: var(--tekst-zacht, #5C6B63);
	font-variant-numeric: tabular-nums;
}

.dossier-verloop em {
	font-style: normal;
	color: var(--tekst-zacht, #5C6B63);
}

/* ---------- Het formulier van een deel ---------- */

.dossier-formulier {
	max-width: 760px;
}

.dossier-velden {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 20px;
}

.dossier-veld {
	margin: 0 0 16px;
}

.dossier-veld--breed {
	grid-column: 1 / -1;
}

.dossier-veld label {
	display: block;
	margin-bottom: 5px;
	font-size: 0.86rem;
	font-weight: 500;
}

.dossier-veld input,
.dossier-veld select,
.dossier-veld textarea {
	width: 100%;
}

.dossier-veld__vast {
	display: block;
	padding: 10px 0;
	color: var(--tekst, #1E2B24);
}

.dossier-veld__hulp {
	display: block;
	margin-top: 5px;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--tekst-zacht, #5C6B63);
}

.dossier-veld__hulp--bewaard {
	color: var(--groen, #2E6E58);
}

.dossier-formulier__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0 0;
}

.documentsoorten input[type="text"] {
	width: 100%;
	min-width: 10rem;
}

.documentsoorten select[multiple] {
	min-width: 10rem;
	font-size: 0.84rem;
}

@media (max-width: 860px) {
	.onboarding-stappen,
	.dossier-secties {
		grid-template-columns: minmax(0, 1fr);
	}

	.onboarding-stappen--compact {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.dossier-velden {
		grid-template-columns: minmax(0, 1fr);
	}

	.dossier-document__upload input[type="file"] {
		max-width: 100%;
	}
}

/* =========================================================================
   DE WINKEL, ZAKELIJK (17 september 2026)

   Dezelfde vormtaal als het portaal, nu ook voor het aanbod, de productpagina,
   het winkelwagentje, de kassa en de bedankpagina: hoeken van 6px voor knoppen
   en velden, 8px voor kaders, 4px voor labels, niets dat zweeft bij hover, en
   alleen de kleuren van Tricura. De kop en de footer van de site blijven wat
   ze zijn: die horen bij de hele site, niet bij de winkel.

   Alles hangt aan .tricura-winkel zónder .woocommerce-account. Het portaal
   heeft zijn eigen laag hierboven; zo overlappen de twee elkaar niet.
   ========================================================================= */

/* ---------- Knoppen ---------- */

.tricura-winkel:not(.woocommerce-account) .woocommerce a.button,
.tricura-winkel:not(.woocommerce-account) .woocommerce button.button,
.tricura-winkel:not(.woocommerce-account) .woocommerce input.button,
.tricura-winkel:not(.woocommerce-account) .woocommerce a.button.alt,
.tricura-winkel:not(.woocommerce-account) .woocommerce button.button.alt,
.tricura-winkel:not(.woocommerce-account) .woocommerce input.button.alt,
.tricura-winkel:not(.woocommerce-account) .woocommerce-page a.button,
.tricura-winkel:not(.woocommerce-account) .woocommerce-page button.button,
.tricura-winkel:not(.woocommerce-account) .woocommerce-page input.button,
.tricura-winkel:not(.woocommerce-account) .woocommerce-page a.button.alt,
.tricura-winkel:not(.woocommerce-account) .woocommerce-page button.button.alt,
.tricura-winkel:not(.woocommerce-account) .woocommerce-page input.button.alt,
.tricura-winkel:not(.woocommerce-account) .portaal-knop {
	padding: 11px 22px;
	border: 1px solid var(--groen, #2E6E58);
	border-radius: 6px;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.35;
	box-shadow: none;
	transform: none;
}

.tricura-winkel:not(.woocommerce-account) .woocommerce a.button:hover,
.tricura-winkel:not(.woocommerce-account) .woocommerce button.button:hover,
.tricura-winkel:not(.woocommerce-account) .woocommerce input.button:hover,
.tricura-winkel:not(.woocommerce-account) .woocommerce a.button.alt:hover,
.tricura-winkel:not(.woocommerce-account) .woocommerce button.button.alt:hover,
.tricura-winkel:not(.woocommerce-account) .woocommerce input.button.alt:hover,
.tricura-winkel:not(.woocommerce-account) .woocommerce-page a.button:hover,
.tricura-winkel:not(.woocommerce-account) .woocommerce-page button.button:hover,
.tricura-winkel:not(.woocommerce-account) .woocommerce-page input.button:hover,
.tricura-winkel:not(.woocommerce-account) .woocommerce-page a.button.alt:hover,
.tricura-winkel:not(.woocommerce-account) .woocommerce-page button.button.alt:hover,
.tricura-winkel:not(.woocommerce-account) .woocommerce-page input.button.alt:hover,
.tricura-winkel:not(.woocommerce-account) .portaal-knop:hover {
	border-color: var(--groen-dark, #245645);
	background: var(--groen-dark, #245645);
	color: var(--wit, #FFFFFF);
	box-shadow: none;
	transform: none;
}

.tricura-winkel:not(.woocommerce-account) .woocommerce a.button:focus-visible,
.tricura-winkel:not(.woocommerce-account) .woocommerce button.button:focus-visible,
.tricura-winkel:not(.woocommerce-account) .woocommerce input.button:focus-visible {
	outline: 2px solid var(--groen, #2E6E58);
	outline-offset: 2px;
}

/* De tweede knop: wit met een lijn, zodat de hoofdknop de enige is die roept. */
.tricura-winkel:not(.woocommerce-account) .woocommerce button.button[name="update_cart"],
.tricura-winkel:not(.woocommerce-account) .woocommerce button.button[name="apply_coupon"],
.tricura-winkel:not(.woocommerce-account) .woocommerce a.button.wc-backward,
.tricura-winkel:not(.woocommerce-account) .woocommerce-page a.button.wc-backward,
.tricura-winkel:not(.woocommerce-account) .portaal-knop--zacht {
	border-color: var(--lijn, #E2E8E4);
	background: var(--wit, #FFFFFF);
	color: var(--donkergroen, #0A371A);
}

.tricura-winkel:not(.woocommerce-account) .woocommerce button.button[name="update_cart"]:hover,
.tricura-winkel:not(.woocommerce-account) .woocommerce button.button[name="apply_coupon"]:hover,
.tricura-winkel:not(.woocommerce-account) .woocommerce a.button.wc-backward:hover,
.tricura-winkel:not(.woocommerce-account) .woocommerce-page a.button.wc-backward:hover,
.tricura-winkel:not(.woocommerce-account) .portaal-knop--zacht:hover {
	border-color: var(--groen, #2E6E58);
	background: var(--mint-soft, #F1F8F4);
	color: var(--groen, #2E6E58);
}

.tricura-winkel:not(.woocommerce-account) .woocommerce button.button:disabled,
.tricura-winkel:not(.woocommerce-account) .woocommerce button.button:disabled[disabled] {
	transform: none;
	box-shadow: none;
}

/* De knop die de bestelling plaatst: even rustig, maar wel op volle breedte. */
.tricura-winkel:not(.woocommerce-account) .woocommerce #payment #place_order,
.tricura-winkel:not(.woocommerce-account) .woocommerce-page #payment #place_order {
	padding: 13px 22px;
	border-radius: 6px;
	font-size: 0.95rem;
	box-shadow: none;
	transform: none;
}

/* ---------- Velden ---------- */

.tricura-winkel:not(.woocommerce-account) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], input[type="url"], textarea, select),
.tricura-winkel:not(.woocommerce-account) .select2-container .select2-selection--single {
	border-radius: 6px;
}

.tricura-winkel:not(.woocommerce-account) .select2-container--default .select2-selection--single {
	transform: none;
}

/* ---------- Kaders ---------- */

.tricura-winkel:not(.woocommerce-account) :is(
	.woocommerce ul.products li.product,
	.woocommerce div.product .woocommerce-product-gallery,
	.woocommerce div.product div.images img,
	.woocommerce-cart .cart-collaterals .cart_totals,
	.woocommerce-checkout form.checkout #order_review,
	.woocommerce-checkout .checkout_coupon,
	.woocommerce-order .woocommerce-thankyou-order-received,
	.tricura-teller,
	.tricura-beeld,
	.tricura-opl-info,
	.tricura-annulatie,
	.tricura-ingeschreven,
	.tricura-leegmandje,
	.tricura-extern-form,
	fieldset
) {
	border-radius: 8px;
}

.tricura-winkel:not(.woocommerce-account) :is(
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error,
	.woocommerce-notices-wrapper > div,
	.tricura-uitleg--wacht,
	.woocommerce-form-coupon-toggle .woocommerce-info,
	.woocommerce-form-login-toggle .woocommerce-info
) {
	border-radius: 6px;
}

/* De kaart van een opleiding blijft staan waar ze staat: een lijn in groen
   zegt genoeg. */
.tricura-winkel:not(.woocommerce-account) .woocommerce ul.products li.product:hover {
	border-color: var(--groen, #2E6E58);
	box-shadow: none;
	transform: none;
}

.tricura-winkel:not(.woocommerce-account) .woocommerce ul.products li.product img {
	border-radius: 6px;
}

/* Het beeld bij een opleiding zonder foto, en het icoon erin. */
.tricura-winkel:not(.woocommerce-account) .tricura-beeld__icoon {
	border-radius: 6px;
}

/* De tabbladen op de productpagina (als WooCommerce ze toont). */
.tricura-winkel:not(.woocommerce-account) .woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-radius: 6px;
}

/* ---------- Labels en tellers ---------- */

.tricura-winkel:not(.woocommerce-account) :is(.tricura-aantal, .tricura-stand, .tricura-aantal-vast) {
	border-radius: 4px;
}

/* Het cijfer bij Winkelwagen in de sitekop blijft een klein rondje: dat is
   een teller, geen knop. */

/* ---------- Geen rood meer ---------- */

.tricura-winkel:not(.woocommerce-account) .woocommerce-error {
	border-left: 3px solid var(--roze, #FECECC);
	color: var(--donkergroen, #0A371A);
}

.tricura-winkel:not(.woocommerce-account) .woocommerce a.remove {
	border-radius: 4px;
}

.tricura-winkel:not(.woocommerce-account) .woocommerce a.remove:hover {
	background: var(--roze, #FECECC);
	color: var(--donkergroen, #0A371A) !important;
}

/* ---------- De kop van de pagina ---------- */

/* Dezelfde knop in de sitekop als op de rest van de site: die blijft. Alleen
   de meldingen onder de kop mogen niet meer zweven. */
.tricura-winkel:not(.woocommerce-account) .woocommerce-message,
.tricura-winkel:not(.woocommerce-account) .woocommerce-info {
	box-shadow: none;
}

/* =========================================================================
   BERICHTEN (17 september 2026)

   Vragen van de klant aan Tricura: een lijst, een formulier en een draad.
   Dezelfde vormtaal als de rest van het portaal: hoeken van 6 en 8px, alleen
   de kleuren van Tricura. Een bericht van de klant is wit met een lijn, een
   bericht van Tricura staat op mint met een groene rand links.
   ========================================================================= */

.berichten-kop {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}

.berichten-kop .portaal-uitleg {
	margin: 0;
	max-width: 60ch;
}

.berichten-kop .portaal-knop {
	flex-shrink: 0;
	margin: 0;
}

.berichten-terug {
	margin: 0 0 16px;
	font-size: 0.88rem;
}

.berichten-terug a {
	color: var(--groen, #2E6E58);
	text-decoration: none;
}

.berichten-terug a:hover {
	text-decoration: underline;
}

/* ---------- De lijst ---------- */

.berichten-lijst {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 8px;
	background: var(--wit, #FFFFFF);
}

.berichten-lijst__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-top: 1px solid var(--lijn, #E2E8E4);
}

.berichten-lijst__item:first-child {
	border-top: 0;
}

.berichten-lijst__link {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	color: var(--donkergroen, #0A371A);
	text-decoration: none;
}

.berichten-lijst__link:hover .berichten-lijst__titel {
	color: var(--groen, #2E6E58);
	text-decoration: underline;
}

.berichten-lijst__titel {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.berichten-lijst__meta {
	font-size: 0.82rem;
	color: var(--tekst-zacht, #5C6B63);
}

.berichten-lijst__item .tricura-stand {
	flex-shrink: 0;
}

/* ---------- Eén vraag ---------- */

.vraag-kop {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.vraag-kop__titel {
	margin: 0 0 4px;
	font-size: 1.2rem;
	line-height: 1.3;
}

.vraag-kop__meta {
	margin: 0;
	font-size: 0.85rem;
	color: var(--tekst-zacht, #5C6B63);
}

.bericht-draad {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.bericht {
	max-width: 80ch;
	padding: 14px 18px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 8px;
	background: var(--wit, #FFFFFF);
}

.bericht--tricura {
	border-left: 3px solid var(--groen, #2E6E58);
	background: var(--mint-soft, #F1F8F4);
}

.bericht--van-mij {
	align-self: flex-end;
}

.bericht__kop {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 6px;
	font-size: 0.85rem;
	color: var(--tekst-zacht, #5C6B63);
}

.bericht__kop strong {
	color: var(--donkergroen, #0A371A);
}

.bericht__tekst p {
	margin: 0 0 0.6em;
	font-size: 0.95rem;
	line-height: 1.6;
}

.bericht__tekst p:last-child {
	margin-bottom: 0;
}

.bericht__bijlage {
	margin: 10px 0 0;
	font-size: 0.85rem;
}

.bericht__bijlage a {
	color: var(--groen, #2E6E58);
}

/* ---------- Formulieren ---------- */

.berichten-formulier {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 20px;
	max-width: 80ch;
	padding: 20px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 8px;
	background: var(--wit, #FFFFFF);
}

.berichten-formulier--antwoord {
	margin-top: 8px;
}

.berichten-formulier .dossier-veld--breed,
.berichten-formulier__knoppen {
	grid-column: 1 / -1;
}

.berichten-formulier__knoppen {
	display: flex;
	gap: 10px;
	margin: 8px 0 0;
}

.berichten-formulier__vinkje label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
}

.berichten-formulier__vinkje input {
	margin: 0;
}

.berichten-stand {
	margin-top: 12px;
}

@media (max-width: 720px) {
	.berichten-kop,
	.vraag-kop,
	.berichten-lijst__item {
		flex-direction: column;
		align-items: flex-start;
	}

	.berichten-formulier {
		grid-template-columns: 1fr;
	}

	.bericht--van-mij {
		align-self: stretch;
	}
}

/* =========================================================================
   KENNISBANK (17 september 2026)

   Zoeken, thema's, kaarten en één artikel voluit. Dezelfde vormtaal als de
   rest van het portaal.
   ========================================================================= */

.kennis-zoek {
	display: flex;
	gap: 10px;
	max-width: 70ch;
	margin-bottom: 16px;
}

.kennis-zoek input[type="search"] {
	flex: 1;
	min-width: 0;
}

.kennis-zoek .portaal-knop {
	flex-shrink: 0;
	margin: 0;
}

.kennis-themas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.kennis-themas a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 6px;
	background: var(--wit, #FFFFFF);
	color: var(--donkergroen, #0A371A);
	font-size: 0.84rem;
	text-decoration: none;
}

.kennis-themas a:hover {
	border-color: var(--groen, #2E6E58);
	color: var(--groen, #2E6E58);
}

.kennis-themas a.is-actief {
	border-color: var(--groen, #2E6E58);
	background: var(--groen, #2E6E58);
	color: var(--wit, #FFFFFF);
}

.kennis-themas__aantal {
	font-size: 0.78rem;
	opacity: 0.75;
}

.kennis-uitkomst {
	margin: 0 0 16px;
	font-size: 0.9rem;
	color: var(--tekst-zacht, #5C6B63);
}

.kennis-blogkop {
	margin: 32px 0 12px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--donkergroen, #0A371A);
}

/* ---------- De kaarten ---------- */

.kennis-kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kennis-kaart {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 8px;
	background: var(--wit, #FFFFFF);
}

.kennis-kaart:hover {
	border-color: var(--groen, #2E6E58);
}

.kennis-kaart__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 0.78rem;
	color: var(--tekst-zacht, #5C6B63);
}

.kennis-kaart__meta a {
	color: var(--groen, #2E6E58);
	text-decoration: none;
}

.kennis-kaart__titel {
	margin: 0;
	font-size: 1rem;
	line-height: 1.35;
}

.kennis-kaart__titel a {
	color: var(--donkergroen, #0A371A);
	text-decoration: none;
}

.kennis-kaart__titel a:hover {
	color: var(--groen, #2E6E58);
	text-decoration: underline;
}

.kennis-kaart__tekst {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--tekst-zacht, #5C6B63);
}

/* ---------- Eén artikel ---------- */

.kennis-artikel {
	max-width: 76ch;
}

.kennis-artikel__kop {
	margin-bottom: 20px;
}

.kennis-artikel__titel {
	margin: 6px 0 0;
	font-size: 1.5rem;
	line-height: 1.25;
}

.kennis-artikel__beeld {
	margin: 0 0 24px;
}

.kennis-artikel__beeld img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.kennis-artikel__tekst {
	font-size: 0.98rem;
	line-height: 1.7;
	color: var(--tekst, #1E2B24);
}

.kennis-artikel__tekst > * + * {
	margin-top: 1em;
}

.kennis-artikel__tekst h2,
.kennis-artikel__tekst h3,
.kennis-artikel__tekst h4 {
	margin-top: 1.6em;
	line-height: 1.3;
	color: var(--donkergroen, #0A371A);
}

.kennis-artikel__tekst h2 { font-size: 1.25rem; }
.kennis-artikel__tekst h3 { font-size: 1.08rem; }
.kennis-artikel__tekst h4 { font-size: 1rem; }

.kennis-artikel__tekst ul,
.kennis-artikel__tekst ol {
	padding-left: 1.4em;
}

.kennis-artikel__tekst li + li {
	margin-top: 0.3em;
}

.kennis-artikel__tekst a {
	color: var(--groen, #2E6E58);
}

.kennis-artikel__tekst blockquote {
	margin: 1.2em 0;
	padding: 12px 18px;
	border-left: 3px solid var(--groen, #2E6E58);
	background: var(--mint-soft, #F1F8F4);
	border-radius: 6px;
}

.kennis-artikel__tekst table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.kennis-artikel__tekst th,
.kennis-artikel__tekst td {
	padding: 8px 10px;
	border: 1px solid var(--lijn, #E2E8E4);
	text-align: left;
	vertical-align: top;
}

.kennis-artikel__tekst th {
	background: var(--mint-soft, #F1F8F4);
}

.kennis-artikel__tekst img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

/* ---------- Het paneel op het overzicht en het beheer ---------- */

.kennis-paneel__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kennis-paneel__lijst li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 0;
	border-top: 1px solid var(--lijn, #E2E8E4);
}

.kennis-paneel__lijst li:first-child {
	border-top: 0;
	padding-top: 0;
}

.kennis-paneel__lijst a {
	color: var(--donkergroen, #0A371A);
	font-weight: 500;
	text-decoration: none;
}

.kennis-paneel__lijst a:hover {
	color: var(--groen, #2E6E58);
	text-decoration: underline;
}

.kennis-paneel__thema {
	font-size: 0.78rem;
	color: var(--tekst-zacht, #5C6B63);
}

.kennis-paneel__meer {
	margin: 12px 0 0;
	font-size: 0.88rem;
}

.kennis-paneel__meer a {
	color: var(--groen, #2E6E58);
	text-decoration: none;
}

.kennis-beheer__subkop {
	margin: 16px 0 6px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tekst-zacht, #5C6B63);
}

@media (max-width: 720px) {
	.kennis-zoek {
		flex-direction: column;
	}
}

/* =========================================================================
   PORTFOLIO (17 september 2026)

   Het beroepsportfolio van de verpleegkundige: gegevens, diploma's en
   attesten uit het dossier, opleidingen bij Tricura en elders, en eigen
   bewijsstukken. Eén blad, af te drukken en te downloaden als bundel.
   ========================================================================= */

.portfolio-kop {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}

.portfolio-kop .portaal-uitleg {
	margin: 0;
	max-width: 60ch;
}

.portfolio-kop__knoppen {
	display: flex;
	flex-shrink: 0;
	gap: 8px;
}

.portfolio-kop__knoppen .portaal-knop {
	margin: 0;
}

.portfolio-deel {
	margin-bottom: 20px;
	padding: 18px 20px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 8px;
	background: var(--wit, #FFFFFF);
}

.portfolio-deel__kop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
}

.portfolio-deel__titel {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--donkergroen, #0A371A);
}

.portfolio-deel__aantal {
	font-size: 0.82rem;
	color: var(--tekst-zacht, #5C6B63);
}

.portfolio-lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.portfolio-lijst li {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 8px 16px;
	padding: 10px 0;
	border-top: 1px solid var(--lijn, #E2E8E4);
	font-size: 0.92rem;
}

.portfolio-lijst li:first-child {
	border-top: 0;
	padding-top: 0;
}

.portfolio-lijst__naam {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.portfolio-lijst__naam small {
	font-size: 0.8rem;
	color: var(--tekst-zacht, #5C6B63);
}

.portfolio-lijst__acties {
	display: flex;
	gap: 10px;
	font-size: 0.85rem;
	white-space: nowrap;
}

.portfolio-lijst__acties a,
.portfolio-lijst__acties button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--groen, #2E6E58);
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
	text-decoration: none;
}

.portfolio-lijst__acties a:hover,
.portfolio-lijst__acties button:hover {
	text-decoration: underline;
}

.portfolio-formulier {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 20px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--lijn, #E2E8E4);
}

.portfolio-formulier .dossier-veld--breed,
.portfolio-formulier .berichten-formulier__knoppen {
	grid-column: 1 / -1;
}

@media (max-width: 720px) {
	.portfolio-kop {
		flex-direction: column;
	}

	.portfolio-lijst li {
		grid-template-columns: 1fr;
	}

	.portfolio-formulier {
		grid-template-columns: 1fr;
	}
}

@media print {
	.portaal-zijbalk,
	.site-header,
	.portaal-menuknop,
	.portfolio-kop__knoppen,
	.portfolio-formulier,
	.portfolio-lijst__acties,
	.berichten-terug {
		display: none !important;
	}

	.portfolio-deel {
		break-inside: avoid;
		border-color: #999;
	}
}

/* =========================================================================
   CIJFERS (17 september 2026)

   Het bedrijfsdashboard in Beheer: een strook met de kerngetallen, de tabel
   per formule door de maanden heen, de winkel en de onboarding.
   ========================================================================= */

.cijfers-strook {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.cijfers-tegel {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 8px;
	background: var(--wit, #FFFFFF);
}

.cijfers-tegel__getal {
	font-family: var(--font-titel, 'Montserrat', system-ui, sans-serif);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--groen, #2E6E58);
}

.cijfers-tegel__label {
	font-size: 0.8rem;
	color: var(--tekst-zacht, #5C6B63);
}

.cijfers-tabel table {
	font-size: 0.86rem;
}

.cijfers-tabel__maand {
	text-align: right;
	white-space: nowrap;
}

.cijfers-tabel__totaal td {
	font-weight: 600;
	background: var(--mint-soft, #F1F8F4);
}

.cijfers-leeg {
	color: var(--lijn, #E2E8E4);
}

.cijfers-verschil--plus { color: var(--groen, #2E6E58); font-weight: 600; }
.cijfers-verschil--min  { color: var(--donkergroen, #0A371A); font-weight: 600; }
.cijfers-verschil--nul  { color: var(--tekst-zacht, #5C6B63); }

.cijfers-voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 12px 0 28px;
	font-size: 0.82rem;
	color: var(--tekst-zacht, #5C6B63);
}

.cijfers-voet .portaal-knop {
	margin: 0;
}

.cijfers-stappen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 10px;
}

.cijfers-stap {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 8px;
	background: var(--wit, #FFFFFF);
}

.cijfers-stap__getal {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--groen, #2E6E58);
}

.cijfers-stap__label {
	font-size: 0.78rem;
	color: var(--tekst-zacht, #5C6B63);
}

/* Op een smal scherm mag de maandtabel schuiven; de tabel zelf moet niet
   in blokjes uiteenvallen zoals de andere beheertabellen. */
@media (max-width: 720px) {
	.cijfers-tabel {
		overflow-x: auto;
	}

	.cijfers-tabel table,
	.cijfers-tabel thead,
	.cijfers-tabel tbody,
	.cijfers-tabel tr,
	.cijfers-tabel td,
	.cijfers-tabel th {
		display: revert;
	}

	.cijfers-tabel td::before {
		content: none;
	}
}

/* =========================================================================
   COACHING (17 september 2026)

   Trajecten met sessies, voor de klant en in Beheer. Een sessie is een
   regel met het moment, de duur, de plaats en de stand; een verslag staat
   eronder op mint.
   ========================================================================= */

.coaching-traject {
	margin-bottom: 20px;
	padding: 18px 20px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: 8px;
	background: var(--wit, #FFFFFF);
}

.coaching-traject__kop {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 10px;
}

.coaching-traject__titel {
	margin: 0 0 3px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--donkergroen, #0A371A);
}

.coaching-traject__meta {
	margin: 0;
	font-size: 0.84rem;
	color: var(--tekst-zacht, #5C6B63);
}

.coaching-traject__doel {
	margin: 0 0 16px;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--tekst, #1E2B24);
}

.coaching-sessies {
	margin: 0;
	padding: 0;
	list-style: none;
}

.coaching-sessie {
	padding: 12px 0;
	border-top: 1px solid var(--lijn, #E2E8E4);
}

.coaching-sessie:first-child {
	border-top: 0;
	padding-top: 0;
}

.coaching-sessie--geannuleerd .coaching-sessie__kop strong {
	text-decoration: line-through;
	color: var(--tekst-zacht, #5C6B63);
}

.coaching-sessie__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	font-size: 0.94rem;
}

.coaching-sessie__meta {
	font-size: 0.85rem;
	color: var(--tekst-zacht, #5C6B63);
}

.coaching-sessie__meta a {
	color: var(--groen, #2E6E58);
}

.coaching-sessie__notitie {
	margin: 6px 0 0;
	font-size: 0.88rem;
	color: var(--tekst-zacht, #5C6B63);
}

.coaching-sessie__verslag {
	margin-top: 10px;
	padding: 12px 16px;
	border-left: 3px solid var(--groen, #2E6E58);
	border-radius: 6px;
	background: var(--mint-soft, #F1F8F4);
	font-size: 0.92rem;
	line-height: 1.6;
}

.coaching-sessie__verslag p {
	margin: 0 0 0.6em;
}

.coaching-sessie__verslag p:last-child {
	margin-bottom: 0;
}

.coaching-sessie__verslagkop {
	margin: 0 0 6px !important;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--groen, #2E6E58);
}

/* ---------- Beheer ---------- */

.coaching-sessie__acties {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
	margin-top: 10px;
}

.coaching-sessie__acties .portaal-knop {
	margin: 0;
}

.coaching-sessie__inline {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
	flex: 1;
	min-width: 260px;
	margin-top: 8px;
}

.coaching-sessie__inline textarea {
	flex: 1 1 100%;
}

.coaching-sessie__inline input[type="text"] {
	flex: 1 1 180px;
}

.coaching-sessie__inline .portaal-knop {
	margin: 0;
}

.coaching-formulier {
	margin-top: 12px;
}

.coaching-coaches {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.coaching-coach {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 10px;
}

.coaching-coach label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.92rem;
}

.coaching-coach input[type="checkbox"] {
	margin: 0;
}

.coaching-paneel__moment {
	margin: 0 0 4px;
}

.coaching-paneel__meta {
	margin: 0;
	font-size: 0.85rem;
	color: var(--tekst-zacht, #5C6B63);
}

.berichten-stand label {
	margin-right: 6px;
	font-size: 0.88rem;
}

.berichten-stand select,
.berichten-stand input[type="email"] {
	margin-right: 6px;
}

@media (max-width: 720px) {
	.coaching-traject__kop {
		flex-direction: column;
	}

	.coaching-coach {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   BEVESTIG JE E-MAILADRES (17 september 2026)

   Het scherm na het registreren, in hetzelfde kader als inloggen. Eén groot
   codeveld, en de hulp eronder als gewone zinnen.
   ========================================================================= */

.tricura-bevestigen__code {
	font-family: var(--font-titel, 'Montserrat', system-ui, sans-serif);
	font-size: 1.6rem;
	letter-spacing: 0.35em;
	text-align: center;
}

.tricura-bevestigen__hulp {
	margin: 10px 0 0;
	font-size: 0.86rem;
	color: var(--tekst-zacht, #5C6B63);
}

.tricura-bevestigen__hulp a,
.tricura-bevestigen__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--groen, #2E6E58);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.tricura-bevestigen__opnieuw {
	margin-top: 18px;
}

/* De raad om in de spam te kijken: goed zichtbaar, boven het codeveld. */
.tricura-bevestigen__spam {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-left: 3px solid var(--groen, #2E6E58);
	border-radius: 6px;
	background: var(--mint-soft, #F1F8F4);
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--donkergroen, #0A371A);
}

.tricura-bevestigen__spam strong:first-child {
	display: block;
	margin-bottom: 2px;
}

/* =========================================================================
   WACHTSCHERM (17 september 2026)

   Voor wie zich registreert vóór de lancering: zelfde kader als inloggen.
   ========================================================================= */

.tricura-wachten__uitleg {
	margin: 0 0 18px;
	font-size: 0.92rem;
	color: var(--tekst-zacht, #5C6B63);
}

.woocommerce-account .woocommerce-button.tricura-wachten__uitloggen,
.tricura-wachten__uitloggen {
	border-color: var(--lijn, #E2E8E4);
	background: var(--wit, #FFFFFF);
	color: var(--donkergroen, #0A371A);
}

.woocommerce-account .woocommerce-button.tricura-wachten__uitloggen:hover,
.tricura-wachten__uitloggen:hover {
	border-color: var(--groen, #2E6E58);
	background: var(--mint-soft, #F1F8F4);
	color: var(--groen, #2E6E58);
}


/* =========================================================================
   DE WACHTWOORDMETER (18 september 2026)

   WooCommerce zet onder het wachtwoordveld een blokje met "Zeer zwak",
   "Zwak", "Gemiddeld" of "Sterk", in een eigen kleur over de volle breedte:
   rood, oranje, geel, groen. Feedback van Camu bij het registreren op zijn
   telefoon: dat gele vlak is niet mooi. Het klopt ook niet met de rest, waar
   geen oranje of geel voorkomt.

   Hier wordt het een balk die meeloopt met de sterkte, met het woord eronder.
   De breedte vertelt het verhaal, de kleur ondersteunt, en het woord blijft
   staan: kleur alleen is geen boodschap, dezelfde regel als bij de acties in
   het portaal.

   Alleen merkkleuren: roze voor de twee zwakke standen, mint voor gemiddeld,
   groen voor sterk.
   ========================================================================= */

.tricura-shop .woocommerce-password-strength {
	position: relative;
	margin: 10px 0 0;
	padding: 14px 0 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--tekst, #1E2B24);
	font-family: var(--font-body, sans-serif);
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
}

/* De baan waarin de balk loopt. */
.tricura-shop .woocommerce-password-strength::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: var(--lijn, #E2E8E4);
}

/*
 * De balk zelf. Zonder stand blijft hij leeg.
 *
 * De haarlijn is er niet voor de sier. Roze en mint zijn lichte merkkleuren:
 * tegen de baan halen ze maar 1,1 tot 1,5 op 1, ver onder de 3 op 1 die nodig
 * is om een betekenisvol vlak te kunnen zien. De donkere rand haalt wel 3 op 1
 * tegen de baan, dus waar de balk eindigt is altijd zichtbaar, ook bij
 * kleurenblindheid of in fel zonlicht.
 */
.tricura-shop .woocommerce-password-strength::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 8px;
	border-radius: 999px;
	background: var(--roze, #FECECC);
	box-shadow: inset 0 0 0 1px rgba(10, 55, 26, 0.5);
	transition: width 0.3s ease, background-color 0.3s ease;
}

.tricura-shop .woocommerce-password-strength.short::after {
	width: 25%;
	background: var(--roze, #FECECC);
}

.tricura-shop .woocommerce-password-strength.bad::after {
	width: 50%;
	background: var(--roze, #FECECC);
}

.tricura-shop .woocommerce-password-strength.good::after {
	width: 75%;
	background: var(--mint, #93C8AD);
}

.tricura-shop .woocommerce-password-strength.strong::after {
	width: 100%;
	background: var(--groen, #2E6E58);
}

/*
 * De tip van WooCommerce verschijnt alleen bij een zwak wachtwoord en
 * verdwijnt zodra het goed genoeg is. Alles eronder sprong dan 44 tot 63
 * pixels omhoog, precies op het moment dat je naar het volgende veld of naar
 * Registreren gaat. Daarom staat onze eigen tip er altijd
 * (tricura_opl_wachtwoordtip() in includes/inloggen.php) en blijft die van
 * WooCommerce weg.
 */
.tricura-shop .woocommerce-password-hint {
	display: none;
}

.tricura-shop .tricura-wachtwoordtip {
	margin: 6px 0 0;
	color: var(--tekst-zacht, #5C6B63);
	font-size: 0.78rem;
	line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
	.tricura-shop .woocommerce-password-strength::after {
		transition: none;
	}
}

/* =========================================================================
   GEEN TWEE MENU'S NAAST ELKAAR IN HET PORTAAL (18 september 2026)

   Onder 1024px toont het thema drie streepjes voor het sitemenu. In het
   portaal stond dat naast de knop "Menu van je account", en dan zijn er twee
   knoppen die allebei een menu opengooien. Feedback van Camu: die streepjes
   moeten daar weg.

   De weg naar de website loopt nu langs "Naar de website", onderaan in het
   menu van het portaal (templates/myaccount/navigation.php). Op een breed
   scherm staat het sitemenu gewoon uitgeklapt in de kop; daar verandert
   niets. Het logo blijft op elke breedte naar de homepagina linken.
   ========================================================================= */

@media (max-width: 860px) {
	body.tricura-portaal .nav-toggle {
		display: none;
	}
}

/* =========================================================================
   FORMULIERVELDEN GELIJKTREKKEN (20 september 2026)

   Uit de review van ronde 6: een bestandsveld, een datumveld en het zoekvak
   van de kennisbank stonden er nog bij zoals de browser ze standaard tekent.
   Naast de eigen velden van de winkel viel dat op: een grijze binnenrand van
   twee pixels, geen binnenruimte, en een bestandsveld van eenentwintig pixels
   hoog waar je alleen het knopje kon raken.

   Alles hieronder gebruikt dezelfde maten als de tekstvelden hogerop in dit
   bestand: 13px bij 16px binnenruimte, een lijn van 1px en een hoek van 8px.
   ========================================================================= */

.tricura-winkel input[type="search"],
.tricura-winkel input[type="date"],
.tricura-winkel input[type="datetime-local"],
.tricura-winkel input[type="file"] {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius-sm, 8px);
	background: #FFFFFF;
	font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--tekst, #1E2B24);
	transition: border-color var(--transitie, 0.25s ease), box-shadow var(--transitie, 0.25s ease);
}

.tricura-winkel input[type="search"]:focus,
.tricura-winkel input[type="date"]:focus,
.tricura-winkel input[type="datetime-local"]:focus,
.tricura-winkel input[type="file"]:focus {
	outline: none;
	border-color: var(--groen, #2E6E58);
	box-shadow: 0 0 0 3px rgba(46, 110, 88, 0.12);
}

/* Het bestandsveld.

   Een bestandsveld is één element: de knop en de tekst "geen bestand gekozen"
   horen er allebei bij. Door het de maat van een gewoon veld te geven, is de
   hele strook aanklikbaar en niet alleen het knopje. cursor: pointer maakt dat
   ook zichtbaar. */
.tricura-winkel input[type="file"] {
	cursor: pointer;
}

.tricura-winkel input[type="file"]::file-selector-button {
	margin-right: 14px;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--groen, #2E6E58);
	color: #FFFFFF;
	font-family: inherit;
	font-size: 0.86rem;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--transitie, 0.25s ease);
}

.tricura-winkel input[type="file"]::file-selector-button:hover {
	background: var(--donkergroen, #0A371A);
}

/* Het kalendertje van een datumveld in de merkkleur in plaats van blauwgrijs. */
.tricura-winkel input[type="date"]::-webkit-calendar-picker-indicator,
.tricura-winkel input[type="datetime-local"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.55;
	transition: opacity var(--transitie, 0.25s ease);
}

.tricura-winkel input[type="date"]::-webkit-calendar-picker-indicator:hover,
.tricura-winkel input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
}

/* Het zoekvak van de kennisbank: veld en knop op één lijn. */
.kennis-zoek {
	display: flex;
	gap: 10px;
	align-items: stretch;
	margin: 0 0 22px;
}

.kennis-zoek input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
}

.kennis-zoek button {
	flex: 0 0 auto;
	white-space: nowrap;
}

@media (max-width: 560px) {
	.kennis-zoek {
		flex-direction: column;
	}
}

/* =========================================================================
   MELDING ONDER HET VELD, EN DE TOAST (20 september 2026)

   Uit de review van ronde 6. Een fout hoort bij het veld dat fout is, niet in
   één regel bovenaan het formulier waar je zelf mag zoeken welk veld bedoeld
   wordt. En een gelukte opslag mag je niet missen.

   Roze voor wat fout is, groen voor wat gelukt is: dezelfde afspraak als in de
   rest van het portaal, en er staat altijd tekst bij.
   ========================================================================= */

.tricura-veldfout {
	margin: 6px 0 0;
	color: var(--donkergroen, #0A371A);
	font-size: 0.82rem;
	line-height: 1.45;
}

.tricura-veldfout::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 7px;
	border-radius: 50%;
	background: var(--roze, #FECECC);
	box-shadow: inset 0 0 0 1px rgba(10, 55, 26, 0.45);
	vertical-align: 1px;
}

.tricura-winkel .tricura-veld--fout,
.tricura-winkel .tricura-veld--fout:focus {
	border-color: var(--roze, #FECECC);
	box-shadow: 0 0 0 3px rgba(254, 206, 204, 0.5);
}

/* ---------- De toast ---------- */

.tricura-toasts {
	position: fixed;
	z-index: 120;
	top: calc(var(--portaal-top, 62px) + 16px);
	right: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: min(380px, calc(100vw - 40px));
	pointer-events: none;
}

.tricura-toast {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--mint, #93C8AD);
	border-radius: var(--radius-sm, 8px);
	background: var(--mint-soft, #F1F8F4);
	box-shadow: var(--schaduw-md, 0 12px 32px rgba(10, 55, 26, 0.09));
	color: var(--tekst, #1E2B24);
	font-size: 0.9rem;
	line-height: 1.45;
	pointer-events: auto;
	animation: tricura-toast-in 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.tricura-toast--weg {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.tricura-toast__vink {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--groen, #2E6E58);
	color: #FFFFFF;
}

.tricura-toast__vink svg {
	width: 13px;
	height: 13px;
}

.tricura-toast__tekst {
	flex: 1 1 auto;
	min-width: 0;
}

.tricura-toast__tekst p {
	margin: 0;
}

.tricura-toast__sluit {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--tekst-zacht, #5C6B63);
	cursor: pointer;
}

.tricura-toast__sluit:hover {
	background: rgba(10, 55, 26, 0.07);
	color: var(--donkergroen, #0A371A);
}

.tricura-toast__sluit svg {
	width: 13px;
	height: 13px;
}

@keyframes tricura-toast-in {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tricura-toast { animation: none; }
	.tricura-toast--weg { transition: none; }
}

/* Op een telefoon over de volle breedte onderaan: rechtsboven zit daar de
   menuknop, en een toast die daaroverheen valt is hinderlijk. */
@media (max-width: 600px) {
	.tricura-toasts {
		top: auto;
		right: 12px;
		bottom: 12px;
		left: 12px;
		max-width: none;
	}
}

/* =========================================================================
   DE TWEE BLOKKEN OP HET OVERZICHT (20 september 2026)

   Uit de review van ronde 6: "Iets niet duidelijk?" stond er als drie losse
   links onder elkaar, waarvan je niet zag wat wat was. En "Voordeliger
   bijleren" was één alinea die niemand twee keer leest.

   Nu: per manier van contact een icoon, een woord en de waarde eronder; en bij
   de formule drie regels met een vinkje naast de alinea die het waaróm uitlegt.
   ========================================================================= */

.portaal-wegen {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.portaal-weg__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--radius-sm, 8px);
	color: inherit;
	text-decoration: none;
	transition: background var(--transitie, 0.25s ease);
}

.portaal-weg__link:hover,
.portaal-weg__link:focus-visible {
	background: var(--mint-soft, #F1F8F4);
	color: inherit;
}

.portaal-weg__icoon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--mint-soft, #F1F8F4);
	color: var(--groen, #2E6E58);
}

.portaal-weg__link:hover .portaal-weg__icoon {
	background: var(--mint, #93C8AD);
	color: var(--donkergroen, #0A371A);
}

.portaal-weg__icoon svg {
	width: 18px;
	height: 18px;
}

.portaal-weg__tekst {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.portaal-weg__label {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tekst-zacht, #5C6B63);
}

.portaal-weg__waarde {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--groen, #2E6E58);
	overflow-wrap: anywhere;
}

.portaal-weg__uitleg {
	font-size: 0.8rem;
	color: var(--tekst-zacht, #5C6B63);
}

/* ---------- Wat je formule je geeft ---------- */

.portaal-voordelen {
	margin: 14px 0 18px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.portaal-voordelen li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.9rem;
	line-height: 1.45;
}

.portaal-voordelen__vink {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--mint-soft, #F1F8F4);
	color: var(--groen, #2E6E58);
}

.portaal-voordelen__vink svg {
	width: 12px;
	height: 12px;
}

/* -------------------------------------------------------------
   Btw-vrijstelling
   -------------------------------------------------------------
   De grond staat op de productpagina, bij de bestelling en in de mail. Klein
   en rustig: het is een verplichte vermelding, geen verkoopargument. Maar wel
   leesbaar, want wie koopt moet vóór de aankoop kunnen zien waarom er geen
   btw bij komt. */
.tricura-vrijstelling {
	margin: 0.9rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--rand, #dce5df);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--tekst-zacht, #5a6b62);
}

/* -------------------------------------------------------------
   Inschrijven op een gratis event
   -------------------------------------------------------------
   Geen winkelwagen en geen kassa: één formulier op de eventpagina.
   Het moet er uitnodigend uitzien en niet als een bestelformulier,
   want er valt niets te bestellen. Zie includes/event-inschrijving.php. */
.tricura-inschrijving {
	margin: 1.75rem 0 0;
	padding: 1.5rem;
	border: 1px solid var(--rand, #dce5df);
	border-radius: var(--radius-lg, 14px);
	background: var(--zacht, #f6f9f7);
}

.tricura-inschrijving__kop {
	margin: 0 0 0.35rem;
	font-size: 1.15rem;
}

.tricura-inschrijving__uitleg {
	margin: 0 0 1.1rem;
	color: var(--tekst-zacht, #5a6b62);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.tricura-inschrijving__rij {
	display: grid;
	gap: 0 1rem;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 560px) {
	.tricura-inschrijving__rij { grid-template-columns: 1fr; }
}

.tricura-inschrijving .form-row {
	margin: 0 0 0.9rem;
}

.tricura-inschrijving label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.875rem;
	font-weight: 600;
}

.tricura-inschrijving input[type="text"],
.tricura-inschrijving input[type="email"],
.tricura-inschrijving select,
.tricura-inschrijving textarea {
	width: 100%;
	box-sizing: border-box;
}

.tricura-inschrijving__knop {
	margin: 0.4rem 0 0;
}

.tricura-inschrijving__klein {
	margin: 0.9rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--tekst-zacht, #5a6b62);
}

/* De val voor invulrobots: buiten beeld, maar niet verborgen — `hidden`
   slaan de meeste robots juist over. */
.tricura-inschrijving__val {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tricura-inschrijving--klaar {
	border-color: var(--groen, #2E6E58);
	background: #eef6f1;
}

.tricura-inschrijving--klaar p {
	margin: 0;
	font-weight: 600;
	color: var(--groen-donker, #245646);
}

/* -------------------------------------------------------------
   Bevestiging van de betaling
   -------------------------------------------------------------
   Boven de bestelling in Mijn account. Groen en met een rand: dit is
   het antwoord op "is mijn geld aangekomen?", en dat mag opvallen.
   Zie includes/bestelstatus.php. */
.tricura-betaalbevestiging {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1.1rem;
	border-left: 3px solid var(--groen, #2E6E58);
	border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
	background: #eef6f1;
	line-height: 1.55;
}

.tricura-betaalbevestiging strong {
	color: var(--groen-donker, #245646);
}

.tricura-betaalbevestiging span {
	display: inline-block;
	margin-top: 0.3rem;
	font-size: 0.875rem;
	color: var(--tekst-zacht, #5a6b62);
}

/* -------------------------------------------------------------
   Nieuwsbrief: het formulier op de verborgen pagina
   -------------------------------------------------------------
   Zie includes/nieuwsbrief.php.

   Let op: dit is een gewone pagina, géén winkelpagina. De veldopmaak
   van de winkel hangt aan `.tricura-winkel` (regel 270 in dit bestand)
   en die klasse staat hier niet op de body. Zonder de regels hieronder
   vallen de velden dus terug op de browserstandaard — dunne randjes
   zonder binnenruimte. Daarom staat de opmaak hier voluit, met dezelfde
   maten als in de winkel en het portaal, zodat een bezoeker overal
   hetzelfde veld ziet. */

.tricura-nb__form {
	max-width: 34rem;
	margin: 1.75rem 0 0;
	padding: 1.75rem;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius-lg, 14px);
	background: var(--wit, #FFFFFF);
	box-shadow: 0 1px 2px rgba(30, 43, 36, 0.04), 0 10px 28px rgba(30, 43, 36, 0.05);
}

@media (max-width: 560px) {
	.tricura-nb__form { padding: 1.35rem; }
}

.tricura-nb__rij {
	display: grid;
	gap: 0 1rem;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 560px) {
	.tricura-nb__rij { grid-template-columns: 1fr; }
}

.tricura-nb__form .form-row { margin: 0 0 1rem; }

.tricura-nb__form label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--tekst, #1E2B24);
}

/* Het sterretje bij een verplicht veld. Browsers zetten onder een <abbr>
   met een title standaard een stippellijn; die hoort hier niet. */
.tricura-nb__form abbr.required {
	border: 0;
	text-decoration: none;
	color: var(--groen, #2E6E58);
	font-weight: 600;
}

.tricura-nb__form input[type="text"],
.tricura-nb__form input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	height: auto;
	padding: 13px 16px;
	border: 1px solid var(--lijn, #E2E8E4);
	border-radius: var(--radius-sm, 8px);
	background: var(--wit, #FFFFFF);
	font-family: var(--font-body, 'Poppins', system-ui, sans-serif);
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--tekst, #1E2B24);
	box-shadow: none;
	transition: border-color var(--transitie, 0.25s ease), box-shadow var(--transitie, 0.25s ease);
}

.tricura-nb__form input[type="text"]:focus,
.tricura-nb__form input[type="email"]:focus {
	outline: none;
	border-color: var(--groen, #2E6E58);
	box-shadow: 0 0 0 3px rgba(46, 110, 88, 0.12);
}

.tricura-nb__form input::placeholder { color: #9aa8a0; }

.tricura-nb__knop { margin: 1.25rem 0 0; }

/* Op een telefoon staat een knop die niet over de volle breedte loopt er
   verloren bij; op een breed scherm juist niet. */
@media (max-width: 560px) {
	.tricura-nb__knop { margin-top: 1rem; }
	.tricura-nb__knop .btn { display: block; width: 100%; text-align: center; }
}

/* De geruststelling onderaan hoort bij het formulier, maar niet in dezelfde
   ademtocht als de knop: een lijn erboven zet ze apart. */
.tricura-nb__klein {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--lijn, #E2E8E4);
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--tekst-zacht, #5a6b62);
}

/* De val voor invulrobots: buiten beeld, niet verborgen. */
.tricura-nb__val {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tricura-nb__melding {
	max-width: 34rem;
	margin: 1.5rem 0;
	padding: 1rem 1.2rem;
	border: 1px solid #cfe5d8;
	border-left: 3px solid var(--groen, #2E6E58);
	border-radius: var(--radius-sm, 8px);
	background: #eef6f1;
	line-height: 1.55;
	color: var(--tekst, #1E2B24);
}

.tricura-nb__melding--fout {
	border-color: #f3cfcb;
	border-left-color: #b3261e;
	background: #fdeeec;
}


/* De standen in de beheerlijst. */
.tricura-nb-stand--bevestigd { color: #1c6b4a; font-weight: 600; }
.tricura-nb-stand--wacht     { color: #8a6d1f; }
.tricura-nb-stand--afgemeld  { color: #6b7280; }