/**
 * Favorite Display Styles
 * BuddyPress Favorite Notification Plugin
 *
 * Consumes the shared --bpfn-* design tokens defined in notifications.css
 * (this stylesheet's registered dependency). The tokens are theme-aware
 * (BuddyX --bx-color-* vars) and carry dark-appropriate fallbacks under
 * [data-bx-mode="dark"] / auto + prefers-color-scheme, so the inline
 * display AND the "who liked this" modal follow the active color mode on
 * BuddyX AND on Reign (which sets the mode attribute without defining the
 * --bx-color-* variables).
 */

/* Favorite Count Display */
.bpfn-favorite-display {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	font-size: 14px;
	color: var(--bpfn-text-muted);
	line-height: 1.5;
}

.bpfn-favorite-icon {
	color: var(--bpfn-heart);
	font-size: 16px;
	line-height: 1;
}

.bpfn-favorite-text {
	flex: 1;
}

.bpfn-favorite-text a.bpfn-user-link {
	color: var(--bpfn-link);
	text-decoration: none;
	font-weight: 500;
}

.bpfn-favorite-text a.bpfn-user-link:hover {
	text-decoration: underline;
}

/* Make "X others" clickable link */
a.bpfn-others-count {
	color: var(--bpfn-link);
	text-decoration: none;
	cursor: pointer;
	font-weight: 500;
}

a.bpfn-others-count:hover {
	text-decoration: underline;
}

/* Counter modes ------------------------------------------------------- */

/* Shared shape for the counter in both 'counter' (static) and 'modal'
   (interactive) display modes, so switching modes never shifts the layout.
   Base rule for themes that leave buttons alone; the scoped block below
   re-declares the layout for themes that do not. */
.bpfn-favorite-counter,
.bpfn-view-all-favorites {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--bpfn-text-muted);
}

/*
 * LAYOUT must carry the same specificity as the visual reset below, not
 * just colour and border. Reign 8 restyles Nouveau buttons and wins
 * `display` against a single class, which flips the counter to a block
 * box — and because `gap` only applies to flex/grid containers, the
 * 6px gap silently stops working and the icon jams against the number.
 * A theme overriding `display` must not be able to disable the spacing.
 */
.buddypress .buddypress-wrap .bpfn-favorite-display .bpfn-view-all-favorites,
.buddypress .buddypress-wrap .bpfn-favorite-display .bpfn-favorite-counter,
.bpfn-favorite-display > .bpfn-view-all-favorites,
.bpfn-favorite-display > .bpfn-favorite-counter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
}

.bpfn-favorite-counter .bpfn-favorite-icon,
.bpfn-view-all-favorites .bpfn-favorite-icon {
	color: var(--bpfn-heart);
}

/*
 * The counter is a <button>, so BuddyPress paints it as a form button:
 * `.buddypress .buddypress-wrap button` (specificity 0,2,1) sets a white
 * background, a 1px #ccc border and grey text, and buddypress.min.css loads
 * after this file. A single `.bpfn-view-all-favorites` class (0,1,0) loses
 * that cascade and the counter renders as a boxed grey button mid-stream.
 *
 * Both selectors below are therefore ABOVE (0,2,1): the scoped one for
 * BuddyPress templates, the parent-class one for themes that render the
 * activity loop outside `.buddypress-wrap`. A tie is not enough — BP wins
 * ties on load order.
 */
.buddypress .buddypress-wrap .bpfn-favorite-display .bpfn-view-all-favorites,
.bpfn-favorite-display > .bpfn-view-all-favorites {
	background: transparent;
	border: none;
	box-shadow: none;
	cursor: pointer;
	color: var(--bpfn-text-muted);
	font-size: 14px;
	font-weight: 500;
	/* 40px minimum tap target (Wbcom responsive contract). The negative
	   inline-start margin pulls the padding back out so the counter still
	   aligns flush with the activity text. */
	min-height: 40px;
	padding: 0 8px;
	margin-inline-start: -8px;
	border-radius: 6px;
	text-transform: none;
	letter-spacing: normal;
}

.buddypress .buddypress-wrap .bpfn-favorite-display .bpfn-view-all-favorites:hover,
.bpfn-favorite-display > .bpfn-view-all-favorites:hover {
	color: var(--bpfn-link);
	background: var(--bpfn-surface-hover);
	border: none;
}

.buddypress .buddypress-wrap .bpfn-favorite-display .bpfn-view-all-favorites:focus-visible,
.bpfn-favorite-display > .bpfn-view-all-favorites:focus-visible {
	outline: 2px solid var(--bpfn-link);
	outline-offset: 2px;
}

/* Modal pagination ---------------------------------------------------- */

.bpfn-favorites-pagination {
	margin-top: 16px;
	text-align: center;
}

