/* ===========================
   VARIÁVEIS DE
   ESTILO GERAIS
   =========================== */

:root {
  --bg-page: #f5f5f5;         /* Fundo da página */
  --bg-card: #ffffff;         /* Fundo do "cartão" central */
  --text-main: #111111;       /* Texto principal (preto suave) */
  --text-muted: #a3a3a3;      /* Placeholders e textos cinza */
  --text-link: #5555ff;       /* Links (Termos, Política) */
  --border-light: #e5e5e5;    /* Linhas sob os campos */
  --btn-disabled-bg: #e5e5e5; /* Botão cinza */
  --btn-disabled-text: #b3b3b3;
  --btn-active-bg: #0070ff;   /* Botão azul quando "ativo" */
  --btn-active-text: #ffffff;
  --radio-border: #c4c4c4;
}

body {
  margin: 0;
}

/* ===========================
   RESET SIMPLES
   =========================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background-color: var(--bg-page);
  min-height: 100vh;

  /* Mantém centralizado na horizontal, mas "grudado" no topo */
  display: flex;
  justify-content: center;   /* centro na horizontal */
  align-items: flex-start;   /* encosta no topo */
  padding-top: 0px;         /* espaço do topo até o card */
}


/* ===========================
   CONTAINER PRINCIPAL
   =========================== */


.app-card {
  max-width: 400px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 16px 16px;  /* topo = 0, laterais = 16, baixo = 16 */     
  box-sizing: border-box;
}

/* MODO INICIAL: sem padding pra imagem colar nas bordas internas */
.app-card.modo-inicial {
  padding: 0;
}



.app-hero {
  flex-shrink: 0;
  margin: 0 -16px 16px;  /* invade as laterais pra colar na borda e dá espaço embaixo */
}

.app-hero-img {
  display: block;
  width: 100%;
  height: auto;
}

#page-1,
#page-2,
#page-3,
#page-4 {
  flex: 1;
  display: flex;
  flex-direction: column;
   padding: 0 12px; 
}

/* Ajustes específicos da página 3 (rosto) */
#page-3 .app-title {
  margin-top: 8px;      /* sobe o título em relação ao topo do card */
  margin-bottom: 4px;   /* gruda mais no subtítulo */
}

#page-3 .app-subtitle {
  margin-top: 0;
  margin-bottom: 4px;   /* diminui o espaço entre texto e o oval */
}



/* Título e subtítulo */
.app-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}

.app-subtitle {
  font-size: 18px;
  color: #666666;
  margin-bottom: 24px;
}

/* ===========================
   FORMULÁRIO
   =========================== */

.form-group {
  margin-bottom: 18px;   /* Espaço entre os campos */
}

/* Label estilo "placeholder" acima da linha */
.form-label {
  font-size: 18px;
  color: var(--text-muted);
}

/* Campo "estilo linha": só um traço embaixo */
.form-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border-light);
  padding: 8px 0;
  font-size: 18px;
  color: var(--text-main);   /* Texto digitado = preto */
  background-color: transparent;
}


/* Campo com erro: borda vermelha e leve fundo rosado */
.form-input--error {
  border-color: #d93025;      /* vermelho */
  background-color: #ffecec;  /* rosa bem claro */
}

/* Mensagem de erro do campo */
.field-error {
  font-size: 12px;
  color: #d93025;
  margin-top: 4px;
}




.form-input::placeholder {
  color: var(--text-muted);  /* Placeholder cinza */
}

/* Efeito ao focar (entrar no campo) */
.form-input:focus {
  outline: none;
   border-bottom-color: #0070ff;
}

/* ===========================
   RADIO BUTTONS
   =========================== */

.radio-group {
  margin: 10px 0 22px;
}

/* Cada opção vira um "card" */
.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 16px 14px; 
  margin-bottom: 10px;

  border-radius: 5px;
  border: 1px solid var(--border-light);
  background-color: #fafafa;

  font-size: 14px;
  color: var(--text-main);
  cursor: pointer;             /* cursor de clique */
}

