/**
 * Theme Name:     Hello Elementor Child
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:	   hello-elementor-child
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor page builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */
/* =========================================================
   APOLLO | JetFormBuilder — Formulários multi-etapas
   Acessibilidade: WCAG 2.2 AA | foco visível | contraste alto
   Última revisão: 2025-10-27
   ========================================================= */

/* ---------- Design tokens (tema) ---------- */
:root{
  /* cores base (clareza AA em fundo claro) */
  --ap-bg: #ffffff;
  --ap-surface: #f7f7f8;
  --ap-border: #d9dbe1;

  /* brand */
  --ap-primary: #1b59f8;          /* azul destaque */
  --ap-primary-contrast: #ffffff; /* texto em botão primário */

  /* estados */
  --ap-success: #1f9d55;
  --ap-warning: #b7791f;
  --ap-danger:  #d32f2f;

  /* texto */
  --ap-text: #0f172a;       /* quase-preto */
  --ap-text-soft: #475569;  /* cinza texto secundário */
  --ap-placeholder: #94a3b8;

  /* foco (alta visibilidade) */
  --ap-focus: #ffbf47;  /* âmbar vívido; contrasta em claro e escuro */

  /* UI */
  --ap-radius: 12px;
  --ap-radius-sm: 10px;
  --ap-shadow: 0 8px 30px rgba(2,6,23,.08);
  --ap-gap: 16px;
  --ap-field-h: 48px;
  --ap-trans: 160ms cubic-bezier(.2,.7,.2,1);
}

/* Dark mode automático */
@media (prefers-color-scheme: dark){
  :root{
    --ap-bg: #0b0f19;
    --ap-surface: #111827;
    --ap-border: #253047;
    --ap-text: #e5e7eb;
    --ap-text-soft: #cbd5e1;
    --ap-placeholder: #8893a7;
    --ap-shadow: 0 8px 30px rgba(0,0,0,.35);
  }
}

/* Reduzir movimento para quem prefere */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Contêiner geral do formulário ---------- */
.jet-form-builder,
[class*="jet-form-builder"] form{
  color: var(--ap-text);
}

.jet-form-builder form,
.jet-form-builder{
  background: var(--ap-bg);
}

/* largura e espaçamento do bloco do formulário */
.jet-form-builder,
.jet-form-builder form .jet-form-builder__form{
  max-width: min(980px, 92vw);
  margin-inline: auto;
}

/* seções/páginas */
.jet-form-builder .jet-form-builder__row,
.jet-form-builder .jet-form-builder__group{
  display: grid;
  gap: calc(var(--ap-gap) * 1.25);
  margin-block: calc(var(--ap-gap) * 1.25);
}

/* ---------- Tipografia ---------- */
.jet-form-builder h1,
.jet-form-builder h2,
.jet-form-builder h3{
  line-height: 1.15;
  letter-spacing: .2px;
}
.jet-form-builder p,
.jet-form-builder .description{
  color: var(--ap-text-soft);
}

/* ---------- Campos ---------- */
.jet-form-builder input[type="text"],
.jet-form-builder input[type="email"],
.jet-form-builder input[type="tel"],
.jet-form-builder input[type="url"],
.jet-form-builder input[type="number"],
.jet-form-builder input[type="password"],
.jet-form-builder input[type="search"],
.jet-form-builder textarea,
.jet-form-builder select{
  appearance: none;
  width: 100%;
  min-height: var(--ap-field-h);
  padding: 12px 14px;
  border: 1.5px solid var(--ap-border);
  border-radius: var(--ap-radius);
  background: var(--ap-surface);
  color: var(--ap-text);
  box-shadow: none;
  transition: border-color var(--ap-trans), background-color var(--ap-trans), box-shadow var(--ap-trans);
}

.jet-form-builder textarea{
  min-height: 128px;
  resize: vertical;
}

/* Placeholder com contraste adequado */
.jet-form-builder ::placeholder{ color: var(--ap-placeholder); }

/* Hover + focus visível (AA) */
.jet-form-builder input:hover,
.jet-form-builder textarea:hover,
.jet-form-builder select:hover{
  border-color: color-mix(in srgb, var(--ap-border) 60%, var(--ap-text) 40%);
}

