/**
 * Map listing marker popup — “new” card (SiteConfig LISTING_CARD_NEW === new).
 * Loaded from includes/map-head.php after styles.google-maps.css / styles.mapbox-popup.css.
 */

/* —— Host transparency: Google/Mapbox popup shells are square; opaque backgrounds show
   through outside the card’s border-radius (often visible as colored corner wedges).
   Keep hosts transparent; shadow lives on .mls-listing-map-card only. —— */

.gm-style .gm-style-iw:has(.mls-listing-map-card) {
  background: transparent !important;
  box-shadow: none !important;
}

.gm-style .gm-style-iw-t:has(.mls-listing-map-card) {
  background: transparent !important;
  box-shadow: none !important;
}

.gm-style .gm-style-iw-c:has(.mls-listing-map-card) {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.gm-style .gm-style-iw-d:has(.mls-listing-map-card) {
  background: transparent !important;
  overflow: hidden !important;
  padding: 0 !important;
  max-width: 304px !important;
}

.mapboxgl-popup:has(.mls-listing-map-card) {
  background: transparent !important;
}

.mapboxgl-popup:has(.mls-listing-map-card) .mapboxgl-popup-content {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  padding: 0 !important;
  max-width: 304px !important;
}

/* Pointer triangle: match card body so the seam is clean */
.mapboxgl-popup:has(.mls-listing-map-card) .mapboxgl-popup-tip {
  display: none;
}

.mls-listing-map-card {
  --mls-card-teal: #0d9488;
  --mls-card-navy: #1e3a5f;
  --mls-card-muted: #5c5c5c;
  max-width: 300px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  overflow: hidden;
  font-family: Latomedium, Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
}

.mls-listing-map-card__media {
  position: relative;
  line-height: 0;
  background: #e8e8e8;
}

.mls-listing-map-card__media a {
  display: block;
}

.mls-listing-map-card__media img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  display: block;
  border: 0;
  vertical-align: middle;
}

.mls-listing-map-card__overlay-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 8px 8px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.mls-listing-map-card__overlay-top a,
.mls-listing-map-card__overlay-top button {
  pointer-events: auto;
}

.mls-listing-map-card__badge-price-cut {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #222;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  max-width: 70%;
}

.mls-listing-map-card__overlay-top-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Cierre ×: legible pero discreto sobre la foto */
.mls-listing-map-card__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.38);
  color: rgba(255, 255, 255, 0.95);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

.mls-listing-map-card__close:hover,
.mls-listing-map-card__close:focus {
  background: rgba(0, 0, 0, 0.52);
  color: #fff;
  outline: none;
}

.mls-listing-map-card__close:focus-visible {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.mls-listing-map-card__icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  color: var(--mls-card-navy);
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.mls-listing-map-card__icon-btn--agent {
  background: var(--mls-card-teal);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

/* Photo carousel dots — not implemented yet (see map-common.js buildListingNewCardBlockHtml).
.mls-listing-map-card__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}

.mls-listing-map-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.mls-listing-map-card__dot--active {
  background: var(--mls-card-navy);
  box-shadow: none;
}
*/

.mls-listing-map-card__body {
  padding: 12px 14px 14px;
}

.mls-listing-map-card__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--mls-card-muted);
  margin-bottom: 6px;
}

.mls-listing-map-card__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mls-card-teal);
  flex-shrink: 0;
}

.mls-listing-map-card__price {
  font-size: 22px;
  font-weight: 700;
  color: #111;
  line-height: 1.2;
  margin-bottom: 6px;
}

.mls-listing-map-card__address {
  font-size: 14px;
  color: var(--mls-card-muted);
  line-height: 1.35;
  margin-bottom: 12px;
}

.mls-listing-map-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mls-listing-map-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--mls-card-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.mls-listing-map-card__pill .fa {
  font-size: 12px;
  opacity: 0.95;
}