/*
 * Contact Form 7
 *
 * O visual continua o mesmo do site antigo, mas o HTML nao e nosso: e o CF7 que
 * monta. A versao 6 do plugin entrega cada campo assim:
 *
 *   <form class="wpcf7-form init">
 *     <fieldset class="hidden-fields-container">…</fieldset>
 *     <p>Seu nome <span class="wpcf7-form-control-wrap" data-name="your-name">
 *            <input class="wpcf7-form-control wpcf7-text" name="your-name"></span></p>
 *     <p>E-mail <span …><input …></span></p>
 *     <p><input class="wpcf7-form-control wpcf7-submit" type="submit"></p>
 *     <div class="wpcf7-response-output"></div>
 *   </form>
 *
 * Dois detalhe importam e custaram tempo:
 *
 * 1. O <p> e a celula da grade. O rotulo e texto puro dentro dele, nao um
 *    <label> — por isso o alinhamento em coluna vem de flex no <p>, e nao de
 *    estilo em label. Um <p> por campo so existe se o template do formulario
 *    no painel do CF7 trouxer os <p> explicitamente; ver o LEIA-ME.
 *
 * 2. O plugin embrulha o controle num <span class="wpcf7-form-control-wrap">
 *    que precisa ocupar a largura toda, senao o input encolhe.
 *
 * O botao: o CF7 6.x o emite como <input type="submit" class="wpcf7-submit">
 * (o <button> so aparece quando a opcao "usar o elemento button" esta marcada
 * nas preferencias do plugin). Por isso o estilo e em .wpcf7-submit e nao em
 * button.wpcf7-submit — escolher o elemento errado deixa o botao com o
 * tamanho do navegador.
 */

/* --------------------------------------------------------------------------
   Grade
   -------------------------------------------------------------------------- */
.wpcf7-form p{margin:0}

.contact-form .wpcf7-form,
.fr-form .wpcf7-form{display:grid;grid-template-columns:1fr 1fr;gap:17px 15px}

.contact-form .wpcf7-form>*,
.fr-form .wpcf7-form>*{margin:0;min-width:0}

/* A celula: rotulo em cima, controle embaixo. */
.contact-form .wpcf7-form>p,
.fr-form .wpcf7-form>p{
  display:flex;flex-direction:column;gap:8px;
  font-size:12px;font-weight:500;letter-spacing:.3px;line-height:1.4;
}

/* O plugin põe o input dentro de um span; sem isto ele não ocupa a coluna. */
.wpcf7-form .wpcf7-form-control-wrap{display:block;width:100%;min-width:0}
.wpcf7-form .wpcf7-form-control-wrap>*{width:100%;min-width:0}

/* --------------------------------------------------------------------------
   Controles
   -------------------------------------------------------------------------- */
.wpcf7-form .wpcf7-form-control{
  font:inherit;font-size:14px;line-height:1.5;font-weight:400;letter-spacing:0;
  border-radius:10px;padding:12px 14px;
  box-shadow:inset 0 1px 2px #0d3f2105;
  transition:background .2s,border-color .2s;
}
.wpcf7-form .wpcf7-form-control:focus{
  outline:2px solid var(--green);outline-offset:2px;border-color:transparent;
}

/* O CF7 cria o textarea com rows="10", que o deixaria bem mais alto que no site */
.wpcf7-form textarea.wpcf7-form-control{height:110px;min-height:110px;resize:vertical}

/* Campo de mensagem ocupa a linha inteira, como no .contact-message do site */
.contact-form .wpcf7-form>*:has(textarea),
.fr-form .wpcf7-form>*:has(textarea){grid-column:1/-1}

/* --------------------------------------------------------------------------
   Botao
   -------------------------------------------------------------------------- */
