/* =========================================================
   Servetje.nl — Sitebrede basiscomponenten (iconen, knoppen)
   ========================================================= */

/* Zorgt dat [hidden] altijd wint, ook op elementen waarvan een eigen
   class (bv. display:flex) anders een hogere specificiteit zou hebben. */
[hidden] {
	display: none !important;
}

.servetje-icon {
	width: 22px;
	height: 22px;
	display: inline-block;
	flex-shrink: 0;
}

.servetje-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	line-height: 1.2;
	font-family: var(--servetje-font);
}

.servetje-btn--primary {
	background: var(--servetje-orange);
	color: #ffffff;
}

.servetje-btn--primary:hover,
.servetje-btn--primary:focus {
	background: var(--servetje-orange-dark);
	color: #ffffff;
}

.servetje-btn--outline {
	background: transparent;
	border-color: var(--servetje-teal);
	color: var(--servetje-teal);
}

.servetje-btn--outline:hover,
.servetje-btn--outline:focus {
	background: var(--servetje-teal);
	color: #ffffff;
}

.servetje-btn--small {
	padding: 9px 20px;
	font-size: 14px;
}