/* OS CONVITES DA FESTA.
 *
 * Duas pecas no mesmo ficheiro: a pagina onde os pais montam os convites
 * e a folha de cartoes que sai na impressora. Partilham os emblemas e as
 * cores dos temas, e e por isso que vivem juntas.
 *
 * A cor do tema entra por `--cor` / `--cor2`, postas na propria etiqueta
 * pelo PHP. Assim acrescentar um tema novo e so acrescenta-lo ao
 * `temas_convite()` — nao ha aqui uma classe por tema para esquecer.
 */

/* ---------------------------------------------------------- o cabecalho */

.cv-topo{
  background:linear-gradient(135deg,var(--cor),var(--cor2));
  color:#fff;border-radius:var(--raio);
  padding:1.6rem 1.5rem;margin-bottom:1.75rem;text-align:center;
}
.cv-etiqueta{
  display:inline-block;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.12em;opacity:.85;margin-bottom:.35rem;
}
.cv-topo h1{font-size:1.7rem;margin:0 0 .35rem;color:#fff}
.cv-quando{margin:0;font-size:.95rem;opacity:.92}

.cv-seccao{
  font-size:1.1rem;margin:2rem 0 .9rem;
  padding-bottom:.4rem;border-bottom:1px solid var(--linha);
}

/* ------------------------------------------------------------- os temas */

.cv-temas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.75rem;margin:0;
}
.cv-tema{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  background:var(--superficie);border:2px solid var(--linha);
  border-radius:var(--raio);padding:1rem .75rem;cursor:pointer;
  font:inherit;color:var(--tinta);text-align:center;width:100%;
  transition:border-color .15s,transform .15s;
}
.cv-tema:hover{border-color:var(--cor);transform:translateY(-2px)}
.cv-tema.escolhido{
  border-color:var(--cor);
  background:linear-gradient(135deg,var(--cor),var(--cor2));color:#fff;
}
.cv-tema-nome{font-weight:700;font-size:.95rem}
.cv-tema-sub{font-size:.75rem;opacity:.8}

/* OS EMBLEMAS.
 *
 * Desenhados aqui com `mask`, a partir de SVG escrito a mao na propria
 * regra: sao quatro formas simples e nao justificam quatro ficheiros de
 * imagem a carregar. A cor vem da cor do tema — ou do branco, quando o
 * cartao ja esta pintado. */
