/* Bottom Navigation Fixes */

/* Force bottom nav to be visible at all times on mobile */
#bottom-nav,
footer#bottom-nav {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background-color: rgba(18, 18, 18, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top-left-radius: 1.5rem !important;
  border-top-right-radius: 1.5rem !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateZ(0) !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3) !important;
  will-change: auto !important;
}

/* Remove any display: none that may have been applied */
#bottom-nav.hidden {
  display: flex !important;
}

/* Ensure only the bottom navigation footer doesn't inherit conflicting styles */
footer#bottom-nav {
  all: unset;
}

/* Ensure navigation links are clickable and visible */
#bottom-nav nav,
footer#bottom-nav nav {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  height: 6rem !important;
  padding: 0 0.5rem !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  width: 100% !important;
  background: transparent !important;
  margin: 0 !important;
}

/* Style bottom nav links - always visible and clickable */
#bottom-nav a,
footer#bottom-nav a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
  padding: 0.5rem !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 50 !important;
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
}

#bottom-nav a:hover,
footer#bottom-nav a:hover {
  color: rgb(var(--primary-rgb)) !important;
}

#bottom-nav a span,
#bottom-nav a p,
footer#bottom-nav a span,
footer#bottom-nav a p {
  pointer-events: none !important;
  display: block !important;
}

#bottom-nav a span {
  margin: 0 !important;
  padding: 0 !important;
}

#bottom-nav a p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Safe area adjustment */
#bottom-nav .h-safe-area-bottom,
footer#bottom-nav .h-safe-area-bottom {
  height: env(safe-area-inset-bottom) !important;
  width: 100% !important;
  background-color: rgba(18, 18, 18, 0.95) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Hide bottom nav on desktop (1024px and up) */
@media (min-width: 1024px) {
  #bottom-nav,
  footer#bottom-nav {
    display: none !important;
  }
}

/* Ensure page content doesn't hide under bottom nav on mobile */
@media (max-width: 1023px) {
  /* Add padding to ALL main containers - universal coverage */
  #app-main {
    padding-bottom: 7rem !important;
    min-height: 100vh !important;
  }
  
  /* Apply padding to ALL main elements */
  main {
    padding-bottom: 7rem !important;
  }
  
  .main-content,
  .page-content {
    padding-bottom: 7rem !important;
  }
  
  /* Prevent body from having conflicting rules */
  body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Ensure content doesn't overflow and hide bottom nav */
  html, body {
    overflow-x: hidden !important;
  }
  
  /* Add padding to flexbox containers that are main content areas */
  body > .flex:last-child,
  main.flex-grow,
  main.flex-1 {
    padding-bottom: 7rem !important;
  }
}

/* Smooth transitions for bottom nav */
#bottom-nav,
#bottom-nav nav,
#bottom-nav a {
  transition: all 0.2s ease;
}

/* Override any visibility issues from other CSS */
#bottom-nav:not(.hidden),
#bottom-nav.hidden {
  display: flex !important;
  visibility: visible !important;
}

/* Ensure bottom nav appears above modals and overlays on mobile */
@media (max-width: 1023px) {
  #bottom-nav,
  footer#bottom-nav {
    z-index: 30 !important;
  }
  
  #side-menu,
  #side-menu-login {
    /* Make sure the side menu and guest menu overlay the bottom nav when opened */
    z-index: 50 !important;
  }
  
  /* If there are any other fixed elements, keep them below side menu */
  .modal, .overlay, .popup {
    z-index: 45 !important;
  }
}

/* Ensure navigation links are clickable and visible */
#bottom-nav nav,
footer#bottom-nav nav {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  height: 6rem !important;
  padding: 0 0.5rem !important;
  z-index: 50 !important;
  pointer-events: auto !important;
  width: 100% !important;
  background: transparent !important;
  margin: 0 !important;
}

/* Style bottom nav links - always visible and clickable */
#bottom-nav a,
footer#bottom-nav a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
  padding: 0.5rem !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 50 !important;
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
}

#bottom-nav a:hover,
footer#bottom-nav a:hover {
  color: rgb(var(--primary-rgb)) !important;
}

#bottom-nav a span,
#bottom-nav a p,
footer#bottom-nav a span,
footer#bottom-nav a p {
  pointer-events: none !important;
  display: block !important;
}

#bottom-nav a span {
  margin: 0 !important;
  padding: 0 !important;
}

#bottom-nav a p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Safe area adjustment */
#bottom-nav .h-safe-area-bottom,
footer#bottom-nav .h-safe-area-bottom {
  height: env(safe-area-inset-bottom) !important;
  width: 100% !important;
  background-color: rgba(18, 18, 18, 0.95) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Hide bottom nav on desktop (1024px and up) */
@media (min-width: 1024px) {
  #bottom-nav,
  footer#bottom-nav {
    display: none !important;
  }
}

/* Ensure page content doesn't hide under bottom nav on mobile */
@media (max-width: 1023px) {
  /* Add padding to ALL main containers */
  #app-main {
    padding-bottom: 7rem !important;
    min-height: 100vh !important;
  }
  
  main,
  .main-content,
  .page-content {
    padding-bottom: 7rem !important;
  }
  
  /* Prevent body from having conflicting rules */
  body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Ensure content doesn't overflow and hide bottom nav */
  html, body {
    overflow-x: hidden !important;
  }
}

/* Smooth transitions for bottom nav */
#bottom-nav,
#bottom-nav nav,
#bottom-nav a {
  transition: all 0.2s ease;
}

/* Override any visibility issues from other CSS */
#bottom-nav:not(.hidden),
#bottom-nav.hidden {
  display: flex !important;
  visibility: visible !important;
}

/* Ensure bottom nav appears above modals and overlays on mobile */
@media (max-width: 1023px) {
  #bottom-nav,
  footer#bottom-nav {
    z-index: 30 !important;
  }
  
  #side-menu,
  #side-menu-login {
    /* Ensure the sidebar remains above the bottom nav */
    z-index: 50 !important;
  }
  
  /* If there are any other fixed elements, keep them below side menu */
  .modal, .overlay, .popup {
    z-index: 45 !important;
  }
}