/**
 * FC Variatietabel — frontend styling
 *
 * Structuur (layout, afmetingen, gedrag) staat hieronder ongescoped.
 * De 6 selecteerbare vormgevingsstijlen staan gescoped onder .fc-vt-style-{slug}.
 * Grootte (.fc-vt-size-*) en dichtheid (.fc-vt-density-*) zijn losse,
 * orthogonale instellingen die met opzet geen properties delen met de
 * stijlregels, zodat ze altijd voorspelbaar samenwerken met elke stijl.
 *
 * Belangrijk: standaardwaarden staan op :root, NIET op .fc-vt-wrapper.
 * Een variabele die rechtstreeks op .fc-vt-wrapper zou staan, wint altijd
 * van een via :root geërfde waarde — dan zou een instelling nooit
 * zichtbaar worden, ongeacht de volgorde van de stylesheets.
 */

:root {
	--fc-vt-primary: #2271b1;
	--fc-vt-primary-hover: #1a5580;
	--fc-vt-price-color: #2e7d32;
	--fc-vt-button-color: #2e7d32;
	--fc-vt-button-color-hover: #256b28;
}

/* ---------- Structuur (geldt voor alle stijlen) ---------- */

.fc-vt-wrapper {
	margin: 2em 0;
}

.fc-vt-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
}

.fc-vt-heading {
	margin: 0;
	font-size: 1.25em;
	font-weight: 700;
	color: #222;
}

.fc-vt-reset-button {
	margin-left: 20px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 0.58em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.5;
	color: #555;
	cursor: pointer;
}

.fc-vt-reset-button:hover {
	background: #ececec;
	border-color: #ccc;
}

.fc-vt-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.fc-vt-filter-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 180px;
	min-width: 160px;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 8px 12px;
	background: #fff;
}

.fc-vt-filter-label {
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #888;
}

.fc-vt-filter-select {
	border: none;
	padding: 2px 0;
	font-size: 0.95em;
	background: transparent;
	color: #333;
}

.fc-vt-filter-select:focus {
	outline: none;
}

.fc-vt-table-scroll {
	overflow-x: auto;
}

.fc-vt-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
	background: #fff;
}

.fc-vt-table th,
.fc-vt-table td {
	padding: 10px 14px;
	text-align: left;
	vertical-align: middle;
}

.fc-vt-sortable {
	cursor: pointer;
	user-select: none;
	position: relative;
	padding-right: 20px !important;
}

.fc-vt-sortable::before,
.fc-vt-sortable::after {
	position: absolute;
	right: 6px;
	font-size: 0.6em;
	line-height: 1;
	opacity: 0.3;
}

.fc-vt-sortable::before {
	content: "\25B2";
	top: 32%;
}

.fc-vt-sortable::after {
	content: "\25BC";
	top: 55%;
}

.fc-vt-sortable.fc-vt-sort-asc::before {
	opacity: 1;
	color: var(--fc-vt-primary);
}

.fc-vt-sortable.fc-vt-sort-desc::after {
	opacity: 1;
	color: var(--fc-vt-primary);
}

/* Prijzen bewust altijd in een (instelbare) groene kleur, los van de
   primaire kleur — werkt marketingtechnisch doorgaans beter. */
.fc-vt-col-price {
	white-space: nowrap;
	font-weight: 600;
}

.fc-vt-col-price .woocommerce-Price-amount {
	color: var(--fc-vt-price-color);
}

.fc-vt-col-qty {
	width: 1%;
	white-space: nowrap;
}

.fc-vt-qty-input {
	border: 1px solid #ccc;
	border-radius: 3px;
	min-height: auto !important;
	text-align: center;
	box-sizing: border-box;
}

.fc-vt-col-action {
	white-space: nowrap;
	text-align: right;
}

.fc-vt-add-to-cart.button {
	cursor: pointer;
	min-height: auto !important;
	line-height: 1.4 !important;
	transition: background-color 0.15s ease-in-out;
}

/* Alleen wanneer "Aangepaste kleur" is gekozen krijgt de knop de primaire
   kleur. Standaard (fc-vt-color-custom afwezig) erft de knop gewoon de
   opmaak van het WooCommerce-thema, via de generieke .button class. */
