/* ==========================================================================
   BBR · Componentes de formulário (compartilhados por popup e pesquisa)
   Espelha os widgets Form do Elementor:
     · popup [APL HT - ATIVO] Aplicação de diagnostico 01 [q]
     · [APL HT] [NOVO] Obrigado + Pesquisa | bbrv4
   Valores (cores, px, pesos) vêm direto dos settings + custom CSS de cada um.
   ========================================================================== */

/* --- Indicador de etapas -------------------------------------------------
   step_type: "number" — círculos numerados ligados por divisor.
   Ativo: fundo #B0A473 com número branco (step_active_primary/secondary).
   Concluído: #B0A473 com check (step_completed_primary).
   ------------------------------------------------------------------------- */
.steps{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:22px}
.steps__num{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--f-head);font-size:14px;font-weight:500;line-height:1;
  background:transparent;border:1px solid rgba(255,255,255,.22);color:#8A8A8A;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.steps__num.is-active{background:var(--gold);border-color:var(--gold);color:#FFFFFF}
.steps__num.is-done{background:var(--gold);border-color:var(--gold);color:#141414;font-size:0}
.steps__num.is-done::after{content:'✓';font-size:15px;line-height:1}
.steps__line{
  flex:1 1 auto;max-width:60px;height:1px;
  background:rgba(255,255,255,.18);transition:background .25s ease;
}
.steps__num.is-done+.steps__line{background:var(--gold)}
@media (max-width:767px){ .steps{gap:12px} .steps__line{max-width:none} }

/* --- Campos --------------------------------------------------------------
   label: Sora 1rem/400, label_spacing 3px · campo: DM Sans 1rem/300
   ------------------------------------------------------------------------- */
.field{margin-bottom:16px}                       /* row_gap: 16px */
.field__label{
  display:block;font-family:var(--f-head);font-size:16px;font-weight:400;
  line-height:1.2;color:#FFFFFF;margin-bottom:3px;
}
.field__label b,.field__label strong{font-weight:600}
.field__input{
  width:100%;
  font-family:var(--f-body);font-size:16px;font-weight:300;line-height:1.2;
  color:var(--text-2);
  background:#14141499;
  border:0;border-bottom:1px solid var(--gold);
  border-radius:var(--radius);
  padding:15px 15px 15px 40px;                   /* padding-left reserva o ícone */
  transition:all .5s ease;
}
.field__input::placeholder{color:var(--text-2);opacity:1}
.field__input:hover{background:#141414cc;border-bottom-color:var(--text-2)}
/* O foco troca a borda por um gradiente (border-image), como no original. */
.field__input:focus{
  outline:0;font-weight:600;
  border-bottom:1px solid;
  border-image:linear-gradient(to right,var(--gold),var(--text-2)) 1;
}
textarea.field__input{padding:15px;min-height:120px;resize:vertical;line-height:1.5}

/* --- Radio em cartão ----------------------------------------------------- */
.options{display:flex;flex-direction:column;gap:4px}
.option{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;border-radius:6px;
  border:1px solid transparent;cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.option:hover{background:rgba(176,164,115,.08);border-color:rgba(176,164,115,.35)}
.option:has(input:checked){background:rgba(176,164,115,.15);border-color:var(--gold)}
.option input{accent-color:var(--gold);width:18px;height:18px;flex-shrink:0;margin:0;cursor:pointer}
.option span{font-family:var(--f-body);font-size:15px;line-height:1.4;color:var(--text-2)}

/* --- Telefone com seletor de país ----------------------------------------
   Reproduz o intl-tel-input (separateDialCode) que o popup carrega por CDN:
   caixa da bandeira #424242 arredondada só à esquerda, lista escura.
   ------------------------------------------------------------------------- */
.tel{position:relative;display:flex;align-items:stretch}
.tel__country{
  display:flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:0 10px;border:0;border-radius:var(--radius) 0 0 var(--radius);
  background:#424242;color:var(--text-2);
  font-family:var(--f-body);font-size:16px;line-height:1;
}
.tel__flag{font-size:18px;line-height:1}
.tel__arrow{
  width:0;height:0;margin-left:2px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid var(--text-2);
  transition:transform .2s ease;
}
.tel__country[aria-expanded="true"] .tel__arrow{transform:rotate(180deg)}
.tel .field__input{padding-left:15px;border-radius:0 var(--radius) var(--radius) 0}
.tel__list{
  position:absolute;top:calc(100% + 4px);left:0;z-index:9999;
  min-width:220px;margin:0;padding:4px;list-style:none;
  background:#141414;border:1px solid var(--gold);border-radius:var(--radius);
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.tel__list--up{top:auto;bottom:calc(100% + 4px)}
.tel__list button{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:8px 10px;border:0;border-radius:3px;background:transparent;
  color:var(--text-2);font-family:var(--f-body);font-size:16px;text-align:left;
}
.tel__list button:hover,.tel__list button[aria-selected="true"]{background:rgba(176,164,115,.18)}
.tel__list button span{margin-left:auto;color:var(--gold)}

/* --- Ações ---------------------------------------------------------------
   Botão chapado #B0A473 sobre #141414, com seta que gira 45° no hover.
   ------------------------------------------------------------------------- */
.form__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.form__actions .btn{
  gap:15px;                                       /* button_icon_indent: 15px */
  font-family:var(--f-body);font-size:16px;font-weight:700;line-height:1.2;
  letter-spacing:0;
  padding:1.5rem 2rem;
  border-radius:var(--radius);
  background:var(--gold);color:#141414;
  box-shadow:none;
  transition:all .5s ease;
}
.form__actions .btn:hover{
  transform:translateY(-5px);
  background:var(--text-2);color:#141414;
  filter:none;box-shadow:none;
}
.form__actions .btn:focus{
  transform:scale(.99);transition:all .1s ease;
  box-shadow:0 4px 54px 0 rgba(176,164,115,.35),0 0 14px 0 var(--gold) inset;
}
.form__actions .btn[data-next],.form__actions .btn[type=submit]{flex:1 1 auto}
.form__actions .btn[data-prev]{flex:0 0 auto}

.btn__icon{
  display:inline-flex;flex:0 0 auto;
  transform-origin:center;transition:transform .5s ease;
}
.btn__icon svg{width:9.56px;height:9px;display:block;transform-origin:center}
.btn:hover .btn__icon{transform:rotate(45deg)}
.btn:hover .btn__icon svg{animation:seta 1s infinite}
@keyframes seta{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(5px,-5px)}
}

.form__error{
  margin-top:14px;font-family:var(--f-body);font-size:14px;color:#ff9d9d;
  background:rgba(255,80,80,.1);border:1px solid rgba(255,80,80,.28);
  border-radius:6px;padding:10px 12px;
}
.form__error:empty{display:none}