.topbar-right{display:flex;align-items:center;gap:12px;}
.auth-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}

/* Default (light topbar) */
.auth-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.2px;color:rgba(17,24,39,.88);border:1px solid rgba(17,24,39,.14);background:rgba(17,24,39,.04);white-space:nowrap;}
.auth-btn:hover{text-decoration:none;filter:brightness(1.02);}
.auth-btn.ghost{background:rgba(17,24,39,.03);}
.auth-btn.primary{border:0;color:#161616;background:linear-gradient(135deg,#caa355 0%,#8a6a2c 100%);box-shadow:0 10px 22px rgba(0,0,0,.16);}

/* Hero overlay topbar (dark over hero) keeps white buttons */
.topbar--overlay .auth-btn{color:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);}
.topbar--overlay .auth-btn.ghost{background:rgba(255,255,255,.06);}
.topbar--overlay .auth-btn.primary{color:#fff;box-shadow:0 10px 22px rgba(0,0,0,.25);}

@media(max-width:560px){.topbar-right{gap:10px}.auth-btn{padding:8px 10px;font-size:12px}}

/* ===== Topbar layout tune (more space, less cramped) ===== */
.topbar .container.inner{
  /* wider container = logo slightly more left and more room for nav */
  width: min(1280px, 96vw);
}

.topbar .inner{
  gap: 10px;
}

/* Keep brand compact and stable */
.topbar .brand{
  white-space: nowrap;
  margin-right: 8px;
}

/* Nav: keep in one line, allow horizontal scroll instead of wrapping */
.topbar .menu{
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 10px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.topbar .menu::-webkit-scrollbar{ height: 0; }

.topbar .menu a{
  display:inline-flex;
  align-items:center;
  padding: 6px 9px;
  border-radius: 999px;
  text-decoration: none;
  opacity: .92;
}

.topbar .menu a:hover{
  opacity: 1;
  text-decoration: none;
  background: rgba(17,24,39,.06);
}

.topbar--overlay .menu a:hover{
  background: rgba(255,255,255,.10);
}

/* Language switch container (if present) */
.lang-actions{ flex-shrink: 0; }

@media (max-width: 980px){
  .topbar .menu{ gap: 8px; }
  .topbar .menu a{ padding: 6px 8px; font-size: 12px; }
}


/* ===== Mobile Hamburger Menu (Guest + Public site) ===== */
.nav-toggle{
  display:none;
  width:44px;height:40px;
  border-radius:12px;
  border:1px solid rgba(17,24,39,.14);
  background:rgba(17,24,39,.04);
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:0 10px;
}
.nav-toggle span{
  display:block;
  width:18px;height:2px;
  background:rgba(17,24,39,.85);
  border-radius:999px;
}
.topbar--overlay .nav-toggle{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
}
.topbar--overlay .nav-toggle span{ background:rgba(255,255,255,.92); }

.nav-wrap{ display:flex; align-items:center; gap:12px; }

.nav-backdrop{
  display:none;
}

@media (max-width: 860px){
  .nav-toggle{ display:inline-flex; }
  .topbar-right{ justify-content:flex-end; }

  /* Drawer */
  .nav-wrap{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(92vw, 360px);
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding:18px 16px 20px;
    box-shadow:-24px 0 60px rgba(0,0,0,.22);
    transform:translateX(110%);
    transition:transform .22s ease;
    z-index:9999;
    overflow:auto;
  }
  .nav-wrap.is-open{ transform:translateX(0); }

  .nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.44);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    z-index:9998;
  }
  .nav-backdrop.is-open{
    opacity:1;
    pointer-events:auto;
  }

  body.nav-open{ overflow:hidden; }

  .topbar .menu{
    overflow:visible;
    white-space:normal;
    flex-wrap:wrap;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .topbar .menu a{
    width:100%;
    justify-content:flex-start;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(17,24,39,.10);
    background:rgba(17,24,39,.03);
  }

  .lang-actions{
    margin:0 !important;
    padding-top:6px;
    border-top:1px solid rgba(17,24,39,.10);
    justify-content:flex-start;
  }
  .auth-actions{
    width:100%;
    padding-top:8px;
    border-top:1px solid rgba(17,24,39,.10);
  }
  .auth-actions .auth-btn{ width:100%; }
}