/* ============================================================
   FALCONTEC ANGOLA — CAMADA "APP MOBILE"
   Carregado POR ÚLTIMO (só overrides). Desktop intocado:
   tudo o que muda aqui vive dentro de @media ≤900/≤720/≤560.
   Efeito: o site em telemóvel comporta-se como um app nativo —
   tab bar inferior, instalável (PWA), safe-areas do notch/home
   indicator e gestos tácteis sem atraso/realce estranho.

   Classes novas: .app-tabbar / .app-tab / .app-tab-ico
   ============================================================ */

/* ---------------- Tab bar inferior (app shell) ----------------
   Desktop: nunca aparece (fora do tab order via display:none). */
.app-tabbar { display: none; }

/* ---------------- Toque nativo (só ecrãs tácteis) ---------------- */
@media (max-width: 900px) {
  html { overscroll-behavior-y: none; }

  a, button, .app-tab, .catalogo-chip, .produto-card {
    -webkit-tap-highlight-color: transparent;
  }
  a, button, .app-tab { touch-action: manipulation; }

  /* ---------------- Tab bar inferior: fixa, blur, 4 abas ---------------- */
  .app-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(10, 10, 12, 0.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--borda);
    box-shadow: 0 -10px 30px -20px rgba(0, 0, 0, 0.85);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .app-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 54px;
    padding: 6px 2px 5px;
    color: var(--texto);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.15px;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    transition: color 0.18s;
  }
  .app-tab:active { background: rgba(255, 255, 255, 0.05); }
  .app-tab-ico { width: 23px; height: 23px; flex: 0 0 auto; }
  .app-tab span { line-height: 1; white-space: nowrap; }
  .app-tab.ativo { color: var(--ouro-claro); }
  /* sotaque "app nativo": pílula ouro no topo da aba activa */
  .app-tab.ativo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 22px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--ouro), var(--ouro-claro));
    transform: translateX(-50%);
  }

  /* ---------------- Chrome: os 3 fixed do fundo sobem acima da barra ----
     O float verde do WhatsApp é desnecessário em mobile: a aba "Pedir"
     já abre o WhatsApp. Menos camadas = mais "app". */
  .whatsapp-float { display: none !important; }

  .caixa-float {
    left: 16px;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    width: 54px;
    height: 54px;
    z-index: 92;
  }
  .caixa-float .icone { width: 21px; height: 21px; }

  .topo-btn {
    right: 16px;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    z-index: 85;
  }

  /* reserva de fundo para a página nunca ficar tapada pela barra */
  .footer-base {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px) + 64px);
  }

  /* drawer continua a cobrir a barra (fica dentro do stacking do header);
     o CTA do fundo do menu ganha folga para não ficar sob a barra */
  .nav-principal {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  /* header compacto + respiro do notch (standalone/iOS) */
  .site-header { padding-top: env(safe-area-inset-top, 0px); }
  .header-inner { min-height: 64px; }
  .logo-img { height: 44px; }
}

/* ---------------- Editorial de app (≤560): ritmo + bottom-sheet ---- */
@media (max-width: 560px) {
  .header-inner { gap: 12px; }

  /* hero: CTA de ponta a ponta, texto com mais ar */
  .hero { padding: 34px 0 46px; }
  .hero-texto .botao-grande { width: 100%; justify-content: center; }
  .hero-features { gap: 14px 12px; }

  /* mais coesão vertical: vitrine/catálogo seguem a mesma respiração */
  .catalogo-vitrine { padding-bottom: 44px; }

  /* chips/categorias do catálogo: rail de rolagem horizontal nativa (sem wrap).
     Scroll contido na própria caixa — sem margens negativas (nunca alarga a página).
     min-width:0 é obrigatório: sem isto o floor min-content de cada chip
     alargava o .catalogo-chips para 1200px+ e criava scroll horizontal. */
  .catalogo-toolbar > * { min-width: 0; }
  .catalogo-toolbar .catalogo-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    padding: 2px 0 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .catalogo-toolbar .catalogo-chips::-webkit-scrollbar { display: none; }
  .catalogo-toolbar .catalogo-chip { flex: 0 0 auto; }

  /* press feedback subtil nos cards (sensação de app) */
  .produto-card, .cat-card { transition: transform 0.12s ease; }
  .produto-card:active, .cat-card:active { transform: scale(0.975); }

  /* ---------------- Ficha do produto = bottom-sheet ---------------- */
  .ficha-modal {
    inset: auto 0 0 0;
    margin: 0;
    width: 100%;
    max-height: 90vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }
  .ficha-modal.aberta { transform: translateY(0); }
  /* pega pequeno no topo do painel, como app */
  .ficha-modal::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    margin: 10px auto 0;
    flex: 0 0 auto;
  }
  .ficha-corpo { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .ficha-modal, .ficha-modal.aberta { transition: none !important; }
  .app-tab, .produto-card, .cat-card { transition: none !important; }
  .produto-card:active, .cat-card:active { transform: none; }
}