/* Estilo do formulario de orcamento, o mesmo em todas as paginas.
   Fica em arquivo proprio, e nao dentro de um componente, porque as landing
   pages entram como HTML cru e precisam das mesmas regras.
   Todas as paginas do site tem fundo escuro, entao o desenho e claro sobre
   transparente, igual ao que o tema ja fazia. */

.formOrc {
  --realce: #d4a41e;
  /* Os campos sao claros de proposito, mesmo em pagina de fundo escuro.
     Transparente sobre preto parecia moldura vazia: nao dava para saber onde
     tocar nem enxergar bem o que ja tinha sido escrito. Campo claro com texto
     escuro e o que a pessoa reconhece como "aqui se escreve". */
  --seguir: #22c55e;
  --campo: #fff;
  --campoTexto: #1a1a1a;
  --campoDica: #565656;
  --borda: #cfcfcf;
  --texto: #fff;
  --fundo: #fff;
}

/* align-items: start impede que um campo estique para acompanhar a altura
   do vizinho. Sem isso, a nota do recesso embaixo da data alongava a linha
   inteira e o campo de convidados ao lado nascia com o dobro da altura. */
.formOrc__grade {
  display: grid; grid-template-columns: 1fr; gap: 0 16px;
  align-items: start;
}
/* A especificidade e proposital. O tema tem .footerform__form p com
   margin-bottom: 20px, que vencia .formOrc__campo sozinha: o formulario da
   home nascia mais espacado que o das outras paginas, e ninguem via porque
   as duas versoes nunca aparecem lado a lado. */
.formOrc .formOrc__campo { margin: 0 0 8px; display: grid; align-content: start; }

/* O cabecalho do site e fixo e tem 78px. Quando o navegador rola um campo
   para a vista ao receber o foco, sem esta margem o campo para embaixo do
   cabecalho e a pessoa digita sem ver o que escreveu. */
.formOrc__campo,
.formOrc { scroll-margin-top: 96px; }

/* O rotulo era escondido e quem enxerga se guiava pela dica dentro do campo.
   So que a dica some assim que a pessoa comeca a escrever: se ela para no
   meio e volta depois, nao sabe mais o que aquele campo pedia. Num publico
   de mais idade isso pesa. Agora o rotulo fica visivel acima do campo. */
.formOrc__campo label:not(.formOrc__opcao) {
  font-size: 15px; font-weight: 600; line-height: 1.3;
  color: var(--texto); margin-bottom: 3px;
  /* A esquerda, sempre. Varias secoes do tema centralizam o texto, e o
     rotulo centralizado obriga o olho a procurar onde cada linha comeca.
     Alinhado a esquerda, ele desce pela mesma margem do campo. */
  text-align: left;
}
.formOrc__opcional { font-weight: 400; opacity: .75; }

.formOrc input,
.formOrc select,
.formOrc textarea {
  font-family: inherit; font-size: 17px; width: 100%; box-sizing: border-box;
  padding: 13px 14px; border: 2px solid var(--borda); border-radius: 5px;
  background-color: var(--campo); color: var(--campoTexto);
  display: block; cursor: pointer;
  /* Diz ao sistema para desenhar em claro tudo o que e dele: a lista que
     abre no seletor, o cursor e o menu de sugestoes. Sem isto, num celular
     com o tema escuro ligado a lista saia preta com letra escura e quase
     nao dava para ler os tipos de festa. O CSS de option nao alcanca esse
     painel, porque quem desenha e o sistema, nao a pagina. */
  color-scheme: light;
  transition: border-color .2s, box-shadow .2s;
}

/* O campo em foco ganha borda dourada e um halo. Num formulario de seis
   campos, saber em qual voce esta e metade da facilidade. */
.formOrc input:focus,
.formOrc select:focus,
.formOrc textarea:focus {
  border-color: var(--realce);
  box-shadow: 0 0 0 3px rgba(212, 164, 30, .28);
}
.formOrc textarea { resize: vertical; min-height: 62px; }

/* Nota abaixo do campo de data: avisa do recesso antes de a pessoa escolher,
   em vez de so recusar depois. */
.formOrc__nota {
  display: block; margin-top: 7px; font-size: 14px; line-height: 1.45;
  color: #d8d8d8;
}

/* ---- o seletor de tipo de evento ----------------------------------------
   O <select> nativo desenha uma seta cinza pequena, do sistema, que num
   fundo escuro quase some. Aqui a seta e nossa: um SVG dourado embutido no
   proprio CSS, sem arquivo extra para o navegador buscar.
   O padding a direita abre espaco para ela nao encostar no texto. */
