/* =====================================================================
   Hussx Brokers — Shared Navigation Styles
   Self-contained styles for the floating top nav + mobile tab bar that
   nav.js injects on every page. Include once in <head>:
     <link rel="stylesheet" href="nav.css">
   Relies on the design-token custom properties already defined on each
   page's :root (--black, --white, --gray-*, --line*, --panel-2,
   --error, --gold, --radius, --safe-t, --safe-b) — every page in this
   site already defines those. Nav-specific sizing tokens are defined
   below so this file works even on a page that hasn't defined them.
===================================================================== */

:root{
  --nav-h: 56px;
  --nav-gap: 12px;
  --tabbar-h: 62px;
}

@keyframes navFadeInDown{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes navFadeInUpCenter{ from{ opacity:0; transform:translateX(-50%) translateY(14px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes navPop{ from{ opacity:0; transform:translateY(-6px) scale(.92); } to{ opacity:1; transform:none; } }

/* ================= TOP NAV (floating app bar) ================= */
.topnav{
  position:fixed; top:calc(var(--safe-t) + var(--nav-gap)); left:0; right:0; z-index:60;
  display:flex; justify-content:center;
  pointer-events:none;
  animation:navFadeInDown .5s cubic-bezier(.22,.9,.3,1) both;
}
.topnav-inner{
  pointer-events:auto;
  position:relative;
  display:flex; align-items:center; gap:10px;
  width:calc(100% - 24px); max-width:640px;
  height:var(--nav-h);
  padding:0 8px 0 16px;
  background:rgba(24,24,24,0.55);
  -webkit-backdrop-filter:saturate(200%) blur(22px);
  backdrop-filter:saturate(200%) blur(22px);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:999px;
  box-shadow:0 12px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(255,255,255,0.03);
  overflow:hidden;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.topnav-inner::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 22%, rgba(255,255,255,0) 45%);
}
.topnav-inner > *{ position:relative; z-index:1; }
.topnav-inner.is-scrolled{
  background:rgba(14,14,14,0.78);
  box-shadow:0 14px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.1);
}
.brand{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.brand img{ width:24px; height:24px; object-fit:contain; }
.brand .name{ font-size:11.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; }
.navlinks{ display:none; }
.nav-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; margin-left:auto; }
.icon-btn{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid var(--line); color:var(--gray-1); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease; flex-shrink:0; }
.icon-btn:hover{ border-color:var(--gray-2); color:var(--white); background:rgba(255,255,255,0.1); }
.icon-btn:active{ transform:scale(.94); }
.icon-btn .icon{ width:16px; height:16px; }
.menu-toggle{ display:flex; }

/* ================= NAV SEARCH (real search field, not just an icon) ================= */
.nav-search-panel{
  position:fixed; top:calc(var(--safe-t) + var(--nav-gap) + var(--nav-h) + 10px);
  left:12px; right:12px; margin:0 auto; max-width:616px;
  display:flex; align-items:center; gap:6px;
  background:rgba(20,20,20,0.92);
  -webkit-backdrop-filter:saturate(200%) blur(24px);
  backdrop-filter:saturate(200%) blur(24px);
  border:1px solid rgba(255,255,255,0.1); border-radius:999px;
  padding:6px 6px 6px 16px; z-index:70;
  box-shadow:0 20px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  opacity:0; transform:translateY(-10px) scale(.97); pointer-events:none;
  transition:opacity .18s ease, transform .18s cubic-bezier(.22,.9,.3,1);
}
.nav-search-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.nav-search-panel .ns-icon{ width:16px; height:16px; color:var(--gray-2); flex-shrink:0; }
.nav-search-panel input{
  flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--white);
  font-family:inherit; font-size:13.5px;
}
.nav-search-panel input::placeholder{ color:var(--gray-3); }
.nav-search-submit{
  width:32px; height:32px; border-radius:50%; background:var(--white); color:var(--black); border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  transition:opacity .15s ease, transform .12s ease;
}
.nav-search-submit svg{ width:14px; height:14px; }
.nav-search-submit:hover{ opacity:.85; }
.nav-search-submit:active{ transform:scale(.92); }
.nav-search-close{
  width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid var(--line);
  color:var(--gray-1); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.nav-search-close svg{ width:13px; height:13px; }
.nav-search-close:hover{ border-color:var(--gray-2); color:var(--white); }

.btn-broker{ display:none; }
.btn-find{
  display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--black);
  background:var(--gold); border:none; padding:9px 15px; border-radius:999px; cursor:pointer; white-space:nowrap;
  flex-shrink:0; transition:opacity .15s ease, transform .12s ease;
}
.btn-find svg{ width:14px; height:14px; }
.btn-find:hover{ opacity:.85; }
.btn-find:active{ transform:scale(.96); }
.btn-signin{
  font-size:12px; font-weight:700; color:var(--black); background:var(--white);
  border:none; padding:9px 15px; border-radius:999px; cursor:pointer; white-space:nowrap;
  flex-shrink:0; transition:opacity .15s ease;
}
.btn-signin:hover{ opacity:.85; }
.btn-signin:active{ transform:scale(.96); }
.btn-upload{
  display:none; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--white);
  background:rgba(255,255,255,0.08); border:1px solid var(--line); padding:9px 15px; border-radius:999px; cursor:pointer; white-space:nowrap;
  flex-shrink:0; transition:opacity .15s ease, transform .12s ease, border-color .15s ease, background .15s ease;
}
.btn-upload svg{ width:14px; height:14px; }
.btn-upload:hover{ border-color:var(--gray-2); background:rgba(255,255,255,0.14); }
.btn-upload:active{ transform:scale(.96); }

