.oct-metabox {
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	border: 1px solid #00E3C0;
	box-sizing: border-box;
	border-radius: 15px;
	margin: 0;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-family: $font-family-base;
	font-size: 12px;
	line-height: 18px;
	color: #000000;
	background: #fff url(../img/bg-octolize.svg) no-repeat bottom right;
	background-size: contain;
	overflow: hidden;

	.oct-metabox-title {
		margin: 0;
		height: auto;
		font-family: $font-family-heading;
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: #000000;
	}

	ul {
		display: flex;
		flex-direction: column;
		gap: 10px;

		li {
			display: flex;
			align-items: center;
			gap: 10px;

			&:before {
				content: '';
				display: inline-block;
				width: 10px;
				height: 13px;
				background: url(../img/icon-mark.svg) no-repeat center;
				vertical-align: middle;
			}
		}
	}

	p {
		font-family: $font-family-base;
		font-size: 12px;
		line-height: 18px;
		color: #000000;

		&.promo {
			color: #9747FF;
			font-weight: bold;
		}
	}

	label {
		display: flex;
		align-items: center;
		line-height: 14px;
		gap: 5px;

		input[type=checkbox] {
			margin: 0;
		}
	}

	.oct-metabox-btn {
		background-color: #00e3c0;
		border: 1px solid #00e3c0;
		color: #002333;
		border-radius: 28px;
		text-decoration: none;
		display: inline-block;
		position: relative;
		padding: 18px 44px 18px 26px;

		&:after {
			content: "";
			display: block;
			height: 32px;
			position: absolute;
			right: 12px;
			top: 50%;
			transform: translateY(-50%);
			width: 32px;
			background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMzInIGhlaWdodD0nMzInIGZpbGw9J25vbmUnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTE2LjMxMyAyMi45OGEuNS41IDAgMSAwIC43MDcuNzA3bC0uNzA3LS43MDdaTTI0IDE2bC4zNTQuMzU0LjM1My0uMzU0LS4zNTMtLjM1M0wyNCAxNlptLTYuOTgtNy42ODdhLjUuNSAwIDAgMC0uNzA3LjcwN2wuNzA3LS43MDdaTTYuNjY3IDE1LjVhLjUuNSAwIDAgMCAwIDF2LTFabTEwLjM1MyA4LjE4NyA3LjMzNC03LjMzMy0uNzA3LS43MDctNy4zMzQgNy4zMzMuNzA3LjcwN1ptNy4zMzQtOC4wNEwxNy4wMiA4LjMxM2wtLjcwNy43MDcgNy4zMzQgNy4zMzQuNzA3LS43MDdaTTI0IDE1LjVINi42Njd2MUgyNHYtMVonIGZpbGw9JyMwMDIzMzMnLz48L3N2Zz4=);
		}

		&:hover {
			background-color: #80f1e0;
			border-color: #80f1e0;
			color: #002333;

			&:after {
				background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMzInIGhlaWdodD0nMzInIGZpbGw9J25vbmUnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTIyLjMxMyAyMi45OGEuNS41IDAgMSAwIC43MDcuNzA3bC0uNzA3LS43MDdaTTMwIDE2bC4zNTQuMzU0LjM1My0uMzU0LS4zNTMtLjM1M0wzMCAxNlptLTYuOTgtNy42ODdhLjUuNSAwIDAgMC0uNzA3LjcwN2wuNzA3LS43MDdaTTYuNjY3IDE1LjVhLjUuNSAwIDAgMCAwIDF2LTFabTE2LjM1MyA4LjE4NyA3LjMzNC03LjMzMy0uNzA4LS43MDctNy4zMzMgNy4zMzMuNzA3LjcwN1ptNy4zMzQtOC4wNEwyMy4wMiA4LjMxM2wtLjcwNy43MDcgNy4zMzMgNy4zMzQuNzA4LS43MDdaTTMwIDE1LjVINi42Njd2MUgzMHYtMVonIGZpbGw9JyMwMDIzMzMnLz48L3N2Zz4=);
			}
		}
	}
}