/* ═══════════════════════════════════════════════════════════════════════
   PWA — barra de atualização, cards de convite, folha de instalação do iOS
   e aviso de offline.
   ═══════════════════════════════════════════════════════════════════════

   Arquivo SEPARADO do design-system.css de propósito: aquele tem 2.500
   linhas de história e nomes genéricos já ocupados (`.sheet` colidiu uma
   vez e a folha nasceu fora da tela). Tudo aqui é prefixado `pwa-`, que foi
   conferido e não existe lá.

   Andares de z-index deste site, pra estas peças não brigarem:
     999   barra inferior      2000/3000  overlays e jogo      9000  toast
   Os cards ficam em 2500 (acima da barra, abaixo do jogo) e a folha do iOS
   em 3500 — ela precisa ser alcançável de qualquer lugar, inclusive de
   dentro do jogo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Barra "nova versão disponível" ──────────────────────────────────── */
.pwa-update {
  position: fixed; z-index: 2500;
  left: 12px; right: 12px;
  /* Encosta ACIMA da barra inferior (65px) e ainda respeita o indicador do
     iPhone. `calc` com env() em vez de número fixo: no iPhone sem notch o
     env() vale 0 e a conta continua certa. */
  bottom: calc(78px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-modal, #201e20);
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  color: var(--text-primary, #fff);
  transform: translateY(140%); opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}
.pwa-update.is-open { transform: translateY(0); opacity: 1; }
.pwa-update-txt { flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 600; }
.pwa-update-btn {
  flex-shrink: 0;
  min-height: 44px; padding: 0 18px;
  background: var(--color-red, #cd0035); color: #fff;
  border: 0; border-radius: var(--radius-md, 8px);
  font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pwa-update-btn:disabled { opacity: 0.7; cursor: default; }

@media (min-width: 1025px) {
  /* No desktop não existe barra inferior — a conta de 78px sobraria. */
  .pwa-update { left: auto; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); max-width: 380px; }
}

/* ── Cards de convite (push / instalar) ──────────────────────────────── */
.pwa-card {
  position: fixed; z-index: 2500;
  left: 12px; right: 12px;
  bottom: calc(78px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'ico txt' 'acoes acoes';
  gap: 12px;
  padding: 16px;
  background: var(--bg-modal, #201e20);
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: var(--radius-xl, 16px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.7);
  transform: translateY(140%); opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.pwa-card.is-open { transform: translateY(0); opacity: 1; }

.pwa-card-ico {
  grid-area: ico;
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(205,0,53,0.14); color: var(--color-red, #cd0035);
}
.pwa-card-txt { grid-area: txt; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pwa-card-txt strong { font-size: 0.98rem; font-weight: 800; color: var(--text-primary, #fff); }
.pwa-card-txt span   { font-size: 0.82rem; line-height: 1.45; color: var(--text-secondary, #a0a0a0); }

.pwa-card-acoes { grid-area: acoes; display: flex; gap: 10px; margin-top: 2px; }
.pwa-card-sim, .pwa-card-nao {
  flex: 1; min-width: 0;
  /* 48px: acima dos 44 do guia, porque é o alvo mais decisivo do card. */
  min-height: 48px; padding: 0 16px;
  border-radius: var(--radius-md, 8px);
  font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pwa-card-sim { background: var(--color-red, #cd0035); color: #fff; border: 0; }
.pwa-card-sim:active { background: var(--color-red-dark, #a4002a); }
.pwa-card-nao {
  background: transparent; color: var(--text-secondary, #a0a0a0);
  border: 1px solid var(--border-color, rgba(255,255,255,0.12));
}

@media (min-width: 1025px) {
  .pwa-card { left: auto; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); width: 380px; }
}

/* ── Folha de instalação do iPhone ───────────────────────────────────── */
.pwa-folha {
  position: fixed; z-index: 3500; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.pwa-folha.is-open { opacity: 1; pointer-events: auto; }

.pwa-folha-painel {
  position: relative;
  width: 100%; max-width: 520px;
  /* `max-height` + rolagem própria: em iPhone SE deitado a folha passaria
     da tela e os passos finais ficariam inalcançáveis. */
  max-height: 86vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-modal, #201e20);
  border-radius: 20px 20px 0 0;
  padding: 10px 20px calc(28px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .28s ease;
}
.pwa-folha.is-open .pwa-folha-painel { transform: translateY(0); }

.pwa-folha-grip {
  width: 40px; height: 4px; margin: 0 auto 14px;
  border-radius: 999px; background: rgba(255,255,255,0.22);
}
.pwa-folha-x {
  position: absolute; top: 10px; right: 12px;
  /* 44x44 de área com desenho de 20px dentro: o alvo é confortável sem o
     botão ficar visualmente pesado. */
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--text-secondary, #a0a0a0);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pwa-folha-titulo { margin: 4px 0 6px; font-size: 1.15rem; font-weight: 800; color: var(--text-primary, #fff); }
.pwa-folha-sub    { margin: 0 0 18px; font-size: 0.86rem; line-height: 1.5; color: var(--text-secondary, #a0a0a0); }

.pwa-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pwa-passo {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card, #242224);
  border-radius: var(--radius-lg, 12px);
  color: var(--text-primary, #fff); font-size: 0.9rem; line-height: 1.4;
}
.pwa-passo-n {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-red, #cd0035); color: #fff;
  font-size: 0.78rem; font-weight: 800;
}
.pwa-passo-txt { flex: 1; min-width: 0; }
.pwa-passo svg { flex-shrink: 0; color: var(--text-secondary, #a0a0a0); }

/* ── Aviso de offline ────────────────────────────────────────────────── */
.pwa-offline {
  position: fixed; z-index: 8000;
  top: 0; left: 0; right: 0;
  padding: 8px 14px;
  padding-top: calc(8px + env(safe-area-inset-top));
  background: #7b0020; color: #fff;
  font-size: 0.8rem; font-weight: 600; text-align: center;
  transform: translateY(-100%);
  transition: transform .25s ease;
}
.pwa-offline.is-open { transform: translateY(0); }

/* O header é sticky no topo: sem empurrá-lo, o aviso cobriria o saldo e o
   botão Depositar justamente quando eles não podem ser confiados. */
.pwa-offline-on .site-header { margin-top: 34px; }

/* ── Teclado aberto ──────────────────────────────────────────────────
   No iOS a barra fixa NÃO acompanha o teclado: ela fica ancorada no
   viewport de layout e acaba flutuando por cima do formulário. Sumir com
   ela enquanto se digita resolve isso e ainda devolve 65px de altura útil
   na hora em que mais falta espaço. O `!important` é necessário porque as
   regras de largura do design-system declaram `display: block` na barra e
   têm a mesma especificidade desta. */
.pwa-teclado .mobile-bar { display: none !important; }

/* Os cards de convite também saem: card pedindo notificação por cima de um
   formulário de saque é interrupção na pior hora possível. */
.pwa-teclado .pwa-card,
.pwa-teclado .pwa-update { display: none; }

/* ── Item do menu quando as notificações estão ligadas ───────────────── */
.sheet-link.is-on { color: var(--color-green, #22c55e); }

/* ── Redução de movimento ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pwa-update, .pwa-card, .pwa-folha, .pwa-folha-painel, .pwa-offline { transition: none; }
}