.bb-club-map {
  --bbcm-ink: #111111;
  --bbcm-paper: #FFFFFF;
  --bbcm-deep: #0E65E4;
  --bbcm-shadow: 0 2px 10px rgba(17, 17, 17, 0.06);
  --bbcm-radius-sm: 0 10px 10px 10px;
  --bbcm-height: 600px;
  --bbcm-width: 900px;

  box-sizing: border-box;
  position: relative;
  /* A definite pixel width, not a percentage: this sits inside the theme's
     .content-columns-column, a flex item with no explicit width of its own
     (it shrink-wraps to its content). A percentage-width child can't
     establish that content size — browsers resolve it as 0 during that
     layout pass — so the column (and this map) would collapse to 0 wide.
     max-width keeps it from overflowing narrower parents/viewports. */
  width: var(--bbcm-width);
  max-width: 100%;
  margin: 0 auto;
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--bbcm-ink);
}
.bb-club-map * {
  box-sizing: border-box;
}

.bb-club-map__header {
  padding: 16px 20px;
  margin-bottom: 12px;
  background: var(--bbcm-paper);
  border-radius: 8px;
  box-shadow: var(--bbcm-shadow);
}
.bb-club-map__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bbcm-deep);
  opacity: 0.85;
  margin: 0 0 6px;
}
/* The theme styles h2 (and other headings) inside a single-content
   flexible-content column as centered with its own heading color — both
   more specific than a single class, so this needs !important to win. */
.bb-club-map__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: left !important;
  color: var(--bbcm-deep) !important;
}
.bb-club-map__count {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--bbcm-ink);
  opacity: 0.68;
}
.bb-club-map__count strong {
  color: var(--bbcm-deep);
  opacity: 1;
  font-weight: 700;
}

.bb-club-map__map {
  width: 100%;
  height: var(--bbcm-height);
  min-height: 300px;
  border-radius: 8px;
  box-shadow: var(--bbcm-shadow);
}

.bb-club-map__empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 10px 16px;
  background: var(--bbcm-paper);
  border-radius: 8px;
  box-shadow: var(--bbcm-shadow);
  font-size: 14px;
  color: var(--bbcm-ink);
  opacity: 0.75;
}

.bb-club-map .leaflet-popup-content-wrapper {
  border-radius: var(--bbcm-radius-sm);
  box-shadow: var(--bbcm-shadow);
  font-family: inherit;
}
.bb-club-map .leaflet-popup-content { margin: 14px 16px; }
.bb-club-map .popup-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--bbcm-ink);
  margin: 0 0 4px;
}
.bb-club-map .popup-meta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bbcm-deep);
  opacity: 0.85;
  margin: 0 0 8px;
}
.bb-club-map .popup-teams {
  margin: 0;
  padding: 0 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
}

.bb-club-map .bbcm-legend {
  background: var(--bbcm-paper);
  border-radius: 8px;
  box-shadow: var(--bbcm-shadow);
  padding: 10px 14px;
  font-size: 12.5px;
}
.bb-club-map .bbcm-legend-title {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--bbcm-ink);
  opacity: 0.6;
  margin: 0 0 6px;
}
.bb-club-map .bbcm-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}
.bb-club-map .bbcm-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(17, 17, 17, 0.35);
  flex: none;
}