/* ==========================================================================
   CONFECAP · FORMULÁRIOS (Filiação, Renovação, Inscrição, Contato)
   Depende de site.css. Assistente multi-etapas, upload com câmera, consentimento
   LGPD e etapa de pagamento. Mobile-first — este é o caso de uso principal.
   No Laravel: vira o CSS das views de formulário; a validação real é no back-end.
   ========================================================================== */

.formwrap{max-width:760px; min-width:0}
.formwrap--wide{max-width:920px}

/* --- Passo a passo (stepper) --- */
.steps{
  display:flex; gap:.5rem; margin:0 0 clamp(1.75rem,4vw,2.5rem); padding:0;
  counter-reset:step; overflow-x:auto; scrollbar-width:none;
}
.steps::-webkit-scrollbar{display:none}
.steps li{
  flex:1 1 0; min-width:64px; list-style:none; position:relative;
  padding-top:2.4rem; text-align:center;
  font-family:var(--font-display); font-weight:600; font-size:.72rem;
  letter-spacing:.04em; color:var(--on-dark-mute); line-height:1.25;
}
.steps li::before{ /* bolinha numerada */
  counter-increment:step; content:counter(step);
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:2rem; height:2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:700; color:var(--on-dark-soft);
  background:rgba(255,255,255,.05); border:1px solid var(--hair-strong);
  transition:background-color var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.steps li::after{ /* trilho entre bolinhas */
  content:""; position:absolute; top:1rem; left:calc(50% + 1.4rem); right:calc(-50% + 1.4rem);
  height:2px; background:var(--hair); z-index:-1;
}
.steps li:last-child::after{display:none}
.steps li[aria-current="step"]{color:#fff}
.steps li[aria-current="step"]::before{
  background:var(--navy-600); border-color:var(--blue-400); color:#fff;
  box-shadow:0 0 0 4px rgba(30,111,255,.18);
}
.steps li.is-done::before{
  content:"✓"; background:rgba(201,162,39,.16); border-color:var(--gold-500); color:var(--gold-300);
}
.steps li.is-done::after{background:linear-gradient(90deg,var(--gold-500),var(--hair))}

/* --- Painel de etapa --- */
.fpanel{display:none}
.fpanel.is-active{display:block; animation:fstep .4s cubic-bezier(.22,.7,.3,1)}
@keyframes fstep{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
/* Progressive enhancement: sem JS, tudo aparece empilhado e o assistente some. */
html:not(.js) .fpanel{display:block; margin-bottom:2.5rem}
html:not(.js) .steps,html:not(.js) .fnav .btn--back,html:not(.js) [data-next]{display:none}

.fpanel__head{margin-bottom:1.5rem}
.fpanel__head h2{font-size:var(--t-h3); color:#fff}
.fpanel__head p{margin:.5rem 0 0; color:var(--on-dark-soft); font-size:var(--t-small)}
.fpanel__n{
  font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-300); display:block; margin-bottom:.5rem;
}

/* --- Grid de campos --- */
.fgrid{display:grid; gap:1.1rem 1.25rem; grid-template-columns:1fr}
@media(min-width:560px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fspan-2{grid-column:1 / -1}
  .fspan-cep{grid-column:auto}
}
.field{display:flex; flex-direction:column; gap:.4rem; min-width:0}
.field > label{
  font-family:var(--font-display); font-weight:600; font-size:.82rem;
  letter-spacing:.02em; color:var(--on-dark);
}
.field .req{color:var(--gold-300); margin-left:.15rem}
.field .hint{font-family:var(--font-display); font-size:.75rem; color:var(--on-dark-mute); line-height:1.45}

.input,.select,.textarea{
  width:100%; font-family:var(--font-display); font-size:1rem; color:#fff;
  background:rgba(255,255,255,.045); border:1px solid var(--hair-strong);
  border-radius:5px; padding:.85rem .95rem; line-height:1.4;
  transition:border-color var(--dur-1) ease, background-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
  -webkit-appearance:none; appearance:none;
}
.input::placeholder,.textarea::placeholder{color:rgba(255,255,255,.42)}
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--blue-400); background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px rgba(30,111,255,.2);
}
.textarea{min-height:130px; resize:vertical; line-height:1.6}
.select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23C9D3E6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.4rem;
}
.field--invalid .input,.field--invalid .select,.field--invalid .textarea{border-color:#F08A8A}
.field__err{display:none; font-family:var(--font-display); font-size:.75rem; color:#F3A6A6}
.field--invalid .field__err{display:block}

/* Grupo de opções (rádio/motivo) */
.optset{display:grid; gap:.6rem}
.opt{
  display:flex; align-items:flex-start; gap:.75rem; cursor:pointer;
  padding:.85rem 1rem; border:1px solid var(--hair-strong); border-radius:6px;
  background:rgba(255,255,255,.03);
  transition:border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.opt:hover{border-color:var(--blue-400)}
.opt input{margin-top:.15rem; accent-color:var(--navy-600); width:1.05rem; height:1.05rem; flex:0 0 auto}
.opt:has(input:checked){border-color:var(--blue-400); background:rgba(30,111,255,.10)}
.opt__t{font-family:var(--font-display); font-weight:600; font-size:.92rem; color:#fff}
.opt__d{display:block; font-family:var(--font-display); font-weight:400; font-size:.8rem; color:var(--on-dark-soft); margin-top:.15rem}

/* --- Upload de arquivo com câmera + prévia --- */
.uploads{display:grid; gap:1.1rem}
@media(min-width:620px){.uploads--2{grid-template-columns:repeat(2,1fr)}}
.upload{
  position:relative; border:1.5px dashed var(--hair-strong); border-radius:8px;
  background:rgba(255,255,255,.025); padding:1.4rem 1.1rem; text-align:center;
  transition:border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.upload:hover,.upload.is-drag{border-color:var(--blue-400); background:rgba(30,111,255,.06)}
.upload input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer}
.upload__ico{width:38px; height:38px; margin:0 auto .7rem; color:var(--gold-300)}
.upload__t{font-family:var(--font-display); font-weight:700; font-size:.92rem; color:#fff; margin:0}
.upload__d{font-family:var(--font-display); font-size:.78rem; color:var(--on-dark-soft); margin:.3rem 0 0; line-height:1.5}
.upload__cta{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.85rem;
  font-family:var(--font-display); font-weight:700; font-size:.82rem; color:var(--blue-400);
}
.upload__preview{display:none; margin-top:1rem; align-items:center; gap:.9rem; text-align:left}
.upload.has-file .upload__preview{display:flex}
.upload.has-file .upload__prompt{display:none}
.upload__thumb{
  width:64px; height:64px; border-radius:5px; object-fit:cover; flex:0 0 auto;
  border:1px solid var(--hair-strong); background:var(--navy-800);
}
.upload__meta{min-width:0; flex:1}
.upload__name{font-family:var(--font-display); font-weight:600; font-size:.85rem; color:#fff; word-break:break-word}
.upload__size{font-family:var(--font-display); font-size:.75rem; color:var(--on-dark-mute)}
.upload__remove{
  background:none; border:1px solid var(--hair-strong); border-radius:4px; cursor:pointer;
  color:var(--on-dark-soft); font-family:var(--font-display); font-size:.75rem; font-weight:600;
  padding:.35rem .6rem; flex:0 0 auto;
  transition:color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.upload__remove:hover{color:#F3A6A6; border-color:#F08A8A}

/* Nota de segurança/privacidade em bloco */
.notebox{
  display:flex; gap:.85rem; align-items:flex-start;
  border:1px solid var(--hair); border-left:2px solid var(--gold-500); border-radius:0 6px 6px 0;
  background:rgba(201,162,39,.06); padding:1rem 1.15rem; margin:1.25rem 0 0;
}
.notebox svg{flex:0 0 auto; color:var(--gold-300); margin-top:.15rem}
.notebox p{margin:0; font-family:var(--font-display); font-size:.8rem; color:var(--on-dark-soft); line-height:1.55}
.notebox--info{border-left-color:var(--blue-400); background:rgba(30,111,255,.07)}
.notebox--info svg{color:var(--blue-400)}

/* --- Consentimento LGPD --- */
.consent{display:grid; gap:1rem}
.consent .opt{align-items:flex-start}
.consent a{color:var(--blue-400); text-decoration:underline; text-underline-offset:2px}
.consent a:hover{color:var(--gold-300)}
.consent--sensitive{border-left:2px solid var(--gold-500)}

/* --- Etapa de pagamento --- */
.paysum{
  border:1px solid var(--hair); border-radius:8px; overflow:hidden; margin-bottom:1.5rem;
}
.paysum__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.85rem 1.1rem; border-bottom:1px solid var(--hair);
  font-family:var(--font-display); font-size:.9rem; color:var(--on-dark-soft);
}
.paysum__row span:last-child{color:#fff; font-weight:600; font-variant-numeric:tabular-nums}
.paysum__row--total{background:rgba(255,255,255,.03); border-bottom:0}
.paysum__row--total span{font-size:1.15rem; color:#fff; font-weight:800}
.paysum__row--total span:first-child{letter-spacing:.02em}

.paymethods{display:grid; gap:.75rem; grid-template-columns:1fr}
@media(min-width:520px){.paymethods{grid-template-columns:1fr 1fr}}
.paymethod{
  display:flex; align-items:center; gap:.75rem; cursor:pointer;
  padding:1rem 1.1rem; border:1px solid var(--hair-strong); border-radius:8px;
  background:rgba(255,255,255,.03);
  transition:border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.paymethod:hover{border-color:var(--blue-400)}
.paymethod input{accent-color:var(--navy-600); width:1.1rem; height:1.1rem}
.paymethod:has(input:checked){border-color:var(--blue-400); background:rgba(30,111,255,.10)}
.paymethod svg{color:var(--gold-300); flex:0 0 auto}
.paymethod b{font-family:var(--font-display); font-weight:700; font-size:.95rem; color:#fff; display:block}
.paymethod span{font-family:var(--font-display); font-size:.76rem; color:var(--on-dark-soft)}

/* --- Revisão (resumo dos dados) --- */
.review{border:1px solid var(--hair); border-radius:8px; padding:.4rem 0; margin-bottom:1.5rem}
.review dl{display:grid; grid-template-columns:1fr; gap:0}
@media(min-width:560px){.review dl{grid-template-columns:auto 1fr}}
.review dt{
  font-family:var(--font-display); font-weight:600; font-size:.78rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--on-dark-mute); padding:.7rem 1.1rem .1rem;
}
.review dd{margin:0; font-family:var(--font-display); font-size:.92rem; color:#fff; padding:0 1.1rem .7rem}
@media(min-width:560px){
  .review dt{padding:.75rem 1.1rem}
  .review dd{padding:.75rem 1.1rem}
  .review div{display:contents}
  .review dt,.review dd{border-bottom:1px solid var(--hair)}
}

/* --- Navegação do assistente --- */
.fnav{display:flex; gap:.9rem; margin-top:2rem; flex-wrap:wrap}
.fnav .btn{flex:1 1 auto; justify-content:center; min-width:140px}
.fnav .btn--back{flex:0 1 auto}

/* --- Tela de sucesso (prévia) --- */
.done{display:none; text-align:center; padding:1rem 0}
.done.is-active{display:block; animation:fstep .4s ease}
.done__ico{
  width:72px; height:72px; margin:0 auto 1.5rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(201,162,39,.14); border:1px solid var(--gold-500); color:var(--gold-300);
}
.done h2{font-size:var(--t-h3); color:#fff}
.done p{max-width:46ch; margin:.9rem auto 0; color:var(--on-dark-soft)}

/* Aviso de prévia (mockup) */
.preview-flag{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.5rem;
  font-family:var(--font-display); font-weight:600; font-size:.74rem; letter-spacing:.06em;
  color:var(--gold-300); background:rgba(201,162,39,.1);
  border:1px solid rgba(201,162,39,.35); border-radius:20px; padding:.4rem .9rem;
}

/* Aside de apoio (taxas/prazos ao lado do form em telas grandes) */
.formlayout{display:grid; gap:clamp(2rem,5vw,3.5rem)}
.formlayout > *{min-width:0}
@media(min-width:1024px){.formlayout{grid-template-columns:minmax(0,1fr) 300px; align-items:start}}
.faside{position:relative}
@media(min-width:1024px){.faside{position:sticky; top:calc(var(--header-h) + 1.5rem)}}
.faside__card{border:1px solid var(--hair); border-radius:8px; padding:1.4rem; margin-bottom:1.1rem; background:rgba(255,255,255,.02)}
.faside__card h3{font-size:.95rem; color:#fff; margin-bottom:.9rem}
.faside__card dl{display:grid; gap:.55rem}
.faside__card .r{display:flex; justify-content:space-between; gap:.75rem; font-family:var(--font-display); font-size:.84rem}
.faside__card .r dt{color:var(--on-dark-soft)} .faside__card .r dd{margin:0; color:#fff; font-weight:600}

@media (prefers-reduced-motion:reduce){
  .fpanel.is-active,.done.is-active{animation:none}
}