/* =============================================================
   ui-app.css — Fluxo em tela cheia, estilo aplicativo (X-Bom)
   -------------------------------------------------------------
   Carregado DEPOIS do ui.css. Só age no celular (até 640px);
   no computador tudo continua como card centralizado.

   O que muda: cada etapa (carrinho, checkout, produto, endereços,
   meus pedidos, login) deixa de ser uma "folha" flutuante e passa
   a ocupar a tela inteira, com:
     - cabeçalho fixo no topo, com o título sempre visível
     - conteúdo rolando só no meio
     - botão principal preso no rodapé, no alcance do polegar
     - fundo travado, sem a página escorregando por trás

   Para desfazer: remova a linha que carrega este arquivo (e o
   ui-app.js) do index.html. Nada mais depende dele.
   ============================================================= */

@media (max-width: 640px) {

  /* ---------------------------------------------------------
     1. A folha vira tela cheia
     --------------------------------------------------------- */
  .sheet.show{
    display: block;
    padding: 0;
    background: var(--bg, #faf9f7);
    backdrop-filter: none;
    animation: app-entra .26s cubic-bezier(.22,1,.36,1);
  }

  @keyframes app-entra{
    from{ opacity: .4; transform: translateX(16px); }
    to{ opacity: 1; transform: translateX(0); }
  }

  .sheet.show > .sheet-wrap{
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--bg, #faf9f7);

    display: flex;
    flex-direction: column;

    /* o padding sai do wrap e passa para o conteúdo, para o
       cabeçalho e o rodapé poderem encostar nas bordas */
    padding: 0;
    overflow: hidden;
    animation: none;
  }

  /* a alça de arrastar não faz sentido em tela cheia */
  .sheet.show > .sheet-wrap::before{
    display: none;
  }

  /* ---------------------------------------------------------
     2. Cabeçalho fixo
     O primeiro título (ou a linha que o contém) vira a barra.
     --------------------------------------------------------- */
  .sheet.show > .sheet-wrap > h2:first-of-type,
  .sheet.show > .sheet-wrap > div:first-child:has(> h2){
    flex: 0 0 auto;
    margin: 0;
    padding: 16px 56px 14px 18px;
    padding-top: calc(16px + env(safe-area-inset-top));
    background: #fff;
    border-bottom: 1px solid var(--linha, #e6e6ee);
    font-size: 18px;
    letter-spacing: -.2px;
    z-index: 3;
  }

  /* ---------------------------------------------------------
     3. Conteúdo — rola só ele
     Tudo que não é cabeçalho nem rodapé.
     --------------------------------------------------------- */
  .sheet.show > .sheet-wrap > *{
    flex: 0 0 auto;
  }

  #cart-sheet.show .sheet-wrap > #cart-sheet-list,
  #my-orders-sheet.show .sheet-wrap > #my-orders-list,
  #sheet.show .sheet-wrap > #order-form,
  #prod-sheet.show .sheet-wrap > div:not(:first-child),
  #prefill-sheet.show .sheet-wrap > .grid2{
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: none;
    padding: 16px 16px 0;
    margin: 0;
  }

  /* o formulário do checkout precisa de espaço embaixo para não
     ficar escondido atrás do rodapé fixo */
  #sheet.show .sheet-wrap > #order-form{
    padding-bottom: 8px;
  }

  /* textos auxiliares entre o título e a lista */
  .sheet.show > .sheet-wrap > p.muted,
  .sheet.show > .sheet-wrap > .muted{
    padding: 12px 18px 0;
    margin: 0;
  }

  .sheet.show > .sheet-wrap > hr,
  .sheet.show > .sheet-wrap > .muted:has(.total){
    padding-left: 18px;
    padding-right: 18px;
  }

  /* ---------------------------------------------------------
     4. Rodapé fixo com a ação principal
     --------------------------------------------------------- */
  #cart-sheet.show .sheet-wrap > div:last-child,
  #prefill-sheet.show .sheet-wrap > div:has(> #pf-save),
  #sheet.show #order-form > div:last-child{
    position: sticky;
    bottom: 0;
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    margin: 0;
    background: #fff;
    border-top: 1px solid var(--linha, #e6e6ee);
    box-shadow: 0 -6px 18px rgba(17,24,39,.06);
    z-index: 3;
  }

  #cart-sheet.show .sheet-wrap > div:last-child .btn,
  #prefill-sheet.show .sheet-wrap > div:has(> #pf-save) .btn,
  #sheet.show #order-form > div:last-child .btn{
    flex: 1;
    height: 52px;
    font-size: 15.5px;
    margin: 0;
  }

  /* o botão principal ganha mais peso que o secundário */
  #cart-sheet.show .sheet-wrap > div:last-child .btn-primary,
  #sheet.show #order-form > div:last-child .btn-primary{
    flex: 1.6;
  }

  /* detalhe do produto: os botões ficam dentro de uma div interna */
  #prod-sheet.show .sheet-wrap div:has(> #ps-confirm){
    position: sticky;
    bottom: 0;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255,255,255,0), #fff 24%);
    z-index: 3;
  }
  #prod-sheet.show .sheet-wrap div:has(> #ps-confirm) .btn{
    flex: 1;
    height: 50px;
  }

  /* ---------------------------------------------------------
     5. Botão de voltar no lugar do X
     --------------------------------------------------------- */
  .sheet.show .ui-x{
    top: calc(12px + env(safe-area-inset-top));
    right: 14px;
    width: 36px;
    height: 36px;
    font-size: 0;                 /* esconde o "×" original */
    background: var(--bg, #faf9f7);
  }
  .sheet.show .ui-x::before{
    content: "✕";
    font-size: 16px;
    font-weight: 800;
    color: #6b7280;
  }

  /* ---------------------------------------------------------
     6. Fundo travado (classe posta pelo ui-app.js)
     --------------------------------------------------------- */
  body.app-travado{
    position: fixed;
    width: 100%;
    overflow: hidden;
  }

  /* ---------------------------------------------------------
     7. Ajustes finos
     --------------------------------------------------------- */
  /* o resumo do checkout não precisa de sombra dentro da tela cheia */
  #sheet.show #checkout-summary{
    box-shadow: none !important;
  }

  /* a barra amarela de minimizar sobe acima do rodapé fixo */
  #min-barra{
    z-index: 70;
  }
}