/* ============================================================================
   Fastback · devolucao/portal.css — só o que o portal da cliente precisa a mais

   O sistema visual é o de /assets/css/fastback.css. Aqui entram os ajustes de
   celular (a cliente chega pelo WhatsApp ou pelo Instagram): coluna estreita,
   áreas de toque de 48 px, campos com 16 px de fonte (abaixo disso o iPhone
   dá zoom no campo), barra de ações presa embaixo, cartão de peça, trilha
   dos passos e o selo da tela de "pronto". A cor da loja chega pelo JS em
   --fb-acento (e derivados).
   ========================================================================= */

.portal {
  background: var(--fb-fundo);
}

.pt-pagina {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 16px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Com a faixa de demonstração no topo, faixa e página dividem a altura da tela
   (senão a página teria 100dvh mais a faixa, e o rodapé começaria fora dela). */
body.com-faixa {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body.com-faixa > .pt-pagina {
  min-height: 0;
  flex: 1 0 auto;
}

.pt-topo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: calc(16px + env(safe-area-inset-top)) 0 8px;
}
.pt-logo {
  max-height: 52px;
  max-width: 220px;
  object-fit: contain;
}
.pt-loja-nome {
  font-size: 16px;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.pt-conteudo {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
}

.pt-rodape {
  text-align: center;
  font-size: 12px;
  color: var(--fb-tinta-3);
  padding: 20px 0 calc(16px + env(safe-area-inset-bottom));
}
/* A assinatura "Devoluções por e-Fastback" leva o ícone da marca na frente. */
.pt-rodape > p:last-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pt-rodape > p:last-child::before {
  content: '';
  width: 16px;
  height: 16px;
  background: url('/assets/img/marca/favicon.svg') center / contain no-repeat;
}

/* ---------- contato da loja (avisos sem saída, rodapé) ---------- */
.pt-contato {
  margin-top: 8px;
  overflow-wrap: anywhere;
}
.pt-contato-texto {
  font-weight: 600;
}
.pt-contato-email,
.pt-contato-whatsapp {
  color: var(--fb-acento-escuro);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Dentro de um aviso: a frase em cima, o contato embaixo, na cor do aviso (contraste garantido). */
.portal .aviso {
  flex-direction: column;
  gap: 6px;
}
.aviso .pt-contato {
  margin-top: 0;
}
.aviso .pt-contato-email,
.aviso .pt-contato-whatsapp {
  color: inherit;
}
/* No rodapé o contato é o que importa: maior e mais escuro que a assinatura. */
.pt-rodape .pt-contato {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--fb-tinta-2);
}

/* ---------- foco e toque ---------- */
.portal :focus-visible {
  outline: 3px solid var(--fb-acento-escuro);
  outline-offset: 2px;
}
.portal input[type='text'],
.portal input[type='email'],
.portal input[type='tel'],
.portal select,
.portal textarea {
  min-height: 48px;
  font-size: 16px;
}
.portal .botao {
  min-height: 48px;
  font-size: 15px;
}
.portal .botao.grande {
  min-height: 52px;
  font-size: 16px;
}
.portal .botao.pequeno {
  min-height: 40px;
}
.portal .botao.primario:hover {
  background: var(--pt-acento-hover, var(--fb-acento-escuro));
  border-color: var(--pt-acento-hover, var(--fb-acento-escuro));
}
.portal .campo > label,
.portal .rotulo {
  font-size: 14px;
}

/* Botão com cara de link (trocar CPF por e-mail, "Alterar"). */
.pt-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 10px 0;
  min-height: 44px;
  color: var(--fb-acento-escuro);
  font: 600 15px/1.3 var(--fb-fonte);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
a.pt-link {
  display: inline-flex;
  align-items: center;
}

/* ---------- passos ---------- */
.pt-progresso {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pt-passo-texto {
  font-size: 13px;
  font-weight: 600;
  color: var(--fb-tinta-3);
}
.pt-trilha {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.pt-trilha li {
  height: 5px;
  border-radius: 999px;
  background: var(--fb-borda);
}
.pt-trilha li.feito {
  background: var(--fb-acento);
}

.pt-titulo h1 {
  font-size: 26px;
  line-height: 1.12;
}
.pt-titulo h1:focus {
  outline: none;
}
.pt-titulo p {
  margin-top: 6px;
  color: var(--fb-tinta-2);
}
.pt-subtitulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--fb-tinta);
}
.pt-vazio-titulo {
  font-size: 19px;
  color: var(--fb-tinta);
  margin-bottom: 6px;
}

.pt-alerta:empty {
  display: none;
}

/* ---------- barra de ações (presa embaixo no celular) ---------- */
.pt-acoes {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 10px;
  margin: 4px -16px 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, color-mix(in srgb, var(--fb-fundo) 0%, transparent), var(--fb-fundo) 26%);
}

/* ---------- cartão de peça ---------- */
.pt-item {
  background: var(--fb-superficie);
  border: 1px solid var(--fb-borda);
  border-radius: var(--fb-raio-g);
  overflow: hidden;
}
.pt-item.marcado {
  border-color: var(--fb-acento);
  box-shadow: 0 0 0 1px var(--fb-acento);
}
.pt-item-cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  min-height: 72px;
  cursor: pointer;
}
.pt-item-cabeca input[type='checkbox'] {
  width: 24px;
  height: 24px;
  flex: none;
  margin: 0;
  accent-color: var(--fb-acento);
}
.pt-item.indisponivel .pt-item-cabeca {
  cursor: not-allowed;
}
.pt-item.indisponivel .pt-item-cabeca > :not(.cresce),
.pt-item.indisponivel .pt-item-nome {
  opacity: 0.55;
}
.pt-item-foto {
  width: 56px;
  height: 56px;
  flex: none;
  object-fit: cover;
  border-radius: var(--fb-raio-p);
  background: var(--fb-fundo);
}
.pt-item-nome {
  font-weight: 600;
}
.pt-item-info {
  font-size: 13px;
  color: var(--fb-tinta-3);
}
.pt-item-aviso {
  font-size: 13px;
  font-weight: 600;
  color: var(--fb-alerta);
}
.pt-item-detalhes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 14px;
  border-top: 1px solid var(--fb-borda);
  background: var(--fb-superficie-2);
}
.pt-item-erro {
  margin: 0;
  padding: 0 14px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fb-erro);
  background: var(--fb-superficie-2);
}
.pt-item-erro:empty {
  display: none;
}
.pt-quantidade select {
  max-width: 120px;
}

