/*
 * Favorietenpagina (Velocity Wishlist) in de WoodXL-huisstijl.
 * Gescoped op de shortcode-widget met klasse wxl-wishlist; teksten/kolommen via de plugin-instellingen.
 */
.wxl-wishlist {
	/* ---------- Lijst ---------- */
	.vwish-table-container {
		overflow: visible;
		border: 1px solid var(--e-global-color-wxlgray2);
		border-radius: 12px;
		background: var(--e-global-color-wxlwhite);
	}

	table.vwish-table {
		width: 100%;
		margin: 0;
		border: 0;
		border-collapse: collapse;

		th,
		td {
			padding: 16px;
			border: 0;
			border-bottom: 1px solid var(--e-global-color-wxlgray2);
			background: none !important;
			vertical-align: middle;
			text-align: start;
		}

		tbody tr:last-child td {
			border-bottom: 0;
		}

		th {
			padding-top: 14px;
			padding-bottom: 14px;
			font-family: var(--e-global-typography-secondary-font-family), sans-serif;
			font-size: 12px;
			font-weight: 600;
			letter-spacing: 0.04em;
			text-transform: uppercase;
			color: var(--e-global-color-wxltaupel);
		}

		tbody tr:hover td {
			background: var(--e-global-color-wxlcream) !important;
		}
	}

	/* Kolomkop "Afbeelding" is overbodig */
	table.vwish-table th.vwish-col-image {
		font-size: 0;
	}

	.vwish-col-image {
		width: 96px;

		img {
			display: block;
			width: 64px;
			height: 64px;
			border-radius: 8px;
			background: var(--e-global-color-wxlcream);
			object-fit: contain;
		}
	}

	.vwish-product-name {
		font-family: var(--e-global-typography-text-font-family), sans-serif;
		font-size: 15px;
		font-weight: 700;
		text-decoration: none;
		color: var(--e-global-color-secondary);

		&:hover {
			color: var(--e-global-color-accent);
		}
	}

	.vwish-categories {
		margin-top: 4px;
		font-family: var(--e-global-typography-wxlcatlbl-font-family), sans-serif;
		font-size: 11px;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--e-global-color-wxltaupel);

		a {
			color: inherit;
			text-decoration: none;
		}
	}

	.vwish-col-price {
		font-family: var(--e-global-typography-wxlprice-font-family), sans-serif;
		font-size: 18px;
		font-weight: 700;
		white-space: nowrap;
		color: var(--e-global-color-secondary);

		del {
			font-size: 0.7em;
			font-weight: 400;
			color: var(--e-global-color-wxltaupel);
		}

		ins {
			text-decoration: none;
		}
	}

	/* Voorraadlabel */
	.vwish-stock-status {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		font-family: var(--e-global-typography-secondary-font-family), sans-serif;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.02em;
		white-space: nowrap;
		text-transform: uppercase;
		color: var(--e-global-color-wxlgreen);

		&::before {
			content: "";
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: currentColor;
		}

		&.onbackorder {
			color: var(--e-global-color-accent);
		}

		&.outofstock {
			color: var(--e-global-color-wxltaupel);
		}
	}

	/* Knoppen */
	.vwish-col-actions {
		width: 1%;
		white-space: nowrap;
	}

	a.button.vwish-add-to-cart,
	a.button.vwish-view-product {
		display: inline-block;
		margin: 0;
		padding: 12px 20px;
		border: 0;
		border-radius: 6px;
		background: var(--e-global-color-primary);
		font-family: var(--e-global-typography-accent-font-family), sans-serif;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
		color: var(--e-global-color-wxlwhite);

		&:hover {
			background: var(--e-global-color-accent);
			color: var(--e-global-color-wxlwhite);
		}
	}

	a.button.vwish-view-product {
		border: 1.5px solid var(--e-global-color-wxlgray3);
		background: var(--e-global-color-wxlwhite);
		color: var(--e-global-color-wxlbrown);

		&:hover {
			border-color: var(--e-global-color-primary);
			background: var(--e-global-color-wxlwhite);
			color: var(--e-global-color-accent);
		}
	}

	.vwish-col-remove {
		width: 1%;
	}

	button.vwish-remove-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		min-height: 0;
		padding: 0;
		border: 1.5px solid var(--e-global-color-wxlgray2);
		border-radius: 50%;
		background: var(--e-global-color-wxlwhite);
		color: var(--e-global-color-wxltaupel);
		cursor: pointer;

		&:hover {
			border-color: var(--e-global-color-wxlred);
			background: var(--e-global-color-wxlwhite);
			color: var(--e-global-color-wxlred);
		}

		.dashicons {
			width: 18px;
			height: 18px;
			font-size: 18px;
		}
	}

	/* ---------- Lege staat ---------- */
	.vwish-empty {
		max-width: 520px;
		margin: 0 auto;
		padding: 48px 24px;
		border: 1px solid var(--e-global-color-wxlgray2);
		border-radius: 12px;
		background: var(--e-global-color-wxlwhite);
		text-align: center;

		.vwish-empty-icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 64px;
			height: 64px;
			margin-bottom: 16px;
			border-radius: 50%;
			background: var(--e-global-color-wxlorlt);
			color: var(--e-global-color-primary);

			.dashicons {
				width: 28px;
				height: 28px;
				font-size: 28px;
			}
		}

		h3 {
			margin: 0 0 8px;
			font-family: var(--e-global-typography-primary-font-family), sans-serif;
			font-size: 22px;
			font-weight: 700;
			text-transform: uppercase;
			color: var(--e-global-color-secondary);
		}

		p {
			margin: 0 0 22px;
			font-size: 15px;
			color: var(--e-global-color-text);
		}
	}

	a.vwish-shop-btn {
		display: inline-block;
		padding: 14px 26px;
		border: 0;
		border-radius: 6px;
		background: var(--e-global-color-primary);
		font-family: var(--e-global-typography-accent-font-family), sans-serif;
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
		text-transform: uppercase;
		color: var(--e-global-color-wxlwhite);

		&:hover {
			background: var(--e-global-color-accent);
			color: var(--e-global-color-wxlwhite);
		}
	}
}

