/* single-mtm_question.css */

/* Fonte geral */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');
body,
.mtm-single-question,
.mtm-single-question * {
  font-family: 'Outfit', sans-serif;
  color: #1B2440;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Container da página */
.mtm-single-question {
  max-width: 960px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Título da pergunta */
.mtm-single-question h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #24BDC0;
  margin-bottom: 10px;
}

/* Texto da pergunta */
.mtm-single-question .mtm-question-text {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 40px;
}

/* Caixa da pergunta (speech-bubble) */
.mtm-single-question .mtm-question-box {
  position: relative;
  background: #F7F9FA;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 60px;
}
.mtm-single-question .mtm-question-box::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 30px;
  border-width: 16px 16px 0 16px;
  border-style: solid;
  border-color: #F7F9FA transparent transparent transparent;
}

/* Cabeçalho de respostas */
.mtm-single-question h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #24BDC0;
  margin-bottom: 24px;
}

/* Lista de respostas */
.mtm-single-question .mtm-response-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Cada resposta */
.mtm-single-question .mtm-response-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
  position: relative;
}

/* Caixa de texto da resposta */
.mtm-single-question .mtm-response-text {
  background: #F7F9FA;
  border-radius: 8px;
  padding: 20px;
  flex: 1;
  font-size: 1rem;
  line-height: 1.6;
  position: relative;
}
.mtm-single-question .mtm-response-text::after {
  content: '';
  position: absolute;
  top: 20px;
  left: -16px;
  border-width: 8px 16px 8px 0;
  border-style: solid;
  border-color: transparent #F7F9FA transparent transparent;
}

/* Card do profissional */
.mtm-single-question .mtm-prof-card {
  width: 240px;
  margin-left: 24px;
  text-align: center;
}
.mtm-single-question .mtm-prof-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 12px;
}
.mtm-single-question .mtm-prof-avatar img {
  width: 100%;
  height: auto;
}
.mtm-single-question .mtm-prof-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: #24BDC0;
  margin-bottom: 4px;
}
.mtm-single-question .mtm-prof-role {
  font-size: 0.9375rem;
  color: #3A506B;
  margin-bottom: 4px;
}
.mtm-single-question .mtm-prof-location {
  font-size: 0.875rem;
  color: #3A506B;
  margin-bottom: 12px;
}

/* Rating (exemplo de estrelas) */
.mtm-single-question .mtm-prof-rating {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.mtm-single-question .mtm-prof-rating svg {
  width: 16px;
  height: 16px;
  fill: #24BDC0;
  margin: 0 2px;
}

/* Botão de agendar */
.mtm-single-question .mtm-prof-button {
  display: inline-block;
  background-color: #24BDC0;
  color: #fff;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 6px;
  transition: background-color .2s;
}
.mtm-single-question .mtm-prof-button:hover {
  background-color: #1fa5a8;
}

/* Responsividade */
@media (max-width: 768px) {
  .mtm-single-question .mtm-response-item {
    flex-direction: column;
  }
  .mtm-single-question .mtm-prof-card {
    width: 100%;
    margin: 16px 0 0;
  }
}

/* Avatar do profissional na seção de respostas */
.mtm-author-avatar-img {
  width: 96px;             /* mantém o tamanho original */
  height: 96px;
  border-radius: 10px;     /* canto arredondado */
  object-fit: cover;       /* recorta proporcionalmente */
  display: block;          /* para eliminar espaçamento indesejado */
  margin-left: 0;       /* posiciona à direita do container flex */
}

/* ——— Novo card de profissional (resposta) no single ——— */
.mtm-single-question .mtm-response-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
  position: relative;
}

/* container do card (antes .mtm-prof-card) */
.mtm-single-question .mtm-response-author {
  width: 240px;
  margin-left: 24px;
  text-align: center;
  flex: 0 0 auto;
}

/* avatar (antes .mtm-prof-avatar) */
.mtm-single-question .mtm-response-author .mtm-author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 12px;
}
/* img interna */
.mtm-single-question .mtm-response-author .mtm-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* nome (antes .mtm-prof-name) */
.mtm-single-question .mtm-response-author .mtm-author-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: #24BDC0;
  margin-bottom: 4px;
}

/* cargo/roles (antes .mtm-prof-role) */
.mtm-single-question .mtm-response-author .mtm-author-roles {
  font-size: 0.9375rem;
  color: #3A506B;
  margin-bottom: 4px;
}

/* local (antes .mtm-prof-location) */
.mtm-single-question .mtm-response-author .mtm-author-location {
  font-size: 0.875rem;
  color: #3A506B;
  margin-bottom: 12px;
}

/* avaliação (antes .mtm-prof-rating) */
.mtm-single-question .mtm-response-author .mtm-author-rating {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.mtm-single-question .mtm-response-author .mtm-author-rating svg {
  width: 16px;
  height: 16px;
  fill: #24BDC0;
  margin: 0 2px;
}

/* botão agendar (antes .mtm-prof-button) */
.mtm-single-question .mtm-response-author .mtm-author-schedule {
  display: inline-block;
  background-color: #24BDC0;
  color: #fff;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 6px;
  transition: background-color .2s;
}
.mtm-single-question .mtm-response-author .mtm-author-schedule:hover {
  background-color: #1fa5a8;
}

/* responsividade igual ao antigo */
@media (max-width: 768px) {
  .mtm-single-question .mtm-response-item {
    flex-direction: column;
  }
  .mtm-single-question .mtm-response-author {
    width: 100%;
    margin: 16px 0 0;
  }
}

/* Substituindo “roles” por “atividade principal” */
.mtm-single-question .mtm-author-activity {
  font-size: 0.9375rem;
  color: #3A506B;    /* ou outra cor do design */
  margin-bottom: 4px;
  font-style: italic; /* opcional, para destacar */
}

/* ===== Likes da resposta ===== */
.mtm-single-question .mtm-response-likes {
  margin: 14px 24px 0;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.mtm-single-question .mtm-like-response {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(36, 189, 192, 0.35);
  border-radius: 999px;
  background: #FFFFFF;
  color: #1B2440;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(27, 36, 64, 0.05);
}

.mtm-single-question .mtm-like-response:hover {
  background: #24BDC0;
  border-color: #24BDC0;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(36, 189, 192, 0.18);
}

.mtm-single-question .mtm-like-response:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.mtm-single-question .mtm-like-response.is-liked {
  background: #24BDC0;
  border-color: #24BDC0;
  color: #FFFFFF;
}

.mtm-single-question .mtm-like-response-text,
.mtm-single-question .mtm-like-count {
  color: inherit;
}

.mtm-single-question .mtm-like-count {
  font-weight: 700;
}

/* ===== Perguntas relacionadas ===== */
.mtm-single-question .mtm-related-questions {
  margin-top: 12px;
  padding-top: 10px;
}

.mtm-single-question .mtm-related-questions-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mtm-single-question .mtm-related-question-item {
  margin-bottom: 12px;
}

.mtm-single-question .mtm-related-question-item a {
  display: block;
  padding: 14px 18px;
  background: #F7F9FA;
  border-radius: 10px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  color: #1B2440;
  transition: all 0.2s ease;
}

.mtm-single-question .mtm-related-question-item a:hover {
  background: #EAF8F8;
  color: #24BDC0;
  transform: translateX(2px);
}

@media (max-width: 768px) {
  .mtm-single-question .mtm-response-likes {
    margin: 14px 0 0;
    justify-content: flex-start;
  }

  .mtm-single-question .mtm-like-response {
    width: auto;
    max-width: 100%;
  }
}