/* LC Heart Ratings – front end */
.lch-badge-wrap,
.lch-block {
	--lch-on: #ff4d6d;
	--lch-off: #d5dde3;
	--lch-accent: #13bdb9;
}

/* Badge after the H1 */
.lch-badge-wrap { margin: 8px 0 14px; line-height: 1; }
.lch-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: #333;
	text-decoration: none;
}
a.lch-badge:hover .lch-count,
a.lch-badge:focus-visible .lch-count { text-decoration: underline; }
.lch-meter { position: relative; display: inline-block; font-size: 18px; line-height: 0; }
.lch-row { display: inline-flex; white-space: nowrap; }
.lch-row svg { flex: 0 0 auto; width: 1.125em; height: 1em; }
.lch-row-bg svg { fill: var(--lch-off); }
.lch-row-fg { position: absolute; top: 0; left: 0; width: var(--lch-pct, 0%); overflow: hidden; }
.lch-row-fg svg { fill: var(--lch-on); }
.lch-avg { font-weight: 700; }
.lch-count { color: #666; }

/* Rating block */
.lch-block {
	margin: 32px auto;
	padding: 22px 18px 18px;
	max-width: 520px;
	text-align: center;
	background: #e6fafa;
	border-radius: 14px;
	scroll-margin-top: 120px;
}
.lch-title { margin: 0 0 10px; font-weight: 700; font-size: 19px; color: #222; }
.lch-hearts { display: inline-flex; gap: 2px; }
.lch-heart {
	all: unset;
	display: inline-block;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 38px;
	line-height: 0;
	padding: 4px;
	border-radius: 50%;
	transition: transform .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.lch-heart svg { display: block; width: 1.125em; height: 1em; fill: var(--lch-off); transition: fill .15s ease; }
.lch-heart.is-on svg { fill: var(--lch-on); }
/* Override theme button hover/focus styles (GeneratePress button colors). */
.lch-block .lch-heart,
.lch-block .lch-heart:hover,
.lch-block .lch-heart:focus,
.lch-block .lch-heart:focus-visible,
.lch-block .lch-heart:active {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	color: inherit !important;
}
.lch-heart:hover,
.lch-heart:focus-visible { transform: scale(1.15); }
.lch-heart.lch-pop { animation: lch-pop .35s ease; }
@keyframes lch-pop { 50% { transform: scale(1.3); } }
.lch-msg { min-height: 1.4em; margin: 8px 0 0; font-size: 15px; color: #333; }
.lch-busy .lch-hearts { opacity: .6; pointer-events: none; }

.lch-fb { margin-top: 12px; text-align: left; }
.lch-fb[hidden] { display: none; }
.lch-fb-q { display: block; font-weight: 600; margin-bottom: 6px; font-size: 15px; }
.lch-fb-text {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	border: 1px solid #b9dede;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	resize: vertical;
}
.lch-fb-send {
	margin-top: 8px;
	padding: 8px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--lch-accent);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

@media (max-width: 480px) {
	.lch-heart { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
	.lch-heart, .lch-heart svg { transition: none; }
	.lch-heart.lch-pop { animation: none; }
}