/* ============================================================
   tabbar.css — bottom tab bar (mobile, app-like navigation)
   Shows < 700px on browse/content pages. Hidden on desktop and
   on pages that have their own bottom bar (PDP/cart/checkout)
   or are immersive (landing).
============================================================ */

.tabbar {
  display: none; /* enabled per-page via the media query below */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 995;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  background: var(--color-surface, #161616);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tabbar__item {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 8px 4px;
  background: none;
  border: none;
  color: var(--color-muted, #b1b1b1);
  font-family: var(--font-body, 'Special Elite', monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  -webkit-transition: color 0.15s ease;
  transition: color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.tabbar__item svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.tabbar__item.is-active { color: var(--color-accent, #e8c84a); }

.tabbar__badge {
  position: absolute;
  top: 5px;
  left: 50%;
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-accent, #e8c84a);
  color: var(--black, #0d0d0d);
  font-size: 12px;
  font-weight: 700;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

@media (max-width: 699.98px) {
  /* Show on browse pages incl. home; conversion pages (pdp/cart/checkout)
     keep their own action bar; account pages use the dashboard's bottom nav. */
  body:not(.page-pdp):not(.page-cart):not(.page-checkout):not(.page-account) .tabbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  /* Keep the footer's last content clear of the fixed bar */
  body:not(.page-pdp):not(.page-cart):not(.page-checkout):not(.page-account) .fleasts-footer {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Search overlay (opened by the Search tab) ── */
.search-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3500;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 16vh 16px 0;
}

.search-overlay[hidden] { display: none; }

.search-overlay__form {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  max-width: 480px;
  background: var(--color-surface, #161616);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.14));
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
}

.search-overlay__input {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  color: var(--color-text, #f3f0e7);
  font-size: 16px;
  padding: 14px 16px;
  font-family: var(--font-body, 'Special Elite', monospace);
}

.search-overlay__input:focus { outline: none; }

.search-overlay__submit,
.search-overlay__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted, #b1b1b1);
  padding: 12px 14px;
  min-height: 48px;
  -webkit-transition: color 0.15s ease;
  transition: color 0.15s ease;
}

.search-overlay__submit svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.search-overlay__close { font-size: 22px; line-height: 1; }
.search-overlay__submit:hover,
.search-overlay__close:hover { color: var(--color-accent, #e8c84a); }