/* mobile-app.css */

/* Hide scrollbars but allow scrolling */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Prevent text selection on navigation elements for an app feel */
.nav-item {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Safe area handling for iOS */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav {
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}

/* Standalone mode specific tweaks */
@media (display-mode: standalone) {
  body {
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* Prevent elastic scrolling on the body */
  html, body {
    overflow: hidden;
    height: 100%;
    position: fixed;
    width: 100%;
  }

  /* Make sure our main scrollable area works */
  #root > div {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Smooth transitions for bottom nav items */
.nav-item-active {
  transform: translateY(-4px);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-item-active .icon-container {
  background-color: rgba(212, 175, 55, 0.1);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}