/* ============================================================
   MAP PRICE MARKERS — Airbnb-style price badges + preview card
   Home map (index) & shared preview-card styles.

   CRITICAL: MapLibre positions each marker element with an inline
   `transform: translate(...)`. We must NEVER set `transform` (or a
   transform-producing animation) on the marker ROOT (.home-map__marker),
   or every marker collapses to the map origin. All visual effects live
   on the INNER pill (.home-map__marker-price), which MapLibre never
   touches.
   ============================================================ */

/* ── Listing price marker: ROOT is a bare positioning anchor ── */
.home-map__marker--price {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  z-index: 3;
  /* NO transform / animation here — owned by MapLibre. */
}

/* The base marker hover rule (home-map.css) resizes the root; keep it bare. */
.home-map__marker--price:hover,
.home-map__marker--price:focus-visible,
.home-map__marker--price.is-reactive {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ── The visible pill (inner) — safe to transform/scale ── */
.home-map__marker-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  color: #222;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  transition:
    transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.16s ease,
    background 0.16s ease,
    color 0.16s ease;
}

/* Fallback pill (no price): small home icon */
.home-map__marker-price--icon {
  padding: 5px;
}
.home-map__marker-price--icon img {
  display: block;
  width: 15px;
  height: 15px;
  object-fit: contain;
  /* home-map.css tints marker imgs white (brightness(0) invert(1)) for the
     dark glass marker; on our white pill that would be invisible. Show the
     icon in a dark tint so it reads on the light badge. */
  filter: brightness(0) !important;
}

:root[data-theme="night"] .home-map__marker-price--icon img {
  filter: brightness(0) invert(1) !important;
}

.home-map__marker--price:hover .home-map__marker-price,
.home-map__marker--price:focus-visible .home-map__marker-price {
  transform: scale(1.06);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.24),
    0 6px 16px rgba(0, 0, 0, 0.22);
}

/* Selected: inverted (dark) badge, like Airbnb */
.home-map__marker--price.is-selected .home-map__marker-price,
.home-map__marker--price[data-selected="true"] .home-map__marker-price {
  background: #222;
  color: #fff;
  border-color: #222;
  transform: scale(1.06);
}
.home-map__marker--price.is-selected,
.home-map__marker--price[data-selected="true"] {
  z-index: 10 !important;
}

/* ── Preview card ────────────────────────────────────────── */
.map-preview-card {
  position: absolute;
  z-index: 20;
  width: 288px;
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
  cursor: default;
  animation: mapPreviewCardIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: bottom center;
}

/* Grid variant: the same card sitting in a results list instead of floating
   over a map. It gives up the popup's absolute placement, fixed width, drop
   shadow and entrance animation, and lets the grid own its size. */
.map-preview-card--grid {
  /* relative, NOT static: the card's full-surface link is absolute with
     inset:0, so the card must stay its containing block. Left static, that
     link resolves against the page and covers the whole viewport. */
  position: relative;
  z-index: auto;
  width: 100%;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  animation: none;
}

.map-preview-card--grid .map-preview-card__gallery {
  border-radius: 16px;
  background: var(--liquid-glass-surface, #e8edf3);
}

.map-preview-card--grid .map-preview-card__body {
  padding: 10px 2px 0;
  color: var(--theme-text);
}

.map-preview-card--grid .map-preview-card__title,
.map-preview-card--grid .map-preview-card__subtitle {
  color: var(--theme-text);
}

@keyframes mapPreviewCardIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.map-preview-card.is-hiding {
  animation: mapPreviewCardOut 0.16s ease both;
}

@keyframes mapPreviewCardOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(4px) scale(0.97);
  }
}

/* Gallery */
.map-preview-card__gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 20 / 19;
  overflow: hidden;
  background: #e8edf3;
}

.map-preview-card__gallery-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* While the pointer is scrubbing across the photo the slide must land on the
   same frame as the mouse — the easing above would read as lag. */
