html, body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	position: relative;
}
body {
	font-family: 'Arial', sans-serif;
	margin: 0;
	padding: 0;
	background: #ffffff;
}
.header {
	position: relative;
	text-align: center;
	margin: 20px;
}
.header, .button-container, .menu-section {
	flex-shrink: 0;
}

.header img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	border-radius: 20px;
}
.page-container {
	width: 600px;
	margin: 0 auto; /* Center the container */
	font-family: 'Arial', sans-serif;
	background: #ffffff;
	border-radius: 20px;
	overflow: hidden;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	padding-bottom: 50px;
}
.shop-details {
	position: absolute; /* Position the details over the image */
	bottom: 0; /* Align to the bottom of the header */
	left: 0; /* Align to the left of the header */
	width: 100%; /* Full width */
	padding: 10px; /* Padding for the text */
	background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent overlay */
	text-align: left;
}
.shop-name {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 5px;
}
.address, .open-time {
	font-size: 18px;
	margin: 5px 0;
}
.menu-section {
	background: #fff;
	padding: 20px 20px 60px 20px;
	margin-bottom: 50px;
	border-radius: 8px 8px 0 0;
	box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
	/*margin-bottom: 50px;*/
}
.menu-title {
	font-size: 18px;
	color: #333;
	padding-left: 35px;
	position: relative;
}
.navigation-items-container {
	width: 100%;
	display: flex;
	justify-content: space-around;
}
.bottom-nav {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 10px 0;
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 50%;
	right: 0;
	transform: translateX(-50%);
	width: 600px; /* make it 600px wide */
	box-shadow: 0 -2px 5px rgba(0,0,0,0.2); /* Optional: adds shadow to the top of the nav */
	border-radius: 0 0 20px 20px; /* Add rounded corners to bottom nav */
	z-index: 10; /* Ensures the navigation stays on top */
	margin-bottom: 0;
	flex-shrink: 0; /* Prevents the navigation from shrinking */
	flex-grow: 1; /* Allows the navigation to grow if necessary */
	align-self: flex-end;
	flex-direction: column;
}
.nav-item {
	text-align: center;
	padding: 10px 0;
}
.nav-item a {
	color: inherit;
	text-decoration: none;
}

.nav-item.active i,
.nav-item.active div {
	color: #007bff;
}
.nav-item.active div {
	font-weight: bold;
}

.bottom-nav .nav-item.active i,
.bottom-nav .nav-item.active div {
	color: #00BFFF; /* Highlight color for the active button */
}


.button-container {
	display: flex; /* Flexbox for inline buttons */
	/*justify-content: center; !* Center buttons *!*/
	gap: 10px; /* Space between buttons */
	/*margin-top: 10px;*/
	padding-left: 16px;
	padding-bottom: 10px;
}
.button {
	border: none;
	padding: 5px 10px;
	margin: 5px 0; /* Spacing above and below the button */
	border-radius: 20px;
	color: white;
	font-weight: bold;
	cursor: pointer;
}
.directions-btn {
	background-color: #FFA500; /* Orange color for Directions button */
	/*width: calc(100% - 32px); !* Full width within the padding *!*/
	text-align: center;
	text-decoration: none !important;
	color: white !important;
}

.menu-btn,
.reorder-btn {
	background-color: #E6E6E6; /* Default color for other buttons */
	/*flex-grow: 1; !* Allow buttons to grow and fill space *!*/
	text-align: center;
	color: #000000;
}

.menu-btn.active,
.reorder-btn.active {
	background-color: #00BFFF; /* Highlight color for the active button */
	color: white;
}

/* Ensure the container for the Menu and Reorder buttons fills a new line */
.secondary-buttons {
	display: flex;
}

.wait-time {
	font-size: 16px;
	background-color: hsl(195, 75%, 50%);
	color: white;
	border-radius: 20px;
	padding-left: 5px;
	padding-right: 5px;
}
.details-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.menu-section {
	background: #fff; /* Extend the white background */
	padding: 20px; /* Add some padding */
	border-radius: 8px; /* Keep the rounded corners if desired */
}

.category-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #e0e0e0; /* Adjust color as needed */
}


