/* =========================================================
   Favorites button (heart) — PHOTO overlay (cards only)
   ========================================================= */

/* ---------------------------------------------------------
   1) Photo host: positioning context (set by JS)
   --------------------------------------------------------- */
.gda-fav-photo-host{
  position: relative !important;
}

/* ---------------------------------------------------------
   2) The heart itself (moved into .gda-fav-photo-host)
   --------------------------------------------------------- */
.gda-fav-onphoto{
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 50 !important;

  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);

  /* hide any text that may exist in the action */
  font-size: 0 !important;
  line-height: 0 !important;
}

.gda-fav-onphoto > *{
  display: none !important;
}

/* Heart icon via mask so it's perfectly centered */
.gda-fav-onphoto::before{
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background-color: rgba(0,0,0,.40);
  -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%0Ad=%22M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78%201.06-1.06a5.5%205.5%200%200%200%200-7.78z%22/%3E%3C/svg%3E') center / contain no-repeat;
          mask: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%0Ad=%22M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78%201.06-1.06a5.5%205.5%200%200%200%200-7.78z%22/%3E%3C/svg%3E') center / contain no-repeat;
}

.gda-fav-onphoto:hover::before{
  background-color: rgba(0,0,0,.65);
}

/* Active state: filled red */
.gda-fav-onphoto.is-active::before,
.gda-fav-onphoto.active::before,
.gda-fav-onphoto[data-state="active"]::before,
.gda-fav-onphoto[aria-pressed="true"]::before{
  background-color: #ef4444;
  -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%23000%22%0Ad=%22M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78%201.06-1.06a5.5%205.5%200%200%200%200-7.78z%22/%3E%3C/svg%3E') center / contain no-repeat;
          mask: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%23000%22%0Ad=%22M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78%201.06-1.06a5.5%205.5%200%200%200%200-7.78z%22/%3E%3C/svg%3E') center / contain no-repeat;
}

/* Focus ring */
.gda-fav-onphoto:focus{
  outline: none;
}
.gda-fav-onphoto:focus-visible{
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .25), 0 6px 18px rgba(0,0,0,.12);
}



/* ---------------------------------------------------------
   3) Hide the original HivePress favorite action (keep in DOM for JS)
   --------------------------------------------------------- */
.gda-fav-original-hidden{
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------
   4) Favorite heart in the listing TITLE row (single listing page)
   We MOVE the original HivePress favorite toggle into the title.
   This keeps native HivePress logic (works + correct active state).
   --------------------------------------------------------- */
.gda-fav-in-title{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Match the card heart style (same circle + outline heart when inactive) */
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;

  /* Align to the FIRST title line visually */
  margin: 8px 10px 0 0 !important;

  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
  overflow: visible !important;

  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer !important;
}

.gda-fav-in-title > *{ display:none !important; }

.gda-fav-in-title::before{
  content: "";
  width: 18px;
  height: 18px;
  display: block;

  /* Outline heart (same as cards) */
  background-color: rgba(0,0,0,.40);
  -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%0Ad=%22M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78%201.06-1.06a5.5%205.5%200%200%200%200-7.78z%22/%3E%3C/svg%3E') center / contain no-repeat;
          mask: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%0Ad=%22M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78%201.06-1.06a5.5%205.5%200%200%200%200-7.78z%22/%3E%3C/svg%3E') center / contain no-repeat;
}

.gda-fav-in-title:hover::before{
  background-color: rgba(0,0,0,.65);
}

.gda-fav-in-title.is-active::before,
.gda-fav-in-title.active::before,
.gda-fav-in-title[data-state="active"]::before,
.gda-fav-in-title[aria-pressed="true"]::before,
.gda-fav-in-title.hp-toggle--active::before,
.gda-fav-in-title.hp-listing__action--active::before{
  background-color: #ef4444;

  /* Filled heart when active (same as cards) */
  -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%23000%22%0Ad=%22M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78%201.06-1.06a5.5%205.5%200%200%200%200-7.78z%22/%3E%3C/svg%3E') center / contain no-repeat;
          mask: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%23000%22%0Ad=%22M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78%201.06-1.06a5.5%205.5%200%200%200%200-7.78z%22/%3E%3C/svg%3E') center / contain no-repeat;
}