/* Faz o texto ocupar a largura inteira */
.radio-option label {
  flex: 1;
  cursor: pointer;
}

/* Radio um pouco maior */
.radio-option input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #000000;
}

/* Estado visual quando a opção estiver “selecionada” (opcional) */
.radio-option--active {
  border-color: #0070ff;
  background-color: #e7f1ff;
}


/* ===========================
   TEXTO DE TERMOS
   =========================== */

.terms-text {
  font-size: 12px;
  color: #777777;
  line-height: 1.5;
  margin-bottom: 24px;
}

.terms-text a {
  color: var(--text-link);
  text-decoration: underline;
}

/* ===========================
   BOTÃO CONTINUAR
   =========================== */

.btn-primary {
  display: block;          /* garante que o botão se comporte como bloco */
  width: 85%;              /* ou 200px, 250px, etc */
  margin: 0 auto;          /* centraliza horizontalmente */
  border: none;
  border-radius: 5px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.05s;
}




/* Estado inicial: "desativado" (cinza) */
.btn-primary--disabled {
  background-color: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
}

/* Estado ativo: azul */
.btn-primary--active {
  background-color: var(--btn-active-bg);
  color: var(--btn-active-text);
}

/* Pequeno efeito ao clicar */
.btn-primary:active {
  transform: translateY(1px);
}


/* Botão da PRIMEIRA PÁGINA com cor diferente */
#page-inicial .btn-primary {
  background-color: #dfe1e6;  /* cor só da página 1 */
  color: #282a2e;
}



/* Linha com dois campos lado a lado (Cidade / Estado) */
.form-row-2col {
  display: flex;
  gap: 12px;
  margin-bottom: 18px; /* espaçamento geral da linha */
}

.form-row-2col .form-group {
  flex: 1;
  margin-bottom: 0; /* já controlamos pela linha inteira */
}

/* Mensagem de erro do CEP */
.cep-error {
  font-size: 12px;
  color: #b91c1c;
  margin-top: 4px;
}

.hidden {
  display: none !important;
}


/* Estados dos botões */
.btn-primary--active {
  background-color: #20427d;
  color: #ffffff;
}


.btn-primary--disabled {
  background-color: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}

/* Área da câmera recortada em oval */
.face-frame {
  position: relative;
  width: 180px;      /* ↓ diminui o tamanho aqui */
  height: 250px;     /* ↓ e aqui */
  margin: 16px auto 12px;
  margin-top: 0px;
  border-radius: 50%;          /* transforma em círculo/oval */
  border: 3px solid #0070ff;   /* borda azul */
  overflow: hidden;            /* corta tudo que está fora do oval */
  background-color: #000;      /* fundo preto enquanto a câmera não carrega */
}

/* Vídeo e foto ocupam toda a área do oval */
.face-video,
.face-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* preenche o oval */
}

/* Não precisamos mais da máscara extra, só deixo vazio */
.face-oval-mask {
  display: none;
  
}


/* Texto abaixo do oval */
.face-instruction {
  text-align: center;
  font-size: 18px;
  color: #4b5563;
  margin-bottom: 10px;
}

/* Mensagem de erro da câmera */
.camera-error {
  text-align: center;
  font-size: 14px;
  color: #b91c1c;
  min-height: 16px;
  margin-bottom: 10px;
}

/* Tirar foto – perto do oval */
.face-btn-shot {
  display: block;
  width: 60%;
  margin: 8px auto 0;
}

/* Continuar – grudando na base da área da página 2 */
.face-btn-continue {
  display: block;
  width: 80%;
  margin: 95px auto 95px;  /* respiro com as bordas */
/*  margin-top: auto;        /* empurra pra baixo */
}

/* ===== TELA INICIAL – imagem + botão por cima ===== */

/* A section ocupa o espaço disponível dentro do card */
#page-inicial {
  flex: 1;
}

