/* ZapPedido - tema visual configurável */

.tpsection__sub-title,
.section-title span,
.subtitulo_icones,
.text-primary {
  color: var(--zp-primary) !important;
}

.section-title::before,
.section-title::after {
  background: var(--zp-primary) !important;
}

.tpproduct__price span,
.tpbrandproduct__contact > span:first-child,
.category__content h6 {
  color: var(--zp-primary);
}

.scroll-top,
.btn-primary {
  background-color: var(--zp-button) !important;
  border-color: var(--zp-button) !important;
  color: var(--zp-button-text) !important;
}

.form-check-input:checked {
  background-color: var(--zp-primary) !important;
  border-color: var(--zp-primary) !important;
}

.form-control:focus,
.form-select:focus,
.input:focus {
  border-color: var(--zp-primary) !important;
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--zp-primary) 18%, transparent) !important;
}

/* Um toque da identidade sem pintar a tela inteira. */
.tpbrandproduct__item,
.category__item {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tpbrandproduct__item:hover,
.category__item:hover {
  border-color: color-mix(in srgb, var(--zp-primary) 35%, #e5e7eb);
}

/* V6 - os botões do carrinho e do resumo acompanham o tema escolhido no painel. */
.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.tpcheck-btn,
.tpcheck-btn:hover,
.tpcheck-btn:focus,
.tpcheck-btn:active {
  background-color: var(--zp-button) !important;
  border-color: var(--zp-button) !important;
  color: var(--zp-button-text) !important;
}

.tpcheck-btn {
  box-shadow: 0 5px 14px color-mix(in srgb, var(--zp-button) 18%, transparent);
}


/* V1.8 — grades/adicionais acompanham o tema escolhido no painel.
   Antes os títulos dessas seções usavam amarelos fixos (#ffc93f / #ffbc14). */
.titulo-itens,
.titulo-itens-pizza {
  background-color: var(--zp-primary) !important;
  color: var(--zp-primary-text) !important;
}

/* Alguns avisos dentro do título vinham com cor preta inline. */
.titulo-itens span,
.titulo-itens-pizza span {
  color: var(--zp-primary-text) !important;
}

/* Valores de adicionais também passam a conversar com a identidade da loja. */
.valor-item,
.valor-item-maior {
  color: var(--zp-primary) !important;
}

/* Mantém a seleção de checkbox/radio coerente nas grades. */
.list-group .form-check-input:checked {
  background-color: var(--zp-primary) !important;
  border-color: var(--zp-primary) !important;
}


/* =========================================================
   V1.9 — Grades / adicionais com visual 2026
   Somente apresentação. IDs, names, values, eventos e regras
   de seleção/cálculo permanecem exatamente os mesmos.
   ========================================================= */

.zp-grade-page {
  background: #f7f8fa;
  padding-bottom: 24px;
}

/* Card do produto */
.zp-grade-page > .destaque {
  margin-left: 10px;
  margin-right: 10px;
  border: 1px solid #eceff2 !important;
  border-radius: 18px !important;
  background: #fff;
  box-shadow: 0 5px 18px rgba(20, 28, 38, .09) !important;
  overflow: hidden;
}

.zp-grade-page > .destaque > b {
  display: block;
  margin-bottom: 10px;
  font-size: 1.05rem;
  letter-spacing: .01em;
}

.zp-grade-page > .destaque img {
  border-radius: 16px !important;
}

/* Títulos dos grupos: cor suave + detalhe da identidade */
.zp-grade-page .titulo-itens,
.zp-grade-page .titulo-itens-pizza {
  display: block;
  width: auto;
  margin: 18px 10px 8px;
  padding: 12px 14px 12px 16px;
  border: 1px solid color-mix(in srgb, var(--zp-primary) 16%, #e8ebef);
  border-left: 4px solid var(--zp-primary);
  border-radius: 12px;
  background: var(--zp-secondary) !important;
  color: #22262b !important;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: none;
}

.zp-grade-page .titulo-itens span,
.zp-grade-page .titulo-itens-pizza span {
  color: #22262b !important;
}

.zp-grade-page .titulo-itens span[style*="font-size:13px"] {
  display: inline-block;
  margin-left: 5px;
  font-size: .76rem !important;
  font-weight: 500;
  opacity: .68;
}

/* Bloco de opções */
.zp-grade-page .list-group {
  margin: 0 10px 12px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e5e8ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(20, 28, 38, .045);
}

.zp-grade-page .list-group-item {
  position: relative;
  min-height: 64px;
  padding: 15px 62px 15px 16px;
  border: 0;
  border-bottom: 1px solid #edf0f2;
  background: #fff;
  color: #252a31;
  font-size: .95rem;
  line-height: 1.3;
  transition: background-color .15s ease, border-color .15s ease;
}

.zp-grade-page .list-group-item:last-child {
  border-bottom: 0;
}

.zp-grade-page .list-group-item > span:first-child,
.zp-grade-page .list-group-item > small:first-child {
  font-size: .95rem !important;
  font-weight: 500;
}

.zp-grade-page .list-group-item:has(.form-check-input:checked) {
  background: color-mix(in srgb, var(--zp-secondary) 76%, #fff);
}

.zp-grade-page .valor-item,
.zp-grade-page .valor-item-maior {
  margin-left: 4px;
  font-size: .82rem;
  font-weight: 650;
}

.zp-grade-page .list-group-item span[style*="color:red"] {
  color: #7d838c !important;
  font-size: .72rem !important;
  font-weight: 500;
}

/* Mantém o controle na direita, mas melhora área visual */
.zp-grade-page .list-group-item .direita {
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Radios */
.zp-grade-page .list-group-item input[type="radio"].form-check-input {
  width: 23px;
  height: 23px;
  margin: 0;
  border: 2px solid #c8cdd3;
  box-shadow: none !important;
  cursor: pointer;
}

.zp-grade-page .list-group-item input[type="radio"].form-check-input:checked {
  border-color: var(--zp-primary) !important;
  background-color: var(--zp-primary) !important;
}

/* Switches */
.zp-grade-page .form-switch {
  padding-left: 0;
}

.zp-grade-page .form-switch .form-check-input {
  float: none;
  width: 2.8rem;
  height: 1.5rem;
  margin: 0;
  border: 1px solid #cfd4da;
  background-color: #e7e9ec;
  box-shadow: none !important;
  cursor: pointer;
}

.zp-grade-page .form-switch .form-check-input:checked {
  background-color: var(--zp-primary) !important;
  border-color: var(--zp-primary) !important;
}

/* Quantidade em opções do tipo múltiplo */
.zp-grade-page .list-group-item .direita button {
  display: inline-flex;
  width: 30px;
  height: 30px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  font-size: 1.18rem;
}

.zp-grade-page .list-group-item .direita input[id^="quantidade_item_"] {
  width: 28px !important;
  color: #252a31;
  font-size: .92rem;
  font-weight: 700;
}

/* Subtotal */
.zp-grade-page .zp-subtotal-card {
  position: relative;
  margin: 18px 10px 8px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--zp-primary) 17%, #e5e8ec) !important;
  border-radius: 15px !important;
  background: #fff;
  box-shadow: 0 4px 15px rgba(20, 28, 38, .07) !important;
  font-size: .95rem;
}

.zp-grade-page .zp-subtotal-card > b:first-child {
  font-size: 1rem;
  color: #252a31;
}

.zp-grade-page .zp-subtotal-card .direita {
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  font-size: 1.15rem;
  color: var(--zp-primary);
}

/* Observações */
.zp-grade-page .zp-observacoes-card {
  margin: 18px 10px 8px;
  padding: 16px;
  border: 1px solid #e5e8ec !important;
  border-radius: 15px !important;
  background: #fff;
  box-shadow: 0 4px 15px rgba(20, 28, 38, .055) !important;
}

.zp-grade-page .zp-observacoes-card > b:first-child {
  display: block;
  color: #252a31;
  font-size: .95rem;
  font-weight: 700;
}

.zp-grade-page .zp-observacoes-card .form-group {
  margin-top: 10px !important;
}

.zp-grade-page .zp-observacoes-card textarea.form-control {
  min-height: 86px;
  resize: none;
  padding: 12px 13px;
  border: 1px solid #dfe3e7;
  border-radius: 12px;
  background: #fafbfc;
  color: #252a31;
  font-size: .92rem;
  box-shadow: none;
}

.zp-grade-page .zp-observacoes-card textarea.form-control::placeholder {
  color: #9aa0a8;
}

/* Botão final */
.zp-grade-page .d-grid.col-8 {
  width: auto;
  margin-left: 10px !important;
  margin-right: 10px !important;
}

.zp-grade-page .d-grid.col-8 .btn {
  min-height: 52px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--zp-button) 20%, transparent);
}

/* Pizza: alguns preços antigos usam text-success */
.zp-grade-page .list-group-item .text-success {
  color: var(--zp-primary) !important;
}

/* Compactação suave em telas pequenas */
@media (max-width: 480px) {
  .zp-grade-page .titulo-itens,
  .zp-grade-page .titulo-itens-pizza {
    margin-top: 14px;
    padding: 11px 12px 11px 14px;
  }

  .zp-grade-page .list-group-item {
    min-height: 60px;
    padding-top: 13px;
    padding-bottom: 13px;
  }
}


/* =========================================================
   V2.0 — Grades compactas
   Mantém o visual moderno da V1.9, reduzindo altura e respiro
   para exibir mais opções por tela no celular.
   ========================================================= */

.zp-grade-page .titulo-itens,
.zp-grade-page .titulo-itens-pizza {
  margin: 12px 10px 6px;
  padding: 9px 12px 9px 13px;
  border-left-width: 4px;
  border-radius: 11px;
  font-size: .92rem;
  line-height: 1.2;
}

.zp-grade-page .titulo-itens span[style*="font-size:13px"] {
  margin-left: 4px;
  font-size: .70rem !important;
}

.zp-grade-page .list-group {
  margin: 0 10px 9px;
  border-radius: 12px;
}

.zp-grade-page .list-group-item {
  min-height: 52px;
  padding: 11px 56px 11px 14px;
  font-size: .88rem;
  line-height: 1.22;
}

.zp-grade-page .list-group-item > span:first-child,
.zp-grade-page .list-group-item > small:first-child {
  font-size: .88rem !important;
}

.zp-grade-page .valor-item,
.zp-grade-page .valor-item-maior {
  font-size: .76rem;
}

.zp-grade-page .list-group-item .direita {
  right: 14px;
}

/* Radio mais compacto */
.zp-grade-page .list-group-item input[type="radio"].form-check-input {
  width: 21px;
  height: 21px;
}

/* Switch mais compacto */
.zp-grade-page .form-switch .form-check-input {
  width: 2.45rem;
  height: 1.32rem;
}

/* Quantidade */
.zp-grade-page .list-group-item .direita button {
  width: 27px;
  height: 27px;
  font-size: 1.05rem;
}

.zp-grade-page .list-group-item .direita input[id^="quantidade_item_"] {
  width: 25px !important;
  font-size: .86rem;
}

/* Subtotal */
.zp-grade-page .zp-subtotal-card {
  margin: 13px 10px 7px;
  padding: 13px 15px;
  border-radius: 13px !important;
  font-size: .90rem;
}

.zp-grade-page .zp-subtotal-card > b:first-child {
  font-size: .94rem;
}

.zp-grade-page .zp-subtotal-card .direita {
  right: 15px;
  font-size: 1.04rem;
}

/* Observações */
.zp-grade-page .zp-observacoes-card {
  margin: 13px 10px 7px;
  padding: 13px 14px;
  border-radius: 13px !important;
}

.zp-grade-page .zp-observacoes-card > b:first-child {
  font-size: .90rem;
}

.zp-grade-page .zp-observacoes-card .form-group {
  margin-top: 8px !important;
}

.zp-grade-page .zp-observacoes-card textarea.form-control {
  min-height: 74px;
  padding: 10px 11px;
  border-radius: 10px;
  font-size: .87rem;
}

/* Botão final */
.zp-grade-page .d-grid.col-8 .btn {
  min-height: 48px;
  border-radius: 13px;
  font-size: .94rem;
}

/* Mobile: compactação extra, sem perder área de toque confortável */
@media (max-width: 480px) {
  .zp-grade-page .titulo-itens,
  .zp-grade-page .titulo-itens-pizza {
    margin-top: 10px;
    padding: 8px 11px 8px 12px;
    font-size: .89rem;
  }

  .zp-grade-page .list-group-item {
    min-height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}


/* V2.1 — título do produto mais compacto e refinado */
.zp-grade-page > .destaque > .zp-product-title {
  display: block;
  max-width: 92%;
  margin: 0 auto 8px;
  color: #22262b;
  font-size: .90rem !important;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .zp-grade-page > .destaque > .zp-product-title {
    margin-bottom: 7px;
    font-size: .86rem !important;
    line-height: 1.2;
  }
}


/* V2.2 — corrige a "escadinha" das grades internas.
   Algumas seções vinham aninhadas no mesmo bloco, causando recuo visual.
   Aqui nivelamos títulos e listas para o mesmo eixo esquerdo/direito. */
.zp-grade-page .list-group .titulo-itens,
.zp-grade-page .list-group .titulo-itens-pizza {
  margin: 10px 0 0 !important;
  border-radius: 0 !important;
  border-left-width: 4px !important;
  border-top: 1px solid #e5e8ec !important;
  border-right: 0 !important;
  border-bottom: 1px solid #e5e8ec !important;
  box-shadow: none !important;
}

.zp-grade-page .list-group .list-group {
  margin: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.zp-grade-page .list-group .list-group-item {
  border-left: 0 !important;
  border-right: 0 !important;
}

.zp-grade-page .list-group .list-group-item:last-child {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}


/* V2.3 — mantém o alinhamento da V2.2, mas padroniza o arredondamento
   de TODOS os títulos de grade, inclusive os que ficam dentro da lista. */
.zp-grade-page .list-group .titulo-itens,
.zp-grade-page .list-group .titulo-itens-pizza {
  margin: 10px 0 6px !important;
  border: 1px solid color-mix(in srgb, var(--zp-primary) 16%, #e8ebef) !important;
  border-left: 4px solid var(--zp-primary) !important;
  border-radius: 11px !important;
  background: var(--zp-secondary) !important;
  color: #22262b !important;
  overflow: hidden;
}