/* ==========================================================
   EVcerto — style.mobile.css (MOBILE OVERRIDES)
   - Carregado apenas em (max-width: 820px) via index.html
   - NÃO altera paleta/cores: apenas layout/tamanhos/flow
   - Mantém IDs/classes esperados pelo app.v2.js
   ========================================================== */

@media (max-width: 820px) {

  /* ---------- Base / container ---------- */
  html {
    scroll-padding-top: 78px;
  }

  body {
    overflow-x: hidden;
  }

  .wrap {
    width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Evita “zoom” em inputs no iOS */
  input,
  select,
  textarea,
  button {
    font-size: 16px;
  }

  /* ---------- Topbar ---------- */
  .topbar {
    padding: 10px 12px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .navlinks {
    flex: 1 1 100%;
    order: 20;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-top: 6px;
  }

  .topbarRight {
    flex: 0 0 auto;
    order: 10;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Pills / toggles na topbar (compacto) */
  .userPill {
    padding: 7px 9px;
    gap: 8px;
  }

  .userEmail {
    font-size: 11.5px;
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .toggle {
    font-size: 11.5px;
    gap: 8px;
  }

  .toggle input {
    width: 42px;
    height: 22px;
  }

  /* Botões pequenos */
  .btn.small {
    height: 34px;
    padding: 0 12px;
  }

  /* Stale banner sempre em linha cheia (mobile) */
  .staleBanner {
    flex: 1 1 100%;
    order: 99;
    margin: 10px 0 0;
  }

  /* ---------- Auth (dropdown/modal) ---------- */
  /* Se ainda existir modo “drop” em algum cenário, garante que não estoure a tela */
  .topbar .authDrop {
    width: calc(100vw - 24px);
    right: 12px;
    left: 12px;
  }

  /* Modal: ocupa quase a tela toda (sem cortar campos) */
  .auth.authModal {
    top: 84px;
    width: calc(100vw - 24px);
    max-height: calc(100vh - 110px);
  }

  /* Layout do login row dentro do modal */
  .authModal .loginRow {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .authModal .loginRow input {
    width: 100% !important;
  }

  /* ---------- Hero ---------- */
  .hero {
    min-height: 190px;
  }

  .heroInner {
    padding: 24px 14px 16px;
  }

  .heroTitle {
    font-size: 32px;
    line-height: 1.05;
  }

  body.is-logged .heroLogged .heroTitle {
    font-size: 30px;
  }

  .heroSub {
    font-size: 14px;
    line-height: 1.35;
  }

  .heroCtas {
    gap: 10px;
    flex-wrap: wrap;
  }

  .heroCtas .btn {
    width: 100%;
    justify-content: center;
    margin: 5px auto;
  }

  /* Badges em 1 coluna (ou 2 em telas um pouco maiores) */
  .heroBadges {
    grid-template-columns: 1fr;
  }

  @media (min-width: 520px) and (max-width: 820px) {
    .heroBadges {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Features: vira 1 coluna */
  .features {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-left: 2px;
    padding-right: 2px;
  }

  /* ---------- Section head ---------- */
  .sectionHead {
    padding: 16px 2px;
  }

  .sectionTitle {
    font-size: 16px;
  }

  .sectionHint {
    font-size: 12px;
  }

  /* ---------- Picks layout: 2 colunas -> 1 coluna ---------- */
  .contentTwoCol {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .topStatsGrid {
    grid-template-columns: 1fr;
  }

  /* Sidebar vai pra baixo, mas mantém spacing */
  .contentTwoCol .rightCol {
    gap: 12px;
  }

  /* ---------- Game cards ---------- */
  .games {
    gap: 14px;
  }

  .gameWideHead {
    padding: 12px 10px;
    gap: 10px;
    flex-wrap: nowrap;
  }

  /* Se existir área “time/status” dentro do header, não estoura */
  .gameWideHead * {
    min-width: 0;
  }

  /* Board: adiciona scroll horizontal seguro em telas muito estreitas */
  .board {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* Mantém a tabela legível: define um “mínimo” para não esmagar colunas */
  .boardInner,
  .boardHeader,
  .boardRow {
    min-width: 560px;
  }

  /* Linhas/colunas mais compactas */
  .boardHeader {
    padding: 10px 12px;
  }

  .boardRow {
    padding: 10px 12px;
  }

  .playerCell {
    font-size: 12.5px;
  }

  .cell {
    padding: 8px 10px;
  }

  .cellMain {
    font-size: 12.5px;
  }

  .cellMeta {
    font-size: 11px;
  }

  /* “Ver mais/menos” */
  .moreRowWide {
    padding: 10px 12px 14px;
  }

  .moreRowWide .btn.more {
    width: 100%;
    justify-content: center;
  }

  /* Mensagem de vazio */
  #empty {
    padding: 16px 12px;
  }

  /* ---------- Panels ---------- */
  .panelHead {
    padding: 12px 12px;
  }

  .panelBody {
    padding: 12px 12px;
  }

  /* ---------- Plans ---------- */
  .plansGrid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .plan {
    padding: 16px 14px;
  }

  .planPrice {
    font-size: 28px;
  }

  .planPrice span {
    font-size: 13px;
  }

  .plan .btn.full {
    width: 100%;
  }

  /* ---------- Footer ---------- */
  .footerInner {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .footerLinks {
    flex-wrap: wrap;
    gap: 10px;
  }

  .fineprint {
    font-size: 11.5px;
    line-height: 1.35;
  }

  /* ---------- Geral: reduz margens top/sections ---------- */
  .picks {
    margin-top: 12px;
  }

  .plans {
    margin-top: 14px;
  }

  .billingGate {
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
  }

  .billingText {
    font-size: 12.5px;
  }

  .cookieInner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .cookieActions {
    width: 100%;
    justify-content: flex-end;
  }

  .topbarRight {
    max-width: 100%;
    min-width: 0;
  }

  .userTopbar {
    max-width: 100%;
    padding: 6px 10px;
  }

  .userTopbar .welcome {
    max-width: 210px;
  }

  .tag {
    height: 30px;
    text-align: center;
  }

  .topStats .panel {
    max-height: 420px;

    /* ajuste fino */
  }

  .supportTopGrid {
    grid-template-columns: 1fr;
  }

  .picksMainGridV4 {
    grid-template-columns: 1fr;
  }

  .betsPanel {
    min-height: unset;
  }

  .waText {
    display: none;
  }

  .waFloat {
    padding: 12px;
  }
}