/* Container da imagem e do botão */
.tela-inicial-bg {
  position: relative;   /* base pro botão absoluto */
  width: 100%;
  height: 100%;
  
  flex: 1;
  display: flex;
  flex-direction: column;
  
}

/* Imagem preenche toda a altura dessa área */
.tela-inicial-img {
  display: block;
  width: 100%;
  height: 100%;         /* <- importante */
  object-fit: cover;    /* cobre o espaço, cortando o excesso */
}

/* NOVO: container dos botões, colado embaixo e centralizado */
.tela-inicial-buttons {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: 70%;                  /* 👈 aqui você regula a largura dos botões */
  display: flex;
  flex-direction: column;
  gap: 60px;                     /* espaço entre "Iniciar" e "Acompanhar entrega" */
}


/* Botão base na tela inicial */
.tela-inicial-btn {
  width: 100%;                  /* ocupa toda a largura do container */
}

/* Botão "Acompanhar entrega" – cor regulável */
.tela-inicial-btn-entrega {
  /* por enquanto, mesma cor do btn-primary (azul padrão).
     Se quiser outra cor depois, é só mudar aqui: */
   background-color: #ffa500;
   border-color: #0056d8;  
   width: 70%;   
}


/* --- PAGE 4: texto + barra embaixo --- */

/* page-4 vira um container em coluna, empurrando o conteúdo pro rodapé */
#page-4 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.page4-bottom {
  /* em vez de colar no fundo, sobe um pouco */
  margin-top: 500px;        /* testa 40px, se quiser mais pra cima põe 24px ou 16px */
  margin-bottom: 24px;     /* deixa um respiro do rodapé */
  padding: 16px 20px 0;    /* menos padding embaixo, pra não “pular” tanto */
}


/* texto das mensagens */
#page4-message {
  font-size: 20px;
  font-weight: 600;
  color: #111;
  margin: 0 0 12px 0;
  line-height: 1.3;

  /* limita a 2 linhas e evita crescer pra baixo */
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* no máximo 2 linhas */
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* reserva altura pra 2 linhas, mesmo se o texto for curto */
  min-height: calc(1.3em * 2);
}


/* trilho (fundo) da barra de progresso */
.page4-progress-track {
  width: 100%;
  height: 16px;
  background-color: #f0f0f0;
  border-radius: 999px;
  overflow: hidden;
}

/* preenchimento da barra (parte preta que cresce) */
#page4-progress-fill {
  width: 0%;
  height: 100%;
  background-color: #000;
  border-radius: 999px;
  transition: width 0.3s linear;
}

/* --- PAGE 5: conteúdo básico --- */
#page-5 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.page5-content {
  padding: 24px 20px;
}

.page5-content h2 {
  font-size: 20px;
  margin-bottom: 8px;
}

.page5-content p {
  font-size: 14px;
  color: #444;
}
/* --- PAGE 5 --- */

#page-5 {
  flex: 1;
  display: flex;
  flex-direction: column;
  
}

.page5-content {
  padding: 24px 20px 24px;
}



/* Títulos da page5 */

.page5-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.page5-subtitle {
  font-size: 14px;
  color: #555;
  margin: 0 0 16px 0;
}

/* Imagem de sucesso */
.page5-image-wrapper {
  text-align: center;
  margin: 12px 0 12px;
}

.page5-image {
  max-height: 160px;    /* limite de altura */
  width: auto;          /* mantém proporção */
  max-width: 100%;      /* não estoura a largura */
  display: inline-block;
}

/* Texto logo abaixo da imagem */
.page5-highlight {
  font-size: 20px;
  font-weight: 700;
  margin: 12px 0 12px;
  text-align: center;
}

