/* button.al-fav: specifiek genoeg om de knopstijl van het thema (Hello Elementor) te overschrijven */
button.al-fav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--e-global-color-primary, #1a1715);
	font: inherit;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

/* Alleen wat het thema bij hover verandert; maat en letter blijven gelijk */
button.al-fav:hover,
button.al-fav:focus {
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--e-global-color-primary, #1a1715);
	text-decoration: none;
}

.al-fav__icon {
	flex: none;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--e-global-color-primary, #1a1715);
	stroke-width: 1.6;
	transition: fill .2s, stroke .2s, transform .2s;
}

button.al-fav:hover .al-fav__icon,
button.al-fav:focus-visible .al-fav__icon,
button.al-fav.is-active .al-fav__icon,
a.al-fav-link:hover .al-fav__icon {
	stroke: var(--e-global-color-accent, #e30613);
}

button.al-fav.is-active .al-fav__icon {
	fill: var(--e-global-color-accent, #e30613);
}

button.al-fav:active .al-fav__icon {
	transform: scale(.85);
}

button.al-fav:focus-visible,
a.al-fav-link:focus-visible {
	outline: 2px solid var(--e-global-color-accent, #e30613);
	outline-offset: 3px;
}

/* Rond knopje op de werkkaart */
button.al-fav:not(.al-fav--tekst) {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(26, 23, 21, .14);
}

/* Met tekst, op de werkpagina */
button.al-fav--tekst {
	padding: 6px 0;
	font-family: Inter, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

button.al-fav--tekst:hover .al-fav__text {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Hartje met teller in de header */
a.al-fav-link,
a.al-fav-link:hover {
	position: relative;
	display: inline-flex;
	padding: 8px 0;
	color: var(--e-global-color-primary, #1a1715);
	text-decoration: none;
}

.al-fav-count {
	position: absolute;
	top: 1px;
	right: -10px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--e-global-color-accent, #e30613);
	color: #fff;
	font: 600 10px/17px Inter, sans-serif;
	text-align: center;
}

.al-fav-count[hidden] {
	display: none;
}

a.al-fav-link.is-bump .al-fav-count {
	animation: al-fav-bump .35s ease;
}

@keyframes al-fav-bump {
	50% { transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
	.al-fav__icon { transition: none; }
	a.al-fav-link.is-bump .al-fav-count { animation: none; }
}