/* CommentsOnSK - Frontend Styles */

.commentsonsk-wrap {
	margin: 32px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Count bar */
.commentsonsk-count-bar {
	display: flex;
	align-items: center;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 2px solid #e5e7eb;
}

.commentsonsk-count-label {
	font-size: 15px;
	font-weight: 700;
	color: #1d2327;
	display: flex;
	align-items: center;
	gap: 5px;
}

.commentsonsk-scheme-dark .commentsonsk-count-bar {
	border-color: #3a3b3c;
}

.commentsonsk-scheme-dark .commentsonsk-count-label {
	color: #e4e6ea;
}

/* Widget container */
.commentsonsk-widget {
	width: 100%;
	min-height: 60px;
}

/* Ensure fb-comments iframe fills its container */
.commentsonsk-widget .fb-comments,
.commentsonsk-widget .fb-comments > span,
.commentsonsk-widget .fb-comments > span > iframe {
	width: 100% !important;
	max-width: 100% !important;
}

/* Loading skeleton while SDK loads */
.commentsonsk-widget:empty::after {
	content: '';
	display: block;
	height: 120px;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: commentsonsk-shimmer 1.4s infinite;
	border-radius: 6px;
}

.commentsonsk-scheme-dark .commentsonsk-widget:empty::after {
	background: linear-gradient(90deg, #3a3b3c 25%, #4a4b4c 50%, #3a3b3c 75%);
	background-size: 200% 100%;
}

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