/**
 * KRISTAL Engagement — shortcode frontend styles.
 * Matches the widget design language: brand-solid share buttons, minimalist
 * outline→fill like button, live-count chip with pulsing green dot.
 * Longhand fonts only (Gotcha #6).
 */

/* ---------- LIKE BUTTON ---------- */

.krengage-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1.5px solid #e5e7eb;
	border-radius: 8px;
	background: #ffffff;
	color: #6b7280;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	transition: all 0.2s cubic-bezier( 0.4, 0, 0.2, 1 );
	-webkit-user-select: none;
	user-select: none;
}
.krengage-btn:hover {
	border-color: #d1d5db;
	background: #f9fafb;
	color: #ef4444;
}
.krengage-btn:active { transform: scale( 0.97 ); }

.krengage-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
}
.krengage-btn-icon svg {
	width: 18px;
	height: 18px;
	display: block;
	transition: fill 0.3s ease, stroke 0.3s ease;
}

.krengage-btn-like.krengage-btn-liked {
	background: #fef2f2;
	border-color: #ef4444;
	color: #ef4444;
}
.krengage-btn-like.krengage-btn-liked:hover {
	background: #fee2e2;
}
.krengage-btn-like.krengage-btn-liked .krengage-btn-icon svg { fill: currentColor; }
.krengage-btn-like.krengage-btn-liked .krengage-btn-icon {
	animation: krengage-lb-pop 0.4s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}
@keyframes krengage-lb-pop {
	0%   { transform: scale( 1 );    }
	40%  { transform: scale( 1.35 ); }
	100% { transform: scale( 1 );    }
}

.krengage-count {
	font-weight: 600;
	padding-left: 4px;
	font-variant-numeric: tabular-nums;
}

/* ---------- SHARE BUTTONS ---------- */

.krengage-share {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}

.krengage-btn-share {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 0;
	border-radius: 8px;
	background: #4a5568;
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.08 );
	transition: filter 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
.krengage-btn-share:hover {
	filter: brightness( 0.92 );
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.12 );
}
.krengage-btn-share:active { transform: scale( 0.97 ); }

.krengage-btn-share-facebook  { background: #1877f2; }
.krengage-btn-share-twitter   { background: #000000; }
.krengage-btn-share-linkedin  { background: #0077b5; }
.krengage-btn-share-whatsapp  { background: #25d366; }
.krengage-btn-share-reddit    { background: #ff4500; }
.krengage-btn-share-telegram  { background: #26a5e4; }
.krengage-btn-share-pinterest { background: #e60023; }
.krengage-btn-share-email     { background: #ea4335; }
.krengage-btn-share-copy      { background: #6366f1; }

.krengage-btn-share .krengage-btn-icon svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.krengage-btn-share.krengage-btn-share-copied {
	background: #22c55e !important;
}

/* ---------- LIVE VISITOR CHIP ---------- */

.krengage-live-count-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 10px;
	background: rgba( 34, 197, 94, 0.08 );
	border: 1px solid rgba( 34, 197, 94, 0.22 );
	border-radius: 999px;
	color: #16a34a;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
}
.krengage-live-count-wrap .krengage-live-dot {
	position: relative;
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #22c55e;
	border-radius: 50%;
	flex-shrink: 0;
}
.krengage-live-count-wrap .krengage-live-dot::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #22c55e;
	border-radius: 50%;
	opacity: 0.6;
	animation: krengage-live-pulse 2s cubic-bezier( 0.4, 0, 0.6, 1 ) infinite;
}
@keyframes krengage-live-pulse {
	0%   { transform: scale( 1 );   opacity: 0.6; }
	100% { transform: scale( 2.6 ); opacity: 0;   }
}
.krengage-live-count {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #15803d;
}