/* ============================================================
   PedeVai - Estilos EXCLUSIVOS de desktop (tela >= 992px)

   Carregado no header.php via:
       <link rel="stylesheet" media="(min-width:992px)" href="desktop.css">

   Duas garantias:
   1) O navegador SO aplica este arquivo quando a largura >= 992px.
      Celular e tablet retrato (< 992px) NUNCA usam nada daqui.
   2) Ele e carregado DEPOIS do style.css, entao vence os empates de
      especificidade contra as regras de desktop antigas que estao
      dentro do style.css. Por isso a moldura aplica por cima do
      layout largo antigo.

   Este e o lugar para mexer no visual de DESKTOP sem risco pro mobile.

   ESCOPO: HOME + tudo que o CLIENTE ve (page-home / page-cliente-* /
   qualquer pagina com data-user-tipo="cliente", ex: notificacoes).
   NAO toca admin, lojista nem motoboy.
   ============================================================ */

/* ============================================================
   1) MOLDURA "app" centralizada
   ============================================================ */

/* Fundo mais escuro nas laterais pra coluna central "descolar" */
body.page-home,
body[class*="page-cliente"],
body[data-user-tipo="cliente"] {
    background: #d8dbe0;
}

/* A coluna central vira a "tela" do app, com sombra em volta */
body.page-home .app-container,
body[class*="page-cliente"] .app-container,
body[data-user-tipo="cliente"] .app-container {
    max-width: 540px !important;
    padding: 16px !important;
    background: #f5f5f5;
    min-height: 100vh;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 10px 45px rgba(0,0,0,0.14);
}

/* Zera limites internos que o layout largo antigo aplicava em blocos soltos */
body.page-home .home-container > .loja-card,
body.page-home .home-container > .home-indicar-loja,
body.page-home .home-container > h5,
body.page-home .home-container > h6,
body.page-home .home-container > .alert,
body.page-home .home-container > .text-center {
    max-width: none !important;
}

/* Topo (navbar publica OU logada) confinado a coluna = topo da moldura */
body.page-home .navbar.sticky-top,
body[class*="page-cliente"] .navbar.sticky-top,
body[data-user-tipo="cliente"] .navbar.sticky-top {
    left: 0 !important;
    right: 0 !important;
    max-width: 540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.14);
}

body.page-home .navbar.sticky-top .container-fluid,
body[class*="page-cliente"] .navbar.sticky-top .container-fluid,
body[data-user-tipo="cliente"] .navbar.sticky-top .container-fluid {
    max-width: 540px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* Barra inferior confinada e centralizada sobre a coluna */
body.page-home .app-bottom-nav,
body[class*="page-cliente"] .app-bottom-nav,
body[data-user-tipo="cliente"] .app-bottom-nav {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 540px !important;
    border-radius: 16px 16px 0 0 !important;
    border-top: 1px solid #eee !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.10) !important;
}

body.page-home .app-bottom-nav .app-bottom-nav-inner,
body[class*="page-cliente"] .app-bottom-nav .app-bottom-nav-inner,
body[data-user-tipo="cliente"] .app-bottom-nav .app-bottom-nav-inner {
    max-width: 540px !important;
    justify-content: space-around !important;
}

/* Rodape Facilita confinado a coluna, integrado a moldura */
body.page-home footer,
body.page-home .facilita-footer,
body[class*="page-cliente"] footer,
body[class*="page-cliente"] .facilita-footer,
body[data-user-tipo="cliente"] footer,
body[data-user-tipo="cliente"] .facilita-footer {
    left: 0 !important;
    right: 0 !important;
    max-width: 540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
}

/* ============================================================
   2) GRIDS de 2 colunas -> 1 coluna
   (dentro da moldura de 540px o layout de 2 colunas nao cabe;
   a coluna lateral desce pro final, igual no celular)
   ============================================================ */
body[class*="page-cliente"] .loja-content-grid,
body[class*="page-cliente"] .loja-content-grid-full,
body[class*="page-cliente"] .cliente-pedido-grid,
body[class*="page-cliente"] .cliente-perfil-grid,
body[class*="page-cliente"] .cliente-pontos-grid,
body[class*="page-cliente"] .cliente-pedidos-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

/* Paineis laterais deixam de ser "sticky" (nao faz sentido em 1 coluna) */
body[class*="page-cliente"] .loja-reviews-panel,
body[class*="page-cliente"] .cliente-pedido-side,
body[class*="page-cliente"] .cliente-perfil-side,
body[class*="page-cliente"] .cliente-pontos-side {
    position: static !important;
    top: auto !important;
}

/* ============================================================
   3) BOTTOM-SHEETS da loja (detalhe do produto / carrinho)

   .modal-dialog-end (style.css) usa "margin: 0", o que anula a
   centralizacao automatica do Bootstrap (margin: ... auto). No
   celular isso nao aparece porque o modal e fullscreen; no desktop
   o painel colava na borda ESQUERDA da tela.
   Aqui ele volta a centralizar, alinhado com a coluna de 540px.
   ============================================================ */
body[class*="page-cliente"] .modal-dialog-end,
body[data-user-tipo="cliente"] .modal-dialog-end {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 540px !important;
}