/*
 * ListingPro header account block.
 * - The avatar is painted as a background, so an empty theme <img src=""> never shows a broken icon.
 * - On small screens the theme hides the whole desktop menu container; bring back the account
 *   block only (the menu and the CTA stay in the burger panel). Logged-in users open the account
 *   menu on tap, guests open the theme's sign-in / register modal.
 */
.lp-join-user-info > ul > li > span img {
	visibility: hidden;
}

@media (max-width: 767px) {
	/*
	 * The theme (and the site's Additional CSS: .header-right-panel > *:not(.mobile-nav-icon))
	 * hides .lp-menu-container here. Bring it back inside the flex row (.header-right-panel),
	 * before the burger icon, and keep only the account block in it. The selectors below are
	 * deliberately heavier than those rules so the result does not depend on stylesheet order.
	 */
	.lp-customize-header-outer .header-right-panel {
		align-items: center;
	}

	.lp-customize-header-outer .header-right-panel > .lp-menu-container {
		display: block;
		order: -1;
		position: static;
		float: none;
		width: auto;
		margin-right: -14px;
		padding: 0;
		background: transparent;
	}

	.lp-customize-header-outer .lp-menu-container .lp-add-listing-btn,
	.lp-customize-header-outer .lp-menu-container .padding-right-10 {
		display: none;
	}

	.lp-customize-header-outer .lp-menu-container > .pull-right {
		float: none;
	}

	.lp-customize-header-outer .lp-joinus-icon-outer {
		display: block;
		padding: 0 8px 0 0;
	}

	.lp-customize-header-outer .lp-join-user-info {
		float: none;
	}

	.lp-customize-header-outer .lp-join-user-info > ul {
		margin: 0;
		padding: 0;
	}

	.lp-customize-header-outer .lp-join-user-info li {
		line-height: 1;
	}

	.lp-customize-header-outer .lp-join-user-info > ul > li > span {
		display: block;
		float: none;
		width: 40px;
		height: 40px;
		margin: 0;
		border-width: 2px;
		cursor: pointer;
	}

	.lp-customize-header-outer .lp-join-user-info > ul > li > a {
		display: none;
	}

	.lp-customize-header-outer .lp-join-user-info .lp-user-menu {
		display: none;
		right: 0;
		left: auto;
		top: calc(100% + 14px);
		margin-left: 0;
	}

	.lp-customize-header-outer .lp-join-user-info li.is-open .lp-user-menu {
		display: block;
		opacity: 1;
		transform: scale(1);
		max-height: 700px;
		width: 200px;
	}

	.lp-customize-header-outer .lp-join-user-info li.is-open .lp-user-menu:after {
		opacity: 1;
		visibility: visible;
	}

	/* Guests: same round icon, tapping it opens the sign-in / register modal (see header-user.js). */
	.lp-customize-header-outer .lp-join-now:not(.after-login) {
		float: none;
	}

	.lp-customize-header-outer .lp-join-now:not(.after-login) > span {
		display: block;
		float: none;
		width: 30px;
		height: 30px;
		margin: 0;
		border-width: 2px;
		cursor: pointer;
	}

	.lp-customize-header-outer .lp-join-now:not(.after-login) > span img {
		visibility: hidden;
	}

	.lp-customize-header-outer .lp-join-now:not(.after-login) > a {
		display: none;
	}
}

/* The avatar opens the public profile on click (see header-user.js). */
.lp-join-user-info > ul > li > span {
	cursor: pointer;
}