/* CK Button — icon rotation and hover-only reveal effects */

.elementor-widget-ck-button .elementor-button-icon,
.ck-button .elementor-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: translateX(var(--ck-btn-icon-offset-x, 0)) scale(var(--ck-btn-icon-scale, 1)) rotate(var(--ck-btn-icon-rotate, 0deg));
	transform-origin: center;
	transition:
		transform var(--ck-btn-icon-rotate-duration, 0.3s) var(--ck-btn-icon-hover-easing, ease),
		opacity var(--ck-btn-icon-hover-duration, 0.3s) var(--ck-btn-icon-hover-easing, ease),
		max-width var(--ck-btn-icon-hover-duration, 0.3s) var(--ck-btn-icon-hover-easing, ease);
}

.elementor-widget-ck-button .elementor-button:hover .elementor-button-icon,
.elementor-widget-ck-button .elementor-button:focus-visible .elementor-button-icon,
.ck-button .elementor-button:hover .elementor-button-icon,
.ck-button .elementor-button:focus-visible .elementor-button-icon {
	transform: translateX(var(--ck-btn-icon-offset-x-hover, var(--ck-btn-icon-offset-x, 0))) scale(var(--ck-btn-icon-scale-hover, var(--ck-btn-icon-scale, 1))) rotate(var(--ck-btn-icon-rotate-hover, var(--ck-btn-icon-rotate, 0deg)));
}

/* Show icon only on hover — smooth button width via gap + icon max-width */
.elementor-widget-ck-button.ck-btn-icon-hover-only-yes .elementor-button,
.ck-btn-icon-hover-only-yes .elementor-button {
	transition:
		padding var(--ck-btn-icon-hover-duration, 0.3s) var(--ck-btn-icon-hover-easing, ease),
		background-color var(--ck-btn-icon-hover-duration, 0.3s) var(--ck-btn-icon-hover-easing, ease),
		color var(--ck-btn-icon-hover-duration, 0.3s) var(--ck-btn-icon-hover-easing, ease),
		border-color var(--ck-btn-icon-hover-duration, 0.3s) var(--ck-btn-icon-hover-easing, ease);
}

.elementor-widget-ck-button.ck-btn-icon-hover-only-yes .elementor-button-content-wrapper,
.ck-btn-icon-hover-only-yes .elementor-button-content-wrapper {
	gap: 0;
	transition: gap var(--ck-btn-icon-hover-duration, 0.3s) var(--ck-btn-icon-hover-easing, ease);
}

.elementor-widget-ck-button.ck-btn-icon-hover-only-yes .elementor-button:hover .elementor-button-content-wrapper,
.elementor-widget-ck-button.ck-btn-icon-hover-only-yes .elementor-button:focus-visible .elementor-button-content-wrapper,
.ck-btn-icon-hover-only-yes .elementor-button:hover .elementor-button-content-wrapper,
.ck-btn-icon-hover-only-yes .elementor-button:focus-visible .elementor-button-content-wrapper {
	gap: var(--ck-btn-icon-gap, 5px);
}

.elementor-widget-ck-button.ck-btn-icon-hover-only-yes .elementor-button-icon,
.ck-btn-icon-hover-only-yes .elementor-button-icon {
	opacity: 0;
	max-width: 0;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
}

.elementor-widget-ck-button.ck-btn-icon-hover-only-yes .elementor-button:hover .elementor-button-icon,
.elementor-widget-ck-button.ck-btn-icon-hover-only-yes .elementor-button:focus-visible .elementor-button-icon,
.ck-btn-icon-hover-only-yes .elementor-button:hover .elementor-button-icon,
.ck-btn-icon-hover-only-yes .elementor-button:focus-visible .elementor-button-icon {
	opacity: 1;
	max-width: 3em;
	min-width: 0;
	overflow: visible;
	pointer-events: auto;
}

/* Hover reveal animations */
.elementor-widget-ck-button.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-slide-left .elementor-button-icon,
.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-slide-left .elementor-button-icon {
	--ck-btn-icon-offset-x: -0.5em;
}

.elementor-widget-ck-button.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-slide-left .elementor-button:hover .elementor-button-icon,
.elementor-widget-ck-button.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-slide-left .elementor-button:focus-visible .elementor-button-icon,
.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-slide-left .elementor-button:hover .elementor-button-icon,
.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-slide-left .elementor-button:focus-visible .elementor-button-icon {
	--ck-btn-icon-offset-x-hover: 0;
}

.elementor-widget-ck-button.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-slide-right .elementor-button-icon,
.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-slide-right .elementor-button-icon {
	--ck-btn-icon-offset-x: 0.5em;
}

.elementor-widget-ck-button.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-slide-right .elementor-button:hover .elementor-button-icon,
.elementor-widget-ck-button.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-slide-right .elementor-button:focus-visible .elementor-button-icon,
.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-slide-right .elementor-button:hover .elementor-button-icon,
.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-slide-right .elementor-button:focus-visible .elementor-button-icon {
	--ck-btn-icon-offset-x-hover: 0;
}

.elementor-widget-ck-button.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-scale .elementor-button-icon,
.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-scale .elementor-button-icon {
	--ck-btn-icon-scale: 0;
}

.elementor-widget-ck-button.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-scale .elementor-button:hover .elementor-button-icon,
.elementor-widget-ck-button.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-scale .elementor-button:focus-visible .elementor-button-icon,
.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-scale .elementor-button:hover .elementor-button-icon,
.ck-btn-icon-hover-only-yes.ck-btn-icon-anim-scale .elementor-button:focus-visible .elementor-button-icon {
	--ck-btn-icon-scale-hover: 1;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-ck-button .elementor-button-icon,
	.ck-button .elementor-button-icon {
		transition: none;
	}

	.elementor-widget-ck-button.ck-btn-icon-hover-only-yes .elementor-button-content-wrapper,
	.ck-btn-icon-hover-only-yes .elementor-button-content-wrapper {
		transition: none;
	}

	.elementor-widget-ck-button.ck-btn-icon-hover-only-yes .elementor-button-icon,
	.ck-btn-icon-hover-only-yes .elementor-button-icon {
		opacity: 1;
		max-width: 3em;
		min-width: 0;
		overflow: visible;
		pointer-events: auto;
		--ck-btn-icon-offset-x: 0;
		--ck-btn-icon-scale: 1;
		transform: rotate(var(--ck-btn-icon-rotate-hover, var(--ck-btn-icon-rotate, 0deg)));
	}

	.elementor-widget-ck-button.ck-btn-icon-hover-only-yes .elementor-button-content-wrapper,
	.ck-btn-icon-hover-only-yes .elementor-button-content-wrapper {
		gap: var(--ck-btn-icon-gap, 5px);
	}
}