/* ==========================================================================
   Oro Estate — interactive street module
   Pegman dock + drag ghost, Panoramax street overlay, 3D walk HUD, map toast.
   Design language: Mediterranean luxury — deep green (var(--green, #14463b)),
   warm whites, pill surfaces, soft layered shadows, 0.25s ease motion.
   ========================================================================== */

/* ------------------------------------------------------------ pegman dock */

.pegman-dock {
  position: absolute;
  /* Middle of the right screen edge, 1rem in, on every viewport. The map
     column reaches the right edge of the screen, and its vertical center
     stays on-screen at any scroll position — no JS placement needed. */
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  /* Leaflet's tile/marker panes are z 200–700 and compete in the same
     stacking context — 30 (fine over MapLibre's canvas) hides the pegman
     behind the tiles. 1000 matches the map's own redo/collapse buttons. */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  /* Tip is wider than the button — keep it flowing inward over the map,
     not past the map's clipped right edge. */
  align-items: flex-end;
  gap: 6px;
}

.search-map.is-walking .pegman-dock {
  display: none;
}

.pegman {
  width: 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--green, #14463b);
  border: 1px solid rgba(20, 70, 59, 0.12);
  box-shadow:
    0 6px 18px rgba(22, 38, 34, 0.14),
    0 2px 6px rgba(22, 38, 34, 0.1);
  cursor: grab;
  touch-action: none; /* the JS drag needs raw pointer events on touch */
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
}

.pegman:hover {
  transform: scale(1.08);
  box-shadow:
    0 10px 30px rgba(22, 38, 34, 0.18),
    0 3px 8px rgba(22, 38, 34, 0.12);
}

.pegman:active {
  cursor: grabbing;
}

.pegman__figure {
  height: 26px;
  width: auto;
  display: block;
  fill: currentColor;
}

