/* Updated 2026-09-24: corrected root cause. Nephew's Pizza's own
   Configurations.xml sets MenuPageControlVersion="3", so MenuPage.cshtml
   actually renders the _MenuPageV3 partial (the same "grid" structure
   Eldorado uses on its own Menu page, which also runs version 3) - this is
   the file that's supposed to style it, and matches Eldorado's structure.
   An earlier pass mistakenly pointed the page at MenuPagev1.css instead
   (a different version's stylesheet, meant for the list-view partial),
   which is why the layout looked structurally off even once colors loaded.
   MenuPage.cshtml has been pointed back to this file. Colors below are
   remapped from the old plain black/white/gray scheme onto the Nephew's
   Pizza palette (--npb-gold/--npb-ink/--npb-cream/--npb-paper/--npb-line)
   already used across the rest of the redesigned site. No selectors,
   layout, or markup were changed - colors only. */

.nopadding {
    padding: 0;
}

.order-pill {
    background-color: var(--npb-cream);
    border-radius: 7px;
    border: 1px solid var(--npb-line);
    color: var(--npb-ink) !important;
}
.dropdown-item-menu {
    color: var(--npb-gold) !important;
}
.MenuDatetime {
    color: #686868 !important;
}

.MenuBoxinner img {
    object-fit: cover;
    /* Approximate CSS-filter recolor from black source PNGs to --npb-gold
       (#e7a73b) - fine visually, nudge hue-rotate slightly if it reads a
       touch warm/cool once you see it live. */
    filter: brightness(0) saturate(100%) invert(70%) sepia(73%) saturate(1352%) hue-rotate(358deg) brightness(93%) contrast(93%);
}

.menuordertype {
    color: var(--npb-ink) !important;
}

.MenuContainer {
    background-color: var(--npb-paper);
    color: var(--npb-ink);
}

.MenuPage {
    background-color: var(--npb-paper);
}

#categoryNav {
    border: 1px solid var(--npb-line);
    background-color: var(--npb-paper);
}

.BestDeal {
    color: #fff;
}

.restaurantName {
    color: var(--npb-ink);
    font-weight: 600;
}

.dropdown-item-menu {
    color: var(--npb-gold) !important;
}

.MenuItemBox {
    border: 1px solid var(--npb-line);
    border-radius: 7px;
}

    .MenuItemBox:hover {
        border: 1px solid var(--npb-gold);
        border-radius: 7px;
        transition: 0.2s ease-in-out;
        box-shadow: 0px 3px 12px rgba(231,167,59,.35);
    }

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

.AddButton {
    background-color: var(--npb-cream);
    color: var(--npb-ink);
    border-radius: 7px;
    border: 1px solid var(--npb-gold);
}

    .AddButton span {
        font-size: clamp(12px,3vw,16px);
    }

.Heading2 {
    color: var(--npb-ink);
}

    .Heading2 u {
        text-decoration: none;
    }

.MenuItemHeading span {
    color: var(--npb-ink);
    font-size: clamp(14px,3vw,18px);
    text-decoration: none;
}

#MenuItemInfo1 span {
    color: #a3a3a3;
    font-size: clamp(10px,3vw,14px);
    text-decoration: none;
}

.MenuItemPrice, .MenuItemPrice span, .MenuItemPrice a {
    color: var(--npb-ink) !important;
    font-size: clamp(10px,3vw,14px);
    text-decoration: none;
    text-align: end;
}



a {
    text-decoration: none;
}

.pill-separator {
    background: url(../Images/Seperator.jpg) no-repeat;
    filter: grayscale(100%);
    width: 3px;
    height: 30px;
}

.offer-text {
    color: var(--npb-ink);
    font-size: clamp(12px,3vw,16px);
}

.offer-wrapper {
    border: 1px solid var(--npb-gold);
    border-radius: 7px;
}

.offer-icon {
    filter: brightness(0);
}

.offer-tag {
    background: var(--npb-gold);
    padding: 10px 28px;
    color: var(--npb-ink);
    position: relative;
    white-space: nowrap;
    font-size: clamp(16px, 3vw, 18px);
}

    .offer-tag::after {
        content: "";
        position: absolute;
        right: 0;
        top: 11px;
        width: 0;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-right: 12px solid var(--npb-paper);
    }

#searchMessage {
    color: var(--npb-ink);
    font-size: clamp(12px,3vw,16px);
    text-align: center;
}

.foodimg {
    border-radius: 7px;
}

#itemModalDesc, #updateItemModalDesc {
    color: var(--npb-ink);
}

.ItemModal {
    color: var(--npb-ink);
}

#numberDropdown, .nmbrdd {
    margin-top: 4px;
    padding: 1px !important;
    border-radius: 7px;
}

.sp {
    font-weight: bold;
}

