/* ZapPedido 2026 - refinamentos visuais da página principal.
   Mantém a estrutura e a lógica existentes; este arquivo só trata apresentação. */

/* Cabeçalho: mais espaço útil para o nome da loja sem cortar a identidade. */
.zp-navbar-2026 {
  min-height: 58px;
  border-bottom: 1px solid rgba(20, 28, 38, .06);
  box-shadow: 0 2px 10px rgba(20, 28, 38, .10) !important;
}

.zp-navbar-2026 .container-fluid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

.zp-navbar-2026 .zp-brand {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin-right: 0;
  padding: 0;
}

.zp-navbar-2026 .zp-brand img {
  flex: 0 0 auto;
  width: 64px !important;
  max-width: 64px;
  max-height: 32px;
  object-fit: contain;
}

.zp-navbar-2026 .zp-store-name {
  min-width: 0;
  color: #30343a;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.15px;
}

.zp-navbar-2026 .zp-nome-curto { font-size: 15.5px; white-space: nowrap; }
.zp-navbar-2026 .zp-nome-medio { font-size: 13.5px; white-space: nowrap; }
.zp-navbar-2026 .zp-nome-longo { font-size: 11.5px; white-space: normal; max-width: 145px; }

.zp-navbar-2026 .status-delivery-topo {
  flex: 0 0 auto;
  margin-right: 0;
}

.zp-navbar-2026 .status-delivery-topo span {
  box-shadow: 0 2px 7px rgba(0, 0, 0, .12);
}

.zp-navbar-2026 .header__info-cart button {
  transition: transform .15s ease, box-shadow .15s ease;
}

.zp-navbar-2026 .header__info-cart button:active {
  transform: scale(.96);
}

/* Atalhos: mesmos três destinos, com ícones consistentes e atuais. */
.zp-atalhos {
  border-bottom-color: #edf0f2 !important;
  margin-bottom: 34px !important;
}

.zp-atalhos .nav-item > a {
  min-width: 0;
  justify-content: center;
  gap: 7px;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-bottom: 12px !important;
  text-decoration: none;
}

.zp-shortcut-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--zp-secondary) 78%, #fff);
  color: var(--zp-primary);
  font-size: 17px;
  border: 1px solid color-mix(in srgb, var(--zp-primary) 12%, #e9ecef);
}

.zp-atalhos .titulo_icones {
  display: block;
  color: #34383d !important;
  font-weight: 600;
  line-height: 1.08;
}

.zp-atalhos .subtitulo_icones {
  margin-top: 2px !important;
  font-size: 11px !important;
  font-weight: 500;
  line-height: 1.05;
}

/* Busca: mantém a simplicidade, mas ganha contraste e área de toque coerente. */
.zp-search-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px !important;
}

.zp-search-wrap input {
  flex-grow: 1;
  min-width: 0;
  margin: 0 !important;
  padding: 7px 2px 8px !important;
  border: 0 !important;
  border-bottom: 1.5px solid #c7ccd1 !important;
  outline: none;
  background: transparent;
  color: #34383d;
  font-size: 13px;
  transition: border-color .15s ease;
}

.zp-search-wrap input::placeholder {
  color: #818894;
  opacity: 1;
  font-style: italic;
}

.zp-search-wrap input:focus {
  border-bottom-color: var(--zp-primary) !important;
}

.zp-search-wrap .zp-search-icon {
  color: #40464d;
  font-size: 16px;
}

/* Títulos manuscritos: preserva a identidade, só refina contraste e ritmo. */
.tpsection__sub-title {
  font-size: 16.5px !important;
  font-weight: 500 !important;
  letter-spacing: -.1px;
}

/* Cards: sombra mais leve, borda mais limpa e preço com hierarquia melhor. */
#destaques .tpbrandproduct__item,
#promocao .tpbrandproduct__item,
#combo .tpbrandproduct__item {
  border-color: #e7eaee !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(35, 43, 53, .10) !important;
  transition: transform .16s ease, box-shadow .16s ease;
}

#destaques .tpbrandproduct__item:active,
#promocao .tpbrandproduct__item:active,
#combo .tpbrandproduct__item:active {
  transform: scale(.995);
}

#destaques .imgem-cat-div img,
#promocao .imgem-cat-div img,
#combo .img_combo img,
.category__img img {
  border-radius: 9px;
}

#destaques .tpproduct__price span,
#promocao .tpproduct__price span,
#combo .tpproduct__price span {
  font-weight: 700;
}

#destaques .tpproduct__price del,
#promocao .tpproduct__price del {
  margin-left: 4px;
  color: #8b9198;
  font-size: 11px;
  font-weight: 400;
}

/* Rodapé: mesma funcionalidade, agora tratado como área de informações da loja. */
.rodape.zp-footer-2026 {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 7px 10px calc(14px + env(safe-area-inset-bottom));
  background: rgba(250, 251, 252, .98);
  border-top: 1px solid #e5e8ec;
  box-shadow: 0 -3px 12px rgba(27, 35, 44, .06);
  color: #4c535b;
  z-index: 300;
  backdrop-filter: blur(8px);
}

.zp-footer-address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 4px;
  color: #626a73;
  font-size: 10.5px;
  line-height: 1.15;
}

.zp-footer-address i {
  color: var(--zp-primary);
  font-size: 11px;
}

.zp-footer-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-size: 10.5px;
  line-height: 1;
}

.zp-footer-actions a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  color: #3f464e;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s ease, transform .15s ease;
}

