/**
 * Tabbalk onderin (alleen telefoon) + de volg-sterren.
 *
 * De balk zweeft los boven de pagina, als een afgeronde pil met matglas, zoals
 * je dat van NOS, nu.nl en Instagram kent. Het actieve tabblad krijgt een
 * groene chip. Waar de browser geen blur kan, valt hij terug op een vrijwel
 * dekkende witte pil.
 */

.njgt-tabbar { display: none; }

@media (max-width: 720px) {
	.njgt-tabbar {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: calc(10px + env(safe-area-inset-bottom));
		z-index: 9980;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		gap: 2px;
		max-width: 440px;
		margin: 0 auto;
		padding: 5px 6px;
		background: rgba(255, 255, 255, .93);
		border: 1px solid rgba(255, 255, 255, .8);
		border-radius: 28px;
		box-shadow: 0 10px 34px rgba(16, 36, 20, .18), 0 2px 8px rgba(16, 36, 20, .08);
		font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	}
	@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
		.njgt-tabbar {
			background: rgba(255, 255, 255, .68);
			-webkit-backdrop-filter: saturate(180%) blur(22px);
			backdrop-filter: saturate(180%) blur(22px);
		}
	}

	.njgt-tabbar__item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 0;
		min-height: 46px;
		padding: 6px 2px 5px;
		border-radius: 22px;
		text-decoration: none;
		color: #46564B;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: .01em;
		line-height: 1;
		white-space: nowrap;
		transition: background-color .18s ease, color .18s ease;
	}
	.njgt-tabbar__item svg { width: 22px; height: 22px; }
	.njgt-tabbar__item.is-actief {
		background: rgba(27, 94, 32, .11);
		color: #1B5E20;
	}
	.njgt-tabbar__item.is-actief svg { stroke-width: 2.1; }
	.njgt-tabbar__item:active { background: rgba(27, 94, 32, .16); }

	/* Ruimte onder de pagina, zodat de zwevende balk niets afdekt. */
	body { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }

	/* De zwevende terugknop van de app schuift mee omhoog. */
	.njgt-terug { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
	/* Ook de uitnodigingskaarten mogen de balk niet raken. */
	.njgt-pwa { bottom: calc(82px + env(safe-area-inset-bottom)); }
}

@media print {
	.njgt-tabbar { display: none !important; }
}

/* ---------- Volg-ster ---------- */

.njgt-fav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin: -3px 1px -3px -3px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* Zichtbaar genoeg om op te tikken: lichtgroen vlakje met een groene ster. */
	background: rgba(27, 94, 32, .07);
	color: #7A9480;
	cursor: pointer;
	vertical-align: -6px;
	flex: 0 0 auto;
}
.njgt-fav svg { width: 17px; height: 17px; }
.njgt-fav.is-fav { color: #E8A317; background: rgba(232, 163, 23, .14); }
.njgt-fav:active { background: rgba(27, 94, 32, .18); }
.njgt-fav:focus-visible { outline: 2px solid #1B5E20; outline-offset: 1px; }

/* De regel die uitlegt waar die ster voor is. Verdwijnt zodra je iemand volgt. */
.njgt-favhint {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	max-width: 1180px;
	margin: 0 0 1rem;
	padding: .7rem .9rem;
	background: #F4F8F3;
	border: 1px solid #E0EADE;
	border-radius: 12px;
	font-size: .85rem;
	line-height: 1.45;
	color: #3D5A45;
}
.njgt-favhint svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin-top: .1rem;
	color: #E8A317;
}
.njgt-favhint a { color: #1B5E20; }
/* display:flex hierboven wint het van het hidden-attribuut; daarom expliciet. */
.njgt-favhint[hidden] { display: none; }

@media print {
	.njgt-favhint { display: none; }
}

@media print {
	.njgt-fav { display: none; }
}

/* ---------- Mijn NJGT ---------- */

.njgt-mijn {
	max-width: 620px;
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.njgt-mijn__leeg {
	padding: 1.4rem 1.3rem;
	background: #F4F8F3;
	border: 1px solid #E0EADE;
	border-radius: 14px;
}
.njgt-mijn__leeg h3 { margin: 0 0 .4rem; font-size: 1.05rem; color: #1B5E20; }
.njgt-mijn__leeg p { margin: 0; color: #5A6B5F; line-height: 1.5; }
.njgt-mijn__bezig,
.njgt-mijn__wacht { color: #5A6B5F; font-style: italic; margin: .3rem 0 0; }

.njgt-mijn__kaart {
	padding: 1rem 1.1rem;
	margin-bottom: .8rem;
	background: #fff;
	border: 1px solid #E0EADE;
	border-radius: 14px;
}
.njgt-mijn__kaart header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
}
.njgt-mijn__kaart h3 { margin: 0; font-size: 1.1rem; color: #12211A; }
.njgt-mijn__club { margin: .1rem 0 0; font-size: .88rem; color: #5A6B5F; }

.njgt-mijn__blok {
	margin-top: .9rem;
	padding-top: .8rem;
	border-top: 1px solid #EEF3EC;
}
.njgt-mijn__label {
	display: block;
	margin-bottom: .25rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6B7D70;
}
.njgt-mijn__blok p { margin: .1rem 0; line-height: 1.4; }
.njgt-mijn__start { color: #1B5E20; }
.njgt-mijn__wed { font-size: .88rem; color: #5A6B5F; }