/* MAIS Reactions */
.mais-reactions{
  margin-top:40px;
  padding:25px;
  border-radius:10px;
}

.mais-reactions h3{
  font-size:20px;
  margin:0 0 10px 0;
}

.mais-reactions .reaction-total{
  margin-bottom:15px;
  font-weight:600;
  color:#333;
}

.mais-reactions .reaction-buttons{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mais-reactions .reaction-btn{
  position:relative;
  border:none;
  background:#fff;
  padding:12px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  text-align:left;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}

.mais-reactions .reaction-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.mais-reactions .reaction-btn.active{
  outline:2px solid #0073aa;
}

.mais-reactions .reaction-btn.loading{
  opacity:.75;
  pointer-events:none;
}

.mais-reactions .bar{
  height:6px;
  background:#ddd;
  border-radius:4px;
  margin-top:6px;
  overflow:hidden;
}

.mais-reactions .bar-fill{
  height:100%;
  width:0%;
  background:#0073aa;
  transition:width .4s ease;
}

.mais-reactions .reaction-note{
  margin-top:12px;
  font-size:13px;
  opacity:0;
  transition:opacity .2s ease;
  color:#1d2327;
}

.mais-reactions .reaction-note.show{
  opacity:0.85;
}

/* Optional: Top-Artikel Highlight */
.mais-top-liked{
  outline:2px solid #0073aa;
  border-radius:10px;
  position:relative;
}
.mais-top-liked::before{
  content:"Top";
  position:absolute;
  top:10px;
  right:10px;
  padding:4px 10px;
  font-weight:700;
  border-radius:999px;
  background:#0073aa;
  color:#fff;
  font-size:12px;
}