/* Favorites Button Component */

.favorites--btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  height: 28px;
  border-radius: var(--border-radius-global-round, 256px);
  background: var(--surface-default, white);
  border: 1px solid var(--border-primary-default-subtle, #afd4d8);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  color: var(--text-primary-default, #16959f);
  font: var(--body-sm-text-size, 14px) / var(--body-sm-line-height, 20px)
        var(--font-style-body, Merriweather, serif);
  font-weight: 400;
  -webkit-appearance: none;
  appearance: none;
}

/* Icon element (heart SVG) */
.favorites--btn .favorites--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Unfavorited state: outlined heart (uses mask so color inherits from parent) */
.favorites--btn .favorites--icon::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 21L10.55 19.7C8.86667 18.1834 7.475 16.875 6.375 15.775C5.275 14.675 4.4 13.6875 3.75 12.8125C3.1 11.9375 2.64583 11.1334 2.3875 10.4C2.12917 9.66669 2 8.91669 2 8.15002C2 6.58336 2.525 5.27502 3.575 4.22502C4.625 3.17502 5.93333 2.65002 7.5 2.65002C8.36667 2.65002 9.19167 2.83336 9.975 3.20002C10.7583 3.56669 11.4333 4.08336 12 4.75002C12.5667 4.08336 13.2417 3.56669 14.025 3.20002C14.8083 2.83336 15.6333 2.65002 16.5 2.65002C18.0667 2.65002 19.375 3.17502 20.425 4.22502C21.475 5.27502 22 6.58336 22 8.15002C22 8.91669 21.8708 9.66669 21.6125 10.4C21.3542 11.1334 20.9 11.9375 20.25 12.8125C19.6 13.6875 18.725 14.675 17.625 15.775C16.525 16.875 15.1333 18.1834 13.45 19.7L12 21ZM12 18.3C13.6 16.8667 14.9167 15.6375 15.95 14.6125C16.9833 13.5875 17.8 12.6959 18.4 11.9375C19 11.1792 19.4167 10.5042 19.65 9.91252C19.8833 9.32086 20 8.73336 20 8.15002C20 7.15002 19.6667 6.31669 19 5.65002C18.3333 4.98336 17.5 4.65002 16.5 4.65002C15.7167 4.65002 14.9917 4.87086 14.325 5.31252C13.6583 5.75419 13.2 6.31669 12.95 7.00002H11.05C10.8 6.31669 10.3417 5.75419 9.675 5.31252C9.00833 4.87086 8.28333 4.65002 7.5 4.65002C6.5 4.65002 5.66667 4.98336 5 5.65002C4.33333 6.31669 4 7.15002 4 8.15002C4 8.73336 4.11667 9.32086 4.35 9.91252C4.58333 10.5042 5 11.1792 5.6 11.9375C6.2 12.6959 7.01667 13.5875 8.05 14.6125C9.08333 15.6375 10.4 16.8667 12 18.3Z" fill="black"/></svg>');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 21L10.55 19.7C8.86667 18.1834 7.475 16.875 6.375 15.775C5.275 14.675 4.4 13.6875 3.75 12.8125C3.1 11.9375 2.64583 11.1334 2.3875 10.4C2.12917 9.66669 2 8.91669 2 8.15002C2 6.58336 2.525 5.27502 3.575 4.22502C4.625 3.17502 5.93333 2.65002 7.5 2.65002C8.36667 2.65002 9.19167 2.83336 9.975 3.20002C10.7583 3.56669 11.4333 4.08336 12 4.75002C12.5667 4.08336 13.2417 3.56669 14.025 3.20002C14.8083 2.83336 15.6333 2.65002 16.5 2.65002C18.0667 2.65002 19.375 3.17502 20.425 4.22502C21.475 5.27502 22 6.58336 22 8.15002C22 8.91669 21.8708 9.66669 21.6125 10.4C21.3542 11.1334 20.9 11.9375 20.25 12.8125C19.6 13.6875 18.725 14.675 17.625 15.775C16.525 16.875 15.1333 18.1834 13.45 19.7L12 21ZM12 18.3C13.6 16.8667 14.9167 15.6375 15.95 14.6125C16.9833 13.5875 17.8 12.6959 18.4 11.9375C19 11.1792 19.4167 10.5042 19.65 9.91252C19.8833 9.32086 20 8.73336 20 8.15002C20 7.15002 19.6667 6.31669 19 5.65002C18.3333 4.98336 17.5 4.65002 16.5 4.65002C15.7167 4.65002 14.9917 4.87086 14.325 5.31252C13.6583 5.75419 13.2 6.31669 12.95 7.00002H11.05C10.8 6.31669 10.3417 5.75419 9.675 5.31252C9.00833 4.87086 8.28333 4.65002 7.5 4.65002C6.5 4.65002 5.66667 4.98336 5 5.65002C4.33333 6.31669 4 7.15002 4 8.15002C4 8.73336 4.11667 9.32086 4.35 9.91252C4.58333 10.5042 5 11.1792 5.6 11.9375C6.2 12.6959 7.01667 13.5875 8.05 14.6125C9.08333 15.6375 10.4 16.8667 12 18.3Z" fill="black"/></svg>');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Favorited state: filled heart (replaces outline) */
.favorites--btn.favorited .favorites--icon::before {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 20.9999L10.55 19.6999C8.86667 18.1832 7.475 16.8749 6.375 15.7749C5.275 14.6749 4.4 13.6874 3.75 12.8124C3.1 11.9374 2.64583 11.1332 2.3875 10.3999C2.12917 9.66657 2 8.91657 2 8.1499C2 6.58324 2.525 5.2749 3.575 4.2249C4.625 3.1749 5.93333 2.6499 7.5 2.6499C8.36667 2.6499 9.19167 2.83324 9.975 3.1999C10.7583 3.56657 11.4333 4.08324 12 4.7499C12.5667 4.08324 13.2417 3.56657 14.025 3.1999C14.8083 2.83324 15.6333 2.6499 16.5 2.6499C18.0667 2.6499 19.375 3.1749 20.425 4.2249C21.475 5.2749 22 6.58324 22 8.1499C22 8.91657 21.8708 9.66657 21.6125 10.3999C21.3542 11.1332 20.9 11.9374 20.25 12.8124C19.6 13.6874 18.725 14.6749 17.625 15.7749C16.525 16.8749 15.1333 18.1832 13.45 19.6999L12 20.9999Z" fill="black"/></svg>');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 20.9999L10.55 19.6999C8.86667 18.1832 7.475 16.8749 6.375 15.7749C5.275 14.6749 4.4 13.6874 3.75 12.8124C3.1 11.9374 2.64583 11.1332 2.3875 10.3999C2.12917 9.66657 2 8.91657 2 8.1499C2 6.58324 2.525 5.2749 3.575 4.2249C4.625 3.1749 5.93333 2.6499 7.5 2.6499C8.36667 2.6499 9.19167 2.83324 9.975 3.1999C10.7583 3.56657 11.4333 4.08324 12 4.7499C12.5667 4.08324 13.2417 3.56657 14.025 3.1999C14.8083 2.83324 15.6333 2.6499 16.5 2.6499C18.0667 2.6499 19.375 3.1749 20.425 4.2249C21.475 5.2749 22 6.58324 22 8.1499C22 8.91657 21.8708 9.66657 21.6125 10.3999C21.3542 11.1332 20.9 11.9374 20.25 12.8124C19.6 13.6874 18.725 14.6749 17.625 15.7749C16.525 16.8749 15.1333 18.1832 13.45 19.6999L12 20.9999Z" fill="black"/></svg>');
}

