/* RENDIX PAY — MOBILE PREMIUM CSS
   Desktop (≥1024px): nada muda.
   Mobile (<1024px): layout de app bancário. */

@media (max-width: 1023px) {

  /* Sidebar some */
  aside { display: none !important; }

  /* Header full width */
  header.fixed {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 60px !important;
    padding: 0 16px !important;
  }

  /* Main content — remove margem da sidebar, ajusta topo e fundo */
  main {
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding-top: 90px !important;
    padding-bottom: 84px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Qualquer div wrapper com ml-64 */
  [class*="ml-64"] {
    margin-left: 0 !important;
  }
  [class*="pl-64"] {
    padding-left: 0 !important;
  }
  [class*="pt-24"] {
    padding-top: 68px !important;
    padding-bottom: 80px !important;
  }
  [class*="mt-20"] {
    margin-top: 0 !important;
  }

  /* Padding lateral padrão */
  [class*="px-gutter"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  [class*="p-gutter"] {
    padding: 16px !important;
  }

  /* Bottom Nav */
  #mobile-nav {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 62px;
    background: rgba(13,13,13,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.06);
    z-index: 9999;
    align-items: center;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  #mobile-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    color: #555;
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    padding: 8px 4px;
    min-height: 52px;
    transition: color 0.2s;
    letter-spacing: 0.02em;
  }

  #mobile-nav a .material-symbols-outlined {
    font-size: 22px !important;
  }

  #mobile-nav a.mnav-active {
    color: #65dbb2 !important;
  }

  /* Sem scroll horizontal */
  body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Inputs não dão zoom no iOS */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Reduzir espaços entre seções no mobile */
  [class*="space-y-stack-lg"] > * + * {
    margin-top: 16px !important;
  }
  [class*="space-y-stack"] > * + * {
    margin-top: 12px !important;
  }
  /* Card de banco privado — menor no mobile */
  .h-48 {
    height: auto !important;
    min-height: 120px !important;
  }
  /* Touch targets */
  button { min-height: 44px; }

  /* Cards em grid: 2 colunas no mobile, 1 em tela muito pequena */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 479px) {
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Desktop: ocultar bottom nav */
@media (min-width: 1024px) {
  #mobile-nav { display: none !important; }
}

/* ── Correções específicas pix/enviar/receber/extrato/conta ── */
@media (max-width: 1023px) {

  /* pt-32 interno → padding correto no mobile */
  [class*="pt-32"] {
    padding-top: 80px !important;
  }

  /* pb-12 interno → espaço para bottom nav */
  [class*="pb-12"] {
    padding-bottom: 84px !important;
  }

  /* grid-cols-12 → coluna única no mobile */
  [class*="grid-cols-12"] {
    grid-template-columns: 1fr !important;
  }

  /* grid-cols-2 interno → manter 2 colunas mas menor */
  [class*="gap-gutter"] {
    gap: 10px !important;
  }

  /* max-w-7xl → sem limitação no mobile */
  [class*="max-w-7xl"] {
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* px-gutter dentro do main → padding lateral correto */
  main [class*="px-gutter"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

@media (max-width: 1023px) {
  /* Formulários PIX/Enviar — 1 coluna no mobile */
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* Inputs full width */
  input[class*="w-full"], select[class*="w-full"] {
    width: 100% !important;
  }

  /* Corrigir saldo cortado — aumentar pt das páginas com header interno */
  main[class*="relative"] > div[class*="pt-32"] {
    padding-top: 88px !important;
  }
}

/* ── FIX DEFINITIVO CORTE TOPO/FUNDO ── */
@media (max-width: 1023px) {
  /* Dashboard main */
  main.ml-64 {
    margin-left: 0 !important;
    padding-top: 100px !important;
    padding-bottom: 90px !important;
  }

  /* Páginas pix/enviar/receber — div interno com pt-32 */
  div.pt-32 {
    padding-top: 100px !important;
  }
  div.pb-12 {
    padding-bottom: 90px !important;
  }

  /* Botão flutuante de chat — subir acima do bottom nav */
  a[href*="wa.me"], button[id*="chat"], button[id*="suporte"],
  div[id*="fab"], a[id*="fab"],
  [style*="position:fixed"][style*="bottom"] {
    bottom: 80px !important;
  }
}

@media (max-width: 1023px) {
  .mobile-fab {
    bottom: 80px !important;
    right: 16px !important;
  }
}

@media (max-width: 1023px) {
  /* Card de perfil — empilhar foto e texto verticalmente */
  .glass-card.rounded-2xl.p-8.flex.items-center.gap-8 {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px !important;
    gap: 16px !important;
  }

  /* Nome e email — não cortar */
  #conta-nome {
    font-size: 1.2rem !important;
    word-break: break-word !important;
  }

  /* Email e badges — wrap */
  .flex.gap-3 {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Grid de seções da conta — 1 coluna */
  .grid.grid-cols-1.md\:grid-cols-2.gap-6 {
    grid-template-columns: 1fr !important;
  }
}


@media (max-width: 1023px) {
  .mobile-logout-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,80,80,0.1);
    border: 1px solid rgba(255,80,80,0.2);
    color: #ff6b6b;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
  }
  .mobile-logout-btn:hover { background: rgba(255,80,80,0.2); }
  .mobile-logout-btn .material-symbols-outlined { font-size: 20px !important; }
}
@media (min-width: 1024px) {
  .mobile-logout-btn { display: none !important; }
}
@media (max-width: 1023px) {
  /* Ocultar botão de apps no mobile — libera espaço pro logout */
  .btn-apps { display: none !important; }
  
  /* Garantir que o logout fique visível no flex */
  .mobile-logout-btn {
    display: flex !important;
    flex-shrink: 0;
  }
}


@media (max-width: 1023px) {
  .btn-apps { display: flex !important; }
}

/* Ocultar robô Spline no mobile */
@media (max-width: 1023px) {
  #spline-robot-wrapper { display: none !important; }
}

/* ── Landing page nav — botões cabem sem quebrar linha ── */
@media (max-width: 1023px) {
  nav .flex.items-center.gap-stack-sm {
    gap: 6px !important;
  }
  nav .flex.items-center.gap-stack-sm button:first-child {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  nav .flex.items-center.gap-stack-sm button:last-child {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}

/* ── Receber PIX — layout mobile ── */
@media (max-width: 1023px) {
  /* Grid vira coluna única */
  #receber-form ~ div,
  .grid.grid-cols-12 {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .col-span-8,
  .col-span-4 {
    width: 100% !important;
    grid-column: span 12 !important;
  }
  /* Sticky lateral some no mobile */
  .col-span-4.sticky {
    position: static !important;
  }
  /* Formulário: campos empilhados */
  #receber-form .grid.grid-cols-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  /* Botão Gerar full width */
  #rec-btn {
    width: 100% !important;
    padding: 16px !important;
    font-size: 16px !important;
  }
  /* QR Code centralizado e grande */
  #rec-qr-area {
    padding: 16px 0 !important;
  }
  #rec-qr-img img {
    width: 240px !important;
    height: 240px !important;
  }
  /* PIX copia e cola: input + botão em coluna */
  #rec-qr-area .flex.gap-2 {
    flex-direction: column !important;
    gap: 10px !important;
  }
  #rec-copia-cola {
    width: 100% !important;
    font-size: 12px !important;
    word-break: break-all !important;
  }
  #rec-qr-area .flex.gap-2 button {
    width: 100% !important;
    padding: 14px !important;
    font-size: 15px !important;
  }
  /* Glass panel padding menor no mobile */
  .glass-panel.p-8 {
    padding: 20px 16px !important;
  }
}