/* Panel configurável (borda + fundo) */
.info-panel {
  width: 160px;             /* largura fixa */
  max-width: 100%;          /* não estoura em telas muito pequenas */
  margin: 0 auto 16px;      /* centraliza */
  border-radius: 6px;
  padding: 6px 12px; 
  text-align: center;
  border: 1px solid transparent;

  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* Tema neutro: tons de cinza */
.info-panel--success {
  border-color: #666666;      /* cinza da borda */
  background-color: #e3e3e3;  /* cinza bem clarinho no fundo */
}

.info-panel-text {
  font-size: 20px;
  font-weight: 700;
  color: #163b77
}


/* Botão continuar já usa as classes padrão (btn-primary...) */

#btn-page5-continuar {
  margin-top: 50px;   /* aumenta ou diminui como quiser */
}

/* Bloco de instruções */
.page5-instructions {
  margin-top: 80px;
  font-size: 12px;
  color: #666;
  text-align: center;
}

.instr-title {
  font-size: 11px;
  font-weight: 600;
  margin: 10px 0 2px;
  color: #222;
}

.instr-text {
  font-size: 11px;
  margin: 2px 0;
}

/* Rodapé de instruções */
.instr-footer {
  margin-top: 16px;
  border-top: 1px solid #eee;
  padding-top: 8px;
}

.instr-year {
  font-size: 12px;
  color: #555;
  margin: 0 0 2px;
}

.instr-small {
  font-size: 11px;
  color: #999;
  margin: 0 0 4px;
}

.instr-strong {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}






/* --- PAGE 6 --- */

#page-6 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.page6-content {
  padding: 24px 20px 24px;
}

/* Título e subtítulo da page 6 */
.page6-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.page6-subtitle {
  font-size: 14px;
  color: #555;
  margin: 0 0 16px 0;
  font-weight: 500;
}

/* Bloco de endereço: um campo por linha, com espaçamento ajustável */
.page6-address {
  margin: 8px 0 16px;
  font-size: 14px;
  color: #333;
}

.page6-address-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;   /* <-- aqui você ajusta o espaçamento entre linhas */
}

.addr-label {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.addr-value {
  text-align: right;
}

/* Imagem da page 6 */
.page6-image-wrapper {
  text-align: center;
  margin: 12px 0 16px;
}

.page6-image {
  max-height: 30px;    /* a imagem pode ser maior, mas fica restrita aqui */
  width: auto;
  max-width: 100%;
  display: inline-block;
}



/* Radios em cards */
.page6-radio-group {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page6-radio-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background-color: #f7f7f7;
  padding: 17px 16px;   /* cima/baixo 18px, lados 16px */
  cursor: pointer;
  min-height: 80px;
  
}

.page6-radio-card input[type="radio"] {
  margin-top: 3px;
}

.page6-radio-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page6-radio-text strong {
  font-size: 18px;
  color: #222;
}

.page6-radio-text span {
  font-size: 16px;
  color: #666;
}

/* Mensagem de erro genérica (igual das pages 1 e 2) */
.form-error {
  color: #d93025;
  font-size: 12px;
  margin: 4px 2px 0;
}

/* Borda vermelha nos cards de radio quando der erro */
.page6-radio-card--error {
  border-color: #d93025;
}

/* Card selecionado (radio escolhido) */
.page6-radio-card--selected {
  border-color: #163d73;      /* borda mais escura */
  background-color: #e1e8f5;  /* fundo um pouco mais escuro que o padrão */
}


/* Botão continuar da page 6 (pode usar o padrão) */
#btn-page6-continuar {
  margin-top: 24px;
}






/* ===== PAGE 7 – Loader PIX (mesmo estilo da PAGE 4) ===== */

/* page-7 vira um container em coluna, empurrando o conteúdo pro rodapé */
#page-7 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* bloco de conteúdo embaixo, igual .page4-bottom */
.page7-content {
  margin-top: 500px;      /* ajusta a altura: quanto menor, mais pra cima */
  margin-bottom: 24px;    /* espaço do rodapé */
  padding: 16px 20px 0;   /* igual page 4 */
}

