/**
 * Legacy / old-Android guest menu safety net (Galaxy Tab E SM-T560NU, Chrome < 80).
 * Loaded LAST so solid colors win over color-mix / clamp / inset rules.
 */

/* Force readable emerald chrome without color-mix() */
body.theme-royal-veg .navbar {
    background: #1B4332 !important;
    background-image: none !important;
    border-bottom: 2px solid #C9A227 !important;
}

body.theme-royal-veg .navbar .hotel-header-name,
body.theme-royal-veg .navbar .logo i {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    opacity: 1 !important;
}

body.theme-royal-veg .hero {
    background: #1B4332 !important;
    background-image: none !important;
    opacity: 1 !important;
    -webkit-transform: none !important;
    transform: none !important;
    animation: none !important;
}

body.theme-royal-veg .hero h1 {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: none !important;
    font-size: 2rem !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

body.theme-royal-veg .hero-tagline {
    color: #F0E6D2 !important;
    -webkit-text-fill-color: #F0E6D2 !important;
    opacity: 1 !important;
    font-size: 1rem !important;
    font-weight: 600;
}

body.theme-royal-veg .pure-veg-badge {
    background: #0F2A1E !important;
    border: 1px solid #C9A227 !important;
    color: #F5E6B8 !important;
    -webkit-text-fill-color: #F5E6B8 !important;
    opacity: 1 !important;
}

body.theme-royal-veg .hero-ornament i {
    color: #C9A227 !important;
}

/* FSSAI veg/non-veg marks without ::after (old WebViews often skip it) */
.swiggy-badge {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    border: 2px solid #0f8a5c !important;
    border-radius: 2px !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
    vertical-align: middle !important;
    position: relative !important;
}

.swiggy-veg {
    border-color: #0f8a5c !important;
    background-color: #0f8a5c !important;
    box-shadow: inset 0 0 0 2px #ffffff !important;
}

.swiggy-veg::after {
    display: none !important;
    content: none !important;
}

.swiggy-nonveg {
    border-color: #c62828 !important;
    background-color: #c62828 !important;
    box-shadow: inset 0 0 0 2px #ffffff !important;
}

.swiggy-nonveg::after {
    display: none !important;
    content: none !important;
}

/* If icon font failed, hide empty tofu boxes in chips — keep the label */
.filter-btn .bx,
.filter-btn i.bx,
.special-badge .bx,
.best-seller-badge-inline .bx,
.best-seller-badge-guest .bx {
    font-size: 0.95em;
}

/* Prefer system fonts when Google Fonts CSS2 fails on old Chrome */
body.theme-royal-veg,
body.theme-royal-veg .btn-add-cart,
body.theme-royal-veg .filter-btn {
    font-family: 'Outfit', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

body.theme-royal-veg .hero h1,
body.theme-royal-veg .hotel-header-name,
body.theme-royal-veg .accordion-title {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
}

/* Readable chips + dish rows on Tab E (~800 CSS px, treated as desktop by 768 breakpoint) */
@media (min-width: 600px) and (max-width: 1100px) {
    body.theme-royal-veg .container {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .filter-scroll-row .filter-btn {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        padding: 0.6rem 1rem !important;
        color: #1A2E1A !important;
        -webkit-text-fill-color: #1A2E1A !important;
        background: #ffffff !important;
        border: 1px solid rgba(27, 67, 50, 0.25) !important;
    }

    .filter-scroll-row .filter-btn.active {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        background: #1B4332 !important;
        border-color: #1B4332 !important;
    }

    .dish-name-line .dish-name,
    body.veg-no-images .accordion-dish-row .dish-name {
        font-size: 1.08rem !important;
        font-weight: 700 !important;
        color: #122018 !important;
    }

    .dish-price-action-row .price {
        font-size: 1.1rem !important;
        font-weight: 800 !important;
        color: #1B4332 !important;
    }

    .btn-swiggy-add,
    .swiggy-action-btn-wrap-inline .btn-swiggy-add {
        min-height: 42px !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
    }
}

/*
 * Fix 2 — touch-action: manipulation on all interactive guest elements.
 * Eliminates the 300 ms tap-delay on Android Chrome (pre-76) and Android
 * WebView. This is NOT restricted to the Tab E viewport: it is safe and
 * beneficial on every touch device. The admin POS already does this;
 * the guest side was missing it.
 */
.btn-add-cart,
.btn-swiggy-add,
.qty-btn,
.qty-btn.inc,
.qty-btn.dec,
.accordion-header,
.filter-btn,
.filter-cat,
.filter-diet,
.filter-meal,
.special-filter,
.accordion-filter-btn,
.mobile-dropdown-item,
.cart-toggle-btn,
.cart-fab,
.back-to-top-btn,
.sidebar-cat-btn,
.guest-bottom-nav-btn,
.category-tab-btn {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    /* Prevent long-press context menus on interactive elements on Android */
    -webkit-tap-highlight-color: transparent;
}

/* Accordion header specifically: allow vertical scroll on the page while
   tapping the header still registers correctly on old Chrome. */
.accordion-header {
    touch-action: manipulation;
    /* Ensure cursor feedback is present even without hover on touch */
    cursor: pointer;
}


/* inset isn't supported on very old Chrome — expand overlays explicitly */
body.theme-royal-veg .hero::before,
body.theme-royal-veg .hero::after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*
 * Galaxy Tab E (and similar old tablets ~600–1100 CSS px):
 * Sticky box-shadow does NOT occlude scrolling content on old Chrome —
 * leave a real overlapping solid layer between navbar and filters.
 */
@media (min-width: 600px) and (max-width: 1100px) {
    body.theme-royal-veg .navbar:not(.guest-navbar) {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: #1B4332 !important;
        background-image: none !important;
        /* Extra opaque emerald under the bar so any seam is still green */
        padding-bottom: 14px !important;
        border-bottom: none !important;
        overflow: visible !important;
    }

    body.theme-royal-veg .navbar:not(.guest-navbar)::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 14px;
        background: #1B4332;
        pointer-events: none;
        z-index: 0;
    }

    body.theme-royal-veg .navbar:not(.guest-navbar) > * {
        position: relative;
        z-index: 1;
    }

    body.theme-royal-veg main.container > .controls,
    body.theme-royal-veg .accordion-filters-wrap {
        position: -webkit-sticky !important;
        position: sticky !important;
        /* Tuck under the navbar so no transparent strip can open */
        top: calc(var(--guest-navbar-height, 72px) - 18px) !important;
        z-index: 996 !important;
        background: #F7F4EF !important;
        background-image: none !important;
        /* Full-bleed across the padded container so side gaps cannot show content */
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        margin-top: 0 !important;
        margin-bottom: 0.35rem !important;
        padding: 1.15rem 1rem 0.65rem !important;
        border-bottom: 1px solid rgba(27, 67, 50, 0.1) !important;
        overflow: visible !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    /* Real painted filler above the filter bar (box-shadow is ignored on Tab E) */
    body.theme-royal-veg main.container > .controls::before,
    body.theme-royal-veg .accordion-filters-wrap::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: -28px;
        height: 32px;
        background: #F7F4EF;
        z-index: 0;
        pointer-events: none;
    }

    body.theme-royal-veg main.container > .controls > *,
    body.theme-royal-veg .accordion-filters-wrap > * {
        position: relative;
        z-index: 1;
    }

    body.theme-royal-veg .filter-row-with-pinned-all {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-box-align: center !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        gap: 0.45rem !important;
        background: #F7F4EF !important;
    }

    body.theme-royal-veg .filter-all-pin {
        position: relative !important;
        left: auto !important;
        -webkit-flex: 0 0 auto !important;
        flex: 0 0 auto !important;
        z-index: 4 !important;
        background: #ffffff !important;
        color: #1A2E1A !important;
        -webkit-text-fill-color: #1A2E1A !important;
        border: 1px solid rgba(27, 67, 50, 0.25) !important;
        -webkit-box-shadow: 6px 0 10px -6px rgba(0, 0, 0, 0.12) !important;
        box-shadow: 6px 0 10px -6px rgba(0, 0, 0, 0.12) !important;
    }

    body.theme-royal-veg .filter-all-pin.active {
        background: #1B4332 !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        border-color: #1B4332 !important;
    }

    body.theme-royal-veg .filter-row-with-pinned-all > .filter-scroll-row {
        -webkit-box-flex: 1 !important;
        -webkit-flex: 1 1 auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.theme-royal-veg .filter-scroll-row .filter-btn[data-cat="all"] {
        position: relative !important;
        left: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Accordion body open-state height fix — ALL viewports.

   The JS that was supposed to set accordion-body height inline (openAccordionItem /
   closeAccordionItem referenced in style.css comments) does not exist in main.js.
   The toggle handler only does classList.toggle('open'), leaving the body at
   height:0; overflow:hidden from the base CSS rule. Content then overflows the
   zero-height container and overlaps adjacent section headers and rows.

   Fix: force height:auto on the open body so the container expands to its
   content on every browser. The opacity transition (0→1) still provides visual
   feedback; only the height slide animation is lost (it was already broken).
   ═══════════════════════════════════════════════════════════════════════════ */
.accordion-item.open .accordion-body {
    height: auto !important;
    overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Galaxy Tab E — accordion dish-row overlap fixes (portrait ≈ 800 CSS px).

   At 800 px the viewport is above the 768 px mobile breakpoint so the device
   receives desktop flex rules. Old Chrome (pre-76) on this tablet has three
   bugs that cause dish rows to visually collapse and overlap each other:

     (a) transition:all with cubic-bezier y1=1.56 > 1.0 animates card heights
         through an overshoot phase at render time → rows temporarily shrink.
     (b) display:flex; flex-direction:column on .accordion-grid computes
         height:auto rows as zero-height in old Chrome → items stack at y=0.
     (c) overflow:hidden inherited from .menu-card clips wrapped badge lines;
         next row starts immediately below the clip edge → text "merges".

   Additionally, position:absolute; bottom:-12px on the Add button in the
   standard image-column layout bleeds into the next row on old Chrome's
   absolute-in-flex bug.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 1100px) {

    /* ── (a) Replace overshoot bezier with simple property-specific transition */
    .menu-card,
    .accordion-dish-row {
        -webkit-transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
        transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
        -webkit-transform: none !important;
        transform: none !important;
    }

    /* ── (b) Switch accordion-grid from flex-column to block so each row is
             an independent block element with reliable auto height */
    .accordion-grid {
        display: block !important;
    }

    /* Each dish row: restore flex for its own internal layout; remove
       overflow:hidden (inherited from .menu-card) so wrapped badges never
       get clipped; align children to the top so varying heights don't
       offset content */
    .accordion-dish-row {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: flex !important;
        overflow: visible !important;
        -webkit-align-items: flex-start !important;
        align-items: flex-start !important;
        padding: 1rem 1.1rem !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        height: auto !important;
        min-height: 0 !important;
        -webkit-box-sizing: border-box !important;
        box-sizing: border-box !important;
    }

    .accordion-dish-row:last-child {
        border-bottom: none !important;
    }

    /* ── (c) Standard accordion — image column with absolute Add button ─── */

    /* Give the image column its own flex-column layout so the wrapper and
       button stack naturally; the padding-bottom replaces the image-wrapper's
       margin-bottom as the clearance space */
    .accordion-dish-row .dish-image-col {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-direction: column !important;
        flex-direction: column !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding-bottom: 0 !important;
    }

    /* Remove the margin that was paired with the absolute button */
    .accordion-dish-row .dish-image-wrapper-swiggy {
        margin-bottom: 0 !important;
    }

    /* Pull the Add button out of absolute positioning so it never
       overflows the row bounds on old Chrome */
    .accordion-dish-row .swiggy-action-btn-wrap {
        position: static !important;
        -webkit-transform: none !important;
        transform: none !important;
        margin-top: 6px !important;
        width: 90px !important;
        left: auto !important;
        bottom: auto !important;
    }

    /* ── Stacked no-image rows (.accordion-dish-row--stacked) ─────────── */

    /* Block layout is more reliable than flex on old Chrome for a single
       full-width info column */
    .accordion-dish-row--stacked {
        display: block !important;
    }

    .accordion-dish-row--stacked .dish-info-col--full {
        display: block !important;
        width: 100% !important;
        -webkit-box-sizing: border-box !important;
        box-sizing: border-box !important;
    }

    /* Restore flex only for the name-line and price-action rows */
    .accordion-dish-row--stacked .dish-name-line {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        gap: 0.35rem !important;
        row-gap: 0.25rem !important;
    }

    .accordion-dish-row--stacked .dish-price-action-row {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        -webkit-justify-content: space-between !important;
        justify-content: space-between !important;
        -webkit-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
        margin-top: 0.45rem !important;
    }

    /* ── Badge fix: inline-flex fails in old WebView inside flex-wrap ── */
    /* Use inline-block so badges sit on the baseline without triggering
       old Chrome's inline-flex + flex-wrap height calculation bug */
    .best-seller-badge-inline,
    .special-badge,
    .accordion-action-special {
        display: inline-block !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        -webkit-flex-shrink: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Dish name in no-image rows: allow wrapping so long names don't push
       badges off-screen (font size already reduced to 1.08rem above) */
    .accordion-dish-row--stacked .dish-name-line .dish-name {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* ── Open accordion body: height must be auto so content is not clipped ─
       On old Android Chrome the JS that was supposed to set body.style.height
       to scrollHeight never fires, leaving height:0; overflow:hidden in place.
       Content then leaks outside the clipping box and overlaps the next item.
       Force height:auto so the container expands to its content. */
    .accordion-item.open .accordion-body {
        height: auto !important;
        overflow: visible !important;
    }
}