.fc-vt-color-custom .fc-vt-add-to-cart.button {
	background-color: var(--fc-vt-button-color);
	border: 1px solid var(--fc-vt-button-color);
	color: #fff !important;
}

.fc-vt-color-custom .fc-vt-add-to-cart.button:hover,
.fc-vt-color-custom .fc-vt-add-to-cart.button:focus {
	background-color: var(--fc-vt-button-color-hover);
	border-color: var(--fc-vt-button-color-hover);
	color: #fff !important;
}

.fc-vt-add-to-cart.button[disabled] {
	opacity: 0.65;
	cursor: default;
}

/* Tijdelijke succesfeedback: altijd groen, ongeacht knopkleur-instelling. */
.fc-vt-add-to-cart.button.fc-vt-added {
	background-color: #4b8b3b !important;
	border-color: #4b8b3b !important;
	color: #fff !important;
}

.fc-vt-row--unavailable {
	opacity: 0.6;
}

.fc-vt-outofstock {
	color: #a00;
	font-size: 0.9em;
}

.fc-vt-message {
	margin-top: 10px;
	font-size: 0.9em;
}

.fc-vt-message.fc-vt-message--success {
	color: #2a6f2a;
}

.fc-vt-message.fc-vt-message--error {
	color: #a00;
}

.fc-vt-jumplink-wrap {
	margin: 8px 0 0;
}

.fc-vt-jumplink {
	display: inline-block;
	font-size: 0.9em;
	color: var(--fc-vt-primary);
	text-decoration: underline;
	cursor: pointer;
}

.fc-vt-jumplink:hover {
	color: var(--fc-vt-primary-hover);
}

/* ================================================================
   Responsive: compacte weergave op smalle schermen (mobiel)
   ================================================================
   In plaats van elk veld op een eigen regel (het oude gedrag, wat op
   mobiel al snel hoge, lange kaarten gaf), wordt elke variatie hier een
   compacte kaart van 2 regels:
     regel 1: eigenschappen als kleine "pills" + de prijs rechts
     regel 2: aantal-veld + knop, naast elkaar
   Dit gebeurt puur met CSS (flexbox + order), zonder de HTML-structuur
   aan te passen — nth-last-child herkent altijd de laatste 3 kolommen
   (prijs, aantal, actie), ongeacht hoeveel eigenschapskolommen er zijn.
*/
@media screen and (max-width: 600px) {
	.fc-vt-table thead {
		display: none;
	}

	.fc-vt-table,
	.fc-vt-table tbody {
		display: block;
		width: 100%;
	}

	.fc-vt-table tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 8px;
		width: 100%;
		padding: 8px 10px;
		border: 1px solid #e2e2e2;
		border-radius: 6px;
		margin-bottom: 6px;
	}

	/* Forceert een regeleinde tussen "prijs" en "aantal + knop". */
	.fc-vt-table tr::after {
		content: "";
		order: 2;
		flex-basis: 100%;
		height: 0;
	}

	.fc-vt-table td {
		display: inline-flex;
		align-items: center;
		padding: 0 !important;
		border: none !important;
	}

	.fc-vt-table td[data-label]::before {
		content: none;
	}

	/* Eigenschapskolommen (kleur, maat, ...): altijd alle kolommen behalve
	   de laatste 3 (prijs, aantal, actie) — getoond als duidelijke pills. */
	.fc-vt-table td:nth-last-child(n + 4) {
		order: 1;
		font-size: 0.92em;
		font-weight: 600;
		background: #eef0ea;
		color: #33402c;
		padding: 5px 12px !important;
		border-radius: 12px;
		line-height: 1.4;
	}

	.fc-vt-row--unavailable td:nth-last-child(n + 4) {
		background: #ececec;
		color: #999;
	}

	/* Prijs: rechts op regel 1 */
	.fc-vt-col-price {
		order: 1;
		margin-left: auto;
		padding-left: 8px !important;
	}

	/* Aantal: compact, vaste (kleine) breedte. De knop vult de
	   resterende ruimte op regel 2 — een groot aantal-blok is hier niet
	   nodig (zie ook de desktop-regels hierboven, waar dezelfde reden
	   geldt). */
	.fc-vt-col-qty {
		order: 3;
		width: auto !important;
		flex: 0 0 auto;
	}

	.fc-vt-col-qty .fc-vt-qty-input,
	.fc-vt-qty-input {
		width: 56px !important;
		box-sizing: border-box;
		padding: 6px !important;
		font-size: 0.9em !important;
		text-align: center;
	}

	.fc-vt-outofstock {
		order: 3;
		font-size: 0.82em;
	}

	.fc-vt-col-action {
		order: 3;
		flex: 1 1 auto;
	}

	.fc-vt-add-to-cart.button {
		display: block;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		padding: 8px 10px !important;
		font-size: 0.85em !important;
	}
}

