.angie-back-to-top {
	position: fixed;
	bottom: 30px;
	left: 50%; /* Center horizontally by default */
	transform: translateX(-50%); /* Adjust for width to perfectly center */
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #00B3FF; /* Primary color from context */
	color: #FFFFFF;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
	z-index: 2147483647; /* Maximum z-index to stay on top of everything */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.angie-back-to-top:hover {
	background-color: #0099DD; /* Slightly darker shade */
	/* Maintain centering + lift effect */
	transform: translateX(-50%) translateY(-3px); 
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.angie-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
}

.angie-back-to-top svg {
	width: 24px;
	height: 24px;
	stroke-width: 2.5px;
}

/* Mobile responsiveness (max-width: 768px) */
@media (max-width: 768px) {
	.angie-back-to-top {
		/* Reset horizontal centering and bottom position */
		left: auto;
		bottom: auto;
		transform: none; /* Clear transforms */
		
		/* Position Middle Right - Adjusted upward significantly */
		top: 35%; /* Moved even higher to 35% */
		right: 0; /* Stick exactly to the right edge */
		transform: translateY(-50%); /* Correct vertical centering */
		
		border-radius: 50% 0 0 50%; /* Half-circle effect against the edge */
		width: 45px;
		height: 45px;
		padding-left: 5px; /* Adjust icon position slightly */
	}
	
	.angie-back-to-top:hover {
		/* Adjust hover effect for the new position */
		transform: translateY(-50%) translateX(-5px); /* Slide out slightly on hover */
	}
	
	.angie-back-to-top svg {
		width: 20px;
		height: 20px;
	}
}