.jet-form-builder input:focus-visible,
.jet-form-builder textarea:focus-visible,
.jet-form-builder select:focus-visible,
.jet-form-builder [role="radio"]:focus-visible,
.jet-form-builder [role="checkbox"]:focus-visible,
.jet-form-builder input[type="radio"]:focus-visible,
.jet-form-builder input[type="checkbox"]:focus-visible{
  outline: 3px solid var(--ap-focus);
  outline-offset: 2px;
  border-color: var(--ap-focus);
  background: color-mix(in srgb, var(--ap-surface) 70%, var(--ap-focus) 30%);
}

/* Labels e ajuda */
.jet-form-builder label{
  display: inline-block;
  font-weight: 600;
  margin-block-end: 6px;
}
.jet-form-builder .jet-form-builder__desc,
.jet-form-builder .jet-form-builder__field-description,
.jet-form-builder .jet-form-builder__help{
  font-size: .95rem;
  color: var(--ap-text-soft);
}

/* ---------- Radios & checkboxes (aumenta área clicável) ---------- */
.jet-form-builder .jet-form-builder__fields-group .checkbox-field,
.jet-form-builder .jet-form-builder__fields-group .radio-field,
.jet-form-builder .checkbox-field,
.jet-form-builder .radio-field{
  display: grid;
  grid-template-columns: 1.25em auto;
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--ap-border);
  border-radius: var(--ap-radius-sm);
  background: var(--ap-surface);
}

.jet-form-builder input[type="checkbox"],
.jet-form-builder input[type="radio"]{
  width: 1.25em; height: 1.25em;
  margin-top: .2em;
}

/* ---------- Mensagens de erro/validação ---------- */
.jet-form-builder .jet-form-builder__field.is-error input,
.jet-form-builder .jet-form-builder__field.is-error textarea,
.jet-form-builder .jet-form-builder__field.is-error select,
.jet-form-builder .is-error input,
.jet-form-builder .is-error textarea,
.jet-form-builder .is-error select{
  border-color: var(--ap-danger);
  background: color-mix(in srgb, var(--ap-surface) 70%, var(--ap-danger) 30%);
}

.jet-form-builder .jet-form-builder__message,
.jet-form-builder .error,
.jet-form-builder .jet-form-builder__error{
  margin-top: 6px;
  color: var(--ap-danger);
  font-weight: 600;
}

/* sucesso pós-envio */
.jet-form-builder .jet-form-builder__success,
.jet-form-builder .message-success{
  border: 1.5px solid color-mix(in srgb, var(--ap-success) 70%, var(--ap-text) 30%);
  background: color-mix(in srgb, var(--ap-success) 10%, var(--ap-surface) 90%);
  color: var(--ap-text);
  padding: 14px 16px;
  border-radius: var(--ap-radius);
}

/* ---------- Barra de progresso / etapas ---------- */
/* JetFormBuilder tem um bloco “Form Progress”. Estes seletores cobrem
   .jet-form-builder-progress e também variações comuns de tema. */

.jet-form-builder .jet-form-builder-progress,
.jet-form-builder .jfb-progress,
.jet-form-builder [class*="progress"]{
  position: sticky; top: 0; z-index: 2; /* fixa no topo quando rolar */
  background: var(--ap-bg);
  padding: 14px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ap-border);
}

/* “steps” horizontais */
.jet-form-builder .jet-form-builder-progress__list,
.jet-form-builder .jfb-progress__list,
.jet-form-builder [class*="progress"] ul{
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-auto-flow: column; gap: 10px;
  counter-reset: step;
}

.jet-form-builder .jet-form-builder-progress__item,
.jet-form-builder .jfb-progress__item,
.jet-form-builder [class*="progress"] li{
  position: relative;
  display: grid; place-items: center;
  text-align: center;
  font-weight: 600;
  color: var(--ap-text-soft);
}

/* bolinha + linha */
.jet-form-builder .jet-form-builder-progress__item::before,
.jet-form-builder .jfb-progress__item::before,
.jet-form-builder [class*="progress"] li::before{
  counter-increment: step;
  content: counter(step);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 2px solid var(--ap-border);
  background: var(--ap-surface);
}

/* conector entre bolinhas */
.jet-form-builder .jet-form-builder-progress__item::after,
.jet-form-builder .jfb-progress__item::after,
.jet-form-builder [class*="progress"] li::after{
  content: "";
  position: absolute; top: 50%; inset-inline: calc(50% + 20px) -50%;
  height: 2px; background: var(--ap-border);
  transform: translateY(-50%);
}
.jet-form-builder .jet-form-builder-progress__item:last-child::after,
.jet-form-builder .jfb-progress__item:last-child::after,
.jet-form-builder [class*="progress"] li:last-child::after{ content: none; }

