/*
 BUN FRY APP MODE
 Only active when app-mode.js adds .bf-app-mode.
 Website appearance remains unchanged.
*/

@media (max-width:768px){

  html.bf-app-mode body{
    padding-bottom:
      calc(82px + env(safe-area-inset-bottom)) !important;
  }

  /* 5-button native-style app navigation */

  html.bf-app-mode .bf-app-bottom{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;

    position:fixed !important;

    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;

    min-height:67px !important;

    padding:
      4px 2px
      env(safe-area-inset-bottom) !important;

    background:rgba(14,14,14,.98) !important;

    border-top:
      1px solid rgba(255,255,255,.09) !important;

    border-radius:0 !important;

    z-index:10000 !important;

    box-shadow:
      0 -8px 30px rgba(0,0,0,.38) !important;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  html.bf-app-mode .bf-app-bottom a{
    min-width:0 !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    gap:5px !important;

    padding:7px 1px !important;

    color:#8d8d8d !important;

    text-decoration:none !important;

    font-size:9.5px !important;
    font-weight:700 !important;

    overflow:hidden;
  }

  html.bf-app-mode .bf-app-bottom a i{
    font-size:18px !important;
  }

  html.bf-app-mode .bf-app-bottom a span{
    width:100%;

    overflow:hidden;

    text-align:center;

    white-space:nowrap;
    text-overflow:ellipsis;
  }

  html.bf-app-mode .bf-app-bottom a.is-active{
    color:#f7a711 !important;
  }

  /*
   Keep the real BUN FRY website header/design.
   Only optimize safe areas when running as app.
  */

  html.bf-app-mode .navbar,
  html.bf-app-mode .customer-nav{
    padding-top:
      env(safe-area-inset-top) !important;
  }

}

@media (display-mode:standalone){

  body{
    overscroll-behavior-y:none;
  }

}