.formOrc select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23d4a41e' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  text-overflow: ellipsis;
}

/* A seta sobe quando o campo esta aberto ou em foco: da a sensacao de que
   o campo respondeu ao toque, que o select nativo nao transmite. */
.formOrc select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23a07408' d='M6 0l6 6-1.4 1.4L6 2.8 1.4 7.4 0 6z'/%3E%3C/svg%3E");
}

.formOrc select:hover { border-color: #a8a8a8; }

/* A lista aberta e desenhada pelo sistema. Windows e Linux respeitam estas
   cores; o macOS ignora e usa o painel dele. Vale por onde funciona. */
.formOrc option {
  background: #fff;
  color: var(--campoTexto);
  padding: 10px;
}
.formOrc option:checked { background: #d4a41e; color: #111; }

/* Enquanto nada foi escolhido, o texto fica com o mesmo peso da dica dos
   outros campos. Depois de escolher, fica cheio, igual ao que foi digitado
   nos demais. */
.formOrc select:invalid { color: var(--campoDica); }
.formOrc select:valid { color: var(--campoTexto); font-weight: 600; }
.formOrc option[value=""] { color: var(--campoDica); }
.formOrc input::placeholder,
.formOrc textarea::placeholder { color: var(--campoDica); font-size: 17px; opacity: 1; }
.formOrc input:focus,
.formOrc select:focus,
.formOrc textarea:focus { outline: none; }

/* Preenchimento automatico do navegador. O Chrome so aceita fundo em autofill
   via box-shadow interno, e cor via -webkit-text-fill-color. Sem estas linhas
   ele pinta um amarelo-claro proprio, que destoa do resto do formulario. */
.formOrc input:-webkit-autofill,
.formOrc input:-webkit-autofill:hover,
.formOrc input:-webkit-autofill:focus,
.formOrc textarea:-webkit-autofill,
.formOrc select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--campo) inset !important;
  box-shadow: 0 0 0 40px var(--campo) inset !important;
  -webkit-text-fill-color: var(--campoTexto) !important;
  caret-color: var(--campoTexto);
  transition: background-color 9999s ease-in-out 0s;
}

/* So marca de vermelho depois que a pessoa mexeu no campo e saiu, nunca em
   campo que ela ainda nem visitou. */