.category-icon-and-text {
	display: flex;
	align-items: center;
}

.category-text {
	margin-left: 10px; /* Space between icon and text */
	font-size: 18px; /* Text size */
	line-height: 24px; /* Aligns the line height with the icon size */
}

.mdi {
	font-size: 24px; /* Icon size */
	line-height: 24px; /* Aligns the line height with the text size */
}

.down-arrow {
	font-size: 24px; /* Arrow size */
	color: #00BFFF; /* Color for the down arrow */
}

.menu-items {
	display: flex;
	flex-direction: column;
	/* Additional styles if needed */
}

.menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	background: #FFF;
	border-radius: 8px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
	margin-bottom: 15px;
}

.item-photo {
	width: 50px; /* Adjust the size as necessary */
	height: 50px; /* Adjust the size as necessary */
	border-radius: 20%; /* Circle shape */
	object-fit: cover; /* Cover the whole area */
	margin-right: 15px; /* Space between image and text */
}

.item-details {
	display: flex;
	align-items: center;
	justify-content: space-between; /* This will keep the price to the right */
	flex-grow: 1;
	min-width: 0; /* Allows the text to be truncated with ellipsis */
}

.item-name {
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-grow: 1; /* Takes up as much space as possible before the price */
	margin-right: 10px; /* Gives some space before the price */
}

.item-price {
	font-weight: bold;
	white-space: nowrap;
	padding-left: 10px; /* Ensures some space between the text and the price */
	flex-shrink: 0; /* Prevents the price from shrinking */
}

.item-description {
	font-size: 0.8em; /* Smaller text for description */
	color: #666; /* Dark grey color for description text */
	margin-top: 5px; /* Space between name/price and description */
}

.product-info {
	padding: 20px;
	text-align: center;
}
.product-info h1 {
	margin-top: 0;
	font-size: 24px;
	color: #333;
}
.product-info p {
	font-size: 16px;
	color: #666;
	margin-bottom: 0;
}

.fa-solid {
	margin-bottom: 5px;
}
i.fa-solid {
	margin-bottom: 5px;
}
div.nav-item div {
	font-size: 14px;
}

.options-container {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 20px;
	padding-bottom: 110px;
	margin: 10px;
}

.option-group h3 {
	font-size: 18px;
	margin-bottom: 15px;
	font-weight: normal;
	color: #333;
}

.option-group .required {
	color: white;
	font-size: 16px;
	margin-left: 5px;
	background-color: red;
	border-radius: 20px;
	padding-left: 5px;
	padding-right: 5px;
}

.choice {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.choice label {
	margin-left: 10px;
	font-size: 16px;
	color: #666;
	display: flex;
	align-items: center; /* Aligns the custom checkbox/radio with the label text */
}

input[type="radio"], input[type="checkbox"] {
	accent-color: #00BFFF;
	align-items: center;
}


input[type="radio"]:checked, input[type="checkbox"]:checked {
	accent-color: #00BFFF;
}


input[type="radio"], input[type="checkbox"] {
	opacity: 0;
	position: absolute;
}

input[type="radio"] + label, input[type="checkbox"] + label {
	position: relative;
	padding-left: 25px;
	cursor: pointer;
}


input[type="radio"] + label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 20px; /* Match the height of the checkboxes */
	width: 20px; /* Match the width of the checkboxes */
	border: 2px solid #ccc;
	border-radius: 50%;
	background-color: #fff;
}

input[type="checkbox"] + label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 20px; /* Size of the checkbox */
	width: 20px; /* Size of the checkbox */
	border: 2px solid #ccc;
	border-radius: 4px; /* Slightly rounded corners for checkbox */
	background-color: #fff;
}

input[type="checkbox"] + label:before {
	border-radius: 3px;
}

input[type="radio"]:checked + label:before {
	background-color: #00BFFF; /* Full color for selected radio */
	border-color: #00BFFF; /* Full color for selected radio */
}


input[type="radio"]:checked + label:after, input[type="checkbox"]:checked + label:after {
	content: '';
	position: absolute;
	left: 5px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background-color: #00BFFF;
	border-radius: 50%;
}

