/**
 * StarzMeet — mobile bottom tab bar (inc/mobile-tabbar.php).
 *
 * Phones only. Desktop keeps the normal header nav, so everything here lives
 * inside the mobile breakpoint and the bar is display:none above it.
 */
.sm-tabbar { display: none; }

@media (max-width: 991px) {
	.sm-tabbar {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 99991; /* above the region switcher (99990), below its modal */
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .97);
		border-top: 1px solid #E5E1F2;
		box-shadow: 0 -4px 18px rgba(30, 35, 56, .10);
	}
	@supports (backdrop-filter: blur(12px)) {
		.sm-tabbar {
			background: rgba(255, 255, 255, .86);
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
		}
	}

	.sm-tabbar .sm-tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 4px 0;
		min-height: 46px; /* comfortable tap target */
		color: #5C6478 !important;
		font-size: 10.5px;
		font-weight: 600;
		line-height: 1.2;
		text-align: center;
		text-decoration: none !important;
		-webkit-tap-highlight-color: transparent;
	}
	.sm-tabbar .sm-tab svg { width: 23px; height: 23px; }

	/* Guard: other scripts decorate matching links across the page (e.g.
	   starzmeet-auth.js adds a Sign Up button beside every sign-in trigger).
	   Anything that lands in here would break the 4-column grid. */
	.sm-tabbar > *:not(.sm-tab) { display: none !important; }
	.sm-tabbar .sm-tab.is-on { color: #7C3AED !important; }
	.sm-tabbar .sm-tab.is-on svg { fill: rgba(124, 58, 237, .16); }
	.sm-tabbar .sm-tab:active { opacity: .65; }

	/* Room for the bar so it never covers the last line of a page or a footer
	   link. The provider page sets its own padding for its action bar. */
	body:not(.single-listing) { padding-bottom: 68px; }

	/* The region switcher is fixed to the bottom-right and would sit on top of
	   the bar — lift it clear. */
	.szr-switch { bottom: calc(74px + env(safe-area-inset-bottom)) !important; }

	/* Same for Google's reCAPTCHA v3 badge. It is fixed bottom-right with an
	   inline style and z-index 2000000000, so it covered the Menu tab and
	   swallowed the tap — elementFromPoint at the tab's centre returned the
	   badge. Inline styles mean !important is required. */
	.grecaptcha-badge {
		bottom: calc(118px + env(safe-area-inset-bottom)) !important; /* clears the switcher too */
		z-index: 99989 !important; /* below the bar (99991) and the switcher */
	}
}