.nopadding {
    padding: 0;
}

/* ============ STORE ROW (MenuPage.cshtml) ============ */
.MenuContainer {
    color: var(--spf-olive);
}

    .MenuContainer > .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 0 !important;
    }

.mobile-nav {
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px !important;
}

.restaurantName {
    color: var(--spf-olive);
    font-family: var(--font-head);
    font-size: 2rem;
    font-weight: 700;
    text-align: left !important;
}

.menunote {
    color: var(--spf-muted) !important;
    text-align: left !important;
}

/* Pickup | Schedule Order segmented control */
.order-pill {
    display: inline-flex !important;
    align-items: center;
    padding: 4px !important;
    background: var(--spf-sand);
    border: 0;
    border-radius: 99px;
    cursor: pointer;
}

.menuordertype {
    margin: 0 !important;
    padding: 9px 20px;
    border-radius: 99px;
    background: var(--spf-olive);
    color: #fff;
    font-weight: 700;
}

.MenuDatetime {
    margin: 0 !important;
    padding: 9px 20px;
    border-radius: 99px;
    color: var(--spf-muted);
    font-weight: 700;
}

.order-pill:hover .MenuDatetime {
    color: var(--spf-olive);
}

.pill-separator {
    display: none;
}

/* ============ SEARCH + CATEGORY CHIPS (_MenuPageV3.cshtml) ============ */
.MenuPage {
    color: var(--spf-olive);
}

#categoryNav {
    z-index: 10;
    margin-top: 16px;
    padding-left: 20px !important;
    padding-right: 20px !important;
    background: #fff;
    border: 0;
    border-radius: 0;
}

.spf-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--spf-line);
}

.spf-search {
    flex: 0 0 min(300px, 38%);
    display: flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    margin: 0;
    padding: 0 16px;
    background: var(--spf-sand);
    border-radius: 99px;
    color: var(--spf-olive);
}

    .spf-search:focus-within {
        box-shadow: 0 0 0 2px var(--spf-orange);
    }

    .spf-search input {
        flex: 1;
        min-width: 0;
        height: 100%;
        border: 0;
        background: none;
        outline: 0;
        font: inherit;
        color: var(--spf-olive);
    }

.spf-chips {
    flex: 1;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .spf-chips::-webkit-scrollbar {
        display: none;
    }

.spf-chip {
    flex: none;
    padding: 10px 18px;
    border: 2px solid var(--spf-line);
    border-radius: 99px;
    font-weight: 700;
    color: var(--spf-olive-2);
    text-decoration: none;
    white-space: nowrap;
}

    .spf-chip:hover {
        border-color: var(--spf-orange);
        color: var(--spf-olive);
    }

    .spf-chip.on {
        background: var(--spf-orange);
        border-color: var(--spf-orange);
        color: #fff;
    }

#searchMessage {
    padding: 10px 0 0;
    color: var(--spf-muted);
    font-size: 14px;
    text-align: left;
}

/* ============ CATEGORIES ============ */
#MainMenuPageContainer, .menupageview {
    padding: 0 !important;
}

#menuContent .container {
    padding-left: 20px;
    padding-right: 20px;
}

#menuContent [id] {
    /* the sticky search/chips bar would otherwise cover the heading */
    scroll-margin-top: 90px !important;
}

.categories {
    padding: 0 !important;
}

    .categories .row {
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
    }

.MenuCtgHeadings h2,
.CommonHeading {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 22px 0 16px;
    font-family: var(--font-head);
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--spf-olive);
    text-align: left !important;
}

.CommonHeading u {
    text-decoration: none;
    color: var(--spf-olive);
    font-weight: 700;
    font-family: var(--font-head);
}

.spf-count {
    font: 500 14px var(--font-body);
    color: var(--spf-muted);
}

.SubCategoryName {
    grid-column: 1 / -1;
    margin: 10px 0 0 !important;
    font-size: 1.4rem !important;
}

/* items grid: category body, and subcategory groups inside it */
.MenuCtgHeadings + .row,
.MenuCtgHeadings + .row > .row {
    display: grid;
    grid-template-columns: 1fr;
    /* the row carries Bootstrap's .gap-0 (gap: 0 !important) */
    gap: 14px !important;
    /* ...and .align-items-start, which stops cards in a row matching heights */
    align-items: stretch !important;
    margin: 0;
}

    .MenuCtgHeadings + .row > .row,
    .MenuCtgHeadings + .row > [class*="col-9"] {
        grid-column: 1 / -1;
    }

.categories .menu-item {
    flex: none;
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0;
}

/* ============ ITEM CARD ============ */
.MenuItemBox {
    height: 100%;
    margin: 0 !important;
    padding: 16px 16px 16px 20px;
    background: var(--spf-sand);
    border: 0;
    border-radius: var(--spf-radius);
    transition: box-shadow .15s ease;
}

    .MenuItemBox:hover {
        box-shadow: 0 6px 20px rgba(31,42,6,.10);
    }

    .MenuItemBox > a {
        display: block;
        height: 100%;
        color: inherit;
    }

