.msb-bar-wrapper {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	transform: translate3d(0, 0, 0);
	transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	perspective: 1000px;
	-webkit-perspective: 1000px;
}

.msb-bar-wrapper.msb-hidden {
	transform: translate3d(0, 100%, 0);
}

.msb-bar {
	display: flex;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
}

.msb-main-btn {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	border: none;
	box-sizing: border-box;
	transition: opacity 0.2s ease;
}

.msb-main-btn:hover,
.msb-main-btn:focus {
	opacity: 0.9;
	text-decoration: none;
}

.msb-main-btn svg,
.msb-main-btn i {
	display: inline-flex;
	flex-shrink: 0;
}

.msb-wa-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-sizing: border-box;
	transition: opacity 0.2s ease;
}

.msb-wa-btn:hover,
.msb-wa-btn:focus {
	opacity: 0.9;
}

.msb-wa-btn svg,
.msb-wa-btn i {
	display: inline-flex;
}

/* When the WhatsApp button is absent, the main button naturally fills 100%
   of the bar because it's the only flex child with flex: 1 1 auto. */