/* Label text (icon-label variant only) */
.favorites--btn .favorites--label {
  display: none;
  font-size: var(--body-sm-text-size, 14px);
  line-height: var(--body-sm-line-height, 20px);
  white-space: nowrap;
}

.favorites--btn.favorites--icon-label .favorites--label {
  display: inline;
}

/* Icon-only variant: circular button */
.favorites--btn.favorites--icon-only {
  width: 28px;
  padding: 4px;
}

/* Icon-label variant: pill-shaped button */
.favorites--btn.favorites--icon-label {
  width: auto;
  padding-left: 4px;
  padding-right: 6px;
}

/* Default state (non-interactive) */
.favorites--btn:not(:hover):not(:focus-visible) {
  border-color: var(--border-primary-default-subtle, #afd4d8);
  background: var(--surface-default, white);
  color: var(--text-primary-default, #16959f);
}

/* Hover state with shadow */
.favorites--btn:hover {
  background: var(--surface-primary-default-subtle-hover, #d7eaeb);
  border-color: var(--border-primary-default-subtle-hover, #85bfc5);
  color: var(--text-primary-on-color-subtle-hover, #0d6d75);
  box-shadow:
    0 0 0 4px rgba(106, 125, 140, 0.2),
    0 0 1px 1px rgba(106, 125, 140, 0.15),
    0 0 0 1px rgba(106, 125, 140, 0.6),
    0 0 4px 0 rgba(106, 125, 140, 0.1);
}

/* Focus state with outline */
.favorites--btn:focus-visible {
  outline: none;
  border-color: var(--border-primary-default-subtle-hover, #85bfc5);
  background: var(--surface-default, white);
  box-shadow:
    0 0 0 2px var(--border-primary-focus, #505964);
}

/* Active/pressed state */
.favorites--btn:active {
  transform: scale(0.95);
}

/* Position in search cards (top-right absolute) */
.search-card .favorites--btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  scale: 0.9;
}

/* Position in author cards (top-right absolute within cover) */
.author-card .favorites--btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

/* Position in package cards (top-right absolute) */
.package-card .favorites--btn {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  scale: 0.9;
}

/* Position on map markers (top-right absolute) */
.map-marker .favorites--btn {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  scale: 0.9;
}

/* Page header position */
header .favorites--btn {
  position: absolute;
  top: calc(var(--navbar-height, 114px) + 40px);
  right: 32px;
  color: var(--text-text-primary, #202020);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
}

.favorites--btn.hide-mobile {
  display: inline-flex !important;
}

.favorites--btn.show-mobile {
  display: none !important;
}

@media (max-width: 1280px) {
  header .favorites--btn {
    top: calc(var(--navbar-height-mobile, 52px) + 35px);
  }

  header .favorites--btn:not(.mobile) {
    display: none;
  }

  header .favorites--btn.mobile {
    display: flex;
  }
}

@media (max-width: 743px) {
  .favorites--btn.show-mobile {
    display: inline-flex !important;
  }

  .favorites--btn.hide-mobile {
    display: none !important;
  }
}