html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#map-embed-root {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#map-embed-map {
  width: 100%;
  height: 100%;
}

.map-embed-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(380px, 100%);
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.2s ease-out;
  overflow-y: auto;
  z-index: 1000;
}

.map-embed-panel.map-embed-panel-open {
  transform: translateX(0);
}

/* On phones the edge-anchored full-height drawer (above) reads fine, but
   the same narrow strip looks cramped on a desktop-sized viewport - give
   it room to be a proper inset "pop out" card there instead. */
@media (min-width: 768px) {
  .map-embed-panel {
    top: 24px;
    right: 24px;
    bottom: 24px;
    height: auto;
    width: min(480px, 42%);
    border-radius: 16px;
    /* Closed: slide past the 24px inset and the shadow, or a strip of the
       card stays visible at the right edge. */
    transform: translateX(calc(100% + 48px));
  }
}

.map-embed-panel-close {
  /* display:flex (not float) makes this a block-level box we can
     right-align with margin-left:auto, and keeps it a well-defined
     positioned box under position:sticky - mixing float with sticky on
     the same element is an unsupported combination that caused visible
     scroll-height instability (panel.scrollHeight changed just from
     scrolling down and back up), which read as a phantom scroll loop. */
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 12px 0 auto;
  padding: 8px 14px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  color: #333;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.map-embed-panel-close:hover,
.map-embed-panel-close:focus-visible {
  background: #f2f2f2;
  color: #111;
}

.map-embed-panel-close svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Same pill treatment as the panel's close button, so the floating
   controls read as one design language. Sits below the panel's z-index
   so an open POI/itinerary panel covers it rather than fighting for space. */
.map-embed-toolbar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 500;
  display: flex;
  gap: 8px;
}

.map-embed-search-toggle,
.map-embed-filter-toggle,
.map-embed-itinerary-toggle,
.map-embed-list-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  color: #333;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.map-embed-search-toggle:hover,
.map-embed-search-toggle:focus-visible,
.map-embed-filter-toggle:hover,
.map-embed-filter-toggle:focus-visible,
.map-embed-itinerary-toggle:hover,
.map-embed-itinerary-toggle:focus-visible,
.map-embed-list-toggle:hover,
.map-embed-list-toggle:focus-visible {
  background: #f2f2f2;
}

.map-embed-search-toggle svg,
.map-embed-filter-toggle svg,
.map-embed-itinerary-toggle svg,
.map-embed-list-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.map-embed-filter-panel,
.map-embed-search-panel {
  position: absolute;
  top: 56px;
  right: 12px;
  z-index: 500;
  width: min(280px, calc(100% - 24px));
  max-height: min(60vh, 420px);
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  padding: 12px;
}

.map-embed-filter-panel[hidden],
.map-embed-search-panel[hidden] {
  display: none;
}

.map-embed-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-embed-search-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
}

.map-embed-search-input:focus {
  border-color: #1b5e52;
}

.map-embed-search-close {
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: #888;
  cursor: pointer;
}

.map-embed-search-close:hover {
  color: #333;
}

.map-embed-search-results {
  margin-top: 8px;
}

.map-embed-search-status {
  padding: 8px 2px;
  font-size: 13px;
  color: #666;
}

.map-embed-search-group-label {
  margin: 10px 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #999;
}

.map-embed-search-group:first-child .map-embed-search-group-label {
  margin-top: 2px;
}

.map-embed-search-result {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 2px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  border-radius: 6px;
}

.map-embed-search-result:hover,
.map-embed-search-result:focus-visible {
  background: #f2f2f2;
}

.map-embed-filter-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.map-embed-filter-actions button {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: #1b5e52;
  cursor: pointer;
}

.map-embed-filter-actions .map-embed-filter-close {
  margin-left: auto;
  padding-left: 12px;
  font-size: 18px;
  line-height: 1;
  color: #888;
}

.map-embed-filter-actions .map-embed-filter-close:hover {
  color: #333;
}

.map-embed-filter-category {
  margin-bottom: 10px;
}

.map-embed-filter-category:last-child {
  margin-bottom: 0;
}

.map-embed-filter-category-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  color: #222;
  cursor: pointer;
  margin-bottom: 4px;
}

.map-embed-filter-subcategory-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #444;
  margin: 4px 0 4px 24px;
  cursor: pointer;
}

.map-embed-filter-uncategorized-label {
  margin-left: 0;
}

.map-embed-filter-category-label input,
.map-embed-filter-subcategory-label input {
  margin: 0;
  cursor: pointer;
}