/* ---------- Mobiel: elk product als kaart ---------- */
@media (max-width: 767px) {
	.wxl-wishlist {
		.vwish-table-container {
			border: 0;
			background: none;
		}

		table.vwish-table {
			thead {
				display: none;
			}

			tbody {
				display: flex;
				flex-direction: column;
				gap: 12px;
			}

			tr.vwish-item {
				display: grid;
				grid-template-columns: 64px minmax(0, 1fr) 36px;
				grid-template-areas:
					"img name remove"
					"img price price"
					"stock stock stock"
					"actions actions actions";
				gap: 6px 12px;
				padding: 14px;
				border: 1px solid var(--e-global-color-wxlgray2);
				border-radius: 12px;
				background: var(--e-global-color-wxlwhite);
			}

			td {
				display: block;
				width: auto !important;
				padding: 0;
				border: 0;
			}

			tbody tr:hover td {
				background: none !important;
			}
		}

		.vwish-col-image { grid-area: img; }
		.vwish-col-name { grid-area: name; }
		.vwish-col-price { grid-area: price; font-size: 16px; }
		.vwish-col-stock { grid-area: stock; }
		.vwish-col-actions { grid-area: actions; }
		.vwish-col-remove { grid-area: remove; }

		a.button.vwish-add-to-cart,
		a.button.vwish-view-product {
			display: block;
			width: 100%;
			margin-top: 6px;
			text-align: center;
		}
	}
}

/* ==========================================================================
   Site-breed (niet alleen op de favorietenpagina)
   ========================================================================== */

/* ---------- Iconen zonder Dashicons-lettertype ----------
   De plugin gebruikt Dashicons (hartje lege staat, kruisje verwijderen). Dat lettertype laadt WordPress
   alleen met de admin-balk, dus voor bezoekers bleven de iconen leeg. Hier als SVG-masker in currentColor. */
.vwish-empty-icon .dashicons,
.vwish-remove-btn .dashicons {
	display: inline-block;
	background-color: currentColor;
	-webkit-mask: var(--wxl-icon) center / contain no-repeat;
	mask: var(--wxl-icon) center / contain no-repeat;

	&::before {
		content: none !important;
	}
}

.vwish-empty-icon .dashicons-heart {
	--wxl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.5 2.7 4.5 6.6 4.1c2.1-.2 3.9.9 5.4 2.8 1.5-1.9 3.3-3 5.4-2.8 3.9.4 5.7 4.4 4.2 7.7C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
}

.vwish-remove-btn .dashicons-no-alt {
	--wxl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
	width: 14px !important;
	height: 14px !important;
}

/* ---------- Hartje op de productpagina (onder het vergrootglas van de galerij) ---------- */
.wxl-wish-pdp .vwish-button.icon-only {
	width: 36px;
	height: 36px;
	min-width: 36px;
	font-size: 16px;
	box-shadow: none !important;
}

/* ---------- Melding na toevoegen/verwijderen (pop-up rechtsboven) ---------- */
.vwish-notification {
	min-width: 300px;
	max-width: 360px;
	border: 1px solid var(--e-global-color-wxlgray2) !important;
	border-left: 4px solid var(--e-global-color-wxlgreen) !important;
	border-radius: 8px;
	background: var(--e-global-color-wxlwhite);
	box-shadow: 0 14px 30px -14px rgb(71 40 10 / 35%);
	backdrop-filter: none;

	&.vwish-notification-error {
		border-left-color: var(--e-global-color-wxlred) !important;
	}

	/* Bij een sticky header met admin-balk: onder de header blijven */
	body.admin-bar & {
		top: 100px;
	}
}

.vwish-notification-content {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	align-items: center;
	gap: 6px 12px;
	padding: 14px 40px 14px 14px;
}

.vwish-notification-icon {
	width: 28px;
	height: 28px;
	margin: 0;
	font-size: 14px;

	.vwish-notification-success & {
		background: var(--e-global-color-wxlgreen);
	}

	.vwish-notification-error & {
		background: var(--e-global-color-wxlred);
	}
}

.vwish-notification-message {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--e-global-color-secondary);
}

.vwish-notification-actions {
	grid-column: 2;
	margin: 0;
}

a.vwish-notification-link {
	padding: 8px 14px;
	border-radius: 6px;
	background: var(--e-global-color-primary);
	font-family: var(--e-global-typography-wxlbtnsm-font-family), sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--e-global-color-wxlwhite);

	&:hover {
		background: var(--e-global-color-accent);
		color: var(--e-global-color-wxlwhite);
		transform: none;
	}
}

/* Sluitknop: klein kruisje (kit-knopstijl geldt anders ook voor deze <button>) */
button.vwish-notification-close {
	top: 8px !important;
	right: 8px !important;
	width: 26px !important;
	height: 26px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--e-global-typography-text-font-family), sans-serif !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: var(--e-global-color-wxltaupel) !important;

	&:hover {
		background: var(--e-global-color-wxlcream) !important;
		color: var(--e-global-color-secondary) !important;
		transform: none;
	}
}

@media (max-width: 768px) {
	.vwish-notification {
		max-width: none;
		min-width: 0;
	}
}