/* ==========================================================================
   mobile.css — CLAUDE 2026-09-29 (pedido do Mauro: "o mais responsivo possível para celulares")
   Carregado DEPOIS do style.css em todas as páginas. Só age em telas de até 640px,
   então o site no computador não muda. Mesmo arquivo no lotericamarino e no akidasorte.
   Metas: nada de rolagem para o lado, alvos de toque com ~44px, texto com no mínimo 12px,
   campos com 16px (o iPhone não dá zoom sozinho ao tocar).
   ========================================================================== */

@media (max-width: 640px) {

  /* ---------- base ---------- */
  html, body { overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; padding-bottom: 84px; } /* espaço p/ o carrinho flutuante não cobrir o fim da página */
  .container { padding-left: 14px; padding-right: 14px; }
  section { padding: 1.6rem 0; }
  h1 { font-size: clamp(1.45rem, 6.4vw, 1.8rem); line-height: 1.2; }
  h2 { font-size: clamp(1.3rem, 5.8vw, 1.6rem); line-height: 1.25; }
  .section-sub { font-size: 0.95rem; line-height: 1.5; }
  input, select, textarea { font-size: 16px !important; }
  button, a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08); }
  img, video, iframe, table { max-width: 100%; }

  /* ---------- cabeçalho ---------- */
  .header-content { flex-direction: row !important; align-items: center; gap: 8px !important; min-height: 60px; }
  .header .logo img { height: 32px; width: auto; }
  .menu-toggle { width: 44px; height: 44px; font-size: 1.5rem; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
  .header-actions .btn-whatsapp { padding: 0 14px !important; min-height: 44px; display: inline-flex; align-items: center; font-size: 0.9rem !important; white-space: nowrap; }

  /* menu lateral */
  .nav-drawer-content { width: min(86vw, 320px); }
  .nav-drawer-nav a { display: block; padding: 14px 18px; font-size: 1.05rem; min-height: 48px; }
  .nav-drawer-close { width: 44px; height: 44px; font-size: 1.8rem; }

  /* ---------- faixa de loterias (pills) ---------- */
  .pills-arrow { display: none !important; }                 /* no celular rola com o dedo */
  .pills-col { padding-left: 0 !important; padding-right: 0 !important; flex: 1 1 auto !important; }
  /* centralizar conteúdo maior que a tela empurra o começo para fora (1º item cortado e inalcançável) */
  #pills-bar, .pills-col, .pills-row, .pills-group, .pills-group-items { justify-content: flex-start !important; }
  .pills-col { align-items: flex-start !important; }
  #pills-bar { padding-left: 14px !important; padding-right: 14px !important; }
  .pills-row, .pills-col, #pills-bar { scroll-snap-type: x proximity; }
  .pill-stack { scroll-snap-align: start; }
  .pill { min-width: 104px !important; }
  .pill-name { min-height: 36px; display: flex !important; align-items: center; justify-content: center; font-size: 0.85rem !important; padding: 0.35rem 0.6rem !important; }
  .pill-value { min-height: 24px; display: flex !important; align-items: center; justify-content: center; font-size: 0.72rem !important; }
  .pills-bracket-label, .pills-label { font-size: 0.72rem !important; }

  /* ---------- banner (carrossel) ---------- */
  .carousel-track { min-height: 170px !important; aspect-ratio: auto !important; }
  .banner-carousel .carousel-slide .slide-content { padding: 1rem 3.3rem 1.9rem !important; }
  .banner-carousel .carousel-slide .slide-badge { display: none !important; } /* o selo não cabe junto com o título na tela do celular */
  .banner-carousel .carousel-slide .slide-title { font-size: clamp(1.2rem, 5.6vw, 1.55rem) !important; line-height: 1.18 !important; margin: 0.3rem 0 !important; }
  .banner-carousel .carousel-slide .slide-subtitle { font-size: 0.9rem !important; line-height: 1.35; }
  .carousel-arrow { width: 38px !important; height: 38px !important; font-size: 0.85rem !important; opacity: 0.85; }
  .carousel-arrow.prev { left: 6px !important; }
  .carousel-arrow.next { right: 6px !important; }
  .carousel-dots { bottom: 8px !important; left: 0 !important; right: 0 !important; transform: none !important; justify-content: center !important; }
  .carousel-dot { width: 10px !important; height: 10px !important; }

  /* ---------- filtros dos bolões: uma linha que rola com o dedo ---------- */
  .boloes-filters {
    flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: 8px !important; margin: 0.9rem -14px 1rem !important; padding: 2px 14px 6px;
    justify-content: flex-start !important;
  }
  .boloes-filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex: 0 0 auto; min-height: 40px; padding: 0 16px !important; font-size: 0.9rem !important; border-radius: 999px !important; white-space: nowrap; }

  /* ---------- cards de bolão (2 por linha, mais legíveis) ---------- */
  .boloes-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .caixa-banner { padding: 8px 10px !important; gap: 8px !important; }
  .caixa-logo { width: 28px !important; height: 28px !important; flex: 0 0 28px; }
  .caixa-logo .trevo-icon { font-size: 17px !important; }
  .caixa-titulo { font-size: 0.92rem !important; text-transform: none !important; line-height: 1.15; }
  .caixa-body { padding: 10px 8px 12px !important; gap: 4px !important; }
  .caixa-premio-valor { font-size: clamp(0.92rem, 4.1vw, 1.1rem) !important; white-space: nowrap; letter-spacing: -0.01em; }
  .caixa-premio-curto { font-size: 0.8rem !important; }
  .caixa-premio-sub { font-size: 0.75rem !important; text-align: center; line-height: 1.3; }
  .caixa-apostas, .caixa-cotas, .caixa-codigo { font-size: 0.8rem !important; text-align: center; line-height: 1.35; }
  .caixa-detalhes { min-height: 36px; padding: 0 14px !important; font-size: 0.85rem !important; }
  .caixa-preco-valor { font-size: 1.35rem !important; }
  .caixa-stepper { gap: 6px !important; }
  .caixa-step-btn { width: 38px !important; height: 38px !important; font-size: 1.2rem !important; }
  .caixa-step-input { width: 48px !important; height: 38px !important; }
  .caixa-step-label { font-size: 0.72rem !important; }
  .caixa-sorteio { font-size: 0.75rem !important; line-height: 1.35; }
  .caixa-cta-row { flex-direction: column; gap: 6px !important; }
  .caixa-cta-row .caixa-cta, .caixa-cta { min-height: 42px; font-size: 0.85rem !important; padding: 0 8px !important; justify-content: center; align-items: center; }

  /* telas bem estreitas (celulares pequenos): 1 card por linha */
  @media (max-width: 339px) {
    .boloes-grid { grid-template-columns: 1fr !important; }
  }

  /* ---------- detalhe do bolão (janela) ---------- */
  .caixa-modal { width: calc(100vw - 20px) !important; max-width: 480px !important; max-height: calc(100dvh - 24px) !important; border-radius: 14px !important; }
  .caixa-modal-header { border-radius: 14px 14px 0 0 !important; position: sticky; top: 0; z-index: 2; }
  .caixa-modal-title { text-transform: none !important; }
  .caixa-modal-close { width: 44px; height: 44px; font-size: 1.8rem !important; }
  .caixa-modal-body { padding: 16px 16px 6px !important; }
  .caixa-modal-premio { font-size: 1.8rem !important; }
  .caixa-modal-step { width: 40px !important; height: 40px !important; }
  #caixa-modal-qty { height: 40px !important; }
  .caixa-modal-cta { min-height: 46px; min-width: 0 !important; width: 100%; }
  .caixa-modal-hint, .caixa-modal-arred { font-size: 0.8rem !important; }

  /* ---------- carrinho ---------- */
  .cart-fab { width: 54px !important; height: 54px !important; right: 14px !important; bottom: calc(14px + env(safe-area-inset-bottom)) !important; }
  .cart-drawer { width: 100vw !important; max-width: 100vw !important; }
  .cart-close-btn, #cart-close { width: 44px; height: 44px; font-size: 1.8rem; }
  .cart-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; }
  .cart-footer .btn, .cart-footer button, .cart-footer a { min-height: 46px; }
  .cart-toast { left: 14px !important; right: 14px !important; top: calc(12px + env(safe-area-inset-top)) !important; bottom: auto !important; transform: none !important; text-align: center; } /* no topo: não cobre total nem "Finalizar Compra" */

  /* ---------- resultados ---------- */
  .lottery-cards { grid-template-columns: 1fr !important; gap: 12px !important; }
  .lottery-card { padding: 14px 16px !important; }
  .lottery-card h3 { font-size: 1.05rem !important; }
  .lottery-prize { font-size: 1.2rem !important; }

  /* ---------- estatísticas ---------- */
  .stats-grid { grid-template-columns: 1fr !important; }
  small { font-size: 0.75rem; }
  .stats-refresh-btn, #stats-refresh { min-height: 44px; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- botões em geral ---------- */
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .surpresinha-form { flex-direction: column; align-items: stretch; gap: 10px; }
  .surpresinha-form select, .surpresinha-form .btn { width: 100%; min-height: 48px; }

  /* ---------- rodapé ---------- */
  .footer { padding-bottom: 1.2rem; }
  .footer a { display: inline-block; padding: 6px 2px; }
  .whatsapp-float { right: 14px !important; bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
}