/* ========================================
   default8 Template Styles
   Clean, modern ordering template
   Inspired by 4ambar.com design
   ======================================== */

/* ========== THEME CSS VARIABLES ========== */
/* These are set dynamically via JSP in the page */

/* ========== ORDER START DIALOG ========== */
#orderStartDialog {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    /* Center the dialog */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
#orderStartDialog[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}
#orderStartDialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#orderStartDialog .order-start-shell {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    width: min(600px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Clip children to rounded corners */
}
#orderStartDialog .order-start-header {
    flex-shrink: 0;
    z-index: 1;
    background: #fff;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 12px;
}
#orderStartDialog .order-start-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    flex: 1 1 auto;
    color: #111;
}
#orderStartDialog #orderStartCloseBtn {
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s;
}
#orderStartDialog #orderStartCloseBtn:hover {
    background: #F1F0F0;
}
#orderStartDialog .order-start-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px;
    flex: 1 1 auto;
    min-height: 0; /* Critical for flex scroll */
    background: #fff;
}
#orderStartDialog .order-start-footer {
    flex-shrink: 0;
    z-index: 1;
    background: #fff;
    padding: 12px 20px;
    border-top: 1px solid #eee;
}
#orderStartDialog .field {
    margin-bottom: 12px;
}
#orderStartDialog .field label,
#orderStartDialog .field > div:first-child {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
}
/* Button Groups */
#orderStartDialog .btn-group {
    display: flex;
    gap: 10px;
}
/* Order Type Buttons */
#orderStartDialog .order-type-btn,
#orderStartDialog .schedule-btn {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: 2px solid #F1F0F0;
    border-radius: 10px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
#orderStartDialog .order-type-btn svg,
#orderStartDialog .schedule-btn svg {
    flex-shrink: 0;
}
#orderStartDialog .order-type-btn:hover,
#orderStartDialog .schedule-btn:hover {
    border-color: #9ca3af;
    background: #F1F0F0;
}
#orderStartDialog .order-type-btn.selected,
#orderStartDialog .schedule-btn.selected {
    border-color: var(--theme-primary, #2563eb);
    background: rgba(37, 99, 235, 0.05);
    color: var(--theme-primary, #2563eb);
}
#orderStartDialog .order-type-btn.selected svg,
#orderStartDialog .schedule-btn.selected svg {
    stroke: var(--theme-primary, #2563eb);
}
/* Submit Button */
#orderStartDialog #submitOrderStart {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    background: var(--theme-primary, #2563eb);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
#orderStartDialog #submitOrderStart:hover {
    opacity: 0.9;
}
#orderStartDialog #submitOrderStart:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Schedule Fields */
#orderStartDialog #scheduleFields {
    padding: 12px;
    background: #F1F0F0;
    border-radius: 10px;
    margin-bottom: 4px;
}
#orderStartDialog #scheduleFields .field-row .field {
    margin-bottom: 0;
}
#orderStartDialog #scheduleFields select {
    width: 100%;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    background: #fff;
}
/* Delivery Fields */
#orderStartDialog #deliveryFields {
    background: #fafafa;
    border-radius: 12px;
    padding: 12px;
    margin-top: 0;
}
#orderStartDialog #deliveryFields input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    background: #fff;
}
#orderStartDialog #deliveryFields .field:last-child,
#orderStartDialog #deliveryFields .field-row:last-child .field {
    margin-bottom: 0;
}
#orderStartDialog #deliveryFields input[type="text"]:focus {
    outline: none;
    border-color: var(--theme-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
#orderStartDialog #startDeliveryError {
    color: #dc2626;
    margin: 0;
    font-size: 14px;
}
#orderStartDialog #startDeliveryError:not(:empty) {
    margin-bottom: 8px;
}

/* Delivery section header */
#orderStartDialog .delivery-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    color: #374151;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #F1F0F0;
}
#orderStartDialog .delivery-section-header svg {
    stroke: var(--theme-primary, #2563eb);
    flex-shrink: 0;
}

/* Collapsible section styles */
#orderStartDialog .section-summary {
    display: none;
    padding: 10px 16px;
    background: #F1F0F0;
    border-radius: 10px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}
#orderStartDialog .section-summary:hover {
    background: #F1F0F0;
}
#orderStartDialog .section-summary.visible {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#orderStartDialog .section-summary .summary-text {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: #374151;
}
#orderStartDialog .section-summary .summary-text svg {
    stroke: #6b7280;
    flex-shrink: 0;
}
#orderStartDialog .section-summary .edit-link {
    color: var(--theme-primary, #2563eb);
    font-size: 13px;
    font-weight: 500;
}
#orderStartDialog .section-content {
    transition: all 0.2s ease;
}
#orderStartDialog .section-content.collapsed {
    display: none;
}

/* Two column layout for smaller fields on desktop */
#orderStartDialog .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 540px) {
    #orderStartDialog .field-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    #orderStartDialog .field-row .field {
        margin-bottom: 0;
    }
}

/* Mobile full-screen dialog */
@media (max-width: 540px) {
    #orderStartDialog {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        transform: none;
        margin: 0;
    }
    #orderStartDialog .order-start-shell {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    #orderStartDialog .order-start-header {
        border-radius: 0;
        flex-shrink: 0;
    }
    #orderStartDialog .order-start-footer {
        border-radius: 0;
        flex-shrink: 0;
        position: relative;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    #orderStartDialog .order-start-body {
        padding: 16px;
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0; /* Important for flex scroll */
        padding-bottom: 20px;
    }
    #orderStartDialog .order-type-btn {
        padding: 14px 10px;
    }
    /* Compact delivery fields on mobile */
    #orderStartDialog #deliveryFields {
        padding: 12px;
        margin-top: 4px;
    }
    #orderStartDialog .delivery-section-header {
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
    #orderStartDialog .field {
        margin-bottom: 14px;
    }
}

/* ========== ORDER INFO BAR (Owner.com style) ========== */
.order-info-bar {
    background: #F1F0F0;
    border-bottom: 1px solid #F1F0F0;
    padding: 10px 0;
    position: sticky;
    top: 90px; /* Below header */
    z-index: 99;
}
/* Reduce menu padding - override pt-100 utility class */
.day-menu.pt-100 {
    padding-top: 24px !important;
}
@media (max-width: 900px) {
    .order-info-bar {
        top: 70px;
    }
}
.order-info-bar .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.order-info-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #F1F0F0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
}
.order-info-btn:hover {
    border-color: #9ca3af;
    background: #F1F0F0;
}
.order-info-btn svg {
    flex-shrink: 0;
}
.order-info-btn .chevron {
    opacity: 0.5;
    margin-left: 2px;
}
.order-info-divider {
    width: 1px;
    height: 24px;
    background: #F1F0F0;
    margin: 0 4px;
}
/* Desktop-only divider */
.desktop-only {
    display: block;
}

