/*
  Hostbility public topbar
  - Extracted from the homepage hero stylesheet so it can be reused across ALL public (non-auth) pages.
  - Keep selectors identical to the homepage: .hb-bh-topbar*
  - This file intentionally contains ONLY topbar styles (no hero styles) to avoid layout collisions.
*/

:root{
  /* Primary brand color (fallback to the Hostbility accent). */
  --hb-topbar-primary: var(--h-primary, #072673);
}

/* Homepage topbar (match hostbility.com strip) */
.hb-bh-topbar{
  background:#ffffff;
  color:#111827;
  border-bottom:1px solid rgba(17,24,39,.08);
  font-family:var(--h-font-family,'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
}
.hb-bh-topbar__inner{
  max-width:1440px;
  margin:0 auto;
  padding:10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.hb-bh-topbar__left,
.hb-bh-topbar__right{
  display:flex;
  align-items:center;
  gap:22px;
  flex:0 0 auto;
  min-width:0;
}
.hb-bh-topbar__item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#111827;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:20px;
  padding:6px 0;
  white-space:nowrap;
}
.hb-bh-topbar__item i{
  font-size:18px;
  color:#111827;
  opacity:.9;
}
.hb-bh-topbar__item:hover,
.hb-bh-topbar__item:focus{
  color:var(--hb-topbar-primary);
  text-decoration:none;
}
.hb-bh-topbar__item:hover i,
.hb-bh-topbar__item:focus i{
  color:var(--hb-topbar-primary);
  opacity:1;
}
.hb-bh-topbar__item--help{
  color:var(--hb-topbar-primary);
  font-weight:700;
}
.hb-bh-topbar__item--help i{color:var(--hb-topbar-primary)}
.hb-bh-topbar__item--currency{
  border:0;
  background:transparent;
  cursor:pointer;
}
.hb-bh-topbar__currency{
  font-weight:700;
}
.hb-bh-currency{
  position:relative;
}
.hb-bh-currency__trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
.hb-bh-currency__trigger::after{
  margin-left:2px;
}
.hb-bh-currency__label{
  font-weight:800;
}
.hb-bh-currency__active{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  min-height:24px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(7,38,115,.08);
  color:var(--hb-topbar-primary);
  font-size:11px;
  font-weight:900;
  letter-spacing:.03em;
}
.hb-bh-currency__menu{
  min-width:172px;
  padding:8px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 42px rgba(15,23,42,.14);
}
.hb-bh-currency__item{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:9px 10px;
  border-radius:10px;
  color:#111827;
  font-size:13px;
  font-weight:800;
}
.hb-bh-currency__item:hover,
.hb-bh-currency__item:focus,
.hb-bh-currency__item.is-active{
  background:rgba(7,38,115,.08);
  color:var(--hb-topbar-primary);
}
.hb-bh-currency__flag{
  font-size:18px;
  line-height:1;
}
.hb-bh-currency__code{
  letter-spacing:.04em;
}

/* Dropdown menu styling for "Need help?" (Bootstrap dropdown) */
.hb-bh-topbar__menu{
  border:1px solid rgba(17,24,39,.10);
  border-radius:12px;
  box-shadow:0 18px 44px rgba(15,23,42,.12);
  padding:8px;
  min-width:220px;
}
.hb-bh-topbar__menu .dropdown-item{
  border-radius:10px;
  font-weight:600;
  padding:10px 12px;
}
.hb-bh-topbar__menu .dropdown-item:hover{
  background:rgba(7,38,115,.06);
  color:var(--hb-topbar-primary);
}

@media (max-width: 992px){
  .hb-bh-topbar__inner{padding:10px 14px}
  .hb-bh-topbar__left,.hb-bh-topbar__right{gap:10px 14px;flex-wrap:wrap}
  .hb-bh-topbar__item{font-size:13px}
}

@media (max-width: 768px){
  .hb-bh-topbar__inner{flex-wrap:wrap;justify-content:center;row-gap:10px;text-align:center}
  .hb-bh-topbar__left,.hb-bh-topbar__right{justify-content:center}
  .hb-bh-topbar__right{margin-left:0}
  /* Reduce density on mobile: keep contact + help + currency. */
  .hb-bh-topbar__right > a.hb-bh-topbar__item{display:none}
  .hb-bh-topbar__left .hb-bh-topbar__item:nth-child(2){display:none}
  .hb-bh-topbar__item{min-height:44px;padding:10px 0}
}

@media (max-width: 520px){
  .hb-bh-topbar__left{display:none}
  .hb-bh-topbar__right{width:100%;gap:6px 10px}
  .hb-bh-topbar__right > .hb-bh-topbar__item:not(.hb-bh-topbar__item--currency):not(.hb-bh-topbar__item--help){display:none}
  .hb-bh-topbar__item{min-height:32px;font-size:11px}
  .hb-bh-currency__label{display:none}
  .hb-bh-currency__active{min-width:38px;min-height:22px;padding:3px 7px}
  .hb-bh-currency__menu{min-width:150px}
}