/* Mobile only: sticky Call / WhatsApp / Book bar (inc/mobile-bar.php) and the mobile menu contact buttons. */

.we-mobile-bar {
	display: none;
}

@media only screen and (max-width: 767px) {
	:root {
		--we-bar-height: 60px;
	}

	.we-mobile-bar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		/* Above the page, below the cookie banner (99999) and the pop-up form. */
		z-index: 9000;
		gap: 6px;
		padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
		background-color: #fff;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
	}

	.we-mobile-bar__btn {
		flex: 1 1 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-height: 48px;
		padding: 0 4px;
		background-color: #54bec4;
		color: #000;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
		border-radius: 4px;
	}

	.we-mobile-bar__btn:hover,
	.we-mobile-bar__btn:focus,
	.we-mobile-bar__btn:active {
		color: #000;
		background-color: #43a9af;
		text-decoration: none;
	}

	.we-mobile-bar__btn:focus-visible {
		outline: 2px solid #000;
		outline-offset: 2px;
	}

	/* Keep the bottom of every page (and the footer) clear of the bar. */
	body {
		padding-bottom: calc(var(--we-bar-height) + env(safe-area-inset-bottom));
	}

	/* Back-to-top arrow and Google's reCAPTCHA badge sit above the bar. */
	#scroll-to-top.show {
		bottom: calc(var(--we-bar-height) + 16px + env(safe-area-inset-bottom));
	}

	.grecaptcha-badge {
		bottom: calc(var(--we-bar-height) + 14px + env(safe-area-inset-bottom)) !important;
	}
}

/* Mobile menu: Call and WhatsApp buttons in the same style as "Make a booking", all three 48px tall. */
.mobile-menu li.we-menu-btn > a,
.mobile-menu #menu-item-442 > a {
	display: block;
	min-height: 48px;
	padding: 17px 12px;
	background-color: #54bec4;
	font-size: 14px;
	font-weight: 400;
	line-height: 14px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3px;
}

.mobile-menu li.we-menu-btn > a {
	color: #000 !important;
}