/* The map of search results on All Listings (results-map.js, catalog.js). ZamPlace teal. */
.catalog-listing-grid[hidden], .catalog-map-panel[hidden], .catalog-map-toggle[hidden] { display: none !important; }

/* Show map / Show list: a floating pill at the bottom of the screen. */
.catalog-map-toggle {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #13302f;
  color: #fff;
  box-shadow: 0 10px 28px rgba(11, 59, 58, .32);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.catalog-map-toggle:hover { background: #0b6e69; }
.catalog-map-toggle:focus-visible { outline: 3px solid #75a6a0; outline-offset: 3px; }

.catalog-map-panel { margin: 4px 0 70px; }
.zprm-frame { position: relative; height: min(72vh, 680px); min-height: 380px; overflow: hidden; border: 1px solid #dbe5ea; border-radius: 18px; background: #e8eef0; }
.zprm-map { position: absolute; inset: 0; }
.zprm-note { margin: 8px 2px 0; color: #536b68; font-size: 13px; font-weight: 700; }
.zprm-loading, .zprm-error { margin: 0 0 10px; padding: 26px 16px; border: 1px dashed #c9d6da; border-radius: 16px; background: #f7fbfa; color: #3f5d57; font-weight: 700; text-align: center; }

/* Price tags at the pins. */
.zprm-tag {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 5px 10px;
  border: 1px solid rgba(19, 48, 47, .14);
  border-radius: 999px;
  background: #fff;
  color: #13302f;
  box-shadow: 0 2px 10px rgba(11, 59, 58, .28);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}
.zprm-tag:hover { z-index: 2; transform: translate(-50%, -100%) scale(1.06); }
.zprm-tag.is-active { z-index: 3; border-color: #0b6e69; background: #0b6e69; color: #fff; }
.zprm-tag:focus-visible { outline: 3px solid #75a6a0; outline-offset: 2px; }
/* One tag for a hotel's rooms (phones): how many rooms, then "from" the cheapest. */
.zprm-tag.is-group { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; }
.zprm-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: #0b6e69; color: #fff; font-size: 11.5px; }
.zprm-tag.is-active .zprm-count { background: #fff; color: #0b6e69; }

/* The stay's card over the map. */
.zprm-card { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; max-width: 380px; margin: 0 auto; }
.zprm-card[hidden] { display: none; }
.zprm-card-inner .catalog-card { margin: 0; box-shadow: 0 14px 40px rgba(11, 59, 58, .3); background: #fff; }
.zprm-card-inner .catalog-card-media { height: 130px; }
.zprm-card-inner .catalog-card-engagement, .zprm-card-inner .catalog-use-line { display: none; }
.zprm-close {
  position: absolute; top: 8px; right: 8px; z-index: 6;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .95); color: #13302f; font-size: 15px; font-weight: 900; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

/* Signed-out visitors: a blurred map and Sign in, no locations. */
.zprm-locked { position: relative; min-height: 380px; overflow: hidden; border: 1px solid #dbe5ea; border-radius: 18px; }
.zprm-blur {
  position: absolute; inset: -20px; filter: blur(6px);
  background:
    radial-gradient(circle at 22% 30%, #cfe3d8 0 9%, transparent 10%),
    radial-gradient(circle at 70% 62%, #d7e8e2 0 12%, transparent 13%),
    linear-gradient(115deg, transparent 0 46%, #f7f3e8 46% 49%, transparent 49%),
    linear-gradient(20deg, transparent 0 60%, #f7f3e8 60% 62%, transparent 62%),
    linear-gradient(160deg, #a9d3e6 0 22%, #e7efe9 22% 100%);
}
.zprm-lock {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; gap: 8px; justify-items: center; width: min(340px, calc(100% - 32px));
  padding: 20px; border-radius: 16px; background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 34px rgba(11, 59, 58, .2); text-align: center;
}
.zprm-lock strong { color: #13302f; font-size: 16px; }
.zprm-lock span { color: #536b68; font-size: 13px; line-height: 1.4; }
.zprm-sign-in { padding: 10px 24px; border-radius: 10px; background: #0b6e69; color: #fff; font-weight: 800; text-decoration: none; }

/* All listings: a dot in each tag for Buy, Rent, Stay or Event (docs/map-every-category.md). */
.zprm-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; box-shadow: 0 0 0 1.5px #fff; }
.zprm-dot.is-buy { background: #06736a; }
.zprm-dot.is-rent { background: #2f62c4; }
.zprm-dot.is-stay { background: #c2651a; }
.zprm-dot.is-event { background: #7a46b0; }
.zprm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 2px 0; color: #536b68; font-size: 12.5px; font-weight: 700; }
.zprm-legend[hidden] { display: none; }
/* Near me: where the visitor is (docs/near-me.md). */
.zprm-me { position: absolute; width: 16px; height: 16px; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 50%; background: #1a73e8; box-shadow: 0 0 0 8px rgba(26, 115, 232, .2), 0 1px 4px rgba(0, 0, 0, .3); pointer-events: none; }

/* Wide computer screens: the map beside the list, as in the mockup (docs/map-first.md). */
.catalog-results-panel.has-split-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 44%); column-gap: 18px; align-items: start; }
.catalog-results-panel.has-split-map > .catalog-toolbar, .catalog-results-panel.has-split-map > .catalog-active-filters { grid-column: 1 / -1; }
.catalog-results-panel.has-split-map > #catalogGrid { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-results-panel.has-split-map > .catalog-load-wrap { grid-column: 1; }
.catalog-results-panel.has-split-map > #catalogMapPanel { grid-column: 2; grid-row: 3 / span 3; position: sticky; top: 96px; margin: 0; }
.catalog-results-panel.has-split-map .zprm-frame { height: calc(100vh - 150px); min-height: 420px; }
.catalog-results-panel.has-split-map .zprm-locked .zprm-blur { min-height: 420px; }

/* Tags that would overlap share one round count; tapping it zooms in (docs/map-tag-groups.md). */
.zprm-bubble { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border: 3px solid #fff; border-radius: 999px; background: #0b6e69; color: #fff; font: inherit; font-size: 14px; font-weight: 850; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 6px rgba(11, 110, 105, .2), 0 4px 12px rgba(11, 59, 58, .3); cursor: pointer; }
.zprm-bubble:hover { z-index: 2; transform: translate(-50%, -50%) scale(1.08); }
.zprm-bubble:focus-visible { outline: 3px solid #75a6a0; outline-offset: 3px; }
/* Pins in one spot: a short list over the map. */
.zprm-spot-title { display: block; padding: 14px 44px 8px 14px; font-size: 15px; color: #13302f; }
.zprm-spot-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 14px; border: 0; border-top: 1px solid #e8eef0; background: none; color: #13302f; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.zprm-spot-item:hover { background: #f3f8f7; }
.zprm-spot-item b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.zprm-spot-item span { flex: none; font-weight: 850; font-variant-numeric: tabular-nums; }
.zprm-spot-more { display: block; padding: 8px 14px 12px; color: #536b68; }
.zprm-card-inner.is-spot { max-height: 60vh; overflow-y: auto; border-radius: 16px; background: #fff; box-shadow: 0 14px 40px rgba(11, 59, 58, .3); }