/* Cart in order info bar */
.order-info-cart {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #F1F0F0;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.order-info-cart:hover {
    border-color: #9ca3af;
    background: #F1F0F0;
}
.order-info-cart svg {
    stroke: #6b7280;
    flex-shrink: 0;
}
.order-info-cart .cart-count {
    background: var(--main-color, #111);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}
.order-info-cart .cart-total {
    font-weight: 600;
    color: #111;
}

/* Checkout button in order info bar */
.order-info-checkout {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    background: var(--main-color, #111);
    color: #fff !important;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.order-info-checkout:hover {
    opacity: 0.9;
}

@media (max-width: 480px) {
    .order-info-btn {
        padding: 8px 10px;
        font-size: 13px;
    }
}

/* ========== HEADER ========== */
.site-header {
    background: var(--theme-header-bg, var(--theme-primary, #000));
    border-bottom: 1px solid var(--theme-header-border, transparent);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
/* When scroll is locked (dialog open), ensure header stays visible */
html[style*="position: fixed"] .site-header,
html[style*="position:fixed"] .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}
.site-header .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 90px;
}

/* Logo + Restaurant Name - 4ambar style */
.header-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    flex-shrink: 0;
}
/* Logo in circular container - 4ambar style */
.header-brand img {
    /*width: 80px;*/
    height: 80px;
    /*border-radius: 50%;*/
    /*background: #fff;*/
    border: 1px solid rgba(255,255,255,0.15);
    padding: 0;
    object-fit: contain;
}
.header-brand .brand-name {
    color: var(--theme-header-text, #fff);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .header-brand .brand-name {
        display: none;
    }
}

/* Legacy .header-logo support */
.header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.header-logo img {
    max-height: 60px;
    width: auto;
}

/* Navigation */
.header-nav {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}
.header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
}
.header-nav li,
.header-nav .nav-item {
    margin: 0;
    position: relative;
}

/* More Dropdown */
.nav-more-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 22px;
    color: var(--theme-header-text, #D4AF37);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    margin: 0 2px;
    padding: 10px 14px;
}
.nav-more-btn:hover {
    border-bottom-color: var(--theme-header-text, #D4AF37);
}
.nav-more-btn svg {
    transition: transform 0.2s ease;
}
.nav-more.open .nav-more-btn svg {
    transform: rotate(180deg);
}
.nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--theme-header-bg, #000);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 180px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
}
.nav-more.open .nav-dropdown,
.nav-more:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-dropdown li {
    display: block;
}
.nav-dropdown a {
    display: block;
    padding: 10px 20px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    white-space: nowrap;
}
.nav-dropdown a:hover {
    background: rgba(255,255,255,0.1);
}
/* Nav links - plain text with a hover underline. The original bordered "pill per link"
   (4ambar style) got overridden site after site; only the CTA keeps a pill. */
.header-nav a {
    display: block;
    padding: 10px 14px;
    color: var(--theme-header-text, #D4AF37);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.25s ease;
    white-space: nowrap;
    border-radius: 0;
    margin: 0 2px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    opacity: 0.92;
}
.header-nav a:hover {
    color: var(--theme-header-text, #D4AF37);
    border-bottom-color: var(--theme-header-text, #D4AF37);
    background: transparent;
    opacity: 1;
}

/* CTA Button - Filled style (4ambar style) */
.header-nav .nav-cta {
    background: var(--theme-header-text, #D4AF37);
    color: var(--theme-primary, #000) !important;
    margin-left: 10px;
    border-radius: 25px;
    padding: 10px 28px;
    font-weight: 600;
    text-decoration: none !important;
    border: 1px solid var(--theme-header-text, #D4AF37) !important;
}
.header-nav .nav-cta:hover {
    background: transparent;
    color: var(--theme-header-text, #D4AF37) !important;
    border-color: var(--theme-header-text, #D4AF37) !important;
}
/* Second call to action (a link page titled "Order ..."): the brand red pill beside Order Online.
   Sites override --nav-cta-alt in customCss. */
.header-nav .nav-cta.nav-cta-alt {
    background: var(--nav-cta-alt, #8F1739);
    color: #fff !important;
    border-color: var(--nav-cta-alt, #8F1739) !important;
}
.header-nav .nav-cta.nav-cta-alt:hover {
    background: transparent;
    color: var(--nav-cta-alt, #8F1739) !important;
}

/* Cart Summary in Header - hidden, moved to order info bar */
.header-cart-summary {
    display: none;
}
/* Checkout Button (4ambar style) */
.header-nav .nav-checkout {
    background: transparent;
    color: var(--theme-header-text, #fff) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    margin-left: 8px;
    border-radius: 25px;
    padding: 10px 22px;
    font-weight: 500;
}
.header-nav .nav-checkout:hover {
    border-color: var(--theme-header-text, #D4AF37) !important;
    color: var(--theme-header-text, #D4AF37) !important;
    background: transparent;
}

/* Account/Login Link */
.nav-account .account-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 25px;
    margin-left: 8px;
}
.nav-account .account-link svg {
    width: 18px;
    height: 18px;
    stroke: var(--theme-header-text, #D4AF37);
    flex-shrink: 0;
}
.nav-account .account-link span {
    font-size: 13px;
    font-weight: 500;
}
.nav-account .account-link:hover {
    border-color: var(--theme-header-text, #D4AF37) !important;
}
/* On tablet, hide text but show icon */
@media (min-width: 901px) and (max-width: 991px) {
    .nav-account .account-link span {
        display: none;
    }
    .nav-account .account-link {
        padding: 10px !important;
        margin-left: 4px;
    }
}
/* On mobile menu, show full text */
@media (max-width: 900px) {
    .nav-account .account-link {
        width: 100%;
        justify-content: center;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
    }
    .nav-account .account-link span {
        display: inline;
    }
}

/* Header Icons - cleaner look */
.header-icons {
    display: none; /* Hide old icon style by default */
    align-items: center;
    gap: 8px;
    margin-left: 16px;
}
.header-icons a {
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-icons img {
    width: 22px;
    height: 22px;
    opacity: 0.9;
    transition: opacity 0.2s;
    filter: var(--theme-header-icon-filter, invert(1));
}
.header-icons a:hover img {
    opacity: 1;
}
.header-icons .cart-count {
    position: relative;
}
.header-icons .cart-count .count {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--theme-header-text, var(--theme-text, #D4AF37));
    color: var(--theme-header-bg, var(--theme-primary, #000));
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Mobile nav overlay - hidden on desktop */
.mobile-nav-overlay {
    display: none;
}
.mobile-nav-close {
    display: none;
}

/* Mobile menu toggle - Animated hamburger */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    padding: 12px;
    cursor: pointer;
    margin-left: auto;
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    transition: background 0.2s ease;
}
.mobile-toggle:hover {
    background: rgba(255,255,255,0.1);
}
.mobile-toggle:active {
    background: rgba(255,255,255,0.15);
}
.mobile-toggle span {
    display: block;
    position: absolute;
    width: 22px;
    height: 2px;
    background: var(--theme-header-text, var(--theme-text, #D4AF37));
    border-radius: 2px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-toggle span:nth-child(1) {
    top: 15px;
}
.mobile-toggle span:nth-child(2) {
    top: 23px;
}
.mobile-toggle span:nth-child(3) {
    top: 31px;
}
/* Animated X transformation when menu is open */
.mobile-toggle.open span:nth-child(1) {
    top: 23px;
    transform: translateX(-50%) rotate(45deg);
}
.mobile-toggle.open span:nth-child(2) {
    opacity: 0;
    transform: translateX(-50%) scaleX(0);
}
.mobile-toggle.open span:nth-child(3) {
    top: 23px;
    transform: translateX(-50%) rotate(-45deg);
}

/* Mobile responsive header - Slide-in drawer */
@media (max-width: 900px) {
    .site-header .container {
        flex-wrap: wrap;
        min-height: 70px;
        position: relative;
    }

    /* Mobile nav overlay */
    .mobile-nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .mobile-nav-overlay.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Slide-in drawer panel */
    .header-nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        height: 100dvh;
        background: var(--theme-header-bg, var(--theme-primary, #000));
        z-index: 999;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 70px;
    }

    /* Hide search in mobile drawer - it's in order info bar instead */
    .header-nav .nav-search {
        display: none !important;
    }
    .header-nav.open {
        transform: translateX(0);
    }

    /* Mobile nav overlay - show on mobile */
    .mobile-nav-overlay {
        display: block;
    }

    /* Close button at top of drawer */
    .mobile-nav-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.1);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.2s ease;
    }
    .mobile-nav-close:hover {
        background: rgba(255,255,255,0.2);
    }
    .mobile-nav-close svg {
        stroke: var(--theme-header-text, #fff);
        width: 20px;
        height: 20px;
    }

    .header-nav ul {
        flex-direction: column;
        width: 100%;
        padding: 20px 0;
    }
    .header-nav .nav-item {
        width: 100%;
    }
    .header-nav a {
        padding: 16px 24px;
        width: 100%;
        text-align: left;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        font-size: 15px;
        transition: background 0.15s ease;
    }
    .header-nav a:hover {
        background: rgba(255,255,255,0.1);
    }
    .header-nav .nav-cta {
        margin: 20px 24px !important;
        width: calc(100% - 48px) !important;
        text-align: center;
        border-radius: 25px !important;
        border: 1px solid var(--theme-header-text, #D4AF37) !important;
        padding: 14px 24px;
    }
    .header-cart-summary {
        display: none;
    }
    .mobile-toggle {
        display: block;
        order: 2;
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
    }
    /* Hide "More" dropdown on mobile - show all items inline */
    .nav-more {
        display: contents; /* Makes children flow like siblings */
    }
    .nav-more-btn {
        display: none !important;
    }
    .nav-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        min-width: auto;
        display: contents;
    }
    .nav-dropdown li {
        width: 100%;
    }
    .nav-dropdown a {
        padding: 16px 24px !important;
    }

    /* Body scroll lock when menu is open */
    body.nav-open {
        overflow: hidden;
    }
    /* iOS fix for body scroll lock */
    @supports (-webkit-touch-callout: none) {
        body.nav-open {
            position: fixed;
            width: 100%;
        }
    }
}

/* ========== TOAST NOTIFICATIONS ========== */
.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--theme-primary, #000);
    color: var(--theme-header-text, #fff);
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 10000;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}
.toast-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.toast-notification .toast-icon {
    width: 20px;
    height: 20px;
    background: var(--theme-header-text, #D4AF37);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-primary, #000);
    font-size: 12px;
    font-weight: bold;
}

/* Hide the old cart message banner */
#infoDiv {
    display: none !important;
}

/* ========== MAIN CONTENT ========== */
.main {
    min-height: calc(100vh - 160px);
    background: var(--theme-bg, #111);
}

/* ========== FOOTER - 4ambar style ========== */
.site-footer {
    background: var(--theme-primary, #000);
    color: var(--theme-header-text, rgba(255,255,255,0.85));
    padding: 50px 0 0;
    margin-top: 0; /* Remove gap */
}
.site-footer .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(128,128,128,0.2);
}
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 35px;
    }
}

/* Footer Column Headings */
.footer-col h4 {
    color: var(--theme-header-text, #fff);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 0 0 20px;
    text-transform: none;
}
.footer-col p, .footer-col address {
    margin: 0 0 10px;
    font-style: normal;
    font-size: 14px;
    line-height: 1.7;
    color: var(--theme-header-text, rgba(255,255,255,0.75));
    opacity: 0.85;
}
.footer-col a {
    color: var(--theme-header-text, rgba(255,255,255,0.85));
    text-decoration: none;
    transition: color 0.2s;
}
.footer-col a:hover {
    opacity: 1;
}

/* Footer Hours */
.footer-hours {
    font-size: 13px;
    line-height: 1.8;
}
.footer-hours div {
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    max-width: 200px;
}
@media (max-width: 768px) {
    .footer-hours div {
        justify-content: center;
        gap: 20px;
        max-width: none;
    }
}
.footer-hours span {
    font-weight: 500;
    color: var(--theme-header-text, rgba(255,255,255,0.5));
    opacity: 0.6;
}

/* Footer CTA */
.footer-cta {
    text-align: center;
}
.footer-cta p {
    margin-bottom: 20px;
    font-size: 15px;
}
.footer-cta .btn-footer {
    display: inline-block;
    background: var(--theme-header-text, #fff);
    color: var(--theme-primary, #000);
    padding: 14px 35px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.25s ease;
    border: 1px solid var(--theme-header-text, #fff);
}
.footer-cta .btn-footer:hover {
    background: transparent;
    color: var(--theme-header-text, #fff);
    border-color: var(--theme-header-text, #fff);
}

/* Footer Social - text links with dots */
.footer-social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 15px;
}
.footer-social-links a {
    color: var(--theme-header-text, rgba(255,255,255,0.85));
    text-decoration: none;
    font-size: 14px;
    opacity: 0.85;
}
.footer-social-links a:hover {
    opacity: 1;
}
.footer-social-links .dot {
    color: var(--theme-header-text, rgba(255,255,255,0.4));
    opacity: 0.5;
    font-size: 10px;
}

/* Legacy footer social (circles) */
.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
@media (max-width: 768px) {
    .footer-social {
        justify-content: center;
    }
}
.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(128,128,128,0.15);
    border-radius: 50%;
    font-size: 14px;
    transition: background 0.2s;
    color: var(--theme-header-text, rgba(255,255,255,0.8));
}
.footer-social a:hover {
    background: rgba(128,128,128,0.25);
}

/* Footer Bottom */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
    font-size: 13px;
    color: var(--theme-header-text, rgba(255,255,255,0.5));
    opacity: 0.6;
    flex-wrap: wrap;
    gap: 10px;
}
.footer-bottom a {
    color: var(--theme-header-text, rgba(255,255,255,0.5));
    text-decoration: none;
}
.footer-bottom a:hover {
    opacity: 1;
}
@media (max-width: 640px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ========== MODAL STYLES ========== */
.modal-heading {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    padding: 20px 24px 0;
    border-bottom: 1px solid #eee;
    color: #111;
}
.modal-heading .modal-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #111;
}
.modal-heading .modal-price {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
}
.modal-heading hr {
    margin: 8px 0 0;
}
.modal-subline {
    display: block;
    padding: 0 24px;
    color: #555;
    font-size: 14px;
}

#itemDialog .modal-body {
    overflow-y: auto;
    max-height: 90vh;
    -webkit-overflow-scrolling: touch;
    padding: 0 24px;
}

#itemDialog[open] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1060px;
    width: calc(100vw - 4rem);
    max-height: 90vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

#itemDialog::backdrop {
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#orderStartDialog[open] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 820px;
    width: calc(100vw - 4rem);
    max-height: 90vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
#orderStartDialog::backdrop {
    background: rgba(0, 0, 0, .55);
}

/* Autocomplete dropdown is appended to body, so z-index handles visibility */
gmpx-place-autocomplete,
gmpx-place-autocomplete-field,
.pac-container { z-index: 2147483646 !important; }

#itemDialog .modal-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .3);
    max-height: 90vh;
}

/* Close button */
.item-dialog-close {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 20;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, .06);
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.item-dialog-close:hover {
    background: rgba(0, 0, 0, .12);
    color: #222;
}

#itemDialog .modal-body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#itemDialog .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #eee;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, .12);
}

#dialogActionBar .btn {
    appearance: none;
    border-radius: 25px;
    border: 1px solid #ddd;
    padding: 12px 20px;
    cursor: pointer;
    font-weight: 500;
}

#dialogActionBar .btn-primary {
    border-color: transparent;
    background: var(--main-color, #D4AF37);
    color: #000;
}

/* ---- Popup interior polish (match default5 clean flat look) ---- */

/* General popup typography */
#itemDialog .modal-body {
    font-size: 14px;
    line-height: 1.5;
}

/* Select/dropdown styling */
#itemDialog select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    font-size: 14px;
    color: #333;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
#itemDialog select:focus {
    outline: none;
    border-color: #888;
}

/* Section spacing — generous padding so content isn't flush against edges */
#itemDialog .pizzaTopings {
    padding: 16px 20px !important;
    border-bottom: 1px solid #eee;
}
#itemDialog .choiceDiv {
    padding: 16px 20px !important;
}
#itemDialog .form-group {
    margin-bottom: 6px !important;
}

/* "Choose Your Size" section — padding + separator */
#itemDialog .form-group:has([name="pizzaTypeGrp"]) {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

/* Radio/checkbox alignment — vertically center with label text */
#itemDialog .radioOption {
    font-size: 14px;
    vertical-align: middle;
}
#itemDialog input[type="radio"],
#itemDialog input[type="checkbox"] {
    margin-right: 4px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Section heading refinement — use restaurant color for labels */
#itemDialog .font-size-17 label b,
#itemDialog .choiceDiv label b {
    font-size: 14px;
    font-weight: 600;
    color: var(--main-color, #333);
}
#itemDialog .bold,
#itemDialog strong {
    font-size: 15px;
    font-weight: 600;
}

/* Accordion (customize) section — flat with border, no rounded corners */
#itemDialog .accordion1 {
    border: 1px solid #ddd;
    padding: 16px 20px;
    margin-top: 4px;
}
#itemDialog .accordion1 h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--main-color, #333);
}
#itemDialog .accordinCustomizeDiv {
    padding: 14px 16px;
}

/* Accordion (toppings) — flat full-width headers like default5 */
#itemDialog .accordion2 {
    margin-top: 4px;
}
#itemDialog .accordion2 .ui-accordion-header {
    background: #F1F0F0;
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 10px 14px;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #333;
}
/* Force accordion arrow/icon to be dark and visible */
#itemDialog .accordion2 .ui-accordion-header .toggle-plus {
    float: right;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #333 !important;
}
#itemDialog .accordion2 .ui-accordion-header strong {
    color: #333;
}
#itemDialog .accordion2 .ui-accordion-header .ui-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: center;
    background-size: 16px;
}
#itemDialog .accordinToppingsDiv {
    padding: 12px 16px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/* Other Choices / Extra sections — flat, no box */
#itemDialog .OtherChoicesDiv {
    padding: 16px 20px;
    margin-top: 10px;
}
#itemDialog .ExtraChoicesCntr {
    margin-top: 16px;
    padding: 16px 20px;
}
#itemDialog .OtherChoicesDiv .form-group {
    margin-bottom: 4px !important;
}

/* Special Requests textarea */
#itemDialog textarea.form-control {
    border: 1px solid #ccc;
    font-size: 14px;
    padding: 10px 12px;
}

/* ===================================================================
   Modifier matrix cleanup (2026-06-26) — default8-scoped (#itemDialog),
   CSS only, no shared .tpl edits. Stage 1: tidy the topping/customize
   ROWS (.accordinContent in both accordion1 customize + accordion2
   toppings). Each row becomes a clean flex row: controls lead, name
   fills, the per-row remove (red X gif) is pushed right and stays subtle
   until the row is hovered. Keeps the two-up col-md-6 column layout.
   =================================================================== */
#itemDialog .accordinContentDiv .accordinContent {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    margin: 0 0 1px 0;
    border-radius: 6px;
    min-height: 36px;
    /* keep the space-efficient two-up column layout (col-md-6) */
}
#itemDialog .accordinContentDiv .accordinContent:hover {
    background: #f6f6f7;
}
/* Row order: Left ½ · Whole · Right ½ · [None] · Extra · ✗clear · Name.
   Whole is centered (Pizza Hut/Domino's); Extra keeps its column under the
   "Extra" header; the ✗ sits AFTER Extra (not on top of it) and before the
   name. Scoped per section because Customize has an extra "None" radio. */
