/* ===========================================
   ONBOARDING — FORMULÁRIO DE PERFIL
   Componentes reutilizáveis: o mesmo formulário
   servirá de base para a futura edição de perfil.
   ======================================== */

/* ===========================================
   FUNDO VERDE DA TELA DE CADASTRO
   O #view-onboarding tem fundo --p-green. Os campos e cards (foto, inputs,
   localização, colapsável + painel, IC card, check de perfil público) mantêm fundo
   claro/branco e por isso se DESTACAM sobre o verde — todo o conteúdo dentro
   deles segue com as cores escuras normais. Só os elementos que ficam
   DIRETAMENTE sobre o verde mudam: o cabeçalho (título/subtítulo/cancelar,
   agora claros) e o botão final (agora amarelo, via btn--accent no HTML, pois
   verde sobre verde sumiria). Escopo estrito ao #view-onboarding para não
   afetar telefone/OTP/feed. */
#view-onboarding.screen {
  background: var(--bg-canvas);   /* verde escuro (igual ao fundo do feed) */
}

#view-onboarding .screen__title {
  color: var(--t-light);
}

/* "Cancelar" — a COR vem da receita única .btn--close-on-green (buttons.css,
   composta no HTML); aqui só o formato de botão do topo (altura de controle,
   retângulo padrão) e o fade no toque. */
#view-onboarding #btn-onboarding-cancel {
  height: var(--control-h);
  padding: 0 var(--space-md);
  border-radius: var(--radius-md);   /* retângulo padrão do app (como os demais botões do topo) */
  font-size: var(--fs-6);
}
#view-onboarding #btn-onboarding-cancel:active { transform: none; opacity: 0.6; }

/* ── Transição da EDIÇÃO de perfil (abre/fecha como um modal: sobe/desce + fade)
   Só no fluxo de edição — as classes são aplicadas em JS (enterProfileEdit/
   exitOnboardingEdit). O cadastro normal segue sem animação (fade do loader). */
@keyframes editProfileIn {
  from { opacity: 0; transform: translateY(5%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes editProfileOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(5%); }
}
#view-onboarding.view-edit-in  { animation: editProfileIn  0.4s var(--ease) both; }
#view-onboarding.view-edit-out { animation: editProfileOut 0.32s var(--ease) both; }

.onboarding-form {
  display: flex;
  flex-direction: column;
  /* Cresce para ocupar a viewport de scroll quando o conteúdo é curto (o vão
     é absorvido pelo card do IC via .form-group--ic-fill); nunca encolhe
     abaixo do conteúdo — em telas curtas, a página simplesmente rola. */
  flex: 1 0 auto;
  /* Respiro vertical ROLÁVEL (no conteúdo, não no container de scroll —
     padding vertical no .onboarding-scroll deslocava as shades sticky) */
  padding: var(--space-md) 0 var(--space-md);
}

/* ── Scroll interno + rodapé fixo ──────────────────────────────────────
   O .screen do cadastro NÃO rola mais: o scroll vive no wrapper
   .onboarding-scroll (header + formulário), e "Concluir Cadastro" fica num
   rodapé FIXO sempre visível na base (.onboarding-footer; o botão usa
   form="form-onboarding" para manter o submit). Isso também corrige as
   shades do .js-scroll-shadows: com o scroll no próprio .screen, o
   padding-top da tela deslocava a shade do topo (sticky não sobe acima da
   caixa de conteúdo do pai) e a de baixo ficava presa na base do aparelho —
   agora as duas colam nas linhas reais de recorte do scroll. O antigo
   espaçador de fim de rolagem morreu junto com o `margin-top:auto` do botão. */
#view-onboarding.screen {
  overflow: hidden;
  padding: 0;
}

/* Barra do TOPO fixa: verde --p-green (mesmo tom da barra de status/action
   bar), fora do scroll; carrega a safe-area superior. */
.onboarding-topbar {
  flex-shrink: 0;
  margin: 0;
  padding: calc(var(--space-md) + env(safe-area-inset-top, 0px)) var(--space-lg) var(--space-sm);
  background: var(--p-green);
}

