/* =========================================================
   BASE / LAYOUT
========================================================= */

body {
  margin: 0;
  background: #f2f2f2;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

main.browse {
  max-width: 420px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
  position: relative;
}

/* =========================================================
   SEARCH BAR (TOP)
========================================================= */

.searchWrap {
  padding: 16px;
  background: #e6e6e6;
}

.searchBarBtn {
  width: 100%;
  display: flex;
  align-items: stretch;
  border: 1px solid #808080;
  border-radius: 8px;
  background: #fff;
  padding: 0;
  cursor: pointer;
}

.searchLeft {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  color: #808080;
}

.searchPlaceholder {
  font-size: 14px;
}

.searchRight {
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 1px solid #808080;
  padding: 0 12px;
  background: #f3f3f3;
}

.placeSelect {
  border: 0;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
}

/* =========================================================
   CATEGORY ROW
========================================================= */

.categoryRow {
  display: flex;
  justify-content: space-around;
  padding: 16px;
  border-bottom: 1px solid #ddd;
}

.catTile {
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  color: #808080;
}

.catTile.active {
  color: #000;
  font-weight: 600;
}

.catIcon {
  width: 36px;
  height: 36px;
  background: #cfcfcf;
  border-radius: 50%;
  margin: 0 auto 6px;
}

/* =========================================================
   PLACEHOLDER RESULTS
========================================================= */

.resultsPad {
  padding: 20px;
  color: #808080;
  font-size: 14px;
}

.emptyMsg {
  margin-top: 6px;
}

/* =========================================================
   MAP PILL
========================================================= */

.mapPill {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 600;
  cursor: pointer;
  z-index: 900;
}

/* =========================================================
   BROWSE SEARCH SHEET (BOTTOM SHEET)
========================================================= */

#sheetBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 999;
}

#searchSheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  transform: translate(-50%, 110%);
  transition: transform 220ms ease;
  z-index: 1000;
}

#searchSheet.open {
  transform: translate(-50%, 0);
}

.sheetTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.sheetHandle {
  width: 36px;
  height: 4px;
  background: #ccc;
  border-radius: 4px;
  margin: 0 auto;
}

.sheetClose {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
}

.sheetBody {
  padding: 16px;
}

/* =========================================================
   SHEET FORM ELEMENTS
========================================================= */

.sheetH {
  font-size: 14px;
  font-weight: 600;
  margin: 16px 0 8px;
}

.tile2,
.tile3 {
  display: flex;
  gap: 12px;
}

.pickTile {
  flex: 1;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #808080;
  background: #fff;
  cursor: pointer;
  text-align: center;
}

.pickTile.active {
  outline: 3px solid #000;
  outline-offset: -3px;
}

.fieldLabel {
  display: block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
}

.fieldInput {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #808080;
  margin-top: 6px;
}

.fieldRow {
  position: relative;
}

.fieldIcon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

/* =========================================================
   SEARCH CTA
========================================================= */

.sheetFooter {
  margin-top: 20px;
}

.searchCta {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: #000;
  color: #fff;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* =========================================================
   RESULTS VIEW (LIST + FILTER SHEET)
   — SCOPED to avoid collisions
========================================================= */

#viewResults {
  background: #fff;
}

#viewResults .overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 50;
}

#viewResults .overlay.open {
  opacity: 1;
  pointer-events: auto;
}

#viewResults .sheet {
  position: fixed;
  left: 50%;
  bottom: -100%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  transition: bottom .25s ease;
  z-index: 60;
}

#viewResults .sheet.open {
  bottom: 0;
}

#viewResults .chip.isHidden {
  display: none;
}

/* ==============================
   PATCH: Sheet top mini search row
============================== */

#searchSheet .sheetSearchMini{
  display:flex;
  align-items:stretch;
  width:100%;
  border:1px solid #808080;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  margin-bottom:14px;
}

#searchSheet .miniLeft{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  min-width:0;
}

#searchSheet .miniLeft svg{
  flex:0 0 auto;
}

#searchSheet .miniInput{
  width:100%;
  border:0;
  outline:none;
  font-size:14px;
  background:transparent;
  min-width:0;
}

#searchSheet .miniRight{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border-left:1px solid #808080;
  background:#F3F3F3;
  position:relative;
}

#searchSheet .miniRight .placeSelect{
  appearance:none;
  border:0;
  background:transparent;
  padding:0 24px 0 0;
  font-size:14px;
  cursor:pointer;
}