/* --- toppings: 3 placement radios --- */
#itemDialog .accordinToppingsDiv .accordinContent > input[type="radio"]:nth-of-type(2) { order: 1; } /* left  */
#itemDialog .accordinToppingsDiv .accordinContent > input[type="radio"]:nth-of-type(1) { order: 2; } /* whole */
#itemDialog .accordinToppingsDiv .accordinContent > input[type="radio"]:nth-of-type(3) { order: 3; } /* right */
#itemDialog .accordinToppingsDiv .accordinContent > input[type="checkbox"]  { order: 4; } /* Extra */
#itemDialog .accordinToppingsDiv .accordinContent .clearRadioOptions        { order: 5; } /* ✗     */
/* --- customize: 4 radios incl. None --- */
#itemDialog .accordinCustomizeDiv .accordinContent > input[type="radio"]:nth-of-type(2) { order: 1; } /* left  */
#itemDialog .accordinCustomizeDiv .accordinContent > input[type="radio"]:nth-of-type(1) { order: 2; } /* whole */
#itemDialog .accordinCustomizeDiv .accordinContent > input[type="radio"]:nth-of-type(3) { order: 3; } /* right */
#itemDialog .accordinCustomizeDiv .accordinContent > input[type="radio"]:nth-of-type(4) { order: 4; } /* None  */
#itemDialog .accordinCustomizeDiv .accordinContent > input[type="checkbox"]  { order: 5; } /* Extra */
#itemDialog .accordinCustomizeDiv .accordinContent .clearRadioOptions        { order: 6; } /* ✗     */
/* name always last */
#itemDialog .accordinContent .accordianLbl1,
#itemDialog .accordinContent .accordianToma {
    order: 10;
    flex: 0 1 auto;
    margin-left: 8px !important;
    font-size: 14px;
    line-height: 1.25;
}
/* Customize section: drop the redundant ◐●◑ glyph headers (the skinned icons
   are self-explanatory); the empty cells stay as spacers so None/Extra still
   line up over their columns. */
