:root {
  --fav-size: 28px;
  --fav-color: #e60000;
  --fav-badge-bg: #e60000;
  --fav-badge-fg: #fff;
}

/* Botão no loop (Elementor) */
.fav-btn {
  position: relative;
  width: var(--fav-size);
  height: var(--fav-size);
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform .15s ease;
}
.fav-btn:hover { transform: scale(1.08); }
.fav-btn i {
  font-size: var(--fav-size);
  line-height: 1;
  transition: color .2s ease, opacity .2s ease;
}
.fav-btn .fa-regular { color: #bbb; }
.fav-btn .fa-solid { display: none; color: var(--fav-color); }
.fav-btn.is-on .fa-regular { display: none; }
.fav-btn.is-on .fa-solid { display: inline; }

/* Menu */
.fav-menu {
  position: relative;
  width: var(--fav-size);
  height: var(--fav-size);
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.fav-menu i {
  font-size: var(--fav-size);
  color: var(--fav-color);
}

.fav-menu:hover{
  background: none;
}

.fav-btn:hover {background: none;}
.fav-badge {
    position: absolute;
    top: 1px;
    right: -22px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex
;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #000000;
    color: var(--fav-badge-fg);
    font-size: 11px;
    font-weight: 700;
}

.fav-modal-title{
  font-family:Urbanist;
}

/* Modal */
.fav-modal[hidden] { display: none; }
.fav-modal { position: fixed; inset: 0; z-index: 9999; }
.fav-modal__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.45);
}
.fav-modal__panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(420px, 92vw);
  background: #fff;
  box-shadow: -10px 0 30px rgba(0,0,0,.15);
  display: flex; flex-direction: column;
  animation: favSlide .25s ease;
}
@keyframes favSlide {
  from { transform: translateX(30px); opacity: .5; }
  to { transform: none; opacity: 1; }
}
.fav-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #eee;
}
.fav-close {
  border: 0; background: transparent; font-size: 28px; cursor: pointer;
}
.fav-modal__body { padding: 12px; overflow-y: auto; }
.fav-empty { margin: 16px; color: #777; text-align: center; }

.fav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fav-item {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px; border: 1px solid #eee;
  border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.fav-item__thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: #f3f3f3; }
.fav-item__title { font-size: 14px; margin: 0; }
.fav-item__actions { display: flex; gap: 8px; }
.fav-link { text-decoration: none; color: var(--fav-color); font-weight: 600; }
.fav-remove {
  border: 0; background: #f3f3f3;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12px;
}
/* Remove cor rosa/roxa ao clicar ou focar no botão */
.fav-btn:focus,
.fav-btn:active,
.fav-menu:focus,
.fav-menu:active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
