/*
 * Wellen Park neighborhood map: popup + canvas styling
 * Target: Mapster WP Maps sidebar popups (map 28124)
 * !important is required: Mapster styles the popup with ID selectors and inline styles.
 * TODO when globalizing: scope every selector to a wrapper class (e.g. .wellen-map)
 * so other Mapster maps on the site are not affected (the canvas fade-in would hide them).
 */

/* 1. Canvas fade-in: hidden until wellenNeighborhoodStyle adds .wp-styled (prevents blue flash) */
/* Opt-in: solo los mapas que ejecutan wellenNeighborhoodStyle (que agrega .wellen-pending)
   se ocultan hasta estar estilizados. Otros mapas Mapster no se ven afectados. */
.mapster-wp-maps .mapboxgl-canvas {
  transition:opacity .3s ease;
}

.mapster-wp-maps.wellen-pending .mapboxgl-canvas {
  opacity:0;
}

.mapster-wp-maps.wp-styled .mapboxgl-canvas {
  opacity:1;
}

.mapster-sidebar-popup {
  left:auto !important;
  right:16px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:380px !important;
  max-width:calc(100% - 32px) !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  background:#FFFFFF !important;
  border-radius:0 !important;
  box-shadow:0 6px 20px rgba(0,0,0,.2) !important;
  font-family:proxima-nova,Helvetica,Arial,sans-serif !important;
  text-align:left !important;
  overflow-x:hidden !important;
}

.mapster-sidebar-popup > div {
  display:flex !important;
  flex-direction:column !important;
}

.mapster-sidebar-popup .map-sidebar-popup-image {
  order:-1 !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  aspect-ratio:5/3 !important;
  background-size:cover !important;
  background-position:center !important;
}

.mapster-sidebar-popup-exit {
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  z-index:2 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:40px !important;
  height:40px !important;
  padding:0 !important;
  border-radius:50% !important;
  background:#E5C67E !important;
  color:#1E2F52 !important;
  font-size:0 !important;
  line-height:1 !important;
  cursor:pointer !important;
  transition:background .2s ease !important;
}

.mapster-sidebar-popup-exit::before {
  content:'\e932';
  font-family:'icomoon' !important;
  font-style:normal;
  font-weight:normal;
  font-size:16px;
  line-height:1;
  color:#1E2F52;
  -webkit-font-smoothing:antialiased;
}

.mapster-sidebar-popup-exit:hover {
  background:#D9B865 !important;
}

.mapster-sidebar-popup .map-sidebar-popup-header {
  background:#FFFFFF !important;
  padding:22px 24px 16px !important;
}

.mapster-sidebar-popup .map-sidebar-popup-header h2 {
  margin:0 !important;
  padding:0 !important;
  font-family:proxima-nova,Helvetica,Arial,sans-serif !important;
  font-size:26px !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  text-align:left !important;
  color:#1E2F52 !important;
}

.mapster-sidebar-popup .map-sidebar-popup-body {
  background:#FFFFFF !important;
  padding:0 24px !important;
  color:#1E2F52 !important;
}

.mapster-sidebar-popup .map-sidebar-popup-body:not(:has(:not(:empty))) {
  display:none !important;
}

.mapster-sidebar-popup .map-sidebar-popup-body p {
  margin:0 0 10px !important;
  font-size:15px !important;
  line-height:1.45 !important;
  letter-spacing:normal !important;
  text-align:left !important;
  color:#1E2F52 !important;
}

.mapster-sidebar-popup .map-sidebar-popup-body p:empty {
  display:none !important;
}

.mapster-sidebar-popup .map-sidebar-popup-body p:has(> a) {
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:12px 14px !important;
  margin:0 !important;
}

.mapster-sidebar-popup .map-sidebar-popup-body a {
  position:relative !important;
  flex:1 1 130px !important;
  max-width:180px !important;
  box-sizing:border-box !important;
  margin:10px 0 0 4px !important;
  padding:14px 16px 14px 30px !important;
  border:2px solid #E5C67E !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#1E2F52 !important;
  font-family:proxima-nova,Helvetica,Arial,sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.1em !important;
  line-height:1.2 !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  text-align:center !important;
  white-space:nowrap !important;
  transition:color .2s ease !important;
}

.mapster-sidebar-popup .map-sidebar-popup-body a::before {
  content:'\e924';
  font-family:'icomoon' !important;
  font-style:normal;
  font-weight:normal;
  line-height:1;
  position:absolute;
  left:-10px;
  top:50%;
  transform:translateY(-50%);
  padding:0 6px;
  background:#FFFFFF;
  color:inherit;
  font-size:16px;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}

.mapster-sidebar-popup .map-sidebar-popup-body a:hover {
  color:#E5C67E !important;
  background:transparent !important;
}

.mapster-sidebar-popup .map-sidebar-popup-footer {
  background:#FFFFFF !important;
  margin:0 !important;
  padding:18px 24px 24px !important;
  text-align:center !important;
}

.mapster-sidebar-popup .map-sidebar-popup-footer .map-sidebar-popup-footer-button {
  display:inline-block !important;
  margin:0 !important;
  padding:14px 32px !important;
  border:none !important;
  border-radius:999px !important;
  background:#1E2F52 !important;
  color:#FFFFFF !important;
  font-family:proxima-nova,Helvetica,Arial,sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  line-height:1.2 !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  cursor:pointer !important;
  transition:color .2s ease !important;
}

.mapster-sidebar-popup .map-sidebar-popup-footer .map-sidebar-popup-footer-button:hover {
  color:#E5C67E !important;
  background:#1E2F52 !important;
  filter:none !important;
}

.mapster-sidebar-popup:not(:has(.map-sidebar-popup-body a)) .map-sidebar-popup-header h2 {
  text-align:center !important;
}

.mapster-sidebar-popup:not(:has(.map-sidebar-popup-body a)) .map-sidebar-popup-footer {
  padding-top:6px !important;
}