/* ==========================================================================
   TELA PIX COMPACTA
   Só CSS: reage ao atributo hidden que o ck.js já alterna em mostraTela().
   QR, código copia e cola, cópia, cronômetro e consulta de status seguem
   inteiramente no ck.js, sem mudança.
   ========================================================================== */

/* Faixas promocionais somem apenas enquanto a tela PIX está visível */
body:has(> main[data-tela="pix"]:not([hidden])) > .ck-topbar,
body:has(> main[data-tela="pix"]:not([hidden])) > .ck-faixa {
  display: none;
}

@media (max-width: 640px) {
  /* Etapas e opções de frete não estouram a coluna no mobile */
  .ck-passo__nome {
    max-width: 100%;
    white-space: normal;
  }
  .ck-frete__linha {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .ck-frete__opcao {
    column-gap: 10px;
    /* o componente de frete original também declara padding !important */
    padding: 12px !important;
  }
  .ck-frete__prazo {
    min-width: 0;
  }

  /* Cabeçalho mais baixo só na tela PIX */
  body:has(> main[data-tela="pix"]:not([hidden])) .ck-header__inner {
    min-height: 54px;
    padding: 8px 16px;
  }
  body:has(> main[data-tela="pix"]:not([hidden])) .ck-header__logo img {
    max-height: 26px;
    width: auto;
  }

  main[data-tela="pix"] .ck-pix {
    width: 100%;
    padding: 16px 16px 24px;
  }
  main[data-tela="pix"] .ck-pix h1 {
    font-size: 28px;
    line-height: 1.15;
    margin-bottom: 6px;
  }
  main[data-tela="pix"] .ck-pix__prazo {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 8px;
  }
  main[data-tela="pix"] .ck-pix__status {
    max-width: 100%;
    padding: 6px 14px;
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 8px;
  }
  main[data-tela="pix"] .ck-pix__ilustra {
    width: 64px;
    height: auto;
    margin: 0 auto 6px;
  }
  main[data-tela="pix"] .ck-pix__legenda {
    max-width: 280px;
    margin: 0 auto 6px;
    font-size: 13px;
    line-height: 1.35;
  }
  /* QR sempre quadrado, sem deformar o bitmap gerado pelo ck.js */
  main[data-tela="pix"] .ck-pix__qr {
    width: clamp(208px, 56vw, 232px);
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    margin-bottom: 8px;
  }
  main[data-tela="pix"] .ck-pix__total {
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 6px;
  }
  main[data-tela="pix"] .ck-pix__pedido {
    margin: 0 0 10px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  main[data-tela="pix"] .ck-pix__pedido b {
    font-size: 13px;
  }
  main[data-tela="pix"] .ck-pix__pedido span {
    font-size: 12px;
  }
  main[data-tela="pix"] .ck-pix__codigo {
    height: 44px;
    margin: 0 0 8px;
    font-size: 14px;
    line-height: normal;
  }
  main[data-tela="pix"] .ck-btn[data-pix-copiar] {
    min-height: 50px;
    padding: 10px 16px;
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.35;
  }
  main[data-tela="pix"] .ck-pix__como h2 {
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 10px;
  }
  main[data-tela="pix"] .ck-pix__passos {
    gap: 8px;
  }
  main[data-tela="pix"] .ck-pix__passos li {
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
  }
}