/* The region suggestion bar. Pinned to the bottom so it never covers the hero or
   the nav, and never moves the page: a banner that pushes content down on load
   is a layout shift Google measures and visitors notice. */
.geo-bar {
  position: fixed;
  bottom: 18px;
  /* Anchored on both edges rather than centred with translateX(-50%) and a
     width. The earlier version reserved space with calc(100vw - 200px), but
     100vw includes the scrollbar while the visible viewport does not, and the
     reserve was split across both sides, so the right-hand clearance came out
     smaller than intended and the bar's edge met the chat launcher. Anchoring
     left and right states the clearance directly: 108px on the right is the
     launcher (56px wide, 20px from the edge) plus a gap it cannot eat into.
     max-width with margin-inline: auto then centres the bar inside what is
     left, which on a wide screen is indistinguishable from centring the page. */
  /* The site does not set border-box globally, so without this the padding and
     border are added to max-width and the bar comes out 36px wider than the
     number says. */
  box-sizing: border-box;
  left: 24px;
  right: 108px;
  margin-inline: auto;
  max-width: 680px;
  /* Meant to sit below the mobile drawer, though the rule that actually keeps
     them apart is the :has() one at the foot of this file: the drawer renders
     into the app root, which is its own stacking context, so these two
     z-indexes are never compared. 50 keeps the bar above ordinary content. */
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px 13px 20px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(16, 38, 43, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 44px rgba(8, 22, 26, .38);
  font-family: var(--font-body, system-ui, sans-serif);
  animation: geoBarIn .45s cubic-bezier(.22, .6, .2, 1) both;
}

@keyframes geoBarIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .geo-bar { animation: none; } }

.geo-bar-text {
  margin: 0;
  /* flex: 1 1 auto with min-width: 0 once let the message collapse to ~100px
     across five lines, back when the bar was free to size itself. The bar now
     has a stated footprint, so the text takes what is left of it. */
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .84);
  text-wrap: pretty;
}

.geo-bar-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  background: #E9F16D;
  color: #151515;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.geo-bar-cta:hover { filter: brightness(.95); color: #151515; }

.geo-bar-close {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .6);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.geo-bar-close:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.geo-bar-cta:focus-visible,
.geo-bar-close:focus-visible { outline: 2px solid #E9F16D; outline-offset: 2px; }

/* On a phone the pill becomes a stacked card, and the dismiss control keeps a
   44px target rather than shrinking with the bar. */
@media (max-width: 640px) {
  .geo-bar {
    left: 16px;
    right: 16px;
    /* Full width here, so it cannot be narrowed away from the chat launcher.
       It goes above it instead; the launcher is ~56px tall with a 16px margin. */
    bottom: 88px;
    max-width: none;
    flex-wrap: wrap;
    padding: 16px;
    border-radius: 18px;
  }
  .geo-bar-text { flex: 1 1 100%; font-size: 14px; }
  .geo-bar-cta  { flex: 1 1 auto; justify-content: center; height: 42px; }
  .geo-bar-close { width: 44px; height: 42px; }
}

/* The mobile drawer renders into the app root, which is its own stacking
   context, so the drawer's z-index and the bar's are never compared: the bar
   kept painting on top of an open full-screen menu whatever number it carried.
   Rather than fight the stacking, hide the bar while the drawer is open. The
   drawer only exists in the DOM while open, so that is the whole condition.
   Without :has() the bar simply stays visible, which is the behaviour before
   this rule rather than a broken page. */
body:has(#mobile-menu) .geo-bar { display: none; }