/**
 * Public favorite button styles.
 */

.ffg-favorite-button-wrap,
.ffg-favorites-launcher,
.ffg-favorites-page {
	--ffg-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ffg-ink: #173b7c;
	--ffg-ink-strong: #0f2654;
	--ffg-ink-soft: #5d6f94;
	--ffg-accent: #6b5ae6;
	--ffg-accent-deep: #5647d2;
	--ffg-teal: #14a7a2;
	--ffg-teal-deep: #0f8e89;
	--ffg-surface: #ffffff;
	--ffg-surface-soft: #f6f8ff;
	--ffg-surface-muted: #eef3ff;
	--ffg-border: rgba( 23, 59, 124, 0.12 );
	--ffg-shadow-soft: 0 20px 44px -28px rgba( 16, 39, 84, 0.28 );
	--ffg-shadow-button: 0 14px 34px -20px rgba( 23, 59, 124, 0.55 );
	--ffg-status-success-bg: #e8f8f5;
	--ffg-status-success-text: #0d746f;
	--ffg-status-error-bg: #fff1f1;
	--ffg-status-error-text: #ba1d1d;
	font-family: var( --ffg-font-family );
	color: var( --ffg-ink-strong );
}

.ffg-favorite-button-wrap *,
.ffg-favorites-launcher *,
.ffg-favorites-page * {
	box-sizing: border-box;
}

.ffg-favorite-button-wrap {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 1rem;
}

.ffg-favorite-button-wrap .ffg-favorites-button,
.ffg-favorites-launcher__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	border-radius: 999px;
	text-decoration: none;
	letter-spacing: 0.01em;
	-webkit-font-smoothing: antialiased;
	transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ffg-favorites-button__icon,
.ffg-favorites-launcher__icon {
	flex: 0 0 1rem;
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3c-1.657 0-3 1.343-3 3v15.25a.75.75 0 0 0 1.154.637L12 17.55l6.846 4.337A.75.75 0 0 0 20 21.25V6c0-1.657-1.343-3-3-3H7Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3c-1.657 0-3 1.343-3 3v15.25a.75.75 0 0 0 1.154.637L12 17.55l6.846 4.337A.75.75 0 0 0 20 21.25V6c0-1.657-1.343-3-3-3H7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ffg-favorite-button-wrap.is-favorited .ffg-favorites-button__icon {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-6.646-4.382-9.121-8.308C.868 9.509 1.148 5.391 4.398 3.274 6.708 1.768 9.534 2.24 12 4.468c2.466-2.229 5.292-2.7 7.602-1.194 3.25 2.117 3.53 6.235 1.52 9.418C18.646 16.618 12 21 12 21Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-6.646-4.382-9.121-8.308C.868 9.509 1.148 5.391 4.398 3.274 6.708 1.768 9.534 2.24 12 4.468c2.466-2.229 5.292-2.7 7.602-1.194 3.25 2.117 3.53 6.235 1.52 9.418C18.646 16.618 12 21 12 21Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ffg-favorite-button-wrap .ffg-favorites-button {
	min-height: 3rem;
	padding: 0.8rem 1.15rem;
	border: 1px solid rgba( 255, 255, 255, 0.18 ) !important;
	background: linear-gradient( 135deg, var( --ffg-ink ) 0%, var( --ffg-accent ) 100% ) !important;
	box-shadow: var( --ffg-shadow-button ) !important;
	color: #ffffff !important;
	font: inherit;
	font-size: 0.975rem;
	font-weight: 700;
	line-height: 1.1;
	cursor: pointer;
	appearance: none;
}

.ffg-favorites-button:hover,
.ffg-favorites-launcher__link:hover {
	transform: translateY( -1px );
	box-shadow: 0 18px 34px -22px rgba( 16, 39, 84, 0.54 );
	text-decoration: none;
}

.ffg-favorite-button-wrap .ffg-favorites-button:active,
.ffg-favorites-launcher__link:active {
	transform: translateY( 1px );
	box-shadow: 0 10px 20px -16px rgba( 16, 39, 84, 0.52 );
}

.ffg-favorite-button-wrap .ffg-favorites-button:focus-visible,
.ffg-favorites-launcher__link:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba( 107, 90, 230, 0.18 ), 0 0 0 6px rgba( 20, 167, 162, 0.18 ), var( --ffg-shadow-button );
}

.ffg-favorite-button-wrap.is-favorited .ffg-favorites-button {
	background: linear-gradient( 135deg, var( --ffg-teal ) 0%, var( --ffg-accent-deep ) 100% ) !important;
}

.ffg-favorite-button-wrap.is-loading .ffg-favorites-button {
	opacity: 0.82;
	transform: none;
	cursor: wait;
}

.ffg-favorites-button[disabled] {
	cursor: wait;
}

.ffg-favorites-button__status {
	display: none;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.8rem;
	border-radius: 999px;
	background: var( --ffg-surface-muted );
	color: var( --ffg-ink );
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	box-shadow: inset 0 0 0 1px rgba( 23, 59, 124, 0.08 );
}

.ffg-favorites-button__status:not(:empty) {
	display: inline-flex;
}

.ffg-favorites-button__status::before {
	content: "";
	flex: 0 0 0.5rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: currentColor;
	opacity: 0.75;
}

.ffg-favorite-button-wrap[data-status-state="success"] .ffg-favorites-button__status {
	background: var( --ffg-status-success-bg );
	color: var( --ffg-status-success-text );
}

.ffg-favorite-button-wrap[data-status-state="error"] .ffg-favorites-button__status {
	background: var( --ffg-status-error-bg );
	color: var( --ffg-status-error-text );
}

.ffg-favorites-launcher {
	margin-top: 0.875rem;
}

.ffg-favorites-launcher.is-hidden {
	display: none;
}

.ffg-favorites-launcher__link {
	padding: 0.8rem 1rem;
	border: 1px solid rgba( 23, 59, 124, 0.12 ) !important;
	background: linear-gradient( 180deg, rgba( 255, 255, 255, 0.97 ) 0%, rgba( 244, 248, 255, 0.97 ) 100% ) !important;
	box-shadow: var( --ffg-shadow-soft ) !important;
	color: var( --ffg-ink-strong ) !important;
	font-size: 0.9625rem;
	font-weight: 700;
	line-height: 1.2;
}

.ffg-favorite-button-wrap .ffg-favorites-button:hover,
.ffg-favorite-button-wrap .ffg-favorites-button:focus-visible {
	color: #ffffff !important;
}

.ffg-favorite-button-wrap .ffg-favorites-button__text,
.ffg-favorites-launcher__label {
	position: relative;
	top: -0.01em;
}

.ffg-favorites-launcher__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.9rem;
	min-height: 1.9rem;
	padding: 0 0.45rem;
	border-radius: 999px;
	background: linear-gradient( 135deg, var( --ffg-ink ) 0%, var( --ffg-accent ) 100% );
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: 700;
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.18 );
}