/* Armed: clicked once, waiting for a map click to drop */
.pegman.is-armed {
  background: var(--green, #14463b);
  color: #fff;
  animation: pegman-ring 1.6s ease-out infinite;
}

@keyframes pegman-ring {
  0% {
    box-shadow:
      0 6px 18px rgba(22, 38, 34, 0.2),
      0 0 0 0 rgba(20, 70, 59, 0.45);
  }
  70% {
    box-shadow:
      0 6px 18px rgba(22, 38, 34, 0.2),
      0 0 0 14px rgba(20, 70, 59, 0);
  }
  100% {
    box-shadow:
      0 6px 18px rgba(22, 38, 34, 0.2),
      0 0 0 0 rgba(20, 70, 59, 0);
  }
}

/* Loading: resolving a drop against the Panoramax API */
.pegman.is-loading {
  animation: pegman-breathe 1.1s ease-in-out infinite;
}

@keyframes pegman-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* While the ghost flies, the docked figure steps out */
.pegman-dock.is-dragging .pegman__figure {
  opacity: 0;
}

.pegman-dock__tip {
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--green, #14463b);
  background: #fff;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(20, 70, 59, 0.1);
  box-shadow: 0 4px 12px rgba(22, 38, 34, 0.12);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.pegman-dock:hover .pegman-dock__tip,
.pegman-dock:focus-within .pegman-dock__tip {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------- drag ghost */

.pegman-ghost {
  position: fixed;
  z-index: 5000;
  pointer-events: none;
  color: var(--green, #14463b);
  /* Anchor the figure's feet on the pointer, with a playful tilt */
  transform: translate(-50%, -90%) rotate(8deg);
  transition: none;
  filter: drop-shadow(0 10px 12px rgba(22, 38, 34, 0.35));
}

.pegman-ghost svg {
  display: block;
  height: 40px;
  width: auto;
  fill: currentColor;
}

body.is-pegman-drag,
body.is-pegman-drag * {
  cursor: grabbing !important;
}

.search-map.is-pegman-armed canvas,
.search-map.is-pegman-armed .leaflet-container {
  cursor: crosshair !important;
}

/* ----------------------------------------------------------------- walk HUD */

.walk-hud {
  display: none;
}

.walk-hud[aria-hidden='false'],
.search-map.is-walking .walk-hud {
  display: block;
}

/* Look-around affordance while walking */
.search-map.is-walking canvas {
  cursor: grab;
}

.search-map.is-walking canvas:active {
  cursor: grabbing;
}

.walk-hud__exit {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--green, #14463b);
  border: 1px solid rgba(20, 70, 59, 0.12);
  box-shadow: 0 10px 30px rgba(22, 38, 34, 0.18);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  animation: walk-hud-in 0.4s ease both;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.walk-hud__exit:hover {
  background: var(--green, #14463b);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 34px rgba(22, 38, 34, 0.24);
}

.walk-hud__exit svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: currentColor;
  stroke: currentColor;
}

.walk-hud__keys {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 28px);
  animation: walk-hud-in 0.4s ease 0.08s both;
}

.walk-hud__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(12, 28, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff; /* pure white on dark — brand rule, never grey */
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.walk-hud__chip kbd {
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  padding: 3px 5px;
  min-width: 16px;
  text-align: center;
}

/* Touch movement pad (hidden on mouse devices) */
.walk-hud__pad {
  position: absolute;
  right: 14px;
  bottom: 64px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: walk-hud-in 0.4s ease 0.12s both;
}

@media (pointer: fine) {
  .walk-hud__pad {
    display: none;
  }
}

.walk-hud__pad-row {
  display: flex;
  gap: 8px;
}

.walk-hud__pad button {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(12, 28, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  touch-action: none; /* hold-to-walk must not scroll the page */
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}

.walk-hud__pad button:active {
  background: var(--green, #14463b);
  transform: scale(0.94);
}

.walk-hud__pad button svg {
  width: 18px;
  height: 18px;
  display: block;
}

@keyframes walk-hud-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* .walk-hud__keys keeps its centering transform while animating in */
.walk-hud__keys {
  animation-name: walk-hud-keys-in;
}

@keyframes walk-hud-keys-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ----------------------------------------------------------------- map toast */

.map-toast {
  position: absolute;
  bottom: 76px;
  left: 50%;
  transform: translate(-50%, 6px);
  z-index: 1001; /* above Leaflet panes (200–700) and the pegman dock */
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(12, 28, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(22, 38, 34, 0.28);
  color: #fff; /* pure white on dark — brand rule */
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.map-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ------------------------------------------------------------ street overlay */

.street-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: #0c1c18;
  display: none;
}

.street-overlay.is-open {
  display: block;
  animation: street-fade 0.35s ease both;
}

@keyframes street-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.street-overlay__viewer,
.street-overlay__viewer pnx-photo-viewer {
  width: 100%;
  height: 100%;
  display: block;
}

.street-overlay__close {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 4010;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--green, #14463b);
  border: 1px solid rgba(20, 70, 59, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.street-overlay__close:hover {
  background: var(--green, #14463b);
  color: #fff;
  transform: translateY(-1px);
}

.street-overlay__close svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: currentColor;
  stroke: currentColor;
}

.street-overlay__credit {
  position: fixed;
  bottom: 14px;
  right: 16px;
  z-index: 4010;
  margin: 0;
  font-size: 11px;
  color: #fff; /* pure white on dark — brand rule */
  opacity: 0.85;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .pegman.is-armed,
  .pegman.is-loading,
  .walk-hud__exit,
  .walk-hud__keys,
  .walk-hud__pad,
  .street-overlay.is-open {
    animation: none;
  }
}

/* ------------------------------------------- property card inside street view
   Shown when a price dot floating in the panorama is tapped. */

.street-card {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 4020;
  width: 460px;
  max-width: calc(100vw - 36px);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  font-family: 'HK Grotesk', sans-serif;
  animation: street-card-in 0.3s ease both;
}

@keyframes street-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.street-card__media {
  position: relative;
  display: block;
  height: 265px;
  background: #f5f0e6;
  overflow: hidden;
}

.street-card__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.street-card__slide.is-active { opacity: 1; }

/* Whole photo links to the listing; arrows sit above it. */
.street-card__media-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.street-card__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #162622;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: background 0.2s ease, transform 0.2s ease;
}

.street-card__nav:hover { background: #fff; transform: translateY(-50%) scale(1.07); }
.street-card__nav--prev { left: 10px; }
.street-card__nav--next { right: 10px; }

.street-card__dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 5px;
}

.street-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.2s ease, transform 0.2s ease;
}

.street-card__dot.is-active { background: #fff; transform: scale(1.25); }

.street-card__body { padding: 16px 18px 18px; }

.street-card__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #162622;
  line-height: 1.25;
}

.street-card__loc {
  margin: 3px 0 0;
  font-size: 14px;
  color: #5d6b66;
}

.street-card__stats {
  list-style: none;
  display: flex;
  gap: 14px;
  margin: 10px 0 0;
  padding: 0;
  font-size: 14px;
  color: #33433d;
}

.street-card__price {
  margin: 10px 0 0;
  font-size: 21px;
  font-weight: 700;
  color: var(--green, #14463b);
}

.street-card__units {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #5d6b66;
}

.street-card__cta {
  display: block;
  margin-top: 14px;
  padding: 13px 0;
  text-align: center;
  background: var(--green, #14463b);
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.25s ease;
}

.street-card__cta:hover { background: #0f3a2f; }

.street-card__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #162622;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.street-card__close:hover { background: #f5f0e6; }

@media (prefers-reduced-motion: reduce) {
  .street-card { animation: none; }
}

/* --------------------------------------------- screen-space price tags
   Constant-size pills projected over the Google panorama — distance no
   longer shrinks them to dots. Positioned via inline transform from JS. */

.street-overlay__viewer { position: relative; }

.gsv-tags {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.gsv-tag {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 16px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--green, #14463b);
  color: #fff;
  font-family: 'HK Grotesk', sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.2s ease;
  white-space: nowrap;
}

.gsv-tag:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  z-index: 5000 !important;
}

/* The property whose sidebar is open: gold pill, floated above its peers. */
.gsv-tag.is-active {
  background: var(--gold, #a98830);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  z-index: 4900 !important;
}

.gsv-tag__price {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
}

.gsv-tag__dist {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  opacity: 0.85;
  line-height: 1;
}

/* --------------------------------------------------- street sidebar panel
   Full-height closable sidebar on the left of the street view — a
   simplified property page (photos, specs, units in a project). */

.street-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 4030;
  width: 480px;
  max-width: 92vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 12px 0 48px rgba(0, 0, 0, 0.45);
  font-family: 'HK Grotesk', sans-serif;
  animation: street-panel-in 0.32s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

@keyframes street-panel-in {
  from { opacity: 0.4; transform: translateX(-100%); }
  to { opacity: 1; transform: translateX(0); }
}

.street-panel__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #162622;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease;
}

.street-panel__close:hover { background: #f5f0e6; }

.street-panel__media {
  position: relative;
  flex: none;
  height: 300px;
  background: #f5f0e6;
  overflow: hidden;
}

.street-panel__count {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(12, 28, 24, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.street-panel__body {
  padding: 18px 22px 24px;
  display: flex;
  flex-direction: column;
}

.street-panel__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #162622;
  line-height: 1.2;
  padding-right: 30px;
}

.street-panel__loc {
  margin: 4px 0 0;
  font-size: 14px;
  color: #5d6b66;
}

.street-panel__price {
  margin: 12px 0 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--green, #14463b);
}

.street-panel__specs {
  list-style: none;
  display: flex;
  gap: 22px;
  margin: 16px 0 0;
  padding: 14px 0;
  border-top: 1px solid #ece5d8;
  border-bottom: 1px solid #ece5d8;
}

.street-panel__specs li { display: flex; flex-direction: column; gap: 2px; }

.street-panel__spec-v {
  font-size: 16px;
  font-weight: 700;
  color: #162622;
}

.street-panel__spec-l {
  font-size: 12px;
  color: #5d6b66;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.street-panel__section { margin-top: 18px; }

.street-panel__heading {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: #162622;
}

.street-panel__units {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.street-panel__unit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid #ece5d8;
  border-radius: 12px;
  text-decoration: none;
  color: #162622;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.street-panel__unit:hover {
  border-color: var(--green, #14463b);
  box-shadow: 0 6px 18px rgba(22, 38, 34, 0.12);
}

.street-panel__unit-img {
  flex: none;
  width: 72px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  background: #f5f0e6;
  display: block;
}

.street-panel__unit-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.street-panel__unit-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--green, #14463b);
}

.street-panel__unit-stats {
  font-size: 12.5px;
  color: #5d6b66;
}

.street-panel__unit-arrow {
  margin-left: auto;
  flex: none;
  color: #b7aa92;
}

.street-panel__actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.street-panel__cta {
  flex: 1;
  padding: 14px 0;
  text-align: center;
  background: var(--green, #14463b);
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.25s ease;
}

.street-panel__cta:hover { background: #0f3a2f; }

.street-panel__call {
  flex: none;
  width: 50px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--green, #14463b);
  border-radius: 12px;
  color: var(--green, #14463b);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.street-panel__call:hover {
  background: var(--green, #14463b);
  color: #fff;
}

/* The slider slides/nav/dots reuse .street-card__* classes inside the
   panel media; they're positioned by the shared rules above. */

@media (prefers-reduced-motion: reduce) {
  .street-panel { animation: none; }
}

/* ------------------------------------------------- nav-aware positioning
   The site chrome (white contact strip + green nav) keeps the top of the
   screen; street view and the sidebar start right below it. --street-top
   is measured at open time by interactive-street.js. */

.street-overlay { top: var(--street-top, 0px); }

.street-panel { top: var(--street-top, 0px); }

.street-overlay__close {
  top: calc(var(--street-top, 0px) + 14px);
  left: auto;
  right: 18px;
}

/* WhatsApp button in the sidebar actions — same outline style as call,
   shifting to WhatsApp green on hover. */
.street-panel__call--wa:hover {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}

/* ----------------------------------------------- sidebar polish (icons,
   hierarchy: project count up, price down a notch) */

.street-panel__spec-v {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.street-panel__spec-v svg {
  width: 19px;
  height: 19px;
  color: var(--green, #14463b);
  flex: none;
}

.street-panel__price { font-size: 19px; }

.street-panel__heading { font-size: 18px; }

.street-panel__unit-stats {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.street-panel__unit-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #33433d;
}

.street-panel__unit-stat svg {
  width: 15px;
  height: 15px;
  color: var(--green, #14463b);
  flex: none;
}

/* ------------------------------------------------------------- lightbox
   Full-screen photo viewer opened by clicking the sidebar's photo. */

.street-panel__media .street-card__slide { cursor: zoom-in; }

.street-lightbox {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  background: rgba(8, 18, 15, 0.96);
  animation: street-fade 0.25s ease both;
}

.street-lightbox__close {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.street-lightbox__close:hover { background: rgba(255, 255, 255, 0.25); }

.street-lightbox__stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Tight side gutters so the photo fills the width; the arrows overlay the
     image edges (absolute, on top of the photo) rather than sitting beside it. */
  padding: 48px 14px 12px;
  position: relative;
}

.street-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.street-lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.street-lightbox__arrow:hover { background: rgba(255, 255, 255, 0.28); transform: translateY(-50%) scale(1.07); }
.street-lightbox__arrow--prev { left: 12px; }
.street-lightbox__arrow--next { right: 12px; }

.street-lightbox__count {
  margin: 8px 0 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff; /* pure white on dark — brand rule */
}

.street-lightbox__thumbs {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 12px 18px 16px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.street-lightbox__thumb {
  flex: none;
  width: 92px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  opacity: 0.6;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.street-lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.street-lightbox__thumb:hover { opacity: 0.9; }

.street-lightbox__thumb.is-active {
  opacity: 1;
  border-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .street-lightbox { animation: none; }
}

/* ----------------------------------------------------- mobile pegman dock
   Same centered-right placement as desktop; the map is a fixed overlay here
   so the dock needs to clear the floating chrome, and the hover tip has no
   hover to pair with. */

@media (max-width: 1200px) {
  .pegman-dock {
    /* z 40 sat BELOW Leaflet's tile pane (z 200), so the tiles painted over the
       dock — it flashed for a frame, then vanished once tiles rendered. Match
       the desktop 1000 to clear the tile/marker panes (200–700). */
    z-index: 1000;
    /* The map is a fixed full-screen underlay; the listings sheet rests at
       ≈44vh from the top. Centre the dock in the visible map strip — low enough
       to clear the top nav, high enough to stay above the sheet's resting edge —
       so it reads as middle-of-screen rather than tucked under the nav. */
    top: 38vh;
    bottom: auto;
    transform: translateY(-50%);
  }
  .pegman-dock__tip { display: none; }
}