/* Página do convite (index.php). O painel dos noivos usa admin.css. */
:root {
  --esmeralda: #1B5E20;
  --esmeralda-escuro: #12421a;
  --fucsia: #A82378;
  --dourado: #D4AF37;
  --dourado-escuro: #9c7a1f;
  --dourado-claro: #efe2b3;
  --ouro-metal: linear-gradient(135deg, #9c7a1f 0%, #f5e6a8 22%, #d4af37 45%, #8f6d1c 70%, #ecd58a 100%);
  --fundo: #FAFAFA;
  --papel: #ffffff;
  --texto: #2b2b2b;
  --suave: #6b6b6b;
  --linha: #ddd6c3;
  --erro: #b3261e;
  --script: 'Great Vibes', cursive;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  font-size: 17.5px; /* texto normal (era 16px) */
  margin: 0;
  min-height: 100vh;
  padding: 48px 24px;
  font-family: var(--serif);
  color: var(--texto);
  line-height: 1.6;
  background-color: var(--fundo);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(27, 94, 32, .07), transparent 45%),
    radial-gradient(circle at 88% 92%, rgba(168, 35, 120, .07), transparent 45%);
}

/* ---------- A folha do convite (efeito 3D + linha de ouro) ---------- */
.convite { max-width: 720px; margin: 0 auto; }

.folha {
  position: relative;
  padding: 76px 84px 64px;
  background: linear-gradient(160deg, #ffffff 0%, #ffffff 55%, #f8f5ec 100%);
  border-radius: 3px;
  /* sombras em camadas: a folha "levanta" do fundo */
  box-shadow:
    0 1px 1px rgba(70, 55, 20, .07),
    0 2px 2px rgba(70, 55, 20, .07),
    0 4px 4px rgba(70, 55, 20, .07),
    0 8px 8px rgba(70, 55, 20, .07),
    0 16px 16px rgba(70, 55, 20, .07),
    0 36px 60px -18px rgba(27, 94, 32, .28),
    inset 0 1px 0 #fff,
    inset 0 -2px 6px rgba(160, 130, 60, .08);
}

/* Linha de ouro grossa, com brilho metálico */
.folha::before {
  content: '';
  position: absolute;
  inset: 18px;
  border: 4px solid transparent;
  border-image: var(--ouro-metal) 1;
  pointer-events: none;
}

/* Filete fino interior */
.folha::after {
  content: '';
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(212, 175, 55, .55);
  pointer-events: none;
}

.folha > * { position: relative; z-index: 1; }

/* ---------- Cabeçalho ---------- */
.cabecalho { text-align: center; margin-bottom: 36px; }

.sobretitulo {
  margin: 0;
  font-size: .9rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--esmeralda);
}

.noivos {
  margin: 8px 0 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.8rem, 9vw, 4.2rem);
  line-height: 1.15;
  color: var(--fucsia);
}
.noivos .e { color: var(--dourado); margin: 0 .12em; }

.divisor svg { width: 200px; height: 20px; margin: 10px auto; display: block; }
.divisor path { stroke: var(--dourado); stroke-width: 1; fill: none; }
.divisor .losango { fill: var(--dourado-claro); }
.divisor circle { fill: var(--dourado); }

.data { margin: 0 0 12px; font-size: 1.14rem; color: var(--esmeralda); }

.local { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.local strong { font-weight: 600; font-size: 1.14rem; color: var(--texto); }
.local span { font-size: 1.01rem; color: var(--suave); font-style: italic; }
.local a {
  margin-top: 6px;
  font-size: .94rem;
  letter-spacing: .08em;
  color: var(--fucsia);
  text-underline-offset: 3px;
}

/* ---------- Passos ---------- */
.passo { animation: surgir .45s ease both; }

@keyframes surgir {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.titulo-passo {
  font-family: var(--script);
  font-weight: 400;
  font-size: 2.3rem;
  color: var(--esmeralda);
  text-align: center;
  margin: 0 0 20px;
  overflow-wrap: anywhere;
}

.grade-2 { display: grid; grid-template-columns: 1fr 1.35fr; gap: 0 18px; }

.campo { margin: 0 0 20px; border: 0; padding: 0; min-width: 0; }

label, legend, .rotulo {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--esmeralda);
}
.obrig { color: var(--fucsia); }
.opcional { font-weight: 400; color: var(--suave); font-size: .94rem; }

input[type="text"], input[type="tel"], select {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font: inherit;
  font-size: 1.094rem; /* 17,5px (nunca abaixo de 16px: evita o zoom automático no iPhone) */
  color: var(--texto);
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 6px;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--dourado);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .25);
}
input.invalido { border-color: var(--erro); }
select.vazio { color: var(--suave); }

.ajuda { display: block; margin: -8px 0 20px; font-size: .94rem; color: var(--suave); font-style: italic; }
.ajuda-centro { text-align: center; margin: 0 0 8px; }
.erro { display: block; margin-top: 6px; font-size: .97rem; color: var(--erro); }
.erro-geral { text-align: center; }

.armadilha { position: absolute; left: -9999px; }

/* ---------- Sugestões de nomes ---------- */
.campo-busca { position: relative; }

