/*
 * Blocos da /atendimento/.
 *
 * O bloco vive dentro de um .doisTercos (card branco do grid do mansory), então
 * as cores base são texto escuro sobre branco — nada de fundo próprio.
 */

.czatd { position: relative; }

/* position:relative é REQUISITO do overlay do gate, que é position:absolute
   inset:0 e fica dentro DESTE elemento. Sem isto o overlay se ancora no card do
   mansory (que é absolute) e cobre a página errada.

   O wrapper existe para limitar o alcance do overlay ao bloco de compra: o JS
   do gate marca os IRMÃOS do overlay com `inert`, e com o overlay solto no
   bloco inteiro os links "Ver o plano" do .czatd-planos ficariam mortos
   justamente para o anônimo. */
.czatd-compra { position: relative; }

.czatd-cards { margin-top: 8px; }
.czatd-cards h3,
.czatd-assinante h3,
.czatd-sessoes h3 { margin-top: 0; }

.czatd-card {
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
}

.czatd-card-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.czatd-duracao { font-size: 1.05em; }
.czatd-preco { font-size: 1.25em; font-weight: 700; white-space: nowrap; }

.czatd-btn-comprar { display: inline-block; cursor: pointer; }

.czatd-vitrine-nota { font-size: .9em; opacity: .8; margin: 0; }

.czatd-assinante,
.czatd-sessoes {
  border-left: 3px solid #c9a227;
  padding-left: 14px;
  margin-bottom: 18px;
}

.czatd-horarios,
.czatd-conta,
.czatd-extra { font-size: .9em; opacity: .85; }

.czatd-planos {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, .12);
}
.czatd-planos h4 { margin-top: 0; }

/*
 * O mansory impõe `.post_content .doisTercos img{width:100%;float:none;
 * position:relative}` em QUALQUER imagem do conteúdo — e o bloco É injetado no
 * the_content. Especificidade 0,2,1 contra 0,1,0 da classe da logo, então ele
 * vence e a logo do Mercado Pago sai esticada na largura do card.
 *
 * Regra de CLASSE, com !important, NUNCA style inline no <img>: o account.js
 * troca czum-logo-active <-> czum-logo-thumb entre as imagens do header, e
 * estilo inline gruda no elemento — acompanharia a logo errada depois do
 * toggle. Foi esse o bug do card do ritual.
 */
.post_content .doisTercos .czatd .czum-ml-logo,
.post_content .doisTercos .czatd .czum-embed-header img {
  width: auto !important;
  float: none !important;
  position: static !important;
  /* !important também na altura: o WP carimba width/height no <img> e o tema
     tem regras de imagem no .post_content. Sem isto a logo entra com os 70px
     do atributo. */
  height: 35px !important;
}

/*
 * A MESMA armadilha do mansory, agora na miniatura do card de plano.
 *
 * `.post_content .doisTercos img` (0,2,1) vence `.czum-plano-thumb` (0,1,0) do
 * planos.css. E o mansory não declara só `width`: no desktop (min-width:700px)
 * ele chega a pôr `width:50%; float:right; margin-left:20px` na imagem, e a
 * regra que vem depois zera o float mas mantém `margin-left:0` — ou seja, a
 * miniatura entraria com o alinhamento do mansory, não com o `margin:0 auto` do
 * card. Aqui as três declarações são fixadas no que o planos.css pede, para o
 * card sair idêntico ao da /planos/.
 *
 * Regra de CLASSE com !important, NUNCA style inline no <img> — mesmo motivo da
 * regra da logo do Mercado Pago logo acima.
 */
.post_content .doisTercos .czatd .czum-plano-thumb {
  width: 100% !important;
  height: auto !important;
  float: none !important;
  position: static !important;
  margin: 0 auto 1rem !important;
}

@media (max-width: 699px) {
  .czatd-card-topo { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ------------------------------------------------------------------ *
 * Prova social.
 *
 * O bloco só existe no DOM quando há depoimento — ver CZATD_Prova_Social —
 * então não há estado "vazio" a estilizar aqui, e é de propósito: uma regra
 * de :empty seria a segunda defesa de uma garantia que já é do PHP, e as duas
 * divergiriam no dia em que uma mudasse.
 * ------------------------------------------------------------------ */
.czatd-prova h3 { margin-top: 0; }

.czatd-depoimento {
  margin: 0 0 18px;
  padding: 0 0 0 16px;
  border-left: 3px solid rgba(0, 0, 0, .18);
  /* O tema estiliza blockquote no .post_content; sem isto o depoimento entra
     centralizado e em itálico, que lê como epígrafe e não como depoimento. */
  font-style: normal;
  text-align: left;
}

.czatd-depoimento:last-child { margin-bottom: 0; }
.czatd-depoimento p { margin: 0; }

.czatd-depoimento cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: .9em;
  opacity: .75;
}