:root {
	--tps-ux-content-max: 1180px;
	--tps-mobile-viewport-height: 100dvh;
	--tps-mobile-home-fill: var(--bb-body-background-color, #fff);
	--tps-mobile-home-image: none;
	--tps-ux-ad-max-height: 50vh;
	--tps-mobile-page-top-spacing: 24px;
	--tps-mobile-feed-top-spacing: 8px;
	--tps-page-transition-speed: 220ms;
	--tps-transition-enter-x: 0;
	--tps-transition-enter-y: 0;
	--tps-transition-exit-x: 0;
	--tps-transition-exit-y: 0;
	--tps-mobile-menu-width: 100%;
	--tps-mobile-menu-font-size: 14px;
	--tps-mobile-menu-icon-size: 20px;
	--tps-mobile-menu-item-padding: 13px;
	--tps-mobile-menu-item-radius: 8px;
}

/* The BuddyPanel already identifies the destination; keep the feed canvas uncluttered. */
body.tps-news-feed-page .entry-header {
	display: none !important;
}

@keyframes tps-ux-view-transition-in {
	from {
		opacity: 0;
		transform: translate3d(var(--tps-transition-enter-x), var(--tps-transition-enter-y), 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes tps-ux-view-transition-out {
	from {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	to {
		opacity: 0;
		transform: translate3d(var(--tps-transition-exit-x), var(--tps-transition-exit-y), 0);
	}
}

body.tps-experience-ux .member-status.online,
body.tps-experience-ux .member-status.is-online {
	border: 2px solid #fff;
	background: #20bf63 !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

body.tps-experience-ux .activity-avatar {
	position: relative;
}

body.tps-experience-ux .activity-avatar .tps-feed-online-dot {
	position: absolute;
	right: 0;
	bottom: 1px;
	z-index: 2;
	width: 13px;
	height: 13px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #20bf63;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

/*
 * BuddyBoss paints the magnifier as a search-input background. Phase 1's
 * compact field padding otherwise lets placeholder and entered text collide
 * with the icon.
 */
body.tps-experience-ux .tps-phase-one input[type="search"],
body.tps-experience-ux .tps-mec-form input[type="search"] {
	padding-left: 2.6rem !important;
	background-position: left .75rem center !important;
}

/* Keep the member experience on one readable, centered desktop canvas. */
@media screen and (min-width: 1181px) {
	body.tps-experience-ux:not(.home):not(.front-page):not(.page-template-page-fullscreen) #content.site-content > .container,
	body.tps-experience-ux:not(.home):not(.front-page):not(.page-template-page-fullscreen) .site-content > .container {
		width: calc(100% - 48px);
		max-width: var(--tps-ux-content-max) !important;
		margin-right: auto;
		margin-left: auto;
	}

	body.tps-experience-ux:not(.home):not(.front-page):not(.page-template-page-fullscreen) #content .site-content-grid {
		width: 100%;
		max-width: var(--tps-ux-content-max) !important;
		margin-right: auto;
		margin-left: auto;
	}
}

/* Give image-less meetups the same branded visual treatment as uploaded covers. */
body.tps-experience-ux .tps-meetup-card__cover:not(.has-cover),
body.tps-experience-ux .tps-meetup-detail__hero:not(.has-cover) {
	background-color: #17367f;
	background-image: var(--tps-ux-meetup-default-cover, url("tps-meetup-default-cover.svg")) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: cover !important;
}

/* Keep Wbcom/BuddyPress ad units within one readable viewport. */
.wbcom-advertisement,
.wbcom-bp-ads,
.wb-ads,
.wb-ads-wrapper,
.wb-ads-rotator,
.wbcom-buddypress-ad,
.bp-activity-ad,
.activity-item.advertisement,
[class*="wbads"],
[class*="wb-ads"],
[class*="wb_ads"],
[class*="bp-advert"],
[class*="bp_advert"],
[class*="wbcom"][class*="-ad"],
[class*="wbcom"][class*="-ads"] {
	max-height: var(--tps-ux-ad-max-height, 50vh) !important;
	overflow: hidden !important;
}

.wbcom-advertisement img,
.wbcom-advertisement video,
.wbcom-advertisement iframe,
.wbcom-bp-ads img,
.wbcom-bp-ads video,
.wbcom-bp-ads iframe,
.bp-activity-ad img,
.bp-activity-ad video,
.bp-activity-ad iframe,
.activity-item.advertisement img,
.activity-item.advertisement video,
.activity-item.advertisement iframe,
.wb-ads-rotator img,
.wb-ads-rotator video,
.wb-ads-rotator iframe,
.wb-ads-rotator .image-ads,
.wb-ads-rotator .rich-content-ads,
.wb-ads-rotator .plain-text-and-code-ads,
[class*="wbads"] img,
[class*="wbads"] video,
[class*="wbads"] iframe,
[class*="wb-ads"] img,
[class*="wb-ads"] video,
[class*="wb-ads"] iframe,
[class*="wb_ads"] img,
[class*="wb_ads"] video,
[class*="wb_ads"] iframe,
[class*="bp-advert"] img,
[class*="bp-advert"] video,
[class*="bp-advert"] iframe,
[class*="bp_advert"] img,
[class*="bp_advert"] video,
[class*="bp_advert"] iframe {
	display: block;
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	max-height: var(--tps-ux-ad-max-height, 50vh) !important;
	margin-right: auto !important;
	margin-left: auto !important;
	object-fit: contain;
}

.tps-photo-post-fab {
	display: inline-grid !important;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--bb-primary-color, #2357d9);
	color: #fff !important;
	text-decoration: none !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

.tps-photo-post-fab {
	position: fixed;
	z-index: 9998;
	right: max(22px, env(safe-area-inset-right));
	bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px));
	width: 56px;
	height: 56px;
	font-size: 25px;
}

.tps-photo-post-fab:hover,
.tps-photo-post-fab:focus {
	background: var(--bb-primary-color-hover, #173b97);
	color: #fff !important;
	transform: translateY(-1px);
}

.tps-ux-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Cover the physical phone viewport and its safe-area edge, not a simulated 100vh. */
@media screen and (max-width: 782px) {
	/*
	 * iOS zooms the page when a focused control is rendered below 16px.
	 * Use a readable control size while leaving user pinch zoom enabled.
	 */
	body.tps-experience-ux input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
	body.tps-experience-ux select,
	body.tps-experience-ux textarea {
		font-size: 16px !important;
	}

	body.tps-experience-ux .tps-mobile-share-menu {
		box-sizing: border-box !important;
		position: fixed !important;
		z-index: 100000 !important;
		top: var(--tps-mobile-share-top, 12px) !important;
		right: max(12px, env(safe-area-inset-right)) !important;
		left: max(12px, env(safe-area-inset-left)) !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		max-height: calc(100dvh - 24px) !important;
		margin: 0 !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		transform: none !important;
		overflow-wrap: anywhere;
	}

	body.tps-experience-ux.tps-feature-page #content.site-content,
	body.tps-experience-ux.tps-feature-page .site-content {
		padding-top: var(--tps-mobile-page-top-spacing, 24px) !important;
	}

	body.tps-experience-ux.tps-news-feed-page #content.site-content > .container > .site-content-grid,
	body.tps-experience-ux.tps-news-feed-page .site-content > .container > .site-content-grid {
		margin-top: var(--tps-mobile-feed-top-spacing, 8px) !important;
	}

	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-wrapper {
		width: var(--tps-mobile-menu-width, 100%);
		max-width: 100%;
		background-color: var(--tps-mobile-menu-panel-color, var(--bb-content-background-color, #fff));
	}

	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner {
		background-color: var(--tps-mobile-menu-panel-color, var(--bb-content-background-color, #fff));
	}

	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-wrapper .bb-mobile-panel-header {
		background-color: var(--tps-mobile-menu-header-color, var(--bb-content-background-color, #fff));
	}

	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-header .user-name,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-header .my-account-link a,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-header .bb-close-panel i {
		color: var(--tps-mobile-menu-text-color, var(--bb-headings-color, #1e2132));
	}

	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .side-panel-menu li:not(.bb-menu-section) > a,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .side-panel-menu .sub-menu a,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .bb-primary-menu li:not(.bb-menu-section) > a {
		box-sizing: border-box;
		margin: 2px 0;
		padding: var(--tps-mobile-menu-item-padding, 13px) 12px;
		border-radius: var(--tps-mobile-menu-item-radius, 8px);
		color: var(--tps-mobile-menu-text-color, var(--bb-headings-color, #1e2132));
		font-size: var(--tps-mobile-menu-font-size, 14px);
	}

	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .side-panel-menu li:not(.bb-menu-section) > a > i,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .side-panel-menu .sub-menu a > i,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .bb-primary-menu li:not(.bb-menu-section) > a > i {
		color: var(--tps-mobile-menu-icon-color, var(--bb-headings-color, #1e2132));
		font-size: var(--tps-mobile-menu-icon-size, 20px);
	}

	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .buddypanel-menu li.bb-menu-section a {
		color: var(--tps-mobile-menu-section-color, var(--bb-headings-color, #1e2132));
		font-size: var(--tps-mobile-menu-font-size, 14px);
	}

	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .side-panel-menu li:not(.bb-menu-section) > a:hover,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .side-panel-menu li:not(.bb-menu-section) > a:focus,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .side-panel-menu li.current-menu-item > a,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .side-panel-menu li.current-menu-ancestor > a,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .bb-primary-menu li:not(.bb-menu-section) > a:hover,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .bb-primary-menu li:not(.bb-menu-section) > a:focus,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .bb-primary-menu li.current-menu-item > a,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .bb-primary-menu li.current-menu-ancestor > a {
		background-color: var(--tps-mobile-menu-active-background, transparent);
		color: var(--tps-mobile-menu-active-color, var(--bb-primary-color, #385dff));
	}

	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .side-panel-menu li:not(.bb-menu-section) > a:hover > i,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .side-panel-menu li:not(.bb-menu-section) > a:focus > i,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .side-panel-menu li.current-menu-item > a > i,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .side-panel-menu li.current-menu-ancestor > a > i,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .bb-primary-menu li:not(.bb-menu-section) > a:hover > i,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .bb-primary-menu li:not(.bb-menu-section) > a:focus > i,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .bb-primary-menu li.current-menu-item > a > i,
	body.tps-experience-ux.tps-custom-mobile-menu .bb-mobile-panel-inner .bb-primary-menu li.current-menu-ancestor > a > i {
		color: var(--tps-mobile-menu-active-color, var(--bb-primary-color, #385dff));
	}

	body.tps-experience-ux .bb-right-panel,
	body.tps-experience-ux #secondary.widget-area,
	body.tps-experience-ux aside.widget-area,
	body.tps-experience-ux .sidebar-right,
	body.tps-experience-ux .activity-sidebar,
	body.tps-experience-ux .bp-profile-wrapper > aside {
		display: none !important;
	}

	body.tps-experience-ux .site-content-grid,
	body.tps-experience-ux .bb-grid,
	body.tps-experience-ux .bb-grid-cell {
		width: 100% !important;
		max-width: 100% !important;
	}

	html.tps-mobile-home-viewport,
	html.tps-mobile-home-viewport body.home.tps-experience-ux,
	html.tps-mobile-home-viewport body.front-page.tps-experience-ux {
		min-height: var(--tps-mobile-viewport-height, 100dvh);
		background-color: var(--tps-mobile-home-fill, #fff) !important;
		background-image: var(--tps-mobile-home-image, none) !important;
		background-repeat: no-repeat !important;
		background-position: center bottom !important;
		background-size: cover !important;
	}

	body.home.tps-experience-ux #page,
	body.front-page.tps-experience-ux #page {
		min-height: var(--tps-mobile-viewport-height, 100dvh);
		background: transparent !important;
	}

	body.home.tps-experience-ux #content,
	body.home.tps-experience-ux .fl-builder-content-primary,
	body.front-page.tps-experience-ux #content,
	body.front-page.tps-experience-ux .fl-builder-content-primary {
		min-height: var(--tps-home-content-min-height, 100dvh);
	}

}

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none !important;
	}
}