/* ============================================================================
   AgnaPos — Mobile View (opt-in)   "Option C evolved" skin   rev 2026-08-08
   Every rule is gated behind html.agna-mv, which is only present when a device
   opts in (see mobile-view.js). With the class absent, this file changes NOTHING
   — the desktop screens render exactly as before. Default is desktop.

   This is a pure CSS *skin* over the app's own order screen (/menu/0): it keeps
   the native left category-rail / right item-list structure (tap a category on
   the left → its items show on the right), fits it to a phone portrait, and
   styles it to match the approved "Option C" mobile design. The app's real cart,
   Add-On modal, discount/tip and PLACE logic are reused untouched — no order
   path is changed. To disable everywhere: remove the <link>/<script> from
   index.html (or empty this file). Original index.html backed up on the server.
   ========================================================================== */

html.agna-mv{--navy:#12315c;--red:#e23b3b;--green:#0fae74;--ink:#141a22;--grey:#69727f;--line:#e7e9ee;--soft:#f5f6f8;--card:#fff;-webkit-tap-highlight-color:transparent;}
html.agna-mv,html.agna-mv body{background:#eef0f3 !important;}
html.agna-mv .d-flex.p-3.positive-relative{flex-direction:column !important;padding:8px !important;background:#eef0f3 !important;}

/* menu body: top bar full width, then rail + items row */
html.agna-mv .menu-body{width:100% !important;height:auto !important;display:flex !important;flex-wrap:wrap !important;gap:8px !important;background:transparent !important;}

/* TOP BAR (branch / type / coupon / mobile / search) — stacked in a card */
html.agna-mv .menu-option{position:static !important;inset:auto !important;flex:0 0 100% !important;width:100% !important;display:block !important;height:auto !important;background:var(--card) !important;border:1px solid var(--line) !important;border-radius:14px !important;padding:10px !important;margin:0 !important;box-shadow:0 1px 2px rgba(15,22,34,.04);}
html.agna-mv .menu-option>*{width:100% !important;margin:0 0 8px 0 !important;max-width:none !important;}
html.agna-mv .menu-option>*:last-child{margin-bottom:0 !important;}

/* LEFT RAIL — vertical category list with its own scroll */
html.agna-mv .sidenav{position:static !important;inset:auto !important;flex:0 0 clamp(94px,27vw,118px) !important;width:auto !important;max-width:none !important;height:auto !important;max-height:66vh !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--soft) !important;border:1px solid var(--line) !important;border-radius:14px !important;padding:6px !important;margin:0 !important;}
html.agna-mv .sidenav>.btn,html.agna-mv .btn-arrow{display:none !important;}
html.agna-mv .sidenav .nav-category{display:block !important;width:100% !important;height:auto !important;max-height:none !important;overflow:visible !important;}
html.agna-mv .categories-heading{display:none !important;}
html.agna-mv .sidenav .categories-body{display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important;overflow:visible !important;gap:3px !important;height:auto !important;max-height:none !important;}
html.agna-mv .sidenav .categories-body>*{flex:0 0 auto !important;width:100% !important;white-space:normal !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;text-align:center !important;gap:2px !important;padding:9px 4px !important;border-radius:9px !important;cursor:pointer !important;font-size:11.5px !important;line-height:1.18 !important;color:var(--ink) !important;background:transparent !important;}
html.agna-mv .sidenav .categories-body>*.active,html.agna-mv .sidenav .categories-body>.active{background:var(--card) !important;color:var(--red) !important;box-shadow:0 1px 3px rgba(0,0,0,.10);font-weight:800 !important;}
html.agna-mv .sidenav .categories-body .badge{font-size:9.5px !important;color:var(--grey) !important;background:transparent !important;padding:0 !important;}
html.agna-mv .b-category-items-arrow{display:none !important;}

/* RIGHT ITEM AREA — item list with its own scroll */
html.agna-mv .main{position:static !important;flex:1 1 0 !important;min-width:0 !important;width:auto !important;height:auto !important;margin:0 !important;}
html.agna-mv .main>.tab-content{width:100% !important;}
html.agna-mv .category-tab-content,html.agna-mv .content.light.category-tab-content{position:static !important;inset:auto !important;width:100% !important;max-width:100% !important;height:auto !important;max-height:66vh !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;margin:0 !important;padding:2px !important;}

/* item rows: one per row, card look, tappable (whole card opens the Add-On modal / adds) */
html.agna-mv .category-tab-content .d-flex.align-items-stretch.flex-wrap,html.agna-mv .category-tab-content .d-inline-flex{display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important;width:100% !important;gap:8px !important;}
html.agna-mv .order-category-items{position:relative !important;flex:0 0 auto !important;width:100% !important;min-width:0 !important;max-width:none !important;height:auto !important;min-height:0 !important;flex-direction:row !important;align-items:center !important;justify-content:flex-start !important;text-align:left !important;padding:13px 44px 13px 13px !important;margin:0 !important;border:1px solid var(--line) !important;border-radius:13px !important;background:var(--card) !important;box-shadow:0 1px 2px rgba(15,22,34,.04);}
html.agna-mv .order-category-items>p{margin:0 !important;font-size:13.5px !important;font-weight:700 !important;color:var(--ink) !important;}
html.agna-mv .order-category-items::after{content:"+";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:9px;background:color-mix(in srgb,var(--green) 12%,#fff);color:var(--green);border:1px solid color-mix(in srgb,var(--green) 35%,#fff);display:grid;place-items:center;font-size:19px;font-weight:800;line-height:1;}

/* ORDER SUMMARY — full-width card below the split */
html.agna-mv .order-history-content{position:static !important;inset:auto !important;flex:0 0 100% !important;width:100% !important;max-width:100% !important;height:auto !important;max-height:none !important;overflow:visible !important;margin:0 !important;border:1px solid var(--line) !important;border-radius:14px !important;background:var(--card) !important;padding:12px !important;box-shadow:0 1px 2px rgba(15,22,34,.04);}
html.agna-mv .order-summary-footer{position:static !important;inset:auto !important;width:100% !important;}
html.agna-mv body{overflow-x:hidden;}

/* ---- the opt-in toggle button (only visible on small screens) ---- */
#agna-mv-toggle{
  position:fixed;z-index:99999;bottom:14px;right:14px;display:none;
  background:#12315c;color:#fff;border:0;border-radius:24px;padding:10px 15px;
  font:700 13px -apple-system,Segoe UI,Roboto,Arial,sans-serif;
  box-shadow:0 4px 14px rgba(0,0,0,.28);cursor:pointer;}
@media (max-width:820px){ #agna-mv-toggle{display:block;} }