/* WHOOPS Bounty Hunter — navigation (desktop top nav, mobile header, mobile bottom nav) */

/* ---- top nav (desktop, >=768px) ---- */
.topnav{position:fixed;top:0;left:0;right:0;height:var(--nav-h-top);z-index:40;
  background:linear-gradient(180deg, rgba(14,14,14,.96), rgba(9,9,9,.94));backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-line-soft);box-shadow:0 4px 20px rgba(0,0,0,.35);
  display:none;align-items:center;}
@media (min-width:768px){ .topnav{display:flex;} }
.topnav-in{width:100%;max-width:var(--max-w-desktop);margin:0 auto;padding:0 var(--sp-7);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);}
.brand{display:flex;align-items:center;gap:11px;}
.brand-badge{height:44px;width:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--color-yellow), 0 0 16px rgba(255,193,7,.45);}
.brand-name{font-family:var(--font-display);letter-spacing:1.5px;font-size:1.05rem;color:var(--color-text);}
.brand-name b{color:var(--color-yellow);}

.topnav-links{display:flex;align-items:center;gap:var(--sp-7);}
.topnav-links a{font-family:var(--font-display);letter-spacing:1px;font-size:.9rem;color:var(--color-text-dim);
  display:flex;align-items:center;gap:6px;position:relative;padding:8px 2px;transition:color var(--dur-fast);text-transform:uppercase;}
.topnav-links a:hover{color:var(--color-text);}
.topnav-links a.active{color:var(--color-yellow);text-shadow:0 0 12px rgba(255,193,7,.6);}
.topnav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:2px;
  background:var(--grad-gold);box-shadow:0 0 10px rgba(255,193,7,.7);}

.topnav-actions{display:flex;align-items:center;gap:var(--sp-3);}
.lang-toggle{background:var(--color-panel-2);border:1px solid var(--color-line);color:var(--color-text);
  font-family:var(--font-display);letter-spacing:1px;font-size:.75rem;padding:9px 13px;border-radius:var(--r-pill);cursor:pointer;
  transition:border-color var(--dur-fast);}
.lang-toggle:hover{border-color:var(--color-yellow);}

.pill-link{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1.5px solid var(--color-line);
  color:var(--color-text-dim);font-family:var(--font-display);letter-spacing:.5px;font-size:.82rem;
  padding:8px 14px;border-radius:var(--r-pill);transition:border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);}
.pill-link .pill-ic{font-size:1rem;line-height:1;}
.pill-link:hover{border-color:var(--color-yellow);color:var(--color-text);}
.pill-link.active{border-color:var(--color-yellow);color:var(--color-yellow-bright);background:rgba(255,193,7,.08);box-shadow:0 0 14px rgba(255,193,7,.2);}
.pill-acct.is-auth{border-color:var(--color-yellow);background:rgba(255,193,7,.08);}

/* Fixed widths so the top bar does not reflow when the language changes:
   "Inloggen"/"Log in" and "Bestel op Uber Eats"/"Order on Uber Eats" are
   different lengths, which shifted every element beside them on toggle.
   Sized for the longer (Dutch) string so neither language is clipped. */
.pill-acct{width:132px;justify-content:center;}
.topnav-actions #orderCta{width:196px;}
.lang-toggle{width:48px;text-align:center;}

/* ---- mobile header (<768px) ---- */
.mobile-header{position:fixed;top:0;left:0;right:0;height:var(--nav-h-mobile-header);z-index:40;
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-4);
  background:linear-gradient(180deg, rgba(14,14,14,.97), rgba(9,9,9,.95));backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-line-soft);box-shadow:0 4px 16px rgba(0,0,0,.4);}
@media (min-width:768px){ .mobile-header{display:none;} }
.mh-brand img{height:34px;width:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--color-yellow), 0 0 12px rgba(255,193,7,.4);}
.mh-actions{display:flex;align-items:center;gap:8px;}
.mh-icon{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.05);border:1px solid var(--color-line);color:var(--color-text);font-size:1.05rem;cursor:pointer;}
.mh-icon.mh-lang{font-family:var(--font-display);font-size:.68rem;letter-spacing:.5px;width:auto;padding:0 10px;}
.mh-icon.active{border-color:var(--color-yellow);background:rgba(255,193,7,.1);box-shadow:0 0 10px rgba(255,193,7,.3);}
.mh-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill);
  background:var(--color-red);color:#fff;font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 8px rgba(232,35,26,.6);}

/* ---- bottom nav (mobile, <768px) ---- */
.bottomnav{position:fixed;bottom:0;left:0;right:0;height:calc(var(--nav-h-bottom) + env(safe-area-inset-bottom));z-index:40;
  background:linear-gradient(0deg, rgba(6,6,6,.98), rgba(11,11,11,.94));border-top:1px solid var(--color-line-soft);
  box-shadow:0 -6px 20px rgba(0,0,0,.4);
  display:flex;align-items:stretch;padding-bottom:env(safe-area-inset-bottom);}
@media (min-width:768px){ .bottomnav{display:none;} }
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  position:relative;color:var(--color-text-mute);transition:color var(--dur-fast);}
.bn-item.active{color:var(--color-yellow);}
.bn-ic{font-size:1.3rem;line-height:1;position:relative;transition:transform var(--dur-fast) var(--ease-pop);}
.bn-item.active .bn-ic{transform:translateY(-2px);filter:drop-shadow(0 0 8px rgba(255,193,7,.7));}
.bn-label{font-family:var(--font-body);font-size:.62rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;}
.bn-item.active::before{content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);width:30px;height:30px;
  border-radius:50%;background:radial-gradient(circle, rgba(255,193,7,.22), transparent 70%);z-index:-1;}
.bn-badge{position:absolute;top:1px;right:calc(50% - 22px);min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill);
  background:var(--color-red);color:#fff;font-size:.62rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 8px rgba(232,35,26,.6);}