.onboarding-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Flex column: permite ao form crescer (flex:1) e preencher a viewport de
     scroll quando o conteúdo é curto — é o que alimenta o sistema de altura
     do card do IC (.form-group--ic-fill absorve a sobra e o card distribui
     nos espaços internos, via space-between). Com conteúdo alto, o form fica
     na altura natural e o container rola. */
  display: flex;
  flex-direction: column;
  /* SÓ padding lateral no container: respiro vertical vive no CONTEÚDO
     (.onboarding-form) — padding vertical aqui deslocava as shades sticky
     para dentro da tela (sticky não passa da caixa de conteúdo do pai). */
  padding: 0 var(--space-lg);
  --shade-bleed: var(--space-lg);   /* shades sangram o padding lateral */
}

/* Rodapé fixo: mesma barra verde do topo */
.onboarding-footer {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-lg) max(var(--space-sm), env(safe-area-inset-bottom, 0px));
  background: var(--p-green);
}

.onboarding-footer .btn {
  width: 100%;
}

/* Linha foto + campos de nome lado a lado */
.profile-header-row {
  display: flex;
  gap: var(--space-md);
  align-items: stretch;   /* a foto acompanha a altura dos dois campos (nome+sobrenome) */
  margin-bottom: var(--space-md);
}

.profile-header-row__photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.profile-header-row__fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Captura de mídia — a altura acompanha os dois campos (nome+sobrenome) para o
   topo/base ficarem alinhados; largura fixa 90px. */
.media-capture__display {
  width: 90px;
  height: 100%;
  border-radius: var(--radius-md);
  background: var(--bg-input);
  border: none;   /* sem tracejado: o fundo claro contrasta sozinho no verde */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

/* Foto capturada: SEM moldura verde — a própria foto preenche o slot claro.
   A imagem em si chega por JS (background-image); o enquadramento vive aqui. */
.media-capture__display--captured {
  background-size: cover;
  background-position: center;
}

.media-capture__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--t-sub);
  text-align: center;
  padding: 0 6px;
}

.media-capture__placeholder-text {
  font-size: var(--fs-1);
  font-weight: var(--fw-medium);
  line-height: 1.15;
}

.media-capture__placeholder .icon {
  display: block;
  margin-bottom: 4px;
  font-size: 2rem;
  color: var(--t-disabled);
}

/* Tag Selector — pílulas selecionadas */
.tag-selector__selected {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

/* Pílula de profissão selecionada — usa o casco .chip .chip--md (métrica única
   do cadastro) e aplica o "tint preenchido" azul, sempre ativo (a tag já está
   selecionada). Seletor de 2 classes (.chip.tag-pill) para vencer o .chip base
   de feed.css por especificidade, independentemente da ordem de carga. */
.chip.tag-pill {
  gap: 6px;
  background: var(--info-blue-light);
  color: var(--info-blue);
  cursor: default;
  box-shadow: var(--shadow-sm);
}

.tag-pill__remove {
  font-size: var(--fs-8);
  cursor: pointer;
  color: var(--info-blue);
  line-height: 1;
  background: none;
  border: none;
  padding: 0;
}

/* Métodos de pagamento aceitos — pílulas de seleção (mesmo .chip usado nos
   filtros do feed; aqui só define o wrap do grupo e o espaçamento entre o
   check circular e o texto). */
.payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.payment-methods .chip {
  gap: 6px;
}

/* Rótulo do subgrupo "Cartão" — mais discreto que .form-group__label,
   já que o contexto "Métodos de pagamento aceitos" já foi dado acima. */
.payment-methods__subgroup-label {
  margin: 0;
  font-size: var(--fs-3);
  font-weight: var(--fw-bold);
  color: var(--t-sub);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Check circular de seleção à direita do texto: substitui o ícone de tipo —
   a cor de fundo do chip já indica o estado, o ícone reforça visualmente sem
   depender só de cor. */
.chip--payment .chip__check {
  font-size: 1.05rem;
}

/* A métrica das pílulas de pagamento (fonte --fs-5, padding 8px 14px) vem do
   modificador .chip--md no HTML — mesma linguagem das .tag-pill. Sem borda
   (design sem contorno): o estado muda só o FILL/texto, sem deslocar vizinhas. */

/* Em repouso, a pílula é BRANCA para se destacar como card no corpo cinza da
   seção de detalhes; a selecionada mantém o tint azul (regra abaixo). Sombra
   nos dois estados, como os demais cards da seção. */
.chip--payment {
  box-shadow: var(--shadow-sm);
}

.chip--payment:not(.chip--active) {
  background: var(--bg-white);
}

/* Selecionada: mesmo padrão "tint preenchido" das .tag-pill (fundo tint +
   texto no mesmo matiz), porém no azul do pagamento (--info-blue) em vez do
   verde — preservando a identidade herdada do rodapé do card de profissional
   e, ao mesmo tempo, mantendo os dois grupos distinguíveis. */
.chip--payment.chip--active {
  background: var(--info-blue-light);
  color: var(--info-blue);
}

/* Busca de áreas */
.area-search {
  position: relative;
}

.area-search__results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-white);
  border-radius: var(--radius-md);
  list-style: none;
  max-height: 180px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-lg);
  /* Barra fina sempre visível (painel claro → thumb escuro): regra 9 do DS,
     como todo scroller fora dos 3 feeds. */
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb-dark) transparent;
}
.area-search__results::-webkit-scrollbar { width: var(--scrollbar-w); }
.area-search__results::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb-dark);
  border-radius: var(--scrollbar-thumb-r);
}

