.vip-page {
	padding: 35px 72px;
}
.vip-page .vip-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.vip-page .vip-level-card {
	position: relative;
	display: flex;
	flex-direction: column;
}
.vip-page .vip-level-card .vip-level-card-header {
	position: relative;
	width: 100%;
	margin-bottom: 8px;
}
.vip-page .vip-level-card .vip-level-card-header::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 10px;
	background-color: #243156;
	left: 0;
	bottom: 20px;
	z-index: -1;
}
.vip-page .vip-level-card .vip-level-card-header img {
	height: 75px;
	width: auto;
}
.vip-page .vip-level-card .vip-level-card-content {
	background-color: #243156;
	padding: 20px 25px;
	border-radius: 8px;
	height: 100%;
	flex-grow: 1;
}
.vip-page .vip-level-card .vip-level-card-content .vip-level-title {
	display: inline-block;
	background-color: #3ea245;
	font-size: 14px;
	border-radius: 3px;
	color: #121421;
	padding: 5.5px 15px;
	font-weight: 600;
	margin-bottom: 10px;
	font-family: Inter, sans-serif;
}
.vip-page .vip-level-card .vip-level-card-content .vip-level-badges {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.vip-page .vip-level-card .vip-level-card-content .vip-level-badge {
	background-color: red;
	color: #fff;
	font-family: Inter, sans-serif;
	font-weight: 700;
	font-size: 12px;
	padding: 3px 10px;
	border-radius: 3px;
}
.vip-page .vip-level-card .vip-level-card-content .vip-level-points {
	font-size: 28px;
	font-family: Montserrat;
	font-weight: 700;
}
.vip-page .vip-level-card .vip-level-card-content .vip-level-points-info {
	color: #919fbc;
	font-size: 13px;
}
.vip-page
	.vip-level-card
	.vip-level-card-content
	.vip-level-bullets
	.check-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #3ea245;
	border-radius: 50vw;
	height: 18px;
	flex-basis: 18px;
	flex-grow: 0;
	flex-shrink: 0;
	margin-right: 6px;
}
.vip-page .vip-level-card .vip-level-title.bronze,
.vip-page
	.vip-level-card
	.vip-level-card-content
	.vip-level-bullets
	.check-icon.bronze {
	background-color: #bb887a;
}
.vip-page .vip-level-card .vip-level-title.silver,
.vip-page
	.vip-level-card
	.vip-level-card-content
	.vip-level-bullets
	.check-icon.silver {
	background-color: #c0c0c0;
}
.vip-page .vip-level-card .vip-level-title.gold,
.vip-page
	.vip-level-card
	.vip-level-card-content
	.vip-level-bullets
	.check-icon.gold {
	background-color: #ffcb00;
}
.vip-page .vip-level-card .vip-level-title.platinum,
.vip-page
	.vip-level-card
	.vip-level-card-content
	.vip-level-bullets
	.check-icon.platinum {
	background-color: #66e2ff;
}
.vip-page .vip-level-card .vip-level-title.diamond,
.vip-page
	.vip-level-card
	.vip-level-card-content
	.vip-level-bullets
	.check-icon.diamond {
	background-color: #be7eff;
}
.vip-page
	.vip-level-card
	.vip-level-card-content
	.vip-level-bullets
	.check-icon
	img {
	height: 8px;
	width: auto;
}
.vip-page .vip-level-card .vip-level-card-content .vip-level-bullets {
	margin-top: 12px;
}
.vip-page .vip-level-card .vip-level-card-content .vip-level-bullets ul {
	padding-left: 0;
	margin-bottom: 0;
}
.vip-page .vip-level-card .vip-level-card-content .vip-level-bullets ul li {
	display: flex;
	text-align: left;
	font-size: 14px;
	font-family: Montserrat;
	color: #b5bed2;
	margin-bottom: 5px;
	padding: 0;
}
@media (max-width: 1200px) {
	.vip-page {
		padding: 72px 0 35px;
	}
	.vip-page .vip-cards {
		display: grid;
		grid-template-columns: 1fr;
		gap: unset;
	}
	.vip-page .vip-level-card .vip-level-card-header {
		position: absolute;
		width: auto;
		z-index: 1;
	}
	.vip-page .vip-level-card .vip-level-card-header::after {
		content: unset;
	}
	.vip-page .vip-level-card:after {
		content: '';
		background-image: url('/wp-content/themes/betnero/assets/img/icons/arrow-white-down.svg');
		position: absolute;
		top: 70px;
		right: 17px;
		height: 11px;
		width: 19px;
		background-repeat: no-repeat;
		filter: contrast(0.5) brightness(0.8);
		transform-origin: center center;
	}
	.vip-page .vip-level-card.expanded:after {
		transform: rotate(180deg);
		transition: all 0.3s ease-in-out;
		transform-origin: center center;
	}
	.vip-page .vip-level-card .vip-level-card-content {
		position: relative;
		margin-top: 14px;
		max-height: 82.5px;
		padding: 10px 15px 15px;
		cursor: pointer;
	}
	.vip-page .vip-level-card .vip-level-card-content .vip-level-badges,
	.vip-page .vip-level-card .vip-level-card-content .vip-level-points {
		position: relative;
		justify-content: center;
		text-align: center;
	}
	.vip-page .vip-level-card .vip-level-card-content .vip-level-points-info {
		display: none;
	}
	.vip-page .vip-level-card .vip-level-card-content .vip-level-badge {
		position: absolute;
		right: 0;
	}
	.vip-page .vip-level-card .vip-level-card-content .vip-level-title {
		background-color: unset;
		text-transform: uppercase;
		font-weight: 700;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	.vip-page .vip-level-card .vip-level-title.entry {
		color: #3ea245;
	}
	.vip-page .vip-level-card .vip-level-title.bronze {
		color: #bb887a;
	}
	.vip-page .vip-level-card .vip-level-title.silver {
		color: #b5bed2;
	}
	.vip-page .vip-level-card .vip-level-title.gold {
		color: #ffcb00;
	}
	.vip-page .vip-level-card .vip-level-title.platinum {
		color: #66e2ff;
	}
	.vip-page .vip-level-card .vip-level-title.diamond {
		color: #d6a5fa;
	}
	.vip-page .vip-level-card .vip-level-card-content .vip-level-bullets {
		max-height: 0;
		opacity: 0;
	}
	.vip-page
		.vip-level-card.expanded
		.vip-level-card-content
		.vip-level-bullets
		li {
		transform: translateX(0); /* Start in original position */
		animation: slideIn 0.5s ease-in-out forwards;
		animation-delay: calc(var(--delay) * 0.2s);
		margin: 10px 0;
	}
	.vip-level-bullets ul li:nth-child(1) {
		--delay: 1;
	}
	.vip-level-bullets ul li:nth-child(2) {
		--delay: 2;
	}
	.vip-level-bullets ul li:nth-child(3) {
		--delay: 3;
	}
	.vip-level-bullets ul li:nth-child(4) {
		--delay: 4;
	}
	.vip-level-bullets ul li:nth-child(5) {
		--delay: 5;
	}
	.vip-level-bullets ul li:nth-child(6) {
		--delay: 6;
	}
	.vip-level-bullets ul li:nth-child(7) {
		--delay: 7;
	}
	.vip-level-bullets ul li:nth-child(8) {
		--delay: 8;
	}
	.vip-level-bullets ul li:nth-child(9) {
		--delay: 9;
	}
	.vip-level-bullets ul li:nth-child(10) {
		--delay: 10;
	}
	.vip-page .vip-level-card.expanded .vip-level-card-content {
		max-height: 1000px;
		transition: max-height 0.6s ease-in;
	}

	.vip-page .vip-level-card.expanded .vip-level-card-content.diamond::before {
		content: '';
		width: 100%;
		height: 100%;
		border-radius: 8px;
		background-image: linear-gradient(
			var(--rotate),
			#3c67e3,
			#3c67e3 43%,
			#4e00c2
		);
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		transform: scale(1.01);
		animation: spin 2.5s linear infinite;
	}
	.vip-page .vip-level-card.expanded .vip-level-card-content.diamond::after {
		position: absolute;
		content: '';
		top: 5px;
		left: 0;
		right: 0;
		z-index: -2;
		height: 100%;
		width: 100%;
		margin: 0 auto;
		transform: scale(1.02);
		filter: blur(7px);
		background-image: linear-gradient(
			var(--rotate),
			#7e4ead,
			#9eeaff 50%,
			#7e4ead
		);
		opacity: 1;
		transition: opacity 0.5s;
		animation: spin 2.8s linear infinite;
	}
	.vip-page
		.vip-level-card.expanded
		.vip-level-card-content
		.vip-level-bullets {
		opacity: 1;
		max-height: 1000px;
		transition: max-height 0.6s ease-in;
	}
	@property --rotate {
		syntax: '<angle>';
		initial-value: 132deg;
		inherits: false;
	}
	@keyframes spin {
		0% {
			--rotate: 0deg;
		}
		100% {
			--rotate: 360deg;
		}
	}

	@keyframes slideIn {
		0% {
			opacity: 1;
			transform: translateX(0);
		}
		50% {
			opacity: 1;
			transform: translateX(10px); 
		}
		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}
}