/* Bottom tab bar: phones and tablets (up to 899px). Hidden on desktop. */
.olfx-tabbar { display: none; }
@media (max-width: 899px) {
	body.olfx-has-tabbar { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
	.olfx-tabbar {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
		background: var(--wp--preset--color--base, #fff);
		border-top: 1px solid var(--wp--preset--color--line, #e2e5e9);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.olfx-tabbar ul { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; max-width: 40rem; margin-inline: auto; }
	.olfx-tabbar li { margin: 0; min-width: 0; }
	.olfx-tabbar a {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
		min-height: 64px; padding: .4rem .25rem; box-sizing: border-box;
		color: var(--wp--preset--color--muted, #5d646d); text-decoration: none; font-size: .72rem; line-height: 1.1; font-weight: 500;
		-webkit-tap-highlight-color: transparent;
	}
	.olfx-tabbar__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 2rem; border-radius: 999px; transition: background-color .15s ease; }
	.olfx-tabbar a.is-active { color: var(--wp--preset--color--accent, #2650b8); font-weight: 700; }
	.olfx-tabbar a.is-active .olfx-tabbar__icon { background: color-mix(in srgb, var(--wp--preset--color--accent, #2650b8) 14%, transparent); }
	.olfx-tabbar a:active .olfx-tabbar__icon { background: color-mix(in srgb, var(--wp--preset--color--contrast, #1f2328) 10%, transparent); }
	.olfx-tabbar a:focus-visible { outline: 2px solid var(--wp--preset--color--accent, #2650b8); outline-offset: -4px; border-radius: 12px; }
	.olfx-tabbar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .olfx-tabbar__icon { transition: none; } }

/* The tab bar already has Sign in, so the header button is hidden while it is shown. */
@media (max-width: 899px) { body.olfx-has-tabbar .olfx-usermenu-wrap--guest { display: none; } }