/*
  Title layout (single listing page):
  - Heart stays visually on the FIRST title line.
  - The 2nd and next lines start from the LEFT edge (same as the heart start).

  Implementation: absolute-position the heart at the left, and indent ONLY the
  first line of the title text using text-indent.
*/
.hp-page__title.gda-title-with-fav,
.hp-listing__title.gda-title-with-fav,
h1.gda-title-with-fav,
.gda-title-with-fav{
  position: relative !important;
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Heart position: align with the first text line (reliable even if theme has bottom/right styles) */
.gda-title-with-fav > .gda-fav-in-title{
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translateY(8px) !important; /* align with title baseline */
  z-index: 50 !important; /* ensure the heart is clickable above the title text */
}

/*
  Some themes add their own :active/:focus transforms for links/buttons.
  Because we already use transform for baseline alignment, those theme
  transforms can cause a "jump" animation on click. Lock our transform.
*/
.gda-title-with-fav > .gda-fav-in-title:hover,
.gda-title-with-fav > .gda-fav-in-title:focus,
.gda-title-with-fav > .gda-fav-in-title:active,
.gda-title-with-fav > .gda-fav-in-title:focus-visible{
  transform: translateY(8px) !important;
}

/* Text: indent ONLY the first line so it doesn't clash with the heart */
.gda-title-with-fav > .gda-title-text,
.gda-title-with-fav .gda-title-text{
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  text-indent: 42px !important; /* 32px circle + ~10px gap */
}

/* =========================================================
   Single listing: hide the (non-working) heart overlay on gallery/photo
   (we keep the working heart in the title)
   ========================================================= */
/* =========================================================
   Single listing: hide ONLY the heart overlay on the MAIN gallery/photo,
   but keep hearts inside "Similar listings" cards.
   ========================================================= */
body.single-hp_listing.gda-fav-title-ready .hp-page__content .hp-listing--view .gda-fav-photo-host .gda-fav-onphoto,
body.single-hp_listing.gda-fav-title-ready .hp-page__content .hp-listing--single .gda-fav-photo-host .gda-fav-onphoto,
body.single-hp_listing.gda-fav-title-ready .hp-page__content .hp-listing--page .gda-fav-photo-host .gda-fav-onphoto,
body.single-hp_listing.gda-fav-title-ready .hp-page__content .hp-listing__images .hp-listing__action--favorite,
body.single-hp_listing.gda-fav-title-ready .hp-page__content .hp-listing__image .hp-listing__action--favorite,
body.single-hp_listing.gda-fav-title-ready .hp-page__content .hp-listing__cover .hp-listing__action--favorite{
  display: none !important;
}


/* Proxy favorite button base (in case class helpers change) */
.gda-fav-proxy{
  border: 0 !important;
  background: transparent !important;
}


/* Helper: hide duplicate/non-working favorites */
.gda-fav-hide{ display:none !important; }

/* Loading state: prevent double clicks + show subtle spinner */
.gda-fav-loading{
  pointer-events: none !important;
  opacity: .70 !important;
}

/* On single listing title heart, the spinner looks awkward. Keep it clean. */
.gda-fav-in-title.gda-fav-loading::after{
  display: none !important;
}

.gda-fav-loading::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.12);
  border-top-color: rgba(0,0,0,.35);
  animation: gdaFavSpin .8s linear infinite;
}

/* On the single listing title heart the spinner looks odd; keep it clean */
.gda-fav-in-title.gda-fav-loading::after{ display: none !important; }

/* Title heart: spinner ring looks weird next to the title. Keep it clean. */
.gda-fav-in-title.gda-fav-loading::after{
  display: none !important;
}

@keyframes gdaFavSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}