/* grupo das mensagens (fixed + rotating) */
.page7-messages {
  margin: 0 0 12px 0;
}

/* estilo similar ao #page4-message */
#page7-fixed-text,
#page7-rotating-text {
  font-size: 20px;
  font-weight: 600;
  color: #111;
  line-height: 1.3;
  margin: 0 0 4px 0;
}

/* se quiser limitar a 2 linhas no rotating: */
#page7-rotating-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* no máximo 2 linhas */
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* reserva altura pra 2 linhas */
  min-height: calc(1.3em * 2);
}

/* Container da barra de progresso */
.page7-progress-container {
  /* opcional: pode pôr um margin-top aqui se quiser afastar do texto */
}

/* trilho da barra – igual page4-progress-track */
.page7-progress-bar {
  width: 100%;
  height: 16px;
  background-color: #f0f0f0;
  border-radius: 999px;
  overflow: hidden;
}

/* preenchimento da barra – igual #page4-progress-fill */
#page7-progress-fill {
  width: 0%;
  height: 100%;
  background-color: #000;
  border-radius: 999px;
  transition: width 0.3s linear;
}



/* ===== PAGE 8 – Tela PIX ===== */

.page8-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Layout principal: em coluna no mobile */
.pix-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Se quiser, depois dá pra fazer um @media para lado a lado no desktop */

.pix-left,
.pix-right {
  width: 100%;
}

/* Card do QR */
.pix-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  text-align: center;
}

.pix-card-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

.pix-card-help {
  font-size: 13px;
  color: #555;
  margin-top: 8px;
}

/* Card do PIX Copia e Cola */
.pix-copy-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin-bottom: 8px;
}

.pix-copy-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.pix-copy-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.pix-copy-row input {
  flex: 1;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
  background-color: #f8f8f8;
}

.btn-secundario {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #0070ff;
  background-color: #ffffff;
  color: #0070ff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

/* Infos de valor / expira */
.pix-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #333;
  margin-top: 4px;
}

.pix-info-label {
  font-weight: 600;
}

/* ===== GRID DE BADGES (PAGE 8) ===== */
.pix-badges {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 por linha */
  gap: 8px;
}

/* Cada “cartão” */
.pix-badge-card {
  background-color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border: 1px solid #eeeeee;
  padding: 10px 6px;
  min-height: 70px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

/* Ícone do badge */
.pix-badge-icon {
  font-size: 18px;
  margin-bottom: 4px;
}

/* Texto “Pagamento Seguro”, etc */
.pix-badge-title {
  font-size: 11px;
  line-height: 1.2;
  color: #333;
  font-weight: 500;
}


/* Texto de status abaixo do layout PIX */
.page8-status-text {
  font-size: 13px;
  color: #555;
  margin-top: 8px;
  text-align: center;
}

/* Botão de largura total na page 8 */
.btn-full-width {
  width: 100%;
  margin-top: 8px;
}



/* ===== PAGE 9 – Tela final ===== */

.page9-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page9-text {
  font-size: 14px;
  color: #444;
  line-height: 1.4;
}

/* ===== PAINEL DO QR NA PAGE 8 ===== */

/* Card externo: borda escura + fundo branco */
.pix-card {
  border: 1px solid #d4d4d4;
  border-radius: 18px;
  background-color: #ffffff;
  padding: 18px 16px 20px;
}

/* Conteúdo interno em coluna */
.pix-card-inner {
  display: flex;
  flex-direction: column;
}

/* Cabeçalho: ícone + texto */
.pix-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #111;
  margin-bottom: 14px;
}

.pix-card-icon {
  font-size: 12px;
  text-align: center;
}

/* Caixa cinza clara atrás do quadrado do QR */
.pix-gray-box {
  background-color: #f7f7f7;
  border-radius: 18px;
  padding: 22px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Quadrado branco com borda laranja + glow suave */
.pix-qr-frame {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 5px;
  border: 3px solid #ffd4b0;                 /* laranja suave */
  box-shadow: 0 0 0 0 rgba(255, 143, 66, 0.45);
  animation: pix-glow 2.2s ease-in-out infinite;
}

/* Canvas do QR */
#pix-qr-canvas {
  display: block;
  width: 200px;
  height: 200px;
  max-width: 100%;
  margin: 0 auto;
}

