/* AdNeed — shared bottom app tab bar (5 tabs: Home, Catalog, Wallet,
   Library, Settings). One component, included on every tab-root page
   (and their direct sub-pages) so the app always feels like one shell
   with 5 destinations, not five separate mini-sites.
   Rendered by /js/tabbar.js — this file is just the look. */

.app-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(15, 27, 46, .06);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.app-tabbar-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px 6px;
  text-decoration: none;
  color: var(--text-muted);
  font-family:'AdNeedRupee','Manrope', sans-serif;
  font-size: 11px;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}

.app-tabbar-item svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-tabbar-item.is-active {
  color: var(--orange-500);
}

.app-tabbar-item.is-active svg {
  fill: rgba(232, 73, 29, .12);
}

/* Pages with the tab bar need bottom padding so their last section
   never sits underneath it — applied to <body> by tabbar.js. */
body.has-tabbar {
  padding-bottom: 64px;
}
body.has-tabbar .dash-container {
  padding-bottom: 24px;
}

/* Signed-out / loading / not-configured cards on tab-bar pages. They sit
   between the sticky top bar (~61px) and the bottom tab bar (64px, already
   added as body padding), so the wrapper fills exactly that band and
   centers the card inside it — no more hanging under the header. */
.auth-wrap--app {
  min-height: calc(100vh - 125px);
  min-height: calc(100dvh - 125px - env(safe-area-inset-bottom, 0px));
  padding: 16px;
}