/* ===========================================================
   LOOKOUTJPG — Mobile app-style floating bottom navigation
   Compact, icon-only dock (Instagram-proportioned), dark
   reflective glass "lens" pill. Mobile only.
   =========================================================== */

.mobile-app-nav{
  position: fixed;
  left: 20px; right: 20px; bottom: 18px;
  z-index: 490; /* below wizard/modals/lightbox (800+), above page content */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding: 0 18px;
  border-radius: var(--radius-pill);

  background:
    linear-gradient(135deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,.25) 100%),
    rgba(10,11,13,.72);
  border: 1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 10px 30px rgba(0,0,0,.55);
}
@media (min-width: 980px){
  .mobile-app-nav{ display: none; }
}
@media (max-width: 979px){
  body{ padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}

.app-nav-item, .app-nav-cta{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0;
  color: rgba(255,255,255,.55);
  border: none;
  background: none;
}
.app-nav-item svg{ width: 22px; height: 22px; }
.app-nav-item.is-active{ color: var(--white); }

/* No labels anymore — hide if any markup still contains them,
   so this stylesheet works even before HTML is fully updated. */
.app-nav-label{ display: none; }

/* Booking: thin circular outline around the + — same visual
   scale as the other icons, no enlarged button. */
.app-nav-cta-icon{
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.4px solid rgba(255,255,255,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, background .2s;
}
.app-nav-cta-icon svg{ width: 11px; height: 11px; }
.app-nav-cta:active .app-nav-cta-icon{ background: rgba(255,255,255,.12); }

/* Hide the app nav bar entirely while the booking wizard is open,
   so it never overlaps wizard content or its own sticky footer. */
body:has(.wizard-overlay.is-open) .mobile-app-nav{
  display: none;
}