Woocommerce Checkout Page Redo

I am looking for somebody that can help me reorganize the way my current Woocommerce checkout page looks in my theme. I want to make it more user-friendly and move some of the data around to make it easier for the customer to checkout.

On this website, we sell meals every week. The customer can either choose to have the meals shipped to their house, or they can choose to pick them up at a local pickup spot that is already defined.

Currently, the Local Pickup dropdown box does not work too well on mobile or on the desktop side. Upon choosing a local pickup location, the calendar that pops up for the appointment date selector is a bit too much. Rather than have the calendar popup, I'm wondering if we can alter it to just have a list of available pickup dates to choose from. The highlighted days in the calendar are super difficult to even see.

I am looking to maybe consolidate the checkout options down for the customer.

The website is https://optimizeumeals.com.
You can add products to the cart here: https://optimizeumeals.com/menu/ in order to view the checkout page.

Currently, I have the following CSS code written to alter the look of the pickup locations dropdown for the Local Pickup shipping option. It does not work too well:

#pickup-location-field-for-0 .select2-selection {
width: 100%;
margin-top: 15px;
}

#pickup-location-field-for-0 {
width: 250px;
margin-right: 10px;
}
tr.woocommerce-shipping-total.shipping th {
display: none;
}
li.shipping__list_item{
display: block;
text-align: left;
}
li.shipping__list_item:nth-child(2){
margin-bottom: 15px;
}
li.shipping__list_item:nth-child(3){
display:block !important;
text-align:left !important;
}

@media (max-width: 1050px) {
#pickup-location-field-for-0{
width: 220px;
}
}
@media (max-width: 980px) {
#pickup-location-field-for-0{
width: 180px;
}
}
@media (max-width: 850px) {
#pickup-location-field-for-0{
width: 175px;
}
}
@media (max-width: 370px) {
#pickup-location-field-for-0{
width: 145px;
}
#pickup-location-field-for-0 .select2-selection {
width: 250px;
}
}
@media (max-width: 350px) {
#pickup-location-field-for-0{
width: 145px;
}
#pickup-location-field-for-0 .select2-selection {
width: 220px;
}
}
@media (max-width: 330px) {
#pickup-location-field-for-0{
width: 115px;
}
#pickup-location-field-for-0 .select2-selection {
width: 220px;
}

}
@media (max-width: 310px) {
#pickup-location-field-for-0{
width: 90px;
}
#pickup-location-field-for-0 .select2-selection {
width: 200px;
}
}