/* ================================================================
   Grootte — aantal-veld en knop (los van stijl en dichtheid)
   ================================================================ */
.fc-vt-wrapper.fc-vt-size-xs .fc-vt-qty-input {
	box-sizing: border-box !important;
	height: 26px !important;
	width: 46px !important;
	padding: 2px 5px !important;
	font-size: 0.75em !important;
}

.fc-vt-wrapper.fc-vt-size-xs .fc-vt-add-to-cart.button {
	padding: 3px 8px !important;
	font-size: 0.75em !important;
	line-height: 1.4 !important;
}

.fc-vt-wrapper.fc-vt-size-small .fc-vt-qty-input {
	box-sizing: border-box !important;
	height: 30px !important;
	width: 68px !important;
	padding: 3px 6px !important;
	font-size: 0.8em !important;
}

.fc-vt-wrapper.fc-vt-size-small .fc-vt-add-to-cart.button {
	padding: 4px 10px !important;
	font-size: 0.8em !important;
	line-height: 1.4 !important;
}

.fc-vt-wrapper.fc-vt-size-medium .fc-vt-qty-input {
	box-sizing: border-box !important;
	height: 36px !important;
	width: 88px !important;
	padding: 6px 8px !important;
	font-size: 0.95em !important;
}

.fc-vt-wrapper.fc-vt-size-medium .fc-vt-add-to-cart.button {
	padding: 7px 14px !important;
	font-size: 0.95em !important;
	line-height: 1.4 !important;
}

.fc-vt-wrapper.fc-vt-size-large .fc-vt-qty-input {
	box-sizing: border-box !important;
	height: 44px !important;
	width: 110px !important;
	padding: 8px 12px !important;
	font-size: 1.1em !important;
}

.fc-vt-wrapper.fc-vt-size-large .fc-vt-add-to-cart.button {
	padding: 11px 22px !important;
	font-size: 1.1em !important;
	line-height: 1.4 !important;
}

/* ================================================================
   Dichtheid — rijhoogte (los van stijl en grootte)
   ================================================================ */
.fc-vt-wrapper.fc-vt-density-compact .fc-vt-table th,
.fc-vt-wrapper.fc-vt-density-compact .fc-vt-table td {
	padding-top: 4px;
	padding-bottom: 4px;
}

