/* Correções nossas sobre o snapshot BRK — carregado por último */

/* "Ver mais detalhes": a lista começa recolhida e só abre com .is-open.
   O CSS do snapshot deixava sempre visível e o toggle não fazia nada. */
.detail-list {
  display: none !important;
}
.detail-list.is-open {
  display: grid !important;
}

/* cursor de clique no cabeçalho do toggle */
.detail-wrapper {
  cursor: pointer;
}

/* No mobile, esconde a ilustração lateral (fatura/cadeado) — ocupa espaço demais no topo */
@media (max-width: 768px) {
  .image,
  .content__controls {
    display: none !important;
  }

  /* Página PIX: centraliza o conteúdo (QR, instruções, botão) no mobile */
  .brk-flow-step-pix .resume,
  .brk-flow-step-pix .content__details {
    text-align: center !important;
    align-items: center !important;
  }
  .brk-flow-step-pix .back-ground-qrcode {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .brk-flow-step-pix .resume__value,
  .brk-flow-step-pix .duplicate-pix,
  .brk-flow-step-pix .easy-duplicate-overview .content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* instruções "1. Abra o app..." centralizadas no mobile */
  .brk-flow-step-pix .pix-instructions,
  .brk-flow-step-pix .pix-instructions > div {
    text-align: center !important;
  }
  .brk-flow-step-pix .pix-instructions {
    align-items: center !important;
  }

  /* CAUSA RAIZ: o container flex-row externo usa justify-content:left,
     empurrando o miolo (QR + instruções) para a esquerda. Centraliza. */
  .brk-flow-step-pix .pix-qrcode-container {
    justify-content: center !important;
  }
}