.sugestoes {
  position: absolute;
  z-index: 10;
  left: 0; right: 0;
  margin: 4px 0 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--dourado);
  border-radius: 6px;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .3);
  max-height: 300px;
  overflow-y: auto;
}
.sugestoes li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
}
.sugestoes li:hover, .sugestoes li.ativo { background: rgba(168, 35, 120, .08); color: var(--fucsia); }
.sugestoes .lado {
  font-size: .81rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dourado-escuro);
  white-space: nowrap;
}
.sugestoes .vazio { cursor: default; color: var(--suave); font-style: italic; }
.sugestoes .vazio:hover { background: none; color: var(--suave); }
.sugestoes li.nao-encontro {
  justify-content: center;
  border-top: 1px solid var(--dourado-claro);
  color: var(--fucsia);
  font-style: italic;
  font-size: 1.01rem;
}

/* ---------- Avisos ---------- */
.aviso {
  padding: 16px 18px;
  margin: 12px 0 20px;
  text-align: center;
  border: 1px solid var(--dourado-claro);
  border-left: 4px solid var(--fucsia);
  background: #fdf8fb;
  border-radius: 6px;
}
.aviso p { margin: 0 0 12px; }
.aviso p:last-child { margin-bottom: 0; }
.aviso .acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.aviso-suave { border-left-color: var(--dourado); background: #fffdf5; font-size: 1.01rem; margin-top: 0; }

/* ---------- Escolhas (rádio) ---------- */
.opcoes { display: grid; gap: 10px; }
.opcoes-2 { grid-template-columns: 1fr 1fr; }
.opcoes-3 { grid-template-columns: repeat(3, 1fr); }
.opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  min-height: 48px;
  font-weight: 400;
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.opcao:has(input:checked) { border-color: var(--esmeralda); background: rgba(27, 94, 32, .06); box-shadow: inset 0 0 0 1px var(--esmeralda); }
.opcao input { accent-color: var(--esmeralda); flex-shrink: 0; margin: 0; }

/* ---------- Acompanhantes: nome + tipo ---------- */
/* nome (com sugestões da lista) · quem é · adulto/criança */
.linha-pessoa { display: grid; grid-template-columns: 1fr 140px 175px; gap: 8px; margin-bottom: 10px; }
.linha-pessoa .pessoa-nome { min-width: 0; }
/* escolhido da lista: fica com um visto verde */
.linha-pessoa input.da-lista {
  padding-right: 36px;
  border-color: rgba(27, 94, 32, .45);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%231B5E20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5l3.5 3.5L14 6'/%3E%3C/svg%3E") right 12px center no-repeat;
}
.ajuda-topo { margin: -2px 0 10px; }

/* ---------- Botões ---------- */
.btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 15px 20px;
  font: inherit;
  font-size: 1.14rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--esmeralda);
  border: 1px solid var(--dourado);
  border-radius: 6px;
  box-shadow: inset 0 0 0 3px var(--esmeralda), inset 0 0 0 4px rgba(212, 175, 55, .7), 0 6px 14px -6px rgba(27, 94, 32, .6);
  cursor: pointer;
  transition: background .2s, transform .1s;
}
.btn:hover { background: var(--esmeralda-escuro); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: wait; }

.btn-sec {
  padding: 10px 18px;
  min-height: 44px;
  font: inherit;
  color: var(--esmeralda);
  background: #fff;
  border: 1px solid var(--esmeralda);
  border-radius: 6px;
  cursor: pointer;
}
.btn-sec.destaque { color: #fff; background: var(--fucsia); border-color: var(--fucsia); }

.btn-link {
  padding: 4px 2px;
  font: inherit;
  font-size: .99rem;
  font-style: normal;
  color: var(--fucsia);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- Final ---------- */
.final { text-align: center; padding: 8px 0; }
.final .script { margin: 0; font-family: var(--script); font-size: 3.4rem; color: var(--fucsia); }

/* ---------- Telemóvel ---------- */
@media (max-width: 640px) {
  body { padding: 14px 10px 28px; }
  .folha { padding: 52px 26px 40px; }
  .folha::before { inset: 10px; border-width: 3px; }
  .folha::after { inset: 17px; }
  .cabecalho { margin-bottom: 28px; }
  .grade-2 { grid-template-columns: 1fr; }
  .opcoes-2 { grid-template-columns: 1fr; }
  .titulo-passo { font-size: 2rem; }
  .linha-pessoa { grid-template-columns: 1fr 1fr; }
  .linha-pessoa .pessoa-nome { grid-column: 1 / -1; }
  .linha-pessoa + .linha-pessoa { padding-top: 10px; border-top: 1px dashed var(--dourado-claro); }
}

@media (max-width: 360px) {
  .opcoes-3 { grid-template-columns: 1fr; }
}

/* ---------- Textos a preto ----------
   Todo o texto da página fica preto / cinzento escuro, incluindo os nomes dos noivos,
   os títulos manuscritos e os links. As cores ficam só nos botões, na moldura e linhas
   douradas, no contorno da opção escolhida e nos confetes (definidos em rsvp.js). */
body { --texto: #141414; --suave: #3a3a3a; }
.sobretitulo,
.noivos,
.noivos .e,
.data,
.titulo-passo,
.final .script,
label,
legend,
.rotulo,
.obrig,
.local a,
.btn-link,
.sugestoes li:hover,
.sugestoes li.ativo,
.sugestoes li.nao-encontro { color: var(--texto); }
.ajuda,
.opcional,
.local span,
.sugestoes .lado { color: var(--suave); }