.wrapper {
	position: fixed;
	bottom: 50px;
	right: -370px;              /* ⬅️ start off-screen */
	max-width: 345px;
	width: 100%;
	background-color: #6F8F72;
	border-radius: 9px;
	padding: 15px 25px 22px;
	transition: right 0.3s ease;
}

.wrapper.show {
	right: 20px;               /* ⬅️ slide into view */
}

.wrapper header {
	display: flex;
	align-items: center;
	column-gap: 15px;
}

header i {
	color: #fff;
	font-size: 32px;
}

header h2 {
	color: #fff;
	font-weight: 500;
	font-size: 19px;
}

.wrapper .data {
	margin-top: 16px;
}

.wrapper .data p {
	color: #fff;
	font-size: 16px;
}

.data p a {
	color: #fff;
	text-decoration: none;
}

.data p a:hover {
	text-decoration: underline;
}

.wrapper .buttons {
	margin-top: 16px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;

}

.buttons .button {
	border: none;
	color: #fff;
	padding: 9px 0;
	border-radius: 4px;
	background: #b87332;
	width: calc(100% / 2 - 10px);
	transition: all 0.2s ease;
}

.buttons .button:hover {
	background-color: #c9b076;
}