/* Favorite-player toggle button (favorite-player.js) -- shared across
   player-profile.php (full pill, dark hero section), players.php's own
   favorites list (full pill, light section) and its live search results
   (--compact, icon only). */

.pca-favorite-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: var(--pc-space-sm);
	border: 1px solid var(--pc-light-border);
	border-radius: 999px;
	padding: 0.5rem 1rem;
	background: var(--pc-light-surface);
	color: var(--pc-light-text);
	font-family: var(--pc-font-body);
	font-weight: 700;
	font-size: 0.8125rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.pca-favorite-toggle:hover {
	transform: translateY(-1px);
	border-color: var(--pc-red);
}

.pca-favorite-toggle:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

.pca-favorite-toggle-icon {
	font-size: 1.1em;
	line-height: 1;
	transition: transform 0.2s ease;
}

/* Favorited state -- filled red pill, same red the rest of the site
   already uses for its one accent color (--pc-red), star scaled up
   slightly so the state change reads as more than just a color swap. */
.pca-favorite-toggle[aria-pressed="true"] {
	background: var(--pc-red);
	border-color: var(--pc-red);
	color: #fff;
}

.pca-favorite-toggle[aria-pressed="true"] .pca-favorite-toggle-icon {
	transform: scale(1.15);
}

.pca-favorite-toggle[aria-pressed="true"]:hover {
	background: var(--pc-red-hover);
	border-color: var(--pc-red-hover);
}

/* On a dark section (player-profile.php's hero) the default light-surface
   pill would look like a mistake -- same "transparent + dark-border/text,
   filled red once favorited" treatment .pc-btn--outline already uses on a
   dark section elsewhere on the site. */
.pc-section--dark .pca-favorite-toggle {
	background: transparent;
	border-color: var(--pc-dark-border);
	color: var(--pc-dark-text);
}

.pc-section--dark .pca-favorite-toggle[aria-pressed="true"] {
	background: var(--pc-red);
	border-color: var(--pc-red);
	color: #fff;
}

/* Compact (search results): icon only, no pill/border -- a small inline
   affordance next to each result rather than a full button competing
   with the result link for attention. */
.pca-favorite-toggle--compact {
	margin-top: 0;
	padding: 0.35rem;
	border: none;
	background: transparent;
	color: var(--pc-light-text-muted);
}

.pca-favorite-toggle--compact:hover {
	transform: none;
	color: var(--pc-red);
}

.pca-favorite-toggle--compact[aria-pressed="true"] {
	background: transparent;
	color: var(--pc-red);
}