/* Checkbox List */
#shoppingListSummary {
	list-style-type: none; /* Remove default bullets */
	padding: 0;
	width: 100%; /* Full width */
	background-color: #ffffff; /* White background */
	border-radius: 8px; /* Rounded corners */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
	overflow: hidden; /* For rounded corners */
}

#shoppingListSummary li {
	padding: 12px 15px; /* Spacing inside each item */
	border-bottom: 1px solid #ddd; /* Divider between items */
	transition: background-color 0.3s ease; /* Hover effect */
}

#shoppingListSummary li:last-child {
	border-bottom: none; /* Remove divider for the last item */
}

#shoppingListSummary li:hover {
	background-color: #f0f0f0; /* Change background color on hover */
}

#shoppingListSummary li label {
	display: flex; /* Flexbox for alignment */
	align-items: center; /* Center checkbox and text */
	gap: 10px; /* Space between checkbox and text */
}

#shoppingListSummary label input[type="checkbox"] {
	width: 20px; /* Adjust checkbox size */
	height: 20px;
	accent-color: #0078d7; /* Modern browsers: style checkbox color */
	cursor: pointer; /* Show pointer on hover */
}

/* General Button Styles */
.shoppingListButton {
	display: inline-block; /* Makes the link behave like a button */
	margin: 8px;
	padding: 12px 20px; /* Add spacing inside the button */
	font-size: 16px; /* Font size for readability */
	color: #ffffff; /* Text color */
	background-color: #0078d7; /* Background color (primary blue) */
	text-decoration: none; /* Remove underline */
	border: none; /* Remove default borders */
	border-radius: 6px; /* Rounded corners */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
	cursor: pointer; /* Pointer cursor to indicate it's clickable */
	transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

/* Hover and Focus Effects */
.shoppingListButton:hover,
.shoppingListButton:focus {
	background-color: #005bb5; /* Darker blue on hover */
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Slightly larger shadow */
	text-decoration: none; /* Ensure underline does not appear */
	outline: none; /* Remove focus outline */
}

/* Active State */
.shoppingListButton:active {
	background-color: #004a93; /* Even darker blue when active */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Smaller shadow */
}


/* Mobile-Friendly Adjustments */
/*@media (max-width: 600px) {*/
/*	#shoppingListSummary li {*/
/*		font-size: 14px; !* Slightly smaller text for smaller screens *!*/
/*		padding: 10px 12px; !* Adjust padding for compact layout *!*/
/*	}*/

/*	#shoppingListSummary input[type="checkbox"] {*/
/*		width: 18px; !* Smaller checkbox for smaller screens *!*/
/*		height: 18px;*/
/*	}*/
/*}*/