/* ===== Estrutura ===== */
.form-hero{ padding-block: clamp(24px, 5vw, 64px); }
.form-hero .lead{ max-width: 70ch; color:#444; }
.form-section{ padding-block: clamp(16px, 4.5vw, 56px); }

.vr-form{
  background:#fff; border:1px solid #eee; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding: clamp(16px, 3vw, 28px);
}

/* ===== Grid ===== */
.form-grid{
  display:grid; grid-template-columns:1fr; gap: clamp(12px, 2.2vw, 18px);
}
.form-group--full{ grid-column:1 / -1; }
@media (min-width: 860px){
  .form-grid{ grid-template-columns: repeat(2, 1fr); }
  .form-group--full{ grid-column:1 / 3; }
}

/* ===== Campos ===== */
label{ display:block; font-weight:600; margin:0 0 .35rem; }

/* Base para inputs/textarea/select com visual unificado */
.vr-form input[type="text"],
.vr-form input[type="email"],
.vr-form input[type="tel"],
.vr-form input[type="search"],
.vr-form input[type="number"],
.vr-form textarea,
.vr-form select{
  width:100%;
  border:1px solid #e1e1e1;
  border-radius:10px;
  padding:.8rem 1rem;
  font:inherit;
  line-height:1.4;
  background:#fff;
  transition:border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}

/* Número (Tempo de Serviço) — remove “setinhas” e mantém visual */
.vr-form input[type="number"]{
  min-height: 44px;
  -moz-appearance: textfield;
}
.vr-form input[type="number"]::-webkit-outer-spin-button,
.vr-form input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Select com ícone */
.vr-form select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  min-height: 44px;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23159d6e' stroke-width='2'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right .9rem center;
  background-size: 18px 18px;
  padding-right: 2.5rem;
  cursor:pointer;
}
.vr-form select:hover{ border-color:#159d6e; background-color:#fffdf7; }

.vr-form input::placeholder, .vr-form textarea::placeholder{ color:#9a9a9a; }
.vr-form input:focus, .vr-form select:focus, .vr-form textarea:focus{
  outline:none; border-color:#159d6e; box-shadow:0 0 0 3px rgba(21,157,110,.15);
}

.help{ display:block; color:#666; margin-top:.25rem; font-size:.92rem; }
.help.muted{ color:#777; }

/* ===== CHIPS (texto clicável, sem checkbox visível) ===== */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }

/* Esconde visualmente os checkboxes, mantendo acessibilidade */
.chip-input{
  position:absolute;
  opacity:0;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* Botão visual */
.chip{
  --bd:#e5e5e5; --fg:#222; --bg:#fff;
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  padding:.55rem .9rem; border-radius:999px; cursor:pointer; user-select:none;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.08); }

/* Estado selecionado vem do input:checked + label */
.chip-input:checked + .chip{
  --bd:#0b3d2e; --fg:#fff; --bg:linear-gradient(135deg,#0b3d2e,#159d6e);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

/* ===== LGPD (custom, ao final) ===== */
.form-consent{
  margin-top: 12px;
  background: #fff;
  border: 1px solid rgba(11,42,91,.08);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 6px 20px rgba(11,42,91,.05);
}
.consent{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.consent input[type="checkbox"]{ position: absolute; opacity: 0; pointer-events: none; }
.consent-box{
  width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid #e5e7eb; background: #fff; display:inline-block; flex:0 0 22px;
  box-shadow: inset 0 0 0 0 transparent; transition: all .18s ease;
}
.consent-text{ color:#1e1e1e; line-height:1.35; }
.consent-text small{ display:block; color:#6b7280; margin-top:2px; }
.consent-text a{ color:#0b2a5b; text-decoration: underline; }
.consent:hover .consent-box{ border-color:#c9a227; }
.consent input[type="checkbox"]:focus-visible + .consent-box{
  outline:none; border-color:#c9a227; box-shadow:0 0 0 4px rgba(201,162,39,.35);
}
.consent input[type="checkbox"]:checked + .consent-box{
  background: linear-gradient(135deg, #c9a227, #3f6f52);
  border-color: transparent; position: relative;
}
.consent input[type="checkbox"]:checked + .consent-box::after{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l4 4 8-10'/%3E%3C/svg%3E");
  background-position:center; background-repeat:no-repeat; background-size:16px 16px;
}
@media (max-width: 800px){
  .form-consent{ padding:12px 14px; }
  .consent-box{ width:20px; height:20px; flex-basis:20px; }
}

/* Erros/estados */
.error{ color:#b00020; font-size:.9rem; margin-top:.3rem; display:block; }
[aria-invalid="true"]{
  border-color:#b00020 !important; box-shadow:0 0 0 3px rgba(176,0,32,.12) !important;
}
[aria-busy="true"]{ opacity:.7; pointer-events:none; }

/* Ações */
.form-actions{ display:flex; gap:.8rem; justify-content:flex-end; margin-top:1rem; }
@media (max-width:560px){ .form-actions{ flex-direction:column; } .form-actions .btn{ width:100%; justify-content:center; } }

/* Acessibilidade utilitária */
.sr-only{
  position:absolute !important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.is-hidden{ display:none !important; }