/* Leaflet's default divIcon adds its own white box + border; the pin
   shape below replaces that entirely, so strip Leaflet's own styling. */
.leaflet-div-icon.map-embed-pin-icon {
  background: transparent;
  border: none;
}

.map-embed-pin-wrap {
  position: relative;
  width: 28px;
  height: 28px;
}

.map-embed-pin-shape {
  width: 28px;
  height: 28px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  border: 2px solid #fff;
}

.map-embed-pin-glyph {
  transform: rotate(45deg);
}

/* Itinerary stop number - a sibling of .map-embed-pin-shape (not a child),
   so it stays upright instead of inheriting that element's -45deg pin
   rotation. */
.map-embed-pin-number {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 50%;
  background: #1f2937;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.map-embed-panel-body {
  padding: 16px;
}

/* Owner-uploaded business photos: never wider than the panel, whatever the
   card's own CSS says (a card may style one photo and not the other). */
.map-embed-panel-body img.map-embed-deal-photo,
.map-embed-panel-body img.map-embed-business-photo {
  display: block;
  max-width: 100%;
  height: auto;
}

.map-embed-panel-body img.map-embed-deal-photo {
  margin-bottom: 6px;
  border-radius: 4px;
}

.map-embed-poi-address {
  margin: 4px 0 12px;
  color: #666;
  font-size: 13px;
}

.map-embed-poi-address:empty {
  display: none;
}

.map-embed-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-size: 16px;
  color: #555;
  text-align: center;
  padding: 24px;
}

.map-embed-directions-link {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 6px;
  background: #1b5e52;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.map-embed-itinerary-toggle-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: #1b5e52;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.map-embed-itinerary-toggle-btn-remove {
  background: #b3261e;
}

.map-embed-poi-share-btn {
  margin-top: 8px;
  background: #fff;
  color: #1b5e52;
  box-shadow: inset 0 0 0 1px #1b5e52;
}

.map-embed-itinerary-count {
  margin: 4px 0 12px;
  color: #666;
  font-size: 13px;
}

.map-embed-itinerary-status {
  margin: 0 0 12px;
  font-size: 13px;
  color: #666;
}

.map-embed-itinerary-status-error {
  color: #b3261e;
}

.map-embed-itinerary-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.map-embed-itinerary-stat {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fafafa;
}

.map-embed-itinerary-stat-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888;
}

.map-embed-itinerary-stat-value {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 700;
  color: #222;
}

.map-embed-itinerary-empty {
  padding: 20px 12px;
  text-align: center;
  color: #888;
  font-size: 13px;
  border: 1px dashed #ddd;
  border-radius: 10px;
}

.map-embed-itinerary-stop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.map-embed-itinerary-stop-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1b5e52;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.map-embed-itinerary-stop-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-embed-itinerary-stop-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.map-embed-itinerary-stop-actions button {
  width: 26px;
  height: 26px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.map-embed-itinerary-stop-actions button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.map-embed-itinerary-share {
  margin-top: 16px;
}

.map-embed-itinerary-share textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  resize: none;
}

.map-embed-itinerary-share-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: #1b5e52;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.map-embed-itinerary-share-link {
  margin-top: 10px;
}

.map-embed-itinerary-share-link p {
  margin: 0 0 4px;
  font-size: 12px;
  color: #666;
}

.map-embed-itinerary-share-link input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 12px;
  background: #fafafa;
}

.map-embed-list-overlay {
  position: absolute;
  inset: 0;
  z-index: 900;
  background: #fff;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
}

.map-embed-list-overlay[hidden] {
  display: none;
}

.map-embed-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.map-embed-list-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.map-embed-list-close {
  border: none;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: #1b5e52;
  cursor: pointer;
}

.map-embed-list-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  margin-bottom: 12px;
}

.map-embed-list-search input:focus {
  border-color: #1b5e52;
}

.map-embed-list-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #666;
}

.map-embed-list-sort {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 2px;
  background: #fff;
}

.map-embed-list-sort-btn {
  border: none;
  background: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
}

.map-embed-list-sort-btn.map-embed-list-sort-active {
  background: #e5e7eb;
  color: #111;
}

.map-embed-list-empty {
  border: 1px dashed #d1d5db;
  border-radius: 10px;
  background: #f9fafb;
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: #666;
}

.map-embed-list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
}

.map-embed-list-item:hover,
.map-embed-list-item:focus-visible {
  background: #f9fafb;
}

.map-embed-list-item-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #111;
  margin-bottom: 6px;
}

