#tiers ul {
	list-style: none; /* Remove the default bullet points */
	padding-left: 0; /* Remove left padding */
}

#tiers ul li {
	position: relative;
	padding-left: 30px; /* Space for the SVG */
	margin-bottom: 10px;
	color: var(--igg-muted-text);
}

#tiers ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 20px; /* Width of the SVG */
	height: 20px; /* Height of the SVG */
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url('/content/assets/images/logos-badges/circle-check.svg');
	/* Replace with your own SVG or link to an external SVG */
}

#tiers p {
	color: var(--igg-muted-text);
}

.card h3 {
	color: var(--text-color);
}

#tiers .card {
  height: 100%;
}

#tiers .card-text {
  font-weight: 500;
}

#tiers .card {
	border-bottom-left-radius: 8px !important; /* Round the bottom-left corner */
	border-bottom-right-radius: 8px !important; /* Round the bottom-right corner */
	border-top-left-radius: 8px !important; /* No rounding on the top-left corner */
	border-top-right-radius: 8px !important; /* No rounding on the top-right corner */
	background-color: color(display-p3 0.984 0.984 0.984);
	border-style: none;
	padding: 10px;
	
}

#tiers small {
	font-size: 0.85rem;
}

.price-qualifier {
	color: var(--igg-muted-text);
	font-size: 1.0rem;
}

ul.custom-list {
	list-style: none;
	padding-left: 0;
}

ul.custom-list li {
	position: relative;
	padding-left: 30px; /* Adjust space for SVG */
	margin-bottom: 10px;
}

ul.custom-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 20px; /* Adjust size */
	height: 20px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICA8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSI4IiBzdHlsZT0iZmlsbDojMDAwMGZmOyIgLz4KPC9zdmc+Cg==');
	/* Replace with your actual SVG */
}

.card-sub-text {
  min-height: 60px;
  color: var(--igg-muted-text);
}

.bronze {
  color: color(display-p3 0.756 0.472 0.18);
}

.silver {
  color: color(display-p3 0.533 0.533 0.533);
}

.gold {
  color: color(display-p3 0.759 0.609 0.003);
}

@media (prefers-color-scheme: dark) {
	#tiers .card {
		background-color: color(display-p3 0.229 0.227 0.227);
	}
	
	.silver {
	  color: color(display-p3 0.984 0.984 0.984);
	}
	
	.gold {
	  color: color(display-p3 0.987 0.842 0.123);
	}
}

.mini-text {
	font-size: 0.85rem;
}


/* Toggle Button */

.custom-toggle {
	display: inline-flex;
	position: relative;
	background-color: var(--igg-light-blue); /* Background color for the toggle container */
	border-radius: 50px;
	padding: 5px;
}
.custom-toggle input[type="radio"] {
	display: none;
}
.custom-toggle label {
	padding: 10px 20px;
	cursor: pointer;
	color: rgb(252, 248, 248);
	font-weight: bold;
}
.custom-toggle label.active {
	background-color: white;
	color: #050505;
	border-radius: 50px;
	transition: all 0.3s ease;
}
.toggle-bg {
	position: absolute;
	top: 0px;
	left: 5px;
	background-color: transparent;
	height: 100%;
	width: 50%;
	border-radius: 50px;
	transition: all 0.3s ease;
}
.custom-toggle input[type="radio"]#monthly:checked ~ .toggle-bg {
	left: 0;
}
.custom-toggle input[type="radio"]#annual:checked ~ .toggle-bg {
	left: 50%;
}