/* ==========================================================================
   FRS City Page Layout — CSS responsivo
   Breakpoints alinhados aos do Divi:
     ≤ 767px   smartphones
     768–980px tablets
     ≥ 981px   desktop
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Rede de segurança (todas as larguras)
   -------------------------------------------------------------------------- */

/* Se a remoção via plugin estiver desligada, o bloco some por CSS.
   `:has()` esconde o módulo Code inteiro, sem deixar espaço vazio. */
.frs-mini-process { display: none !important; }
.et_pb_code:has(> .et_pb_code_inner > .frs-mini-process) { display: none !important; }

/* Nada dentro do widget pode empurrar a página para o lado. */
.frs-lead,
.frs-lead * { box-sizing: border-box; min-width: 0; }
.frs-lead { max-width: 100%; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   1. Formulário — base (mobile first)
   -------------------------------------------------------------------------- */

.frs-lead {
  font-family: inherit;
  color: #ffffff;                 /* o hero é escuro; herde do tema se mudar */
}

.frs-lead__title {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.frs-lead__subtitle {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.92;
}

.frs-lead__grid {
  display: grid;
  grid-template-columns: 1fr;     /* 1 coluna no celular */
  gap: 12px;
}

.frs-lead__field { display: flex; flex-direction: column; gap: 6px; }

/* Rótulo escondido visualmente mas lido por leitores de tela
   (o placeholder faz o papel visual, como no layout original). */
.frs-lead__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.frs-lead input,
.frs-lead select,
.frs-lead textarea {
  width: 100%;
  min-height: 52px;               /* alvo de toque confortável (≥ 44px) */
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  background: #ffffff;
  color: #1f2937;
  font: inherit;
  font-size: 16px;                /* 16px evita o zoom automático do iOS */
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
}

.frs-lead textarea { min-height: 96px; resize: vertical; }

.frs-lead select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f2937' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}

.frs-lead input::placeholder,
.frs-lead textarea::placeholder { color: #6b7280; }

.frs-lead input:focus,
.frs-lead select:focus,
.frs-lead textarea:focus {
  outline: 3px solid #f59e0b;
  outline-offset: 1px;
  border-color: #f59e0b;
}

/* Honeypot: fora da tela, nunca display:none (alguns bots detectam). */
.frs-lead__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.frs-lead__submit,
.frs-cta-assistant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;                    /* botão de largura total no celular */
  min-height: 54px;
  margin-top: 16px;
  padding: 14px 22px;
  border: 0;
  border-radius: 6px;
  background: #d32323;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

.frs-lead__submit:hover,
.frs-cta-assistant:hover { transform: translateY(-1px); filter: brightness(1.06); }
.frs-lead__submit:disabled { opacity: 0.65; cursor: wait; transform: none; }
.frs-lead__submit:focus-visible,
.frs-cta-assistant:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

.frs-lead__status {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
}
.frs-lead__status.is-ok    { background: rgba(22, 163, 74, 0.18); border: 1px solid rgba(22, 163, 74, 0.6); }
.frs-lead__status.is-error { background: rgba(220, 38, 38, 0.18); border: 1px solid rgba(220, 38, 38, 0.6); }

.frs-lead__form.is-sent .frs-lead__grid,
.frs-lead__form.is-sent .frs-lead__submit { display: none; }

/* --------------------------------------------------------------------------
   2. Tablets (768–980px): 2 colunas, botão ainda largo
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 980px) {
  .frs-lead__title { font-size: 32px; }

  .frs-lead__grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .frs-lead__field--full { grid-column: 1 / -1; }

  /* No tablet o Divi empilha as colunas do hero: dá respiro entre texto e form. */
  .et_pb_column:has(> .frs-lead) { margin-top: 24px; }
}

/* --------------------------------------------------------------------------
   3. Desktop (≥ 981px): 2 colunas, botão com largura natural
   -------------------------------------------------------------------------- */

@media (min-width: 981px) {
  .frs-lead__title { font-size: 40px; }
  .frs-lead__subtitle { font-size: 16px; }

  .frs-lead__grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .frs-lead__field--full { grid-column: 1 / -1; }

  .frs-lead__submit,
  .frs-cta-assistant { width: auto; min-width: 240px; }
}

/* --------------------------------------------------------------------------
   4. Smartphones (≤ 767px): ajustes finos
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .frs-lead__title { font-size: 26px; }
  .frs-lead__subtitle { font-size: 14px; }

  /* O hero do Divi costuma ter padding lateral pequeno no celular;
     garante que os campos não encostem na borda. */
  .et_pb_column:has(> .frs-lead) { padding-left: 4px; padding-right: 4px; }
}

/* --------------------------------------------------------------------------
   5. Acessibilidade e movimento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .frs-lead__submit,
  .frs-cta-assistant { transition: none; }
}