.area-search__results li {
  padding: var(--space-sm) 14px;
  font-size: var(--fs-6);
  color: var(--t-main);
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--border-light);
}

.area-search__results li:last-child {
  border-bottom: none;
}

.area-search__results li:hover,
.area-search__results li:active,
.area-search__results li.is-selecting {
  background: var(--info-blue-light);
  color: var(--info-blue);
}

.area-search__results li.is-selecting {
  font-weight: var(--fw-medium);
}

.area-search__clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--t-sub);
  padding: 2px;
  line-height: 1;
  display: flex;
  align-items: center;
}

.area-search__clear .icon {
  font-size: 1.1rem;
}

/* Botão de localização */
.location-check {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 16px;
  /* fundo branco (sem borda) e raio --radius-md vêm de .card no HTML —
     contrasta sozinho no fundo verde */
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}

.location-check__icon {
  font-size: 1.5rem;
  color: var(--t-sub);
  flex-shrink: 0;
  transition: color 0.3s var(--ease);
}

/* Carregamento: gira o ícone de STATUS (direita, que recebe o progress_activity
   via JS) — o pino de localização à esquerda fica parado. */
.location-check--loading .location-check__status {
  display: inline-block;     /* necessário para a rotação ter efeito */
  color: var(--p-green);
  animation: spin 0.8s linear infinite;
}

.location-check__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.location-check__content strong {
  color: var(--p-green-dark);
  font-size: var(--fs-8);
  font-weight: var(--fw-bold);
}

.location-check__status {
  font-size: 1.4rem;
  color: var(--t-disabled);
  flex-shrink: 0;
  transition: color 0.3s var(--ease);
}

/* Localização confirmada: sem realce de fundo/borda no card inteiro — o check verde
   (ícone de status) já sinaliza a seleção. */
.location-check--confirmed .location-check__icon,
.location-check--confirmed .location-check__status {
  color: var(--p-green);
}

/* Erro de GPS: MESMO mecanismo canônico dos campos obrigatórios (linha vermelha
   de borda + fundo de alerta) — a receita vive em components.css, agrupada com
   .location-check--error-validation. Aqui só as cores dos ícones. */
.location-check--error .location-check__icon,
.location-check--error .location-check__status {
  color: var(--danger);
}

/* Cabeçalho de seção com botão de ajuda ao lado do label (ex.: Padrão de
   Serviços) — mesma linha do label, sem card/fundo próprio. */
.form-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}

.form-group__header .form-group__label {
  margin-bottom: 0;
}

/* Botão de interrogação genérico */
.section-help-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.section-help-btn .icon {
  font-size: 1.2rem;
  color: var(--t-sub);
}

/* Seções colapsáveis */
.collapsible {
  margin-bottom: var(--space-md);
}

