/* Menu container styles */
.buy-menu {
	position: absolute;
	left: 50%; /* Center the menu horizontally */
	top: 50%; /* Center the menu vertically */
	transform: translate(-50%, -50%); /* Adjust for perfect centering */
	background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent black background */
	padding: 20px; /* Padding around the content */
	border-radius: 10px; /* Rounded corners */
	color: white; /* White text color */
	width: 300px; /* Fixed width for the menu */
	text-align: center; /* Center text inside the menu */
	z-index: 9999; /* High z-index to ensure the menu appears on top of other elements */
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Add shadow for a more 3D effect */
	font-family: Arial, sans-serif; /* Set a clean font for readability */
}

/* Heading styles for the buy menu */
.buy-menu h3 {
	margin-bottom: 15px; /* Space below the heading */
	font-size: 24px; /* Increase the heading size */
	font-weight: bold; /* Make the heading bold */
	color: #ffcc00; /* Gold color for the heading */
}

/* Button styles for the buy button */
.buy-button {
	background-color: #4CAF50; /* Green background color */
	color: white; /* White text color */
	padding: 12px 20px; /* Padding inside the button */
	border: none; /* Remove borders */
	border-radius: 5px; /* Rounded corners */
	cursor: pointer; /* Pointer cursor on hover */
	font-size: 16px; /* Increase font size */
	transition: background-color 0.3s ease; /* Smooth background color transition */
	margin-top: 10px; /* Space between button and other content */
	display: inline-block; /* Make the button inline-block for better alignment */
	width: 80%; /* Adjust button width */
}

/* Hover state for the buy button */
.buy-button:hover {
	background-color: #45a049; /* Darker green on hover */
}

/* Disabled button styles (if needed) */
.buy-button:disabled {
	background-color: #888; /* Grey background for disabled button */
	cursor: not-allowed; /* Show not-allowed cursor */
}

/* Root container class handling visibility */
.hidden {
	pointer-events: none; /* Prevent interaction when menu is hidden */
}

.visible {
	pointer-events: all; /* Enable interaction when menu is visible */
}