.avatar-wrap{ position:relative; flex-shrink:0; }
.avatar-btn{ width:36px; height:36px; border-radius:50%; background:var(--white); color:var(--black); border:none; font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.avatar-menu{
  position:absolute; top:calc(100% + 14px); right:0; width:220px;
  background:rgba(24,24,24,0.85); -webkit-backdrop-filter:saturate(200%) blur(24px); backdrop-filter:saturate(200%) blur(24px);
  border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius, 14px);
  padding:8px; display:none; flex-direction:column; gap:2px;
  box-shadow:0 20px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  transform-origin:top right;
}
.avatar-menu.open{ display:flex; animation:navPop .22s cubic-bezier(.34,1.56,.64,1); }
.avatar-menu .who{ padding:10px 12px 12px; border-bottom:1px solid var(--line-soft); margin-bottom:6px; }
.avatar-menu .who .n{ font-size:13px; font-weight:700; }
.avatar-menu .who .e{ font-size:11.5px; color:var(--gray-2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar-menu button, .avatar-menu a{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:none; color:var(--white); font-size:13px; font-weight:500;
  padding:10px 12px; border-radius:10px; cursor:pointer; transition:background .15s ease;
}
.avatar-menu button:hover, .avatar-menu a:hover{ background:var(--panel-2); }
.avatar-menu svg{ width:16px; height:16px; color:var(--gray-2); }
.avatar-menu .signout{ color:var(--error); }
.avatar-menu .signout svg{ color:var(--error); }

/* ================= BOTTOM TAB BAR (always-on mobile chrome) ================= */
.tabbar{
  display:flex;
  position:fixed; left:50%; bottom:calc(var(--nav-gap) + var(--safe-b)); z-index:50;
  transform:translateX(-50%);
  width:calc(100% - 24px); max-width:420px;
  height:var(--tabbar-h);
  background:rgba(24,24,24,0.55);
  -webkit-backdrop-filter:saturate(200%) blur(22px);
  backdrop-filter:saturate(200%) blur(22px);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:28px;
  box-shadow:0 12px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(255,255,255,0.03);
  align-items:stretch; justify-content:space-around;
  overflow:hidden;
  animation:navFadeInUpCenter .5s cubic-bezier(.22,.9,.3,1) both .05s;
}
.tabbar::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(160deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 22%, rgba(255,255,255,0) 45%);
}
.tab-item{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:none; border:none; color:var(--gray-2); cursor:pointer; transition:color .18s ease, transform .12s ease; }
.tab-item svg{ width:21px; height:21px; transition:transform .18s cubic-bezier(.34,1.56,.64,1); }
.tab-item span{ font-size:9.5px; font-weight:600; }
.tab-item.active{ color:var(--white); }
.tab-item.active svg{ fill:var(--white); stroke:var(--white); transform:translateY(-1px) scale(1.08); }
.tab-item:active{ transform:scale(.92); }

@media (max-width: 560px){
  .btn-find span{ display:none; }
  .btn-find{ padding:9px; }
  .btn-upload span{ display:none; }
  .btn-upload{ padding:9px; }
}
@media (max-width: 400px){
  .topnav-inner{ padding:0 6px 0 10px; gap:6px; }
  .brand .name{ display:none; }
  .nav-actions{ gap:4px; }
}

@media (prefers-reduced-motion: reduce){
  .topnav, .tabbar, .avatar-menu.open{ animation-duration:0.001ms !important; }
  .nav-search-panel{ transition-duration:0.001ms !important; }
}