.ffg-favorites-launcher__count[hidden] {
	display: none;
}

.ffg-favorites-page {
	margin: 2rem 0;
}

.ffg-favorites-page__content {
	padding: clamp( 1rem, 2vw, 1.5rem );
	border: 1px solid var( --ffg-border );
	border-radius: 1.5rem;
	background: linear-gradient( 180deg, rgba( 255, 255, 255, 0.98 ) 0%, rgba( 246, 249, 255, 0.98 ) 100% );
	box-shadow: var( --ffg-shadow-soft );
}

.ffg-favorites-list {
	display: grid;
	gap: 1rem;
}

.ffg-favorites-list.is-loading {
	opacity: 0.88;
}

.ffg-favorites-list__status {
	display: none;
	padding: 0.85rem 1rem;
	border-radius: 1rem;
	background: var( --ffg-status-error-bg );
	color: var( --ffg-status-error-text );
	font-size: 0.925rem;
	font-weight: 600;
}

.ffg-favorites-list__status:not(:empty) {
	display: block;
}

.ffg-favorites-list__loading,
.ffg-favorites-list__empty {
	padding: 1.15rem 1.25rem;
	border: 1px dashed rgba( 23, 59, 124, 0.18 );
	border-radius: 1rem;
	background: linear-gradient( 180deg, rgba( 255, 255, 255, 0.98 ) 0%, rgba( 239, 244, 255, 0.78 ) 100% );
	color: var( --ffg-ink );
	font-size: 0.975rem;
	font-weight: 600;
}

.ffg-favorites-list__empty p {
	margin: 0;
}

.ffg-favorites-list__items {
	display: grid;
	gap: 1rem;
}

.ffg-favorites-list--columns-2 .ffg-favorites-list__items {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.ffg-favorites-item {
	display: grid;
	grid-template-columns: minmax( 0, 132px ) minmax( 0, 1fr );
	gap: 1.1rem;
	padding: 1.15rem;
	border: 1px solid var( --ffg-border );
	border-radius: 1.35rem;
	background: rgba( 255, 255, 255, 0.98 );
	box-shadow: var( --ffg-shadow-soft );
}

.ffg-favorites-item__thumbnail {
	display: block;
	overflow: hidden;
	border-radius: 1rem;
	background: linear-gradient( 180deg, #f4f7ff 0%, #ecf8f6 100% );
	box-shadow: inset 0 0 0 1px rgba( 23, 59, 124, 0.08 );
}

.ffg-favorites-item__thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: inherit;
}

.ffg-favorites-item__content {
	display: grid;
	gap: 0.85rem;
	align-content: start;
}

.ffg-favorites-item__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.ffg-favorites-item__title a {
	color: var( --ffg-ink-strong );
	text-decoration: none;
}

.ffg-favorites-item__title a:hover,
.ffg-favorites-item__title a:focus {
	color: var( --ffg-accent-deep );
	text-decoration: none;
}

.ffg-favorites-item__excerpt {
	margin: 0;
	color: var( --ffg-ink-soft );
	font-size: 0.9625rem;
	line-height: 1.65;
}

.ffg-favorites-item__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.15rem;
}

.ffg-favorite-button-wrap--list {
	margin-top: 0;
}

.ffg-favorite-button-wrap--list .ffg-favorites-button {
	min-height: 2.75rem;
	padding: 0.72rem 1rem;
	font-size: 0.9375rem;
}

@media (max-width: 782px) {
	.ffg-favorites-list--columns-2 .ffg-favorites-list__items,
	.ffg-favorites-item {
		grid-template-columns: minmax( 0, 1fr );
	}

	.ffg-favorites-item__thumbnail {
		max-width: 180px;
	}

	.ffg-favorites-page__content {
		padding: 1rem;
		border-radius: 1.15rem;
	}
}