#itemDialog .accordinCustomizeDiv .accordianLbl img { display: none !important; }
/* toppings: the ✗ is replaced by tap-to-deselect (absence = none, via JS) */
#itemDialog .accordinToppingsDiv .clearRadioOptions {
    display: none !important;
}
/* (customize keeps its explicit None radio; its ✗ only shows when selected) */
#itemDialog .accordinCustomizeDiv .accordinContent:not(:has(input:checked)) .clearRadioOptions {
    display: none;
}
/* "Extra" as a labeled pill (Pizza Hut style). The raw checkbox is hidden but
   still carries state + submits; the pill is the clickable UI. It only appears
   once a placement is chosen (checkbox enabled): outline = off, filled = on. */
#itemDialog .accordinContent > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}
#itemDialog .d8-extra-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 9px;
    margin-left: 2px;
    border: 1px solid #c4c4c4;
    border-radius: 11px;
    color: #8a8a8a;
    background: #fff;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    flex: 0 0 auto;
}
#itemDialog .accordinToppingsDiv .d8-extra-pill { order: 4; }
#itemDialog .accordinCustomizeDiv .d8-extra-pill { order: 5; }
#itemDialog .accordinContent > input[type="checkbox"]:checked + .d8-extra-pill {
    background: var(--main-color, #c0392b);
    border-color: var(--main-color, #c0392b);
    color: #fff;
}
/* hidden until the topping is actually on the pizza (placement selected) */
#itemDialog .accordinContent > input[type="checkbox"]:disabled + .d8-extra-pill {
    display: none;
}
/* the "Extra" column header is now redundant — the pill self-labels */
#itemDialog .accordinToppingsDiv > .row > .col-lg-12:not(.accordinContentDiv) .accordianLbl {
    display: none !important;
}

/* --- Customize (default ingredients): drop its header; "None" → red ✗ --- */
#itemDialog .accordinCustomizeDiv .accordianLbl {
    display: none !important;   /* None/Extra/glyph header row (icons + pill self-label) */
}
/* hide the raw 4th "None" radio; it's shown as the red ✗ below (JS-wired to select it) */
#itemDialog .accordinCustomizeDiv .accordinContent > input[type="radio"]:nth-of-type(4) {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}
#itemDialog .d8-none-x {
    order: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 4px;
    border: 1px solid #e2b6b1;
    border-radius: 50%;
    color: #c0392b;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    flex: 0 0 auto;
}
#itemDialog .d8-none-x::before {
    content: "\00D7";   /* × multiplication sign — in every font, encoding-safe */
    font-size: 14px;
    font-weight: 700;
}
#itemDialog .accordinCustomizeDiv .accordinContent > input[type="radio"]:nth-of-type(4):checked + .d8-none-x {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
}
/* radio/checkbox controls (order handled explicitly above) */
#itemDialog .accordinContent input[type="radio"],
#itemDialog .accordinContent input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0 2px;
}
/* per-row remove (btn_delete.gif): grey + faint until row hover */
#itemDialog .accordinContent .clearRadioOptions {
    flex: 0 0 auto;
    margin: 0 2px;
}
#itemDialog .accordinContent .clearRadioOptions img {
    height: 15px !important;
    width: 15px !important;
    opacity: 0.28;
    filter: grayscale(1);
    transition: opacity .12s ease, filter .12s ease;
}
#itemDialog .accordinContent:hover .clearRadioOptions img {
    opacity: 0.9;
    filter: none;
}

/* ---- Stage 2: legible half-pizza column headers (toppings section) ----
   Replace the cryptic pizza-glyph icons with text (WHOLE / LEFT ½ / RIGHT ½).
   The header cells (.accordianLb2 with <img>) live in the non-content header
   column; give them + the row controls matching fixed widths + a shared left
   start so the labels line up over their radio columns. */
#itemDialog .accordinContentDiv .accordinContent {
    gap: 0;
    padding-left: 16px;
}
#itemDialog .accordinContent > input[type="radio"],
#itemDialog .accordinContent > input[type="checkbox"] {
    width: 18px;
    margin: 0 22px 0 0;   /* 40px column pitch → lines up under the headers */
}
/* ---- placement radios skinned as ◐ ● ◑ pizza-segment icons ----
   position 1 = whole, 2 = left half, 3 = right half (robust by order, not value).
   The Extra control is a <input type=checkbox> so it stays a distinct square. */
#itemDialog .accordinContent > input[type="radio"].accordinRadioOptions {
    -webkit-appearance: none;
    appearance: none;
    width: 18px !important;
    height: 18px;
    border: 1.5px solid #b9b9b9;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
#itemDialog .accordinContent > input[type="radio"]:nth-of-type(2) {
    background: linear-gradient(90deg, #c9c9c9 0 50%, #fff 50% 100%);
}
#itemDialog .accordinContent > input[type="radio"]:nth-of-type(3) {
    background: linear-gradient(90deg, #fff 0 50%, #c9c9c9 50% 100%);
}
#itemDialog .accordinContent > input[type="radio"]:nth-of-type(1):checked {
    background: var(--main-color, #c0392b);
    border-color: var(--main-color, #c0392b);
}
#itemDialog .accordinContent > input[type="radio"]:nth-of-type(2):checked {
    background: linear-gradient(90deg, var(--main-color, #c0392b) 0 50%, #fff 50% 100%);
    border-color: var(--main-color, #c0392b);
}
#itemDialog .accordinContent > input[type="radio"]:nth-of-type(3):checked {
    background: linear-gradient(90deg, #fff 0 50%, var(--main-color, #c0392b) 50% 100%);
    border-color: var(--main-color, #c0392b);
}
/* header column: align its left start with the rows */
#itemDialog .accordinToppingsDiv > .row > .col-lg-12:not(.accordinContentDiv) [class*="col-md-6"] {
    padding-left: 16px !important;
}
/* hide glyph imgs in the HEADER cells (not the row remove-✗) */
#itemDialog .accordinToppingsDiv > .row > .col-lg-12:not(.accordinContentDiv) .accordianLb2 img {
    display: none !important;
}
/* turn each header glyph cell into a small text column label */
#itemDialog .accordinToppingsDiv > .row > .col-lg-12:not(.accordinContentDiv) .accordianLb2 {
    width: 40px !important;
    height: auto !important;
    min-height: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block;
    text-align: left;
    vertical-align: bottom;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
    color: #9a9a9a;
    white-space: nowrap;
    overflow: visible;
}
/* (placement column labels dropped — the ◐ ● ◑ icons are self-explanatory;
   the empty header cells above just act as spacers so "Extra" lines up.) */
/* the existing "Extra" text header — match the new label style */
#itemDialog .accordinToppingsDiv > .row > .col-lg-12:not(.accordinContentDiv) .accordianLbl {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #9a9a9a !important;
    vertical-align: bottom;
}

@media (max-width: 767px) {
    #itemDialog[open] {
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
    }

    #itemDialog .modal-shell {
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 0; /* Full-screen on mobile, no rounding */
    }

    .modal-heading {
        padding: 16px 16px 0;
    }
    #itemDialog .modal-body {
        padding: 0 16px;
    }
    .modal-subline {
        padding: 0 16px;
    }

    #itemDialog .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #itemDialog .modal-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        border-top: 1px solid #eee;
        background: #fff;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        display: flex;
        justify-content: flex-end;
        z-index: 1000;
    }
}

/* ========== UTILITY CLASSES ========== */
.margin-top-10 {
    margin-top: 10px !important;
}

.margin-bottom-50 {
    margin-bottom: 50px !important;
}

/* ========== BUTTON STYLES ========== */
.btn-black-white-black {
    color: #FFFFFF;
    background-color: #231f20;
    border-color: #231f20;
    border-radius: 25px;
}

.btn-black-white-black:hover, .btn-black-white-black:focus, .btn-black-white-black.focus, .btn-black-white-black:active, .btn-black-white-black.active, .open > .btn-black-white-black.dropdown-toggle {
    color: #FFFFFF;
    background-color: #080707;
    border-color: #080707;
}

.btn-red {
    color: #fff;
    background-color: #c72b38;
    border-color: #b22632;
    border-radius: 25px;
}

.btn-red:hover, .btn-red:focus, .btn-red.focus, .btn-red:active, .btn-red.active, .open > .btn-red.dropdown-toggle {
    color: #fff;
    background-color: #9d222c;
    border-color: #881d26;
}

/* ========== MENU / PRODUCT STYLES ========== */
.shop-name {
    margin-bottom: 20px;
}

.title-shop {
    font-size: 28px;
    color: #121619;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.title-crust {
    color: #121619;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.crust-choose ul li {
    display: inline-block;
}

.crust-choose ul li a {
    display: block;
    border: 1px solid #dddddd;
    font-size: 14px;
    color: #999999;
    padding: 13px 24px;
    margin: 0px 3px;
    border-radius: 25px;
}

