/* ============================================================
   HAVENA PRO — MAP HOME HERO (H60 / H60b / H60c)
   Scoped under .havena-pro-hero--map only.
   Reuses Home Map embed host/popup/filter/draw styles; no Map widget section chrome.
============================================================ */

/*
 * Specificity matches Flagship (.havena-pro-hero.havena-pro-hero--flagship) so Classic
 * home.css padding-top/bottom + flex never invent editor whitespace when Map CSS loads
 * after or before home.css (H60F).
 */
.havena-pro-hero.havena-pro-hero--map {
  --havena-pro-hero-map-min: var(--havena-pro-map-min-height, 560px);
  position: relative;
  display: block;
  justify-content: normal;
  align-items: stretch;
  min-height: var(--havena-pro-hero-map-min);
  height: var(--havena-pro-hero-map-min);
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  /* Bare map: clip tiles. With controls: allow filter sheet/popovers (host still clips). */
  overflow: hidden;
  isolation: isolate;
  /*
   * H60f color: Classic .havena-pro-hero sets color: dark-text (#fff) for on-media copy.
   * Map Hero has no dark copy layer — reset to Map embed text so filter/search
   * chrome matches the standalone Map widget (avoids white-on-white labels).
   */
  color: var(--havena-pro-color-text, #0f1c2e);
}

/* Reinforce filter chrome against any remaining inherit / Elementor input rules. */
.havena-pro-hero--map .havena-pro-map__filters,
.havena-pro-hero--map .havena-pro-map__draw {
  color: var(--havena-pro-color-text, #0f1c2e);
}

.havena-pro-hero--map .havena-pro-map__filters-input,
.havena-pro-hero--map .havena-pro-map__filters-select,
.havena-pro-hero--map .havena-pro-map__filters-popover-search,
.havena-pro-hero--map .havena-pro-map__filters-chip,
.havena-pro-hero--map .havena-pro-map__filters-count,
.havena-pro-hero--map .havena-pro-map__filters-option label,
.havena-pro-hero--map .havena-pro-map__filters-field label,
.havena-pro-hero--map .havena-pro-map__filters-more label {
  color: var(--havena-pro-color-text, #0f1c2e);
}

.havena-pro-hero--map .havena-pro-map__filters-input::placeholder,
.havena-pro-hero--map .havena-pro-map__filters-popover-search::placeholder {
  color: var(--havena-pro-form-placeholder, rgba(15, 28, 46, 0.55));
}

.havena-pro-hero.havena-pro-hero--map.havena-pro-hero--map-has-controls {
  overflow: visible;
  isolation: auto;
}

.havena-pro-hero--map .havena-pro-hero-map__plane {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.havena-pro-hero--map.havena-pro-hero--map-has-controls .havena-pro-hero-map__plane {
  overflow: visible;
}

.havena-pro-hero--map .havena-pro-hero-map__shell,
.havena-pro-hero--map .havena-pro-map.havena-pro-hero-map__shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  background: transparent;
  min-height: 100%;
}

.havena-pro-hero--map .havena-pro-map.havena-pro-map--has-filters {
  overflow: visible;
  background: transparent;
}

.havena-pro-hero--map .havena-pro-map__host:not(.havena-pro-map-popup-wrap) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border-radius: 0;
  z-index: 1;
  overflow: hidden;
}

/* Map canvas must match host — avoid Leaflet/Google default short height on tablet/mobile. */
.havena-pro-hero--map .havena-pro-map__host:not(.havena-pro-map-popup-wrap) .leaflet-container,
.havena-pro-hero--map .havena-pro-map__host:not(.havena-pro-map-popup-wrap) .leaflet-container .leaflet-map-pane,
.havena-pro-hero--map .havena-pro-map__host:not(.havena-pro-map-popup-wrap) .leaflet-container .leaflet-tile-pane {
  width: 100%;
  height: 100%;
}

.havena-pro-hero--map .havena-pro-map__host:not(.havena-pro-map-popup-wrap) .leaflet-container {
  position: absolute;
  inset: 0;
}

.havena-pro-hero--map .havena-pro-map__host:not(.havena-pro-map-popup-wrap) .gm-style,
.havena-pro-hero--map .havena-pro-map__host:not(.havena-pro-map-popup-wrap) .gm-style > div,
.havena-pro-hero--map .havena-pro-map__host:not(.havena-pro-map-popup-wrap) .gm-style iframe {
  width: 100%;
  height: 100%;
}

/* ============================================================
   H63 — Progressive reveal (Hero Map only)
   Full-shell loading cover; map/AJAX continue underneath.
   H63 follow-up: overlay-only reveal (no opacity fade on map host).
   Marker/cluster transform transitions are suppressed while loading so
   MarkerCluster / Leaflet pane settles before the mist lifts.
============================================================ */

/*
 * Keep shell chrome at full opacity under the cover.
 * Fading the host (opacity 0→1) made Leaflet marker-pane transforms
 * appear to slide in from a corner during the reveal.
 */
.havena-pro-hero--map.is-map-loading .havena-pro-hero-map__shell > :not(.havena-pro-hero-map__loading),
.havena-pro-hero--map.is-map-loading .havena-pro-map.havena-pro-hero-map__shell > :not(.havena-pro-hero-map__loading) {
  pointer-events: none;
}

.havena-pro-hero--map.is-map-ready .havena-pro-hero-map__shell > :not(.havena-pro-hero-map__loading),
.havena-pro-hero--map.is-map-ready .havena-pro-map.havena-pro-hero-map__shell > :not(.havena-pro-hero-map__loading) {
  pointer-events: auto;
}

/* Kill positional marker/cluster motion while covered (Hero bootstrap only). */
.havena-pro-hero--map.is-map-loading .leaflet-marker-icon,
.havena-pro-hero--map.is-map-loading .leaflet-marker-shadow,
.havena-pro-hero--map.is-map-loading .leaflet-cluster-anim .leaflet-marker-icon,
.havena-pro-hero--map.is-map-loading .leaflet-cluster-anim .leaflet-marker-shadow,
.havena-pro-hero--map.is-map-loading .leaflet-zoom-anim .leaflet-zoom-animated {
  transition: none !important;
  animation: none !important;
}

.havena-pro-hero-map__loading {
  position: absolute;
  inset: 0;
  z-index: 1200;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  background:
    linear-gradient(
      135deg,
      var(--havena-pro-bg-mist, #edf2f7) 0%,
      var(--havena-pro-color-surface-muted, #eef2f8) 42%,
      var(--havena-pro-line, #dbe3ef) 100%
    );
  transition:
    opacity 350ms var(--havena-pro-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    visibility 0s linear 0s;
}

/* Re-enter loading (Elementor destroy/reboot) after a prior ready reveal. */
.havena-pro-hero--map.is-map-loading .havena-pro-hero-map__loading {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0s,
    visibility 0s;
}

.havena-pro-hero-map__loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 28% 38%, rgba(255, 255, 255, 0.55), transparent 62%),
    radial-gradient(ellipse 55% 45% at 72% 68%, rgba(15, 28, 46, 0.06), transparent 70%);
  opacity: 0.9;
  pointer-events: none;
}

.havena-pro-hero-map__loading-shimmer {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: havena-pro-hero-map-shimmer 2.4s ease-in-out infinite;
}

.havena-pro-hero--map.is-map-ready .havena-pro-hero-map__loading {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 350ms var(--havena-pro-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    visibility 0s linear 350ms;
}

@keyframes havena-pro-hero-map-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.havena-pro-hero--map .havena-pro-hero-map__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--havena-pro-color-surface-muted, #EEF2F8);
}

.havena-pro-hero--map .havena-pro-hero-map__fallback-text {
  margin: 0;
  max-width: 28rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--havena-pro-color-muted, #5C6B84);
}

/* ---- Search overlay: Center | Bottom (complete panel) ---- */
.havena-pro-hero--map .havena-pro-map.havena-pro-map--has-filters .havena-pro-map__filters {
  position: absolute;
  z-index: 1100;
  /* H62: match shared embed max-width (48rem) so Hero + Map widget stay aligned. */
  width: min(48rem, calc(100% - 2rem));
  max-width: min(48rem, calc(100% - 2rem));
  margin: 0;
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}

.havena-pro-hero--map .havena-pro-map[data-havena-pro-hero-map-search='bottom'].havena-pro-map--has-filters .havena-pro-map__filters {
  top: auto;
  bottom: 1.25rem;
  transform: translateX(-50%);
}

/*
 * Bottom: open the filter sheet ABOVE the dock so the full panel stays in-map.
 * (Default Home Map sheet is in-flow below the dock — that clips at Bottom.)
 */
.havena-pro-hero--map .havena-pro-map[data-havena-pro-hero-map-search='bottom'] .havena-pro-map__filters-form {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.55rem;
}

.havena-pro-hero--map .havena-pro-map[data-havena-pro-hero-map-search='bottom'] .havena-pro-map__filters-sheet {
  transform-origin: bottom center;
  animation-name: havena-pro-hero-map-sheet-up;
}

@keyframes havena-pro-hero-map-sheet-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .havena-pro-hero--map .havena-pro-map[data-havena-pro-hero-map-search='bottom'] .havena-pro-map__filters-sheet {
    animation: none;
  }
}

/* Bottom: taxonomy / More Filters popovers open upward. */
.havena-pro-hero--map .havena-pro-map[data-havena-pro-hero-map-search='bottom'] .havena-pro-map__filters-popover,
.havena-pro-hero--map .havena-pro-map[data-havena-pro-hero-map-search='bottom'] .havena-pro-map__filters-more {
  top: auto;
  bottom: calc(100% + 0.4rem);
}

/* Draw Area: bottom edge only — left | right (H60e). Stay clear of centered search dock. */
.havena-pro-hero--map .havena-pro-map.havena-pro-map--has-draw .havena-pro-map__draw {
  top: auto;
  bottom: 1rem;
}

.havena-pro-hero--map .havena-pro-map[data-havena-pro-hero-map-draw='bottom_left'].havena-pro-map--has-draw .havena-pro-map__draw {
  left: 1rem;
  right: auto;
}

.havena-pro-hero--map .havena-pro-map[data-havena-pro-hero-map-draw='bottom_right'].havena-pro-map--has-draw .havena-pro-map__draw {
  left: auto;
  right: 1rem;
}

/* When search sits at bottom, nudge Draw slightly up so docks do not stack. */
.havena-pro-hero--map .havena-pro-map[data-havena-pro-hero-map-search='bottom'].havena-pro-map--has-draw .havena-pro-map__draw {
  bottom: 4.75rem;
}

.havena-pro-hero--map .havena-pro-map-popup-wrap,
.havena-pro-hero--map .leaflet-popup-content-wrapper {
  max-width: min(320px, calc(100vw - 2rem));
}

/* H64 fix: Hero keeps a definite Google IW width budget (card SSOT = 312). */
.havena-pro-hero--map .gm-style-iw-c:has(.havena-pro-map-popup-wrap),
.havena-pro-hero--map .gm-style-iw-c[data-havena-pro-map-iw='1'] {
  max-width: min(312px, calc(100vw - 2rem));
}

/*
 * Elementor wrappers (H60E / H60F): match Flagship full-bleed pattern — no invented
 * padding/margin/radius/height from widget or container chrome. Scoped via
 * :has(.havena-pro-hero--map) only — never global .elementor-section overrides.
 */
.elementor-widget-havena-pro-home-hero:has(.havena-pro-hero--map),
.elementor-widget-havena-pro-home-hero:has(.havena-pro-hero--map) > .elementor-widget-container {
  display: block;
  overflow: visible;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 0;
  background: transparent;
}

.e-con:has(.havena-pro-hero--map),
.e-con-full:has(.havena-pro-hero--map),
.elementor-element:has(> .elementor-widget-havena-pro-home-hero .havena-pro-hero--map),
.elementor-top-section:has(.havena-pro-hero--map) {
  overflow: visible;
  max-width: none;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.e-con:has(.havena-pro-hero--map) > .e-con-inner {
  overflow: visible;
  max-width: none;
  padding: 0 !important;
  border-radius: 0;
}

.e-con:has(.havena-pro-hero--map) > .elementor-widget-havena-pro-home-hero,
.e-con:has(.havena-pro-hero--map) > .elementor-element {
  flex-grow: 0 !important;
  align-self: stretch;
  border-radius: 0;
}

.elementor-widget-havena-pro-home-hero:has(.havena-pro-hero--map) .havena-pro-hero--map,
.elementor-widget-havena-pro-home-hero:has(.havena-pro-hero--map) .havena-pro-hero-map__plane,
.elementor-widget-havena-pro-home-hero:has(.havena-pro-hero--map) .havena-pro-hero-map__shell,
.elementor-widget-havena-pro-home-hero:has(.havena-pro-hero--map) .havena-pro-map__host:not(.havena-pro-map-popup-wrap),
.elementor-widget-havena-pro-home-hero:has(.havena-pro-hero--map) .leaflet-container {
  border-radius: 0 !important;
}

@media (max-width: 767px) {
  .havena-pro-hero.havena-pro-hero--map {
    min-height: var(
      --havena-pro-hero-map-min-mobile,
      var(--havena-pro-hero-map-min, var(--havena-pro-map-min-height, 420px))
    );
    height: var(
      --havena-pro-hero-map-min-mobile,
      var(--havena-pro-hero-map-min, var(--havena-pro-map-min-height, 420px))
    );
    padding-top: 0;
    padding-bottom: 0;
  }

  .havena-pro-hero--map .havena-pro-map.havena-pro-map--has-filters .havena-pro-map__filters,
  .havena-pro-hero--map .havena-pro-map[data-havena-pro-hero-map-search='bottom'].havena-pro-map--has-filters .havena-pro-map__filters {
    width: calc(100% - 1.5rem);
    max-width: none;
    left: 0.75rem;
    right: 0.75rem;
    transform: none;
  }

  .havena-pro-hero--map .havena-pro-map[data-havena-pro-hero-map-search='center'].havena-pro-map--has-filters .havena-pro-map__filters {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .havena-pro-hero--map .havena-pro-map[data-havena-pro-hero-map-search='bottom'].havena-pro-map--has-filters .havena-pro-map__filters {
    top: auto;
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    transform: none;
  }

  .havena-pro-hero--map .havena-pro-map-popup-wrap,
  .havena-pro-hero--map .leaflet-popup-content-wrapper {
    max-width: min(280px, calc(100vw - 1.5rem));
  }

  .havena-pro-hero--map .gm-style-iw-c:has(.havena-pro-map-popup-wrap),
  .havena-pro-hero--map .gm-style-iw-c[data-havena-pro-map-iw='1'] {
    max-width: min(268px, calc(100vw - 1.5rem));
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .havena-pro-hero.havena-pro-hero--map {
    min-height: var(
      --havena-pro-hero-map-min,
      var(--havena-pro-map-min-height, 480px)
    );
    height: var(
      --havena-pro-hero-map-min,
      var(--havena-pro-map-min-height, 480px)
    );
  }

  .havena-pro-hero--map .havena-pro-map.havena-pro-map--has-filters .havena-pro-map__filters {
    width: min(36rem, calc(100% - 2rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .havena-pro-hero--map .havena-pro-map-popup,
  .havena-pro-hero--map .leaflet-fade-anim .leaflet-popup {
    transition: none !important;
    animation: none !important;
  }

  /* H63: no shimmer; instant reveal. */
  .havena-pro-hero-map__loading-shimmer {
    animation: none !important;
    background: none;
  }

  .havena-pro-hero-map__loading,
  .havena-pro-hero--map.is-map-ready .havena-pro-hero-map__loading {
    transition: none !important;
  }
}