/* cardpop019.css — CARDPOP0805b 05/08/2026 (ordem Rafael: "quero o card padrão, pare com essa popup feia"
   + "o contato tem que ficar JUNTO, por cima, com botão de WhatsApp com frase pronta").
   Põe a ficha do anúncio (#vmodal) no MESMO padrão visual do card da lista/totem e estiliza o bloco de
   contato que nasce DENTRO da ficha (ctwa019.js). Só aparência.
   Rollback: remover o <link> deste arquivo do _home.html. */

/* ---------- fundo e moldura da ficha ---------- */
#vmodal{ background:rgba(6,7,11,.72) !important; }

#vmodal .dt{
  background:linear-gradient(180deg,#12141c 0%,#0B0B0D 62%) !important;
  border:1px solid rgba(233,169,48,.42) !important;
  box-shadow:0 26px 70px -20px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,203,80,.14) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}

/* ---------- cabeçalho ---------- */
#vmodal .dt .hd{ background:none !important; color:#EFE7D5 !important; padding:0 0 6px !important; }
#vmodal .dt .hd h2{
  color:#F5EEDE !important; font-size:21px !important; line-height:1.25 !important;
  margin:14px 18px 2px !important; letter-spacing:.1px;
}
#vmodal .dt .hd .emp{ color:#E9A930 !important; font-weight:700 !important; margin:0 18px !important; }
#vmodal .dt .hd .close{
  background:rgba(0,0,0,.55) !important; border:1px solid rgba(233,169,48,.45) !important;
  color:#F5EEDE !important; z-index:6 !important;
}

/* ---------- a ARTE do anunciante vira BANNER (era bolinha de 56px) ---------- */
#vmodal .dt .dt-ava.dt-ava-img{
  width:100% !important; height:auto !important; aspect-ratio:1200/511;
  border-radius:0 !important; border:0 !important; border-bottom:1px solid rgba(233,169,48,.34) !important;
  background:#0B0B0D !important; margin:0 !important; display:block !important; overflow:hidden;
}
#vmodal .dt .dt-ava.dt-ava-img img{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block !important;
}
#vmodal .dt .dt-ava:not(.dt-ava-img){
  background:linear-gradient(135deg,rgba(233,169,48,.22),rgba(168,99,5,.12)) !important;
  border:1px solid rgba(233,169,48,.38) !important; color:#E9A930 !important;
  margin:18px 0 0 18px !important;
}

/* ---------- chips ---------- */
#vmodal .dt .dt-chips{ margin:12px 18px 2px !important; }
#vmodal .dt .dtchip{
  background:rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.16) !important;
  color:#EFE7D5 !important; box-shadow:none !important; font-weight:700 !important;
}

/* ---------- corpo ---------- */
#vmodal .dt .bd{ padding:14px 18px 18px !important; }
#vmodal .dt .blk h4{ color:#E9A930 !important; }
#vmodal .dt .sobre{ color:#D8D2C4 !important; }

/* ---------- CTA principal: dourado da marca, texto BRANCO ---------- */
#vmodal .dt .cta-wa{
  background:linear-gradient(135deg,#A86305,#8A5E04) !important;
  color:#FFFFFF !important; border:1px solid rgba(255,203,80,.5) !important;
  box-shadow:0 10px 26px -10px rgba(168,99,5,.75) !important;
  font-weight:800 !important; border-radius:16px !important;
}
#vmodal .dt .cta-wa.cta-vip{
  background:linear-gradient(135deg,#2b2f3a,#1b1e26) !important;
  border-color:rgba(233,169,48,.4) !important; color:#F5EEDE !important;
  box-shadow:none !important;
}

/* ---------- ações compactas ---------- */
#vmodal .dt .dt-acts a{
  background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important;
  color:#EFE7D5 !important; box-shadow:none !important; font-weight:700 !important;
}
#vmodal .dt .dt-acts a svg{ fill:#E9A930 !important; }
#vmodal .dt .dt-acts a .dtfv{ color:#E9A930 !important; }

/* ================= CONTATO DENTRO DA FICHA (ctwa019.js) ================= */
#vmodal .ctw-box{ display:flex; flex-direction:column; gap:8px; margin:0; }

#vmodal .ctw-wa{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  background:linear-gradient(135deg,#128C4A,#0E6B39);
  color:#FFFFFF; border:1px solid rgba(255,255,255,.22);
  border-radius:16px; padding:13px 16px; min-height:56px;
  box-shadow:0 10px 26px -10px rgba(18,140,74,.75); font-weight:800;
}
#vmodal .ctw-wa svg{ flex:0 0 auto; fill:#FFFFFF; }
#vmodal .ctw-wa span{ display:flex; flex-direction:column; line-height:1.2; }
#vmodal .ctw-wa b{ font-size:15.5px; color:#FFFFFF; }
#vmodal .ctw-wa small{ font-size:12.5px; color:rgba(255,255,255,.92); font-weight:600; }
#vmodal .ctw-wa:hover{ filter:brightness(1.08); }

#vmodal .ctw-wa-alt{
  background:linear-gradient(135deg,#A86305,#8A5E04);
  box-shadow:0 10px 26px -10px rgba(168,99,5,.75);
}

#vmodal .ctw-linha{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  text-decoration:none; min-height:46px; padding:10px 14px; border-radius:13px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:#EFE7D5; font-weight:700;
}
#vmodal .ctw-linha:hover{ background:rgba(255,255,255,.1); }
#vmodal .ctw-rot{ color:#E9A930; font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; flex:0 0 auto; }
#vmodal .ctw-val{ color:#F0EADC; font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- telas pequenas ---------- */
@media (max-width:520px){
  #vmodal .dt .hd h2{ font-size:19px !important; margin-left:14px !important; margin-right:14px !important; }
  #vmodal .dt .hd .emp{ margin:0 14px !important; }
  #vmodal .dt .dt-chips{ margin-left:14px !important; margin-right:14px !important; }
  #vmodal .dt .bd{ padding:12px 14px 16px !important; }
  #vmodal .ctw-val{ font-size:13px; max-width:58vw; }
}

/* ===== EMPRESAFIX0814 (14/08/2026) — conserto objetivo da ficha de empresa =====
   Problema medido 13/08: o corpo da ficha (.bd) tinha padding-bottom fixo de 16px, entao o
   fim do texto "Sobre" ficava atras das barras fixas (radio 58px + nav 57px) e a ficha nao
   respeitava a safe-area do iPhone (a ficha de VAGA ja fazia certo; a de empresa nao).
   Conserto aditivo (nao remove regra nenhuma): folga inferior = barras + notch. */
#vmodal .dt .bd{ padding-bottom: calc(132px + env(safe-area-inset-bottom,0px)) !important; }