/* Estilo do modal — aparência escura com campos brancos */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1200;
  align-items: center;
  justify-content: center;
  padding: 28px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.modal-overlay[aria-hidden="false"] { display: flex; }

#contactPreference {
    display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.modal-card {
  position: relative;
  width: calc(100% - 32px);
  max-width: 680px;
  max-height: calc(var(--vh, 1vh) * 100 - 40px);
  background: #ffffff;
  color: #000000;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  z-index: 12;
  padding: 28px 28px 22px;
  overflow: hidden;
  transform-origin: center center;
  transition: transform 220ms cubic-bezier(.2,.9,.3,1), opacity 180ms ease;
  display: flex;
  flex-direction: column;
}

.modal-card .modal-body,
.modal-form,
.modal-card > .modal-form,
.modal-card > .modal-header + .modal-form {
  overflow: auto;
  padding-right: 8px;
}


.modal-form {
  flex: 1 1 auto;
  min-height: 0;
}

/* Close button */
.modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
  border: 0;
  background: transparent;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.75);
  cursor: pointer;
  padding: 6px;
}
.modal-close:hover { color: #bdbdbd; }

/* Header (opcional) */
.modal-header h2 {
  text-align: center;
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 700;
  color: #000000;
}
.modal-sub { margin: 0 0 16px 0; color: rgba(0, 0, 0, 0.72); font-weight: 300; }

/* Form — layout em coluna única conforme exemplo */
.modal-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Form row */
.modal-form .form-row { display:flex; flex-direction:column; gap:8px; }
.modal-form .form-row label {
  color: #000000;
  font-weight: 600;
  font-size: 14px;
}

/* Campos de entrada: fundo branco, cantos arredondados, largura total */
.modal-form .form-row input,
.modal-form .form-row textarea {
    text-align: left;
  width: 100%;
  background: #fff;
  color: #0b0b0b;
  border: none;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 6px 18px rgba(12,12,12,0.12);
  resize: vertical;
  transition: box-shadow 140ms ease, transform 120ms ease;
}

/* Placeholder color */
.modal-form .form-row input::placeholder,
.modal-form .form-row textarea::placeholder { color: #9b9b9b; }

/* Foco nos campos */
.modal-form .form-row input:focus,
.modal-form .form-row textarea:focus {
  outline: none;
  /* box-shadow: 0 10px 30px rgba(101,64,255,0.18); */
  transform: translateY(-1px);
}

/* Textarea estilo semelhante ao anexo: fonte monoespaçada e texto centrado */
.modal-form textarea {
  min-height: 120px;
  font-family: "Courier New", Courier, monospace;
  text-align: center;
  line-height: 1.5;
}

/* Fieldset (radio group) — manter sobre fundo escuro */
.modal-form .form-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.modal-form .form-fieldset legend {
  color: #000000;
  font-weight: 700;
  margin-bottom: 6px;
}

/* Radio row */
.radio-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.radio-label {
  display:flex;
  gap:8px;
  align-items:center;
  cursor:pointer;
  user-select:none;
  color: rgba(0, 0, 0, 0.92);
  font-weight:600;
  padding:6px 8px;
  border-radius:8px;
}
.radio-label input[type="radio"] { width:18px; height:18px; accent-color:#6f4bff; }

/* Visual feedback for selected radio label */
.radio-label input[type="radio"]:checked + span,
.radio-label input[type="radio"]:checked ~ span {
  color: #6f4bff;
}

/* Ações: botão centralizado, roxo, arredondado (estilo do anexo) */
.form-actions { display:flex; justify-content:center; margin-top:4px; }
.btn-submit {
  background: linear-gradient(180deg, #8b63ff 0%, #6f4bff 100%);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 12px;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  box-shadow: 0 8px 30px rgba(111,75,255,0.18);
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
  min-width: 160px;
}
.btn-submit:hover, .btn-submit:focus {
  transform: translateY(-3px);
  /* box-shadow: 0 14px 40px rgba(111,75,255,0.22); */
  outline: none;
}

/* Ajustes responsivos */
@media (max-width: 720px) {
  
  .modal-card { padding: 20px; max-width: 96%; }
  .modal-header h2 { font-size: 18px; }
  .modal-form { gap: 12px; }
  .modal-form .form-row input,
  .modal-form .form-row textarea { padding: 10px 12px; border-radius: 10px; }
  .btn-submit { width: 100%; max-width: 320px; }
  .modal-card {
    padding: 14px;
    border-radius: 10px;
    max-width: calc(100% - 20px);
    max-height: calc(var(--vh, 1vh) * 100 - 24px);
  }
}

/* Pequena correção visual para o close button em contexto escuro */
.modal-close { color: rgba(0, 0, 0, 0.7); }