/**
 * Popularity Indicator Styles
 *
 * @package PriceComparisonPro
 * @since 1.0.8
 */

/* ========================================
   Popularity Indicator
   ======================================== */

.pcp-popularity {
	display: inline-flex;
	align-items: center;
	gap: var(--pcp-spacing-m);
	padding: var(--pcp-spacing-m) var(--pcp-spacing-l);
	background: var(--pcp-color-bg-alt);
	border-radius: var(--pcp-radius-m);
	transition: var(--pcp-transition-fast);
}

.pcp-popularity:hover {
	box-shadow: var(--pcp-shadow-sm);
}

/* Icon Styles */
.pcp-popularity__icon {
	font-size: var(--pcp-font-size-xl);
	line-height: var(--pcp-line-height-tight);
	display: inline-block;
}

/* Pulse animation for emojis */
@keyframes pcp-emoji-pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.15);
	}
}

/* Icon Animation Variants */
.pcp-popularity__icon--high {
	animation: pcp-emoji-pulse 2s ease-in-out infinite;
}

.pcp-popularity__icon--medium {
	animation: pcp-emoji-pulse 2.5s ease-in-out infinite;
}

.pcp-popularity__icon--neutral {
	/* No animation for normal */
}

/* Label Styles */
.pcp-popularity__label {
	font-size: var(--pcp-font-size-s);
	font-weight: var(--pcp-font-weight-semibold);
	color: var(--pcp-color-text);
	line-height: var(--pcp-line-height-tight);
}

/* ========================================
   Responsive Styles
   ======================================== */

/* Mobile - 479px and below */
@media (max-width: 479px) {
	.pcp-popularity {
		padding: var(--pcp-spacing-s) var(--pcp-spacing-m);
		gap: var(--pcp-spacing-s);
	}

	.pcp-popularity__icon {
		font-size: var(--pcp-font-size-base);
	}

	.pcp-popularity__label {
		font-size: var(--pcp-font-size-xs);
	}
}

/* Tablet - 600px and below */
@media (max-width: 600px) {
	.pcp-popularity {
		width: 100%;
		justify-content: center;
	}
}

/* ========================================
   Accessibility
   ======================================== */

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.pcp-popularity__icon--high,
	.pcp-popularity__icon--medium {
		animation: none;
	}
}