/**
 * Topic/Post Reactions — modernised CSS
 */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

.reactions {
	margin-top: 8px;
	padding: 6px 4px;
	border-top: 1px solid #e9ecef;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	clear: both;
}

/* Total-count badge */
.reactions .badge.icon-tpr.tpr-font {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none;
	background: #6c757d;
	color: #fff;
	border-radius: 10px;
	padding: 2px 8px;
	font-size: 11px;
	min-width: 22px;
	margin: 0 2px 0 0;
}

.reactions .icon-tpr a,
.reactions .tpr-font a {
	color: #fff;
}

[id^="reaction-types"] {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
}

/* Reaction pill — not yet reacted */
.user_alert_new {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 9px 3px 5px;
	border-radius: 14px;
	background: #f8f9fa;
	border: 1px solid #ced4da;
	float: none;
	margin: 0;
	text-decoration: none;
	transition: background 0.12s, border-color 0.12s;
}
.user_alert_new:hover {
	background: #e9ecef;
	border-color: #adb5bd;
	text-decoration: none;
}

/* Reaction pill — already reacted (highlighted) */
.user_alert {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 9px 3px 5px;
	border-radius: 14px;
	background: #e7f0fd;
	border: 1.5px solid #096EFF;
	float: none;
	margin: 0;
	margin-bottom: 0;
	text-decoration: none;
	transition: background 0.12s;
}
.user_alert:hover {
	background: #d2e3fc;
	text-decoration: none;
}

/* Per-reaction count badge */
.reaction_count {
	font-size: 11px;
	font-weight: 600;
	color: #495057;
	background: none;
	padding: 0;
	margin: 0;
	float: none;
	line-height: 1;
}

.reaction_image {
	float: none;
	vertical-align: middle;
	display: inline-block;
}

.reaction_image_size,
.reaction_image_select {
	width: 36px;
	height: 36px;
	cursor: pointer;
	transition: transform 0.1s;
}
.reaction_image_select:hover {
	transform: scale(1.15);
}

/* ACP enabled/disabled states */
.reaction_enabled {
	background: #d4edda !important;
	border: 1px solid #28a745;
	border-radius: 10px;
	padding: 4px 10px;
	margin: 2px;
	display: inline-block;
}

.reaction_disabled,
.reaction_delete {
	background: #f8d7da !important;
	border: 1px solid #dc3545;
	border-radius: 10px;
	padding: 4px 10px;
	margin: 2px;
	display: inline-block;
}

.reaction_inner {
	background: #fff !important;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	padding: 4px;
}

.reaction-avatar img {
	max-height: 30px;
	vertical-align: middle;
	width: auto;
}

.reaction-image-pages {
	width: 35px;
	height: 35px;
	vertical-align: middle;
	padding: 3px;
}

img.reaction-notification {
	max-width: 30px !important;
	max-height: 30px !important;
}

.resync {
	padding: 2px 1px 3px 3px;
	margin-top: 2px;
}

.centered {
	text-align: center;
}

.icon-tpr-resync {
	padding: 0 1px 0 2px;
}

.reaction-reactors {
	font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
	font-size: 17px;
	font-style: italic;
	color: #3a3a4a;
	margin-top: 4px;
	padding: 1px 6px 5px;
	line-height: 1.5;
	letter-spacing: 0.01em;
}

a.reaction-reactors-link,
a.reaction-reactors-link:visited {
	color: #096EFF;
	text-decoration: none;
	font-weight: 500;
}

a.reaction-reactors-link:hover {
	color: #0756C9;
	text-decoration: underline;
}

@media (max-width: 700px) {
	.reaction-button-show { display: block !important; }
}