/* ---------- motivos ---------- */
.pt-motivos,
.pt-grupo {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pt-grupo {
  gap: 14px;
}
.pt-motivos legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fb-tinta-2);
}
.pt-grupo legend {
  padding: 0;
  margin-bottom: 14px;
}
.portal .opcao {
  min-height: 52px;
  padding: 12px 14px;
  align-items: center;
}
.portal .opcao input {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 0;
}
.opcao.desabilitada {
  cursor: not-allowed;
  background: var(--fb-neutra-fundo);
}
.opcao.desabilitada .pt-opcao-nome {
  color: var(--fb-tinta-3);
}
.pt-opcao-nome {
  font-weight: 600;
}
.pt-opcao-info {
  font-size: 13px;
  color: var(--fb-tinta-3);
}

/* ---------- fotos ---------- */
.pt-miniaturas {
  gap: 12px;
  padding-top: 4px;
}
.pt-miniaturas:empty {
  display: none;
}
.pt-miniatura {
  position: relative;
}
.pt-miniatura-texto {
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--fb-tinta-3);
}
.pt-remover {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid var(--fb-superficie);
  border-radius: 50%;
  background: var(--fb-tinta);
  color: #fff;
  font: 700 18px/1 var(--fb-fonte);
  cursor: pointer;
}
.pt-miniatura.enviando::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.7);
  border-top-color: var(--fb-acento);
  animation: fb-gira 0.7s linear infinite;
}
.pt-miniatura.enviando img,
.pt-miniatura.enviando .miniatura {
  opacity: 0.55;
}
.pt-fotos-botoes .botao {
  flex: 1 1 160px;
}
.pt-recado {
  font-size: 13px;
  font-weight: 600;
  color: var(--fb-erro);
}
.pt-recado:empty {
  display: none;
}
.pt-miniaturas-resumo img,
.pt-miniaturas-resumo .miniatura {
  width: 56px;
  height: 56px;
}

