/* Save (heart) on listing cards, and its small toast. */
.lc { animation-fill-mode: backwards; }      /* lets hover / press transforms work after the entrance */
.lc-wrap { position: relative; }

.lc-heart {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #17284b; background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 10px rgba(23, 40, 75, .18);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: nh-lc-rise .4s var(--ease, cubic-bezier(.2, .8, .2, 1)) backwards;
  transition: scale .15s var(--ease, cubic-bezier(.2, .8, .2, 1)), background .2s;
}
.lc-heart:hover { background: #fff; }
.lc-heart:active { scale: .92; }
.lc-heart:focus-visible { outline: 3px solid var(--brand, #17284b); outline-offset: 2px; }
.lc-heart svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; transition: fill .2s, stroke .2s;
}
.lc-heart.is-saved svg { fill: #d6336c; stroke: #d6336c; animation: nh-heart-pop .35s var(--ease, cubic-bezier(.2, .8, .2, 1)); }
@keyframes nh-heart-pop { 0% { scale: .7; } 60% { scale: 1.2; } 100% { scale: 1; } }

/* the whole card + heart lift together */
@media (hover: hover) {
  .lc-wrap { transition: transform .25s var(--ease, cubic-bezier(.2, .8, .2, 1)); }
  .lc-wrap:hover { transform: translateY(-4px); }
  .lc:hover { transform: none; }
  .lc-wrap:hover .lc { box-shadow: 0 16px 36px rgba(23, 40, 75, .14); }
}

/* phone rows: plain heart, room for it in the text column */
@media (max-width: 560px) {
  .lc-heart { top: 8px; right: 8px; background: transparent; box-shadow: none; }
  .lc-heart:hover { background: transparent; }
  .lc-body { padding: 4px 40px 2px 0; }
}

.nh-fav-toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); translate: -50% 0; z-index: 2100;
  display: flex; align-items: center; gap: 12px; max-width: min(92vw, 420px);
  padding: 12px 18px; border-radius: 9999px; background: #17284b; color: #fff;
  font: 600 14px/1.3 var(--font, system-ui, sans-serif); box-shadow: 0 10px 30px rgba(23, 40, 75, .3);
  animation: nh-toast-in .25s ease backwards;
}
.nh-fav-toast a { color: #fff; font-weight: 800; text-decoration: underline; white-space: nowrap; }
@keyframes nh-toast-in { from { opacity: 0; translate: -50% 12px; } }

@media (prefers-reduced-motion: reduce) {
  .lc-heart, .lc-heart svg, .nh-fav-toast, .lc-wrap { animation: none !important; transition: none !important; }
  .lc-wrap:hover { transform: none; }
}