/* ==========================================================================
   Buttons - Schildersbedrijf J. Bastiaansen
   Minimalistische, conversiegerichte buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	border: 1px solid transparent;
	border-radius: 6px;
	font-weight: 500;
	font-size: 1rem;
	cursor: pointer;
	background: var(--bg-card);
	color: var(--text);
	transition: all 250ms ease;
	white-space: nowrap;
}

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

.btn-primary:hover {
	background: var(--accent-dark);
	color: #ffffff;
	transform: translateY(-1px);
}

.btn-secondary {
	background: var(--bg);
	color: var(--text);
	border-color: var(--border);
}

.btn-secondary:hover {
	border-color: var(--text);
	background: var(--bg-soft);
}

.btn-outline {
	background: transparent;
	color: #ffffff;
	border: 2px solid #ffffff;
}

.btn-outline:hover {
	background: #ffffff;
	color: var(--text);
}

.btn-ghost {
	background: var(--bg-soft);
	color: var(--text-soft);
	border-color: var(--border);
}

.btn-ghost:hover {
	background: var(--accent-soft);
	color: var(--text);
	border-color: var(--accent);
}

.btn-sm {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

.btn-lg {
	padding: 1rem 2rem;
	font-size: 1.125rem;
}

.btn .hex-icon { 
	width: 18px; 
	height: 18px; 
}