/* ============================================
   VESTRA REALTY — 3D World Map (vr_map.css)
   ============================================ */

.vr-mp-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: var(--vr-surface-overlay, rgba(6, 38, 22, 0.85));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: vr-mp-fade .25s ease;
}
@keyframes vr-mp-fade { from { opacity: 0; } to { opacity: 1; } }

.vr-mp-shell {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: 86vh;
  background: var(--vr-green-950, #020f05);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .08);
}

/* Header */
.vr-mp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--vr-green-900, #062616);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  flex-shrink: 0;
}
.vr-mp-header-info { min-width: 0; }
.vr-mp-title {
  font-family: var(--vr-font-heading, serif);
  font-size: var(--vr-text-lg, 1.125rem);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vr-mp-title i { color: var(--vr-green-400, #3fd47d); margin-right: 4px; }
.vr-mp-sub {
  font-size: var(--vr-text-xs, .75rem);
  color: var(--vr-text-secondary, #a3c4af);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vr-mp-close {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.vr-mp-close:hover { background: rgba(255, 255, 255, .18); }

/* Canvas */
.vr-mp-canvas { flex: 1; min-height: 0; position: relative; }
.vr-mp-canvas .maplibregl-canvas { outline: none; }

.vr-mp-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--vr-text-secondary, #a3c4af);
  font-size: var(--vr-text-sm, .875rem);
  z-index: 5;
  text-align: center;
  padding: 20px;
}
.vr-mp-globe-spin i {
  font-size: 52px;
  color: var(--vr-green-400, #3fd47d);
  display: inline-block;
  animation: vr-mp-spin 2.4s linear infinite;
}
@keyframes vr-mp-spin { to { transform: rotate(360deg); } }
.vr-mp-fallback {
  margin-top: 6px;
  color: var(--vr-green-300, #7de8a9);
  font-weight: 600;
  text-decoration: underline;
}

/* Property pin */
.vr-mp-pin { position: relative; width: 46px; height: 46px; cursor: pointer; }
.vr-mp-pin-dot {
  position: absolute;
  inset: 4px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--vr-green-500, #2db36a), var(--vr-green-700, #124d2a));
  border: 2px solid #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vr-mp-pin-dot i { transform: rotate(45deg); color: #fff; font-size: 17px; }
.vr-mp-pin-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(45, 179, 106, .35);
  animation: vr-mp-pulse 1.8s ease-out infinite;
}
@keyframes vr-mp-pulse {
  0% { transform: scale(.5); opacity: .9; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* POI markers */
.vr-mp-poi {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: transform .15s ease;
}
.vr-mp-poi:hover { transform: scale(1.2); z-index: 3; }

/* Popups */
.vr-mp-overlay .maplibregl-popup-content {
  font-family: var(--vr-font-body, sans-serif);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.vr-mp-pop-title { font-weight: 700; font-size: 13px; color: var(--vr-text-dark, #0f2718); }
.vr-mp-pop-price { font-weight: 700; font-size: 13px; color: var(--vr-green-600, #1c6b3f); margin-top: 2px; }
.vr-mp-pop-loc { font-size: 11.5px; color: var(--vr-text-muted, #6b7280); margin-top: 2px; }

/* Footer: note + legend chips */
.vr-mp-footer {
  flex-shrink: 0;
  padding: 10px 14px;
  background: var(--vr-green-900, #062616);
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.vr-mp-note {
  font-size: var(--vr-text-xs, .75rem);
  color: var(--vr-amber, #e8a020);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.vr-mp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.vr-mp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: var(--vr-text-xs, .75rem);
  font-family: var(--vr-font-body, sans-serif);
  cursor: pointer;
  transition: opacity .2s ease, background .2s ease;
  min-height: 32px;
}
.vr-mp-chip b { font-weight: 700; }
.vr-mp-chip:hover:not(:disabled) { background: rgba(255, 255, 255, .15); }
.vr-mp-chip.is-off { opacity: .38; }
.vr-mp-chip.is-empty { opacity: .3; cursor: default; }
.vr-mp-chip-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* Floating tools (2D/3D, recenter) */
.vr-mp-tools {
  position: absolute;
  left: 12px;
  bottom: 86px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 6;
}
.vr-mp-tool {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(6, 38, 22, .85);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 14px;
  font-family: var(--vr-font-body, sans-serif);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .2s ease;
}
.vr-mp-tool:hover { background: rgba(11, 61, 34, .95); }

/* Inline "Check on Map" link beside the listing location */
.vr-detail-maplink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--vr-green-200, #b0e8c8);
  background: var(--vr-green-50, #f0fdf6);
  color: var(--vr-green-600, #1c6b3f);
  font-family: var(--vr-font-body, sans-serif);
  font-size: var(--vr-text-xs, .75rem);
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
  transition: background .2s ease;
}
.vr-detail-maplink:hover { background: var(--vr-green-100, #d1f7e2); }

/* Detail-page launcher card */
.vr-mp-launcher {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(120deg, var(--vr-green-900, #062616), var(--vr-green-700, #124d2a));
  color: #fff;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.vr-mp-launcher-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--vr-green-300, #7de8a9);
  flex-shrink: 0;
}
.vr-mp-launcher-text { flex: 1; min-width: 200px; }
.vr-mp-launcher-title {
  font-family: var(--vr-font-heading, serif);
  font-size: var(--vr-text-xl, 1.25rem);
  font-weight: 700;
  margin: 0 0 2px;
}
.vr-mp-launcher-sub { font-size: var(--vr-text-sm, .875rem); color: var(--vr-text-secondary, #a3c4af); }
.vr-mp-launcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  border: none;
  background: var(--vr-green-500, #2db36a);
  color: #fff;
  font-family: var(--vr-font-body, sans-serif);
  font-weight: 700;
  font-size: var(--vr-text-sm, .875rem);
  cursor: pointer;
  min-height: 44px;
  transition: background .2s ease, transform .15s ease;
}
.vr-mp-launcher-btn:hover { background: var(--vr-green-400, #3fd47d); transform: translateY(-1px); }

/* Mobile */
@media (max-width: 767px) {
  .vr-mp-overlay { padding: 0; }
  .vr-mp-shell { height: 100%; max-width: none; border-radius: 0; }
  .vr-mp-tools { bottom: 110px; }
  .vr-mp-chips { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .vr-mp-chip { white-space: nowrap; flex-shrink: 0; }
}