/* `dvh` = dynamic viewport height — accounts for the on-screen keyboard so
   the map doesn't peek out below the sheet when the keyboard opens. Falls
   back to 100vh on browsers that don't support dvh. */
#map{height:100vh;height:100dvh;width:100%;background:#e0e0e0;position:relative;overflow:hidden}
#map .maplibregl-canvas-container .maplibregl-canvas,
#map .leaflet-tile-pane{filter:none}
body{margin:0}
:root{ --mobile-sheet-height:96px; --mobile-search-expanded-top-gap:calc(24px + env(safe-area-inset-top)); }
/* Location search bar */
.locationSearch{ position:fixed; left:12px; top:12px; z-index:1200; background:#fff; padding:6px; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.18); font-family:Arial, sans-serif; box-sizing:border-box; }
.locationSearchField{ position:relative; border:1px solid #d1d5db; border-radius:10px; background:#fff; overflow:hidden; }
.locationSearchBack{
  display:none;
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  border:none;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
}
.locationSearchBack::before{
  content:"";
  position:absolute;
  left:7px;
  top:5px;
  width:8px;
  height:8px;
  border-left:2px solid #475569;
  border-bottom:2px solid #475569;
  transform:rotate(45deg);
}
.locationSearchIcon{
  position:absolute; right:36px; top:50%; transform:translateY(-50%);
  width:11px; height:11px; border:2px solid #6b7280; border-radius:999px;
}
.locationSearchIcon::after{
  content:""; position:absolute; right:-3px; bottom:-3px; width:6px; height:2px;
  background:#6b7280; transform:rotate(45deg); border-radius:2px;
}
.locationSearchClear{
  position:absolute; right:10px; top:50%; transform:translateY(-52%);
  border:none; background:transparent; color:#6b7280; cursor:pointer;
  width:16px; height:16px; line-height:16px; font-size:16px; padding:0;
}
.locationSearchClear{ display:block; }
.locationSearchClear:hover{ color:#111827; }
.locationSearch input{ width:240px; max-width:calc(100vw - 60px); border:none; border-radius:0; padding:6px 56px 6px 10px; font-size:14px; outline:none; background:transparent; display:block; }
.locationSearchField:focus-within{ border-color:#0078ff; box-shadow:0 0 0 2px rgba(0,120,255,0.2); }
.locationSearchSuggestions{ margin-top:6px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; max-height:220px; overflow:auto; box-shadow:0 8px 20px rgba(0,0,0,0.12); }
.locationSearchSuggestions .suggestionItem{ padding:8px 10px; font-size:13px; cursor:pointer; color:#111; }
.locationSearchSuggestions .suggestionRow{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.locationSearchSuggestions .suggestionText{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.locationSearchSuggestions .suggestionDelete{
  border:none; background:transparent; color:#94a3b8; cursor:pointer; font-size:14px;
  width:18px; height:18px; line-height:18px; padding:0; border-radius:4px;
}
.locationSearchSuggestions .suggestionDelete:hover{ color:#ef4444; background:#fee2e2; }
.locationSearchSuggestions .suggestionClock{
  width:12px; height:12px; margin-left:8px; display:inline-block; flex:0 0 12px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:12px 12px;
}
.locationSearchSuggestions .suggestionItem.history small{ display:none; }
.mobileSearchHandle,
.mobileSearchBody{ display:none; }
.mobileSearchHandle{
  height:20px;
  align-items:center;
  justify-content:center;
  margin:-2px 0 8px;
  touch-action:none;
}
.mobileSearchHandle span{
  width:52px;
  height:5px;
  border-radius:999px;
  background:#cbd5e1;
  display:block;
}
/* Waze-style vertical list: each action stacked, with the icon on the left,
   label centered, light divider between rows. Plain white background — no
   loud gradients. */
.mobileQuickActions{
  display:flex;
  flex-direction:column;
  gap:0;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
}
.mobileQuickActionBtn{
  height:56px;
  border:none;
  border-bottom:1px solid #e5e7eb;
  border-radius:0;
  background:#fff;
  color:#0f172a;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  padding:0 16px;
  box-shadow:none;
  text-align:left;
  width:100%;
}
.mobileQuickActionBtn:last-child{ border-bottom:none; }
.mobileQuickActionBtn:active{ background:#f1f5f9; }
.mobileQuickActionIcon{
  font-size:22px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex-shrink:0;
}
/* Remove old per-button gradient backgrounds (they're now plain white). */
#mobileActionAchievements,
#mobileActionFavourites,
#mobileActionDiscounts,
#mobileActionCrowder{ background:#fff; }
/* Waze-style recent searches: just a "Recent" header above a clean list of
   rows. Each row has a clock icon on the left, the place name + address on
   the right, and a thin divider. The remove control is small and grey
   (no big red box) and only shows when needed. */
.mobileRecentSection{
  margin:0 0 14px;
  border:none;
  border-radius:0;
  padding:0;
  background:transparent;
  display:none;
}
.mobileRecentHeader{
  font-size:13px;
  font-weight:600;
  color:#64748b;
  margin:6px 0 4px 4px;
  letter-spacing:0.2px;
}
.mobileRecentList{
  max-height:none;
  overflow:visible;
  display:flex;
  flex-direction:column;
  gap:0;
}
.mobileRecentItem{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 4px;
  border-bottom:1px solid #e5e7eb;
}
.mobileRecentItem:last-child{ border-bottom:none; }
.mobileRecentBtn{
  flex:1 1 auto;
  min-width:0;
  text-align:left;
  border:none;
  background:transparent;
  color:#0f172a;
  font-size:15px;
  font-weight:600;
  padding:0;
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  position:relative;
  padding-left:38px;
}
/* History clock icon to the left of each row. */
.mobileRecentBtn::before{
  content:'';
  position:absolute;
  left:0; top:50%;
  width:24px; height:24px;
  margin-top:-12px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 3-6.7'/><path d='M3 4v5h5'/><path d='M12 8v5l3 2'/></svg>");
}
.mobileRecentRemove{
  width:28px;
  height:28px;
  border:none;
  border-radius:999px;
  background:transparent;
  color:#94a3b8;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  flex-shrink:0;
}
.mobileRecentRemove:hover{ background:#f1f5f9; color:#475569; }
.mobileRecentRemove:active{ background:#e2e8f0; }
.mobileRecentEmpty{
  font-size:12px;
  color:#64748b;
  padding:8px 2px;
}
#mobileMenuBtn{
  display:none;
  border:none;
  border-radius:12px;
  background:#ffffff;
  color:#0f172a;
  box-shadow:0 6px 16px rgba(15,23,42,0.14);
  cursor:pointer;
  font-size:22px;
  line-height:1;
  align-items:center;
  justify-content:center;
  font-weight:700;
}
#mobileMenuBtn svg{
  width:20px;
  height:20px;
  display:block;
}
#mobileMenuBtn:active{ transform:scale(0.97); transition:transform 80ms ease; }
/* Keep the mobile auth panel's X (close) button above everything — including
   Cloudflare Turnstile challenge overlays — so users can always cancel. */
#mobileMenuCloseBtn{
  position:fixed !important;
  top:16px !important;
  right:16px !important;
  z-index:2147483647 !important;
}
/* Map controls */
.mapControls{
  position:fixed; right:16px; bottom:16px; z-index:1300;
  display:flex; flex-direction:column; gap:8px; align-items:center;
}
/* Return-to-location button */
.returnToLocation{
  width:42px; height:42px; border-radius:999px;
  border:1px solid #e2e8f0; background:#fff; color:#0f172a;
  box-shadow:0 8px 20px rgba(15,23,42,0.2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:0; line-height:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='7'/><path d='M12 2v4M12 18v4M2 12h4M18 12h4'/><circle cx='12' cy='12' r='1.5' fill='%230f172a' stroke='none'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:18px 18px;
}
.returnToLocation:hover{ background-color:#f8fafc; }
.returnToLocation:active{ transform:translateY(1px); }
.zoomControls{display:flex;flex-direction:column;gap:6px;align-items:center}
.zoomBtn{
  width:34px;height:34px;border-radius:6px;border:1px solid #e2e8f0;background:#fff;color:#0f172a;
  box-shadow:0 8px 18px rgba(15,23,42,0.18);cursor:pointer;font-size:18px;line-height:1;
}
.zoomBtn:hover{ background:#f8fafc; }
.zoomBtn:active{ transform:translateY(1px); }
.heatmapToggle{
  width:42px; height:42px; border-radius:999px;
  border:1px solid #e2e8f0; background:#fff; color:#0f172a;
  box-shadow:0 8px 20px rgba(15,23,42,0.2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1; transition:background 160ms ease, color 160ms ease;
}
.heatmapToggle--topRight{
  /* Despite the legacy class name, the heatmap toggle now sits next to
     the achievements pill in the bottom-left corner. */
  position:fixed; left:72px; bottom:12px; z-index:1100;
}
.heatmapToggle:hover{ background:#f8fafc; }
.heatmapToggle:active{ transform:translateY(1px); }
.heatmapToggle--active{ background:#2563eb; color:#fff; border-color:#2563eb; }
.heatmapToggle--active:hover{ background:#1d4ed8; }

/* Settings panel (top-left 3-dot menu) row hover/focus states. */
#settingsPanel a:hover,
#settingsPanel label:hover{ background:#f1f5f9; }
#settingsPanel a:active{ background:#e2e8f0; }

/* Guest mobile menu overlay row hover states */
#loginPanel.mobileMenuSheet a:hover,
#loginPanel.mobileMenuSheet label:hover{ background:#f1f5f9; }

@media (max-width: 860px){
  #userBadgeTR,
  #achievementsNavBtn,
  .heatmapToggle--topRight,
  #bizFloatingToolbar{
    display:none !important;
  }
  /* 3-dot menu top-LEFT (settings: privacy, legal, contribute toggle). */
  #mobileMenuBtn{
    display:inline-flex;
    position:fixed;
    left:12px;
    top:12px;
    right:auto;
    width:40px;
    height:40px;
    z-index:1200;
  }
  .locationSearch{
    left:0;
    right:0;
    top:auto;
    bottom:0;
    width:auto;
    max-width:none;
    background:#ffffff;
    border-radius:20px 20px 0 0;
    padding:8px 14px calc(14px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 28px rgba(15,23,42,0.18);
    max-height:min(78vh, 600px);
    overflow:hidden;
    transition:transform 260ms cubic-bezier(.22,.61,.36,1);
    touch-action:pan-y;
  }
  /* Three sheet states (mobile only):
     - Hidden: only the drag handle (24px) sticks above the bottom edge so the
       user can swipe it back up. Map is fully visible.
     - Collapsed: search bar + handle visible. Quick-action buttons hidden.
     - Expanded: full sheet — search bar + recents + quick actions. */
  .locationSearch.mobileSheetHidden{ transform:translateY(calc(100% - 24px - env(safe-area-inset-bottom))); }
  /* Collapsed = original 94px peek at the very bottom showing only the
     search bar + handle. This is the resting state on page load. */
  .locationSearch.mobileSheetCollapsed{ transform:translateY(calc(100% - 94px - env(safe-area-inset-bottom))); }
  /* Midline = sits at the lower half of the screen, ~55dvh tall, search
     bar + recents + quick actions all visible. Map controls remain
     visible because the sheet doesn't reach them. */
  .locationSearch.mobileSheetMidline{
    transform:translateY(0);
    top:auto;
    bottom:0;
    height:55dvh;
    max-height:55dvh;
    border-radius:20px 20px 0 0;
    box-shadow:0 -10px 28px rgba(15,23,42,0.18);
    padding:8px 14px calc(14px + env(safe-area-inset-bottom));
    overflow:auto;
  }
  .locationSearch.mobileSheetExpanded{
    transform:translateY(0);
    top:auto;
    bottom:0;
    height:calc(100dvh - var(--mobile-search-expanded-top-gap, 96px));
    max-height:calc(100dvh - var(--mobile-search-expanded-top-gap, 96px));
    border-radius:20px 20px 0 0;
    box-shadow:0 -10px 28px rgba(15,23,42,0.18);
    padding:8px 14px calc(14px + env(safe-area-inset-bottom));
    overflow:hidden;
  }
  .locationSearch.mobileSheetExpanded.mobileSearchPageOpen{
    left:0;
    right:0;
    top:0;
    bottom:0;
    width:100vw;
    height:100vh;
    height:100dvh;
    min-height:100vh;
    min-height:100dvh;
    max-height:none;
    border-radius:0;
    box-shadow:none;
    padding:calc(10px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .mobileSearchHandle{ display:flex; }
  /* Quick-action buttons (Achievements / Saved Places / etc.) only appear when
     the sheet is fully expanded. In collapsed/hidden, they fade out and are
     non-interactive but stay in DOM so a real-time drag-up reveals them.
     While the user is dragging upward (.mobileSheetDragging), show the body
     immediately so the buttons are visible during the gesture. */
  .mobileSearchBody{ display:block; opacity:1; transition:opacity 200ms ease; }
  /* Body content (recents + quick actions) is hidden in collapsed/hidden
     states — only visible at midline and expanded. */
  .locationSearch.mobileSheetCollapsed .mobileSearchBody,
  .locationSearch.mobileSheetHidden .mobileSearchBody{
    opacity:0;
    pointer-events:none;
  }
  .locationSearch.mobileSheetDragging .mobileSearchBody{
    opacity:1 !important;
    pointer-events:auto !important;
    transition:none !important;
  }
  .locationSearch.mobileSheetExpanded.mobileSearchPageOpen .mobileSearchHandle{ display:none; }
  .locationSearch.mobileSheetExpanded.mobileSearchPageOpen .locationSearchField{
    position:sticky;
    top:0;
    z-index:5;
    border:none;
    border-radius:18px;
    background:#f6f7fb;
    box-shadow:none;
    min-height:56px;
  }
  .locationSearch.mobileSheetExpanded.mobileSearchPageOpen .locationSearchBack{
    display:flex;
    align-items:center;
    justify-content:center;
    left:12px;
    width:28px;
    height:28px;
    z-index:2;
  }
  .locationSearch.mobileSheetExpanded.mobileSearchPageOpen .locationSearchBack::before{
    left:9px;
    top:7px;
  }
  .locationSearch.mobileSheetExpanded.mobileSearchPageOpen .locationSearchIcon{ left:52px; right:auto; }
  .locationSearch.mobileSheetExpanded.mobileSearchPageOpen .locationSearchClear{ right:14px; }
  .locationSearch.mobileSheetExpanded.mobileSearchPageOpen input{
    width:100%;
    max-width:none;
    box-sizing:border-box;
    padding-left:84px;
    padding-right:56px;
    min-height:56px;
    font-size:18px;
    background:transparent;
  }
  .locationSearch.mobileSheetExpanded.mobileSearchPageOpen .locationSearchSuggestions{
    margin-top:12px;
    max-height:none;
    overflow:visible;
    border:none;
    border-radius:0;
    box-shadow:none;
    background:transparent;
  }
  .locationSearch.mobileSheetExpanded.mobileSearchPageOpen .locationSearchSuggestions .suggestionItem{
    padding:14px 6px;
    border-bottom:1px solid #e5e7eb;
    font-size:16px;
  }
  .locationSearch.mobileSheetExpanded.mobileSearchPageOpen .locationSearchSuggestions .suggestionItem:last-child{ border-bottom:none; }
  .locationSearch.mobileSheetExpanded.mobileSearchPageOpen .mobileSearchBody{
    opacity:1 !important;
    pointer-events:auto !important;
    margin-top:16px;
  }
  body.crowdzSearchPageOpen #mapControls,
  body.crowdzSearchPageOpen #mobileMenuBtn,
  body.crowdzSearchPageOpen #authButtons,
  body.crowdzSearchPageOpen #quickReportIssueBtn,
  body.crowdzSearchPageOpen .heatmapToggle--topRight,
  body.crowdzSheetExpanded #mapControls,
  body.crowdzSheetExpanded #mobileMenuBtn,
  body.crowdzSheetExpanded #authButtons,
  body.crowdzSheetExpanded #quickReportIssueBtn,
  body.crowdzSheetExpanded .heatmapToggle--topRight{
    opacity:0 !important;
    pointer-events:none !important;
  }
  /* In hidden state, also dim the search field since it's barely visible. */
  .locationSearch.mobileSheetHidden .locationSearchField{ opacity:.5; }
  .locationSearchField{
    border-width:2px;
    border-radius:16px;
  }
  .locationSearch input{
    width:100%;
    max-width:none;
    font-size:17px;
    padding:12px 50px 12px 40px;
    line-height:1.2;
  }
  .locationSearchIcon{
    left:13px;
    right:auto;
    width:12px;
    height:12px;
  }
  .locationSearchIcon::after{
    right:-4px;
    bottom:-3px;
    width:6px;
  }
  .locationSearchClear{
    right:12px;
    width:20px;
    height:20px;
    line-height:20px;
    font-size:18px;
  }
  .locationSearchSuggestions{
    margin-top:8px;
    max-height:190px;
  }
  /* Recenter button on the LEFT, hovering above the sheet's visible edge. */
  .mapControls{
    left:12px;
    right:auto;
    bottom:calc(var(--mobile-sheet-height, 96px) + 14px);
    gap:8px;
    z-index:1350;
    transition:opacity 200ms ease, visibility 0s linear 200ms;
  }
  .returnToLocation{
    width:54px;
    height:54px;
    background-size:24px 24px;
  }
  .zoomControls,
  #zoomInBtn,
  #zoomOutBtn{
    display:none !important;
  }
  #mapInfoBtn{
    display:inline-flex !important;
    position:fixed !important;
    right:12px !important;
    left:auto !important;
    bottom:calc(var(--mobile-sheet-height, 96px) + 14px) !important;
    z-index:1350 !important;
    min-height:34px;
    align-items:center;
    justify-content:center;
  }
  #quickReportIssueBtn{
    right:12px;
    bottom:calc(var(--mobile-sheet-height, 96px) + 58px);
    z-index:1360;
  }
  body.signed-in #quickReportIssueBtn{
    top:12px;
    right:12px;
    bottom:auto;
  }
  #loginPanel{
    left:12px !important;
    right:12px !important;
    top:60px !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100vh - 128px);
    overflow:auto !important;
    border-radius:12px !important;
  }
  #loginPanel.mobileMenuSheet{
    position:fixed !important;
    inset:0 !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:100% !important;
    max-width:none !important;
    max-height:none !important;
    height:100% !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#f8fafc !important;
    z-index:2200 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:calc(18px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px)) !important;
    box-sizing:border-box !important;
    /* Remove contain:paint so the close button and all content are never clipped */
    contain:none !important;
  }
  #loginPanel.mobileMenuSheet #signupTypeToggleInline{
    margin-left:auto !important;
    margin-right:44px !important;
  }
  /* Auth pills sit TOP-RIGHT on mobile, opposite the 3-dot settings menu
     on the top-left. Cleaner, lower-contrast styling than the previous
     loud blue/orange gradients. Use opacity for the show/hide so they
     fade in/out instead of popping. */
  #authButtons{
    transition:opacity 200ms ease;
  }
  body:not(.signed-in) #authButtons{
    display:flex !important;
    position:fixed !important;
    left:auto !important;
    right:12px !important;
    top:12px !important;
    z-index:1300 !important;
    gap:6px !important;
    opacity:1;
  }
  body:not(.signed-in) #authButtons #loginToggleBtn,
  body:not(.signed-in) #authButtons #signupToggleBtn{
    min-height:36px !important;
    padding:0 14px !important;
    border-radius:999px !important;
    font-size:13px !important;
    font-weight:600 !important;
    letter-spacing:.2px !important;
    box-shadow:0 4px 12px rgba(15,23,42,.16) !important;
    line-height:36px !important;
  }
  body:not(.signed-in) #authButtons #loginToggleBtn{
    background:#0f172a !important;
    color:#fff !important;
    border:none !important;
  }
  body:not(.signed-in) #authButtons #signupToggleBtn{
    background:#ffffff !important;
    color:#0f172a !important;
    border:1px solid #cbd5e1 !important;
  }
  /* Smooth fade-out when signing in (instead of instant display:none). */
  body.signed-in #authButtons{
    opacity:0 !important;
    pointer-events:none !important;
    visibility:hidden;
    transition:opacity 200ms ease, visibility 0s linear 200ms;
  }
}

/* Keep Turnstile in the normal form flow.
  The off-screen widget made interactive challenges impossible to complete,
  which is why business signup could fail with bot-check errors. */
.cf-turnstile{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:calc(100% - 52px) !important;
  min-height:65px;
  max-height:80px;
  margin:12px 12px 6px !important;
  padding:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  pointer-events:auto;
  opacity:1;
}
.cf-turnstile:empty{
  display:none;
  min-height:0;
  margin:0 !important;
}
/* Belt-and-braces: form buttons always accept pointer events even if some
   ancestor accidentally inherits pointer-events:none from a stuck overlay. */
#loginForm button[type="submit"],
#signupFormInline button[type="submit"]{
  pointer-events:auto !important;
  touch-action:manipulation;
}

