/* BankMovie V44 — Uiverse-inspired heart watchlist button.
   Replaces the bookmark-pill visual only; existing watchlist APIs/state remain unchanged.
   Applies to archive 1/2/3/4 buttons enhanced by bm-uiverse-elements-v44.js. */

#arc1WlBtn.bm-heart-watchlist,
#watchlistBtn.bm-heart-watchlist,
button#arc1WlBtn.bm-heart-watchlist,
button#watchlistBtn.bm-heart-watchlist{
  box-sizing:border-box!important;
  position:relative!important;
  isolation:isolate!important;
  width:132px!important;
  min-width:132px!important;
  max-width:132px!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  flex:0 0 132px!important;
  margin:0!important;
  padding:0 17px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  overflow:visible!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  border-radius:24px!important;
  border:3px solid rgba(255,226,226,.72)!important;
  color:#766f73!important;
  background:linear-gradient(180deg,#f3f3f3,#e7e7e7)!important;
  box-shadow:rgba(10,37,64,.28) 0 -2px 6px 0 inset,0 10px 22px rgba(0,0,0,.20)!important;
  font-family:var(--bm-font-button,inherit)!important;
  font-size:11.5px!important;
  font-weight:950!important;
  line-height:1!important;
  text-shadow:none!important;
  transition:transform .32s cubic-bezier(.68,-.55,.27,1.55),border-color .32s ease,background .32s ease,box-shadow .32s ease!important;
}

#arc1WlBtn.bm-heart-watchlist::before,
#arc1WlBtn.bm-heart-watchlist::after,
#watchlistBtn.bm-heart-watchlist::before,
#watchlistBtn.bm-heart-watchlist::after{content:none!important;display:none!important}

.bm-heart-watchlist .bm-heart-icons{
  position:relative!important;
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
  display:block!important;
  margin:0!important;
}
.bm-heart-watchlist .bm-heart-icons svg{
  position:absolute!important;
  inset:0!important;
  width:24px!important;
  height:24px!important;
  margin:0!important;
  display:block!important;
  color:#ff6e6e!important;
  fill:currentColor!important;
  stroke:none!important;
  transition:opacity .14s ease,transform .22s ease,filter .22s ease!important;
}
.bm-heart-watchlist .bm-heart-empty{opacity:1!important;transform:scale(1)!important}
.bm-heart-watchlist .bm-heart-filled{opacity:0!important;transform:scale(.72)!important}
.bm-heart-watchlist .bm-heart-label{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:64px!important;
  color:#766f73!important;
  font-size:11.5px!important;
  font-weight:950!important;
  line-height:1!important;
  white-space:nowrap!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}

@keyframes bmHeartBordersV44{
  0%,100%{border-color:rgba(252,228,228,.76)}
  50%{border-color:rgba(255,170,170,.92)}
}
@keyframes bmHeartBeatV44{
  0%,60%,100%{transform:scale(1)}
  15%,45%{transform:scale(1.17)}
  30%{transform:scale(1)}
}

/* Desktop hover follows the supplied Uiverse interaction. */
@media (hover:hover) and (pointer:fine){
  .bm-heart-watchlist:hover{
    background:linear-gradient(180deg,#f8f8f8,#ececec)!important;
    transform:scale(1.05)!important;
    animation:bmHeartBordersV44 3s infinite!important;
    box-shadow:rgba(10,37,64,.30) 0 -2px 6px 0 inset,0 14px 28px rgba(0,0,0,.22)!important;
  }
  .bm-heart-watchlist:hover .bm-heart-empty{opacity:0!important;transform:scale(.72)!important}
  .bm-heart-watchlist:hover .bm-heart-filled{
    opacity:1!important;
    transform:scale(1)!important;
    animation:bmHeartBeatV44 1.2s infinite!important;
    filter:drop-shadow(0 5px 10px rgba(255,110,110,.30))!important;
  }
}

/* Saved state stays filled even without hover. */
.bm-heart-watchlist.active{
  color:#6f6569!important;
  border-color:rgba(255,174,174,.94)!important;
  background:linear-gradient(180deg,#fff2f2,#f4e8e8)!important;
  box-shadow:rgba(143,46,58,.18) 0 -2px 6px 0 inset,0 10px 24px rgba(255,110,110,.12)!important;
}
.bm-heart-watchlist.active .bm-heart-empty{opacity:0!important;transform:scale(.72)!important}
.bm-heart-watchlist.active .bm-heart-filled{opacity:1!important;transform:scale(1)!important;filter:drop-shadow(0 5px 9px rgba(255,110,110,.26))!important}
.bm-heart-watchlist.active .bm-heart-label{color:#6f6569!important}
.bm-heart-watchlist:active{transform:scale(.95)!important}

/* Touch/mobile: keep the label always readable; no sticky hover side-effects. */
@media (hover:none),(pointer:coarse),(max-width:768px){
  #arc1WlBtn.bm-heart-watchlist,
  #watchlistBtn.bm-heart-watchlist,
  button#arc1WlBtn.bm-heart-watchlist,
  button#watchlistBtn.bm-heart-watchlist{
    width:126px!important;
    min-width:126px!important;
    max-width:126px!important;
    flex-basis:126px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    padding:0 14px!important;
    border-width:3px!important;
    border-radius:23px!important;
    gap:8px!important;
  }
  .bm-heart-watchlist .bm-heart-icons,
  .bm-heart-watchlist .bm-heart-icons svg{width:21px!important;height:21px!important;flex-basis:21px!important}
  .bm-heart-watchlist .bm-heart-label{min-width:61px!important;font-size:10.7px!important}
  .bm-heart-watchlist:hover{transform:none!important;animation:none!important}
  .bm-heart-watchlist:not(.active):hover .bm-heart-empty{opacity:1!important;transform:scale(1)!important}
  .bm-heart-watchlist:not(.active):hover .bm-heart-filled{opacity:0!important;transform:scale(.72)!important;animation:none!important}
}