/* Advanced Button Widget Styles */
.elementor-button-wrapper {
	width: 100%;
}

.elementor-button {
	display: inline-block;
	line-height: 1;
	background-color: #818a91;
	color: #fff;
	fill: #fff;
	text-align: center;
	transition: all 0.3s;
}

.elementor-button .elementor-button-content-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
}

.elementor-button .elementor-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
	transform-origin: center center;
	
	/* Initialize variables at icon level with fallbacks */
	--icon-hover-scale: 1;
	--icon-hover-rotate: 0deg;
	--icon-hover-translate-x: 0px;
	--icon-hover-translate-y: 0px;
}

.elementor-button .elementor-button-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Icon Animation on Hover */
/* Use specificity to ensure these styles win */
.elementor-button:hover .elementor-button-icon,
.elementor-button:focus .elementor-button-icon {
	transform: 
		translate(var(--icon-hover-translate-x), var(--icon-hover-translate-y))
		rotate(var(--icon-hover-rotate)) 
		scale(var(--icon-hover-scale));
}

/* Standard Alignment Classes */
.elementor-align-icon-left {
	margin-right: 5px;
	order: 1;
}

.elementor-align-icon-right {
	margin-left: 5px;
	order: 2;
}

.elementor-button-text {
	order: 1;
}

.elementor-align-icon-right + .elementor-button-text {
	order: 1;
}

/* Button Sizes (Standard Elementor Classes) */
.elementor-size-xs {
	font-size: 11px;
	padding: 10px 20px;
	border-radius: 2px;
}

.elementor-size-sm {
	font-size: 13px;
	padding: 12px 24px;
	border-radius: 3px;
}

.elementor-size-md {
	font-size: 14px;
	padding: 15px 30px;
	border-radius: 4px;
}

.elementor-size-lg {
	font-size: 15px;
	padding: 20px 40px;
	border-radius: 5px;
}

.elementor-size-xl {
	font-size: 18px;
	padding: 25px 50px;
	border-radius: 6px;
}