/* Texto embaixo do QR */
.pix-card-help {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: #555;
}

/* Animação da “auréola” laranja */
@keyframes pix-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 143, 66, 0.45);
  }
  50% {
    box-shadow: 0 0 12px 6px rgba(255, 143, 66, 0.25);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 143, 66, 0);
  }
}

/* Card do PIX Copia e Cola */
.pix-copy-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 16px 16px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin-bottom: 10px;
}

/* Título do painel */
.pix-copy-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px 0;
}

/* Linha input + botão */
.pix-copy-row {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}

.pix-copy-row input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #d0d0d0;
  font-size: 13px;
  background-color: #f8f8f8;
}

/* Botão Copiar no estilo botão principal */
.btn-secundario {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background-color: #000000;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-secundario:hover {
  background-color: #003f9e;
}

/* Box cinza com Valor / Expira em */
.pix-info-panel {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background-color: #f7f7f7;
  border-left: 3px solid #000000;   /* barrinha preta do lado esquerdo */
}

/* Linhas internas (Valor / Expira em) */
.pix-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: #333;
  margin-bottom: 4px;
  padding: 4px 8px;   /* ↑ aumenta aqui para dar mais altura em cada linha */
  margin-top: 4px; 
}

.pix-info-row:last-child {
  margin-bottom: 0;
}

.pix-info-label {
  font-weight: 600;
}

/* Lista 1 / 2 / 3 com bolinha numerada */
.pix-howto-list {
  list-style: none;
  margin: 15px 0 0 0;
  padding: 0;
  font-size: 13px;
  color: #555;
}

.pix-howto-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

.pix-howto-number {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #cccccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  background-color: #ffffff;
}


/* Força o estilo do botão "Já fiz o pagamento" na página 8 */
#btn-ja-paguei.btn-primary.btn-full-width {
  background-color: #163b77 !important;  /* azul escuro */
  color: #ffffff !important;             /* texto branco */
  border: none;
  font-weight: 600;
}

#btn-ja-paguei.btn-primary.btn-full-width:hover {
  background-color: #1e4c9e !important;
}

#btn-ja-paguei.btn-primary.btn-full-width:active {
  transform: scale(0.98);
}


/* ===== PAGE 9 – Status final ===== */

#page-9 {
  flex: 1;
  display: flex;
}

.page9-content {
  padding: 16px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Imagem acima do card */
.page9-image-wrapper {
  margin: 16px 0 8px;
  text-align: center;
}

.page9-status-image {
  max-width: 100px;   /* controla a largura da imagem */
  width: 40%;
  height: auto;
  display: inline-block;
}

/* Card onde ficam erro + lista de ações */
.page9-status-card {
  margin-top: 8px;
  padding: 10px 10px;
  border-radius: 6px;
  background-color: #f8f8f8;
  border: 1px solid #cccccc;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Mensagem de erro dentro do card */
.page9-error {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #b00020;  /* vermelho suave */
}

/* Lista de ações */
.page9-actions-list {
  list-style: none;
  padding: 0;
  margin: 0;               /* cola a lista dentro do card */
}

/* Cada linha de ação */
.page9-action-item {
  display: flex;
  align-items: flex-start;   /* 👈 ícone fica alinhado ao topo das 2 linhas */
  gap: 12px;
  padding: 5px 0;
  font-size: 14px;
  color: #111;
}

/* Ícone de “entrega/correio” antes do texto */
.page9-icon {
  font-size: 18px;      /* tamanho do emoji */
  line-height: 1;
  display: inline-block;
  margin-top: 1px;      /* só um ajuste fino, se quiser */
}