.menu-wrap {
    width: 1200px;
    min-height: 800px;
}

.menu-order-type-wrap {
    background-color: black;
    padding: 24px;
    border-radius: 16px;
    height: fit-content;
}

.menu-alert {
    width: 100%;
    border: 1px solid rgb(255, 136, 0);
    padding: 24px;
    background-color: black;
    margin-top: 16px;
    border-radius: 12px;
    font-size: 18px;
}

.menu-type-option {
    width: 264px;
    padding: 12px 16px;
    background-color: #0C0C0C;
    border-radius: 12px;
    border: 2px solid #97041D;
    cursor: pointer;
    transition: all 0.2s;
    color: #97041D;
    user-select: none;
}


.menu-type-icon {
    height: 40px;
    width: 40px;
}

.menu-type-option:hover {
    border: 2px solid #97041D;
    color: #97041D;
}

.menu-type-options {
  width: 100%;
}

.type-option {
    margin-top: 20px;
    color: white;
}

.type-option-heading {
    font-size: 20px;
    font-weight: 500;
}

.menu-option-heading {
    font-size: 20px;
    font-weight: 600;
}

.menu-option-time {
    font-size: 14px;
    color: #AAAAAA;
}

.menu-order-type-arrow {
    width: 40px;
    height: 40px;
    transition: all 0.3s ease;
}

.arrow-rotated {
    rotate: 180deg;
}

.menu-reservation-icon {
    margin-right: 8px;
    height: 32px;
    width: 32px;
}

.slide-fade-enter-active,
.slide-fade-leave-active {
    transition: all 0.4s ease;
    overflow: hidden;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
    max-height: 0;
    opacity: 0;
}
.slide-fade-enter-to,
.slide-fade-leave-from {
    max-height: 400px;
    opacity: 1;
}

.menu-reservation-link {
    background-color: #97041D;
    border-radius: 12px;
    height: 64px;
    font-size: 20px;
    font-weight: 500;
}

.menu-reservation-link:hover {
    background-color: #6e0012;
}

#menu-mobile-group {
    margin-top: 24px;
}

.land-contact-group span:first-child {
    color: #A9A9A9;
    margin-bottom: 4px;
}

.land-contact-group span:nth-child(2) {
    margin-bottom: 12px;
    font-size: 20px;
}

.land-contact-icon {
    height: 24px;
    width: 24px;
}

.landing-phone-to {
    font-size: 16px;
    font-weight: 500;
    color: #97041D;
    transition: all 0.2s;
}

.landing-phone-to:hover {
    color: #880017;
}

.products-wrap {
    width: 100%;
    margin-left: 32px;
}

.categories-filter-wrap {
    width: 100%;
    background-color: black;
    border-radius: 12px;
    padding: 24px 40px;
    display: flex;
    justify-content: space-between;
}

.category {
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px;
    transition: all 0.2s;
    border-top: 3px solid black;
    border-bottom: 3px solid black;
    user-select: none;
}

.category:hover {
    color: #97041D;
}

.cat-selected {
    color: white;
    border-bottom: 3px solid #97041D;
}

.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 32px;
    row-gap: 32px;
    column-gap: 32px;
}

.product {
    padding: 16px;
    background-color: black;
    border-radius: 16px;
    width: 264px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 352px;
}

.product img {
    width: 100%;
    height: 156px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
}

.product h3 {
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: 20px;
    font-weight: 600;
}

.product p {
    font-size: 12px;
    color: #B5B5B5;
    line-height: 120%;
}

.product-price {
    font-size: 24px;
    color: #97041D;
    font-weight: 600;
}

.product-price-wrap {
    margin-top: 16px;
}

.product-add {
    width: 112px;
    height: 40px;
    background-color: #97041D;
    border: 0;
    color: white;
    font-weight: 400;
    font-size: 16px;
    border-radius: 6px;
    transition: all 0.2s;
}

.product-add:hover {
    background-color: #6e0012;
}

.product-add-icon {
    height: 24px;
    width: 24px;
    margin-left: -4px;
}

.alergen-wrap {
    margin-top: 4px;
}

.alergen-wrap span {
    color: #B5B5B5;
    font-size: 12px;
}

.alergen-icon {
    color: #B5B5B5;
    height: 20px;
    width: 20px;
    margin-right: 4px;
}

.custom-group-wrap {
    margin-top: 16px;
    padding: 12px;
    border-radius: 15px;
    background-color: #0C0C0C;
}

.custom-group-head {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #97041D;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-group-head h2 {
    font-weight: 600;
    font-size: 20px;
}

.custom-group-max-items {
    
}

.group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.group-item:last-child {
    margin-bottom: 0px;
}

