/* 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;
  --borda: rgba(255, 255, 255, .55);
  --texto: #fff;
  /* Usado so pelo preenchimento automatico, que exige uma cor solida.
     Paginas com outro fundo redefinem esta linha. */
  --fundo: #0d0d0d;
}

.formOrc__grade { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
.formOrc__campo { margin: 0 0 14px; display: grid; }

/* Rotulo so para leitor de tela: quem enxerga se guia pelo placeholder. */
.formOrc__campo label {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.formOrc input,
.formOrc select,
.formOrc textarea {
  font-family: inherit; font-size: 14px; width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 2px solid var(--borda); border-radius: 5px;
  background-color: transparent; color: var(--texto);
  display: block; transition: border-color .2s; cursor: pointer;
}
.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: 5px; font-size: 12px; line-height: 1.35;
  color: var(--texto); opacity: .72;
}

/* ---- 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='%23d4a41e' d='M6 0l6 6-1.4 1.4L6 2.8 1.4 7.4 0 6z'/%3E%3C/svg%3E");
  background-color: rgba(212, 164, 30, .07);
}

.formOrc select:hover { border-color: rgba(212, 164, 30, .6); }

/* 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: #141414;
  color: #fff;
  padding: 10px;
}
.formOrc option:checked { background: #d4a41e; color: #111; }

/* Enquanto nada foi escolhido, o texto fica com o mesmo peso do placeholder
   dos outros campos. Depois de escolher, fica cheio, igual ao que foi
   digitado nos demais. */
.formOrc select:invalid { color: rgba(255, 255, 255, .75); }
.formOrc select:valid { color: #fff; font-weight: 600; }
.formOrc option[value=""] { color: rgba(255, 255, 255, .6); }
.formOrc input::placeholder,
.formOrc textarea::placeholder { color: rgba(255, 255, 255, .75); font-size: 14px; }
.formOrc input:focus,
.formOrc select:focus,
.formOrc textarea:focus { outline: none; border-color: var(--realce); }

/* Preenchimento automatico do navegador.
   O CSS do tema forcava fundo branco no campo autopreenchido, com !important:
   o nome aparecia em caixa branca no meio de um formulario escuro, e em
   alguns navegadores o texto branco sumia dentro dela. O Chrome so aceita
   fundo em autofill via box-shadow interno, e cor via -webkit-text-fill-color. */
.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(--fundo) inset !important;
  box-shadow: 0 0 0 40px var(--fundo) inset !important;
  -webkit-text-fill-color: var(--texto) !important;
  caret-color: var(--texto);
  transition: background-color 9999s ease-in-out 0s;
}
.formOrc :user-invalid { border-color: #e82929; }

/* O seletor de data nativo desenha o icone escuro: clareia. */
.formOrc input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }

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

.formOrc__enviar {
  width: 100%; padding: 12px 34px; border: 0; border-radius: 5px;
  background: var(--realce); color: #111;
  font-family: inherit; font-size: 15px; font-weight: 700;
  letter-spacing: .5px; cursor: pointer; transition: filter .2s;
}
.formOrc__enviar:hover:not(:disabled) { filter: brightness(1.08); }
.formOrc__enviar:disabled { opacity: .6; cursor: default; }

.formOrc__saida { margin: 12px 0 0; font-size: 14px; line-height: 1.4; }
.formOrc__saida:empty { display: none; }
.formOrc__saida.ok { color: #7ddc7d; }
.formOrc__saida.erro { color: #e82929; }

@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; }
}