#searchSheet .miniRight .chev{
  width:18px;
  height:18px;
}

/* ==============================
   PATCH: Prevent zip/date/time overflow
============================== */

/* Make all inputs include padding/border in width calc */
#searchSheet input,
#searchSheet select,
#searchSheet .fieldInput{
  box-sizing: border-box;
}

/* Ensure the wrapper doesn't exceed the sheet width */
#searchSheet .fieldLabel{
  width: 100%;
}

#searchSheet .fieldRow{
  width: 100%;
  box-sizing: border-box;
  overflow: hidden; /* stops any stray icon bleed */
}

/* Reserve space on the right for the icon so input doesn't run under it */
#searchSheet .fieldRow .fieldInput{
  width: 100%;
  padding-right: 44px; /* room for the icon */
}

/* Keep icon inside the row and not outside the border */
#searchSheet .fieldRow .fieldIcon{
  right: 12px;
  pointer-events: none;
}


/* =========================
   MAP VIEW – final polish fixes
   ========================= */

/* 1) Hide the site nav hamburger while in Map View */
#viewMap ~ .guestNav,
#viewMap .guestNav,
#viewMap .navToggle,
#viewMap .hamburger,
#viewMap .menuBtn,
#viewMap [aria-label="Open menu"],
#viewMap .guestNavToggle {
  display: none !important;
}

/* If your nav is outside #viewMap (most likely), hide by body class hook.
   We'll toggle this class from JS (see tiny JS snippet below). */
body.bk-map-open .navToggle,
body.bk-map-open .hamburger,
body.bk-map-open .menuBtn,
body.bk-map-open [aria-label="Open menu"],
body.bk-map-open .guestNavToggle {
  display: none !important;
}

/* 2) Make the map dropdown look like Figma (no ugly native border box) */
#viewMap #mapPlaceMode{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  font: 400 14px Inter, system-ui;
  color: #000;
  padding: 0 22px 0 0; /* room for chevron */
  cursor: pointer;
}

#viewMap .FormFieldsTextInputTrailingButton{
  border-left: 1px solid #808080 !important;
  outline: 0 !important;
}

/* 3) Align Filter & Sort pill to sit on the Category strip row */
#viewMap #mapFilterBtn{
  top: 252px !important;   /* adjust slightly for your current offsets */
  left: 240px !important;  /* matches Figma-ish placement */
  height: 32px !important;
  line-height: 32px !important;
  padding: 0 14px !important;
}

/* Optional: make the pill match your list-view pill style */
#viewMap #mapFilterBtn{
  border: 1px solid #D0D0D0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* 4) Hide Leaflet attribution + bottom-right Leaflet controls inside the map */
#viewMap .leaflet-control-attribution{
  display:none !important;
}

/* Also hide the little Leaflet link/control cluster if it shows */
#viewMap .leaflet-control-container .leaflet-bottom.leaflet-right{
  display:none !important;
}
/* =========================================
   MAP VIEW — bridge patch (match HTML classes)
   ========================================= */

#viewMap .mapWrap{
  position:relative;
  width:100%;
  max-width:420px;
  margin:0 auto;
  min-height:100vh;
  overflow:hidden;
  background:#fff;
}

/* header row (your HTML uses .mapHeader) */
#viewMap .mapHeader{
  background:#f6f6f6;
  padding:12px 16px 10px;
  border-bottom:1px solid #e9e9e9;
}

/* make the search box inside map look right */
#viewMap .mapSearchBox{
  display:flex;
  width:100%;
  border:1px solid #808080;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}

#viewMap .mapSearchBox .searchLead{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 12px;
  min-width:0;
}

#viewMap .mapSearchBox .searchInput{
  width:100%;
  border:0;
  outline:none;
  font-size:14px;
  background:transparent;
}

#viewMap .mapSearchBox .locSelectWrap{
  position:relative;
  display:flex;
  align-items:center;
  background:#f3f3f3;
  border-left:1px solid #808080;
}

#viewMap .mapSearchBox .locSelect{
  appearance:none;
  border:0;
  background:transparent;
  padding:12px 38px 12px 12px;
  font-size:14px;
  cursor:pointer;
}

#viewMap .mapSearchBox .locSelectWrap svg{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
}

/* categories row (your HTML uses categoryRow + catTile here) */
#viewMap .mapCategories{
  padding:10px 16px 8px;
  border-bottom:1px solid #e9e9e9;
  background:#fff;
}

/* tool row */
#viewMap .mapToolRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 16px;
  background:#fff;
  border-bottom:1px solid #eee;
}

