/* ============================================================
   z_plans_modal_fix.css — Modal "Planos" (#modal-plans)
   MOBILE (Android + iOS) — padrão dos Modais 1–5

   Objetivo:
   - Eliminar overflow (principalmente no mobile)
   - Popup ocupar área útil (safe-area) e ficar próximo do topo
   - Scroll somente dentro do modal (body), nunca na página
   - Não alterar layout WEB (escopo: max-width 768px e #modal-plans)
============================================================ */

@media (max-width: 768px){

  /* Evita “puxar” a página para os lados quando o modal abre */
  html, body{
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Modal: ocupa a tela inteira */
  #modal-plans{
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
    z-index: 2000 !important; /* acima da home */
  }

  /* Mata o centrado vertical do Bootstrap (centered=True) no mobile */
  #modal-plans .modal-dialog.modal-dialog-centered{
    align-items: flex-start !important;
    min-height: 0 !important;
  }

  /* Dialog: quase full screen, respeitando safe-area */
  #modal-plans .modal-dialog{
    width: 96vw !important;
    max-width: 96vw !important;

    margin: calc(env(safe-area-inset-top, 0px) + 4px) auto calc(env(safe-area-inset-bottom, 0px) + 4px) auto !important;

    height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 8px) !important;
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 8px) !important;

    box-sizing: border-box !important;
  }

  #modal-plans .modal-content{
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important; /* scroll fica no body */
    box-sizing: border-box !important;
  }

  /* Body do modal: rolagem vertical, sem overflow horizontal */
  #modal-plans .modal-body{
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    padding: 16px 12px 18px 12px !important;
    box-sizing: border-box !important;
  }

  /* Garante que o botão Fechar fique visível e clicável */
  #modal-plans #close-plans{
    position: sticky !important;
    top: 8px !important;
    margin-left: auto !important;
    z-index: 10 !important;
  }

  /* Conteúdo interno: nunca estoura a largura do modal */
  #modal-plans *{
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* Caixa que limita a largura no desktop (520px):
     no mobile fica quase full-width para evitar “overflow/espremido”. */
  #modal-plans .modal-body > div[style*="maxWidth: 520px"],
  #modal-plans .modal-body > div[style*="max-width: 520px"]{
    max-width: 96vw !important;
    width: 96vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Botões dentro do modal: evitar quebrar/estourar */
  #modal-plans a,
  #modal-plans button{
    max-width: 100% !important;
  }

  /* Android: sobe ainda mais (sem safe-area) */
  @supports not (-webkit-touch-callout: none){
    #modal-plans .modal-dialog{
      margin-top: 4px !important;
    }
  }
}
/* ============================================================
   PATCH FINAL — Modal Planos (#modal-plans)
   - Corrige overflow/largura no viewport
   - “Fechar” fixo no canto superior direito
============================================================ */
@media (max-width: 768px){

  /* 1) Evita qualquer overflow horizontal do modal */
  #modal-plans,
  #modal-plans .modal-dialog,
  #modal-plans .modal-content,
  #modal-plans .modal-body{
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* 2) Largura REAL do popup (mais estreito e sem estourar)
     - Usa 92vw e desconta safe-area lateral (iPhone com notch/lateral)
  */
  #modal-plans .modal-dialog{
    width: calc(92vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    max-width: calc(92vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 3) Body vira “contexto” pro botão ficar absoluto */
  #modal-plans .modal-body{
    position: relative !important;
    padding-top: 46px !important; /* cria espaço pro botão no topo */
  }

  /* 4) Botão Fechar: sempre no canto superior direito */
  #modal-plans #close-plans{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;

    margin: 0 !important;
    z-index: 9999 !important;
  }
}
/* ============================================================
   PATCH — Modal Planos (#modal-plans)
   - Título "Planos" centralizado e acima das caixas
   - Caixas centralizadas e sem corte lateral (remove overflow residual)
   - Botão "Gerenciar Assinatura" centralizado
============================================================ */
@media (max-width: 768px){

  /* Segurança extra contra overflow lateral */
  #modal-plans,
  #modal-plans .modal-dialog,
  #modal-plans .modal-content,
  #modal-plans .modal-body{
    overflow-x: hidden !important;
  }

  /* Um pouco mais estreito + padding interno => some o corte da direita */
  #modal-plans .modal-dialog{
    width: calc(90vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    max-width: calc(90vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
  }

  /* Centraliza TUDO dentro do body e evita que algum elemento "puxe" para a direita */
  #modal-plans .modal-body{
    padding-left: 12px !important;
    padding-right: 12px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* 1) Título "Planos" centralizado (independente se for h3/h4/h5) */
  #modal-plans .modal-body > h1,
  #modal-plans .modal-body > h2,
  #modal-plans .modal-body > h3,
  #modal-plans .modal-body > h4,
  #modal-plans .modal-body > h5{
    width: 100% !important;
    text-align: center !important;
    margin: 6px auto 12px auto !important;
  }

  /* 2) Caixas (cards/divs) centralizadas e com largura correta */
  #modal-plans .modal-body > *{
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Garante que as caixas/textos não estorem e fiquem no centro */
  #modal-plans .modal-body .card,
  #modal-plans .modal-body .dbc-card,
  #modal-plans .modal-body [class*="card"],
  #modal-plans .modal-body > div{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 3) Botão "Gerenciar Assinatura" centralizado (serve para <button> e <a>) */
  #modal-plans .modal-body button,
  #modal-plans .modal-body a{
    display: inline-flex !important;
    justify-content: center !important;
  }

  /* Se o botão estiver sozinho na linha, centraliza com margin auto */
  #modal-plans .modal-body button,
  #modal-plans .modal-body a.btn{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* ============================================================
   PATCH FINO — Modal Planos (#modal-plans)
   Objetivo: revelar a borda direita das caixas (sem alterar layout geral)
============================================================ */
@media (max-width: 768px){

  /* Aumenta levemente o padding direito do body do modal */
  #modal-plans .modal-body{
    padding-right: 18px !important;  /* antes estava ~12px */
  }

  /* Como segurança, puxa as caixas 2px para a esquerda */
  #modal-plans .modal-body .card,
  #modal-plans .modal-body .dbc-card,
  #modal-plans .modal-body [class*="card"],
  #modal-plans .modal-body > div{
    margin-right: 2px !important;
  }
}
/* ============================================================
   PATCH — Modal Planos (#modal-plans)
   - Remove overflow real (causado pelos 2 boxes em linha)
   - Centraliza título + boxes
   - Aumenta APENAS o botão "Gerenciar assinatura" (#btn-customer-portal)
============================================================ */
@media (max-width: 768px){

  /* Segurança contra overflow lateral */
  #modal-plans,
  #modal-plans .modal-dialog,
  #modal-plans .modal-content,
  #modal-plans .modal-body{
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Um pouco mais estreito para evitar corte de 1–2px em alguns aparelhos */
  #modal-plans .modal-dialog{
    width: calc(86vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    max-width: calc(86vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Título "Planos" sempre central */
  #modal-plans .modal-body h3{
    width: 100% !important;
    text-align: center !important;
    margin: 6px 0 12px 0 !important;
  }

  /* 🔥 O FIX do corte:
     O container dos 2 boxes está em flex "space-between" no Python.
     No mobile, transforma em COLUNA (um box embaixo do outro). */
  #modal-plans .modal-body div[style*="justify-content: space-between"]{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Cada box ocupa 100% da largura útil, sem “puxar” pro lado direito */
  #modal-plans .modal-body div[style*="justify-content: space-between"] > div{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* Container limitador (maxWidth 520px no Python): no mobile vira 100% */
  #modal-plans .modal-body > div[style*="maxWidth: 520px"],
  #modal-plans .modal-body > div[style*="max-width: 520px"]{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Botão "Gerenciar assinatura": só ele mais alto */
  #modal-plans #btn-customer-portal{
    min-height: 48px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    line-height: 1.2 !important;
  }
}