/* ============================================================
   CHIPS — filter chips, quiz chips, find-your-trip chips
   ============================================================ */

.pz-chip,
.pz-explore__chip,
.pz-fyt__chip,
.pz-quiz__chip,
.pz-explore__chips button,
.pz-fyt button[data-value],
.pz-quiz button[data-value],
.pz-explore__filter button,
.pz-filter-btn,
.pz-v31-decide__soon a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.55em 1em;
  font-family: var(--pz-ff-body);
  font-size: var(--pz-fs-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--pz-ink);
  background: var(--pz-paper);
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-r-pill);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  min-height: 36px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  text-decoration: none !important;
  transition:
    transform var(--t-1) var(--ease-std),
    background-color var(--t-1) var(--ease-std),
    border-color var(--t-1) var(--ease-std),
    color var(--t-1) var(--ease-std),
    box-shadow var(--t-1) var(--ease-std);
}

.pz-chip:hover,
.pz-explore__chip:hover,
.pz-fyt__chip:hover,
.pz-quiz__chip:hover {
  background: var(--pz-paper-2);
  border-color: rgba(28, 25, 23, 0.16);
  color: var(--pz-orange);
}

/* Active / selected state */
.pz-chip[aria-pressed="true"],
.pz-chip.is-active,
.pz-explore__chip.is-active,
.pz-fyt__chip.is-active,
.pz-quiz__chip.is-active,
.pz-explore__chips button.is-active,
.pz-fyt button[data-value].is-active,
.pz-quiz button[data-value].is-active {
  background: var(--pz-ink);
  color: var(--pz-paper);
  border-color: var(--pz-ink);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Press feedback */
.pz-chip:active,
.pz-explore__chip:active,
.pz-fyt__chip:active,
.pz-quiz__chip:active,
.pz-explore__chips button:active,
.pz-fyt button[data-value]:active,
.pz-quiz button[data-value]:active {
  transform: scale(0.96);
  transition-duration: 80ms;
}


/* ============================================================
   HEART — shortlist toggle on cards
   ============================================================ */

.pz-heart,
.pz-heart-btn,
.pz-shortlist-btn,
button[data-shortlist] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 254, 252, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(28, 25, 23, 0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform var(--t-1) var(--ease-out),
    background var(--t-1) var(--ease-std),
    border-color var(--t-1) var(--ease-std);
}

.pz-heart:hover,
.pz-heart-btn:hover {
  background: rgba(255, 254, 252, 1);
  border-color: rgba(194, 65, 12, 0.4);
}

.pz-heart:active,
.pz-heart-btn:active,
.pz-shortlist-btn:active {
  transform: scale(0.88);
  transition-duration: 100ms;
}

.pz-heart.is-saved,
.pz-heart.is-active,
.pz-heart-btn.is-saved,
.pz-heart-btn.is-active,
button[data-shortlist].is-active {
  animation: pz-heart-pop 380ms var(--ease-out);
}

.pz-heart.is-saved svg,
.pz-heart.is-active svg,
.pz-heart-btn.is-saved svg,
.pz-heart-btn.is-active svg,
button[data-shortlist].is-active svg {
  fill: var(--pz-orange);
  color: var(--pz-orange);
}

@keyframes pz-heart-pop {
  0%   { transform: scale(0.88); }
  40%  { transform: scale(1.22); }
  100% { transform: scale(1.0); }
}


/* ============================================================
   LINKS — site-wide subtle hover
   ============================================================ */

a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}


/* ============================================================
   FOCUS RING — single canonical
   ============================================================ */

*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid rgba(194, 65, 12, 0.55);
  outline-offset: 3px;
  border-radius: var(--pz-r-sm);
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}