/* =====================================================
   Menu Order - Mobile Bottom Navigation Bar
   ===================================================== */

.mo-mobile-bar {
	display      : none; /* desktop hidden */
	position     : fixed;
	bottom       : 0;
	left         : 0;
	right        : 0;
	height       : 62px;
	background   : var(--mo-primary, #FF6B00);
	z-index      : 99999;
	align-items  : center;
	justify-content: space-around;
	padding      : 0 4px;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	box-shadow   : 0 -2px 16px rgba(0, 0, 0, .18);
}

/* Show only on mobile */
@media (max-width: 768px) {
	.mo-mobile-bar {
		display: flex;
	}

	/* Push page content above the bar */
	body {
		padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
	}

	/* Hide the desktop float button — mobile bar replaces it */
	.mo-cart-float-btn {
		display: none !important;
	}

	/* Lift cart panel above the mobile bar */
	.mo-cart-float {
		bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* ===== BUTTONS ===== */
.mo-mb-btn {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	justify-content: center;
	flex           : 1;
	color          : #fff;
	background     : none;
	border         : none;
	cursor         : pointer;
	text-decoration: none;
	padding        : 8px 4px;
	min-height     : 48px;
	transition     : opacity .18s, transform .15s;
	-webkit-tap-highlight-color: transparent;
	margin: 0;
}

.mo-mb-btn svg {
	width : 22px;
	height: 22px;
	display: block;
	flex-shrink: 0;
}

.mo-mb-btn:hover,
.mo-mb-btn:active {
	opacity  : 1;
	transform: scale(1.12);
	color    : #fff;
}

/* ===== CONTEXT BUTTONS (shown/hidden by JS) ===== */
.mo-mb-ctx-menu,
.mo-mb-ctx-home {
	display: none;
}

/* ===== CART BADGE ===== */
.mo-mb-cart-wrap {
	position: relative;
	display : flex;
}

.mo-mb-badge {
	position     : absolute;
	top          : -6px;
	right        : -8px;
	background   : #fff;
	color        : var(--mo-primary, #FF6B00);
	font-size    : 10px;
	font-weight  : 700;
	line-height  : 1;
	min-width    : 16px;
	height       : 16px;
	border-radius: 50px;
	display      : flex;
	align-items  : center;
	justify-content: center;
	padding      : 0 3px;
}