.map-embed-list-item-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.map-embed-list-chip {
  display: inline-block;
  border-radius: 4px;
  background: #f3f4f6;
  color: #444;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
}

.map-embed-list-chip-overflow {
  background: none;
  border: 1px solid #e5e7eb;
  color: #888;
}

.map-embed-route-swatch {
  display: inline-block; width: 14px; height: 4px; border-radius: 2px;
  margin-right: 6px; vertical-align: middle;
}
.map-embed-route-stop-icon { background: none; border: none; }
.map-embed-route-stop {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff;
  color: #fff; font: 700 12px/20px system-ui, sans-serif; text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.map-embed-reach { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e5e7eb; }
.map-embed-reach-title { font-weight: 600; margin: 0 0 6px; }
.map-embed-reach-bands { display: flex; gap: 6px; }
.map-embed-reach-band {
  border: 1px solid #0f766e; background: #fff; color: #0f766e;
  border-radius: 999px; padding: 4px 10px; cursor: pointer;
}
.map-embed-reach-band.is-default { font-weight: 700; }
.map-embed-reach-band.is-active { background: #0f766e; color: #fff; }
.map-embed-reach-filtered { margin: 2px 0 0; color: #666; font-size: 13px; }
.map-embed-reach-filter-btn {
  margin: 6px 0 0; padding: 4px 12px; border: 1px solid #0f766e; border-radius: 999px;
  background: #fff; color: #0f766e; font-size: 13px; font-weight: 600; cursor: pointer;
}
/* "Show on map" and "Back to list": phones only, where the panel covers the
   map (and the walking area or route drawn on it). */
.map-embed-show-on-map-btn,
.map-embed-panel-back { display: none; }
@media (max-width: 767px) {
  .map-embed-show-on-map-btn {
    display: inline-block; margin: 6px 8px 0 0; padding: 4px 12px;
    border: 1px solid #0f766e; border-radius: 999px; background: #0f766e;
    color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .map-embed-panel.map-embed-panel-open.map-embed-panel-peek { transform: translateX(100%); }
  .map-embed-panel-back:not([hidden]) {
    display: flex; position: absolute; left: 50%; bottom: 20px; z-index: 1000;
    transform: translateX(-50%); padding: 10px 18px; border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    color: #333; font-size: 14px; font-weight: 600; cursor: pointer;
  }
}
/* A live special's star in lists of places, like the one on its map pin. */
.map-embed-list-deal-badge {
  display: inline-block; width: 16px; height: 16px; line-height: 16px;
  border-radius: 50%; background: #e53935; color: #fff; font-size: 11px;
  font-weight: 400; text-align: center; vertical-align: 1px; flex-shrink: 0;
}

.map-embed-reach-list { list-style: none; padding: 0; margin: 6px 0 0; }
.map-embed-reach-list button {
  background: none; border: none; color: #0f766e; padding: 3px 0;
  cursor: pointer; text-align: left;
}

/* While a place panel is open it covers the toolbar (z-index 1000 vs 500).
   On wider screens move the toolbar and its dropdowns to the left of the
   panel card; on phones (full-width panel) the filter dropdown opens on top
   of the panel instead, from the walking list's "Filter places" button. */
#map-embed-root:has(.map-embed-panel-open) .map-embed-filter-panel,
#map-embed-root:has(.map-embed-panel-open) .map-embed-search-panel {
  z-index: 1100;
}

@media (min-width: 768px) {
  #map-embed-root:has(.map-embed-panel-open) .map-embed-toolbar {
    right: calc(min(480px, 42%) + 36px);
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  #map-embed-root:has(.map-embed-panel-open) .map-embed-filter-panel,
  #map-embed-root:has(.map-embed-panel-open) .map-embed-search-panel {
    right: calc(min(480px, 42%) + 36px);
  }
}

/* Phones: the four toolbar buttons need nearly the full width, so the zoom
   buttons move to the bottom left (they sat on top of Search), the buttons
   get tighter, and below 420px Search shows only its magnifier icon. */
@media (max-width: 767px) {
  #map-embed-map .leaflet-top.leaflet-left {
    top: auto;
    bottom: 16px;
  }

  .map-embed-toolbar {
    left: 12px;
    justify-content: flex-end;
    gap: 6px;
  }

  .map-embed-search-toggle,
  .map-embed-filter-toggle,
  .map-embed-itinerary-toggle,
  .map-embed-list-toggle {
    padding: 8px 11px;
    white-space: nowrap;
  }
}

@media (max-width: 419px) {
  .map-embed-search-toggle-label {
    display: none;
  }
}