/* Estilos do motor de likes/comentários partilhado — ver
   assets/content-engagement.js. Mesma convenção de cart-shared.css:
   var(--token,fallback) para funcionar em qualquer página, e
   font-family:inherit para adotar a tipografia de cada uma. */

.eng-actions { display: flex; align-items: center; gap: 14px; }
.eng-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: .72rem; color: var(--grey2, #888);
  transition: color .2s;
}
.eng-btn:hover { color: var(--red, #CC0000); }
.eng-btn:disabled { opacity: .6; cursor: default; }
.eng-icon { display: block; flex-shrink: 0; }
.eng-like-btn.liked { color: var(--red, #CC0000); }
.eng-count { font-variant-numeric: tabular-nums; }
/* Migração 104 — botão "Sinalizar" nos 5 tipos que deixaram de passar
   por aprovação da administração (services/cursos/produtos/magazine_
   articles/circle_content). Só fica vermelho depois de sinalizado, não
   ao passar o rato — nunca sugerir "gosto" nem chamar demasiada
   atenção antes de ser usado. */
.eng-report-btn.reported { color: var(--red, #CC0000); }

.eng-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 2000; opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.eng-modal-overlay.open { opacity: 1; pointer-events: auto; }
.eng-modal {
  background: var(--white, #fff); max-width: 520px; width: 100%;
  max-height: 85vh; overflow-y: auto; padding: 32px;
  position: relative; box-sizing: border-box; font-family: inherit;
}
.eng-modal-close {
  position: absolute; top: 18px; right: 20px; background: none; border: none;
  font-family: inherit; font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grey2, #888); cursor: pointer;
}
.eng-modal-close:hover { color: var(--red, #CC0000); }
.eng-modal-title {
  font-size: 1.15rem; font-weight: 500; margin: 0 0 20px; padding-right: 60px;
  color: var(--black, #111);
}
.eng-comments-list { margin-bottom: 24px; }
.eng-comment-item { padding: 14px 0; border-top: 1px solid var(--off, #F8F6F3); }
.eng-comment-item:first-child { border-top: none; }
.eng-comment-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.eng-comment-nome { font-size: .84rem; font-weight: 600; color: var(--black, #111); }
.eng-comment-data { font-size: .72rem; color: var(--grey2, #888); }
.eng-comment-texto-view { font-size: .87rem; color: var(--grey, #555); line-height: 1.6; white-space: pre-wrap; }
.eng-comment-texto-view.removed { font-style: italic; color: var(--grey2, #888); }
.eng-comments-empty { font-size: .82rem; color: var(--grey2, #888); font-style: italic; text-align: center; padding: 10px 0; }

/* Respostas + eliminação pelo próprio autor — migração 097. */
.eng-comment-actions { display: flex; gap: 16px; margin-top: 6px; }
.eng-comment-link-btn {
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: .72rem; color: var(--grey2, #888); text-decoration: underline; transition: color .2s;
}
.eng-comment-link-btn:hover { color: var(--red, #CC0000); }
.eng-comment-replies { margin: 12px 0 0 20px; padding-left: 14px; border-left: 2px solid var(--off, #F8F6F3); display: flex; flex-direction: column; gap: 14px; }
.eng-comment-replies:empty { display: none; }
.eng-reply-form { margin-top: 10px; }
.eng-reply-form textarea {
  width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--border, #E2E2E2);
  font-family: inherit; font-size: .82rem; min-height: 60px; resize: vertical; margin-bottom: 8px;
  background: var(--white, #fff); color: var(--black, #111);
}
.eng-reply-form .eng-form-row { margin-bottom: 8px; }
.eng-reply-form .eng-form-row input { padding: 8px 10px; font-size: .8rem; }
.eng-reply-submit {
  background: var(--red, #CC0000); color: #fff; border: none; padding: 8px 16px;
  font-family: inherit; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: background .2s;
}
.eng-reply-submit:hover { background: var(--red-h, #E60000); }
.eng-reply-submit:disabled { opacity: .6; cursor: default; }
.eng-reply-msg { font-size: .74rem; color: var(--grey2, #888); margin: 6px 0 0; }
.eng-reply-msg.ok { color: #2E7D32; }

.eng-comment-form { border-top: 1px solid var(--border, #E2E2E2); padding-top: 20px; }
.eng-as { font-size: .82rem; color: var(--grey, #555); margin: 0 0 12px; }
.eng-form-row { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.eng-form-row input {
  flex: 1; min-width: 140px; padding: 10px 12px; border: 1px solid var(--border, #E2E2E2);
  font-family: inherit; font-size: .85rem; background: var(--white, #fff); color: var(--black, #111);
}
.eng-comment-texto {
  width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--border, #E2E2E2);
  font-family: inherit; font-size: .87rem; min-height: 90px; resize: vertical; margin-bottom: 12px;
  background: var(--white, #fff); color: var(--black, #111);
}
.eng-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.eng-comment-submit {
  background: var(--red, #CC0000); color: #fff; border: none; padding: 11px 22px;
  font-family: inherit; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: background .2s;
}
.eng-comment-submit:hover { background: var(--red-h, #E60000); }
.eng-comment-submit:disabled { opacity: .6; cursor: default; }
.eng-comment-msg { font-size: .78rem; color: var(--red, #CC0000); margin: 10px 0 0; }
.eng-comment-msg.ok { color: #2E7D32; }