/* estado ativo / concluído (JetFormBuilder geralmente adiciona classes .is-active e .is-valid) */
.jet-form-builder .jet-form-builder-progress__item.is-active,
.jet-form-builder .jfb-progress__item.is-active,
.jet-form-builder [class*="progress"] li.is-active{
  color: var(--ap-text);
}
.jet-form-builder .jet-form-builder-progress__item.is-active::before,
.jet-form-builder .jfb-progress__item.is-active::before,
.jet-form-builder [class*="progress"] li.is-active::before{
  border-color: var(--ap-primary);
  background: color-mix(in srgb, var(--ap-primary) 20%, var(--ap-surface) 80%);
}
.jet-form-builder .jet-form-builder-progress__item.is-valid::before,
.jet-form-builder .jfb-progress__item.is-valid::before,
.jet-form-builder [class*="progress"] li.is-valid::before{
  border-color: var(--ap-success);
  background: color-mix(in srgb, var(--ap-success) 22%, var(--ap-surface) 78%);
}
.jet-form-builder .jet-form-builder-progress__bar,
.jet-form-builder .jfb-progress__bar{
  height: 8px; border-radius: 999px; background: var(--ap-border);
  overflow: hidden; margin-top: 10px;
}
.jet-form-builder .jet-form-builder-progress__bar > span,
.jet-form-builder .jfb-progress__bar > span{
  display: block; height: 100%;
  background: var(--ap-primary);
  transition: width var(--ap-trans);
}

/* ---------- Botões (próximo, anterior, enviar) ---------- */
.jet-form-builder .jet-form-builder__actions,
.jet-form-builder .jet-form-builder__submit-wrap{
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 6px;
}

.jet-form-builder .jet-form-builder__action-button,
.jet-form-builder .jet-form-builder__submit,
.jet-form-builder .jet-form-builder__prev-page,
.jet-form-builder .jet-form-builder__next-page,
.jet-form-builder button[type="submit"]{
  --btn-bg: var(--ap-primary);
  --btn-fg: var(--ap-primary-contrast);
  border: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  padding: 12px 18px;
  border-radius: calc(var(--ap-radius) - 2px);
  min-height: 44px; /* alvo acessível */
  cursor: pointer;
  box-shadow: var(--ap-shadow);
  transition: transform var(--ap-trans), background-color var(--ap-trans), opacity var(--ap-trans);
}
.jet-form-builder .jet-form-builder__action-button:hover,
.jet-form-builder .jet-form-builder__submit:hover,
.jet-form-builder .jet-form-builder__prev-page:hover,
.jet-form-builder .jet-form-builder__next-page:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.jet-form-builder .jet-form-builder__action-button:active,
.jet-form-builder .jet-form-builder__submit:active,
.jet-form-builder .jet-form-builder__prev-page:active,
.jet-form-builder .jet-form-builder__next-page:active{
  transform: translateY(0);
}

/* Botão secundário (Anterior) */
.jet-form-builder .jet-form-builder__prev-page{
  --btn-bg: transparent;
  --btn-fg: var(--ap-text);
  box-shadow: none;
  border: 1.5px solid var(--ap-border);
  background: var(--ap-surface);
}

/* Botão "Desabilitado" */
.jet-form-builder .jet-form-builder__action-button[disabled],
.jet-form-builder button[disabled]{
  opacity: .6; cursor: not-allowed;
}

/* ---------- Layout responsivo ---------- */
@container (min-width: 720px){
  /* Se usares container queries; se não, ignora. */
}
@media (min-width: 760px){
  .jet-form-builder .two-col,
  .jet-form-builder .jfb-two-col{
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--ap-gap);
  }
}

/* ---------- Imagens decorativas nas laterais (como nas tuas telas) ---------- */
/* Garante que não invadam o fluxo em telas pequenas */
.jet-form-builder .jfb-side-illustration{
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
}
@media (min-width: 980px){
  .jet-form-builder .jfb-with-side{
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: start;
    gap: clamp(20px, 3vw, 48px);
  }
}

