/* 
   GREYCREATURE — HEADER MOBILE FIXES ONLY
   These fixes are confirmed working — do not modify
*/

@media (max-width: 991px) {

  .main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 999;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* push content below top header AND above bottom nav */
  body {
    padding-top: 65px;
    padding-bottom: 70px;
  }

  #sidebarMenu {
    top: 65px;
  }

  .logo-link img {
    height: 50px;
  }

  /* bottom nav always on top of everything */
  .mobile-header {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    width: 100% !important;
    height: 70px !important;
    background: #08111b !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5) !important;
    display: flex !important;
    align-items: center !important;
  }

  /* nav list full width flex row */
  .mobile-header ul.mobile-col {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* each nav item */
  .mobile-header ul.mobile-col li.icon {
    flex: 1 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
  }

  /* nav links */
  .mobile-header ul.mobile-col li.icon a {
    color: #fff !important;
    font-size: 10px !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* nav icons */
  .mobile-header ul.mobile-col li.icon a i,
  .mobile-header ul.mobile-col li.icon a span {
    font-size: 20px !important;
    display: block !important;
  }

  /* clear bottom nav for floating buttons */
  .whatsapp-icon {
    bottom: 85px !important;
    z-index: 99998 !important;
  }

  .progress-wrap1 {
    bottom: 85px !important;
    z-index: 99998 !important;
  }

  .progress-wrap2 {
    bottom: 135px !important;
    z-index: 99998 !important;
  }

  /* popup also clears bottom nav */
  #myPopup {
    bottom: 160px !important;
  }
}