/* Slice 27 — Star pin-button component.
 * Reusable across horse / trainer / jockey / course profile pages.
 * Ships hidden — den_pin.js reveals it after the status check.
 */
.den-pin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(63, 85, 68, 0.30);
  background: transparent;
  color: #3f5544;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
              transform 0.05s ease;
  user-select: none;
}
.den-pin-btn:hover {
  background: rgba(63, 85, 68, 0.08);
  border-color: rgba(63, 85, 68, 0.60);
}
.den-pin-btn:active { transform: scale(0.97); }
.den-pin-btn:focus-visible {
  outline: 2px solid #3f5544;
  outline-offset: 2px;
}

/* Filled state when pinned — reads as a completed action. */
.den-pin-btn--pinned {
  background: #3f5544;
  color: #fff8e7;
  border-color: #3f5544;
}
.den-pin-btn--pinned:hover {
  background: #2f4034;
  border-color: #2f4034;
}

.den-pin-btn__icon {
  font-size: 14px;
  line-height: 1;
}
.den-pin-btn__label { line-height: 1; }