/* map stage */
#viewMap .mapStage{
  position:relative;
  width:100%;
  height: calc(100vh - 56px - 74px - 52px); /* header + categories + tools approx */
  min-height:460px;
  background:#d9d9d9;
}

/* make the actual map fill the stage */
#viewMap #bkMap,
#viewMap .bkMap{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* recenter button (already classed in HTML) */
#viewMap .mapRecenterBtn{
  position:absolute;
  right:16px;
  bottom:98px;
  width:44px;
  height:44px;
  border:0;
  background:#fff;
  border-radius:10px;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
  cursor:pointer;
  z-index:500;
}

/* bottom bar */
#viewMap .mapBottomBar{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:74px;
  background:#fff;
  border:0;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  box-shadow:0 -2px 18px rgba(0,0,0,.08);
  cursor:pointer;
  z-index:600;
}
/* =========================================================
   MAP VIEW — authoritative layout override (wins over older blocks)
   ========================================================= */

body.bk-map-open main.browse{
  /* make map feel full-screen inside the mobile shell */
  background:#fff;
}

body.bk-map-open #viewMap{
  display:block;
}


/* Wrapper */
#viewMap .mapWrap{
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  min-height: 100vh;
  background: #fff;
  overflow: hidden;
}

/* Header / search row */
#viewMap .mapHeader{
  background: #f6f6f6;
  padding: 12px 16px 10px;
  border-bottom: 1px solid #e9e9e9;
}

#viewMap .mapSearchBox{
  display:flex;
  align-items:stretch;
  width:100%;
  border:1px solid #808080;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}

#viewMap .mapSearchBox .searchLead{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px;
  min-width:0;
}

#viewMap .mapSearchBox .searchInput{
  width:100%;
  border:0;
  outline:none;
  background:transparent;
  font-size:14px;
}

#viewMap .mapSearchBox .locSelectWrap{
  position:relative;
  display:flex;
  align-items:center;
  background:#f3f3f3;
  border-left:1px solid #808080;
  white-space:nowrap;
}

#viewMap .mapSearchBox .locSelect{
  appearance:none;
  border:0;
  outline:0;
  background:transparent;
  padding:12px 38px 12px 12px;
  font-size:14px;
  cursor:pointer;
}

#viewMap .mapSearchBox .locSelectWrap svg{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
}

/* Categories — override the generic .categoryRow layout */
#viewMap .mapCategories{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 16px 8px;
  background:#fff;
  border-bottom:1px solid #e9e9e9;
}

/* Override the browse .catTile styles inside map only */
#viewMap .mapCategories .catTile{
  flex:1;
  border:0;
  background:transparent;
  padding:0 0 8px;
  cursor:pointer;
  color:#808080;
  text-align:center;
}

#viewMap .mapCategories .catIcon{
  width:44px;
  height:44px;
  border-radius:14px;
  background:#ddd;
  margin:0 auto 6px;
  position:relative;
}

#viewMap .mapCategories .catIcon::after{
  content:"";
  width:22px;
  height:22px;
  border-radius:999px;
  background:#a0a0a0;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

#viewMap .mapCategories .catLabel{
  font-size:12px;
  line-height:16px;
}

#viewMap .mapCategories .catTile.active{
  color:#000;
  font-weight:600;
  border-bottom:2px solid #000;
}

/* Tool row (hamburger + Filter & Sort) */
#viewMap .mapToolRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 16px;
  background:#fff;
  border-bottom:1px solid #eee;
}

#viewMap .mapCircleBtn{
  width:40px;
  height:40px;
  border-radius:10px;
  border:1px solid #808080;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

#viewMap #mapFilterBtn.pillBtn{
  margin-left:auto;
  border:1px solid #D0D0D0;
  border-radius:999px;
  background:#fff;
  height:40px;
  padding:0 14px;
  font-weight:600;
  cursor:pointer;
}

/* Map stage + map canvas */
#viewMap .mapStage{
  position:relative;
  width:100%;
  /* header + categories + tools + bottom bar ≈ 12+? keep it stable */
  height: calc(100vh - 62px - 78px - 62px - 74px);
  min-height: 460px;
  background:#d9d9d9;
}

#viewMap #bkMap,
#viewMap .bkMap{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* Recenter button */
#viewMap .mapRecenterBtn{
  position:absolute;
  right:16px;
  bottom:92px;
  width:44px;
  height:44px;
  border:0;
  background:#fff;
  border-radius:10px;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
  cursor:pointer;
  z-index:500;
}

