/* ============================================================
   user-mobile.css — Painel do cliente PaggOnline (mobile/tablet)
   Carregado no brand_head para páginas do usuário (.op-app).
   ============================================================ */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 900px) {
  /* —— Chrome base —— */
  .op-app {
    display: block;
    width: 100%;
    overflow-x: hidden;
  }

  main.op-main,
  .op-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .op-page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }
  .op-page-header h1 {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    word-break: break-word;
  }
  .op-page-header p {
    max-width: 100% !important;
    font-size: 0.85rem !important;
  }
  .op-page-header > div {
    width: 100%;
  }
  .op-page-header .op-btn {
    width: 100%;
    justify-content: center;
  }

  /* —— Empilha TODOS os grids 2/3 colunas do painel —— */
  .op-trading-grid,
  .op-balances-grid,
  .op-grid-2,
  main.op-main section[style*="grid-template-columns"],
  main.op-main .op-card > div[style*="grid-template-columns"],
  main.op-main article[style*="grid-template-columns"],
  main.op-main form > div[style*="grid-template-columns"],
  main.op-main div[style*="grid-template-columns:1fr 1fr"],
  main.op-main div[style*="grid-template-columns: 1fr 1fr"],
  main.op-main div[style*="grid-template-columns:1fr auto 1fr"],
  main.op-main div[style*="grid-template-columns: 1fr auto 1fr"],
  main.op-main div[style*="grid-template-columns:1fr 1fr 1fr"],
  main.op-main div[style*="grid-template-columns: 1fr 1fr 1fr"],
  main.op-main div[style*="grid-template-columns:1.5fr 1fr"],
  main.op-main div[style*="grid-template-columns: 1.5fr 1fr"],
  main.op-main section[style*="grid-template-columns:1fr 1fr"],
  main.op-main section[style*="grid-template-columns: 1fr 1fr"],
  main.op-main section[style*="grid-template-columns:1.5fr"],
  main.op-main section[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* auto-fit com minwidth alto → 1 coluna em telas estreitas */
  main.op-main section[style*="minmax(160px"],
  main.op-main section[style*="minmax(200px"],
  main.op-main div[style*="minmax(200px"],
  main.op-main div[style*="minmax(280px"] {
    grid-template-columns: 1fr !important;
  }

  /* Converter BRL⇄USDT: setinha no meio não quebra o fluxo */
  main.op-main #swapBtn {
    margin: 4px auto !important;
    justify-self: center;
  }

  /* Cards / tipografia */
  .op-card {
    padding: 14px !important;
    overflow: hidden;
  }
  #livePrice {
    font-size: 28px !important;
  }
  .op-card [style*="font-size:34px"],
  .op-card [style*="font-size:38px"],
  .op-card [style*="font-size:28px"] {
    font-size: 1.6rem !important;
    word-break: break-word;
  }

  /* Tabelas: scroll horizontal limpo */
  .op-table,
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .op-card > .op-table,
  .op-card > div > table,
  .op-card table {
    max-width: 100%;
  }

  /* Tabs horizontais com scroll */
  .op-tabs,
  nav.op-tabs,
  main.op-main nav[style*="border-bottom"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 0 !important;
    width: 100%;
  }
  .op-tabs a,
  .op-tabs button,
  nav.op-tabs > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Formulários full-width */
  .op-btn--block,
  main.op-main form .op-btn--primary {
    width: 100%;
  }
  .op-input,
  input.op-input,
  select.op-input,
  textarea.op-input,
  .op-field input,
  .op-field select,
  .op-field textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important; /* evita zoom iOS */
  }

  /* QR PIX resultado */
  #pixResult > div,
  #pixResult div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  #qrBox {
    margin: 0 auto;
  }
  #qrText {
    font-size: 11px !important;
  }

  /* Alertas longos */
  .op-alert {
    flex-wrap: wrap;
    align-items: flex-start !important;
  }

  /* Segurança: botões do header */
  .op-page-header [style*="display:flex"] {
    flex-wrap: wrap !important;
    width: 100%;
  }
}

@media (max-width: 480px) {
  main.op-main,
  .op-main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #livePrice {
    font-size: 24px !important;
  }
  .op-card [style*="font-size:34px"],
  .op-card [style*="font-size:38px"] {
    font-size: 1.35rem !important;
  }
  main.op-main section[style*="minmax(160px"] {
    grid-template-columns: 1fr 1fr !important;
  }
}