.collapsible__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-white);   /* TOPO branco da seção de detalhes profissionais */
  border: none;   /* sem borda: o card claro contrasta sozinho no fundo verde */
  border-radius: var(--radius-md);
  color: var(--p-green-dark);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-7);
  cursor: pointer;
  /* SEM transição no raio/borda: os cantos inferiores precisam virar retos (e a
     borda inferior sumir) INSTANTANEAMENTE quando o painel aparece — se
     animassem, durante a abertura o canto ficaria arredondado sobre o topo reto
     do painel e o fundo verde vazava nos cantos (um "rasgo"). Só o fundo tem
     transição (para eventuais estados de toque). */
  transition: background 0.2s ease;
  text-align: left;
}

.collapsible__trigger .icon:first-child {
  color: var(--p-green);
}


.collapsible__chevron {
  margin-left: auto;
  transition: transform 0.3s ease;
  color: var(--t-sub);
}

.collapsible--open .collapsible__chevron {
  transform: rotate(180deg);
}

/* Cantos inferiores retos + borda inferior transparente enquanto o painel está
   PRESENTE (aberto ou animando). Ligado a `collapsible--connected` (JS), que vive
   de open-start até close-END — ao contrário de `collapsible--open`, que é
   removida no INÍCIO do fechamento (para o chevron girar de volta na hora). Assim
   o "cap" reto do gatilho acompanha o painel por toda a animação, sem rasgo. */
.collapsible--connected .collapsible__trigger {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.collapsible__panel {
  padding: var(--space-md);
  border: none;   /* sem borda, como o gatilho acima */
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  background: var(--bg-soft);   /* CORPO cinza claro: os cards internos brancos contrastam */
}

/* ── Padrão de Serviços — SELEÇÃO por card + display único de barras ─────────
   Grade 2×2 de cards COMPACTOS (ícone + título + subtítulo, sem barras). Abaixo,
   um único `.service-choice-display` com as 3 barras Qualidade/Agilidade/Valor no
   MESMO componente `.qav` dos cards de profissional do feed (estilos em feed.css),
   que ANIMAM (transição de width) conforme o card selecionado. Seleção única
   estilo rádio: `.service-choice__card--active` (JS). */
.service-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.service-choice__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 10px 12px;
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: background 0.2s ease;
}

.service-choice__card:active {
  transform: scale(var(--press-scale-subtle));
}

.service-choice__card--active {
  background: var(--info-blue-light);
}

.service-choice__icon {
  font-size: 1.6rem;
  color: var(--p-green);
  margin-bottom: 2px;
}

.service-choice__title {
  font-size: var(--fs-5);
  font-weight: var(--fw-heavy);
  color: var(--p-green-dark);
  line-height: 1.15;
}

.service-choice__sub {
  font-size: var(--fs-1);
  font-weight: var(--fw-medium);
  color: var(--t-sub);
  line-height: 1.1;
}

/* Check de seleção no canto superior direito do card */
.service-choice__check {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 1.1rem;
  color: var(--t-disabled);
}

.service-choice__card--active .service-choice__check {
  color: var(--info-blue);
}

/* Display único das barras — animado conforme a seleção */
.service-choice-display {
  margin-top: var(--space-sm);
  padding: var(--space-sm) 14px;
  background: var(--bg-white);   /* card branco no corpo cinza */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.service-choice-display .qav { gap: 6px; }
.service-choice-display .qav__label { font-size: var(--fs-2); }
.service-choice-display .qav__bar { height: 9px; }

/* A ANIMAÇÃO: a largura da barra desliza suave ao trocar de card. Escopo só ao
   display do cadastro — as barras dos cards do feed continuam sem transição. */
.service-choice-display .qav__fill {
  transition: width 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

/* ── Perfil público (fecha os Detalhes profissionais) ──
   Check simples no lugar do antigo convite do Plano Pro: decide se os dados
   da seção ficam visíveis na busca/indicações da região. Card branco no corpo
   cinza; a caixa do check é borda FUNCIONAL (como a do check de currículo) e
   marca em AZUL (seleção sobre superfície clara). */
.profile-public-check {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) 14px;
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
}

.profile-public-check:active {
  transform: scale(var(--press-scale-subtle));
}

/* A caixa (.profile-public-check__box) usa o primitivo .check-box
   (components.css); o estado marcado vem do aria-pressed do botão-pai. */

.profile-public-check__text {
  font-size: var(--fs-5);
  font-weight: var(--fw-medium);
  color: var(--t-main);
  line-height: 1.4;
}