.cv-emblema{
  display:block;width:38px;height:38px;background:var(--cor);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.cv-tema.escolhido .cv-emblema,.cc-faixa .cv-emblema{background:#fff}

.cv-bola{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1.6A10.4 10.4 0 1 0 22.4 12 10.41 10.41 0 0 0 12 1.6Zm0 1.9 3.3 2.4-1.26 3.9H9.96L8.7 5.9Zm-5.5 2.2.98 3-3.3 1.1a8.6 8.6 0 0 1 2.32-4.1Zm11 0a8.6 8.6 0 0 1 2.32 4.1l-3.3-1.1ZM4.6 15.1A8.5 8.5 0 0 1 3.6 12l3.25-1.09 2.63 3.62-1.24 3.83A8.55 8.55 0 0 1 4.6 15.1Zm7.4 5.3a8.5 8.5 0 0 1-2.1-.26l1.2-3.7h3.8l1.2 3.7a8.5 8.5 0 0 1-2.1.26Zm3.76-2.04-1.24-3.83 2.63-3.62L20.4 12a8.5 8.5 0 0 1-1 3.1 8.55 8.55 0 0 1-3.64 3.26Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1.6A10.4 10.4 0 1 0 22.4 12 10.41 10.41 0 0 0 12 1.6Zm0 1.9 3.3 2.4-1.26 3.9H9.96L8.7 5.9Zm-5.5 2.2.98 3-3.3 1.1a8.6 8.6 0 0 1 2.32-4.1Zm11 0a8.6 8.6 0 0 1 2.32 4.1l-3.3-1.1ZM4.6 15.1A8.5 8.5 0 0 1 3.6 12l3.25-1.09 2.63 3.62-1.24 3.83A8.55 8.55 0 0 1 4.6 15.1Zm7.4 5.3a8.5 8.5 0 0 1-2.1-.26l1.2-3.7h3.8l1.2 3.7a8.5 8.5 0 0 1-2.1.26Zm3.76-2.04-1.24-3.83 2.63-3.62L20.4 12a8.5 8.5 0 0 1-1 3.1 8.55 8.55 0 0 1-3.64 3.26Z'/%3E%3C/svg%3E");
}
.cv-raio{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13.6 1 4 13.4h5.3L8.6 23 19 10.2h-5.6Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13.6 1 4 13.4h5.3L8.6 23 19 10.2h-5.6Z'/%3E%3C/svg%3E");
}
.cv-pata{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cellipse cx='6.2' cy='9.4' rx='2.5' ry='3.1'/%3E%3Cellipse cx='17.8' cy='9.4' rx='2.5' ry='3.1'/%3E%3Cellipse cx='9.7' cy='4.9' rx='2.3' ry='3'/%3E%3Cellipse cx='14.3' cy='4.9' rx='2.3' ry='3'/%3E%3Cpath d='M12 12.2c3.2 0 5.9 2.6 5.9 5.3 0 2-1.6 3.3-3.6 3.3-1 0-1.6-.3-2.3-.3s-1.3.3-2.3.3c-2 0-3.6-1.3-3.6-3.3 0-2.7 2.7-5.3 5.9-5.3Z'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cellipse cx='6.2' cy='9.4' rx='2.5' ry='3.1'/%3E%3Cellipse cx='17.8' cy='9.4' rx='2.5' ry='3.1'/%3E%3Cellipse cx='9.7' cy='4.9' rx='2.3' ry='3'/%3E%3Cellipse cx='14.3' cy='4.9' rx='2.3' ry='3'/%3E%3Cpath d='M12 12.2c3.2 0 5.9 2.6 5.9 5.3 0 2-1.6 3.3-3.6 3.3-1 0-1.6-.3-2.3-.3s-1.3.3-2.3.3c-2 0-3.6-1.3-3.6-3.3 0-2.7 2.7-5.3 5.9-5.3Z'/%3E%3C/g%3E%3C/svg%3E");
}
.cv-pegada{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M12 8.6c3.1 0 5.6 3.1 5.6 6.4 0 3-2.1 5.4-5.6 5.4s-5.6-2.4-5.6-5.4c0-3.3 2.5-6.4 5.6-6.4Z'/%3E%3Cellipse cx='6.4' cy='5.5' rx='2.1' ry='2.7'/%3E%3Cellipse cx='12' cy='3.4' rx='2.1' ry='2.7'/%3E%3Cellipse cx='17.6' cy='5.5' rx='2.1' ry='2.7'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M12 8.6c3.1 0 5.6 3.1 5.6 6.4 0 3-2.1 5.4-5.6 5.4s-5.6-2.4-5.6-5.4c0-3.3 2.5-6.4 5.6-6.4Z'/%3E%3Cellipse cx='6.4' cy='5.5' rx='2.1' ry='2.7'/%3E%3Cellipse cx='12' cy='3.4' rx='2.1' ry='2.7'/%3E%3Cellipse cx='17.6' cy='5.5' rx='2.1' ry='2.7'/%3E%3C/g%3E%3C/svg%3E");
}

/* ------------------------------------------------------- a lista de amigos */

.cv-dados{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:.9rem;margin-bottom:1.25rem;
}
.cv-linha{
  display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem;flex-wrap:wrap;
}
.cv-linha input[type=text]{flex:2;min-width:140px;margin:0}
.cv-linha input[type=tel]{flex:1.4;min-width:130px;margin:0}
.cv-alcunha{
  flex:1.2;min-width:120px;margin:0;font-size:.85rem;
  color:var(--tinta-suave);font-style:italic;
}
.cv-accoes{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0 .5rem}

/* ----------------------------------------------------------- os envios */

.cv-envios{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:.9rem;
}
.cv-envio{
  background:var(--superficie);border:1px solid var(--linha);
  border-left:4px solid var(--cor);border-radius:var(--raio);padding:.9rem 1rem;
}
.cv-envio-quem{display:flex;flex-direction:column;gap:.1rem;margin-bottom:.5rem}
.cv-envio-quem strong{font-size:1.02rem}
.cv-envio-alcunha{font-size:.82rem;color:var(--cor);font-weight:600}
.cv-envio-tel{font-size:.78rem;color:var(--tinta-suave)}
.cv-envio-tel.sem{font-style:italic}
.cv-espreitar summary{
  cursor:pointer;font-size:.8rem;color:var(--tinta-suave);margin-bottom:.4rem;
}
.cv-texto{
  white-space:pre-wrap;font:inherit;font-size:.82rem;line-height:1.5;
  background:var(--fundo);border-radius:8px;padding:.7rem .8rem;margin:.4rem 0;
}
.cv-envio-botoes{display:flex;gap:.5rem;margin-top:.6rem}
.cv-envio-botoes .botao-principal,.cv-envio-botoes .botao-secundario{
  flex:1;text-align:center;padding:.55rem .6rem;font-size:.88rem;
}
.cv-wa{background:#25d366;border-color:#1da851}
.cv-wa:hover{background:#1da851}
.cv-folha-link{margin:1.25rem 0 .5rem}

/* ------------------------------------------- a folha que vai a imprimir */

.folha-convites{background:#fff;margin:0;padding:1.5rem}
.folha-barra{
  display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
  margin-bottom:1.5rem;
}
.folha-dica{font-size:.82rem;color:var(--tinta-suave)}

.cartoes-convite{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem;
}
.cartao-convite{
  border:2px solid var(--cor);border-radius:14px;padding:1.4rem 1.5rem;
  background:#fff;break-inside:avoid;page-break-inside:avoid;
}
.cc-faixa{
  display:flex;align-items:center;gap:.6rem;
  background:linear-gradient(135deg,var(--cor),var(--cor2));
  color:#fff;margin:-1.4rem -1.5rem 1.1rem;padding:.7rem 1.5rem;
  border-radius:11px 11px 0 0;
}
.cc-faixa .cv-emblema{width:28px;height:28px}
.cc-tema{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.cc-saudacao{margin:0;font-size:.85rem;color:var(--tinta-suave)}
.cc-nome{font-size:1.45rem;margin:.1rem 0 .4rem;line-height:1.2;color:var(--cor2)}
.cc-chamada{margin:0 0 .8rem;font-weight:700;color:var(--cor)}
.cc-corpo{margin:0 0 .9rem;font-size:.95rem;line-height:1.5}
.cc-quando{list-style:none;margin:0 0 .9rem;padding:0;font-size:.92rem}
.cc-quando li{display:flex;gap:.6rem;padding:.25rem 0;border-bottom:1px dotted var(--linha)}
.cc-quando span{
  min-width:4.5rem;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--tinta-suave);padding-top:.15rem;
}
.cc-recado{
  margin:0 0 .8rem;font-size:.88rem;background:var(--fundo);
  border-radius:8px;padding:.5rem .7rem;
}
.cc-rsvp{margin:0;font-size:.85rem;color:var(--tinta-suave)}

/* ------------------------------------------- a resposta ao convite */

.resposta-envolvente{max-width:520px;margin:1.5rem auto;padding:0 1rem}
.cartao-convite.grande{padding:1.6rem 1.7rem}
.cartao-convite.grande .cc-nome{font-size:1.7rem}
.rc-botoes{display:flex;gap:.7rem;margin:1.2rem 0 .3rem}
.rc-botoes button{
  flex:1;font:inherit;font-size:1.05rem;font-weight:700;cursor:pointer;
  padding:.85rem .6rem;border-radius:11px;border:2px solid;
  transition:transform .12s,opacity .12s;
}
.rc-botoes button:hover{transform:translateY(-2px)}
.rc-sim{background:var(--cor);border-color:var(--cor2);color:#fff}
.rc-nao{background:#fff;border-color:var(--linha);color:var(--tinta-suave)}
/* Depois de responder, o que não foi escolhido apaga-se — mas continua
   lá, porque desistências e arrependimentos são a regra, não a excepção.
   ANTES de responder os dois estão a cheio: esbatê-los nessa altura fazia
   o convite parecer já respondido, ou fechado. */
.rc-botoes.respondido button:not(.escolhido){opacity:.4}
.rc-botoes.respondido button.escolhido{box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.rc-obrigado{
  margin:1.1rem 0 0;font-size:1.05rem;font-weight:700;color:var(--cor2);
  text-align:center;
}
.rc-estado{margin:.6rem 0 0;font-size:.82rem;color:var(--tinta-suave)}
.rc-casa{text-align:center;margin-top:1.2rem;font-size:.82rem;color:var(--tinta-suave)}

/* ---------------------------------------------- a contagem das respostas */

.cv-contagem{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:.7rem;margin:0 0 1rem;
}
.cv-conta{
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--raio);padding:.8rem .9rem;text-align:center;
}
.cv-conta strong{display:block;font-size:1.6rem;line-height:1.2}
.cv-conta span{font-size:.76rem;color:var(--tinta-suave)}
.cv-conta.vem strong{color:var(--verde)}
.cv-conta.nao strong{color:#a8343a}

.cv-marca{
  display:inline-block;font-size:.72rem;font-weight:700;border-radius:999px;
  padding:.12rem .55rem;margin-left:.3rem;
}
.cv-marca.vem{background:#e6f4e9;color:#1b7f3b}
.cv-marca.nao{background:#fae9ea;color:#a8343a}
.cv-marca.espera{background:var(--fundo);color:var(--tinta-suave)}

@media print{
  .folha-barra{display:none}
  .folha-convites{padding:0}
  .cartoes-convite{grid-template-columns:1fr 1fr;gap:.6rem}
  .cartao-convite{border-width:1.5px}
  /* As cores do tema SAO o convite: sem elas sai uma folha de texto. */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:12mm}
}

@media (max-width:620px){
  .cv-linha input[type=text],.cv-linha input[type=tel]{flex:1 1 100%}
  .cv-alcunha{flex:1 1 100%}
}