/**
 * checkout-pix.html — desktop (≥992px).
 * - mobile.css: anula teto 480px no main.
 * - Header #seguro-desktop-chrome: igual a seguro.html — só seguro-header-desktop.css
 *   + estes resets (navigation-desktop.css ficou só em <992px para não competir).
 */

@media only screen and (min-width: 992px) {
  .painel-checkout-pix #container_card .fe-mobile-only {
    display: none !important;
  }

  /*
   * mobile.css usa max-width: 100vw em html/body/#root-app — com scrollbar vertical
   * isso costuma ser > largura útil e gera barra horizontal no desktop.
   */
  /*
   * ML congrats-index: body,html,main { height:100% !important } e #root-app { height:100% }.
   * Com header #seguro-desktop-chrome fora do main, main=100% do body + header > viewport → scroll vertical.
   */
  html {
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html:has(body.painel-checkout-pix),
  body.painel-checkout-pix[data-site='ML'][data-country='BR'] {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
  }

  main#root-app,
  #root-app,
  body.painel-checkout-pix main#root-app,
  body.painel-checkout-pix #root-app {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  body.painel-checkout-pix #seguro-desktop-site-footer {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: auto !important;
  }

  body.painel-checkout-pix #seguro-desktop-site-footer .nav-footer {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: auto !important;
  }

  #root-app .main-container {
    max-width: 1184px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }

  body[data-site="ML"][data-country="BR"] {
    background: #ededed;
    max-width: 100% !important;
  }

  #seguro-desktop-chrome {
    max-width: 100%;
    overflow-x: clip;
  }

  /*
   * Checkout Pix: regras que antes estavam em mobile.css — só aqui (≥992px) para não alterar telemóvel.
   */
  main#root-app .bf-ui-core-container--main[data-testid="feedback_main_container"] {
    zoom: 0.88;
  }
  @supports not (zoom: 1) {
    main#root-app .bf-ui-core-container--main[data-testid="feedback_main_container"] {
      zoom: normal;
      transform: scale(0.88);
      transform-origin: top center;
      width: calc(100% / 0.88);
      margin-left: auto !important;
      margin-right: auto !important;
      box-sizing: border-box !important;
    }
  }

  .painel-checkout-pix .bf-ui-core-feedback-card.bf-ui-core-feedback-card--simple {
    margin-bottom: 4px !important;
  }

  #layout {
    display: flex !important;
    flex-direction: column !important;
  }
  #layout #title_label {
    order: 0;
  }
  #layout #feedback_separator_1 {
    order: 4;
  }
  #layout #title_label_1 {
    order: 5;
  }
  #layout #feedback_label_second {
    order: 6;
  }
  #layout #copi_code_card {
    order: 7;
  }

  /*
   * Mesma largura do card do título (#pix-pay-heading / andes-feedback-screen__header-card = 560px)
   * para as bordas alinharem verticalmente.
   */
  .bf-ui-core-container--main[data-testid="feedback_main_container"],
  #container_card {
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  #container_card.andes-card.bf-ui-core-card[data-testid="container_card"] {
    padding-bottom: 32px !important;
    box-sizing: border-box !important;
  }

  /* Lista + QR em coluna (igual referência ML); botão + link compras */
  #layout #feedback_try_again_card.bf-ui-core-label {
    order: 1;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  #layout #feedback_qr_code_container {
    width: 100% !important;
    justify-content: center !important;
    padding-top: 20px !important;
    box-sizing: border-box !important;
  }
  #feedback_qr_code_container .bf-ui-core-bar-qr-code,
  #feedback_qr_code_container canvas,
  #feedback_qr_code_container table {
    max-width: 112px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #layout .painel-pix-clock-message-stack {
    order: 2;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 12px !important;
  }
  #layout .painel-pix-clock-message-stack #clock_label {
    margin-bottom: 0 !important;
  }
  #layout .painel-pix-clock-message-stack [data-testid="message_quiet_neutral"].bf-ui-core-message--container {
    width: 100% !important;
    max-width: 100% !important;
  }
  #layout #button_container_1 {
    order: 8;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px 16px !important;
  }
  #layout #button_container_1 .painel-pix-link-compras,
  #layout #button_container_1 #back.andes-button,
  #layout #button_container_1 #back.bf-ui-core-button {
    margin-left: 0 !important;
  }
  /* “Copiar código” — ~12,5% maior que o spec anterior (113.87×32 / 12px) */
  #layout #button_container_1 #back_to_home.andes-button,
  #layout #button_container_1 #back_to_home.bf-ui-core-button {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 14px !important;
  }
  #layout #button_container_1 #back_to_home .andes-button__content,
  #layout #button_container_1 #back_to_home .andes-button__text {
    line-height: 1 !important;
    padding: 0 !important;
  }

  /* Toast “Código copiado” (botão Copiar código) — 600×53; texto à esquerda */
  .pix-copied-toast {
    width: 600px !important;
    max-width: 600px !important;
    height: 53px !important;
    min-height: 53px !important;
    max-height: 53px !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .pix-copied-toast.pix-copied-toast--visible {
    transform: translateX(-50%) translateY(0) !important;
  }
  .pix-copied-toast[hidden]:not(.pix-copied-toast--visible) {
    transform: translateX(-50%) translateY(20px) !important;
  }

  /* Card "Falta pouco!" (andes-feedback-screen__header-card) — 560×127.97 */
  #root-app .andes-feedback-screen__header-card.andes-card {
    width: 560px !important;
    max-width: min(560px, 100%) !important;
    min-width: 0 !important;
    height: 127.97px !important;
    min-height: 127.97px !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #root-app .andes-feedback-screen__header-card .andes-card__content {
    height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    min-height: 0 !important;
  }

  /* Título Pix: uma linha só (ex.: valores grandes em R$). */
  #root-app .andes-feedback-screen__header {
    flex-wrap: nowrap !important;
  }

  #root-app .andes-feedback-screen__header-info {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* Título Pix (#pix-pay-heading) — caixa 512.01×30, uma linha; fonte 22px. */
  #root-app #pix-pay-heading,
  #root-app h2.andes-feedback-screen__header-title#pix-pay-heading {
    box-sizing: border-box !important;
    width: 512.01px !important;
    max-width: min(512.01px, 100%) !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    line-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /*
   * Faixa amarela: mesmos valores que seguro-header-desktop.css (como escolher-pagamento),
   * com !important para vencer congrats-index / ML no checkout-pix (sem transform).
   */
  #seguro-desktop-chrome > header.nav-header.nav-header-plus.ui-navigation-v2.teste-header-offline {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    max-width: none !important;
    width: 100% !important;
    height: 49px !important;
    min-height: 49px !important;
    max-height: 49px !important;
    padding: 0 !important;
    background: #ffe600 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.18) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
  }

  #seguro-desktop-chrome .teste-header-bounds.nav-bounds.nav-bounds-with-cart {
    display: flex !important;
    align-items: center !important;
    max-width: 1920px !important;
    width: 100% !important;
    height: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 24px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  #seguro-desktop-chrome .teste-header-row.teste-header-row-top {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    column-gap: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-height: 49px !important;
    overflow: hidden !important;
  }

  #seguro-desktop-chrome .teste-header-logo {
    margin: 0 0 0 min(28vw, 340px) !important;
    flex-shrink: 0 !important;
    line-height: 0 !important;
  }

  #seguro-desktop-chrome .teste-header-logo .nav-logo.nav-logo-custom,
  #seguro-desktop-chrome .teste-header-logo .nav-logo-custom {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-decoration: none !important;
    line-height: 0 !important;
  }

  #seguro-desktop-chrome .teste-header-logo img {
    display: block !important;
    width: 133.64px !important;
    height: 34px !important;
    max-width: 133.64px !important;
    max-height: 34px !important;
    object-fit: contain !important;
    margin: 0 !important;
    vertical-align: top !important;
  }

  #seguro-desktop-chrome .teste-header-exhibitor-wrap {
    margin-left: auto !important;
    margin-right: 72px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    line-height: 0 !important;
    max-height: 49px !important;
    max-width: min(283px, 38vw) !important;
    overflow: hidden !important;
  }

  #seguro-desktop-chrome .teste-exhibitor-pill-link {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    line-height: 0 !important;
    max-height: 49px !important;
    overflow: hidden !important;
  }

  #seguro-desktop-chrome #testeHeaderBadgeImg,
  #seguro-desktop-chrome .teste-exhibitor-pill-link img {
    display: block !important;
    height: 40px !important;
    width: auto !important;
    max-width: min(283px, 38vw) !important;
    max-height: 40px !important;
    object-fit: contain !important;
  }
}