/*
 * 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; }
}

/* ------------------------------------------------------------------ *
 * CTAs inline (shortcode [czatd_cta]) e a barra fixa do mobile.
 *
 * Ver CZATD_Ctas para o desenho. Aqui só o que é visual — e uma coisa que não
 * é: a barra é escondida por CSS, nunca por PHP. O servidor não sabe a largura
 * da tela, e adivinhar por user-agent envenenaria o page cache anônimo, que
 * tem chave só por URI.
 * ------------------------------------------------------------------ */

.czatd-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
}

.czatd-cta-btn {
  display: inline-block;
  border-radius: 10px;
  padding: 9px 16px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}

/*
 * A HIERARQUIA VISUAL, que é requisito e não enfeite: dois botões de mesmo peso
 * convertem menos que um. O primário é preenchido, o secundário é contorno —
 * foi a mitigação acordada com o dono para oferecer as duas opções sem dividir
 * a atenção.
 *
 * O `.botao` do tema NÃO serve aqui: ele é `width: calc(100% - 20px)` e traz um
 * ::before de ícone, ou seja dois deles empilhariam em vez de conviver na mesma
 * linha, e os dois viriam com o mesmo peso — que é exatamente o que esta regra
 * existe para evitar.
 */
.czatd-cta-forte {
  background: #000;
  color: #FFF;
  font-weight: 700;
}

.czatd-cta-discreto {
  background: transparent;
  color: inherit;
  border: 1px solid rgba(0, 0, 0, .35);
  font-size: .92em;
}

.czatd-cta-forte:hover,
.czatd-cta-forte:focus { color: #FFF; }

/* O foco visível é o que resta a quem navega por teclado — e o ctas.js move o
   foco para o destino depois de rolar, então este outline aparece de verdade. */
.czatd-cta-btn:focus-visible,
.czatd-sessoes:focus-visible,
.czatd-cards:focus-visible,
.czatd-planos:focus-visible,
#czatd-comprar:focus-visible { outline: 2px solid #c9a227; outline-offset: 3px; }

/*
 * A barra fixa nasce ESCONDIDA. Só o @media abaixo a mostra — assim, num
 * navegador que ignore o media query, ela some em vez de aparecer no desktop,
 * onde o dono decidiu que ela não existe.
 */
.czatd-barra { display: none; }

/* Ocultada pelo IntersectionObserver quando o bloco de compra está na tela:
   barra que cobre o próprio destino é ruído. */
.czatd-barra-oculta { display: none !important; }

@media (max-width: 699px) {
  .czatd-barra {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #000;
    border-top: 1px solid #c9a227;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .45);
  }

  .czatd-barra .czatd-barra-txt { color: #FFF; font-size: .95em; }

  .czatd-barra .czatd-barra-btn {
    background: #c9a227;
    color: #000;
    margin: 0;
    white-space: nowrap;
  }

  /*
   * O padding que impede a barra de cobrir o rodapé e o link de WhatsApp do fim
   * do conteúdo. A altura vem do ctas.js (--czatd-barra-h), medida com a barra
   * visível; o fallback cobre o instante antes de o JS rodar.
   *
   * A classe é posta pelo JS e vale enquanto a barra EXISTE, não enquanto ela
   * está visível: amarrá-la à visibilidade faria a página saltar de altura a
   * cada disparo do IntersectionObserver, no meio de uma rolagem suave.
   */
  body.czatd-com-barra { padding-bottom: var(--czatd-barra-h, 64px); }

  .czatd-cta .czatd-cta-btn { width: 100%; }
}

/* ------------------------------------------------------------------ *
 * 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;
}