:root
{
	--bg: #f5f7fb;
	--text: #111;
	--card: #ffffff;
	--primary: #2563eb;
	--secondary: #7c3aed;
	--accent: #00e6ff;
	--shadow: rgba(0, 0, 0, 0.25);
	--shadow-dark: rgba(255, 255, 255, 0.25);
}

.btn-cta
{
	padding: 12px 26px;
	border-radius: 8px;
	background: linear-gradient(90deg,
			var(--primary),
			var(--secondary),
			var(--primary));
	background-size: 200% 100%;
	color: white;
}

.btn-cta:not(:disabled)
{
	animation: shimmer 2s infinite linear;
}

@keyframes shimmer
{
	from
	{
		background-position: 0%;
	}

	to
	{
		background-position: 200%;
	}
}

@keyframes pulseRing
{
	0%
	{
		box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.6);
	}

	70%
	{
		box-shadow: 0 0 0 15px rgba(0, 255, 255, 0);
	}

	100%
	{
		box-shadow: 0 0 0 0 rgba(0, 255, 255, 0);
	}
}

.btn-cta:hover
{
	animation: pulseRing 1.2s
		/*infinite*/
	;
	filter: brightness(1.15);
}

.btn-cta:active
{
	transform: scale(0.9);
}

.btn-cta:disabled
{
	opacity: 0.5;
	pointer-events: none; /* this "disables" all interactions without having to put not :disabled on all other classes */
}



/* Base button */
.combo-btn
{
	position: relative;
	padding: 15px 20px;
	font-size: 16px;
	background: transparent;
	border-radius: 50px;
	cursor: pointer;
	overflow: hidden;
	transition: 0.3s ease;
}

.slide
{
	border: 2px solid #06b6d4;
	color: #06b6d4;
}

.slide::before
{
	content: "";
	position: absolute;
	left: -100%;
	top: 0;
	width: 100%;
	height: 100%;
	background: #06b6d4;
	transition: 0.3s;
	z-index: -1;
}

.slide:hover::before
{
	left: 0;
}

.slide:hover
{
	color: black;
	border-radius: 10px;
}

.slide:active::before
{
	background: #f59e0b;
	left: 0;
}

.slide:active
{
	transform: scale(0.9);
	color: #000;
}