/**
 * Word Count Tool - Keywords Section
 *
 * Top keywords display with pill-style layout.
 *
 * @package AgenticWP
 */

/* ============================================
   Keywords Section
   ============================================ */

.keywords-section {
	background: #fff;
	border-radius: 16px;
	border: 1px solid var(--tool-border);
	padding: 1.5rem;
	box-shadow: var(--tool-shadow-sm);
}

.keywords-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 1.25rem;
}

/* ============================================
   Keywords Card
   ============================================ */

.keywords-card {
	background: var(--tool-bg-subtle);
	border-radius: 12px;
	padding: 1.25rem;
	min-height: 60px;
}

/* ============================================
   Keywords Empty State
   ============================================ */

.keywords-empty {
	font-size: 0.9375rem;
	color: var(--muted);
	text-align: center;
	margin: 0;
}

.keywords-empty[hidden] {
	display: none;
}

/* ============================================
   Keywords List
   ============================================ */

.keywords-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.keywords-list[hidden] {
	display: none;
}

/* ============================================
   Keyword Pill
   ============================================ */

.keyword-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
	background: #fff;
	border: 1px solid var(--tool-border);
	border-radius: 20px;
	font-size: 0.875rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.keyword-pill:hover {
	border-color: var(--word-count-accent-light, #5eead4);
	box-shadow: var(--tool-shadow-sm);
}

.keyword-word {
	font-weight: 600;
	color: var(--ink);
}

.keyword-count {
	font-size: 0.75rem;
	font-weight: 500;
	color: #fff;
	background: var(--word-count-accent, #14b8a6);
	padding: 0.125rem 0.5rem;
	border-radius: 10px;
	font-variant-numeric: tabular-nums;
}

/* Keyword ranking indicator (optional: for top 3) */
.keyword-pill[data-rank="1"] .keyword-count {
	background: var(--word-count-accent-dark, #134e4a);
}

.keyword-pill[data-rank="2"] .keyword-count {
	background: var(--word-count-accent, #14b8a6);
}

.keyword-pill[data-rank="3"] .keyword-count {
	background: var(--word-count-accent-light, #5eead4);
	color: var(--ink);
}

/* ============================================
   Keyword Percentage Badge
   ============================================ */

.keyword-percent {
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--muted);
	margin-left: 0.25rem;
}

/* ============================================
   Loading State
   ============================================ */

.keywords-card--loading .keywords-list {
	opacity: 0.5;
	pointer-events: none;
}

/* Skeleton pills for loading */
.keyword-pill--skeleton {
	width: 80px;
	height: 32px;
	background: linear-gradient(
		90deg,
		var(--tool-border) 0%,
		var(--tool-bg-subtle) 50%,
		var(--tool-border) 100%
	);
	background-size: 200% 100%;
	animation: skeleton-shimmer 1.5s infinite;
	border-color: transparent;
}

@keyframes skeleton-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}