/* tiny geo UI bits /themes/bedrebyttede/assets/css/components/geo.css */
.bb-geo-bar { display:flex; gap:8px; align-items:center; margin-top:8px; }
.bb-geo-popover {
  position: absolute; z-index: 55; margin-top:4px;
  background: var(--surface); border: var(--border-1) solid var(--line);
  border-radius: var(--radius-2); box-shadow: var(--shadow-2); padding:8px; width: 280px;
}
.bb-geo-popover input { width:100%; }
.bb-geo-list { padding-top: 0.5rem; max-height:220px; overflow:auto; display:grid; gap:4px; }
.bb-geo-item { padding:6px 8px; border-radius: var(--radius-1); cursor:pointer; }
.bb-geo-help { cursor: pointer; color: var(--text-3); }
.bb-geo-popover{
  background: var(--surface-2);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}
.bb-geo-item:hover{ background: var(--surface-3); }


/* Theme-aware popover (inherits token.css variables) */
.bb-geo-popover {
  color-scheme: light dark;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  min-width: 240px;
  box-shadow: var(--shadow-3, 0 8px 24px rgba(0,0,0,.28));
}

.bb-geo-popover .bb-geo-input {
  background: var(--surface-3);       /* one step lighter than the popover body */
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
}
.bb-geo-popover .bb-geo-input:focus {
  background: var(--surface-1);       /* increase contrast on focus */
  outline: none;
  border-color: var(--focus, var(--accent, currentColor));
}


/* --- Find mig animations/states --- */

/* Crosshair spin */
@keyframes bb-spin { to { transform: rotate(360deg); } }
#bb-find-me.is-finding i.fa-location-crosshairs {
  display: inline-block;
  animation: bb-spin 0.9s linear infinite;
}

/* Shimmer now appears ONLY when we’re both finding AND late */
@keyframes bb-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
#bb-find-me.is-finding.is-late { position: relative; }
#bb-find-me.is-finding.is-late::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--surface-3) 45%, transparent 90%);
  background-size: 200% 100%;
  animation: bb-shimmer 1.1s linear infinite;
  opacity: .55;
}

/* Icon-only compact reveal stays the same */
#bb-find-me .t { display:inline-block; white-space:nowrap; overflow:hidden; max-width:14ch; margin-left:.5em; transition:max-width .22s ease, opacity .22s ease, margin .22s ease; }
#bb-find-me.bb-compact .t { max-width:0; margin-left:0; opacity:0; }
#bb-find-me.bb-compact:hover .t,
#bb-find-me.bb-compact:focus-visible .t,
#bb-find-me.bb-compact:active .t { max-width:14ch; margin-left:.5em; opacity:1; }

/* Removes the gap in the Find mig button after the icon*/
#bb-find-me { gap:0;}

/* Text-only one-shot sheen for #bb-town-chip */
:root{ --chip-sheen-w:3%; --chip-sheen-alpha:.6; }
#bb-town-chip.bb-chip--updated{
  position:relative; display:inline-block;
}
#bb-town-chip.bb-chip--updated::after{
  content: attr(data-text, attr(title, "")); /* falls back if you set dataset */
  position:absolute; inset:0; pointer-events:none;
  --_sheen: color-mix(in oklab, #fff, transparent calc(100% - calc(var(--chip-sheen-alpha)*100%)));
  background-image: linear-gradient(
    90deg,
    transparent calc(50% - var(--chip-sheen-w)),
    var(--_sheen) 50%,
    transparent calc(50% + var(--chip-sheen-w))
  );
  background-size: 220% 100%; background-position:-110% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  animation: bb-chip-sheen 900ms cubic-bezier(.16,1,.3,1) 1 both;
}
@keyframes bb-chip-sheen { to { background-position: 110% 0; } }

/* === Geo toolbar niceties =============================================== */
.bb-has-town .--dist,
.bb-has-town [data-dist],
.bb-has-town [data-pill="dist"],
.bb-has-town [data-bb-dist]{ display:inline-flex; }

#bb-pick-town .bb-pill{ line-height:1; white-space:nowrap; }

/* Popover: keyboard focus outline */
.bb-geo-popover .bb-geo-item{ margin: var(--space-1); }
.bb-geo-popover .bb-geo-item.is-active{
  outline:2px solid color-mix(in oklab, var(--brand), transparent 40%);
  outline-offset:2px; border-radius: var(--radius-2);
}
.fa-magnifying-glass, .fa-location-dot{
  font-size: var(--fs-sm);
}