.upgrade-popup-body .btn[class*=-subscription] {
	position: relative;
}
.upgrade-popup-body .btn[class*=-subscription] span {
	transition: opacity 0.3s ease-out;
}

.upgrade-popup-body .btn[class*=-subscription].loading span {
	opacity: 0;
}
.upgrade-popup-body .btn[class*=-subscription].loading .loader {
	visibility: visible;
	opacity: 1;
}

@media (any-hover: hover) {
	.upgrade-popup-body .btn[class*=-subscription]:hover .loader{
		background: #ffff02;
		--_m: conic-gradient(rgba(255, 255, 2, 0) 10%, #ffff02), linear-gradient(#ffff02 0 0) content-box;
	}
}

.loader {
	--width: 35px;
	transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
	visibility: hidden;
	opacity: 0;
	position: absolute;
	left: calc(50% - var(--width) / 2);
	top: calc(50% - var(--width) / 2);
	width: var(--width);
	padding: 5px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #000;
	--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
	-webkit-mask: var(--_m);
	mask: var(--_m);
	-webkit-mask-composite: source-out;
	mask-composite: subtract;
	animation: l3 1s infinite linear;
}

@keyframes l3 {
	to {
		transform: rotate(1turn)
	}
}