.bpfn-load-more-favorites {
	background: transparent;
	border: 1px solid var(--bpfn-border);
	border-radius: 6px;
	color: var(--bpfn-link);
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	min-height: 40px;
	padding: 0 20px;
	transition: background 0.2s, border-color 0.2s;
}

.bpfn-load-more-favorites:hover:not(:disabled) {
	background: var(--bpfn-surface-hover);
}

.bpfn-load-more-favorites:focus-visible {
	outline: 2px solid var(--bpfn-link);
	outline-offset: 2px;
}

.bpfn-load-more-favorites:disabled {
	cursor: default;
	opacity: 0.6;
}

/* Modal Overlay */
.bpfn-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	backdrop-filter: blur(1px);
}

.bpfn-modal {
	background: var(--bpfn-surface);
	color: var(--bpfn-text);
	border-radius: 8px;
	border: 1px solid var(--bpfn-border);
	max-width: 450px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 24px;
	position: relative;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	animation: bpfn-modal-slide-up 0.3s ease-out;
}

@keyframes bpfn-modal-slide-up {
	from {
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.bpfn-modal-close {
	position: absolute;
	top: 16px;
	inset-inline-end: 16px;
	background: transparent;
	border: none;
	font-size: 28px;
	cursor: pointer;
	color: var(--bpfn-text-muted);
	line-height: 1;
	padding: 4px 8px;
	border-radius: 4px;
	transition: background 0.2s, color 0.2s;
}

.bpfn-modal-close:hover {
	background: var(--bpfn-surface-hover);
	color: var(--bpfn-text);
}

.bpfn-modal-close:focus {
	outline: 2px solid var(--bpfn-link);
	outline-offset: 2px;
}

/* Modal Content */
.bpfn-favorites-modal-content h3 {
	margin: 0 0 20px 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--bpfn-text);
	padding-inline-end: 40px; /* Space for close button */
}

.bpfn-favorites-user-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bpfn-favorite-user-item {
	margin-bottom: 8px;
}

.bpfn-favorite-user-item a {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--bpfn-text);
	padding: 8px 12px;
	border-radius: 8px;
	transition: background 0.2s;
}

.bpfn-favorite-user-item a:hover {
	background: var(--bpfn-surface-hover);
}

.bpfn-favorite-user-item a:focus-visible {
	outline: 2px solid var(--bpfn-link);
	outline-offset: 2px;
}

.bpfn-favorites-more {
	margin: 12px 0 0;
	color: var(--bpfn-text-muted);
	font-size: 13px;
}

.bpfn-user-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.bpfn-user-name {
	font-weight: 500;
	font-size: 15px;
}

/* Loading State */
.bpfn-loading {
	text-align: center;
	padding: 40px 20px;
	color: var(--bpfn-text-muted);
}

.bpfn-loading:after {
	content: '';
	display: block;
	width: 40px;
	height: 40px;
	margin: 20px auto 0;
	border: 4px solid var(--bpfn-border);
	border-top: 4px solid var(--bpfn-link);
	border-radius: 50%;
	animation: bpfn-spin 1s linear infinite;
}

@keyframes bpfn-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Error State */
.bpfn-error {
	text-align: center;
	padding: 40px 20px;
	color: var(--bx-color-error, #d63638);
}

/* Body modal open state */
body.bpfn-modal-open {
	overflow: hidden;
}

/* Responsive Design */
@media (max-width: 768px) {
	.bpfn-favorite-display {
		flex-wrap: wrap;
		font-size: 13px;
	}

	.bpfn-modal {
		max-width: 95%;
		padding: 20px;
		max-height: 90vh;
	}

	.bpfn-favorites-modal-content h3 {
		font-size: 18px;
	}

	.bpfn-user-avatar {
		width: 36px;
		height: 36px;
	}

	.bpfn-user-name {
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.bpfn-favorite-display {
		font-size: 12px;
	}

	.bpfn-favorite-icon {
		font-size: 14px;
	}

	/* The counter keeps its own scale: it is the whole control in counter and
	   modal modes, so shrinking it with the inline text would drop it below a
	   comfortable read and squeeze the 40px target. */
	.bpfn-favorite-counter,
	.bpfn-view-all-favorites {
		font-size: 13px;
	}

	.bpfn-load-more-favorites {
		width: 100%;
	}

	.bpfn-modal {
		width: 100%;
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
	}

	.bpfn-favorite-text {
		word-break: break-word;
	}
}

/* BuddyPress Theme Compatibility */
#buddypress .activity .bpfn-favorite-display {
	margin-top: 0;
	padding-top: 8px;
}

/* BuddyX Theme Specific */
.buddyx-pro .bpfn-favorite-display {
	padding: 12px 0;
}

.site-wrapper .activity .bpfn-favorite-display {
    padding-left: 15px;
    padding-right: 15px;
}

/* Animation for new favorites */
@keyframes bpfn-pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}

.bpfn-favorite-icon.pulse {
	animation: bpfn-pulse 0.3s ease-in-out;
}