/* ---------- Acessibilidade extra ---------- */
/* Estado de required visível para leitores de tela e visão */
.jet-form-builder .required,
.jet-form-builder [aria-required="true"] + label::after,
.jet-form-builder label .required{
  content: " *";
  color: var(--ap-danger);
  font-weight: 700;
}

/* Links dentro do formulário */
.jet-form-builder a{
  color: var(--ap-primary);
  text-underline-offset: 3px;
}
.jet-form-builder a:focus-visible{
  outline: 3px solid var(--ap-focus);
  outline-offset: 2px;
}

/* ---------- Tabelas/listas (caso existam) ---------- */
.jet-form-builder table{
  width: 100%; border-collapse: collapse; margin-block: 10px 16px;
}
.jet-form-builder th, .jet-form-builder td{
  padding: 10px 12px; border: 1px solid var(--ap-border);
}
.jet-form-builder th{ background: var(--ap-surface); text-align: left; }

/* ---------- ReCAPTCHA / blocos externos (ajuste leve) ---------- */
.jet-form-builder .grecaptcha-badge{ z-index: 1; }

/* FIM */
/* =========================================================
   FULL BLEED + 100vh no desktop (escapa do container do tema)
   Escopo: apenas onde eu usar a classe .apollo-fullscreen-form
   ========================================================= */

/* ocupa largura real da viewport, ignorando o max-width do tema */
.apollo-fullscreen-form{
  position: relative;
  width: 100vw;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background: #0b1220; /* teu fundo escuro da tela */
}

/* altura total da janela + centralização do conteúdo */
@media (min-width: 1025px){
  html, body{ height: 100%; }
  body.apollo-no-scroll{ overflow: hidden; } /* opcional: adicione “apollo-no-scroll” no body via Hook/Theme Options para sumir a barra */
  .apollo-fullscreen-form{
    min-height: 100dvh; /* viewport dinâmica (corrige barra do navegador) */
    display: grid;
    place-items: center;
    padding: 0; /* sem respiro extra */
  }
}

/* JetFormBuilder dentro da área full-bleed: duas colunas e 100dvh */
.apollo-fullscreen-form .jet-form-builder,
.apollo-fullscreen-form .jet-form-builder form,
.apollo-fullscreen-form .jet-form-builder .jet-form-builder__form{
  width: 100%;
  max-width: 1280px;               /* limita o conteúdo pra não ficar esticado demais */
  padding: clamp(24px, 4vw, 56px); /* respira sem gerar scroll */
  box-sizing: border-box;
}
@media (min-width: 1025px){
  .apollo-fullscreen-form .jet-form-builder .jet-form-builder__form{
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* texto | imagem */
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
  }
  /* se a quantidade de campos for grande, rola só a coluna de campos */
  .apollo-fullscreen-form .jet-form-builder .jet-form-builder__row{
    max-height: 78dvh;
    overflow: auto;
    padding-right: 8px;
  }
}

/* imagem lateral (não deixa passar do viewport) */
.apollo-fullscreen-form .jfb-side-illustration{
  max-height: 88dvh;
  width: auto;
  object-fit: contain;
  justify-self: center;
}

/* progresso fixo no topo, mas dentro do full-bleed */
.apollo-fullscreen-form .jet-form-builder-progress{
  position: sticky;
  top: 0;
  z-index: 3;
  background: transparent; /* o fundo já é escuro */
  margin: 0 0 12px 0;
  padding: 12px 0;
}

/* MOBILE/TABLET — volta a rolagem normal e layout em 1 coluna */
@media (max-width: 1024px){
  .apollo-fullscreen-form{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    max-width: 100%;
    min-height: auto;
  }
  .apollo-fullscreen-form .jet-form-builder .jet-form-builder__form{
    display: block;
    min-height: auto;
    padding: 24px;
  }
  .apollo-fullscreen-form .jfb-side-illustration{
    max-width: 80%;
    margin: 0 auto 1.5rem;
    max-height: 40dvh;
  }
}

/* Correções comuns de tema (Gutenberg/Elementor/containers) */
.apollo-fullscreen-form .wp-block-group__inner-container,
.apollo-fullscreen-form .wp-block-columns,
.apollo-fullscreen-form .container,
.apollo-fullscreen-form .elementor-container{
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.apollo-fullscreen-form .elementor-section.elementor-section-boxed > .elementor-container{
  max-width: 100% !important;
}