.map-bottom-panel {
	display: none;
}

@media (max-width: 700px) {
	.map-bottom-panel {
		display: flex;
		justify-content: center;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1001;
	}

	.map-bottom-panel app-place-card {
		width: 100%;
		max-width: 400px;
	}

	.bottom-panel {
		display: flex;
		height: 140px;
		width: 100%;
		margin-bottom: var(--wa-space-m);
		background: var(--wa-color-surface-default);
		border-radius: var(--wa-border-radius-l);
		box-shadow: var(--wa-shadow-l);
		overflow: hidden;
	}

	.bottom-panel-image {
		width: 35%;
		height: 100%;
		flex-shrink: 0;
		overflow: hidden;
		position: relative;
	}

	.bottom-panel-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.bottom-panel-content {
		width: 65%;
		padding: var(--wa-space-s);
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--wa-space-2xs);
	}

	.bottom-panel-content .place-title {
		width: 100%;
		font-size: var(--wa-font-size-m);
		font-weight: var(--wa-font-weight-semibold);
	}

	.bottom-panel-content .place-title>span {
		font-size: var(--wa-font-size-s);
		font-weight: var(--wa-font-weight-semibold);
		color: var(--wa-color-text-normal);
	}

	.bottom-panel-content .place-title>div {
		font-size: var(--wa-font-size-xs);
		white-space: nowrap;
	}

	.bottom-panel-content .place-description {
		font-size: var(--wa-font-size-xs);
	}

	.bottom-panel-content .place-card-star-icon {
		font-size: var(--wa-font-size-xs);
	}

	.bottom-panel-content wa-button {
		margin-top: auto;
	}

	.bottom-panel-content wa-button::part(base) {
		font-size: var(--wa-font-size-xs);
		padding: var(--wa-space-xs);
	}

	.bottom-panel-close {
		left: var(--wa-space-s);
	}

}