/* FOOD VIBE v71 — customer mobile ordering refresh.
 * Presentation only; no order, session, authentication or payment behavior changes.
 * Loaded after existing theme and step-specific CSS. Designed for light and dark modes.
 */
:root {
  --fv71-surface: #fff;
  --fv71-soft: #f4f8f7;
  --fv71-ink: #183439;
  --fv71-secondary: #627579;
  --fv71-line: #e4eceb;
  --fv71-rainbow: linear-gradient(100deg,#f26881 0%,#ffb660 21%,#f5d75e 37%,#53cdab 54%,#6abbed 73%,#a28bfc 89%,#e08bd8 100%);
  --fv71-elev: 0 10px 32px rgba(17,47,52,.07);
}
/* Existing site theme enables color-scheme:dark when dark mode is selected. */
@supports (color: light-dark(white, black)) {
  :root {
    --fv71-surface: light-dark(#fff, #1a2d33);
    --fv71-soft: light-dark(#f4f8f7, #213940);
    --fv71-ink: light-dark(#183439, #edf8f6);
    --fv71-secondary: light-dark(#627579, #b9cdcc);
    --fv71-line: light-dark(#e4eceb, #40575e);
    --fv71-elev: 0 10px 32px color-mix(in srgb, var(--fv71-ink) 8%, transparent);
  }
}
.fv71-bottom-nav, .fv71-floating-action, .fv71-order-cards { display:none; }
/* Filter chips: horizontal scroll, no additional queries or client-side dependencies. */
.fv71-categories { display:flex; align-items:center; gap:9px; overflow-x:auto; scrollbar-width:thin; padding:0 0 14px; margin:2px 0 5px; -webkit-overflow-scrolling:touch; }
.fv71-chip { flex:0 0 auto; white-space:nowrap; display:inline-flex; align-items:center; min-height:39px; border:1px solid var(--fv71-line); border-radius:100px; padding:8px 16px; font-size:.83rem; font-weight:750; background:var(--fv71-surface); color:var(--fv71-ink); text-decoration:none; }
.fv71-chip.is-active { background:var(--fv-primary,#0c8e85); color:#fff; border-color:var(--fv-primary,#0c8e85); }
.fv71-chip:hover { text-decoration:none; border-color:var(--fv-primary,#0c8e85); }
.fv71-chip:focus-visible { outline-offset:-3px; }

/* Mobile order history is cards; desktop keeps existing semantic table. */
.fv71-overline { display:block; color:var(--fv71-secondary); font-size:.65rem; font-weight:850; letter-spacing:.13em; }

@media (max-width:700px) {
  html { scroll-padding-bottom:115px; }
  html body { overflow-x:clip; }
  html body.fv71-order-page .customer-wrap,
  html body section.customer-wrap#menu { padding-bottom:calc(112px + env(safe-area-inset-bottom,0px)) !important; }
  html body.fv71-order-page .customer-nav { padding:10px 15px 7px!important; gap:7px!important; }
  html body.fv71-order-page .customer-nav .brand { font-size:1.26rem!important; letter-spacing:-.035em!important; }
  html body.fv71-order-page .customer-nav nav { display:flex!important; flex-wrap:nowrap!important; overflow-x:auto; max-width:100%; width:100%; gap:5px!important; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  html body.fv71-order-page .customer-nav nav::-webkit-scrollbar { display:none; }
  html body.fv71-order-page .customer-nav nav a { min-height:36px!important; white-space:nowrap; font-size:.76rem!important; padding:5px 11px!important; border-radius:100px!important; border:1px solid var(--fv71-line); }
  html body.fv71-order-page .customer-nav nav a.selected { border-color:var(--fv-primary,#0c8e85); }
  /* Consistent safe-area-aware navigation throughout home/order screens. */
  html body .fv71-bottom-nav {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    position:fixed; left:0; right:0; bottom:0; z-index:1000;
    padding:9px max(12px,env(safe-area-inset-left,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-right,0px));
    background:var(--fv71-surface); border-top:1px solid var(--fv71-line);
    box-shadow:0 -8px 28px rgba(23,50,56,.08);
  }
  html body .fv71-bottom-nav::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--fv71-rainbow); }
  .fv71-bottom-nav a { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-radius:13px; color:var(--fv71-secondary); min-width:0; min-height:52px; text-decoration:none; font-size:.69rem; font-weight:800; letter-spacing:-.01em; }
  .fv71-bottom-nav a.is-active { color:var(--fv-primary,#087d77); background:var(--fv71-soft); }
  .fv71-bottom-nav a:focus-visible { outline-offset:-2px; }
  .fv71-nav-icon { line-height:0; display:block; }
  .fv71-nav-icon svg { display:block; }
  .fv71-nav-label { line-height:1.2; }
  .fv71-nav-count { position:absolute; top:0; left:calc(50% + 9px); display:grid; place-items:center; min-width:18px; height:18px; padding:0 4px; color:#fff; background:#e75273; border:2px solid var(--fv71-surface); border-radius:99px; font-size:.59rem; line-height:1; font-weight:900; }
  /* Bar above mobile tab navigation for quick basket and checkout actions. */
  html body .fv71-floating-action {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    position:fixed; left:12px; right:12px; bottom:calc(75px + env(safe-area-inset-bottom,0px)); z-index:999;
    border:1px solid var(--fv71-line); border-radius:18px; padding:10px 10px 10px 16px;
    background:var(--fv71-surface); color:var(--fv71-ink); box-shadow:0 12px 40px rgba(21,58,58,.2); text-decoration:none;
  }
  .fv71-floating-action > span { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .fv71-floating-action > span strong { color:var(--fv71-ink); font-size:.93rem; line-height:1.25; }
  .fv71-floating-action small { color:var(--fv71-secondary); font-size:.69rem; font-weight:600; }
  .fv71-floating-action > b, .fv71-sticky-submit { display:inline-flex; align-items:center; justify-content:center; gap:9px; flex:0 0 auto; min-height:43px; border:0; border-radius:12px; padding:10px 13px; background:var(--fv-primary,#0c8e85); color:#fff!important; font-size:.82rem; font-weight:850; text-decoration:none; box-shadow:none; }
  .fv71-sticky-submit { cursor:pointer; }
  .fv71-sticky-submit:disabled { opacity:.53; cursor:not-allowed; }
  .fv71-floating-action:hover { text-decoration:none; }
  html body .site-footer { padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))!important; font-size:.7rem; }
  /* Headers and panels feel like a restaurant app, not a large desktop dashboard. */
  html body.fv71-order-page main.customer-wrap { padding:17px 14px calc(120px + env(safe-area-inset-bottom,0px))!important; }
  html body.fv71-order-page .section-heading { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:4px 0 18px; }
  html body.fv71-order-page .section-heading .eyebrow { font-size:.67rem; }
  html body.fv71-order-page .section-heading h1 { font-size:clamp(1.6rem,6.8vw,2rem)!important; margin:3px 0; letter-spacing:-.045em; }
  html body.fv71-order-page .section-heading > a.btn { padding:10px 13px!important; min-height:42px; font-size:.78rem; }
  html body.fv71-order-page :is(.cart-layout,.panel,.order-summary,.cart-item) { min-width:0; }
  html body.fv71-order-page .cart-layout { display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:14px!important; }
  html body.fv71-order-page .panel { padding:18px!important; border-radius:19px!important; box-shadow:var(--fv71-elev)!important; }
  html body.fv71-order-page .panel h2 { font-size:1.08rem!important; margin:0 0 13px; }
  html body.fv71-order-page .notice { border-radius:13px; line-height:1.45; }
  /* Cart items use a consistent photo + title and clearly separated controls. */
  html body.fv71-cart-page .cart-item { display:grid!important; grid-template-columns:88px minmax(0,1fr); grid-template-rows:auto auto; column-gap:13px; row-gap:9px; align-items:start; padding:17px 0; }
  html body.fv71-cart-page .cart-thumb { width:88px!important; height:88px!important; flex-basis:auto!important; border-radius:14px; grid-row:1; }
  html body.fv71-cart-page .cart-item-details { grid-column:2; grid-row:1/3; width:100%; }
  html body.fv71-cart-page .cart-item h2 { font-size:.99rem!important; line-height:1.35; margin:1px 0 6px; }
  html body.fv71-cart-page .cart-item .muted { margin:0 0 11px; font-size:.77rem; }
  html body.fv71-cart-page .cart-item > strong { width:auto!important; grid-column:1; grid-row:2; text-align:center!important; white-space:normal!important; font-size:.88rem; }
  html body.fv71-cart-page .cart-controls { display:flex; align-items:flex-start; flex-wrap:wrap; gap:7px; }
  html body.fv71-cart-page .qty-form { display:flex; flex-wrap:wrap; gap:6px; }
  html body.fv71-cart-page .qty-form label { font-size:.76rem; }
  html body.fv71-cart-page .qty-form input[type=number] { width:58px!important; min-height:39px!important; padding:5px 7px!important; text-align:center; }
  html body.fv71-cart-page .cart-controls .btn { padding:7px 10px!important; min-height:39px; font-size:.76rem; }
  html body.fv71-order-page .bill-row { padding:11px 0; gap:10px; font-size:.86rem; }
  html body.fv71-order-page .bill-row > span { min-width:0; }
  html body.fv71-order-page .bill-row strong { flex:0 0 auto; }
  html body.fv71-order-page .bill-row.total { font-size:1.14rem; }
  html body.fv71-order-page .order-summary { position:static!important; }
  html body.fv71-cart-page .clear-cart { margin-top:18px; }
  html body.fv71-cart-page .order-summary .full-width { min-height:48px; }
  /* Checkout: readable fields, one-column delivery form and visible total. */
  html body.fv71-checkout-page .dv-hero { border:1px solid var(--fv71-line)!important; padding:21px 19px!important; border-radius:19px!important; margin:0 0 17px; }
  html body.fv71-checkout-page .dv-hero h1 { margin:0 0 9px; font-size:clamp(1.45rem,6vw,1.9rem)!important; line-height:1.18; }
  html body.fv71-checkout-page .dv-hero p { font-size:.87rem; margin:0; line-height:1.5; }
  html body.fv71-checkout-page .dv-label { font-size:.82rem; font-weight:750; margin-top:16px; }
  html body.fv71-checkout-page :is(.dv-input,.fv-coupon-entry) { min-height:49px; border-radius:12px!important; font-size:16px!important; }
  html body.fv71-checkout-page textarea.dv-input { min-height:112px; }
  html body.fv71-checkout-page .fv-coupon-controls { display:flex; flex-wrap:wrap; gap:8px; }
  html body.fv71-checkout-page .fv-coupon-controls input { flex:1 1 160px; min-width:0; }
  html body.fv71-checkout-page .fv-coupon-controls button { flex:0 1 auto; }
  html body.fv71-checkout-page .fv-pay-choices { margin:16px 0; }
  html body.fv71-checkout-page #place-order-button { width:100%; min-height:51px; font-size:.96rem; }
  html body.fv71-checkout-page .order-summary { border-top:4px solid var(--fv-primary,#0c8e85)!important; }
  /* My Orders: replace cramped table with clear tracking cards. */
  html body.fv71-orders-page .fv-table-wrap { display:none!important; }
  html body.fv71-orders-page .fv71-order-cards { display:grid; gap:12px; }
  html body.fv71-orders-page .fv71-order-card { position:relative; border:1px solid var(--fv71-line); border-radius:17px; background:var(--fv71-surface); padding:15px; box-shadow:0 4px 14px rgba(15,46,49,.04); }
  html body.fv71-orders-page .fv71-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  html body.fv71-orders-page .fv71-card-top h2 { margin:2px 0 0; font-size:1.3rem!important; line-height:1.15; }
  html body.fv71-orders-page .fv71-card-date { margin:9px 0 14px; color:var(--fv71-secondary); font-size:.79rem; }
  html body.fv71-orders-page .fv71-card-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--fv71-line); padding:12px 0; font-size:.79rem; color:var(--fv71-secondary); }
  html body.fv71-orders-page .fv71-card-meta strong { font-size:1.08rem; color:var(--fv71-ink); }
  html body.fv71-orders-page .fv71-card-actions { display:grid; grid-template-columns:1fr auto; gap:9px; }
  html body.fv71-orders-page .fv71-card-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:43px; border-radius:11px; text-decoration:none; font-size:.84rem; font-weight:800; }
  html body.fv71-orders-page .fv71-track-btn { gap:8px; background:var(--fv-primary,#0c8e85); color:#fff!important; }
  html body.fv71-orders-page .fv71-chat-btn { padding:9px 15px; border:1px solid var(--fv71-line); background:var(--fv71-soft); color:var(--fv71-ink); }
  html body.fv71-orders-page .fv-pagination { justify-content:center; }
  html body.fv71-orders-page .fv-pagination > * { min-height:41px; display:inline-flex; align-items:center; }
  html body.fv71-orders-page .section-heading .fv-row-actions { width:100%; }
  html body.fv71-orders-page .section-heading .fv-row-actions > a { flex:1 1 auto; text-align:center; justify-content:center; }
  /* Order detail: a visual tracking timeline based on actual stored status. */
  html body.fv71-order-detail-page .section-heading .fv-row-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  html body.fv71-order-detail-page .section-heading .fv-row-actions a { display:flex; justify-content:center; align-items:center; text-align:center; padding:10px!important; font-size:.74rem; line-height:1.25; min-height:47px; border-radius:11px; }
  html body.fv71-order-detail-page .section-heading > .status-pill { order:0; }
  html body.fv71-order-detail-page .dv-timeline { margin-top:14px; }
  html body.fv71-order-detail-page .panel > h2:not(:first-child) { margin-top:20px; }
  html body.fv71-product-page .fv-hero-card { display:grid!important; grid-template-columns:1fr!important; padding:13px!important; gap:15px; }
  html body.fv71-product-page .fv-hero-card .fv-picture { width:100%!important; max-width:100%!important; min-width:0; aspect-ratio:4/3; height:auto!important; max-height:290px; overflow:hidden; border-radius:14px; }
  html body.fv71-product-page .fv-hero-card .fv-picture img { width:100%!important; height:100%!important; object-fit:cover; }
  html body.fv71-product-page .fv-hero-card h1 { font-size:1.55rem!important; line-height:1.2; }
  html body.fv71-product-page .fv56-detail-order { display:grid; grid-template-columns:92px 1fr; gap:11px; align-items:end; }
  html body.fv71-product-page .fv56-detail-order input[type=number] { width:92px!important; }
  html body.fv71-product-page .fv56-detail-order .fv56-detail-add { width:100%!important; min-width:0; }
}

/* Detail progress component is also useful on tablets & desktop. */
.fv71-tracking { background:var(--fv71-surface); border:1px solid var(--fv71-line); box-shadow:var(--fv71-elev); border-radius:20px; padding:18px; margin:0 0 17px; overflow:hidden; }
.fv71-tracking-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fv71-tracking-top strong { font-size:1rem; color:var(--fv71-ink); }
.fv71-status-steps { list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:0; margin:20px 0 13px; gap:4px; }
.fv71-status-steps li { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:9px; text-align:center; color:var(--fv71-secondary); font-size:.73rem; font-weight:700; line-height:1.2; min-width:0; }
.fv71-status-steps li:not(:last-child)::before { content:""; position:absolute; z-index:0; left:50%; right:calc(-50% - 4px); top:13px; height:2px; background:var(--fv71-line); }
.fv71-status-steps li.is-done:not(:last-child)::before { background:var(--fv-primary,#0c8e85); }
.fv71-step-dot { z-index:1; position:relative; display:grid; place-items:center; background:var(--fv71-soft); border:2px solid var(--fv71-line); border-radius:50%; width:28px; height:28px; flex:none; }
.fv71-status-steps li.is-done .fv71-step-dot { background:var(--fv-primary,#0c8e85); border-color:var(--fv-primary,#0c8e85); color:#fff; }
.fv71-status-steps li.is-done .fv71-step-dot::after { content:"✓"; color:#fff; font-size:.83rem; font-weight:850; }
.fv71-status-steps li.is-current { color:var(--fv71-ink); font-weight:850; }
.fv71-status-steps li.is-current .fv71-step-dot { box-shadow:0 0 0 5px var(--fv71-soft); }
.fv71-status-hint, .fv71-cancelled { color:var(--fv71-secondary); margin:0; font-size:.77rem; line-height:1.5; }
.fv71-cancelled { margin-top:10px; color:#b84e62; }
.fv71-status { white-space:normal!important; text-align:center; line-height:1.22; font-size:.68rem!important; }
.fv71-status-delivered { background:#dbf9e9!important; color:#136345!important; }
.fv71-status-cancelled { background:#ffe8ed!important; color:#a32e46!important; }
.fv71-status-preparing { background:#fff2d8!important; color:#8f5509!important; }
.fv71-status-out_for_delivery { background:#e3efff!important; color:#295baf!important; }

@media (max-width:390px) {
  html body.fv71-product-page .fv56-detail-order { grid-template-columns:85px 1fr; }
  html body.fv71-order-detail-page .fv71-status-steps li { font-size:.62rem; }
  html body .fv71-floating-action { left:9px; right:9px; padding:8px 8px 8px 11px; }
  html body .fv71-floating-action > b, .fv71-sticky-submit { font-size:.76rem; padding:9px 10px; }
  html body.fv71-cart-page .cart-item { grid-template-columns:74px minmax(0,1fr); gap:9px; }
  html body.fv71-cart-page .cart-thumb { width:74px!important; height:74px!important; }
}

@media (max-width:640px) {
  /* Menu-only: tighter cards, consistent product imagery and tap targets. */
  html body.fv71-menu-page main.customer-wrap { padding:12px 13px calc(120px + env(safe-area-inset-bottom,0px))!important; }
  html body.fv71-menu-page .menu-banner { position:relative; padding:23px 19px!important; border-radius:19px!important; margin:4px 0 15px!important; overflow:hidden; }
  html body.fv71-menu-page .menu-banner::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--fv71-rainbow); }
  html body.fv71-menu-page .menu-banner h1 { font-size:clamp(1.5rem,6vw,1.95rem)!important; line-height:1.2; letter-spacing:-.045em; }
  html body.fv71-menu-page .menu-banner p { font-size:.82rem; line-height:1.5; max-width:34ch; }
  html body.fv71-menu-page .menu-controls { padding:13px!important; border-radius:16px!important; margin:0 0 11px!important; }
  html body.fv71-menu-page .menu-controls .filter-form { display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:9px!important; }
  html body.fv71-menu-page .menu-controls .filter-form > div { grid-column:1 / -1; width:100%!important; }
  html body.fv71-menu-page .menu-controls .filter-form > .btn { grid-column:auto; padding:8px!important; min-width:0; margin:0; width:100%!important; min-height:42px; }
  html body.fv71-menu-page .menu-controls :is(input[type=search], select) { min-height:44px!important; font-size:16px!important; }
  html body.fv71-menu-page .fv71-categories { margin-bottom:7px; padding-bottom:8px; }
  html body.fv71-menu-page .food-grid { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important; }
  html body.fv71-menu-page .food-grid .food-card { display:flex!important; flex-direction:column!important; min-width:0; margin:0; border-radius:17px!important; box-shadow:0 7px 24px rgba(18,43,46,.07)!important; }
  html body.fv71-menu-page .food-card .food-photo { width:100%!important; height:clamp(120px,36vw,165px)!important; min-height:0!important; aspect-ratio:auto!important; overflow:hidden; }
  html body.fv71-menu-page .food-card .food-content { display:flex; flex:1; gap:7px; padding:11px!important; }
  html body.fv71-menu-page .food-card .food-category { font-size:.63rem!important; }
  html body.fv71-menu-page .food-card .food-content h2 { font-size:clamp(.97rem,3.8vw,1.11rem)!important; line-height:1.25; }
  html body.fv71-menu-page .food-card .food-content > p { color:var(--fv71-secondary); font-size:.74rem!important; }
  html body.fv71-menu-page .food-card .fv-mini { margin-top:auto!important; }
  html body.fv71-menu-page .food-card .fv-mini > a { font-size:.7rem!important; }
  html body.fv71-menu-page .food-card .food-bottom { margin-top:auto!important; display:flex; flex-wrap:wrap; gap:5px; }
  html body.fv71-menu-page .food-card .food-bottom strong { font-size:1.05rem!important; color:var(--fv71-ink); }
  html body.fv71-menu-page .food-card .food-content .btn.full-width, html body.fv71-menu-page .food-card .fv56-order-btn { display:flex; width:100%!important; min-height:43px; font-size:.78rem!important; padding:9px!important; border-radius:11px!important; margin-top:3px!important; }
  html body.fv71-menu-page .food-card .available-pill { border-radius:99px; font-size:.58rem!important; padding:5px 7px!important; }
  html body.fv71-menu-page .next-feature { line-height:1.5; font-size:.79rem; }
  html body.fv71-menu-page .food-card.fv63-unavailable { box-shadow:none!important; }
}

@media (max-width:340px) {
  html body.fv71-menu-page .food-grid { grid-template-columns:1fr!important; }
  html body.fv71-menu-page .food-grid .food-card { display:grid!important; grid-template-columns:108px minmax(0,1fr)!important; }
  html body.fv71-menu-page .food-grid .food-card .food-photo { min-height:175px!important; height:100%!important; }
}

@media (prefers-reduced-motion:reduce) {
  .fv71-chip, .fv71-bottom-nav *, .fv71-floating-action * { transition:none!important; }
}