/**
 * HP Blocksy Support — Favorite Button
 * Injected by hpbs-favorite-btn.js into content detail page headers.
 */

.hpbs-fav-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
}

.hpbs-fav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--hp-button-min-height, 44px);
	padding: 7px 16px;
	border: 1px solid var(--color-bg-divider, #E8E3D9);
	border-radius: var(--radius-full, 999px);
	background: var(--color-bg-secondary, #FAF9F6);
	color: var(--color-text-tertiary, #666666);
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--duration-fast, 0.15s) var(--ease-default, ease),
		color var(--duration-fast, 0.15s) var(--ease-default, ease),
		border-color var(--duration-fast, 0.15s) var(--ease-default, ease);
	line-height: 1.4;
}

.hpbs-fav-btn:hover {
	border-color: var(--hp-color-primary, #A8B9A4);
	color: var(--color-text-primary, #3A3530); /* border signals brand; text stays legible */
}

.hpbs-fav-btn:focus-visible {
	outline: 2px solid var(--color-text-primary, #3A3530); /* 14:1 on ivory ✅ */
	outline-offset: 2px;
}

.hpbs-fav-btn--active {
	background: var(--hp-color-primary, #A8B9A4);
	border-color: var(--hp-color-primary, #A8B9A4);
	color: var(--color-text-inverse, #FAF3E3);
}

.hpbs-fav-btn--active:hover {
	background: var(--hp-color-primary-hover, #8FA08A);
	border-color: var(--hp-color-primary-hover, #8FA08A);
	color: var(--color-text-inverse, #FAF3E3);
}

.hpbs-fav-btn--loading {
	/* color-mix instead of opacity: preserves solid button shape, no stacking-context side effects */
	color: color-mix(in oklch, currentColor 55%, var(--color-bg-secondary, #FAF9F6));
	border-color: color-mix(in oklch, var(--color-bg-divider, #E8E3D9) 80%, transparent);
	pointer-events: none;
}

/* Shake + warm error tint live in hpbs-core.css so follow/subscribe (which don't load this sheet) share them. */

.hpbs-fav-btn__count {
	font-size: 0.8rem;
	color: var(--color-text-tertiary, #666666);
	font-weight: 500;
}