/* =================================================================
   MERCADO LIVRE — Refinamento Mobile · pagamento.html
   Target: iPhone 12 Pro (390 × 844) e similares
   Objetivo: corrigir alinhamento, espaçamento e responsividade
             SEM alterar identidade visual, cores ou estrutura
   ================================================================= */


/* -----------------------------------------------------------------
   0. OCULTAR "Combinar 2 meios de pagamento"
   ----------------------------------------------------------------- */
[data-testid="switch_container_card"],
[id^="switch_container_card"] {
  display: none !important;
}


/* -----------------------------------------------------------------
   1. BASE — impede overflow horizontal em toda a página
   ----------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  touch-action: pan-y;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
}


/* -----------------------------------------------------------------
   2. NAV HEADER — mantém o visual original, ajusta para mobile
   ----------------------------------------------------------------- */

/* O header já tem background: #ffe600 e height: 48px no CSS embutido.
   Só precisamos garantir que o conteúdo interno não vaze. */
.nav-header {
  width: 100% !important;
  overflow: hidden !important;
}

/* nav-bounds: o CSS embutido tem max-width:1200px e padding:8px 10px.
   Ajustamos o padding lateral para 16px — mais respiro, sem mudar a cor. */
.nav-header .nav-bounds {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 16px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Logo do ML — preserva exatamente como é (background-image, 134×34px) */
.nav-logo {
  flex-shrink: 0 !important;
}

/* Menu do usuário — não ultrapassa a tela */
.nav-header-menu-wrapper,
.nav-header-user,
.nav-header-menu-list {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Badge de notificações — não empurra layout */
.nav-header-notifications-badge {
  max-width: 24px !important;
}


/* -----------------------------------------------------------------
   3. CONTAINERS RAIZ — converte layout desktop (row) em mobile (column)
   ----------------------------------------------------------------- */

/* Root-app e step-container: largura total, sem overflow */
#root-app,
[role="main"],
.step-container,
.options-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* flox_container: era flex-direction:row (form à esq + overview à dir).
   No mobile, empilha em coluna. */
[data-testid="flox_container"],
.bf-ui-core-container--main {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}


/* -----------------------------------------------------------------
   4. FORMULÁRIO PRINCIPAL (bf_main_container)
   ----------------------------------------------------------------- */

/* O CSS embutido coloca padding-top:40px (spacing40).
   Reduzimos um pouco e adicionamos padding lateral de 16px. */
[data-testid="bf_main_container"],
form[data-testid="bf_main_container"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 24px 16px 0 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}


/* -----------------------------------------------------------------
   5. TÍTULO "Escolha como pagar"
   ----------------------------------------------------------------- */

[id^="label_header"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 16px !important;
  display: block !important;
}

/* Preserva a tipografia original (h1 do Andes UI) */
[id^="label_header"] h1,
[id^="label_header"] .andes-typography--type-title.andes-typography--size-m {
  white-space: normal !important;
  overflow-wrap: normal !important;
  max-width: 100% !important;
}


/* -----------------------------------------------------------------
   6. GRUPOS DE MÉTODOS DE PAGAMENTO
   ----------------------------------------------------------------- */

[id^="payment_group_container_"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Título do grupo ("Recomendados", "Cartões") */
[id^="bf_container_payment_group_title_"] {
  width: 100% !important;
  display: block !important;
  margin-bottom: 8px !important;
}

/* Card que envolve a lista de opções */
[id^="payment_group_container_"] > .andes-card,
[id^="payment_group_container_"] > .bf-ui-core-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}


/* -----------------------------------------------------------------
   7. LISTA DE OPÇÕES DE PAGAMENTO (Pix, Cartão)
   ----------------------------------------------------------------- */

.andes-list,
.bf-ui-core-list {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.andes-list__item,
.bf-ui-core-list-item {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Container interno do item — preserva o padding original (spacing16/spacing20/spacing32) */
.bf-ui-core-list-item__container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Conteúdo e thumbnail do item */
.bf-ui-core-list-item__container-content,
.bf-ui-core-list-item__content-description {
  min-width: 0 !important;
  overflow: hidden !important;
  flex: 1 !important;
}

/* Textos dentro dos itens */
.andes-list__item-primary,
.andes-list__item-secondary {
  min-width: 0 !important;
  overflow: hidden !important;
}

.andes-list__item-primary .andes-typography,
.andes-list__item-secondary .andes-typography {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

/* Áreas de conteúdo dos cards de pagamento */
.andes-card__content,
.bf-ui-core-card__content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Badge (ex: "PAGUE MENOS") — não afeta largura do container */
.bf-ui-core-badge,
.andes-badge {
  max-width: fit-content !important;
}


/* -----------------------------------------------------------------
   8. BOTÃO "CONTINUAR"
   ----------------------------------------------------------------- */

/* Container do botão: era justify-content: right.
   No mobile, deixamos o botão ocupar toda a largura. */
[id^="static_buttons_container_id"],
[data-testid="static_buttons_container_id"] {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 16px 16px 20px 16px !important;
  box-sizing: border-box !important;
}

/* Wrapper interno — estica para largura total */
[id^="static_buttons_wrap_content_container_id"],
[data-testid="static_buttons_wrap_content_container_id"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Botão Continuar — preserva cor (#3483fa), estilo e tipografia originais */
#continue_button,
[data-testid="continue_button"] {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

#continue_button .andes-button__content,
[data-testid="continue_button"] .andes-button__content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}


/* -----------------------------------------------------------------
   9. RESUMO DA COMPRA (overview_container)
   -----------------------------------------------------------------
   O CSS embutido define (com !important):
     align-items: center   ← centralizaria as linhas horizontalmente (errado)
     width: 360px          ← largura fixa desktop (errado no mobile)
     max-width: 360px      ← idem
     margin-left: 48px     ← margem lateral do sidebar desktop
     margin-top: 48px      ← margem topo do sidebar desktop
   Precisamos sobrescrever tudo isso.
   ----------------------------------------------------------------- */

[data-testid="overview_container"],
[id^="overview_container"] {
  /* Dimensões: ocupa toda a largura disponível */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;

  /* Margem: remove o sidebar desktop, adiciona separação topo */
  margin: 0 !important;
  margin-top: 0 !important;

  /* Padding: mantém 16px lateral (era 16px 24px no desktop — ajustamos) */
  padding: 16px !important;

  /* Alinhamento: stretch para as linhas ocuparem largura total */
  align-items: stretch !important;

  /* Posicionamento: remove qualquer absolute/fixed residual */
  position: static !important;
}

/* "Resumo da compra" — margem-top do título estava em 56px (spacing56).
   No mobile, dentro de um card com padding, não precisa de 56px. */
[id^="purchase_summary"],
[data-testid^="purchase_summary"] {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  width: 100% !important;
}

/* Separador horizontal */
[data-testid="separator_title_overview"],
[id^="separator_title_overview"] {
  width: 100% !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

/* ----- LINHAS DO RESUMO (Produto, Desconto, Frete, Total, Cupom) -----
   Cada linha é flex-direction:row e justify:space-between.
   CRÍTICO: flex-wrap:nowrap garante label e valor na mesma linha.
   IDs reais do HTML (verificados):
     - product_container
     - product_discount_container
     - shipping_container
     - coupons_container
     - purchase_amount_container  ← linha "Você pagará"
     - container_detail_savings   ← linha "Você economizou"
     - separator_4                ← separador antes do total
   --------------------------------------------------------------- */
[id^="product_container"],
[id^="product_discount_container"],
[id^="shipping_container"],
[id^="coupons_container"],
[id^="purchase_amount_container"],
[data-testid="product_container"],
[data-testid="product_discount_container"],
[data-testid="shipping_container"],
[data-testid="purchase_amount_container"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 8px !important;
}

/* Coluna do label (esquerda) — cresce, mas cede espaço ao valor */
[id^="product_container"] > .bf-ui-core-label:first-child,
[id^="product_discount_container"] > .bf-ui-core-label:first-child,
[id^="shipping_container"] > .bf-ui-core-label:first-child,
[id^="purchase_amount_container"] > .bf-ui-core-label:first-child,
[data-testid="product_container"] > .bf-ui-core-label:first-child,
[data-testid="product_discount_container"] > .bf-ui-core-label:first-child,
[data-testid="shipping_container"] > .bf-ui-core-label:first-child,
[data-testid="purchase_amount_container"] > .bf-ui-core-label:first-child {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Coluna do valor (direita) — não encolhe, sempre à direita */
[id^="product_container"] > .bf-ui-core-label:last-child,
[id^="product_discount_container"] > .bf-ui-core-label:last-child,
[id^="shipping_container"] > .bf-ui-core-label:last-child,
[id^="purchase_amount_container"] > .bf-ui-core-label:last-child,
[data-testid="product_container"] > .bf-ui-core-label:last-child,
[data-testid="product_discount_container"] > .bf-ui-core-label:last-child,
[data-testid="shipping_container"] > .bf-ui-core-label:last-child,
[data-testid="purchase_amount_container"] > .bf-ui-core-label:last-child {
  flex: 0 0 auto !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Valores monetários — nunca ultrapassam o container */
.andes-money-amount {
  max-width: 100% !important;
  white-space: nowrap !important;
}

/* Separador antes do total (id=separator_4) */
[id^="separator_4"],
[id^="separator_total"],
[data-testid*="separator_total"] {
  width: 100% !important;
  margin: 12px 0 !important;
}

/* "Você economizou R$ 342" — alinhado à direita */
[id^="container_detail_savings"],
[data-testid="container_detail_savings"] {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin-top: 4px !important;
}


/* -----------------------------------------------------------------
   10. TIPOGRAFIA — impede overflow e textos quebrados erroneamente
   ----------------------------------------------------------------- */

h1, h2, h3,
.andes-typography--type-title {
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  max-width: 100% !important;
}

.andes-typography {
  max-width: 100% !important;
  min-width: 0 !important;
}

.bf-ui-core-rich-text__body,
.bf-ui-core-rich-text__title {
  max-width: 100% !important;
  min-width: 0 !important;
}


/* -----------------------------------------------------------------
   11. INPUTS E FORMULÁRIOS
   ----------------------------------------------------------------- */

input, select, textarea,
.andes-form-control,
.andes-form-control__control,
.andes-form-control__field {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Andes default line-height:20px causes vertical misalignment when box-sizing:border-box is active */
.andes-form-control--textfield .andes-form-control__field {
  line-height: 1 !important;
}


/* -----------------------------------------------------------------
   12. SAFETY NET — nada vaza horizontalmente
   -----------------------------------------------------------------
   IMPORTANTE: aplicamos min-width:0 e max-width:100% em todo o
   root-app, MAS não forçamos flex-wrap em containers internos que
   precisam permanecer em linha (ex: linhas do resumo da compra).
   ----------------------------------------------------------------- */

#root-app,
#root-app * {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#root-app .andes-card,
#root-app .bf-ui-core-card,
#root-app .andes-list,
#root-app .andes-list__item,
#root-app .bf-ui-core-list-item,
#root-app .andes-list__item-content,
#root-app .andes-card__content,
#root-app .bf-ui-core-card__content {
  overflow: hidden !important;
}

/* Containers que eram ROW no desktop e precisam ser COLUNA no mobile:
   apenas os wrappers principais, nunca as linhas internas do resumo. */
body:has(.options-container) [data-testid="flox_container"] {
  flex-direction: column !important;
  align-items: stretch !important;
}


/* -----------------------------------------------------------------
   13. NAV FOOTER
   ----------------------------------------------------------------- */

.nav-footer,
footer.nav-footer {
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.nav-footer *,
footer * {
  max-width: 100% !important;
  min-width: 0 !important;
  word-wrap: break-word !important;
}

.nav-footer-navigation__menu,
.nav-footer-primaryinfo__links {
  flex-wrap: wrap !important;
}

.nav-footer-navigation a,
.nav-footer span,
.nav-footer p,
.nav-footer-primaryinfo,
.nav-footer-secondaryinfo {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.nav-bounds {
  max-width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Override para o footer que tem nav-bounds com padding diferente */
footer.nav-footer .nav-bounds {
  height: auto !important;
}


/* -----------------------------------------------------------------
   14. ETAPA DE ENTREGA (shipping) — preservado do projeto original
   ----------------------------------------------------------------- */

@media (max-width: 768px) {
  [data-id="shipping_main_container"],
  [data-testid="shipping_main_container"],
  #shipping_main_container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    align-items: stretch !important;
  }

  [data-id="shipping_main_container"] > *,
  [data-id="shipping_cards_container"],
  [data-id="shipping_footer_button_container"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  #shipping_header_title h1,
  [data-testid="shipping_header_title"] h1,
  [data-id="shipping_main_container"] .andes-typography--type-title {
    font-size: 20px !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    overflow: visible !important;
    max-width: 100% !important;
    display: block !important;
    width: 100% !important;
  }

  [data-id="shipping_main_container"] .andes-card,
  [data-id="shipping_main_container"] .bf-ui-core-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #shipping_footer_button_container .andes-button,
  [data-testid="shipping_footer_button_container"] .andes-button {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #shipping_header_container_subtitle,
  [data-testid="shipping_header_container_subtitle"] {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    align-items: center !important;
  }

  #shipping_header_icon_subtitle {
    grid-column: 1 !important;
    width: 20px !important;
    max-width: 20px !important;
  }

  #shipping_header_subtitle {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  #shipping_footer_button_container,
  [data-testid="shipping_footer_button_container"] {
    height: auto !important;
    min-height: 64px !important;
    overflow: visible !important;
    position: relative !important;
    margin-bottom: 16px !important;
  }
}


/* -----------------------------------------------------------------
   15. FORMULÁRIO DE CARTÃO (fkml) — preservado do projeto original
   ----------------------------------------------------------------- */

@media (max-width: 768px) {
  body.fkml-card-enhanced .card-form--container--desktop,
  body.fkml-card-enhanced .card-form--custom_wrapper,
  body.fkml-card-enhanced .card-form--wrapper,
  body.fkml-card-enhanced .secure-fields--wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.fkml-card-enhanced .card-form--container--split {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.fkml-card-enhanced .card-form--wrapper--line {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.fkml-card-enhanced .fkml-card-input,
  body.fkml-card-enhanced .fkml-card-native input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.fkml-card-enhanced [data-testid="card-form--card-preview"],
  body.fkml-card-enhanced .fkml-card-preview-overlay {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body.fkml-card-enhanced .card-form__button--submit,
  body.fkml-card-enhanced [data-testid="bf_footer_continue_button"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 14px !important;
  }

  .fkml-card-decline,
  .fkml-card-pix-button {
    width: 100% !important;
  }
}


/* -----------------------------------------------------------------
   15b. FORMULÁRIO DE CARTÃO — complemento para 320px–430px
   ----------------------------------------------------------------- */

/* Desktop containers que não têm media query no CSS original */
body.fkml-card-enhanced .card-form--container--desktop {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Garante que o footer do formulário de cartão também seja responsivo */
body.fkml-card-enhanced [data-testid="bf_footer"],
body.fkml-card-enhanced .bf_footer,
body.fkml-card-enhanced [id^="bf_footer"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 16px !important;
}

body.fkml-card-enhanced [data-testid="bf_footer_continue_button"],
body.fkml-card-enhanced .card-form__button--submit {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  height: 48px !important;
  min-height: 48px !important;
}

@media (max-width: 430px) {
  /* Padding reduzido em telas pequenas */
  [data-testid="bf_main_container"],
  form[data-testid="bf_main_container"] {
    padding: 16px 12px 0 12px !important;
  }

  body.fkml-card-enhanced .card-form--container--desktop,
  body.fkml-card-enhanced .card-form--container--split,
  body.fkml-card-enhanced .card-form--custom_wrapper,
  body.fkml-card-enhanced .card-form--wrapper,
  body.fkml-card-enhanced .card-form--field,
  body.fkml-card-enhanced .secure-fields--wrapper,
  body.fkml-card-enhanced .secure-fields--field,
  body.fkml-card-enhanced .andes-form-control,
  body.fkml-card-enhanced .andes-form-control__control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.fkml-card-enhanced .fkml-card-input,
  body.fkml-card-enhanced .fkml-card-native input,
  body.fkml-card-enhanced #cardholderName,
  body.fkml-card-enhanced #cardholderIdentificationNumber {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* evita zoom automático no iOS Safari */
  }

  body.fkml-card-enhanced .fkml-card-preview-overlay {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 8px !important;
  }
}

@media (max-width: 360px) {
  [data-testid="bf_main_container"],
  form[data-testid="bf_main_container"] {
    padding: 12px 10px 0 10px !important;
  }

  body.fkml-card-enhanced .fkml-card-input,
  body.fkml-card-enhanced .fkml-card-native input,
  body.fkml-card-enhanced #cardholderName,
  body.fkml-card-enhanced #cardholderIdentificationNumber {
    height: 40px !important;
    font-size: 15px !important;
    padding: 12px 10px !important;
    line-height: 1 !important;
  }

  body.fkml-card-enhanced .fkml-card-preview-overlay {
    min-height: 120px !important;
    padding: 14px !important;
  }

  .fkml-card-preview-number {
    font-size: 14px !important;
    letter-spacing: .06em !important;
  }
}


/* -----------------------------------------------------------------
   15c. CARTÃO — título e botão: alinhamento e visual mobile
   ----------------------------------------------------------------- */

/* Botão Continuar: altura, radius e centralização do texto */
@media (max-width: 768px) {
  body.fkml-page-cartao .card-form__button--submit .andes-button,
  body.fkml-page-cartao .card-form__button--submit .andes-button--loud,
  body.fkml-page-cartao .card-form__button--submit-card .andes-button {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Título: tipo label (visually-hidden + rich-text) — espaçamento vertical */
  body.fkml-page-cartao [id^="label_header"],
  body.fkml-page-cartao [data-testid^="label_header"] {
    margin-top: 8px !important;
  }
}


/* -----------------------------------------------------------------
   16. TELA PIX / FEEDBACK — preservado do projeto original
   ----------------------------------------------------------------- */

@media (max-width: 768px) {
  .andes-feedback-screen,
  .andes-feedback-screen__container,
  .andes-feedback-screen__header,
  .andes-feedback-screen__main,
  .andes-feedback-screen__content,
  .andes-feedback-screen__actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .andes-feedback-screen__header-title {
    display: block !important;
    width: 100% !important;
    font-size: 22px !important;
    text-align: center !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  .andes-feedback-screen__actions .andes-button,
  [data-testid*="copy"],
  [id*="copy"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  [class*="qr"],
  [id*="qr"] {
    margin: 0 auto !important;
    text-align: center !important;
    max-width: 100% !important;
  }
}


/* -----------------------------------------------------------------
   17. SEGURANÇA GLOBAL MOBILE — 320px–430px para todos os checkouts
   ----------------------------------------------------------------- */

@media (max-width: 430px) {
  /* Bloqueia qualquer overflow lateral remanescente */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Remove padding-left/right de containers raiz que podem causar overflow */
  #root-app,
  [role="main"],
  .step-container,
  .options-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  /* Garante que flox_container sempre empilha verticalmente */
  [data-testid="flox_container"],
  .bf-ui-core-container--main {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  /* Qualquer elemento com posicionamento absoluto não pode exceder a tela */
  [style*="position: absolute"],
  [style*="position:absolute"],
  [style*="position: fixed"],
  [style*="position:fixed"] {
    max-width: 100vw !important;
  }

  /* Botões: sempre width 100% no mobile */
  .andes-button--loud,
  .andes-button--quiet,
  [data-testid="continue_button"],
  [data-testid="bf_footer_continue_button"],
  #continue_button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
  }

  /* Formulário principal: padding seguro */
  [data-testid="bf_main_container"],
  form[data-testid="bf_main_container"] {
    overflow-x: hidden !important;
  }

  /* Inputs: tamanho 16px evita zoom automático no Safari iOS */
  input[type="text"],
  input[type="number"],
  input[type="tel"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Resumo da compra: remove larguras fixas do CSS inline do HTML */
  [data-testid="overview_container"],
  [id^="overview_container"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 360px) {
  /* Textos de título menores em telas muito pequenas */
  [id^="label_header"] h1,
  .andes-typography--type-title.andes-typography--size-m {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  /* Padding ainda menor */
  [data-testid="bf_main_container"],
  form[data-testid="bf_main_container"] {
    padding: 12px 10px 0 10px !important;
  }

  [id^="static_buttons_container_id"],
  [data-testid="static_buttons_container_id"] {
    padding: 12px 10px 16px 10px !important;
  }
}