.fc-vt-wrapper.fc-vt-density-normaal .fc-vt-table th,
.fc-vt-wrapper.fc-vt-density-normaal .fc-vt-table td {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* ================================================================
   Stijl 1: Strak — dunne lijnen, geen achtergrond, subtiel (default)
   ================================================================ */
.fc-vt-style-strak .fc-vt-table thead th {
	border-bottom: 2px solid var(--fc-vt-primary);
	font-weight: 600;
	color: #333;
}

.fc-vt-style-strak .fc-vt-table td,
.fc-vt-style-strak .fc-vt-table tbody th {
	border-bottom: 1px solid #ececec;
}

.fc-vt-style-strak .fc-vt-table tbody tr:hover {
	background-color: #fafafa;
}

.fc-vt-style-strak .fc-vt-add-to-cart.button {
	border-radius: 3px;
}

/* ================================================================
   Stijl 2: Gestreept — afwisselende rijkleur, geen lijnen
   ================================================================ */
.fc-vt-style-gestreept .fc-vt-table thead th {
	border-bottom: 1px solid #ddd;
	font-weight: 600;
	color: #444;
}

.fc-vt-style-gestreept .fc-vt-table tbody tr:nth-child(odd) {
	background-color: #f7f7f7;
}

.fc-vt-style-gestreept .fc-vt-add-to-cart.button {
	border-radius: 3px;
}

/* ================================================================
   Stijl 3: Kaarten — elke rij als los, zwevend kaartje
   ================================================================ */
.fc-vt-style-kaarten .fc-vt-table {
	border-collapse: separate;
	border-spacing: 0 10px;
}

.fc-vt-style-kaarten .fc-vt-table thead th {
	border: none;
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #999;
	padding-bottom: 2px;
}

.fc-vt-style-kaarten .fc-vt-table tbody tr {
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.09);
}

.fc-vt-style-kaarten .fc-vt-table tbody td {
	border: none;
}