.HeaderItem {
    font-weight: 600;
    color: var(--npb-ink);
    padding: 10px;
    text-align: left;
    font-weight: bold;
    position: relative;
    background-color: var(--npb-cream) !important;
    border: 1px solid var(--npb-line);
    display: flex;
}

.SubmitItem {
    background-color: var(--npb-cream);
    border: 2px solid var(--npb-gold);
    border-radius: 7px;
    padding: 10px;
}

    .SubmitItem:hover {
        background-color: var(--npb-ink);
        border: 2px solid var(--npb-gold);
        color: var(--npb-paper);
        transition: 0.3s ease-in-out;
    }

@media (max-width: 425px) {
    #MenuItemButtonSeperator img, #MenuItemButtonImg img {
        height: 16px;
    }

    .MenuItemButton {
        margin-top: 4px;
    }
}

@media (max-width: 576px) {
    .mobile-nav {
        flex-direction: column;
    }

    #categoryNav .category-right {
        flex: 1 !important;
    }

    .MenuItemPrice {
        -webkit-line-clamp: 1;
        overflow: hidden;
        width: 100%;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }
}

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

.CommonHeading u {
    color: var(--npb-ink);
    font-weight: 600;
}

.menuitemdescriptionpanel {
    margin: 13px 0px;
}

.ItemModal .modal-header {
    background-color: var(--npb-cream);
    color: var(--npb-ink);
}

.ItemModal .btn-close {
    filter: invert(0) brightness(1);
}

#totalPrice {
    color: var(--npb-ink);
    font-weight: 600;
}

#itemModalLabel, #updateItemModalLabel {
    font-weight: bold;
}

#categoryNav .dropdown-menu {
    max-width: 100vw;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-height: 30vh;
    overflow-y: scroll;
}

#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);
}

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

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

.OpenDiv {
    display: block !important;
    color: var(--npb-ink);
}

.QuanName {
    font-size: 14px;
}

.SubCategoryName {
    margin-top: 14px;
    padding: 0;
}
/* Menu Categories dropdown: white text on hover/focus */
#categoryNav .dropdown-menu a.dropdown-item-menu:hover,
#categoryNav .dropdown-menu a.dropdown-item-menu:focus,
#categoryNav .dropdown-menu a.dropdown-item-menu:active,
#categoryNav .dropdown-menu a.dropdown-item:hover,
#categoryNav .dropdown-menu a.dropdown-item:focus,
#categoryNav .dropdown-menu a.dropdown-item:active,
#categoryNav .dropdown-menu .dropdown-item-menu:hover *,
#categoryNav .dropdown-menu .dropdown-item:hover * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}
/* Best Deals accordion in cart (offcanvas) - theme colours instead of Bootstrap blue */
#cartOffcanvas .accordion,
#offcanvasCartContent .accordion,
#ViewCartContainer .accordion {
    --bs-accordion-border-color: var(--npb-gold);
    --bs-accordion-active-bg: var(--npb-cream);
    --bs-accordion-active-color: var(--npb-ink);
    --bs-accordion-btn-focus-border-color: var(--npb-gold);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(231, 167, 59, .35);
}

#cartOffcanvas .accordion-button,
#cartOffcanvas .accordion-button:not(.collapsed),
#cartOffcanvas .accordion-button:hover,
#cartOffcanvas .accordion-button:focus,
#cartOffcanvas .accordion-button:active {
    color: var(--npb-ink) !important;
}

    #cartOffcanvas .accordion-button:not(.collapsed) {
        background-color: var(--npb-cream) !important;
        box-shadow: inset 0 -1px 0 var(--npb-gold) !important;
    }

    #cartOffcanvas .accordion-button:hover {
        background-color: var(--npb-cream);
    }

    #cartOffcanvas .accordion-button:focus,
    #cartOffcanvas .accordion-button:focus-visible {
        border-color: var(--npb-gold) !important;
        outline: none !important;
        box-shadow: 0 0 0 0.2rem rgba(231, 167, 59, .35) !important;
    }

#cartOffcanvas .accordion-item {
    border-color: var(--npb-gold);
}

#cartOffcanvas .accordion-button:not(.collapsed)::after {
    filter: brightness(0);
}
/* Discount Code input - theme hover effect (input box only) */
/* Discount Code input - theme hover + active (focus) effect, input box only */
#CouponCode {
    transition: border-color .2s ease, box-shadow .2s ease;
}

    #CouponCode:hover {
        border-color: var(--npb-gold);
        box-shadow: 0 0 0 3px rgba(231, 167, 59, .25);
    }

    #CouponCode:focus,
    #CouponCode:focus-visible,
    #CouponCode:active {
        border-color: var(--npb-gold) !important;
        box-shadow: 0 0 0 1px var(--npb-gold), 0 0 0 4px rgba(231, 167, 59, .35) !important;
        outline: none !important;
        font-weight: 600;
        color: var(--npb-ink);
    }