.modal-box {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.modal-box-wrapper.active .show-modal {
	display: none;
}
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.3);
	opacity: 0;
	pointer-events: none;
	z-index: 2;
}
.modal-box-wrapper.active .overlay {
	opacity: 1;
	pointer-events: auto;
}
.modal-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 500px;
	width: 100%;
	border-radius: 20px;
	background-color: var(--bg-color);
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s ease;
	transform: translate(-50%, -50%) scale(1.2);
	z-index: 2;
}
.modal-box-wrapper.active .modal-box.show , .modal-box-wrapper.active .navigation-menu.show {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, -50%) scale(1);
}
.modal-header {
	display: flex;
	width: 100%;
	justify-content: center;
	border-bottom: 1px solid var(--borderColor);
	padding: 30px 0;
}
.modal-header span {
	font-weight: bold;
	font-size: 18px;
}
.modal-header svg {
	position: absolute;
	left: 15px;
	top: 15px;
	cursor: pointer;
	fill: var(--textColor);
}
.modal-body {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px 20px;
}
.share-buttons {
	display: flex;
	align-items: center;
	gap: 30px;
}
.share-buttons a {
	display: flex;
}
/**login modal**/
.modal-box.login .modal-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.modal-body p {
	margin: 0;
}
.body-buttons {
	display: flex;
	align-items: center;
	gap: 20px;
}
.go-to-login {
	background: var(--primary);
	color: var(--textColorWhite) !important;
	border-radius: 10px;
	padding: 8px 35px;
}
.close-modal {
	border-radius: 10px;
	padding: 8px 35px;
	background: var(--borderColor);
	cursor: pointer;
}