@use "../abstracts/variables" as variables;

.fvt-pro-text {
	font-size: 12px;
	font-weight: 600;
	color: variables.$black;
	margin-right: 8px;
	display: inline-flex;
	align-items: center;
}

.firevert-button.firevert-button--pro {
	padding: 14px 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;

	text-transform: uppercase;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: variables.$black;
	border-radius: 4px;

	background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow:
		0 2px 8px rgba(255, 215, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
	position: relative;
	overflow: hidden;

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: -100%;
		width: 50%;
		height: 100%;
		background: linear-gradient(
				90deg,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 0.8) 50%,
				rgba(255, 255, 255, 0) 100%
		);
		transform: skewX(-20deg);
		animation: pro-shine 3s ease-in-out infinite;
	}

	&:hover,
	&:focus {
		filter: brightness(1.1);
		background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
		color: variables.$black;
	}

	&:active {
		transform: translateY(0);
		filter: brightness(0.95);
	}
}


.fvt-pro-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	margin-left: 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: variables.$black;
	background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3),
	inset 0 1px 0 rgba(255, 255, 255, 0.5);
	white-space: nowrap;
	vertical-align: middle;
	overflow: hidden;

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: -100%;
		width: 50%;
		height: 100%;
		background: linear-gradient(
				90deg,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 0.8) 50%,
				rgba(255, 255, 255, 0) 100%
		);
		transform: skewX(-20deg);
		animation: pro-shine 3s ease-in-out infinite;
	}
}

@keyframes pro-shine {
	0% {
		left: -100%;
	}
	20% {
		left: 150%;
	}
	100% {
		left: 150%;
	}
}