/* Bottom bar */
#viewMap .mapBottomBar{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:74px;
  background:#fff;
  border:0;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  box-shadow:0 -2px 18px rgba(0,0,0,.08);
  cursor:pointer;
  z-index:600;
}

/* Leaflet tweaks */
#viewMap .leaflet-control-attribution{ display:none !important; }
#viewMap .leaflet-top.leaflet-left{ top:10px; left:10px; }

/* =========================================================
   MAP VIEW — single source of truth (matches HTML)
   ========================================================= */

#viewMap{
  background:#fff;
}

#viewMap .mapWrap{
  position:relative;
  width:100%;
  max-width:420px;
  margin:0 auto;
  min-height:100vh;
  overflow:hidden;
  background:#fff;
}

/* Header */
#viewMap .mapHeader{
  padding:12px 16px 10px;
  background:#f6f6f6;
  border-bottom:1px solid #e9e9e9;
}

/* Search */
#viewMap .mapSearchBox{
  display:flex;
  width:100%;
  border:1px solid #808080;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
}

#viewMap .searchLead{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px;
}

#viewMap .searchInput{
  width:100%;
  border:0;
  outline:none;
  font-size:14px;
  background:transparent;
}

#viewMap .locSelectWrap{
  display:flex;
  align-items:center;
  background:#f3f3f3;
  border-left:1px solid #808080;
  padding:0 12px;
}

/* Categories */
#viewMap .mapCategories{
  display:flex;
  justify-content:space-around;
  padding:12px 16px 8px;
  background:#fff;
  border-bottom:1px solid #e9e9e9;
}

/* Tool row */
#viewMap .mapToolRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  border-bottom:1px solid #eee;
  background:#fff;
}

/* Map slot (Figma placeholder becomes real map) */
#viewMap .mapStage{
  position:relative;
  width:100%;
  height: calc(100vh - 64px - 72px - 56px - 74px);
  background:#d9d9d9;
}

#viewMap #bkMap{
  position:absolute;
  inset:0;
}

/* Bottom bar */
#viewMap .mapBottomBar{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:74px;
  background:#fff;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  box-shadow:0 -2px 18px rgba(0,0,0,.08);
}
/* Map categories should NOT use the Browse categoryRow styling */
#viewMap .mapCategories{
  display:flex;
  justify-content:space-around;
  padding:14px 16px 6px;
  background:#fff;
  border-bottom:1px solid #e6e6e6;
}

#viewMap .mapCategories .catIcon{
  width:44px;
  height:44px;
  border-radius:14px;   /* rounded square like Figma */
  background:#d9d9d9;
  margin:0 auto 6px;
  position:relative;
}

#viewMap .mapCategories .catIcon::after{
  content:"";
  width:22px;
  height:22px;
  border-radius:999px;
  background:#a6a6a6;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

/* Short centered underline (not full width) */
#viewMap .mapCategories .catTile{
  position:relative;
  padding-bottom:10px;
}

#viewMap .mapCategories .catTile.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:86px;
  height:2px;
  background:#000;
  transform:translateX(-50%);
  border-radius:99px;
}


/* --- Map view cleanup --- */
#viewMap .mapToolRow {
  display: none !important;
}

/* Reclaim vertical space when map tools are hidden */
#viewMap .mapWrapper,
#viewMap #map {
  height: calc(100vh - 120px);
}

/* --- Service category active underline fix --- */
.serviceTile {
  position: relative;
  text-align: center;
}

.serviceTile.active::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 4px;
  background: #22c55e;
  border-radius: 2px;
}


/* Prevent double underline in Map categories (use ::after underline only) */
#viewMap .mapCategories .catTile.active{
  border-bottom: none !important;
}


/* --- Map view: KEEP the top nav hamburger visible (override legacy hide rules) --- */
body.bk-map-open .navToggle,
body.bk-map-open .hamburger,
body.bk-map-open .menuBtn,
body.bk-map-open [aria-label="Open menu"],
body.bk-map-open .guestNavToggle{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* In case the nav container gets clipped/overlapped */
body.bk-map-open .guestNav,
body.bk-map-open header.guestNav,
body.bk-map-open .guest-nav,
body.bk-map-open .topNav{
  position: relative;
  z-index: 2000;
}


/* --- Fix: slideout/menu must sit ABOVE Leaflet map (map uses high internal z-index panes) --- */
body.menu-open .menuOverlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;       /* scrim layer */
  background: rgba(0,0,0,.3) !important;
}

