/**
 * Alsó tálca mobilra (app-szerű navigáció).
 * Nagy képernyőn nem látszik – ott a fejléc menüje a navigáció.
 */

.vjt-tabbar {
	display: none;
}

@media (max-width: 1000px) {

	/* A tálca alatt ne vesszen el a tartalom vége. */
	body {
		padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
	}

	/* A fejlécben a menü és a belépés gomb helyét átveszi a tálca. */
	.site-header .nav-main,
	.site-header .nav-toggle,
	.site-header .auth-toggle,
	.site-header .header-account {
		display: none !important;
	}

	.vjt-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 150;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		align-items: end;
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, .96);
		backdrop-filter: saturate(1.6) blur(10px);
		border-top: 1px solid var(--line, #E5DCD0);
		box-shadow: 0 -6px 24px rgba(58, 58, 56, .08);
	}

	.vjt-tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 6px 2px;
		font-size: 10.5px;
		line-height: 1.15;
		font-weight: 500;
		text-align: center;
		text-decoration: none;
		color: var(--muted, #7C7A73);
		-webkit-tap-highlight-color: transparent;
	}

	.vjt-tab svg {
		width: 23px;
		height: 23px;
	}

	.vjt-tab.is-active {
		color: var(--tan-dark, #96683F);
		font-weight: 600;
	}

	/* Középső, kiemelt gomb. */
	.vjt-tab-center {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding-bottom: 6px;
	}

	.vjt-tab-fab {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 54px;
		height: 54px;
		margin-top: -22px;
		padding: 0;
		border: 3px solid #fff;
		border-radius: 50%;
		background: var(--tan, #B4835D);
		color: #fff;
		cursor: pointer;
		box-shadow: 0 8px 18px rgba(180, 131, 93, .38);
		-webkit-tap-highlight-color: transparent;
	}

	.vjt-tab-fab svg {
		width: 26px;
		height: 26px;
	}

	.vjt-tab-fab:active {
		transform: translateY(1px);
	}

	.vjt-tab-fab.is-active {
		background: var(--tan-dark, #96683F);
	}

	.vjt-tab-fab-label {
		font-size: 10.5px;
		line-height: 1.15;
		font-weight: 600;
		color: var(--tan-dark, #96683F);
	}

	/* A telepítő sáv ne takarja a tálcát. */
	.vj-pwa-bar {
		bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
	}
}