/* ---------- endereço ---------- */
.pt-linha {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
}
.pt-linha-uf {
  grid-template-columns: 1fr 96px;
}
.pt-sugestao {
  font-size: 14px;
  color: var(--fb-tinta-2);
}
.pt-sugestao:empty {
  display: none;
}
.pt-sugestao .pt-link {
  padding: 0;
  min-height: 0;
}

/* ---------- listas (resumo, acompanhamento) ---------- */
.pt-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.pt-lista > li {
  padding: 12px 0;
  border-top: 1px solid var(--fb-borda);
}
.pt-lista > li:first-child {
  border-top: 0;
  padding-top: 0;
}
.pt-lista > li:last-child {
  padding-bottom: 0;
}
.pt-comentario {
  font-style: italic;
}
.pt-instrucoes {
  color: var(--fb-tinta-2);
}

/* ---------- pronto ---------- */
.pt-resultado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding-top: 8px;
}
.pt-selo {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--fb-ok-fundo);
}
/* Um "visto" desenhado com bordas (sem imagem nem emoji). */
.pt-selo::after {
  content: '';
  position: absolute;
  left: 23px;
  top: 15px;
  width: 15px;
  height: 27px;
  border: solid var(--fb-ok);
  border-width: 0 5px 5px 0;
  transform: rotate(45deg);
}
/* Em análise: um relógio simples. */
.pt-selo.espera {
  background: var(--fb-alerta-fundo);
}
.pt-selo.espera::after {
  left: 29px;
  top: 16px;
  width: 14px;
  height: 18px;
  border-color: var(--fb-alerta);
  border-width: 0 0 5px 5px;
  transform: none;
}
.codigo-destaque .valor {
  font-size: 26px;
}
.codigo-destaque .botao {
  margin-top: 8px;
  min-width: 200px;
}
/* Dentro do cartão do código (na cor da loja), o botão é branco também no hover. */
.portal .codigo-destaque .botao:hover {
  background: #f3f5fb;
  border-color: #f3f5fb;
}

/* ---------- home: onde a compra foi feita ---------- */
.pt-escolhas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pt-escolha {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 84px;
  padding: 18px 20px;
  border: 1px solid var(--fb-borda);
  border-radius: var(--fb-raio-g);
  background: var(--fb-superficie);
  color: var(--fb-tinta);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--fb-sombra);
}
.pt-escolha:hover {
  border-color: var(--fb-acento);
}
.pt-escolha-titulo {
  font-size: 17px;
  font-weight: 700;
}
.pt-escolha-texto {
  font-size: 14px;
  color: var(--fb-tinta-2);
}
/* A seta no fim do título: dá para tocar no cartão inteiro. */
.pt-escolha-titulo::after {
  content: ' →';
  color: var(--fb-acento-escuro);
}

/* ---------- regras para a peça voltar (junto com o código) ---------- */
.pt-regras {
  border: 1px solid var(--fb-borda);
  border-radius: var(--fb-raio);
  padding: 14px 16px;
  background: var(--fb-superficie);
  text-align: left;
}
.pt-regras ul {
  margin: 8px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--fb-tinta-2);
}

/* ---------- comprovante (PDF) na lista de anexos ---------- */
.pt-miniatura-pdf {
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--fb-tinta-2);
}

@media (max-width: 380px) {
  .pt-linha {
    grid-template-columns: 1fr;
  }
  .pt-linha-uf {
    grid-template-columns: 1fr 88px;
  }
  .codigo-destaque .valor {
    font-size: 22px;
  }
}

@media (min-width: 720px) {
  .pt-pagina {
    padding: 0 24px;
  }
  .pt-acoes {
    position: static;
    margin: 8px 0 0;
    padding: 0;
    background: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-miniatura.enviando::after {
    animation: none;
  }
}