.MenuBoxinner {
    display: block;
    height: 100%;
    padding: 0;
}

    .MenuBoxinner > div {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name add"
            "desc add"
            "price add"
            "msg msg";
        align-items: center;
        align-content: center;
        gap: 4px 14px;
        width: 100%;
        height: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

        .MenuBoxinner > div > .d-flex {
            display: contents !important;
        }

        .MenuBoxinner > div > [class*="col-9"] {
            grid-area: msg;
            width: auto;
            padding: 0;
        }

.MenuItemHeading {
    grid-area: name;
}

    .MenuItemHeading span {
        font-family: var(--font-head);
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--spf-olive);
    }

.MenuItemInfo {
    grid-area: desc;
    min-width: 0;
}

#MenuItemInfo1 span {
    color: var(--spf-muted);
    font-size: 14px;
}

.nowrap-scroll {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    width: 100%;
}

.MenuItemPrice {
    grid-area: price;
    margin-top: 6px;
    font-weight: 700;
    color: var(--spf-orange-dark);
    text-align: left;
}

.MenuItemButton {
    grid-area: add;
    margin: 0 !important;
}

/* round "+" button; the "Add" label stays for screen readers */
.AddButton {
    position: relative;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0 !important;
    border: 0;
    border-radius: 50%;
    background: var(--spf-olive);
    color: #fff;
    transition: background .15s ease, transform .1s ease;
}

    .AddButton::before {
        content: "+";
        font-size: 26px;
        line-height: 1;
    }

    .AddButton #MenuItemButtonImg,
    .AddButton #MenuItemButtonSeperator {
        display: none;
    }

    .AddButton span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

.MenuItemBox:hover .AddButton {
    background: var(--spf-orange);
}

.MenuItemBox:active .AddButton {
    transform: scale(.9);
}

/* unavailable items keep their existing disabled-link behaviour */
.disabled-link .MenuItemBox,
.MenuItemBox:has(.disabled-link) {
    opacity: .6;
}

.disabled-link .AddButton,
.MenuItemBox:has(.disabled-link) .AddButton {
    background: var(--spf-muted);
}

.AvailMsg {
    color: #c92a2a !important;
    font-size: 14px !important;
}

/* ============ ITEM MODAL ============ */
.ItemModal {
    color: var(--spf-olive);
    border: 0;
    border-radius: var(--spf-radius-lg);
    overflow: hidden;
}

    .ItemModal .modal-header {
        background-color: #fff;
        color: var(--spf-olive);
        border-bottom: 1px solid var(--spf-line) !important;
    }

    .ItemModal .modal-footer {
        border-top: 1px solid var(--spf-line);
    }

    .ItemModal .btn-close {
        filter: none;
    }

#itemModalLabel, #updateItemModalLabel {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--spf-olive);
}

#itemModalDesc, #updateItemModalDesc {
    color: var(--spf-muted);
    font-size: 14px;
}

.HeaderItem {
    display: flex;
    position: relative;
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    color: var(--spf-olive);
    background-color: var(--spf-sand) !important;
    border: 1px solid var(--spf-line);
    border-radius: 12px;
}

.SubmitItem, .deleteItem {
    width: 50%;
    margin: auto;
    padding: 12px 18px;
    border: 0;
    border-radius: 14px;
    background-color: var(--spf-orange);
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background .15s ease;
}

    .SubmitItem:hover, .deleteItem:hover {
        background-color: var(--spf-orange-dark);
        color: #fff;
    }

#totalPrice, .modalTotalPriceBasedOnQuantity {
    color: var(--spf-orange-dark);
    font-weight: 700;
}

#numberDropdown, .nmbrdd {
    padding: 1px !important;
    border-radius: 10px;
}

.sp {
    font-weight: bold;
}

#spText {
    height: 80px;
    overflow: hidden;
    width: 100%;
    border: 1px solid var(--spf-line);
    border-radius: 12px;
}

#iconItem {
    width: 28px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
}

.icon-collapsed {
    background: url(../images/id-expand-icon.png) no-repeat;
}

#iconItem.icon-expanded {
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 8px;
    flex-shrink: 0;
}

.icon-expanded {
    background: url(../images/id-collapse-icon.png) no-repeat;
    filter: invert(1) brightness(0);
}

#Option-content {
    display: none;
    padding: 7px;
    border: 1px solid var(--spf-line);
    border-top: 0px;
    text-align: start;
}

.OpenDiv {
    display: block !important;
    color: var(--spf-olive);
}

.QuanName {
    font-weight: bold;
    text-align: end;
}

.foodimg {
    border-radius: var(--spf-radius-sm);
}

.itemImgUrl {
    display: none;
}

/* ============ RESPONSIVE ============ */
@media (min-width: 800px) {
    .MenuCtgHeadings + .row,
    .MenuCtgHeadings + .row > .row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 799px) {
    .spf-tools {
        flex-wrap: wrap;
    }

    .spf-search {
        flex: 1 0 100%;
    }

    .MenuCtgHeadings h2,
    .CommonHeading {
        font-size: 1.7rem;
    }
}

@media (max-width: 576px) {
    .mobile-nav {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .restaurantName {
        font-size: 1.6rem;
    }

    .menuordertype, .MenuDatetime {
        padding: 8px 14px;
        font-size: 14px;
    }
}