/* WPCode Snippet Type: CSS Snippet */
/* Snippet Name suggestion: Word Counter Tool - CSS */
/* Insertion: Auto Insert > Site Wide Header (loads on all pages, only applies where the HTML exists) */

#word-counter-tool {
	--wct-bg: #ffffff;
	--wct-border: #e3e5eb;
	--wct-text: #14151a;
	--wct-muted: #6b7280;
	--wct-accent: #4338ca;
	--wct-accent-soft: #eef1ff;
	--wct-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	max-width: 720px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: var(--wct-text);
	box-sizing: border-box;
}

#word-counter-tool *,
#word-counter-tool *::before,
#word-counter-tool *::after {
	box-sizing: border-box;
}

#word-counter-tool .wct-textarea {
	width: 100%;
	min-height: 260px;
	border: 1px solid var(--wct-border);
	border-radius: 10px;
	padding: 16px;
	font-size: 15px;
	line-height: 1.6;
	resize: vertical;
	background: var(--wct-bg);
	color: var(--wct-text);
	font-family: inherit;
}

#word-counter-tool .wct-textarea:focus {
	outline: 2px solid var(--wct-accent);
	outline-offset: 1px;
}

#word-counter-tool .wct-toolbar {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

#word-counter-tool .wct-btn {
	border: 1px solid var(--wct-border);
	background: #fff;
	color: var(--wct-text);
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 13px;
	cursor: pointer;
}

#word-counter-tool .wct-btn:hover {
	border-color: var(--wct-accent);
	color: var(--wct-accent);
}

#word-counter-tool .wct-hero {
	margin-top: 22px;
	text-align: center;
}

#word-counter-tool .wct-hero-number {
	font-family: var(--wct-mono);
	font-size: 56px;
	font-weight: 700;
	color: var(--wct-accent);
	line-height: 1;
}

#word-counter-tool .wct-hero-label {
	margin-top: 4px;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wct-muted);
}

#word-counter-tool .wct-grid {
	margin-top: 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

#word-counter-tool .wct-stat {
	background: var(--wct-accent-soft);
	border-radius: 8px;
	padding: 12px 10px;
	text-align: center;
}

#word-counter-tool .wct-stat-number {
	font-family: var(--wct-mono);
	font-size: 20px;
	font-weight: 700;
	color: var(--wct-text);
}

#word-counter-tool .wct-stat-label {
	margin-top: 2px;
	font-size: 11px;
	color: var(--wct-muted);
}

#word-counter-tool .wct-density {
	margin-top: 20px;
	border-top: 1px solid var(--wct-border);
	padding-top: 14px;
}

#word-counter-tool .wct-density-toggle {
	background: none;
	border: none;
	color: var(--wct-accent);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
}

#word-counter-tool .wct-arrow {
	display: inline-block;
	transition: transform 0.15s ease;
}

#word-counter-tool .wct-density-toggle.is-open .wct-arrow {
	transform: rotate(180deg);
}

#word-counter-tool .wct-density-panel {
	margin-top: 12px;
}

#word-counter-tool .wct-density-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

#word-counter-tool .wct-density-table th {
	text-align: left;
	color: var(--wct-muted);
	font-weight: 600;
	padding: 6px 8px;
	border-bottom: 1px solid var(--wct-border);
}

#word-counter-tool .wct-density-table td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--wct-border);
}

#word-counter-tool .wct-density-empty {
	color: var(--wct-muted);
	text-align: center;
	padding: 14px 0;
}

@media (max-width: 480px) {
	#word-counter-tool .wct-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	#word-counter-tool .wct-hero-number {
		font-size: 44px;
	}
}