/* Favorites heart (Airbnb-ish) */
.fav-heart-btn{
  all:unset;
  cursor:pointer;
  position:relative;
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 6px 18px rgba(0,0,0,.14);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
  user-select:none;
}
.fav-heart-btn:hover{
  transform:scale(1.05);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.fav-heart-btn:active{ transform:scale(.98); }

/* subtle burst ring */
.fav-heart-btn::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:2px solid rgba(239,68,68,.0);
  transform:scale(.85);
  opacity:0;
  pointer-events:none;
}
.fav-heart-btn.is-burst::after{
  animation: fav-burst .42s ease-out;
}

.fav-heart-btn .heart-icon{
  width:24px;
  height:24px;
  stroke:#EF4444;
  transition:fill .22s ease, transform .22s ease;
  pointer-events:none;
}

.fav-heart-btn[aria-pressed="true"] .heart-icon{ fill:#EF4444 !important; transform:scale(1.06); }
.fav-heart-btn[aria-pressed="false"] .heart-icon{ fill:none !important; transform:scale(1); }

@keyframes fav-burst{
  0%{ opacity:0; transform:scale(.88); border-color:rgba(239,68,68,.0); }
  35%{ opacity:1; border-color:rgba(239,68,68,.35); }
  100%{ opacity:0; transform:scale(1.18); border-color:rgba(239,68,68,.0); }
}