/* Formulário de cadastro e regras de utilização.
   Compartilhado pela página do Azulão (/azulao/) e pela página só do formulário
   (/cadastro/). Usa as variáveis do base.css. */
/* ---------- formulário longo ---------- */
/* Cadastro de verdade não cabe numa coluna estreita ao lado de texto: vira
   um cartão largo e centrado, dividido em três blocos. */
.form-wide{
  background:#fff; color:var(--ink);
  border-top:3px solid var(--blue); border-radius:var(--r);
  padding:2.4rem 2.6rem 2.2rem; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
  max-width:60rem; margin:0 auto;
}
@media (max-width:700px){ .form-wide{ padding:1.6rem 1.3rem 1.4rem; } }
.form-wide fieldset{ border:none; padding:0; margin:0 0 1.9rem; }
.form-wide fieldset:last-of-type{ margin-bottom:1.4rem; }
.form-wide legend{
  display:flex; align-items:center; gap:.7rem; width:100%;
  padding:0 0 .9rem; margin-bottom:1.3rem;
  border-bottom:1px solid var(--line);
  font-family:var(--font-d); font-weight:700; font-size:1.02rem;
}
.leg-num{
  display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--blue-bg); color:var(--blue);
  font-family:var(--font-m); font-size:.7rem; font-weight:600;
}
.field-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:700px){ .field-3{ grid-template-columns:1fr; gap:0; } }
.field textarea{
  width:100%; padding:.85rem 1rem; border:1px solid var(--line-2); border-radius:var(--r);
  font:inherit; font-size:.93rem; background:#fff; color:var(--ink); resize:vertical; min-height:5.5rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(43,70,128,.14); }
.dica{ display:block; margin-top:.4rem; font-size:.76rem; color:var(--dim); line-height:1.45; }

/* campo obrigatório não preenchido: a borda avisa e a mensagem explica */
.field.invalido input, .field.invalido select, .field.invalido textarea{ border-color:#c0392b; }
.field .erro{
  display:none; margin-top:.4rem; font-size:.78rem; color:#c0392b;
}
.field.invalido .erro{ display:block; }

/* dias da semana: caixa de seleção em forma de etiqueta clicável */
.dias{ display:flex; flex-wrap:wrap; gap:.5rem; }
.dia{ position:relative; }
/* A caixa de seleção some visualmente mas continua no fluxo de foco: com
   width/height zerados alguns leitores de tela e o Tab passam batido. */
.dia input{
  position:absolute; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.dia span{
  display:block; cursor:pointer; user-select:none;
  padding:.55rem .95rem; border:1px solid var(--line-2); border-radius:var(--r);
  font-family:var(--font-m); font-size:.74rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut);
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.dia span:hover{ border-color:var(--blue); color:var(--blue); }
.dia input:checked + span{ background:var(--blue); border-color:var(--blue); color:#fff; }
.dia input:focus-visible + span{ outline:2px solid var(--blue); outline-offset:2px; }

/* aceite do regulamento: caixa de seleção com o texto ao lado, alinhados no topo
   porque o texto tem quatro linhas e a caixa tem uma. */
.aceite{ margin-top:.4rem; }
/* O aceite é um <label> dentro de .field, e `.field label` é mono, minúsculo e
   MAIÚSCULO — bom para um rótulo de duas palavras, ilegível para quatro linhas
   de texto legal. Aqui ele volta a ser texto corrido. */
/* `.field label` (0,1,1) vence `.check` (0,1,0) — por isso o seletor repete o
   `label`: sem isso o texto do aceite sai em mono MAIÚSCULO, que é o estilo de
   rótulo e não de parágrafo. */
.field label.check{
  display:flex; align-items:flex-start; gap:.7rem; cursor:pointer;
  padding:1rem 1.1rem; border:1px solid var(--line-2); border-radius:var(--r);
  background:#fff; transition:border-color .14s ease, background .14s ease;
  font-family:var(--font-b); font-size:.82rem; font-weight:400; line-height:1.6;
  letter-spacing:normal; text-transform:none; color:var(--mut); margin-bottom:0;
}
.field label.check:hover{ border-color:var(--blue); }
.field label.check input{ flex:0 0 auto; width:17px; height:17px; margin-top:.15rem; accent-color:var(--blue); cursor:pointer; }
.field label.check span{ display:inline; font-size:.82rem; line-height:1.6; color:var(--mut); letter-spacing:normal; text-transform:none; }
.field label.check a{ color:var(--blue); text-underline-offset:2px; }
.field.invalido label.check{ border-color:#c0392b; }
/* :has ainda não é universal — a borda de foco garante o mesmo aviso visual. */
.field label.check input:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* ---- regras de utilização: popover dentro do formulário ----
   O regulamento inteiro vive num painel que abre ao passar o mouse (ou tocar)
   no gatilho, logo acima do aceite. Rola por dentro; a página não cresce. */
.regras-hover{ position:relative; margin-bottom:.55rem; }
.lnk-regras{
  display:inline-flex; align-items:center; gap:.45rem;
  background:none; border:none; padding:.15rem 0; cursor:pointer;
  font-family:var(--font-b); font-size:.84rem; font-weight:600; color:var(--blue);
  text-decoration:underline; text-underline-offset:3px;
}
.lnk-regras svg{ flex:none; }
.lnk-regras:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.regras-pop{
  position:absolute; left:0; right:0; bottom:calc(100% + .55rem); z-index:30;
  display:none;
  background:#fff; border:1px solid var(--line-2); border-top:3px solid var(--blue);
  border-radius:var(--r); box-shadow: var(--shadow-lg);
}
/* seta apontando para o gatilho */
.regras-pop::after{
  content:""; position:absolute; top:100%; left:2rem;
  border:8px solid transparent; border-top-color:#fff;
}
.regras-hover:hover .regras-pop,
.regras-hover:focus-within .regras-pop,
.regras-hover.aberto .regras-pop{ display:block; }
/* Esc fecha mesmo com o mouse parado em cima: .fechado vence o hover até o
   ponteiro sair da caixa (o JS remove a classe no mouseleave) */
.regras-hover.fechado .regras-pop{ display:none; }
.regras-pop-topo{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.85rem 1.2rem .7rem; border-bottom:1px solid var(--line);
}
.regras-pop-topo b{ font-family:var(--font-d); font-size:.92rem; color:var(--ink); }
.regras-pop-topo span{
  font-family:var(--font-m); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); white-space:nowrap;
}
.regras-rolagem{
  max-height:min(340px, 48vh); overflow-y:auto; overscroll-behavior:contain;
  padding:.4rem 1.2rem .9rem;
}
.regra{ padding:.85rem 0; border-bottom:1px solid var(--line); }
.regra:last-child{ border-bottom:0; }
.regra h4{
  margin:0 0 .4rem; font-size:.68rem; font-family:var(--font-m); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--navy);
}
.regra p{ margin:0 0 .4rem; font-size:.81rem; line-height:1.6; color:var(--mut); }
.regra p:last-child{ margin-bottom:0; }
.regra ul{ margin:0; padding-left:1rem; display:grid; gap:.3rem; }
.regra li{ font-size:.81rem; line-height:1.55; color:var(--mut); }
.regra strong{ color:var(--ink); font-weight:600; }
@media (max-width:700px){
  .regras-rolagem{ max-height:46vh; padding:.3rem .95rem .8rem; }
  .regras-pop::after{ left:1.4rem; }
}

/* honeypot: fora da tela, nunca de display:none (robô esperto pula display:none) */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* falha de envio */
.cad-falha{
  margin-bottom:1rem; padding:.85rem 1.1rem;
  background:#fdecea; color:#b3261e; border-radius:var(--r); font-size:.86rem;
}
.cad-falha a{ color:#b3261e; text-decoration:underline; }

/* sucesso: assume o lugar do formulário */
.cad-ok{
  background:#fff; color:var(--ink);
  border-top:3px solid #0d7a4c; border-radius:var(--r);
  padding:3rem 2.5rem; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
  max-width:38rem; margin:0 auto; text-align:center;
}
.cad-ok svg{ color:#0d7a4c; margin:0 auto 1rem; }
.cad-ok h3{ font-size:1.4rem; margin-bottom:.7rem; }
.cad-ok p{ font-size:.93rem; color:var(--mut); line-height:1.7; }
.cad-ok-obs{ margin-top:1.4rem; font-size:.85rem; color:var(--dim); }
.btn-ghost-ok{
  display:inline-flex; margin-top:.6rem;
  border:1px solid var(--line-2); color:var(--ink); background:#fff;
}
.btn-ghost-ok:hover{ border-color:var(--blue); color:var(--blue); }
@media (max-width:700px){ .cad-ok{ padding:2rem 1.3rem; } }

/* bloco de veículo, repetível */
.veiculos{ display:grid; gap:1rem; }
.veiculo{
  position:relative;
  border:1px solid var(--line); border-left:3px solid var(--line-2);
  border-radius:var(--r); padding:1.3rem 1.4rem .3rem;
  background:#fbfcfe;
}
.veiculo-topo{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.veiculo-topo b{
  font-family:var(--font-m); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
}
.tirar{
  background:none; border:none; cursor:pointer; padding:.2rem .3rem;
  font-family:var(--font-b); font-size:.8rem; color:var(--dim);
  display:inline-flex; align-items:center; gap:.35rem;
  transition: color .14s ease;
}
.tirar:hover{ color:#c0392b; }
/* com um veículo só não faz sentido oferecer remover */
.veiculos:has(.veiculo:only-child) .tirar{ display:none; }
.add-veiculo{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  margin-top:1rem; padding:.7rem 1.1rem;
  background:#fff; border:1px dashed var(--line-2); border-radius:var(--r);
  font-family:var(--font-d); font-weight:600; font-size:.86rem; color:var(--blue);
  transition: border-color .16s ease, background .16s ease;
}
.add-veiculo:hover{ border-color:var(--blue); background:var(--blue-bg); }
.placa{ text-transform:uppercase; }

/* Observações: 16px no celular, senão o iPhone dá zoom na página ao tocar. */
@media (max-width:700px){ .field textarea{ font-size:1rem; } }