.fc-vt-style-kaarten .fc-vt-table tbody td:first-child {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

.fc-vt-style-kaarten .fc-vt-table tbody td:last-child {
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

.fc-vt-style-kaarten .fc-vt-add-to-cart.button {
	border-radius: 20px;
}

/* ================================================================
   Stijl 4: Compact — dichte, kleine tabel
   ================================================================ */
.fc-vt-style-compact .fc-vt-table {
	font-size: 0.85em;
}

.fc-vt-style-compact .fc-vt-table th,
.fc-vt-style-compact .fc-vt-table td {
	border: 1px solid #eee;
}

.fc-vt-style-compact .fc-vt-table thead th {
	background: #f5f5f5;
	font-weight: 600;
}

.fc-vt-style-compact .fc-vt-add-to-cart.button {
	border-radius: 2px;
}

/* ================================================================
   Stijl 5: Randen — volledig raster, klassieke tabel
   ================================================================ */
.fc-vt-style-randen .fc-vt-table,
.fc-vt-style-randen .fc-vt-table th,
.fc-vt-style-randen .fc-vt-table td {
	border: 1px solid #d8d8d8;
}

.fc-vt-style-randen .fc-vt-table thead th {
	background-color: var(--fc-vt-primary);
	border-color: var(--fc-vt-primary);
	color: #fff;
}

.fc-vt-style-randen .fc-vt-sortable::before,
.fc-vt-style-randen .fc-vt-sortable::after {
	opacity: 1;
	color: rgba(255, 255, 255, 0.55);
}

.fc-vt-style-randen .fc-vt-sortable.fc-vt-sort-asc::before,
.fc-vt-style-randen .fc-vt-sortable.fc-vt-sort-desc::after {
	color: #fff;
}

.fc-vt-style-randen .fc-vt-add-to-cart.button {
	border-radius: 2px;
}

/* ================================================================
   Stijl 6: Modern — afgeronde hoeken, zachte schaduw, kleuraccent
   ================================================================ */
.fc-vt-style-modern .fc-vt-table {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.fc-vt-style-modern .fc-vt-table thead th {
	background-color: #f4f0fb;
	background-color: color-mix(in srgb, var(--fc-vt-primary) 12%, #fff);
	border-bottom: 1px solid #eee;
	font-weight: 600;
	color: #333;
}

.fc-vt-style-modern .fc-vt-table td {
	border-bottom: 1px solid #f0f0f0;
}

.fc-vt-style-modern .fc-vt-table tbody tr:last-child td {
	border-bottom: none;
}

.fc-vt-style-modern .fc-vt-table tbody tr:hover {
	background-color: #fafbfc;
}

.fc-vt-style-modern .fc-vt-add-to-cart.button {
	border-radius: 20px;
}

/* ================================================================
   Stijl 7: Professioneel — direct gebaseerd op de aangeleverde
   "Variaties tabel"-plugin (subtiele randen, gedeelde filterbalk,
   DataTables-achtige dubbele chevron-sorteericoontjes)
   ================================================================ */

/* Afgeronde kaderrand om de hele tabel — alleen op desktopbreedte, zodat
   de mobiele kaartweergave (die de tabelstructuur overschrijft) niet
   wordt geraakt. LET OP: hier bewust geen overflow:hidden zetten — dat
   blokkeert de horizontale scroll uit de structurele .fc-vt-table-scroll
   regel (overflow-x:auto), waardoor kolommen die niet meer passen
   (bijv. op tablet-breedte) simpelweg afgesneden worden zonder dat je
   erheen kunt scrollen. overflow-x:auto klipt de hoeken al voldoende. */
@media screen and (min-width: 601px) {
	.fc-vt-style-professioneel .fc-vt-table-scroll {
		border: 1px solid rgba(0, 0, 0, 0.08);
		border-radius: 12px;
		background: #fff;
	}
}

.fc-vt-style-professioneel .fc-vt-table thead th {
	background-color: rgba(0, 0, 0, 0.04);
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	text-transform: uppercase;
	font-size: 0.75em;
	font-weight: 900;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.fc-vt-style-professioneel .fc-vt-table td {
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.fc-vt-style-professioneel .fc-vt-table tbody tr:last-child td {
	border-bottom: none;
}

.fc-vt-style-professioneel .fc-vt-table tbody tr:hover {
	background-color: rgba(0, 0, 0, 0.02);
}

.fc-vt-style-professioneel .fc-vt-col-price .woocommerce-Price-amount {
	font-weight: 900;
}

/* Filters: één gedeelde omkaderde balk i.p.v. losse boxen per filter */
.fc-vt-style-professioneel .fc-vt-filters {
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.02);
	padding: 10px;
}

.fc-vt-style-professioneel .fc-vt-filter-group {
	border: none;
	background: transparent;
	padding: 0;
	min-width: 0;
}

.fc-vt-style-professioneel .fc-vt-filter-label {
	font-size: 0.68em;
	font-weight: 900;
	letter-spacing: 0.05em;
	opacity: 0.7;
	color: inherit;
}

.fc-vt-style-professioneel .fc-vt-filter-select {
	width: 100%;
	padding: 7px 10px;
	font-size: 0.95em;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 8px;
	background: #fff;
}

/* Sorteericoontjes: dubbele chevron (DataTables-stijl) i.p.v. de
   standaard driehoekjes van de andere stijlen. */
.fc-vt-style-professioneel .fc-vt-sortable::before,
.fc-vt-style-professioneel .fc-vt-sortable::after {
	content: "";
	width: 5px;
	height: 5px;
	font-size: 0;
	border-right: 2px solid rgba(0, 0, 0, 0.45);
	border-bottom: 2px solid rgba(0, 0, 0, 0.45);
	border-radius: 1px;
	opacity: 0.45;
}

.fc-vt-style-professioneel .fc-vt-sortable::before {
	top: 40%;
	transform: translateY(-50%) rotate(225deg);
}

.fc-vt-style-professioneel .fc-vt-sortable::after {
	top: 58%;
	transform: translateY(-50%) rotate(45deg);
}

.fc-vt-style-professioneel .fc-vt-sortable.fc-vt-sort-asc::before,
.fc-vt-style-professioneel .fc-vt-sortable.fc-vt-sort-desc::after {
	opacity: 1;
	border-color: var(--fc-vt-primary);
}

.fc-vt-style-professioneel .fc-vt-sortable.fc-vt-sort-asc::after,
.fc-vt-style-professioneel .fc-vt-sortable.fc-vt-sort-desc::before {
	display: none;
}

.fc-vt-style-professioneel .fc-vt-sortable.fc-vt-sort-asc,
.fc-vt-style-professioneel .fc-vt-sortable.fc-vt-sort-desc {
	background-color: rgba(0, 0, 0, 0.06);
}

/* Knoppen: afgerond en uitgesproken, zoals in het voorbeeld */
.fc-vt-style-professioneel .fc-vt-add-to-cart.button {
	border-radius: 8px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.fc-vt-style-professioneel .fc-vt-reset-button {
	border-radius: 8px;
	font-weight: 800;
}