/**
 * Área de Membros fooba.studio — Post Reactions CSS.
 * Integrado ao design system do tema FSE ativo.
 */

/* ── Design tokens ───────────────────────────────────────────────── */
.amf-post-reactions {
	--amf-pr-accent:   var(--wp--preset--color--primary,    #005bea);
	--amf-pr-fg:       var(--wp--preset--color--foreground, #1d2327);
	--amf-pr-muted:    var(--wp--preset--color--tertiary,   #717487);
	--amf-pr-bg:       var(--wp--preset--color--background, #ffffff);
	--amf-pr-border:   color-mix(in srgb, var(--amf-pr-accent) 30%, transparent);
	--amf-pr-surface:  color-mix(in srgb, var(--amf-pr-accent) 8%,  var(--amf-pr-bg));
	--amf-pr-fz:       var(--wp--preset--font-size--small,  14px);

	display:       inline-flex;
	align-items:   center;
	gap:           8px;
	font-family:   inherit;
}

/* ── Botão base ───────────────────────────────────────────────────── */
.amf-pr-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
	font-size:     var(--amf-pr-fz);
	font-family:   inherit;
	font-weight:   500;
	cursor:        pointer;
	border:        none;
	background:    none;
	transition:    all 0.18s ease;
	line-height:   1;
	text-decoration: none;
	color:         var(--amf-pr-muted);
}

.amf-pr-btn:focus-visible {
	outline:       2px solid var(--amf-pr-accent);
	outline-offset: 2px;
}

.amf-pr-btn .bi {
	font-size:   1.15em;
	line-height: 1;
}

.amf-pr-count {
	font-variant-numeric: tabular-nums;
	min-width: 1ch;
}

.amf-pr-label { white-space: nowrap; }

/* ── Estilo: pill (padrão) ────────────────────────────────────────── */
.amf-pr-pill .amf-pr-btn {
	padding:       7px 14px;
	border-radius: 20px;
	border:        1.5px solid var(--amf-pr-border);
	background:    var(--amf-pr-bg);
	color:         var(--amf-pr-muted);
}

.amf-pr-pill .amf-pr-btn:hover {
	border-color: var(--amf-pr-accent);
	color:        var(--amf-pr-accent);
	background:   var(--amf-pr-surface);
}

.amf-pr-pill .amf-pr-btn.is-active {
	background:   var(--amf-pr-accent);
	border-color: var(--amf-pr-accent);
	color:        #fff;
	font-weight:  600;
}

.amf-pr-pill .amf-pr-btn.amf-pr-dislike.is-active {
	background:   var(--amf-pr-muted);
	border-color: var(--amf-pr-muted);
}

/* ── Estilo: ghost ────────────────────────────────────────────────── */
.amf-pr-ghost .amf-pr-btn {
	padding:       7px 14px;
	border-radius: 8px;
	border:        1.5px solid var(--amf-pr-border);
	background:    transparent;
	color:         var(--amf-pr-accent);
}

.amf-pr-ghost .amf-pr-btn:hover {
	border-color: var(--amf-pr-accent);
	background:   var(--amf-pr-surface);
}

.amf-pr-ghost .amf-pr-btn.is-active {
	border-color: var(--amf-pr-accent);
	color:        var(--amf-pr-accent);
	background:   var(--amf-pr-surface);
	font-weight:  600;
}

/* ── Estilo: minimal ─────────────────────────────────────────────── */
.amf-pr-minimal .amf-pr-btn {
	padding:       4px 6px;
	border-radius: 4px;
	color:         var(--amf-pr-muted);
}

.amf-pr-minimal .amf-pr-btn:hover {
	color:       var(--amf-pr-accent);
	background:  var(--amf-pr-surface);
}

.amf-pr-minimal .amf-pr-btn.is-active {
	color:       var(--amf-pr-accent);
	font-weight: 600;
}

/* ── Estilo: solid ───────────────────────────────────────────────── */
.amf-pr-solid .amf-pr-btn {
	padding:       8px 16px;
	border-radius: 6px;
	background:    var(--amf-pr-surface);
	color:         var(--amf-pr-accent);
	font-weight:   600;
}

.amf-pr-solid .amf-pr-btn:hover {
	background: color-mix(in srgb, var(--amf-pr-accent) 15%, var(--amf-pr-bg));
}

.amf-pr-solid .amf-pr-btn.is-active {
	background: var(--amf-pr-accent);
	color:      #fff;
}

.amf-pr-solid .amf-pr-btn.amf-pr-dislike.is-active {
	background: var(--amf-pr-muted);
	color:      #fff;
}

/* ── Animação de pulso ao reagir ─────────────────────────────────── */
@keyframes amf-pr-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.22); }
	100% { transform: scale(1); }
}

.amf-pr-btn.is-animating .bi {
	animation: amf-pr-pop 0.28s ease;
}

/* ── Preview no editor de blocos ─────────────────────────────────── */
.amf-pr-editor-wrap {
	padding:     12px 16px;
	background:  #f9f9f9;
	border:      1px dashed #ccc;
	border-radius: 8px;
	display:     flex;
	align-items: center;
	gap:         10px;
}

.amf-pr-editor-label {
	font-size: 11px;
	color:     #888;
	flex:      1;
}