/* Fluent Forms vestido com o design do build original (contact.css .form-*).
   Carrega global: o mesmo form serve todas as paginas com secao de enquiry.
   !important nos atributos visuais: o CSS do plugin carrega depois do tema e
   empata em especificidade — sem isso a caixa/botao azul padrao vencem. */
.fluentform { position: relative; }
.fluentform .ff-el-group { margin-bottom: 26px; }

.fluentform .ff-el-input--label label {
  display: block; font-size: 13px !important; letter-spacing: var(--ls-wider, .12em);
  text-transform: uppercase; color: var(--gold-ink, #735831) !important; font-weight: 700 !important;
  margin-bottom: 10px; font-family: 'Nunito Sans', sans-serif !important;
}
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: var(--gold-deep, #8a6a3b) !important; }

.fluentform .ff-el-form-control,
.fluentform input.ff-el-form-control,
.fluentform textarea.ff-el-form-control {
  width: 100% !important;
  border: none !important;
  border-bottom: 1.5px solid rgba(115, 88, 49, .38) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 14px 0 !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 16px !important;
  color: var(--text-primary, #2a2420) !important;
  transition: border-color .25s;
  -webkit-appearance: none;
  box-shadow: none !important;
  height: auto !important;
}
.fluentform .ff-el-form-control::placeholder { color: var(--text-muted, #8d8378); opacity: .7; }
.fluentform .ff-el-form-control:focus {
  outline: none !important;
  border-bottom: 2px solid var(--gold-deep, #8a6a3b) !important;
  box-shadow: none !important;
}
.fluentform textarea.ff-el-form-control { resize: vertical; min-height: 120px !important; line-height: 1.65 !important; }

.fluentform .ff-btn-submit,
.fluentform button.ff-btn-submit,
.fluentform .ff_submit_btn_wrapper .ff-btn {
  display: inline-flex !important; align-items: center; gap: 12px;
  background: var(--charcoal, #2a2420) !important;
  color: var(--cream, #faf7f2) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: var(--ls-wider, .12em) !important; text-transform: uppercase !important;
  padding: 17px 36px !important;
  border: 1.5px solid var(--charcoal, #2a2420) !important;
  border-radius: 0 !important;
  cursor: pointer; transition: all .25s ease;
  min-height: 0 !important;
}
.fluentform .ff-btn-submit::after { content: '\2192'; transition: transform .2s; font-weight: 400; }
.fluentform .ff-btn-submit:hover,
.fluentform button.ff-btn-submit:hover {
  background: var(--gold-deep, #8a6a3b) !important;
  border-color: var(--gold-deep, #8a6a3b) !important;
  color: #fff !important;
}
/* wrapper do botao: o Fluent poe fundo cinza no bloco — remover */
.fluentform .ff_submit_btn_wrapper { background: transparent !important; padding: 0 !important; margin-top: 8px; }

.fluentform .ff-el-is-error .ff-el-form-control { border-bottom-color: #b3573f !important; }
.fluentform .text-danger { color: #b3573f !important; font-size: 13px; margin-top: 6px; }

.fluentform .ff-message-success {
  border: 1.5px solid var(--gold-deep, #8a6a3b) !important;
  background: var(--white, #fff) !important;
  border-radius: 0 !important; box-shadow: none !important;
  padding: 28px; text-align: center; font-family: 'Nunito Sans', sans-serif;
  font-size: 16px; line-height: 1.65; color: var(--text-body, #4a4238);
}

/* ── Layout do design original ─────────────────────────────── */

/* Full Name + Email lado a lado — SO no form de contato (ID 3), como no design.
   O form 4 (home/tratamentos) e coluna unica. Markup real do Fluent:
   form > FIELDSET > campos; o campo de nome NAO e .ff-el-group, vem em
   .ff-field_container.ff-name-field-wrapper. display:contents no fieldset
   faz os campos participarem do grid do form. */
.fluentform form.fluent_form_3 {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px;
}
.fluentform form.fluent_form_3 > fieldset { display: contents; border: 0; padding: 0; margin: 0; min-width: 0; }
.fluentform form.fluent_form_3 fieldset > * { grid-column: 1 / -1; }
.fluentform form.fluent_form_3 fieldset > .ff-name-field-wrapper,
.fluentform form.fluent_form_3 fieldset > .ff-name-field-wrapper + .ff-el-group { grid-column: auto; }
/* o wrapper do nome tem grupo interno com margem propria — evita margem dupla */
.fluentform .ff-name-field-wrapper { margin-bottom: 26px; }
.fluentform .ff-name-field-wrapper .ff-el-group { margin-bottom: 0; }

/* Sem asterisco: o design dela nao marca required (os opcionais e que levam tag) */
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label::before { content: none !important; }

/* Botao a direita, disclaimer a esquerda na mesma linha (o .form-footer dela).
   O <p class="form-disclaimer"> vem depois do form no markup; o negative margin
   sobe ele para o lado do botao. */
.fluentform .ff_submit_btn_wrapper { display: flex; justify-content: flex-end; }
.fluentform + p.form-disclaimer,
div.fluentform ~ p.form-disclaimer {
  max-width: 55%;
  margin-top: -60px !important;
  min-height: 60px;
}

@media (max-width: 760px) {
  .fluentform form.fluent_form_3 fieldset > .ff-name-field-wrapper,
  .fluentform form.fluent_form_3 fieldset > .ff-name-field-wrapper + .ff-el-group { grid-column: 1 / -1; }
  .fluentform + p.form-disclaimer,
  div.fluentform ~ p.form-disclaimer { max-width: 100%; margin-top: 18px !important; min-height: 0; }
  .fluentform .ff_submit_btn_wrapper { justify-content: stretch; }
  .fluentform .ff-btn-submit { width: 100% !important; justify-content: center; }
}