.map-preview-card__gallery-track.is-instant {
  transition: none;
}

.map-preview-card__gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.map-preview-card__gallery-slide--empty {
  background: linear-gradient(135deg, #dde4ec 0%, #e8edf3 100%);
}

.map-preview-card__gallery-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Dots */
.map-preview-card__dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 2;
  pointer-events: none;
}

.map-preview-card__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.map-preview-card__dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

/* Heart / wishlist */
.map-preview-card__wish {
  --map-like-active-color: #ff151c;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  overflow: visible; /* let the burst dots escape the button */
}

.map-preview-card__wish img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  transition:
    transform 0.16s ease,
    filter 0.18s ease;
  pointer-events: none;
}

/* Not liked: force the silhouette to solid white with a dark edge, exactly
   like the search page's favorite button. The source art is a 512px hairline
   outline, so at 24px its stroke lands under one device pixel and washes out
   over bright photos. The first ring of white shadows dilates the line before
   the dark ring draws an edge around the thickened result. */
.map-preview-card__wish:not(.is-liked) img {
  filter: brightness(0) invert(1) drop-shadow(0.15px 0 0 #fff)
    drop-shadow(-0.15px 0 0 #fff) drop-shadow(0 0.15px 0 #fff)
    drop-shadow(0 -0.15px 0 #fff) drop-shadow(0.41px 0 0 rgba(0, 0, 0, 0.34))
    drop-shadow(-0.41px 0 0 rgba(0, 0, 0, 0.34))
    drop-shadow(0 0.41px 0 rgba(0, 0, 0, 0.34))
    drop-shadow(0 -0.41px 0 rgba(0, 0, 0, 0.34))
    /* Ambient stays tight — it now spreads from the dilated shape, so a
       wider blur closes up the icon's counters into a grey smudge. */
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Liked: keep the filled icon's own colour, just add a matching edge. */
.map-preview-card__wish.is-liked img {
  filter: drop-shadow(0.5px 0 0 rgba(0, 0, 0, 0.3))
    drop-shadow(-0.5px 0 0 rgba(0, 0, 0, 0.3))
    drop-shadow(0 0.5px 0 rgba(0, 0, 0, 0.3))
    drop-shadow(0 -0.5px 0 rgba(0, 0, 0, 0.3))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.map-preview-card__wish:hover img,
.map-preview-card__wish:focus-visible img {
  transform: scale(1.12);
}

.map-preview-card__wish:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.88);
  outline-offset: 3px;
}

/* Like animation — the same ripple ring + dot burst + spring pop as the
   search page's favorite button. */
.map-preview-card__wish::before,
.map-preview-card__wish::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  opacity: 0;
}

/* Ripple ring */
.map-preview-card__wish::before {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #ff151c29;
  transform: translate(-50%, -50%) scale(0.35);
}

/* Eight dots bursting outward */
.map-preview-card__wish::after {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--map-like-active-color);
  box-shadow:
    0 -22px 0 var(--map-like-active-color),
    16px -16px 0 var(--map-like-active-color),
    22px 0 0 var(--map-like-active-color),
    16px 16px 0 var(--map-like-active-color),
    0 22px 0 var(--map-like-active-color),
    -16px 16px 0 var(--map-like-active-color),
    -22px 0 0 var(--map-like-active-color),
    -16px -16px 0 var(--map-like-active-color);
  transform: translate(-50%, -50%) scale(0.2);
}

.map-preview-card__wish.is-like-animating img {
  animation: mapwish-pop 0.44s cubic-bezier(0.16, 1, 0.3, 1);
}
.map-preview-card__wish.is-like-animating::before {
  animation: mapwish-ripple 0.44s cubic-bezier(0.16, 1, 0.3, 1);
}
.map-preview-card__wish.is-like-animating::after {
  animation: mapwish-burst 0.52s ease-out;
}
.map-preview-card__wish.is-like-removing img {
  animation: mapwish-remove 0.24s ease-out;
}

@keyframes mapwish-pop {
  0% {
    transform: scale(0.72) rotate(-18deg);
  }
  48% {
    transform: scale(1.22) rotate(10deg);
  }
  72% {
    transform: scale(0.94) rotate(-4deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

@keyframes mapwish-ripple {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  32% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.22);
  }
}

@keyframes mapwish-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0);
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1) rotate(28deg);
  }
}