.crust-choose ul li.current a {
    background: var(--main-color, #D4AF37);
    border-color: var(--main-color, #D4AF37);
    color: #000;
}

.quantity-product {
    margin-top: 30px;
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 30px;
}

.quantity {
    font-size: 20px;
    color: #121619;
    font-weight: 700;
    letter-spacing: 1px;
    padding-right: 10px;
}

.quantity-product input {
    width: 50px;
    height: 50px;
    text-align: center;
    border: 1px solid #dddddd;
    border-radius: 8px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    font-size: 20px;
    color: #999999;
    font-weight: 700;
}

.add-cart {
    background: var(--main-color, #D4AF37);
    color: #000;
    border: 1px solid var(--main-color, #D4AF37);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    padding: 12px 30px;
    margin-left: 18px;
    border-radius: 25px;
    font-weight: 600;
}

.add-cart:hover {
    opacity: 0.85;
    color: #000;
}

/* ========== RELATED PRODUCTS ========== */
.releted-product .menu-title {
    color: #121619;
    display: block;
}

.releted-product {
    background: unset;
}

.releted-product .menu-price {
    font-weight: 700;
}

.releted-product .menu-title:hover {
    color: var(--main-color, #D4AF37);
}

.releted-product .menu-image {
    position: relative;
    top: 0;
}

.releted-product .menu-img {
    overflow: unset;
}

.releted-product .menu-image:hover {
    top: -10px;
}

img {
    border-radius: 12px;
}

/* ========== FORM STYLES ========== */
label, .deliveryLabel {
    display: block;
    max-width: 100%;
    font-weight: bold;
}

label {
    display: inline-block;
    float: inherit;
    padding: 0px;
}

.form-group {
    margin-bottom: 0px !important;
}

.ui-dialog {
    z-index: 1000 !important;
}

/* ========== TABS ========== */
.border-tab {
    border: 1px solid #dddddd;
    border-radius: 12px;
}

.border-tab ul {
    border-bottom: 1px solid #dddddd;
    padding: 0px 20px;
}

.border-tab ul li {
    display: inline-block;
    padding: 13px 15px;
}

.border-tab ul li a {
    font-size: 18px;
    color: #999999;
    text-transform: uppercase;
    position: relative;
}

.product-desc-tab {
    padding: 30px 20px 0px 20px;
    display: none;
}

.product-desc-tab.current {
    display: block;
}

.border-tab ul li.current a, .border-tab ul li a:hover {
    color: var(--main-color, #D4AF37);
}

/* ========== MOBILE STICKY CHECKOUT BAR ========== */
/* Mobile checkout bar - entire bar is clickable link */
a.mobile-checkout-bar,
.mobile-checkout-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    background: var(--theme-primary, #111);
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    text-decoration: none;
    transition: opacity 0.2s;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
a.mobile-checkout-bar:active {
    opacity: 0.9;
}
.mobile-checkout-bar .cart-summary {
    display: flex;
    flex-direction: column;
    color: var(--theme-header-text, #fff);
}
.mobile-checkout-bar .cart-summary .item-count {
    font-size: 12px;
    opacity: 0.85;
}
.mobile-checkout-bar .cart-summary .cart-total {
    font-size: 20px;
    font-weight: 700;
}
.mobile-checkout-bar .checkout-text {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-header-text, #fff);
    font-weight: 700;
    font-size: 16px;
}
.mobile-checkout-bar .checkout-text .arrow {
    font-size: 20px;
}

/* ========== MOBILE CATEGORY DROPDOWN ========== */
/* Hidden on desktop */
.mobile-category-dropdown {
    display: none;
    background: var(--theme-primary, #000);
    padding: 12px 16px;
    border-top: 1px solid rgba(128,128,128,0.2);
}
/* Visible on mobile - ALWAYS visible regardless of body/html state */
@media (max-width: 768px) {
    .mobile-category-dropdown,
    #mobileCategoryDropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        background: var(--theme-primary, #000) !important;
        padding: 10px 16px !important;
        border-top: 1px solid rgba(128,128,128,0.2) !important;
        /* Ensure it stays visible during scroll lock */
        position: relative !important;
        z-index: 99 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
    /* Keep dropdown visible even when body has noscroll */
    body.noscroll .mobile-category-dropdown,
    body.noscroll #mobileCategoryDropdown,
    html[style*="position: fixed"] .mobile-category-dropdown,
    html[style*="position: fixed"] #mobileCategoryDropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}
.mobile-category-dropdown select {
    width: 100%;
    padding: 12px 16px;
    border-radius: 25px;
    border: 1px solid var(--theme-header-text, rgba(255,255,255,0.4));
    background: transparent;
    color: var(--theme-header-text, #fff);
    font-size: 15px;
    font-weight: 500;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}
.mobile-category-dropdown select:focus {
    outline: none;
    border-color: var(--theme-header-text, #D4AF37);
}
.mobile-category-dropdown select option {
    background: var(--theme-primary, #1a1a1a);
    color: var(--theme-header-text, #fff);
    padding: 10px;
}

/* ========== MOBILE MENU GRID ========== */
@media (max-width: 768px) {
    /* Show mobile elements */
    a.mobile-checkout-bar,
    .mobile-checkout-bar {
        display: flex;
    }
    .mobile-category-dropdown {
        display: block;
    }

    /* Footer visible on mobile by default */
    .site-footer,
    footer.site-footer {
        display: block;
    }
    /* Hide footer on mobile ONLY for order pages */
    .site-footer.hide-on-mobile-order,
    footer.hide-on-mobile-order {
        display: none !important;
    }

    /* Hide desktop category sidebar */
    .day-menu .col-lg-2,
    .menu-tabs,
    .cus-tabs {
        display: none !important;
    }
    .day-menu .col-lg-10 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
    }

    /* DAY MENU - Black background */
    .day-menu {
        padding-top: 10px !important;
        padding-bottom: 100px !important;
        min-height: calc(100vh - 130px) !important;
        /* Don't override background - allow custom background images */
        background: transparent !important;
    }
    .day-menu .container {
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* MAIN - black bg */
    .main {
        /* Don't override background - allow custom background images */
        min-height: 100vh !important;
        padding-bottom: 80px !important;
    }

    /* MOBILE: Use flexbox for 2-column centered layout (no isotope on mobile) */
    .menu-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        justify-self: center !important;
        padding: 8px !important;
        background: transparent !important; /* Let page background show through */
        width: 100% !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    /* Menu items - 2 columns with flexbox, centered */
    /* With 8px gap between 2 items, each item is 50% - 4px (half the gap) */
    .menu-grid .menu-box,
    .menu-grid .menu-box.col-6,
    .menu-grid .menu-box.col-sm-3,
    .menu-grid > .menu-box,
    .day-menu .menu-box {
        width: calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        flex: 0 0 calc(50% - 4px) !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        float: none !important;
    }

    /* CARD STYLING */
    .menu-box .recipe-slide {
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

    .menu-box .recipe-content {
        padding: 10px 12px !important;
    }

    .menu-box .recipe-title,
    .menu-box h6 {
        font-size: 13px !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
        line-height: 1.3;
        color: #000;
    }

    .menu-box .recipe-content p {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 11px !important;
        line-height: 1.3 !important;
        color: #666 !important;
        margin-top: 4px !important;
    }

    .menu-box .price {
        font-size: 14px !important;
        font-weight: 700;
        color: #333;
    }

    /* Menu item images on mobile - force visibility */
    .menu-box .recipe-img,
    .menu-box .recipe-img.overflow-hidden,
    .recipe-slide .recipe-img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 100px !important;
        max-height: 100px !important;
        min-height: 100px !important;
        overflow: hidden !important;
        margin-bottom: 8px !important;
        position: relative !important;
    }
    .menu-box .recipe-img a,
    .recipe-slide .recipe-img a {
        display: block !important;
        height: 100% !important;
    }
    .menu-box .recipe-img img,
    .recipe-slide .recipe-img img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 100px !important;
        width: 100% !important;
        object-fit: cover !important;
    }
    /* Hide product hover overlay on mobile */
    .menu-box .product-hover,
    .recipe-slide .product-hover {
        display: none !important;
    }

    /* Mobile header */
    .site-header .container {
        min-height: 60px;
        padding: 0 12px;
    }
    .header-brand img {
        max-height: 45px;
    }
    .header-brand .brand-name {
        display: none;
    }

    /* Toast above checkout bar */
    .toast-notification {
        bottom: 90px;
    }
}

/* ========================================
   CMS PAGE STYLES
   For Home, About, Gallery, Contact pages
   ======================================== */

/* ========== HERO SECTIONS ========== */
.hero-section,
.page-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.page-hero {
    min-height: 50vh;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Soft top→bottom gradient: keeps the hero photo visible while ensuring bottom text stays readable. */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 40px 20px;
    color: #fff;
}
.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin: 0 0 20px;
    line-height: 1.1;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.hero-content .hero-subtitle {
    font-size: 1.25rem;
    opacity: 0.9;
    margin: 0 0 30px;
    line-height: 1.6;
}
.hero-cta {
    display: inline-block;
    background: var(--theme-header-text, #D4AF37);
    color: var(--theme-primary, #000) !important;
    padding: 16px 40px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 2px solid var(--theme-header-text, #D4AF37);
}
.hero-cta:hover {
    background: transparent;
    color: #fff !important;
    border-color: #fff;
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 60vh;
    }
    .hero-content h1 {
        font-size: 2.25rem;
    }
    .hero-content .hero-subtitle {
        font-size: 1rem;
    }
}

/* ========== FEATURES SECTION ========== */
.features-section {
    background: var(--theme-bg, #111);
    padding: 80px 20px;
}
.features-section .container {
    max-width: 1100px;
    margin: 0 auto;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.feature-card {
    text-align: center;
    padding: 30px 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--theme-header-text, rgba(212, 175, 55, 0.3));
}
.feature-icon {
    font-size: 48px;
    margin-bottom: 20px;
}
.feature-card h3 {
    color: var(--theme-text, #fff);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 10px;
}
.feature-card p {
    color: var(--theme-text, rgba(255,255,255,0.7));
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
    opacity: 0.8;
}

@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 500px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
    .features-section {
        padding: 50px 20px;
    }
}

/* ========== ABOUT PREVIEW SECTION ========== */
.about-preview {
    background: var(--theme-primary, #000);
    padding: 80px 20px;
}
.about-preview .container {
    max-width: 1100px;
    margin: 0 auto;
}
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.about-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.about-text h2 {
    color: var(--theme-header-text, #fff);
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 20px;
}
.about-text p {
    color: var(--theme-header-text, rgba(255,255,255,0.8));
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 25px;
    opacity: 0.85;
}
.btn-secondary {
    display: inline-block;
    background: transparent;
    color: var(--theme-header-text, #fff) !important;
    padding: 14px 32px;
    border-radius: 30px;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 1px solid var(--theme-header-text, rgba(255,255,255,0.4));
}
.btn-secondary:hover {
    border-color: var(--theme-header-text, #D4AF37);
    color: var(--theme-header-text, #D4AF37) !important;
}

@media (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .about-preview {
        padding: 50px 20px;
    }
}

/* ========== GALLERY PREVIEW ========== */
.gallery-preview {
    background: var(--theme-bg, #111);
    padding: 80px 20px;
    text-align: center;
}
.gallery-preview .container {
    max-width: 1100px;
    margin: 0 auto;
}
.gallery-preview h2 {
    color: var(--theme-text, #fff);
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 40px;
}
.gallery-grid-small {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}
.gallery-grid-small img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s ease;
}
.gallery-grid-small img:hover {
    transform: scale(1.03);
}

@media (max-width: 768px) {
    .gallery-grid-small {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== MENU HIGHLIGHTS SECTION ========== */
.menu-highlights {
    background: var(--theme-primary, #000);
    padding: 80px 20px;
    text-align: center;
}
.menu-highlights .container {
    max-width: 1100px;
    margin: 0 auto;
}
.menu-highlights h2 {
    color: var(--theme-header-text, #fff);
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 15px;
}
.section-subtitle {
    color: var(--theme-header-text, rgba(255,255,255,0.7));
    font-size: 1.1rem;
    margin: 0 0 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}
.highlight-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
}
.highlight-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.highlight-card:hover img {
    transform: scale(1.05);
}
.highlight-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
}
.highlight-tag {
    display: inline-block;
    background: var(--theme-header-text, #D4AF37);
    color: var(--theme-primary, #000);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 600px) {
    .highlights-grid {
        grid-template-columns: 1fr;
    }
    .menu-highlights {
        padding: 50px 20px;
    }
}

/* ========== IMAGE BREAK SECTION ========== */
.image-break {
    height: 400px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}
.image-break-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .image-break {
        height: 250px;
        background-attachment: scroll;
    }
}

/* ========== GALLERY PAGE ========== */
.gallery-section {
    background: var(--theme-bg, #111);
    padding: 60px 20px;
}
.gallery-section .container {
    max-width: 1200px;
    margin: 0 auto;
}
.gallery-section h2 {
    color: var(--theme-text, #fff);
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 40px;
}

/* Masonry-style gallery (like 4ambar.com) */
.gallery {
    columns: 1;
    column-gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
}
.gallery img {
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px;
    border-radius: 14px;
    border: 1px solid #1f1f1f;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    break-inside: avoid;
}
.gallery img:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

@media (min-width: 680px) {
    .gallery {
        columns: 2;
    }
}
@media (min-width: 1024px) {
    .gallery {
        columns: 3;
    }
}

/* Legacy grid gallery (keeping for backwards compatibility) */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.gallery-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.gallery-item img:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

@media (max-width: 900px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* ========== CONTENT SECTION (About Page) ========== */
.content-section {
    background: var(--theme-bg, #111);
    padding: 80px 20px;
}
.content-section .container {
    max-width: 1100px;
    margin: 0 auto;
}
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}
.content-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.content-text h2 {
    color: var(--theme-text, #fff);
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 25px;
}
.content-text p {
    color: var(--theme-text, rgba(255,255,255,0.85));
    font-size: 1rem;
    line-height: 1.8;
    margin: 0 0 20px;
}

@media (max-width: 768px) {
    .content-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .content-section {
        padding: 50px 20px;
    }
}

/* ========== HOURS SECTION ========== */
.hours-section {
    background: var(--theme-primary, #000);
    padding: 80px 20px;
    text-align: center;
}
.hours-section .container {
    max-width: 900px;
    margin: 0 auto;
}
.hours-section h2 {
    color: var(--theme-header-text, #fff);
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 40px;
}
.hours-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.hours-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 30px 25px;
}
.hours-card h3 {
    color: var(--theme-header-text, #D4AF37);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.hours-card p {
    color: var(--theme-header-text, rgba(255,255,255,0.8));
    margin: 0 0 5px;
    font-size: 0.95rem;
}
.hours-card .highlight {
    color: var(--theme-header-text, #fff);
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 10px;
}
.hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.hours-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    color: var(--theme-header-text, rgba(255,255,255,0.8));
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.hours-list li:last-child {
    border-bottom: none;
}

@media (max-width: 768px) {
    .hours-grid {
        grid-template-columns: 1fr;
    }
    .hours-section {
        padding: 50px 20px;
    }
}

/* ========== CTA SECTION ========== */
.cta-section {
    background: var(--theme-bg, #111);
    padding: 80px 20px;
    text-align: center;
}
.cta-section .container {
    max-width: 700px;
    margin: 0 auto;
}
.cta-section h2 {
    color: var(--theme-text, #fff);
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 15px;
}
.cta-section p {
    color: var(--theme-text, rgba(255,255,255,0.7));
    font-size: 1.1rem;
    margin: 0 0 30px;
}

/* ========== SEARCH FUNCTIONALITY ========== */
/* Search Toggle Button */
.nav-search .search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.25s ease;
    margin: 0 6px;
}
.nav-search .search-toggle:hover {
    border-color: var(--theme-header-text, #D4AF37);
}
.nav-search .search-toggle svg {
    stroke: var(--theme-header-text, #D4AF37);
}

/* Search Overlay */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.search-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Search Container */
.search-container {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Search Header */
.search-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0 16px;
    transition: background 0.2s;
}
.search-input-wrapper:focus-within {
    background: rgba(255,255,255,0.15);
}

.search-input-wrapper .search-icon {
    flex-shrink: 0;
    stroke: rgba(255,255,255,0.5);
    margin-right: 12px;
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 14px 0;
    font-size: 17px;
    color: #fff;
    outline: none;
}
.search-input::placeholder {
    color: rgba(255,255,255,0.5);
}

.search-clear {
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s;
}
.search-clear:hover {
    background: rgba(255,255,255,0.3);
}
.search-clear svg {
    stroke: #fff;
    width: 14px;
    height: 14px;
}

.search-close {
    background: transparent;
    border: none;
    color: var(--theme-header-text, #D4AF37);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    padding: 10px;
    white-space: nowrap;
}
.search-close:hover {
    opacity: 0.8;
}

/* Search Results */
.search-results {
    flex: 1;
    overflow-y: auto;
    padding: 20px 0;
    -webkit-overflow-scrolling: touch;
}

/* Search Hint / No Results */
.search-hint,
.search-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}
.search-hint p,
.search-no-results p {
    color: rgba(255,255,255,0.6);
    font-size: 16px;
    margin: 16px 0 0;
}
.search-no-results span {
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    margin-top: 6px;
}

/* Search Category */
.search-category {
    margin-bottom: 24px;
}
.search-category h4 {
    color: var(--theme-header-text, #D4AF37);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Search Item */
.search-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    margin: 0 -12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.search-item:hover {
    background: rgba(255,255,255,0.08);
}
.search-item:active {
    background: rgba(255,255,255,0.12);
}

.search-item-img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
}
.search-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-item-info {
    flex: 1;
    min-width: 0;
}

.search-item-name {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-item-name mark {
    background: var(--theme-header-text, #D4AF37);
    color: var(--theme-primary, #000);
    border-radius: 2px;
    padding: 0 2px;
}

.search-item-descr {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-item-price {
    color: var(--theme-header-text, #D4AF37);
    font-size: 15px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Mobile Search Adjustments */
@media (max-width: 768px) {
    .search-container {
        max-width: 100%;
        padding: 0 16px;
    }
    .search-header {
        padding: 16px 0;
    }
    .search-input {
        font-size: 16px;
    }
    .search-item-img {
        width: 50px;
        height: 50px;
    }
    .search-item-name {
        font-size: 14px;
    }
    .search-item-descr {
        font-size: 12px;
    }
    .search-item-price {
        font-size: 14px;
    }
}

/* Mobile search button in order info bar - hidden on desktop */
.mobile-search-btn,
.mobile-search-divider {
    display: none;
}

/* Hide search in header nav on mobile - it's in order info bar */
@media (max-width: 900px) {
    .nav-search {
        display: none !important;
    }
}

/* Show mobile search button in order bar on mobile */
@media (max-width: 768px) {
    .order-info-bar {
        padding: 10px 0;
    }
    .order-info-bar .container {
        padding: 0 16px;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    /* Hide desktop-only elements on mobile */
    .desktop-only {
        display: none !important;
    }
    /* Show mobile search button */
    .mobile-search-btn {
        display: inline-flex !important;
        order: 0;
        padding: 8px 12px;
    }
    .mobile-search-btn span {
        display: none; /* Icon only on mobile to save space */
    }
    .mobile-search-divider {
        display: none !important;
    }
    /* Cart + Checkout are redundant on mobile — the sticky bottom bar already
       shows items/total/Checkout. Hide them here so the top bar stays one slim row. */
    .order-info-cart,
    .order-info-checkout {
        display: none !important;
    }
    /* Drop the Open/Closed status on mobile so search + Pickup + time fit one line
       (open/closed hours still shown on desktop and in the footer) */
    .order-info-status,
    .order-info-status + .order-info-divider {
        display: none !important;
    }
    .order-info-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ========== CONTACT SECTION ========== */
.contact-section {
    background: var(--theme-bg, #111);
    padding: 60px 20px;
}
.contact-section .container {
    max-width: 1100px;
    margin: 0 auto;
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
}
.contact-info h2 {
    color: var(--theme-text, #fff);
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 35px;
}
.contact-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}
.contact-icon {
    font-size: 24px;
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-details h3 {
    color: var(--theme-text, #fff);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 8px;
}
.contact-details p {
    color: var(--theme-text, rgba(255,255,255,0.8));
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}
.contact-details a {
    color: var(--theme-text, rgba(255,255,255,0.8));
    text-decoration: none;
    transition: color 0.2s;
}
.contact-details a:hover {
    color: var(--theme-header-text, #D4AF37);
}
.btn-link {
    display: inline-block;
    color: var(--theme-header-text, #D4AF37) !important;
    font-size: 0.9rem;
    margin-top: 8px;
    text-decoration: none;
    font-weight: 500;
}
.btn-link:hover {
    text-decoration: underline;
}
.hours-list-compact {
    list-style: none;
    padding: 0;
    margin: 0;
}
.hours-list-compact li {
    color: var(--theme-text, rgba(255,255,255,0.8));
    font-size: 0.9rem;
    padding: 3px 0;
}
.social-links {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.social-links h3 {
    color: var(--theme-text, #fff);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 15px;
}
.social-icons {
    display: flex;
    gap: 15px;
}
.social-icons a {
    color: var(--theme-text, rgba(255,255,255,0.7));
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s;
}
.social-icons a:hover {
    color: var(--theme-header-text, #D4AF37);
}
.contact-map iframe {
    width: 100%;
    min-height: 400px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .contact-section {
        padding: 40px 20px;
    }
    .contact-map iframe {
        min-height: 300px;
    }
}

/* ========== INLINE MENU SEARCH BAR (Owner.com style) ========== */
.menu-search-bar {
    padding: 0 0 24px;
    margin-bottom: 10px;
}
.menu-search-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 0 16px;
    max-width: 500px;
    margin: 0 auto;
    transition: all 0.2s ease;
}
.menu-search-wrapper:focus-within {
    background: rgba(255,255,255,0.12);
    border-color: var(--theme-header-text, rgba(212,175,55,0.5));
    box-shadow: 0 0 0 3px rgba(212,175,55,0.1);
}
.menu-search-icon {
    flex-shrink: 0;
    stroke: rgba(255,255,255,0.5);
    margin-right: 12px;
}
.menu-search-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 14px 0;
    font-size: 15px;
    color: #fff;
    outline: none;
    min-width: 0;
}
.menu-search-input::placeholder {
    color: rgba(255,255,255,0.4);
}
.menu-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s;
    margin-left: 8px;
}
.menu-search-clear:hover {
    background: rgba(255,255,255,0.3);
}
.menu-search-clear svg {
    stroke: #fff;
}
.menu-search-shortcut {
    display: inline-block;
    color: rgba(255,255,255,0.3);
    font-size: 12px;
    font-weight: 500;
    background: rgba(255,255,255,0.08);
    padding: 4px 8px;
    border-radius: 6px;
    margin-left: 8px;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .menu-search-shortcut {
        display: none;
    }
    .menu-search-bar {
        padding: 16px;
        margin-bottom: 0;
    }
    .menu-search-wrapper {
        max-width: 100%;
    }
}

/* Inline Search Results */
.menu-search-results {
    max-width: 700px;
    margin: 0 auto 20px;
    padding: 0 16px;
}
.menu-search-results .search-category {
    margin-bottom: 20px;
}
.menu-search-results .search-category h4 {
    color: var(--theme-header-text, #D4AF37);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.menu-search-results .search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 0 -12px 4px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    background: rgba(255,255,255,0.03);
}
.menu-search-results .search-item:hover {
    background: rgba(255,255,255,0.1);
}
.menu-search-results .search-item:active {
    background: rgba(255,255,255,0.15);
}
.menu-search-results .search-item-img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
}
.menu-search-results .search-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.menu-search-results .search-item-info {
    flex: 1;
    min-width: 0;
}
.menu-search-results .search-item-name {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-search-results .search-item-name mark {
    background: var(--theme-header-text, #D4AF37);
    color: var(--theme-primary, #000);
    border-radius: 2px;
    padding: 0 2px;
}
.menu-search-results .search-item-descr {
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.menu-search-results .search-item-price {
    color: var(--theme-header-text, #D4AF37);
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}
.menu-search-results .search-no-results {
    text-align: center;
    padding: 30px 20px;
    color: rgba(255,255,255,0.5);
}
.menu-search-results .search-no-results p {
    margin: 0;
    font-size: 14px;
}

/* Light theme support for menu search */
.main[style*="background: #fff"] .menu-search-wrapper,
.main[style*="background:#fff"] .menu-search-wrapper,
body.light-theme .menu-search-wrapper {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.1);
}
body.light-theme .menu-search-input,
.main[style*="background: #fff"] .menu-search-input {
    color: #333;
}
body.light-theme .menu-search-input::placeholder,
.main[style*="background: #fff"] .menu-search-input::placeholder {
    color: rgba(0,0,0,0.4);
}
body.light-theme .menu-search-results .search-item-name,
.main[style*="background: #fff"] .menu-search-results .search-item-name {
    color: #333;
}
body.light-theme .menu-search-results .search-item-descr,
.main[style*="background: #fff"] .menu-search-results .search-item-descr {
    color: rgba(0,0,0,0.6);
}

/* ========== DARK THEME ========== */
html[data-theme="dark"] body {
    background: #0a0a0a;
    color: #f0f0f0;
}
html[data-theme="dark"] .main {
    background: #111 !important;
    color: #f0f0f0;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .item-card {
    background: #1a1a1a;
    border-color: #2a2a2a;
    color: #f0f0f0;
}
html[data-theme="dark"] .footer,
html[data-theme="dark"] footer {
    background: #000 !important;
    color: #ccc;
}
html[data-theme="dark"] a {
    color: inherit;
}
html[data-theme="dark"] .category-name,
html[data-theme="dark"] .item-name,
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4 {
    color: #f0f0f0;
}
html[data-theme="dark"] .item-description {
    color: #9ca3af;
}
html[data-theme="dark"] .item-price {
    color: #e5e7eb;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: #1a1a1a;
    color: #f0f0f0;
    border-color: #333;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #666;
}
/* Dark theme dialogs */
html[data-theme="dark"] #orderStartDialog .order-start-shell {
    background: #1a1a1a;
    color: #f0f0f0;
}
html[data-theme="dark"] #orderStartDialog .order-start-header {
    border-bottom-color: #2a2a2a;
}
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dialog-content {
    background: #1a1a1a;
    color: #f0f0f0;
}
/* Dark theme cart */
html[data-theme="dark"] .cart-panel,
html[data-theme="dark"] .cart-item {
    background: #1a1a1a;
    border-color: #2a2a2a;
    color: #f0f0f0;
}
html[data-theme="dark"] .cart-total {
    color: #f0f0f0;
    border-top-color: #2a2a2a;
}
/* Dark theme menu search */
html[data-theme="dark"] .menu-search-wrapper {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}
html[data-theme="dark"] .menu-search-input {
    color: #f0f0f0;
}
html[data-theme="dark"] .menu-search-input::placeholder {
    color: rgba(255,255,255,0.4);
}
/* Dark theme scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #111;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #333;
}

/* =========================================================================
   MENU UI POLISH (Owner/Toast-style) — added 2026-06
   #1 desktop bigger photos + whitespace · #3 mobile category chips
   #4 always-visible rail search · #5 open/closed status
   ========================================================================= */

/* ----- #1 Desktop: bigger photos, 3-up EQUAL-HEIGHT grid, more whitespace -----
   CSS grid (replaces isotope masonry) so every card in a row is the same height —
   keeps mixed image / no-image categories from going jagged. */
@media (min-width: 769px) {
    .menu-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
        margin: 0 !important;
        align-items: stretch;
    }
    .menu-grid .menu-box {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }
    .menu-grid .menu-box .recipe-slide {
        height: 100%;
    }
    /* Uniform, larger food photo (or placeholder) at the top of each card.
       flex:0 0 190px keeps the equal-height card from shrinking the photo band. */
    .menu-box .recipe-img,
    .recipe-slide .recipe-img {
        height: 190px;
        flex: 0 0 190px;
        margin-bottom: 0;
        overflow: hidden;
    }
    /* content takes the remaining space below the fixed photo band.
       min-height:0 overrides the base template's min-height:100%, which otherwise
       made content fill the whole card and pushed the price out the clipped bottom. */
    .menu-box .recipe-slide .recipe-content {
        flex: 1 1 auto;
        min-height: 0;
    }
    .menu-box .recipe-img > a,
    .recipe-slide .recipe-img > a {
        display: block;
        height: 100%;
    }
    .menu-box .recipe-img img,
    .recipe-slide .recipe-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* roomier card content */
    .menu-box .recipe-content {
        padding: 16px 18px;
    }
    .menu-box .recipe-title {
        font-size: 18px;
    }
    /* Description must NOT expand on hover (was growing the card and scrolling
       the page). Keep it clamped at all times; full text lives in the item modal. */
    .menu-box .recipe-content p:not(.price),
    .menu-box .recipe-content:hover p:not(.price),
    .menu-box .recipe-content.expanded p:not(.price) {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
        overflow: hidden !important;
        max-height: none !important;
        -webkit-mask-image: linear-gradient(180deg,#000 78%,transparent 100%) !important;
        mask-image: linear-gradient(180deg,#000 78%,transparent 100%) !important;
    }
}

/* ----- Honest placeholder for missing photos (only in categories that use photos) ----- */


/* ----- Category rail: full names, stable (no truncate-then-expand jumpiness) ----- */
#menu-tabbing li {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    line-height: 1.35;
    height: auto !important;
}

/* ----- Category rail reads as a nav, not 18 outlined buttons -----
   style.css gives every category a bordered white pill. That's fine for a
   6-category menu and very noisy for a 20-category one: the borders stack into
   a ladder and long names wrap inside their own box. Drop the chrome and let
   the type carry it -- hover tints the row, the active row gets the brand
   colour plus a left accent bar. */
.cus-tabs.menu-tabs ul {
    gap: 1px;
}
.cus-tabs.menu-tabs li {
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 9px 12px;
    margin: 0;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 500;
    color: #4b5563;
    text-align: left;
}
.cus-tabs.menu-tabs li:hover,
#menu-tabbing li:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #111827 !important;
    z-index: auto !important;
}
.cus-tabs.menu-tabs li.is-checked,
#menu-tabbing li.is-checked {
    background: transparent !important;
    color: var(--main-color) !important;
    font-weight: 700;
    box-shadow: inset 2px 0 0 var(--main-color);
    border-radius: 0 8px 8px 0;
}

/* ----- #4 Always-visible search box at top of the desktop category rail ----- */
.menu-rail-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: text;
    transition: border-color .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
}
.menu-rail-search:hover,
.menu-rail-search:focus {
    border-color: var(--theme-primary, #9ca3af);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
    outline: none;
}
.menu-rail-search svg {
    flex-shrink: 0;
    stroke: #9ca3af;
}
/* Search box is desktop-rail only; the order-info-bar handles mobile search */
@media (max-width: 768px) {
    .menu-rail-search { display: none; }
}

/* ----- #5 Open / Closed status pill in the order info bar ----- */
.order-info-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.order-info-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
    flex-shrink: 0;
}
.order-info-status.is-open .status-dot {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
}
.order-info-status.is-closed .status-dot {
    background: #dc2626;
}
.order-info-status.is-open .status-text { color: #16a34a; }
.order-info-status.is-closed .status-text { color: #dc2626; }
.order-info-status .status-hours {
    color: #6b7280;
    font-weight: 500;
}
/* On very small screens keep just the Open/Closed word to save room */
@media (max-width: 560px) {
    .order-info-status .status-hours { display: none; }
    .order-info-status { padding: 8px 10px; }
}

/* ----- #3 Mobile category chips (replaces the native <select>) ----- */
.mobile-category-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0;
}
.mobile-category-chips::-webkit-scrollbar { display: none; }
.mobile-cat-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--theme-header-text, rgba(255,255,255,0.45));
    background: transparent;
    color: var(--theme-header-text, #fff);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mobile-cat-chip.is-active {
    background: var(--theme-header-text, #fff);
    color: var(--theme-primary, #111);
    border-color: var(--theme-header-text, #fff);
    font-weight: 700;
}

/* ----- Mobile: pin the category chips; let the logo/brand header scroll away -----
   (chips were moved out of <header> in the JSP so they can stick against the page;
   the mobile slide-in nav is position:fixed, so a non-sticky header is safe) */
/* position:sticky requires body to NOT be a scroll container. The base
   `html, body { overflow-x: hidden }` (style.css) makes body one, because
   overflow-x:hidden forces the computed overflow-y to `auto`. Keep the
   horizontal clip on <html> only — all viewports — so sticky resolves
   against the viewport (needed by the sticky rail, chips, and order bar). */
html { overflow-x: hidden; }
body { overflow-x: visible !important; }

@media (max-width: 768px) {
    /* Pin the whole top stack: logo/hamburger header, then chips, then order bar */
    .site-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 102 !important;
    }
    .mobile-category-dropdown,
    #mobileCategoryDropdown {
        position: sticky !important;
        top: 60px !important; /* just below the pinned header */
        z-index: 101 !important;
    }
    .order-info-bar {
        position: sticky !important;
        top: 117px !important; /* below the pinned header + chip bar */
        z-index: 100 !important;
    }
}

/* ----- #1 Persistent "+" add button on every card ----- */
.menu-box .recipe-slide {
    position: relative;
}
/* Replace the old hover "Add to cart" overlay (rendered white-on-white on
   light themes) with an always-visible, readable + button. */
.menu-box .product-hover,
.recipe-slide .product-hover {
    display: none !important;
}
.card-add-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--main-color, #111);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}
.card-add-btn svg {
    width: 18px;
    height: 18px;
}
.card-add-btn:hover,
.card-add-btn:focus {
    color: #fff;
    transform: scale(1.09);
    box-shadow: 0 3px 10px rgba(0,0,0,0.26);
    outline: none;
}
/* keep the price clear of the button */
.menu-box .price {
    padding-right: 44px;
}
@media (max-width: 768px) {
    .card-add-btn {
        width: 32px;
        height: 32px;
        bottom: 10px;
        right: 10px;
    }
    .card-add-btn svg { width: 16px; height: 16px; }
}

/* ----- #2 Sticky desktop category rail ----- */
@media (min-width: 992px) {
    .day-menu .col-lg-2 {
        position: sticky;
        top: 148px; /* clears the sticky header + order info bar */
        align-self: flex-start;
        height: fit-content;
        max-height: calc(100vh - 168px);
        overflow-y: auto;
        /* overflow-y:auto computes overflow-x to `auto` too, so a long category
           name used to raise a horizontal bar under the rail as well. */
        overflow-x: hidden;
        /* Scrollbar stays out of sight until the pointer is in the rail --
           a permanently-visible track next to the categories reads as chrome. */
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
        /* Soft cut-off so a clipped list still reads as "more below" now that
           there is no resting scrollbar to signal it. */
        -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent);
        mask-image: linear-gradient(#000 calc(100% - 26px), transparent);
    }
    .day-menu .col-lg-2:hover { scrollbar-color: rgba(0,0,0,0.18) transparent; }
    .day-menu .col-lg-2::-webkit-scrollbar { width: 6px; height: 0; }
    .day-menu .col-lg-2::-webkit-scrollbar-track { background: transparent; }
    .day-menu .col-lg-2::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 3px;
    }
    .day-menu .col-lg-2:hover::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.18);
    }
}

/* ----- Item customizer: fix duplicate topping/included-items header on mobile -----
   The shared ingredients template renders a SECOND column header for the
   desktop two-column layout, meant to be hidden on smaller screens. Those
   Bootstrap responsive-display utilities aren't honored inside #itemDialog, so
   the second header stacks under the first = the duplicate header. Two patterns
   are used in the template, each with its own intended breakpoint:
     - included-items header:  `hidden-sm hidden-xs`  (BS3) -> hide below lg
     - toppings-accordion hdr: `d-none d-md-block`    (BS4) -> hide below md
   Restore both via the customizer's own wrapper classes; lives in default8.css
   (only loaded on default8), so the shared .tpl behaviour is unaffected. */
@media (max-width: 991px) {
    .accordinCustomizeDiv .hidden-xs.hidden-sm {
        display: none !important;
    }
}
@media (max-width: 767px) {
    .accordinToppingsDiv .d-none.d-md-block {
        display: none !important;
    }
}



/* ----- Cards without a photo -----
   An item with no photo gets no image frame at all: the card simply reflows to
   text. An empty frame reads as a picture that failed to load and pulls the eye
   straight to the gap, which is the opposite of what it was there for.

   Rows stay even because the cards STRETCH, not because every card carries an
   image-shaped box. Bootstrap's .row is already flex, so the column just needs to
   stretch and the card needs to fill it; the price and the + button then sit on a
   common baseline whether or not the card above them has a photo. Items are
   already ordered photos-first within a category, so the text-only cards group at
   the end rather than punching holes through the grid. */
.menu-box {
    display: flex;
}
.menu-box .recipe-slide {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.menu-box .recipe-slide .recipe-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
/* Price last, pinned to the bottom, so it lines up across a row no matter how
   long the description above it runs. The + button is already absolutely
   positioned bottom-right, and this keeps the price clear of it. */
.menu-box .recipe-slide .recipe-content .price {
    margin-top: auto;
    margin-bottom: 0;
}