/* public/bottom-nav.css
 *
 * The bottom navigation's styling, defined once.
 *
 * Loaded globally from app/layout.tsx so every page gets it — including the
 * React pages (Feed, Conditions), which don't inject a page stylesheet the way
 * the content-script pages do. That asymmetry is why these rules previously
 * lived in three places: styles.css, market-styles.css, and inline in
 * components/BottomNav.tsx. The three drifted, and the React nav ended up a
 * different colour from the rest of the app.
 *
 * Literal values rather than var(--teal) etc. on purpose: those variables are
 * declared in the page stylesheets, which Feed and Conditions never load, so a
 * var() reference here would resolve to nothing on exactly the pages this file
 * exists to serve. The literals below are the values those variables held.
 *
 * If you change anything here, nothing else needs changing — that's the point.
 */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.98) 70%, transparent 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);   /* Safari, which is most of our traffic */
  padding: 12px 0 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 100;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Slid out of view while scrolling down. Restates the centring translateX,
   since transform is a single property and would otherwise be replaced. */
.bottom-nav.nav-hidden {
  transform: translateX(-50%) translateY(110%);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 12px;
  color: #7eb8cc;
  transition: color 0.2s;
  position: relative;
}

.nav-item.active { color: #00d4f5; }

.nav-icon {
  font-size: 22px;
  display: flex;
  line-height: 0;   /* kill the baseline descender under the inline SVG */
}

/* 10px, deliberately below the 12px floor used elsewhere in the app: 12px is
   what clipped "PROFILE" off the edge of the screen, the icons carry the
   recognition rather than the labels, and ~10px matches native iOS tab bars. */
.nav-label {
  font-size: 10px; /* fs-ok: see the note above -- 12px clipped PROFILE off the screen, and ~10px matches native iOS tab bars */
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: var(--font-body);
}

/* The round post button that replaces Discover in the reels-view nav. */
.nav-post-btn {
  background: linear-gradient(135deg, #00b4d8, #0077b6);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-top: -8px;
  box-shadow: 0 4px 20px rgba(0, 180, 216, 0.4);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.nav-post-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(0, 180, 216, 0.6);
}