.wpcf7-form .wpcf7-submit{
  display:block;width:100%;background:var(--yellow);color:var(--deep);
  border:0;border-radius:999px;box-shadow:none;min-height:50px;
  font:inherit;font-size:15px;font-weight:600;line-height:1.4;text-align:center;
  cursor:pointer;padding:13px 24px;transition:background .2s,transform .2s;
}
.wpcf7-form .wpcf7-submit:hover{background:#f5ee51;transform:translateY(-1px)}
.wpcf7-form .wpcf7-submit:disabled{opacity:.6;cursor:wait;transform:none}
.wpcf7-form .wpcf7-submit .wpcf7-spinner{display:none}

.wpcf7-form .wpcf7-list-item{display:block;margin-left:auto}
.wpcf7-form .wpcf7-not-valid-tip{font-size:11px;color:#e57373;order:9}
.wpcf7-form .wpcf7-response-output{
  margin:0;font-size:13px;border-left:3px solid var(--green);padding-left:12px;color:inherit;
}
.wpcf7-form .wpcf7-response-output:empty{display:none}
.wpcf7-form .wpcf7-spinner,
.wpcf7-form .wpcf7-ajax-status{display:none}
.wpcf7-form .wpcf7-hide{display:none}
.wpcf7-form .screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* Resposta e botao ocupam a linha inteira */
.contact-form .wpcf7-form .wpcf7-submit,
.contact-form .wpcf7-form .wpcf7-response-output,
.fr-form .wpcf7-form .wpcf7-submit,
.fr-form .wpcf7-form .wpcf7-response-output{grid-column:1/-1}
.contact-form .wpcf7-form>p:has(.wpcf7-submit),
.fr-form .wpcf7-form>p:has(.wpcf7-submit){
  grid-column:1/-1;margin-top:3px;
  /* o <p> vira um bloco normal: sem isto o botao fica com a largura do texto
     e nao atravessa a linha do formulario */
  display:block;width:100%;
}

/* --- painel de contato da home ---------------------------------------------
   O cartao e o vidro ja vem de .contact-glass .contact-form (contact-glass.css).
   Aqui so o que o CF7 acrescenta por cima. */
.contact-glass .contact-form .wpcf7-form .wpcf7-form-control{background:#ffffffdb;color:#143e2c;border:1px solid #ffffffaa}
.contact-glass .contact-form .wpcf7-form .wpcf7-form-control:focus{background:#fff}
.contact-glass .contact-form .wpcf7-form .wpcf7-response-output{color:#deecdf}
.contact-glass .contact-form .wpcf7-form>p{color:#fff}

@media(max-width:720px){
  .contact-form .wpcf7-form,
  .fr-form .wpcf7-form{grid-template-columns:1fr;gap:15px}
  .wpcf7-form textarea.wpcf7-form-control{height:95px;min-height:95px}
}

/* --- formulario da franquia ----------------------------------------------
   Campos dentro do painel verde de .fr-form (franchise.css). */
.fr-form .wpcf7-form>p{color:#fff}
.fr-form .wpcf7-form .wpcf7-form-control{background:#ffffffdb;color:#143e2c;border:1px solid #ffffffaa}
.fr-form .wpcf7-form .wpcf7-form-control:focus{background:#fff}
.fr-form .wpcf7-form .wpcf7-response-output{color:#deecdf}

/* Caixa de aceite: linha, com o quadradinho na esquerda.
   O CF7 nunca bota a classe no <input>: ela fica no <span> que envolve o
   controle (wpcf7-acceptance no campo [acceptance], wpcf7-checkbox no
   [checkbox]). Por isso o alvo e o span, e o quadradinho e procurado por
   atributo. Vale para as duas tags porque o modulo [acceptance] nem sempre
   esta carregado na instalacao. */
.fr-form .wpcf7-form>*:is(:has(.wpcf7-acceptance),:has(.wpcf7-checkbox)){
  grid-column:1/-1;flex-direction:row;align-items:flex-start;gap:10px;
  font-size:13px;line-height:1.5;
}
.fr-form .wpcf7-form :is(.wpcf7-acceptance,.wpcf7-checkbox){
  display:flex;align-items:flex-start;gap:10px;
}
.fr-form .wpcf7-form :is(.wpcf7-acceptance,.wpcf7-checkbox) input[type="checkbox"]{
  width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--green);
}

/* Aviso mostrado no lugar do formulario quando ele ainda nao existe */
.cf7-note{margin:0;font-size:14px;line-height:1.6}
.contact-form .cf7-note{color:#deecdf}
.fr-form .cf7-note{color:#deecdf;text-align:center}

/* Texto extra da pagina de contato, quando o cliente escreve algo no editor */
.contato-extra{padding-block:48px;color:var(--ink)}
.contato-extra>:first-child{margin-top:0}
.contato-extra>:last-child{margin-bottom:0}

@media(prefers-reduced-motion:reduce){
  .wpcf7-form .wpcf7-form-control,
  .wpcf7-form .wpcf7-submit{transition:none}
}

/* --- Mobile: os campos em pares, na ordem que o formulario foi criado -----
   O CF7 nao deixa escolher a classe do <form>, e a ordem dos campos quem
   define e o painel. O que o tema faz e reposicionar cada campo pela
   propriedade order, sem mexer no markup: nome e telefone dividem a
   primeira linha, assunto e e-mail a segunda, a mensagem atravessa tudo.

   Se um campo for renomeado no painel, nenhum seletor casa e ele volta
   para a ordem do HTML — o formulario continua funcionando, so volta a
   empilhar. Os nomes usados aqui sao os do LEIA-ME: your-name,
   your-phone, your-subject, your-email, your-message. */
@media(max-width:720px){
  .contact-form .wpcf7-form,.fr-form .wpcf7-form{grid-template-columns:1fr 1fr;gap:13px 10px}
  .contact-form .wpcf7-form>*,
  .fr-form .wpcf7-form>*{min-width:0}

  .contact-form .wpcf7-form>*:has([name="your-name"]){order:1}
  .contact-form .wpcf7-form>*:has([name="your-phone"]){order:2}
  .contact-form .wpcf7-form>*:has([name="your-subject"]){order:3}
  .contact-form .wpcf7-form>*:has([name="your-email"]){order:4}
  .contact-form .wpcf7-form>*:has(textarea){order:5;grid-column:1/-1}

  .fr-form .wpcf7-form>*:has([name="your-name"]){order:1}
  .fr-form .wpcf7-form>*:has([name="your-phone"]){order:2}
  .fr-form .wpcf7-form>*:has([name="your-email"]){order:3}
  .fr-form .wpcf7-form>*:has([name="your-city"]){order:4}
  .fr-form .wpcf7-form>*:has([name="your-model"]){order:5}
  .fr-form .wpcf7-form>*:has([name="your-capital"]){order:6}
  .fr-form .wpcf7-form>*:is(:has(.wpcf7-acceptance),:has(.wpcf7-checkbox)){order:7;grid-column:1/-1}
  .fr-form .wpcf7-form>*:has(textarea){order:8;grid-column:1/-1}

  /* Resposta e botao sempre em baixo, depois de tudo. O order vai no <p> que
     envolve o botao — e ele, e nao o <button>, que e filho da grade. */
  .contact-form .wpcf7-form>*:has(.wpcf7-submit),
  .contact-form .wpcf7-form>.wpcf7-response-output,
  .fr-form .wpcf7-form>*:has(.wpcf7-submit),
  .fr-form .wpcf7-form>.wpcf7-response-output{order:9;grid-column:1/-1}
}
@media(max-width:420px){
  .contact-form .wpcf7-form>p,
  .fr-form .wpcf7-form>p{font-size:11.5px}
  .wpcf7-form .wpcf7-form-control{font-size:13.5px;padding:11px 11px}
  .wpcf7-form textarea.wpcf7-form-control{height:88px;min-height:88px}
}