/* ============================================================
   MEDIA VIEWER — full-screen zoomable image
   Figma: 8124:41357 (floor plan) - 8124:36720 (map popup)
          8124:37978 (masterplan popup) · 8091:87492 (mobile)

   Measured: close button sits ABOVE the panel, right-aligned,
   in a 12px pad (720 + 44 + 2x12 = 788). Panel grey-20, 720 tall,
   radius 25, clipped. Zoom controls bottom-end, 16 pad, 16 gap:
   zoom-out white-50% (disabled at fit), zoom-in solid white.

   Neem: default fits the plan preserving aspect ratio; +/- steps
   25% per click; drag to pan once zoomed; pinch on mobile.
   ============================================================ */

.masaar-planview {
  position: fixed;
  inset: 0;
  /* Above the details modal (300) — it opens on top and the modal stays. */
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
}

.masaar-planview[hidden] { display: none; }

.masaar-planview__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(19, 50, 43, 0.6);
}

.masaar-planview__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  inline-size: 100%;
  max-inline-size: 1099px;
}

.masaar-planview__close-row { padding: var(--space-12); }

.masaar-planview__stage {
  position: relative;
  inline-size: 100%;
  block-size: min(720px, 70dvh);
  border-radius: var(--radius-modal);
  background: var(--masaar-grey-20);
  overflow: clip;
  /* The cursor is the affordance for panning; JS swaps it when zoomed. */
  touch-action: none;
}

.masaar-planview__stage.is-zoomed { cursor: grab; }
.masaar-planview__stage.is-panning { cursor: grabbing; }

/* Fit the whole plan, aspect ratio preserved — the default view. */
.masaar-planview__img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-inline-size: 100%;
  max-block-size: 100%;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

.masaar-planview__zoom {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16);
}

/* Zoom-out: translucent white, and the design draws its glyph at 50%
   when it is disabled at the default fit. */
.masaar-round-button--ghost {
  --arrow-bg: rgba(255, 255, 255, 0.5);
  --arrow-fg: var(--masaar-black);
  --arrow-bg-hover: var(--masaar-white);
  --arrow-bg-off: rgba(255, 255, 255, 0.5);
}

.masaar-round-button--ghost[disabled] { opacity: 0.5; }

.masaar-round-button--plain {
  --arrow-bg: var(--masaar-white);
  --arrow-fg: var(--masaar-black);
  --arrow-bg-hover: rgba(255, 255, 255, 0.7);
  --arrow-bg-off: rgba(255, 255, 255, 0.5);
}

.masaar-round-button--plain[disabled] { opacity: 0.5; }

@media (max-width: 767px) {
  .masaar-planview { padding: var(--space-12); }
  .masaar-planview__stage { block-size: 70dvh; }
}