@keyframes mapwish-remove {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(0.72);
  }
  100% {
    transform: scale(1);
  }
}

/* Body */
.map-preview-card__body {
  padding: 10px 12px 12px;
}

.map-preview-card__title {
  margin: 0 0 1px;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-preview-card__subtitle {
  margin: 0 0 4px;
  color: #6a6a6a;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-preview-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 0 6px;
  color: #222;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.map-preview-card__rating svg {
  width: 11px;
  height: 11px;
  fill: #222;
}

.map-preview-card__rating span {
  font-weight: 500;
  color: #6a6a6a;
}

/* Capacity specs (guests / bedrooms / kitchens / bathrooms) */
.map-preview-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 1px;
}

.map-preview-card__spec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #555;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.map-preview-card__spec img {
  width: 13px;
  height: 13px;
  object-fit: contain;
  opacity: 0.72;
}

.map-preview-card__divider {
  height: 1px;
  margin: 6px 0;
  background: #ededed;
}

.map-preview-card__price-row {
  margin: 0;
}

.map-preview-card__price-total {
  color: #111;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.map-preview-card__price-total strong {
  font-weight: 800;
}

.map-preview-card__cancel {
  color: #2d7a3a;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  margin: 3px 0 0;
}

/* Clickable overlay linking to the listing */
.map-preview-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  text-decoration: none;
  outline: none;
}

/* ── Dark mode ───────────────────────────────────────────── */
:root[data-theme="night"] .home-map__marker-price {
  background: #1a2130;
  color: #f0f6ff;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.4);
}

:root[data-theme="night"] .home-map__marker--price.is-selected .home-map__marker-price,
:root[data-theme="night"] .home-map__marker--price[data-selected="true"] .home-map__marker-price {
  background: #f0f6ff;
  color: #111;
  border-color: #f0f6ff;
}

:root[data-theme="night"] .map-preview-card {
  background: #1a2130;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.28);
}

/* On the map the card is a floating panel; in the results grid it sits
   directly on the page, so it carries no surface of its own. This has to come
   AFTER the night rule above — same specificity, so source order decides. */
:root[data-theme="night"] .map-preview-card--grid,
.map-preview-card--grid {
  background: transparent;
  box-shadow: none;
}

:root[data-theme="night"] .map-preview-card__title,
:root[data-theme="night"] .map-preview-card__price-total {
  color: #f0f6ff;
}

:root[data-theme="night"] .map-preview-card__subtitle,
:root[data-theme="night"] .map-preview-card__rating span,
:root[data-theme="night"] .map-preview-card__spec {
  color: #a0b4cc;
}

:root[data-theme="night"] .map-preview-card__spec img {
  filter: invert(1);
  opacity: 0.6;
}

:root[data-theme="night"] .map-preview-card__rating {
  color: #f0f6ff;
}
:root[data-theme="night"] .map-preview-card__rating svg {
  fill: #f0f6ff;
}

:root[data-theme="night"] .map-preview-card__divider {
  background: #2a3a50;
}

/* ── Mobile: card pinned to the bottom ─────────────────────
   Only the floating map popup gets the bottom-sheet treatment. The search
   page's in-grid cards (.map-preview-card--grid) must stay in flow, so they
   are excluded — otherwise position:fixed pulls every card out of the grid
   and stacks them on top of each other. */
@media (max-width: 900.98px) {
  .map-preview-card:not(.map-preview-card--grid) {
    position: fixed !important;
    bottom: calc(var(--mobile-tabbar-offset, 80px) + 10px) !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    width: auto !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    border-radius: 20px !important;
  }
}