/* Principio 5.7.8.15 — Fixed Bottom Navigation
   Keeps the customer nav visually isolated from scrolling content without locking page scroll. */
:root{
  --px-customer-nav-reserve:112px;
  --px-customer-nav-shield:94px;
  --px-customer-nav-bg:#17191d;
  --px-customer-page-bg:#f6f3ed;
}

/* Reserve real layout space so the final card/action can always stop above the dock. */
body[data-principio-role="customer-asporto"] .customerShell,
body[data-principio-role="customer-delivery"] .customerShell{
  padding-bottom:calc(var(--px-customer-nav-reserve) + env(safe-area-inset-bottom, 0px)) !important;
}

/* Legacy customer shell variants kept for backwards-compatible routes. */
body[data-principio-role="customer-asporto"] main,
body[data-principio-role="customer-delivery"] main{
  scroll-padding-bottom:calc(var(--px-customer-nav-reserve) + env(safe-area-inset-bottom, 0px));
}

/* Fixed dock: fully opaque so cards/text never remain visible through it. */
body[data-principio-role="customer-asporto"] .compactBottomNav,
body[data-principio-role="customer-delivery"] .compactBottomNav,
body[data-principio-role="customer-asporto"] .bottomNav,
body[data-principio-role="customer-delivery"] .bottomNav{
  position:fixed !important;
  left:50% !important;
  bottom:max(8px, env(safe-area-inset-bottom, 0px)) !important;
  transform:translateX(-50%) !important;
  z-index:120 !important;
  background:var(--px-customer-nav-bg) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  isolation:isolate;
}

/* Opaque footer shield hides content in the side gaps around the floating dock.
   :has() means it only exists while the navigation is actually rendered (not checkout). */
@supports selector(body:has(.compactBottomNav)){
  body[data-principio-role="customer-asporto"]:has(.compactBottomNav)::after,
  body[data-principio-role="customer-delivery"]:has(.compactBottomNav)::after,
  body[data-principio-role="customer-asporto"]:has(.bottomNav)::after,
  body[data-principio-role="customer-delivery"]:has(.bottomNav)::after{
    content:"";
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:calc(var(--px-customer-nav-shield) + env(safe-area-inset-bottom, 0px));
    z-index:110;
    pointer-events:none;
    background:linear-gradient(to bottom,rgba(246,243,237,0),var(--px-customer-page-bg) 26%,var(--px-customer-page-bg) 100%);
  }
}

/* Sheets, cart, account and toasts must always open above the dock/shield. */
body[data-principio-role="customer-asporto"] .modal,
body[data-principio-role="customer-asporto"] .cartDrawer,
body[data-principio-role="customer-asporto"] .accountOverlay,
body[data-principio-role="customer-asporto"] .toast,
body[data-principio-role="customer-delivery"] .modal,
body[data-principio-role="customer-delivery"] .cartDrawer,
body[data-principio-role="customer-delivery"] .accountOverlay,
body[data-principio-role="customer-delivery"] .toast{
  z-index:200 !important;
}

/* On very short phones keep enough breathing room without wasting vertical space. */
@media (max-height:680px){
  :root{
    --px-customer-nav-reserve:104px;
    --px-customer-nav-shield:88px;
  }
}