input[type="checkbox"]:checked + label:before {
	background-color: #00BFFF; /* Full background color for checked */
	border-color: #00BFFF; /* Border color same as background */
}

input[type="checkbox"]:checked + label:after {
	content: url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.5 4.5l-7.8 7.8-3.2-3.2L0 11.1l4.5 4.5 9-9z"/></svg>');
	left: 2px;
	top: 41%;
	transform: translateY(-50%);
	height: 16px;
	width: 16px;
	border-radius: 0;
}

.back-arrow a {
	color: #333;
	text-decoration: none;
}

.back-arrow i {
	font-size: 24px;
}

.max {
	font-size: 12px;
}

.quantity-selector {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px 0;
}

.quantity-decrease,
.quantity-increase {
	border: none;
	background-color: #f2f2f2;
	padding: 7px 12px 7px 12px;
	margin: 0;
	cursor: pointer;
	font-size: 12px;
	border-radius: 50px;
}

.quantity-input {
	text-align: center;
	border: 1px solid #cccccc;
	margin: 0 5px;
	padding: 5px 10px;
	width: 50px;
}

.edit-qty-button {
	border-radius: 50px;
	padding: 0px 5px 0px 5px;
	border: none;
}

.nav-icon-container {
	position: relative;
	display: inline-block;
}

.cart-count-badge {
	position: absolute;
	top: -10px; /* Adjust based on actual size and position */
	right: -10px; /* Adjust based on actual size and position */
	background-color: #00BFFF;
	color: white;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ajs-dialog {
	animation-duration: 0.001s !important;
}

.botton-btn-container {
	width: calc(100% - 40px);
	margin: 0 20px;
	padding: 10px 0;
	text-align: center;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	box-sizing: border-box;
}

.separator-line {
	height: 1px;
	background-color: #ccc;
	width: 100%;
}

.bottom-nav-button {
	width: calc(100% - 40px);
	margin: 0 20px;
	padding: 12px 20px;
	border: none;
	background-color: #00BFFF;
	color: white;
	font-size: 18px;
	cursor: pointer;
	border-radius: 30px;
	box-shadow: none;
	transition: background-color 0.3s;
}

.bottom-nav-button a {
	text-decoration: none !important;
	color: white !important;
}

@media (max-width: 767px) {
	.header img {
		height: 200px;
	}
	.page-container {
		width: auto; /* Full width on small screens */
		border-radius: 0; /* Remove border radius on small screens */
		margin: 0; /* Remove margin on small screens */
	}

	.menu-item {
		flex-direction: row; /* Keep the direction as row to align items side by side */
		align-items: center;
		padding: 10px; /* Adjust padding as necessary */
	}

	.item-photo {
		width: 50px; /* Set a fixed width for mobile */
		height: 50px; /* Set a fixed height for mobile */
		border-radius: 20%; /* Keep the rounded corners if desired */
		object-fit: cover;
		margin-right: 15px; /* Maintain space between photo and details */
	}

	.item-details {
		flex-grow: 1; /* Allow the details to fill the space */
		margin-right: 5px; /* Adjust the margin to ensure space between text and price */
	}

	.item-name {
		flex-grow: 1;
		margin-right: 5px; /* Give some space between the name and the price */
		/* Ensure that text does not get cut off but instead shrinks with the viewport */
		max-width: calc(100% - 80px); /* Adjust the max-width to leave space for the price */
		/* Remove nowrap to allow wrapping if needed, or keep it if you prefer truncation */
	}

	.item-price {
		flex-shrink: 0; /* Prevent the price from shrinking */
		white-space: nowrap; /* Prevent the price from wrapping */
	}

	.item-description {
		order: 3; /* Description comes after details */
	}

	.bottom-nav {
		flex-direction: column;
		padding: 5px 0;
		width: 100%;
	}

	.nav-item {
		flex: 1; /* Each nav item will take up equal space */
		padding: 5px 10px; /* Adjust padding for touch targets */
	}

	.nav-item i {
		font-size: 18px; /* Slightly smaller icons on mobile */
	}

	.nav-item div {
		font-size: 12px; /* Slightly smaller text on mobile */
	}

	.navigation-items-container {
		padding-top: 12px;
	}
}