.formOrc :user-invalid { border-color: #d32020; box-shadow: 0 0 0 3px rgba(211, 32, 32, .18); }

.formOrc__isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.formOrc__enviar {
  width: 100%; min-height: 50px; padding: 11px 34px; border: 0; border-radius: 5px;
  /* Verde de "siga", separado do ouro. O ouro passou a significar uma coisa
     so no formulario: o que voce escolheu. O verde significa outra: agora e
     enviar. Texto quase preto sobre ele da 7,27:1, e o conjunto brilha sobre
     o fundo escuro da pagina, que e onde o botao precisa ser achado. */
  background: var(--seguir); color: #06240f;
  font-family: inherit; font-size: 18px; font-weight: 700;
  letter-spacing: .5px; cursor: pointer; transition: filter .2s;
}
.formOrc__enviar:hover:not(:disabled) { filter: brightness(1.06); }
.formOrc__enviar:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.formOrc__enviar:disabled { opacity: .6; cursor: default; }

/* O aviso de envio nasce com altura reservada. Antes ele aparecia do nada
   e empurrava a pagina para baixo bem na hora do envio, que e o pior momento
   possivel para a tela se mexer. */
.formOrc__saida {
  margin: 12px 0 0; font-size: 16px; line-height: 1.45;
  min-height: 22px;
}
.formOrc__saida.ok { color: #7ddc7d; }
.formOrc__saida.erro { color: #e82929; }

/* No celular os campos vao a 16px, e o motivo e tecnico, nao estetico.
   O Safari do iPhone da zoom automatico em qualquer campo com fonte menor
   que 16px assim que a pessoa toca nele, e depois deixa a pagina deslocada.
   E o que fazia o site "dancar" no meio do preenchimento. A partir de 16px
   o zoom nao dispara. O desenho do desktop fica como esta.

   Nao resolvemos isso travando o zoom no meta viewport de proposito: isso
   tiraria a ampliacao de quem enxerga pouco. */
@media (max-width: 699px) {
  .formOrc__campo label:not(.formOrc__opcao) { font-size: 16px; }
}

/* Todos os campos com a mesma altura. Antes havia uma excecao para o seletor
   de data nativo, que se media sozinho e nascia mais alto; agora o campo de
   data e texto comum e entra na mesma regra. */
@media (max-width: 699px) {
  .formOrc input,
  .formOrc select { min-height: 52px; }
  .formOrc textarea { min-height: 84px; }
}

@media (min-width: 700px) {
  .formOrc__grade { grid-template-columns: 1fr 1fr; }
  .formOrc__campo--largo { grid-column: 1 / -1; }
  .formOrc__enviar { width: auto; min-width: 200px; }
}


/* ==========================================================================
   ESCOLHA DO TIPO DE FESTA
   Eram opcoes dentro de um <select>. A lista que ele abre e desenhada pelo
   sistema operacional, nao pela pagina: no celular saia pequena e apagada, e
   nenhuma regra de option a alcancava. Aqui as cinco opcoes ficam a mostra,
   com o desenho sob nosso controle e um toque em vez de dois.
   ========================================================================== */

.formOrc .formOrc__escolha {
  border: 0; margin: 0 0 8px; padding: 0;
  display: grid; gap: 5px;
}

.formOrc__escolha legend {
  padding: 0; margin-bottom: 4px; float: left; width: 100%;
  font-size: 15px; font-weight: 600; line-height: 1.3;
  color: var(--texto); text-align: left;
}

.formOrc__opcao {
  display: flex; align-items: center; gap: 11px;
  min-height: 44px; padding: 6px 14px;
  background: var(--campo); color: var(--campoTexto);
  border: 2px solid var(--borda); border-radius: 5px;
  font-size: 17px; line-height: 1.3; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}

/* A bolinha e desenhada aqui, e nao pelo sistema, para ter tamanho suficiente
   de ser vista. A nativa tem cerca de 13px. */
.formOrc__opcao input {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; min-height: 0; margin: 0; flex: 0 0 22px;
  border: 2px solid #9a9a9a; border-radius: 50%;
  background: #fff; cursor: pointer; padding: 0;
  display: grid; place-content: center;
}
.formOrc__opcao input::before {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  background: var(--realce); transform: scale(0); transition: transform .12s;
}
.formOrc__opcao input:checked::before { transform: scale(1); }
.formOrc__opcao input:checked { border-color: var(--realce); }

.formOrc__opcao:hover { border-color: #a8a8a8; }

/* A opcao escolhida muda a caixa inteira, e nao so a bolinha: assim da para
   ver o que foi marcado sem precisar enxergar um detalhe de 14 pixels. */
.formOrc__opcao:has(input:checked) {
  border-color: var(--realce);
  background: #fdf6e3;
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(212, 164, 30, .28);
}

/* Navegacao por teclado precisa de um alvo visivel. */
.formOrc__opcao:has(input:focus-visible) {
  border-color: var(--realce);
  box-shadow: 0 0 0 3px rgba(212, 164, 30, .45);
}

/* Onde :has ainda nao existe, o foco na propria bolinha resolve. */
.formOrc__opcao input:focus-visible { outline: 3px solid var(--realce); outline-offset: 2px; }

@media (max-width: 699px) {
  .formOrc__escolha legend { font-size: 16px; }
  /* 48px e o alvo de toque confortavel; abaixo disso o dedo erra. Fica no
     limite de proposito: cada pixel a menos aqui e um pixel a mais de
     chance do botao de enviar caber na tela junto com as opcoes. */
  .formOrc__opcao { min-height: 44px; font-size: 16px; }
}


/* ==========================================================================
   ESPACO AO REDOR DO FORMULARIO NO CELULAR
   O tema reservava 60px acima e 190px abaixo, medidas pensadas para tela
   grande. Num iPhone o Safari deixa cerca de 664px de altura util, e o
   cabecalho fixo ja leva 78px: com aquelas folgas o botao de enviar caia
   fora da primeira tela. Aqui a folga de cima encolhe e a de baixo fica no
   necessario para o botao flutuante e a barra de cookies nao encostarem.
   ========================================================================== */
@media (max-width: 699px) {
  .footerform { padding: 12px 0 90px; }
  .footerform__subtitle { font-size: 21px; margin-bottom: 4px; line-height: 1.25; }
  .footerform__form p:not(.formOrc__campo):not(.formOrc__saida) { margin-bottom: 10px; }
}