.zp-footer-actions a:active {
  opacity: .65;
  transform: scale(.97);
}

.zp-footer-actions .zp-footer-whatsapp i { color: #198754; }
.zp-footer-actions .zp-footer-instagram i { color: #c13584; }
.zp-footer-actions .zp-footer-painel { color: #8a9098; font-size: 10px; }
.zp-footer-actions .zp-footer-painel i { color: #9aa0a6; }

/* Compensa o rodapé fixo para ele não cobrir o último conteúdo. */
.main-container {
  padding-bottom: 74px;
}


/* Instalação do PWA: ação secundária e discreta no Android.
   Fica acima do rodapé fixo, sem esconder endereço ou atalhos. */
.zp-install-app {
  position: fixed;
  right: 12px;
  bottom: 76px;
  left: auto;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  max-width: calc(100vw - 24px);
  padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--zp-primary) 82%, #1f2937);
  border-radius: 999px;
  background: var(--zp-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(26, 36, 48, .18);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}

.zp-install-app i {
  font-size: 14px;
  line-height: 1;
}

.zp-install-app:active {
  transform: scale(.97);
  box-shadow: 0 2px 8px rgba(26, 36, 48, .16);
}

@media (max-width: 767px) {
  .zp-navbar-2026 .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
    gap: 7px;
  }

  .zp-navbar-2026 .zp-brand img {
    width: 58px !important;
    max-width: 58px;
  }

  .zp-navbar-2026 .zp-nome-curto { font-size: 14.5px; }
  .zp-navbar-2026 .zp-nome-medio { font-size: 12.8px; }
  .zp-navbar-2026 .zp-nome-longo { font-size: 11px; max-width: 128px; }

  .zp-atalhos {
    margin-bottom: 27px !important;
  }

  .zp-shortcut-icon {
    width: 31px;
    height: 31px;
    border-radius: 10px;
    font-size: 15px;
  }

  .zp-atalhos .titulo_icones { font-size: 11px !important; }
  .zp-atalhos .subtitulo_icones { font-size: 9.5px !important; }

  .zp-search-wrap {
    padding-left: 30px !important;
    padding-right: 30px !important;
    margin-bottom: 12px !important;
  }

  .tpsection__sub-title {
    font-size: 15.5px !important;
  }

  /* Reduz o excesso de rolagem entre Destaques, Ofertas e Combos. */
  #destaques.brand-product,
  #promocao.brand-product {
    margin-top: 5px !important;
  }

  #destaques .sections__wrapper,
  #promocao .sections__wrapper {
    padding-bottom: 15px !important;
  }

  #destaques .col-lg-12.mb-20,
  #promocao .col-lg-12.mb-20 {
    margin-bottom: 12px !important;
  }

  #destaques .tpbrandproduct__item,
  #promocao .tpbrandproduct__item {
    margin-bottom: 13px !important;
  }

  #combo.blog-area {
    margin-top: -48px !important;
    margin-bottom: 46px !important;
    padding-top: 48px !important;
    padding-bottom: 12px !important;
  }

  #combo .tpsection.mb-35 {
    margin-bottom: 18px !important;
  }

  .zp-footer-actions {
    gap: 12px;
  }
}

@media (max-width: 360px) {
  .zp-install-app {
    right: 10px;
    bottom: 74px;
    min-height: 38px;
    padding: 8px 11px;
    font-size: 11.5px;
  }

  .zp-navbar-2026 .zp-brand img {
    width: 50px !important;
    max-width: 50px;
  }

  .zp-navbar-2026 .zp-nome-curto { font-size: 13.5px; }
  .zp-navbar-2026 .zp-nome-medio { font-size: 11.8px; }
  .zp-navbar-2026 .zp-nome-longo { font-size: 10.3px; max-width: 110px; }

  .zp-footer-actions {
    gap: 8px;
    font-size: 9.5px;
  }

  .zp-footer-actions .zp-footer-painel {
    font-size: 9px;
  }
}

/* V1.3: remove definitivamente o botão legado de voltar ao topo. */
.scroll-top,
.scroll-to-target[data-target="html"] {
  display: none !important;
}

/* Dica compacta quando o Android não entrega o prompt nativo de instalação. */
.zp-install-hint {
  position: fixed;
  right: 12px;
  bottom: 124px;
  z-index: 10000;
  max-width: min(270px, calc(100vw - 24px));
  padding: 9px 11px;
  border: 1px solid #e2e6ea;
  border-radius: 10px;
  background: rgba(255, 255, 255, .98);
  color: #454b52;
  box-shadow: 0 5px 18px rgba(26, 36, 48, .16);
  font-size: 11.5px;
  line-height: 1.35;
  text-align: left;
}

.zp-install-hint[hidden],
.zp-install-app[hidden] {
  display: none !important;
}

@media (max-width: 360px) {
  .zp-install-hint {
    right: 10px;
    bottom: 106px;
    max-width: calc(100vw - 20px);
    font-size: 11px;
  }
}


/* V1.4: respiro inferior extra para o rodapé no Chrome/Android.
   Mantém as duas linhas visíveis mesmo com a interface do navegador aberta. */
@media (max-width: 767px) {
  .rodape.zp-footer-2026 {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
}


/* V1.5: nomes dos produtos em preto/grafite.
   As cores do tema continuam nos preços, títulos e demais destaques. */
#destaques .tpbrandproduct__contact > span:first-child,
#promocao .tpbrandproduct__contact > span:first-child,
#combo .tpblog__item > span:first-of-type {
  color: #22262b !important;
}