body.menu-open .navDrawer,
body.menu-open .navMenu,
body.menu-open .mobileMenu{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9100 !important;       /* panel above scrim */
  height: 100vh !important;
  overflow-y: auto !important;
  background: #fff !important;
}

/* If your menu is a <nav> element toggled open, this ensures it wins the stacking fight */
body.menu-open nav{
  position: relative;
  z-index: 9100;
}

/* Ensure Leaflet never overlays the menu/scrim */
body.menu-open #viewMap,
body.menu-open #map,
body.menu-open .leaflet-container{
  z-index: 1 !important;
}


/* --- Leaflet stacking: make map the lowest interactive layer --- */
#bkMap,
#viewMap,
#map,
.leaflet-container{
  z-index: 0 !important;
}

/* --- Guest nav drawer/overlay: force above map (nav.js injected markup) --- */
.guestNav,
.guest-nav,
.guestNavDrawer,
.guestNavMenu,
.guestNavOverlay,
.navDrawer,
.navMenu,
.navOverlay,
.mobileMenu,
.mobileNav,
.sideNav,
.sidebar,
#guestNav,
#guestNavDrawer,
#guestNavMenu,
#guestNavOverlay{
  position: fixed !important;
  z-index: 99999 !important;
}

/* If the drawer uses an ".open" or ".active" class, ensure it stays fixed/full-height */
.guestNav.open,
.guestNavMenu.open,
.guestNavDrawer.open,
.navDrawer.open,
.navMenu.open,
.mobileMenu.open,
.mobileNav.open,
.sideNav.open,
.sidebar.open,
.guestNav.active,
.guestNavMenu.active,
.guestNavDrawer.active,
.navDrawer.active,
.navMenu.active,
.mobileMenu.active,
.mobileNav.active,
.sideNav.active,
.sidebar.active{
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  background: #fff !important;
}


/* --- Typeahead dropdown styling --- */
.typeahead{
  position: absolute;
  left: 16px;
  right: 16px;
  top: 150px; /* below search bar in sheet */
  background: #fff;
  border: 1px solid #E6E6E6;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  padding: 10px 12px;
  z-index: 100000; /* above everything incl map */
}
.taGroup{ margin-bottom: 10px; }
.taGroup:last-child{ margin-bottom: 0; }
.taTitle{
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  margin: 6px 0 6px;
}
.taItem{
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 8px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}
.taItem:active{ transform: translateY(1px); }
.taItem:hover{ background: #F3F4F6; }
.taEmpty{
  font-size: 13px;
  color: #9CA3AF;
  padding: 8px 8px;
}

/* === Figma vendor row card styles (appended) === */
.vendorRow{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:0 20px 8px 20px;
  border-bottom:1px solid #808080;
  background:#fff;
}

.vendorMain{
  display:flex;
  gap:12px;
  padding-bottom:10px;
  max-width:calc(100% - 36px);
}

.vendorImg{
  width:50px;
  height:50px;
  border-radius:1000px;
  background:#808080;
  flex:0 0 50px;
  position:relative;
  overflow:hidden;
}

.vendorImgIcon{
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0.9;
}

.vendorInfo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  min-width:0;
}

.vendorName{
  color:#15104D;
  font-size:16px;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:600;
  line-height:23px;
  letter-spacing:0.15px;
  word-break:break-word;
}

.vendorLoc{
  color:#15104D;
  font-size:12px;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  line-height:19px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:240px;
}

.vendorRatingRow{
  display:flex;
  align-items:center;
  gap:6px;
}

.vendorStar{
  font-size:14px;
  line-height:1;
  transform:translateY(-1px);
}

.vendorReviews{
  color:#15104D;
  font-size:12px;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  line-height:19px;
}

.vendorServices{
  color:#15104D;
  font-size:12px;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  line-height:19px;
  max-width:260px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.vendorOpen{
  color:#15104D;
  font-size:12px;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  line-height:19px;
}

.vendorMsgBtn{
  background:transparent;
  border:0;
  padding:6px 0 0 0;
  cursor:pointer;
  flex:0 0 auto;
}

.vendorMsgBtn svg{ display:block; }


/* Hide Browse preview header (count + "See all") */
#viewBrowse .browsePreviewHead,
#viewBrowse #browseCountText,
#viewBrowse #browseSeeAllBtn {
  display: none !important;
}

.bkMarker .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;        /* white dot */
  border: 2px solid #000; /* Barkaly black */
}