@media (max-width: 520px){
  #loginPanel{
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-width:none !important;
    top:58px !important;
  }
}
.locationSearchSuggestions .suggestionItem:hover,
.locationSearchSuggestions .suggestionItem.active{ background:#f1f5f9; }
.locationSearchSuggestions .suggestionItem small{ color:#64748b; }
.maplibregl-popup-content,
.leaflet-popup-content{
  border-radius:14px;
  padding:6px 8px;
  margin:6px 8px !important;
  min-width:0;
  overflow:visible;
}
.leaflet-popup,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip-container,
.maplibregl-popup,
.maplibregl-popup-content-wrapper,
.maplibregl-popup-tip-container{
  overflow:visible !important;
}
.leaflet-popup-tip-container,
.leaflet-popup-tip{ display:none !important; }
.leaflet-popup-content-wrapper{ position:relative; }
.leaflet-popup-content-wrapper::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-8px;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:8px solid #ffffff;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,0.12));
}
.popupCategory{
  margin-top:0;
  font-size:10px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  font-style:normal;
  font-family:Arial, sans-serif;
  color:#6b7280;
  line-height:1.2;
}
.locationSearchIcon{ cursor:pointer; }
.popupTitle{ font-weight:700; font-size:14px; line-height:1.25; color:#0f172a; padding-right:18px; }
.maplibregl-popup-close-button{ top:6px !important; right:6px !important; font-size:18px; }
.popupCrowdText{ font-weight:650; color:#111827; font-size:12px; }
.popupBlock{ min-width:160px; width:auto; display:flex; flex-direction:column; gap:6px; margin:0; }
.popupMetaRow{ position:relative; padding-left:0; }
.popupCategory::before,
.popupUpdated::before{
  content:none;
}
.popupCrowdLine{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:18px;
  padding:0;
  margin-left:0;
}
.popupCrowdLine--hidden{ display:none; }
.popupCrowdLabel{ font-size:10px; font-weight:700; color:#64748b; letter-spacing:0.02em; text-transform:uppercase; }
.popupUpdated{ font-size:11px; color:#6b7280; margin-top:0; min-height:1.2em; line-height:1.2em; }
.popupActions{ margin-top:2px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.popupBlock--compact{ gap:0; }
.popupBlock--compact{ min-width:0; padding-bottom:0; }
.popupBlock--compact .popupUpdated{ margin-bottom:0; min-height:0; }
.popupActions--compact{
  margin-top:0;
  justify-content:flex-end;
  min-height:0;
  gap:0;
  padding:0 5px 0 0;
  height:auto;
}
.popupActions button{ width:auto; }
.popupActionIcons{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:24px; overflow:visible; }
.popupActions--compact .popupActionIcons{
  min-height:18px;
  transform:none;
  margin-right:0;
}
.popupActions--compact .popupRecentBtn{
  width:20px;
  height:20px;
  min-width:20px;
  margin-top:-1px;
  overflow:visible;
}
.popupActions--compact .popupRecentBtn::before{
  width:16px;
  height:16px;
  background-size:16px 16px;
}
.popupReportBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 14px;
  border-radius:9px;
  font-size:12px;
  font-weight:600;
  /* Force black text — without this the button can inherit blue from
     surrounding popup link styles. */
  color:#0f172a !important;
  background:#fff;
  border:1px solid #cbd5e1;
  cursor:pointer;
}
.popupReportBtn:hover{ background:#f8fafc; }
.popupReportBtn:active{ background:#f1f5f9; transform:translateY(1px); }
.popupReportBtn::before{
  content:'';
  width:14px;
  height:14px;
  display:inline-block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px 14px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><rect x='1.5' y='8.5' width='2.5' height='6' rx='1' fill='%234b5563'/><rect x='6.75' y='5.5' width='2.5' height='9' rx='1' fill='%234b5563'/><rect x='12' y='2.5' width='2.5' height='12' rx='1' fill='%234b5563'/></svg>");
}
.popupAlertBtn,
.popupRecentBtn{
  width:18px;
  height:18px;
  min-width:18px;
  border:none;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.popupAlertBtn--hidden{ display:none !important; }
.popupAlertBtn:hover,
.popupRecentBtn:hover{ opacity:0.85; }
.popupAlertBtn::before{
  content:'!';
  font-size:16px;
  font-weight:700;
  line-height:1;
  color:#dc2626;
}
.popupRecentBtn::before{
  content:'';
  width:14px;
  height:14px;
  display:inline-block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px 14px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M4 10h10' stroke='%234b5563' stroke-width='2.1' stroke-linecap='round'/><path d='M11 6.5L14.5 10L11 13.5' stroke='%234b5563' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.popupSaveBtn{
  width:18px;
  height:18px;
  min-width:18px;
  border:none;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.popupSaveBtn:hover{ opacity:0.85; }
.popupSaveBtn::before{
  content:'';
  width:16px;
  height:16px;
  display:inline-block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px 16px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M5 3h14a1 1 0 011 1v17.2a.5.5 0 01-.8.4L12 16l-7.2 5.6a.5.5 0 01-.8-.4V4a1 1 0 011-1z' stroke='%234b5563' stroke-width='2' stroke-linejoin='round'/></svg>");
}
.popupSaveBtn--active::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 3h14a1 1 0 011 1v17.2a.5.5 0 01-.8.4L12 16l-7.2 5.6a.5.5 0 01-.8-.4V4a1 1 0 011-1z' fill='%230f172a' stroke='%230f172a' stroke-width='2' stroke-linejoin='round'/></svg>");
}
.signupPrompt{ margin-top:8px; font-size:11px; color:#64748b; }
.popupCrowd--verylow{ color:#4ade80; }
.popupCrowd--low{ color:#166534; }
.popupCrowd--medium{ color:#a16207; }
.popupCrowd--high{ color:#ea5a50; }
.popupCrowd--veryhigh{ color:#f5060c; }
/* Top-right user badge (profile chip) */
.userBadge{ position:fixed; right:12px; top:12px; left:auto; z-index:1100; display:flex; align-items:center; gap:10px; background:#fff; padding:6px 10px; border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,0.18); font-family:Arial, sans-serif; }
.userBadgeIcon{ width:38px; height:38px; min-width:38px; min-height:38px; box-sizing:border-box; border-radius:50%; border:none; background:#e5e7eb; display:flex; align-items:center; justify-content:center; font-weight:700; color:#111; font-size:14px; overflow:hidden; position:relative; }
.userBadgeIcon img{ width:100%; height:100%; object-fit:cover; display:none; }
.userBadgeIcon span{ font-weight:700; color:#111; font-size:14px; line-height:1; }
.userBadgeIcon.has-avatar{ border-radius:0; background:transparent; overflow:visible; }
.userBadgeIcon.has-avatar img{ object-fit:contain; }

/* Toggle switch */
.toggleRow{ display:flex; align-items:center; gap:10px; margin:4px 0 12px 0; }
.toggleLabel{ font-size:13px; color:#1f2937; cursor:pointer; font-weight:600; }
.toggleSwitch{ position:relative; width:44px; height:24px; display:inline-block; }
.toggleSwitch input{ opacity:0; width:0; height:0; }
.toggleTrack{
  position:absolute; inset:0; background:#8b8b8b; border-radius:999px;
  transition:background 160ms ease;
}
.toggleThumb{
  position:absolute; left:3px; top:3px; width:18px; height:18px; background:#fff; border-radius:50%;
  transition:transform 160ms ease; box-shadow:0 1px 4px rgba(0,0,0,0.25);
}
.toggleSwitch input:checked + .toggleTrack{ background:#2563eb; }
.toggleSwitch input:checked + .toggleTrack .toggleThumb{ transform:translateX(20px); }
.userBadgeMeta{ display:flex; flex-direction:column; line-height:1.1; }
.userBadgeName{ font-weight:700; font-size:13px; color:#111; }
.userBadgeSub{ border:none; background:transparent; color:#2563eb; font-size:11px; padding:0; cursor:pointer; text-align:left; }
.userBadgeSub:hover{ text-decoration:underline; }
.userBadgeMenu{
  border:none; background:transparent; cursor:pointer; font-size:18px; line-height:1;
  color:#64748b; padding:4px 6px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
}
.userBadgeMenu svg{
  width:18px;
  height:18px;
  display:block;
}
.userBadgeMenu:hover{ background:#f1f5f9; color:#0f172a; }
#achievementsNavBtn{
  position:fixed;
  left:12px;
  bottom:12px;
  z-index:1100;
  width:52px;
  height:42px;
  border:1px solid #cbd5e1;
  border-radius:999px;
  background:#fff;
  color:#0f172a;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#achievementsNavBtn:hover{ background:#f8fafc; }
/* "Report an issue" button — small black-on-white circular icon button.
   Just the !-in-triangle SVG; no text label, no red. Matches the other
   floating circular controls visually (recenter, etc.). */
#quickReportIssueBtn{
  position:fixed;
  /* Sits in the same row as the Login/Sign up pills (top-right), aligned
     vertically with their centre. Auth pills are ~32px tall starting at
     top:12, so a 36px circle starting at top:10 lines up symmetrically
     with the row. ~155px wide auth pills + 12px right margin + 8px gap
     puts this button at right:175. */
  right:175px;
  top:10px;
  bottom:auto;
  z-index:1400;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
  border-radius:999px;
  background:#ffffff;
  color:#0f172a;
  text-decoration:none;
  border:1px solid #e2e8f0;
  box-shadow:0 6px 16px rgba(15,23,42,0.14);
  pointer-events:auto;
  touch-action:manipulation;
}
#quickReportIssueBtn:hover{ background:#f8fafc; }
#quickReportIssueBtn:active{ transform:translateY(1px); }
/* Hide default MapLibre controls */
.maplibregl-ctrl-group{ display:none !important; }
/* Keep form focus/hover visuals inside rounded cards.
   contain:paint is intentionally omitted from #loginPanel — it creates a
   stacking context that traps the Turnstile iframe and prevents pointer
   events on adjacent buttons during the verifying state (same reason the
   mobileMenuSheet variant sets contain:none). The other modal containers
   don't host Turnstile so they retain it for paint-isolation. */
#loginInlineModal > div, #signupInlineModal > div, #acctSwitcherPopover { overflow:hidden; border-radius:10px; contain: paint; }
#loginPanel { overflow:hidden; border-radius:10px; }
/* Input base style - pill rounded, clearer borders */
#loginPanel input, #loginInlineModal input, #signupInlineModal input {
  outline:none; box-shadow:none; background:#f9fbfd; border:1px solid #a3afba; border-radius:10px; color:#111; height:28px; padding:4px 10px; font-size:14px; background-clip: padding-box;
}
/* Hover state for clearer affordance */
#loginPanel input:hover, #loginInlineModal input:hover, #signupInlineModal input:hover {
  border-color:#8996a3;
}
/* Focus ring with outer glow for clear edges (still clipped by card) */
#loginPanel input:focus, #loginInlineModal input:focus, #signupInlineModal input:focus {
  border-color:#0078ff; box-shadow: 0 0 0 2px rgba(0,120,255,0.32);
}
/* Placeholder clarity */
#loginPanel input::placeholder, #loginInlineModal input::placeholder, #signupInlineModal input::placeholder { color:#9aa3ad; }
/* Buttons - pill rounded */
#loginPanel button, #loginInlineModal button, #signupInlineModal button { outline:none; box-shadow:none; border-radius:10px; font-size:14px; }
#loginInlineModal button:focus, #signupInlineModal button:focus, #loginPanel button:focus { box-shadow:none; outline:none; }
/* Override browser autofill (Chrome/Edge/Opera) blue background */
#loginPanel input:-webkit-autofill,
#loginPanel input:-webkit-autofill:focus,
#loginInlineModal input:-webkit-autofill,
#loginInlineModal input:-webkit-autofill:focus,
#signupInlineModal input:-webkit-autofill,
#signupInlineModal input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important; /* wipe default fill */
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #111 !important; border-radius:14px !important; background-clip: padding-box !important;
  caret-color: #111 !important;
  transition: background-color 9999s ease-in-out 0s;
}
/* Firefox autofill */
#loginPanel input:-moz-autofill,
#loginInlineModal input:-moz-autofill,
#signupInlineModal input:-moz-autofill {
  box-shadow: 0 0 0 1000px #fff inset !important;
  -moz-text-fill-color: #111 !important;
  caret-color: #111 !important;
  border-radius:14px !important;
}
/* Make form fields not span edge-to-edge; align labels too */
#loginPanel #loginForm label,
#loginPanel #signupFormInline label { display:block; margin-left:12px; margin-right:40px; margin-bottom:2px !important; }
#loginPanel #loginForm input,
#loginPanel #loginForm button,
#loginPanel #signupFormInline input,
#loginPanel #signupFormInline button { width: calc(100% - 52px) !important; margin-left:12px !important; margin-right:40px !important; }
/* Reduce vertical gaps created by inline form styles */
#loginPanel #loginForm input { margin-bottom:6px !important; }
/* Compact the login submit button height to match inputs visually */
#loginPanel #loginForm button { min-height:44px; height:auto; margin-top:8px; line-height:1.2; }
/* Recommendation chip styling */
.recBox{ margin-top:8px;padding:8px;border:1px solid #e3e7eb;border-radius:8px;background:#f7fafc;font-size:12px;color:#1f2937 }
.recBox button{ margin-left:8px;padding:4px 8px;border:none;border-radius:6px;background:#0078ff;color:#fff;cursor:pointer;font-size:12px }
/* Anchored recommendation flyout next to clicked place */
/* Keep below side drawer (z-index:1000) so it never overlays the report UI */
#recFlyout{ position:absolute; z-index:950; background:#fff; border:1px solid #e3e7eb; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.18); width:280px; overflow:hidden; font-family:Arial, sans-serif; display:none; }
#recFlyout.collapsed{ width:36px; }
#recFlyout.collapsed .recBody{ display:none; }
#recFlyout.collapsed .recHeader{ padding:6px; justify-content:center; }
#recFlyout.collapsed .recHeader > div:first-child{ display:none; }
#recFlyout .recHeader{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-bottom:1px solid #eef2f6; font-weight:700; font-size:13px; }
/* Recommendation arrow: blue pill (centered CSS arrow) */
#recFlyout .recToggle{
  border:1px solid #cbd5e1;
  background:#f8fafc;
  color:#0f172a; cursor:pointer;
  width:24px; height:24px; border-radius:999px; line-height:0; font-size:0;
  display:inline-flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  box-shadow:0 2px 6px rgba(15,23,42,0.12);
  transition:background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
#recFlyout .recToggle:hover{ background:#eef2f7; border-color:#cbd5e1; transform:translateY(-1px); }
#recFlyout .recToggle::before{
  content:"!"; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); font-size:14px; font-weight:700; color:#dc2626;
  line-height:1; text-align:center;
}
#recFlyout.collapsed .recToggle::before{ content:"!"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; }
#recFlyout .recBody{ padding:10px; font-size:12px; color:#1f2937; }
#recFlyout table{ width:100%; border-collapse:collapse; }
#recFlyout td{ padding:6px 0; vertical-align:middle; }
#recFlyout .recActions button{ padding:4px 8px; border:none; border-radius:6px; cursor:pointer; font-size:12px; }
#recFlyout .btnPrimary{ background:#0078ff; color:#fff; }
#recFlyout .btnGhost{ background:#eef2f6; color:#111; }
#recFlyout{ display:none !important; }

/* Recent reports flyout (mirrors recommendation flyout behavior) */
#repFlyout{ position:absolute; z-index:950; background:#fff; border:1px solid #e3e7eb; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.18); width:220px; overflow:hidden; font-family:Arial, sans-serif; display:none; }
#repFlyout.collapsed{ width:36px; }
#repFlyout.collapsed .repBody{ display:none; }
#repFlyout.collapsed .repHeader{ padding:6px; justify-content:center; }
#repFlyout.collapsed .repHeader > div:first-child{ display:none; }
#repFlyout .repHeader{ display:flex; align-items:center; justify-content:space-between; padding:5px 8px; border-bottom:1px solid #eef2f6; font-weight:700; font-size:11px; }
/* Recent reports arrow: green pill (centered CSS arrow) */
#repFlyout .repToggle{
  border:1px solid #e2e8f0; background:#f8fafc; color:#0f172a; cursor:pointer;
  width:24px; height:24px; border-radius:999px; line-height:0; font-size:0;
  display:inline-flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  box-shadow:0 2px 6px rgba(15,23,42,0.12);
  transition:background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
#repFlyout .repToggle:hover{ background:#eef2f7; border-color:#cbd5e1; }
#repFlyout .repToggle::before{
  content:""; position:absolute; left:52%; top:50%;
  width:7px; height:7px; border-right:2px solid #0f172a; border-bottom:2px solid #0f172a;
  transform:translate(-50%,-50%) rotate(-45deg); transform-origin:center;
}
#repFlyout.collapsed .repToggle::before{ transform:translate(-50%,-50%) rotate(135deg); }
#repFlyout .repBody{ padding:6px; font-size:11px; color:#1f2937; }
#repFlyout .repBody{ max-height:120px; overflow-y:auto; }
#repFlyout .repBody::-webkit-scrollbar{ width:8px; }
#repFlyout .repBody::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; }
#repFlyout .repBody::-webkit-scrollbar-track{ background:transparent; }
#repFlyout .repItem{ padding:6px 8px; border-radius:8px; margin-bottom:5px; line-height:1.25; }
#repFlyout .repItem:last-child{ margin-bottom:0; }
#repFlyout .rrRow{ display:flex; align-items:center; gap:8px; }
#repFlyout .rrMain{ flex:1 1 auto; min-width:0; }
#repFlyout .rrVotes{ display:inline-flex; align-items:center; gap:4px; margin-left:auto; font-size:10px; }
#repFlyout .rep--very-low{ background:#b6e7b6; color:#14532d; }
#repFlyout .rep--low{ background:#22c55e; color:#ffffff; }
#repFlyout .rep--medium{ background:#fde047; color:#3a2c00; }
#repFlyout .rep--high{ background:#ea5a50; color:#ffffff; }
#repFlyout .rep--very-high{ background:#f5060c; color:#fff; }
#repFlyout{ display:none !important; }

#sideDrawer .rrRow{ display:flex; align-items:center; gap:10px; }
#sideDrawer .rrMain{ flex:1 1 auto; min-width:0; }
#sideDrawer .rrItem{ padding:10px 12px; border-radius:10px; margin-bottom:8px; line-height:1.35; }
#sideDrawer .rrItem:last-child{ margin-bottom:0; }
#sideDrawer .rr--very-low{ background:#b6e7b6; color:#14532d; }
#sideDrawer .rr--low{ background:#22c55e; color:#ffffff; }
#sideDrawer .rr--medium{ background:#fde047; color:#3a2c00; }
#sideDrawer .rr--high{ background:#ea5a50; color:#fff; }
#sideDrawer .rr--very-high{ background:#f5060c; color:#fff; }

.rrAvatar{ width:36px; height:36px; border-radius:999px; overflow:hidden; flex:0 0 36px; display:inline-flex; align-items:center; justify-content:center; border:none; background:transparent !important; box-shadow:none !important; }
.rrAvatar img{ width:100%; height:100%; object-fit:cover; display:block; background:transparent !important; border:none; border-radius:999px; box-shadow:none; }
.rrAvatar--fallback{ font-size:15px; font-weight:700; color:inherit; background:transparent !important; border:none; border-radius:999px; box-shadow:none; }
.rrVotes{ display:inline-flex; align-items:center; gap:4px; margin-left:auto; }
.rrVoteBtn{ width:14px; height:14px; border:none; background:transparent; border-radius:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:10px; line-height:1; padding:0; }
.rrVoteBtn:disabled{ opacity:0.6; cursor:default; }
.rrVoteBtn.is-active{ opacity:1; }
.rrVoteBtn:not(.is-active){ opacity:0.72; }
.rrVoteBtn::before{ content:''; width:12px; height:12px; display:inline-block; background-repeat:no-repeat; background-position:center; background-size:12px 12px; }
.rrVoteBtn--up::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M9 21H6a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2h3v10z' stroke='%230f172a' stroke-width='1.9' stroke-linejoin='round'/><path d='M9 11l3.1-7.1a1.5 1.5 0 0 1 2.9.7V11h3a2 2 0 0 1 2 2.4l-.9 5a2 2 0 0 1-2 1.6H9V11z' fill='%230f172a' stroke='%230f172a' stroke-width='1.6' stroke-linejoin='round'/></svg>");
}
.rrVoteBtn--down::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M15 3h3a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-3V3z' stroke='%230f172a' stroke-width='1.9' stroke-linejoin='round'/><path d='M15 13l-3.1 7.1a1.5 1.5 0 0 1-2.9-.7V13H6a2 2 0 0 1-2-2.4l.9-5a2 2 0 0 1 2-1.6h8V13z' fill='%230f172a' stroke='%230f172a' stroke-width='1.6' stroke-linejoin='round'/></svg>");
}
.rrVoteCount{ min-width:10px; text-align:center; font-size:10px; font-weight:700; }

.signed-in #toSignupFromPopup{ display:none !important; }
.signed-in .signupPrompt{ display:none !important; }

/* Combined More flyout (single button) */
#moreFlyout{ position:absolute; z-index:950; background:#fff; border:1px solid #e3e7eb; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.18); width:300px; overflow:hidden; font-family:Arial, sans-serif; display:none; }
#moreFlyout.collapsed{ width:36px; }
#moreFlyout.collapsed .moreBody{ display:none; }
#moreFlyout.collapsed .moreHeader{ padding:6px; justify-content:center; }
#moreFlyout.collapsed .moreHeader > div:first-child{ display:none; }
#moreFlyout .moreHeader{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-bottom:1px solid #eef2f6; font-weight:700; font-size:13px; }
#moreFlyout .moreToggle{ border:none; background:#334155; color:#fff; cursor:pointer; width:24px; height:24px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; position:relative; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,0.15); }
#moreFlyout .moreToggle::before{ content:""; display:block; width:0; height:0; border-left:7px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; transform:rotate(0deg); }
#moreFlyout.collapsed .moreToggle::before{ transform:rotate(180deg); }
#moreFlyout .moreBody{ padding:10px; font-size:12px; color:#1f2937; display:flex; flex-direction:column; gap:10px; }
#moreFlyout .recCard{ background:#eef6ff; border:1px solid #dbeafe; border-radius:8px; padding:8px; }
#moreFlyout .recCardTitle{ font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
#moreFlyout .recCard .btnPrimary{ background:#2563eb; color:#fff; border:none; border-radius:6px; padding:4px 8px; cursor:pointer; font-size:12px; }
#moreFlyout .repList{ display:flex; flex-direction:column; gap:4px; }
#moreFlyout .repEmpty{ color:#666; }
.recCueBadge{ display:inline-block; margin-left:6px; background:#ef4444; color:#fff; border-radius:999px; padding:1px 6px; font-size:11px; vertical-align:middle; }

/* Inline popup hierarchy styles */
.crowdBadge{ display:inline-block; padding:2px 8px; border-radius:999px; font-weight:700; font-size:0.95em; }
.crowd--very-low{ background:#b6e7b6; color:#14532d; }
.crowd--low{ background:#16a34a; color:#ffffff; }
.crowd--medium{ background:#fde047; color:#3a2c00; }
.crowd--high{ background:#ef4444; color:#fff; }
.crowd--unknown{ background:#f3f4f6; color:#374151; }
.crowdMarkerWrapper{ background:transparent; border:none; }
.crowdMarker{
  --marker-fill:#9ca3af;
  --marker-stroke:#6b7280;
  width:24px;
  height:24px;
  border-radius:999px;
  position:relative;
  background:var(--marker-fill);
  border:2px solid var(--marker-stroke);
  box-shadow:0 2px 7px rgba(0,0,0,0.26);
}
.crowdMarkerGlyph{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-56%);
  width:16px;
  height:16px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px 16px;
  pointer-events:none;
  opacity:1;
  z-index:2;
}
.crowdMarker::before{
  content:none;
}
.crowdMarker::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-7px;
  width:0;
  height:0;
  transform:translateX(-50%);
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:8px solid var(--marker-fill);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}
.marker--very-low{ --marker-fill:#b1e09b; --marker-stroke:#7fae69; }
.marker--low{ --marker-fill:#77c25b; --marker-stroke:#459029; }
.marker--medium{ --marker-fill:#efbf51; --marker-stroke:#bd8d1f; }
.marker--high{ --marker-fill:#ea5a50; --marker-stroke:#ce453a; }
.marker--very-high{ --marker-fill:#f5060c; --marker-stroke:#bd0308; }
.marker--unknown{ --marker-fill:#d1d5db; --marker-stroke:#9ca3af; }
.marker--saved{ --marker-stroke:#f59e0b; border-color:#f59e0b; }
.markerIcon--mall{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='13' rx='1'/><path d='M3 12h18'/><path d='M10 21v-4h4v4'/></svg>"); }
.crowdMarkerGlyph{ filter: drop-shadow(0 0 1px rgba(0,0,0,0.45)); }
.markerIcon--store{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10h18'/><path d='M5 10V7.8a1.8 1.8 0 0 1 1.8-1.8h10.4A1.8 1.8 0 0 1 19 7.8V10'/><path d='M5 10v8h14v-8'/><path d='M9 18v-4h6v4'/></svg>"); }
.markerIcon--handbag{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23ffffff'><path d='M6 9 L18 9 L17 20 L7 20 Z'/></g><g fill='none' stroke='%23ffffff' stroke-width='2.0' stroke-linecap='round'><path d='M9 9 V7.5 a3 3 0 0 1 6 0 V9'/></g></svg>"); }
.markerIcon--flower{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='2.3'/><path d='M12 5.3c1.8 0 3.1 1.4 3.1 3.1S13.8 11.5 12 11.5 8.9 10.1 8.9 8.4 10.2 5.3 12 5.3z'/><path d='M18.7 12c0 1.8-1.4 3.1-3.1 3.1S12.5 13.8 12.5 12s1.4-3.1 3.1-3.1S18.7 10.2 18.7 12z'/><path d='M12 18.7c-1.8 0-3.1-1.4-3.1-3.1S10.2 12.5 12 12.5s3.1 1.4 3.1 3.1S13.8 18.7 12 18.7z'/><path d='M5.3 12c0-1.8 1.4-3.1 3.1-3.1S11.5 10.2 11.5 12s-1.4 3.1-3.1 3.1S5.3 13.8 5.3 12z'/></svg>"); }
.markerIcon--museum{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-4 9 4'/><path d='M5 9v9M9 9v9M15 9v9M19 9v9'/><path d='M3 18h18'/></svg>"); }
.markerIcon--tree{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20v-5'/><path d='M7 13h10l-5-7-5 7z'/><path d='M8.5 16h7l-3.5-5-3.5 5z'/></svg>"); }
.markerIcon--trail{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3.6 13.8c2-2.9 4-2.9 6 0s4 2.9 6 0' /><path d='M15.6 13.8h4.6' /><path d='M20.2 13.8l-2.2-2.1' /><path d='M20.2 13.8l-2.2 2.1' /></svg>"); }
.markerIcon--restaurant{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4.4 4.3v5.8'/><path d='M6 4.3v5.8'/><path d='M7.6 4.3v5.8'/><path d='M4.4 10.1h3.2'/><path d='M6 10.1v9.7'/><path d='M14.6 4.3v15.4'/><path d='M14.6 4.3c2.4 1 3.8 3 3.8 5.9v1.6h-3.8'/><path d='M14.6 15.8l3.4-1.4'/></svg>"); }
.markerIcon--church{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v16'/><path d='M8 8h8'/></svg>"); }
.markerIcon--synagogue{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.85' stroke-linecap='square' stroke-linejoin='miter'><polygon points='12,3.0 20.0,16.8 4.0,16.8'/><polygon points='12,21.0 4.0,7.2 20.0,7.2'/></svg>"); }
.markerIcon--mosque{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><mask id='m'><rect width='24' height='24' fill='white'/><circle cx='15.1' cy='11.3' r='7.1' fill='black'/></mask></defs><circle cx='11.8' cy='11.8' r='9.6' fill='%23ffffff' mask='url(%23m)'/><polygon fill='%23ffffff' points='16.9,4.8 18.0,7.1 20.5,7.4 18.7,9.1 19.2,11.5 16.9,10.3 14.7,11.5 15.1,9.1 13.3,7.4 15.8,7.1'/></svg>"); }
.crowdMarkerGlyph.markerIcon--trail{ width:21px; height:21px; background-size:21px 21px; }
.markerIcon--beach{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M6 10a6 6 0 0 1 12 0H6z'/><g fill='none' stroke='%23ffffff' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'><path d='M6 10h12'/><path d='M9 10c.9.6 1.9.6 3 0'/><path d='M12 10c.9.6 1.9.6 3 0'/><path d='M12 10l-2 7.2'/><path d='M5 18.2h14'/></g></svg>"); }
.markerIcon--star{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M13.4 2.6c-.3 2.4-1.6 3.4-3.1 4.6C8.4 8.7 6 10.5 6 14.5 6 18 9 21 12 21s6-3 6-6.5c0-2.1-.8-3.5-1.7-4.6-.3.9-.9 1.6-1.7 2 .3-1.6 0-3.5-.8-5-.5-.9-1-1.7-.4-2.3z'/><path d='M12 21c-1.6 0-3-1.5-3-3.5 0-1.4.6-2.4 1.4-3.2.1.8.5 1.4 1.1 1.7-.1-.9.2-1.9.7-2.6.4 1 1.1 1.6 1.6 2.4.5.7.8 1.6.8 2.4 0 1.7-1.2 2.8-2.6 2.8z' fill='%23fbbf24'/></svg>"); }
.markerIcon--lookout{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='10' r='3.4'/><path d='M3.5 18.5c2.5-2.5 5.5-3.8 8.5-3.8s6 1.3 8.5 3.8'/><path d='M2.6 18.5h18.8'/></svg>"); }
.markerIcon--stadium{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='12' cy='11.5' rx='7.8' ry='4.2'/><path d='M4.2 11.5c0 4.1 3.5 7.4 7.8 7.4s7.8-3.3 7.8-7.4'/><path d='M8.4 9.9c1.1-.9 2.3-1.4 3.6-1.4 1.3 0 2.5.5 3.6 1.4'/><path d='M12 8.5v9.2'/><path d='M6.2 6.7l-1.3-1.3M9.2 5.6l-.9-1.5M14.8 5.6l.9-1.5M17.8 6.7l1.3-1.3'/></svg>"); }
.markerIcon--zoo{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23ffffff'><circle cx='7.3' cy='8.2' r='2.6'/><circle cx='12' cy='6.5' r='2.6'/><circle cx='16.7' cy='8.2' r='2.6'/><path d='M12 18.7c-2.8 0-4.9-1.6-4.9-4 0-2.3 2-3.8 4.9-3.8s4.9 1.5 4.9 3.8c0 2.4-2.1 4-4.9 4z'/></g></svg>"); }
.markerIcon--library{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 6.2v11.4'/><path d='M12 7.4c-1.5-1.1-3.5-1.7-5.8-1.7v10.9c2.3 0 4.3.6 5.8 1.7'/><path d='M12 7.4c1.5-1.1 3.5-1.7 5.8-1.7v10.9c-2.3 0-4.3.6-5.8 1.7'/></svg>"); }
.markerIcon--lake{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round'><path d='M4 8.2c1.6 1.2 3.2 1.2 4.8 0s3.2-1.2 4.8 0 3.2 1.2 4.8 0 3.2-1.2 4.8 0'/><path d='M4 12.1c1.6 1.2 3.2 1.2 4.8 0s3.2-1.2 4.8 0 3.2 1.2 4.8 0 3.2-1.2 4.8 0'/><path d='M4 16c1.6 1.2 3.2 1.2 4.8 0s3.2-1.2 4.8 0 3.2 1.2 4.8 0 3.2-1.2 4.8 0'/></svg>"); }
.markerIcon--bakery{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.45' stroke-linecap='round' stroke-linejoin='round'><path d='M4.8 15.2a6.1 6.1 0 0 1 6.1-6.1h2.2a6.1 6.1 0 0 1 6.1 6.1v1.5a2.2 2.2 0 0 1-2.2 2.2H7a2.2 2.2 0 0 1-2.2-2.2z'/><path d='M8.2 12.6l1.3-1.7M11.2 12.2l1.3-1.8M14.3 12.6l1.3-1.7'/><path d='M6.8 16.2h10.4'/></svg>"); }
.markerIcon--cemetery{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 18.6h10'/><path d='M8.5 18.6V10a3.5 3.5 0 0 1 7 0v8.6'/><path d='M12 7.5v4.2'/><path d='M10 9.6h4'/></svg>"); }
.markerIcon--ferry{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.55' stroke-linecap='round' stroke-linejoin='round'><path d='M4 15h16l-2.2 3H6.2z'/><path d='M8 10h8v5H8z'/><path d='M11 10V7h2v3'/><path d='M3 20c1-.8 2-.8 3 0s2 .8 3 0 2-.8 3 0 2 .8 3 0 2-.8 3 0 2 .8 3 0'/></svg>"); }
.markerIcon--observation{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.55' stroke-linecap='round' stroke-linejoin='round'><rect x='4.2' y='8.2' width='5.8' height='7.4' rx='2'/><rect x='14' y='8.2' width='5.8' height='7.4' rx='2'/><path d='M10 11.9h4'/><path d='M12 15.6v2.8'/></svg>"); }
.markerIcon--arcade{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 4.8h12v2.6H6z'/><path d='M7 7.4h10v11.8H7z'/><path d='M8.5 10h7v4.4h-7z'/><path d='M9.2 16.4h1.6M12.2 16.4h1.6'/><circle cx='8.8' cy='16.4' r='0.8'/></svg>"); }
.crowdMarkerGlyph.markerIcon--library{ width:23px; height:23px; background-size:23px 23px; }
.crowdMarkerGlyph.markerIcon--arcade{ width:18px; height:18px; background-size:18px 18px; }
.crowdMarkerGlyph.markerIcon--restaurant{ width:18px; height:18px; background-size:18px 18px; }
.markerIcon--default{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s7-5.8 7-11a7 7 0 1 0-14 0c0 5.2 7 11 7 11z'/><circle cx='12' cy='10' r='2.5'/></svg>"); }
.markerIcon--flower{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='2.2'/><circle cx='12' cy='7.7' r='2.6'/><circle cx='16.3' cy='12' r='2.6'/><circle cx='12' cy='16.3' r='2.6'/><circle cx='7.7' cy='12' r='2.6'/></svg>"); }
.markerIcon--restaurant{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23ffffff'><rect x='5.1' y='4.1' width='1.15' height='6.3' rx='0.4'/><rect x='6.9' y='4.1' width='1.15' height='6.3' rx='0.4'/><rect x='8.7' y='4.1' width='1.15' height='6.3' rx='0.4'/><rect x='5.1' y='10.4' width='4.75' height='1.25' rx='0.5'/><rect x='6.95' y='11.55' width='1.2' height='8.35' rx='0.55'/><path d='M15.05 4.1c2.45.25 4.05 2.1 4.05 4.7v4.05h-4.05V4.1z'/><rect x='15.05' y='12.75' width='1.25' height='7.15' rx='0.6'/></g></svg>"); }
.markerIcon--stadium{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='12' cy='12' rx='7.6' ry='4.5'/><path d='M4.4 12c0 4.1 3.4 7.3 7.6 7.3s7.6-3.2 7.6-7.3'/><path d='M8.8 10.2h6.4'/><path d='M12 10.2v7.8'/><path d='M6.4 6.8l-1.2-1.2M9.5 5.8l-.8-1.4M14.5 5.8l.8-1.4M17.6 6.8l1.2-1.2'/></svg>"); }
.markerIcon--observation{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='8.3' cy='12.2' r='3.4'/><circle cx='15.7' cy='12.2' r='3.4'/><path d='M11.7 12.2h0.6'/><path d='M7.8 8.8l1.1-1.5h6.2l1.1 1.5'/><circle cx='12' cy='8.1' r='0.8'/></svg>"); }
.markerIcon--train{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><rect x='6.1' y='4.8' width='11.8' height='10.8' rx='2.1'/><rect x='8.3' y='7.2' width='3' height='2.6' rx='0.5'/><rect x='12.7' y='7.2' width='3' height='2.6' rx='0.5'/><path d='M8.6 12.4h6.8'/><path d='M8.9 15.8l-1.6 1.9M15.1 15.8l1.6 1.9'/></svg>"); }
.markerIcon--theatre{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23ffffff'><rect x='5.2' y='4.9' width='13.6' height='1.6' rx='0.55'/><rect x='5.5' y='6.7' width='1.9' height='10.2' rx='0.55'/><rect x='16.6' y='6.7' width='1.9' height='10.2' rx='0.55'/><path d='M7.4 7h4.8c-.2 2.6-1.4 4.6-3.4 6-1-.7-1.5-1.8-1.4-3.3z'/><path d='M16.6 7h-4.8c.2 2.6 1.4 4.6 3.4 6 1-.7 1.5-1.8 1.4-3.3z'/><circle cx='7.5' cy='12.9' r='0.55'/><circle cx='16.5' cy='12.9' r='0.55'/></g></svg>"); }
.markerIcon--gallery{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' fill-rule='evenodd' d='M4.1 13.9c0-4.3 3.4-7.8 7.9-7.8 4.3 0 7.8 3.3 7.8 7.2 0 3-1.8 4.9-4.8 4.9h-2.1c-.7 0-1.2.5-1.2 1.2 0 .8-.6 1.3-1.4 1.3-3.5 0-6.2-2.6-6.2-6.8z M7.8 11.9a1.2 1.2 0 1 0 2.4 0 1.2 1.2 0 1 0-2.4 0z M11.1 9.8a1.2 1.2 0 1 0 2.4 0 1.2 1.2 0 1 0-2.4 0z M14.7 10.1a1.2 1.2 0 1 0 2.4 0 1.2 1.2 0 1 0-2.4 0z M17 12.6a1.2 1.2 0 1 0 2.4 0 1.2 1.2 0 1 0-2.4 0z M12.1 16a1.2 1.2 0 1 0 2.4 0 1.2 1.2 0 1 0-2.4 0z'/></svg>"); }
.markerIcon--plaza{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><rect x='5.1' y='5.1' width='13.8' height='13.8' rx='1.8'/><path d='M9.1 5.1v13.8M14.9 5.1v13.8M5.1 9.1h13.8M5.1 14.9h13.8'/></svg>"); }
.markerIcon--historic{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 18.8h15'/><path d='M6.3 18.8V11l5.7-3.3 5.7 3.3v7.8'/><path d='M9.7 18.8v-4.1h4.6v4.1'/><path d='M10.2 6.7h3.6'/></svg>"); }
.markerIcon--music{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M12.6 3.7v10.8a2.95 2.95 0 1 1-1.35-2.5V5.5l5-1.4v2.7l-3.65 1.05v7a2.95 2.95 0 1 1-1.35-2.5V3.7z'/></svg>"); }
.markerIcon--arcade{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='7.7' r='2.9'/><path d='M12 10.6v4.9'/><path d='M5.2 13.6L12 10.8l6.8 2.8v4.3L12 20.7l-6.8-2.8z'/><path d='M5.2 13.6V18'/><path d='M18.8 13.6V18'/><circle cx='8.5' cy='15.6' r='0.85'/></svg>"); }
.crowdMarkerGlyph.markerIcon--flower{ width:18px; height:18px; background-size:18px 18px; }
.crowdMarkerGlyph.markerIcon--stadium{ width:18px; height:18px; background-size:18px 18px; }
.crowdMarkerGlyph.markerIcon--observation{ width:18px; height:18px; background-size:18px 18px; }
.crowdMarkerGlyph.markerIcon--train{ width:19px; height:19px; background-size:19px 19px; }
.crowdMarkerGlyph.markerIcon--theatre{ width:22px; height:22px; background-size:22px 22px; background-position:center 58%; }
.crowdMarkerGlyph.markerIcon--tree{ width:22px; height:22px; background-size:22px 22px; }
.crowdMarkerGlyph.markerIcon--lake{ width:15px; height:15px; background-size:15px 15px; background-position:center center; transform:translate(-54%,-50%); }
.crowdMarkerGlyph.markerIcon--bakery{ width:19px; height:19px; background-size:19px 19px; }
.crowdMarkerGlyph.markerIcon--cemetery{ width:19px; height:19px; background-size:19px 19px; }
.crowdMarkerGlyph.markerIcon--gallery{ width:22px; height:22px; background-size:22px 22px; }
.crowdMarkerGlyph.markerIcon--music{ width:18px; height:18px; background-size:18px 18px; }
.crowdMarkerGlyph.markerIcon--arcade{ width:20px; height:20px; background-size:20px 20px; }
.crowdMarkerGlyph.markerIcon--restaurant{ width:22px; height:22px; background-size:22px 22px; }
.crowdMarkerGlyph.markerIcon--historic{ width:20px; height:20px; background-size:20px 20px; }
.crowdMarkerGlyph.markerIcon--plaza{ width:20px; height:20px; background-size:20px 20px; }
.crowdMarkerGlyph.markerIcon--synagogue{ width:21px; height:21px; background-size:19px 19px; transform:translate(-50%,-50%); }
.crowdMarkerGlyph.markerIcon--mosque{ width:21px; height:21px; background-size:21px 21px; }
.recBanner{ margin-top:8px; padding:8px; border-radius:8px; border:1px solid #dbeafe; background:#eef6ff; font-size:12px; display:none; }
.recBanner a{ color:#2563eb; text-decoration:none; font-weight:700; }
.recBanner a:hover{ text-decoration:underline; }
.repSection{ margin-top:8px; border-top:1px solid #eef2f6; padding-top:6px; }
.repToggleRow{ width:100%; display:flex; align-items:center; justify-content:space-between; border:none; background:transparent; padding:4px 0; cursor:pointer; font-size:12px; color:#374151; }
.repToggleRow .chev{ width:0; height:0; border-left:6px solid #6b7280; border-top:5px solid transparent; border-bottom:5px solid transparent; transform:rotate(90deg); margin-left:8px; }
.repSection.expanded .repToggleRow .chev{ transform:rotate(-90deg); }
.repSection .repBody{ display:none; font-size:12px; color:#1f2937; margin-top:6px; }
.repSection.expanded .repBody{ display:block; }

/* User-location dot on map (replaces former mascot avatar marker). */
.user-location-dot{
  width:18px; height:18px; border-radius:50%;
  background:#1d72ff; border:2px solid #ffffff;
  box-shadow:0 0 0 2px rgba(29,114,255,0.35), 0 1px 4px rgba(0,0,0,0.25);
  box-sizing:border-box;
}

.crowdMarkerWrapper{
  animation:markerAppear 0.15s ease-out;
}
@keyframes markerAppear{
  from{ opacity:0; transform:scale(0.6); }
  to{ opacity:1; transform:scale(1); }
}

/* =====================================================================
   Map category icons — final designs.
   Each SVG is rendered in white (%23ffffff) on a colored marker. Designs
   match the descriptions agreed with the user. Defined here at the bottom
   so they override any duplicate definitions earlier in the file.
   Restaurant is intentionally left untouched per user preference.
   ===================================================================== */

/* 1. mall — department store front: multi-floor building with awning over wide entrance. */
.markerIcon--mall{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5.5' width='17' height='14'/><path d='M3.5 9.5h17M3.5 13.5h17'/><rect x='9.5' y='14.5' width='5' height='5' fill='%23ffffff' stroke='none'/><path d='M8 12.5h8' stroke-width='2.6'/></svg>") !important; }

/* 3. default — generic map pin / location dot. */
.markerIcon--default{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21.5C8 17.5 5.5 13.6 5.5 10a6.5 6.5 0 1 1 13 0c0 3.6-2.5 7.5-6.5 11.5z'/><circle cx='12' cy='10' r='2.4' fill='%23ffffff' stroke='none'/></svg>") !important; }

/* 4. train — front-facing: rounded cab, two headlights, windshield. */
.markerIcon--train{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7c0-1.5 1.5-3 7-3s7 1.5 7 3v11h-14z'/><path d='M7.5 8.5h9c.7 0 1.2.5 1.2 1.2v3.6c0 .7-.5 1.2-1.2 1.2h-9c-.7 0-1.2-.5-1.2-1.2V9.7c0-.7.5-1.2 1.2-1.2z'/><circle cx='8.5' cy='17' r='1.1' fill='%23ffffff' stroke='none'/><circle cx='15.5' cy='17' r='1.1' fill='%23ffffff' stroke='none'/></svg>") !important; }

/* 5. handbag — curved top handle, clasp in centre. */
.markerIcon--handbag{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23ffffff'><path d='M6 9 L18 9 L17 20 L7 20 Z'/></g><g fill='none' stroke='%23ffffff' stroke-width='2.0' stroke-linecap='round'><path d='M9 9 V7.5 a3 3 0 0 1 6 0 V9'/></g></svg>") !important; }

/* 6. museum — classical building with triangular pediment + columns. */
.markerIcon--museum{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 9l8.5-4.5L20.5 9z'/><path d='M5 9v9M9 9v9M15 9v9M19 9v9'/><path d='M3.5 18.5h17'/></svg>") !important; }

/* 6b. graduation cap — for universities and colleges. */
.markerIcon--graduation{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' stroke='%23ffffff' stroke-width='1.4' stroke-linejoin='round'><polygon points='12,4 22,9 12,14 2,9'/><path d='M6 11.2 V15.5 C 6 17, 9 18, 12 18 C 15 18, 18 17, 18 15.5 V11.2' fill='none' stroke-width='2.0'/><path d='M21 9 V14' stroke-width='1.6'/><circle cx='21' cy='14.7' r='1' fill='%23ffffff'/></svg>") !important; }

/* 7. stadium — oval viewed from above with tiered seating ring. */
.markerIcon--stadium{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.0' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='12' cy='12' rx='9' ry='6'/><ellipse cx='12' cy='12' rx='6.5' ry='4'/><ellipse cx='12' cy='12' rx='4' ry='2.2' fill='%23ffffff' stroke='none'/></svg>") !important; }

/* 8. plaza — top-down tiled square with central obelisk/fountain. */
.markerIcon--plaza{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.0' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='1'/><path d='M4 9h16M4 15h16M9 4v16M15 4v16'/><circle cx='12' cy='12' r='1.6' fill='%23ffffff' stroke='none'/></svg>") !important; }

/* 9. music — beamed pair of eighth notes (quavers). */
.markerIcon--music{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M7 16.5a2.4 2.4 0 1 0 1.4 2.2v-9.4l8.2-2.3v6.7a2.4 2.4 0 1 0 1.4 2.2V4.5L8.4 7v9.5z'/></svg>") !important; }

/* 10. synagogue — Star of David. */
.markerIcon--synagogue{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linejoin='miter'><polygon points='12,3 20,17 4,17'/><polygon points='12,21 4,7 20,7'/></svg>") !important; }

/* 11. mosque — domed building with crescent moon on top of dome + minaret. */
.markerIcon--mosque{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23ffffff'><path d='M6 13a5 5 0 0 1 10 0v7H6z'/><rect x='5' y='20' width='12' height='1.5'/><rect x='17.5' y='9' width='2.2' height='12.5'/><rect x='10.7' y='4' width='0.6' height='2.5'/><circle cx='11' cy='3.5' r='1.1'/><path d='M11.7 3.5a1.1 1.1 0 1 1 0-2.1c-.3.25-.5.6-.5 1.05s.2.8.5 1.05z' fill='%23000'/></g></svg>") !important; }

/* 12. church — building with steeple and cross. */
.markerIcon--church{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.0' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v3M10.5 3.5h3'/><path d='M12 5l-5 4v11h10V9z'/><path d='M10.5 20v-4h3v4'/></svg>") !important; }

/* 13. library — stack of three books standing upright. */
.markerIcon--library{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><rect x='4.5' y='5' width='3.5' height='14'/><rect x='9' y='6' width='3.5' height='13'/><rect x='13.5' y='4.5' width='3.5' height='14.5'/><path d='M5.2 8.5h2.1M9.7 9.5h2.1M14.2 8h2.1'/></svg>") !important; }

/* 14. ferry — side-view boat with cabin and funnel on water. */
.markerIcon--ferry{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.0' stroke-linecap='round' stroke-linejoin='round'><path d='M3 16h18l-2 3H5z'/><path d='M5.5 12.5h13v3.5H5.5z'/><rect x='8' y='8.5' width='5' height='4'/><rect x='15' y='6' width='2' height='6.5'/><path d='M3 20.5c1.2-1 2.4-1 3.6 0s2.4 1 3.6 0 2.4-1 3.6 0 2.4 1 3.6 0 2.4-1 3.6 0'/></svg>") !important; }

/* 15. trail — winding dotted path between hills. */
.markerIcon--trail{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 18 C 6 14, 8 14, 10 12 S 14 6, 18 6'/><polyline points='14,4 18,6 16,10'/></svg>") !important; }

/* 16. theatre — comedy + tragedy masks. */
.markerIcon--theatre{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23ffffff'><path d='M3.5 5h7.5c-.2 5.6-2 9.4-5 11.5C3.6 14.4 3 11 3.5 5z'/><path d='M13 5h7.5c.5 6-1.6 9.4-3.5 11.5-3-2.1-4.8-5.9-4-11.5z'/><circle cx='5.5' cy='8.8' r='0.8' fill='%23000'/><circle cx='8.5' cy='8.8' r='0.8' fill='%23000'/><circle cx='15.5' cy='8.8' r='0.8' fill='%23000'/><circle cx='18.5' cy='8.8' r='0.8' fill='%23000'/></g></svg>") !important; }

/* 17. observation — tall tapered tower with viewing platform. */
.markerIcon--observation{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.0' stroke-linecap='round' stroke-linejoin='round'><path d='M11 3l1 1 1-1'/><path d='M12 4v16'/><ellipse cx='12' cy='9.5' rx='4.5' ry='1.5'/><path d='M9 20l3-12 3 12'/></svg>") !important; }

/* 18. bakery — round loaf with scored cross on top. */
.markerIcon--bakery{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.0' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8'/><path d='M6.5 9.5l11 5M17.5 9.5l-11 5'/></svg>") !important; }

/* 19. cemetery — upright headstone with cross. */
.markerIcon--cemetery{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.0' stroke-linecap='round' stroke-linejoin='round'><path d='M7 20V12a5 5 0 0 1 10 0v8z'/><path d='M3.5 20h17'/><path d='M12 8v6M9.5 11h5'/></svg>") !important; }

/* 20. arcade — retro joystick with round top. */
.markerIcon--arcade{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.0' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='6' r='2.8' fill='%23ffffff' stroke='none'/><path d='M12 9v8' stroke-width='2.6'/><ellipse cx='12' cy='18.5' rx='6' ry='2'/></svg>") !important; }

/* 21. store — market stall with awning and hanging price tag. */
.markerIcon--store{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.0' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l2-3h14l2 3z'/><path d='M3 9v2c0 1.1.9 2 2 2s2-.9 2-2v-2M7 9v2c0 1.1.9 2 2 2s2-.9 2-2v-2M11 9v2c0 1.1.9 2 2 2s2-.9 2-2v-2M15 9v2c0 1.1.9 2 2 2s2-.9 2-2v-2'/><path d='M5 13v7h14v-7'/><path d='M14.5 14l3 3M16 14h2v2' stroke-width='1.6'/></svg>") !important; }

/* 22. flower — five-petal flower with round centre. */
.markerIcon--flower{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23ffffff'><circle cx='12' cy='5.5' r='2.6'/><circle cx='18.2' cy='9.5' r='2.6'/><circle cx='15.8' cy='17' r='2.6'/><circle cx='8.2' cy='17' r='2.6'/><circle cx='5.8' cy='9.5' r='2.6'/></g><circle cx='12' cy='12' r='2.2' fill='%23000'/></svg>") !important; }

/* 23. lake — oval water with gentle wave line. */
.markerIcon--lake{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'><ellipse cx='12' cy='12' rx='9' ry='5'/><path d='M5 12c1.4-1 2.8-1 4.2 0s2.8 1 4.2 0 2.8-1 4.2 0' stroke='%23000' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>") !important; }

/* 24. tree — round canopy on short trunk. */
.markerIcon--tree{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23ffffff'><path d='M12 2.5 L16.2 8 H14.5 L18 13 H15.5 L19.5 18 H4.5 L8.5 13 H6 L9.5 8 H7.8 Z'/><rect x='10.7' y='17.5' width='2.6' height='4' rx='0.4'/></g><g stroke='%23ffffff' stroke-width='0.6' fill='none' stroke-linecap='round' opacity='0.4'><path d='M10 11 L11.5 12.5'/><path d='M14 14 L13 15'/><path d='M9 16 L10 17'/></g></svg>") !important; }

/* 25. beach — beach umbrella with striped canopy planted in ground. */
.markerIcon--beach{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23ffffff'><path d='M12 5a8 8 0 0 1 8 6H4a8 8 0 0 1 8-6z'/><rect x='11.4' y='10' width='1.2' height='9.5' rx='0.4'/><path d='M11 19.5l-1.5 1.5h5l-1.5-1.5z'/></g><g stroke='%23000' stroke-width='1.2' stroke-linecap='round' fill='none'><path d='M12 5v6M8 7v4M16 7v4'/></g></svg>") !important; }

/* 26. gallery — framed painting (rectangle within rectangle). */
.markerIcon--gallery{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.0' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4.5' width='17' height='15'/><rect x='6.5' y='7.5' width='11' height='9'/></svg>") !important; }

/* 27. historic — column on stepped base. */
.markerIcon--historic{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.0' stroke-linecap='round' stroke-linejoin='round'><path d='M9 7.5h6v-2H9z'/><path d='M10 7.5v9'/><path d='M14 7.5v9'/><path d='M9 16.5h6v2H9z'/><path d='M5.5 18.5h13v2h-13z'/></svg>") !important; }

/* 28. zoo — paw print: 4 toe pads + central pad. */
.markerIcon--zoo{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23ffffff'><ellipse cx='6.5' cy='9' rx='2.2' ry='2.6'/><ellipse cx='10.5' cy='6' rx='2.2' ry='2.6'/><ellipse cx='13.5' cy='6' rx='2.2' ry='2.6'/><ellipse cx='17.5' cy='9' rx='2.2' ry='2.6'/><ellipse cx='12' cy='16' rx='5.5' ry='4.5'/></g></svg>") !important; }

/* ---- Top-level category icons that needed dedicated designs ---- */

/* shopping (top-level "shopping & services") — classic woman's handbag:
   wide rounded body with a single ARCHED handle on top (clearly distinct
   from a suitcase, which would have a straight horizontal handle), and a
   small clasp dot in the centre. */
.markerIcon--shopping{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5.5 10 C 5.8 16, 7 20, 12 20 C 17 20, 18.2 16, 18.5 10 Z'/><path d='M8 10 C 8 6, 10 4.5, 12 4.5 C 14 4.5, 16 6, 16 10' stroke-width='2.0' fill='none'/></svg>") !important; }

/* hotel — side-view bed: headboard on left, single pillow, mattress, two legs. */
.markerIcon--hotel{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23ffffff'><rect x='2.5' y='5' width='3' height='13.5' rx='1.2'/><rect x='5.5' y='12' width='16' height='5' rx='1'/><rect x='7' y='9' width='6' height='3' rx='1.2'/><rect x='7' y='17' width='1.8' height='3' rx='0.7'/><rect x='18' y='17' width='1.8' height='3' rx='0.7'/></g></svg>") !important; }

/* barbershop — symmetric open scissors. Two equal finger loops on the
   left, blades cross at the centre and end as identical-length points on
   the right. Both halves mirror each other across the horizontal axis. */
.markerIcon--barbershop{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.0' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='6' r='2.5'/><circle cx='5' cy='18' r='2.5'/><path d='M7.2 7.5L20 17.5'/><path d='M7.2 16.5L20 6.5'/><circle cx='12' cy='12' r='0.9' fill='%23ffffff' stroke='none'/></svg>") !important; }

/* people — tourism & attractions: three clearly-separate human silhouettes
   with their own heads and torsos. No overlap so they don't look merged. */
.markerIcon--people{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23ffffff'><circle cx='5' cy='7' r='1.7'/><path d='M2.5 19v-4.2a2.5 2.5 0 0 1 5 0V19z'/><circle cx='12' cy='5.6' r='2.0'/><path d='M9 19v-5.2a3 3 0 0 1 6 0V19z'/><circle cx='19' cy='7' r='1.7'/><path d='M16.5 19v-4.2a2.5 2.5 0 0 1 5 0V19z'/></g></svg>") !important; }

/* cocktail — nightlife & entertainment: martini glass with garnish. */
.markerIcon--cocktail{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.0' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 4h17l-8.5 9z'/><path d='M12 13v7'/><path d='M8 20h8'/><circle cx='17.5' cy='5.5' r='1.2' fill='%23ffffff' stroke='none'/></svg>") !important; }

/* Auth panel inputs override:
   The legacy `#loginPanel input { ... :focus { box-shadow: 0 0 0 2px blue }`
   rules a few hundred lines below paint a thick blue ring around any
   focused input in the auth card. We replace it with a subtle border
   colour change for our flat, transparent inputs that live inside a
   wrapper div. */
.crowdzAuthInput,
.crowdzAuthInputWrap input {
  outline: none !important;
  box-shadow: none !important;
  background: #fff !important;
  height: auto !important;
}
.crowdzAuthInput:focus,
.crowdzAuthInputWrap input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: #ddd !important;
}
.crowdzAuthInputWrap:focus-within {
  border-color: #94a3b8 !important;
  box-shadow: 0 0 0 1px rgba(15,23,42,0.08) !important;
}
.crowdzAuthInput:focus {
  border-color: #94a3b8 !important;
}

/* Chrome / Safari kill the yellow autofill background + inner shadow on
   the password / email inputs in the auth panel. Without this reset,
   Chrome paints a thick yellow rectangle inside our wrapper that looks
   like a "box within a box". */
input[name="login_email"]:-webkit-autofill,
input[name="login_password"]:-webkit-autofill,
input[name="email"]:-webkit-autofill,
input[name="password"]:-webkit-autofill,
#loginPasswordInput:-webkit-autofill,
#signupPasswordInput:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a;
  transition: background-color 9999s ease-in-out 0s;
}
/* bench — public & community: park bench (slats + legs). */
.markerIcon--bench{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.0' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11h18'/><path d='M3 14h18'/><path d='M5 11l-1.5 8'/><path d='M19 11l1.5 8'/><path d='M8 14v5'/><path d='M16 14v5'/></svg>") !important; }

/* stadium — redesigned: ground-up perspective with stand + field stripes,
   not concentric ovals. */
.markerIcon--stadium{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.0' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9c0-1 4-2 9-2s9 1 9 2v8c0 1-4 2-9 2s-9-1-9-2z'/><path d='M3 9c0 1 4 2 9 2s9-1 9-2'/><path d='M12 11v8'/><path d='M7 9.5l-1 8M17 9.5l1 8'/></svg>") !important; }