/* PWA install knoppen */
.pwa-install {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	font-family: "Outfit", system-ui, sans-serif;
	font-weight: 700;
	border-radius: 999px;
	border: 0;
	cursor: pointer;
	text-decoration: none !important;
	transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.pwa-install:hover {
	transform: translateY(-1px);
}
.pwa-install--hero,
.pwa-install--nav {
	padding: 0.85rem 1.35rem;
	font-size: 1rem;
	background: #5cb85c;
	color: #fff !important;
	box-shadow: 0 10px 24px rgba(68, 157, 68, 0.35);
}
.pwa-install--hero:hover,
.pwa-install--nav:hover {
	background: #449d44;
	color: #fff !important;
}
.pwa-install__icon {
	font-size: 1.15em;
	line-height: 1;
}
.pwa-ios-hint,
.pwa-installed {
	margin: 0.55rem 0 0;
	font-size: 0.88rem;
	line-height: 1.45;
	color: #6a635c;
	width: 100%;
	flex-basis: 100%;
}
.pwa-ios-hint strong {
	color: #1e1a17;
}
.l2-nav__pwa-hint {
	color: rgba(255, 255, 255, 0.88);
	margin-top: 0.35rem;
}
.l2-nav__pwa-hint strong {
	color: #fff;
}
.l2-nav__actions .pwa-install--hero {
	order: -1;
}

/* Topbalk: knop naast home */
#navigation-bar > .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#navigation-bar .navbar-brand {
	margin-right: 0.4rem;
}
#navigation-bar .pwa-nav-bar-slot {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
}
#navigation-bar .pwa-install--nav-bar {
	padding: 0.42rem 0.8rem;
	font-size: 0.8rem;
	line-height: 1.2;
	white-space: nowrap;
	background: #5cb85c;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(68, 157, 68, 0.28);
	max-width: 100%;
}
#navigation-bar .pwa-install--nav-bar:hover {
	background: #449d44;
	color: #fff !important;
}
#navigation-bar .pwa-install--nav-bar .pwa-install__icon {
	font-size: 0.95em;
}
#navigation-bar .pwa-nav-bar-hints {
	flex: 1 0 100%;
	order: 5;
}
#navigation-bar .pwa-nav-hint {
	color: #1e1a17;
	max-width: none;
	margin: 0.35rem 0 0.15rem;
	font-size: 0.82rem;
}
#navigation-bar .pwa-nav-hint strong {
	color: #1e1a17;
}
#navigation-bar #mainNavbarCollapse {
	flex: 1 0 100%;
}

@media (min-width: 768px) {
	.l2-nav__actions .pwa-install--hero {
		order: 0;
	}
	/* Home links, install + menu-iconen rechts */
	#navigation-bar .navbar-toggler {
		display: none !important;
	}
	#navigation-bar .navbar-brand {
		margin-right: auto;
		float: none;
	}
	#navigation-bar .pwa-nav-bar-slot {
		flex: 0 0 auto;
		margin-left: 0;
		margin-right: 0.55rem;
		justify-content: flex-end;
	}
	#navigation-bar #mainNavbarCollapse {
		flex: 0 0 auto;
		display: block !important;
		width: auto;
		height: auto !important;
	}
	#navigation-bar .navbar-nav {
		float: none !important;
		display: flex;
		align-items: center;
		margin-left: 0;
		margin-right: 0;
	}
	#navigation-bar .pwa-install--nav-bar {
		padding: 0.5rem 0.95rem;
		font-size: 0.88rem;
	}
}

@media (max-width: 767px) {
	.l2-nav__actions .pwa-install--hero {
		width: 100%;
	}
	#navigation-bar .navbar-brand {
		float: none !important;
		display: inline-flex !important;
		align-items: center;
		margin-right: 0.35rem;
	}
	#navigation-bar .navbar-toggler {
		margin-right: 0.25rem;
	}
	#navigation-bar .pwa-nav-bar-slot {
		flex: 1 1 auto;
		justify-content: flex-end;
		margin-left: auto;
	}
}

@media (max-width: 380px) {
	#navigation-bar .pwa-install--nav-bar {
		padding: 0.38rem 0.65rem;
		font-size: 0.72rem;
		gap: 0.3rem;
	}
	#navigation-bar .navbar-brand {
		font-size: 0.95rem;
		padding-right: 0.25rem;
	}
}