/* ==========================================================================
   Wishlist
   ========================================================================== */

.wishlist-button {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-2);
  border: 1px solid var(--sf-border);
  background: var(--sf-surface);
  color: var(--sf-slate-600);
  border-radius: var(--sf-radius-full);
  cursor: pointer;
  line-height: 1;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}

.wishlist-button--icon {
  position: absolute;
  top: var(--sf-space-3);
  right: var(--sf-space-3);
  width: 34px;
  height: 34px;
  justify-content: center;
  padding: 0;
  /* Sits above the card's own link overlay so the click reaches the
     button rather than navigating to the course. */
  z-index: 2;
}

.wishlist-button--full { padding: var(--sf-space-2) var(--sf-space-4); font-size: var(--sf-text-sm); }

.wishlist-button__icon { font-size: var(--sf-text-lg); }

.wishlist-button:hover { color: var(--sf-red-ink); border-color: currentColor; }
.wishlist-button.is-saved { color: var(--sf-red-ink); border-color: currentColor; }
.wishlist-button:active { transform: scale(.92); }

.wishlist-button:focus-visible { outline: 2px solid var(--sf-indigo); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .wishlist-button { transition: none; }
  .wishlist-button:active { transform: none; }
}

.wishlist-page__count {
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-sm);
  color: var(--sf-slate-400);
  margin-bottom: var(--sf-space-5);
}

.wishlist-count[hidden] { display: none; }


/* A finger is not a cursor: WCAG 2.5.8 and Apple's guidance both put the
   minimum around 44px. Raised only where the pointer is coarse, so the
   button stays visually small on a desktop. */
@media (pointer: coarse) {
  .wishlist-button--icon {
    width: 44px;
    height: 44px;
  }
}