.item-add {
    height: 32px;
    width: 32px;
    background-color: #97041D;
    background-color: #101010;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.item-add:hover {
    background-color: #97041D;
}

.item-selected {
    background-color: #97041D;
}

.item-name {
    font-weight: 600;
}

.total-add {
    margin-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-to-cart {
    height: 56px;
    width: 100%;
    background-color: #97041D;
    color: white;
    border: 0;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    margin-top: 16px;
    transition: all 0.2s;
}

.add-to-cart:hover {
    background-color: #6e0012;
}


.quantity-wrap {
    padding: 4px 8px;
    background-color: #0C0C0C;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 132px;
    border-radius: 8px;
    user-select: none;
}

.plus, .minus {
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #101010;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.plus:hover, .minus:hover {
    color: #97041D;
}

#item-quantity {
    font-weight: 600;
}

.total-price-wrap {
    font-size: 24px;
    color: #97041D;
}

.total-price-wrap span {
    font-weight: 700;
}

.item-action {
    display: flex;
    align-items: center;
}

.item-quantity-wrap {
    display: flex;
    align-items: center;
    user-select: none;
}

.item-plus, .item-minus, .item-remove {
    height: 32px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #101010;
    border-radius: 8px;
    cursor: pointer;
}

.item-plus:hover, .item-minus:hover, .item-remove:hover {
    background-color: #0C0C0C;
}

.item-remove {
    margin-left: 8px;
}

.item-quant {
    margin: 0 8px;
}


@media only screen and (max-width: 1240px) {
    .menu-wrap {
        width: 94%;
    }

    .product {
        width: 48%;
    }

    .product img {
        aspect-ratio: 1.5 / 1;
        height: auto;
    }

    .products {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 32px;
        row-gap: 32px;
        column-gap: 0;
    }
}

@media only screen and (max-width: 1100px) {
    .categories-filter-wrap {
        padding: 24px 32px;
    }

    .category {
        font-size: 16px;
    }

    .menu-type-option {
        width: 232px;
    }

    .menu-type-icon {
        margin-left: 0;
    }
}

@media only screen and (max-width: 920px) {
    .products-wrap {
        margin-left: 24px;
    }

    .products {
        margin-top: 24px;
        row-gap: 24px;
    }

    .menu-type-option {
        width: 208px;
        padding: 12px 12px;
    }

    .menu-option-heading {
        font-size: 18px;
    }

    .menu-order-type-arrow {
        height: 32px;
        width: 32px;
    }

    .menu-option-time {
        font-size: 12px;
    }

    .menu-type-icon {
        height: 32px;
        width: 32px;
    }
}

@media only screen and (max-width: 830px) {
    .menu-wrap {
        flex-direction: column;
    }

    .products-wrap {
        margin-left: 0;
    }

    .menu-order-type-wrap {
        margin-bottom: 24px;
        display: flex;
        justify-content: space-between;
    }

    .menu-type-option {
        width: 48%;
        min-height: 64px;
        margin-bottom: 0;
    }

    .menu-reservation-link {
        width: 48%;
    }

    #menu-mobile-group {
        display: none;
    }

    .menu-reservation-link {
        font-size: 16px;
    }

    .menu-reservation-icon {
        height: 24px;
        width: 24px;
    }
}

@media only screen and (max-width: 650px) {
    #menu-section-wrap {
        margin-top: 56px;
    }

    .product-add-close {
        right: 0 !important;
        z-index: 100;
        right: 8px !important;
        top: 8px !important;
        border: 1px solid #2e2e2e;
    }

    .product-add-close:hover {
        border: 1px solid #97041D;
    }

    .product-add-modal {
        width: 90vw !important;
    }
}

@media only screen and (max-width: 580px) {
    .categories-filter-wrap {
        display: grid;
        grid-template-columns: auto auto auto auto;
        justify-content: space-between;
        row-gap: 4px;
    }

    .category {
        font-size: 18px;
    }

    .categories-filter-wrap {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media only screen and (max-width: 540px) {
    .product {
        width: 100%;
        height: fit-content;
        padding: 20px;
    }
    
    .product img {
        height: 50%;
    }

    .menu-option-heading {
        font-size: 16px;
    }
}

@media only screen and (max-width: 480px) {
    .menu-order-type-wrap {
        flex-direction: column;
    }

    .menu-type-option {
        width: 100%;
        margin-bottom: 12px;
    }

    .menu-option-heading {
        font-size: 18px;
    }

    .menu-reservation-link {
        width: 100%;
    }
}

@media only screen and (max-width: 440px) {
    .product-add-modal {
        padding: 16px !important;
    }

    .product-add-modal h3 {
        font-size: 28px !important;
    }
}