/*
  index.css — Cardápio Digital v3
  Camada de polimento sobre style.css.
  Assume: --accent, --bg-app, --accent-10/20/40 injetados pelo index.config.js
*/

/* ═══════════════════════════════════════════════════════════════
   0. RESET CRÍTICO — elementos que devem ficar ocultos por padrão
══════════════════════════════════════════════════════════════ */

/* Share sheet — escondido até receber .open via JS */
.share-sheet {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 10060;
}
.share-sheet.open { display: block; }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

.sheet-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -12px 40px rgba(0,0,0,.22);
  transform: translateY(100%);
  animation: sheetIn .22s ease forwards;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
}
@keyframes sheetIn { to { transform: translateY(0); } }
@media (prefers-color-scheme: dark) { .sheet-panel { background: #141824; color: #e6ebf0; } }

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px 12px;
  font-weight: 700;
}
.sheet-close {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
}
.sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  padding: 4px 2px;
}
.sheet-item {
  appearance: none;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.08);
  background: #fafafa;
  color: inherit;
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: background .12s;
}
.sheet-item i { font-size: 20px; }
.sheet-item span { font-size: .82rem; font-weight: 500; }
.sheet-item:hover { background: #f0f0f0; }
@media (prefers-color-scheme: dark) {
  .sheet-item { background: #1c2230; border-color: rgba(255,255,255,.08); }
  .sheet-item:hover { background: #20273a; }
}
.sheet-cancel {
  width: 100%;
  margin-top: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: transparent;
  color: inherit;
  padding: .75rem;
  border-radius: 14px;
  cursor: pointer;
  font-size: .9rem;
}

/* Hambúrguer — esconde sempre (usamos scroll horizontal no mobile) */
.menu-toggle { display: none !important; }
#menu-backdrop { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   1. HERO / CAPA
══════════════════════════════════════════════════════════════ */
.cabecalho .capa {
  position: relative;
  isolation: isolate;
  height: clamp(220px, 30vh, 310px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px 24px;
  overflow: hidden;
}

.capa__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.12) 0%,
      rgba(0,0,0,.24) 40%,
      rgba(0,0,0,.64) 100%);
}

.brand-lockup {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(92vw, 840px);
}

.logoprincipal {
  width: clamp(72px, 13vw, 100px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 28px rgba(0,0,0,.38);
  flex-shrink: 0;
  background: rgba(255,255,255,.08);
}

.brand-chip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* remove borda/background do estilo antigo */
  border: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.brand-name {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: clamp(1.2rem, 4vw, 2.1rem);
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.60), 0 1px 2px rgba(0,0,0,.40);
  letter-spacing: -.01em;
  line-height: 1.1;
}

/* traço accent abaixo do nome */
.brand-chip::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent, #54CC0A);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent, #54CC0A) 70%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   2. BOX CABEÇALHO — info cards
══════════════════════════════════════════════════════════════ */
.box-cabecalho {
  background: transparent;
  padding: 0;
  margin-top: -2px;
}

.conteudo-cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 0;
}

.painel-cards {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  transform: none;
  position: static;
  width: min(100%, 820px);
  overflow: hidden;
  padding: 2px 2px 6px;
}

@media (min-width: 700px) {
  .painel-cards {
    justify-content: center;
    overflow: visible;
  }
}

.info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  max-width: none;
  padding: 9px 6px;
  border-radius: 14px;
  border: 1.5px solid color-mix(in srgb, var(--accent, #54CC0A) 22%, transparent);
  background: color-mix(in srgb, var(--accent, #54CC0A) 6%, var(--bg-app, #fff));
  cursor: pointer;
  user-select: none;
  transition: transform .16s ease, border-color .16s, box-shadow .16s, background .16s;
  flex: 1 1 0;
}

.info-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent, #54CC0A);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent, #54CC0A) 22%, transparent);
  background: color-mix(in srgb, var(--accent, #54CC0A) 10%, var(--bg-app, #fff));
}

.info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent, #54CC0A) 14%, transparent);
  color: color-mix(in srgb, var(--accent, #54CC0A) 85%, #000);
  font-size: 1.05rem;
  flex-shrink: 0;
}

.info-icon i { font-size: 1rem; }
.delivery-icon { width: 22px; height: 22px; object-fit: contain; }

.info-titulo {
  font-family: "Roboto", sans-serif;
  font-size: clamp(.58rem, 2.4vw, .78rem);
  font-weight: 800;
  color: inherit;
  text-align: center;
  line-height: 1.2;
  letter-spacing: .01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   3. OBSERVAÇÃO BANNER (callout)
══════════════════════════════════════════════════════════════ */
.ui-callout {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  max-width: min(820px, 100%);
  margin: 10px auto 0;
  padding: 11px 14px;
  border-left: 5px solid var(--accent, #54CC0A);
  background: #f7fbff;
  color: #1f2b39;
  border-radius: 12px;
  font-size: .95rem;
  line-height: 1.4;
}
@media (prefers-color-scheme: dark) { .ui-callout { background: #121923; color: #e6ebf0; } }
.ui-callout .icon { font-size: .95rem; margin-top: 2px; opacity: .9; flex-shrink: 0; }
.ui-callout .text { line-height: 1.38; }
.ui-callout .close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  opacity: .55;
  padding: 0 4px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: opacity .12s;
}
.ui-callout .close:hover { opacity: 1; }
.ui-callout.is-hiding { opacity: 0; transition: opacity .2s ease; }
.ui-callout.is-hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   4. CARDÁPIO SHELL + TOOLBAR
══════════════════════════════════════════════════════════════ */
.cardapio-shell {
  width: min(1120px, calc(100% - 24px));
  margin: 20px auto 60px;
}

.cardapio-toolbar {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(240px, 400px);
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.09);
  background: var(--bg-app, #fff);
  box-shadow: 0 4px 18px rgba(15,23,42,.07);
  margin-bottom: 16px;
}

.cardapio-kicker {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent, #54CC0A);
  margin-bottom: 4px;
}

.cardapio-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
  color: #0f172a;
}

.cardapio-summary {
  margin: 4px 0 0;
  font-size: .84rem;
  color: #64748b;
}

.cardapio-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 48px;
  border-radius: 14px;
  border: 1.5px solid rgba(15,23,42,.10);
  background: #f8fafc;
  color: #64748b;
  transition: border-color .16s, box-shadow .16s;
}

.cardapio-search:focus-within {
  border-color: var(--accent, #54CC0A);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #54CC0A) 14%, transparent);
  background: #fff;
}

.cardapio-search i { flex-shrink: 0; }

.cardapio-search #campo-busca {
  width: 100%;
  min-width: 0;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #0f172a;
  font-family: "Roboto", sans-serif;
  font-size: .95rem;
}

.cardapio-search #campo-busca::placeholder { color: #94a3b8; }

/* ═══════════════════════════════════════════════════════════════
   5. CATEGORY NAV
══════════════════════════════════════════════════════════════ */
.cardapio-shell .menu-wrapper {
  position: sticky;
  top: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-app, #fff);
  border-bottom: 1px solid rgba(15,23,42,.08);
  border-radius: 0;
  box-shadow: 0 4px 18px rgba(15,23,42,.07);
  margin-bottom: 20px;
}

.cardapio-shell .menu-nav {
  flex: 1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  background: transparent;
  padding: 0;
}

/* Chips de categoria */
.cardapio-shell .menu-nav .nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(15,23,42,.12);
  background: transparent;
  color: #475569;
  font-family: "Roboto", sans-serif;
  font-size: .86rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .16s, background .16s, color .16s, box-shadow .16s, transform .12s;
}

.cardapio-shell .menu-nav .nav-btn:hover {
  border-color: color-mix(in srgb, var(--accent, #54CC0A) 60%, transparent);
  background: color-mix(in srgb, var(--accent, #54CC0A) 8%, transparent);
  color: #0f172a;
  transform: translateY(-1px);
}

.cardapio-shell .menu-nav .nav-btn.ativo,
.cardapio-shell .menu-nav .nav-btn.is-active,
.cardapio-shell .menu-nav .nav-btn[aria-current="true"] {
  background: var(--accent, #54CC0A);
  border-color: var(--accent, #54CC0A);
  color: #08120b;
  font-weight: 700;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent, #54CC0A) 32%, transparent);
}

.nav-icon { font-size: 1rem; line-height: 1; }
.nav-label { line-height: 1; }

/* ═══════════════════════════════════════════════════════════════
   6. CATEGORY SECTION HEADERS
══════════════════════════════════════════════════════════════ */
.categoria-section {
  scroll-margin-top: 80px;
  margin-bottom: 36px;
}

.categoria-section--auto {
  padding: 14px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(250, 204, 21, .10), rgba(255,255,255,0) 58%),
    color-mix(in srgb, var(--accent, #54CC0A) 4%, #fff);
  border: 1px solid rgba(250, 204, 21, .22);
}

.categoria-section--auto .menu-section-header {
  margin-bottom: 12px;
}

.cardapio-shell .menu-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 2px solid color-mix(in srgb, var(--accent, #54CC0A) 24%, transparent);
}

.categoria-label {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent, #54CC0A);
  margin: 0 0 3px;
}

.categoria-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.categoria-icone { font-size: 1.3rem; line-height: 1; }

.categoria-meta {
  flex-shrink: 0;
  padding: 5px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #54CC0A) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #54CC0A) 24%, transparent);
  color: color-mix(in srgb, var(--accent, #54CC0A) 78%, #000);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   7. ITEM CARDS — MOBILE (horizontal)
══════════════════════════════════════════════════════════════ */
.cardapio-shell .conteudo-categoria {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.cardapio-shell .div-info-produtos.item-card,
.cardapio-shell .div-info-produtos.indisponivel {
  position: relative;
  display: grid !important;
  grid-template-columns: 112px minmax(0,1fr);
  align-items: stretch;
  gap: 0;
  padding: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid rgba(15,23,42,.09);
  background: #fff;
  box-shadow: 0 2px 12px rgba(15,23,42,.06);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 112px;
}

.cardapio-shell .div-info-produtos.item-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent, #54CC0A) 50%, #cbd5e1);
  box-shadow: 0 10px 30px rgba(15,23,42,.12);
}

/* barra accent na esquerda (mobile) */
.cardapio-shell .div-info-produtos.item-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--accent, #54CC0A);
  z-index: 2;
  transition: width .18s ease;
}
.cardapio-shell .div-info-produtos.item-card:hover::before {
  width: 4px;
}

/* imagem */
.cardapio-shell .div-img-menu {
  width: 112px;
  height: 100%;
  min-height: 112px;
  overflow: hidden;
  background: #f1f5f9;
  flex-shrink: 0;
  cursor: zoom-in;
}

.cardapio-shell .img-itens {
  width: 112px;
  height: 100%;
  min-height: 112px;
  object-fit: cover;
  display: block;
  transition: transform .28s ease, filter .2s ease;
}

.cardapio-shell .item-card:hover .img-itens {
  transform: scale(1.06);
}

/* body do card */
.cardapio-shell .desc-comidas {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  min-width: 0;
  gap: 0 !important;
}

.cardapio-shell .produto-copy { flex: 1; margin-bottom: 8px; }

.cardapio-shell .nome-produto {
  margin: 0 0 4px;
  font-family: "Roboto", sans-serif;
  font-size: .98rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}

.cardapio-shell .descricao-produto {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: .84rem;
  font-weight: 400;
  color: #64748b;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.descricao-produto.desc-expandida {
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
}

/* preço e botão */
.cardapio-shell .div-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(15,23,42,.07);
}

.cardapio-shell .preco-produto,
.cardapio-shell .pre\?o-produto {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  color: color-mix(in srgb, var(--accent, #54CC0A) 75%, #000);
  letter-spacing: -.01em;
}

.item-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: var(--accent, #54CC0A);
  color: #08120b;
  font-size: .9rem;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent, #54CC0A) 32%, transparent);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cardapio-shell .item-card:hover .item-card-action {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent, #54CC0A) 40%, transparent);
}

/* indisponível */
.cardapio-shell .indisponivel {
  opacity: .55;
  filter: grayscale(.25);
  cursor: not-allowed;
}
.cardapio-shell .indisponivel::before { background: #94a3b8; }

/* badge mais pedido */
.cardapio-shell .badge-destaque {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 20px);
  padding: 5px 9px 5px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff7cc 0%, #facc15 100%);
  color: #713f12;
  font-family: "Roboto", sans-serif;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  border: 1px solid rgba(161, 98, 7, .16);
  box-shadow: 0 8px 20px rgba(113,63,18,.20);
  animation: pulseGlow 2.8s ease-in-out infinite;
  white-space: nowrap;
}
.cardapio-shell .badge-destaque::before {
  content: "\f521";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  color: #b45309;
  font-size: .65rem;
}

.cardapio-shell .badge-destaque--rank {
  background: linear-gradient(135deg, #fff 0%, #facc15 100%);
}

.cardapio-shell .badge-destaque--rank::before {
  content: "\f005";
}

@keyframes pulseGlow {
  0%,100% { box-shadow: 0 8px 20px rgba(113,63,18,.20); }
  50%      { box-shadow: 0 8px 28px rgba(250,204,21,.44); }
}

/* ═══════════════════════════════════════════════════════════════
   7B. ITEM CARDS — DESKTOP (vertical grid)
══════════════════════════════════════════════════════════════ */
@media (min-width: 680px) {
  .cardapio-shell .conteudo-categoria {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }

  .cardapio-shell .div-info-produtos.item-card,
  .cardapio-shell .div-info-produtos.indisponivel {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    min-height: unset;
    border-radius: 18px;
  }

  .cardapio-shell .div-info-produtos.item-card::before {
    /* barra accent no topo (desktop) */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 3px !important;
    border-radius: 0 !important;
  }

  .cardapio-shell .div-img-menu {
    width: 100% !important;
    height: 180px !important;
    min-height: 180px !important;
    border-radius: 0 !important;
  }

  .cardapio-shell .img-itens {
    width: 100% !important;
    height: 180px !important;
    min-height: 180px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  .cardapio-shell .desc-comidas {
    flex: 1 !important;
    padding: 14px 16px 16px !important;
    justify-content: flex-start !important;
  }

  .cardapio-shell .produto-copy {
    flex: 1;
    margin-bottom: 12px;
  }

  .cardapio-shell .descricao-produto {
    -webkit-line-clamp: 3;
    font-size: .86rem;
  }

  .cardapio-shell .div-price {
    padding-top: 10px;
    border-top: 1px solid rgba(15,23,42,.08);
  }

  .cardapio-shell .preco-produto,
  .cardapio-shell .pre\?o-produto {
    font-size: 1.08rem;
  }

  .item-card-action {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 11px;
    font-size: .95rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   8. CART FAB
══════════════════════════════════════════════════════════════ */

/* Esconde o FAB quando qualquer modal de fluxo está aberto */
body:has(#modal-cart.ativo) #view-carrinho,
body:has(#background-pagamento.ativo) #view-carrinho,
body:has(#background-confirm.ativo) #view-carrinho,
body:has(.background-retirada-entrega.ativo) #view-carrinho,
body:has(.modal-endereco.ativo) #view-carrinho,
body:has(.modal-form02.ativo) #view-carrinho {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(12px) scale(.9) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

/* Transição suave ao aparecer */
#view-carrinho {
  transition: opacity .18s ease, transform .18s ease;
}

.view-carrinho {
  position: fixed !important;
  bottom: 20px !important;
  right: 16px !important;
  left: auto !important;
  z-index: 10000 !important;
  margin: 0 !important;
  height: auto !important;
}

.btn-carrinho {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 22px 0 18px !important;
  height: 52px !important;
  min-height: 52px !important;
  width: auto !important;
  border-radius: 999px !important;
  border: none !important;
  background: var(--accent, #54CC0A) !important;
  color: #08120b !important;
  font-family: "Roboto", sans-serif !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow:
    0 6px 22px color-mix(in srgb, var(--accent, #54CC0A) 44%, transparent),
    0 2px 6px rgba(0,0,0,.12) !important;
  transition: transform .14s ease, box-shadow .14s ease !important;
}

.btn-carrinho:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 12px 30px color-mix(in srgb, var(--accent, #54CC0A) 52%, transparent),
    0 4px 10px rgba(0,0,0,.14) !important;
}
.btn-carrinho:active { transform: scale(.96) !important; }

/* ícone dentro do botão */
.btn-carrinho i {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* badge de contagem */
.cart-badge,
#cart-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.22) !important;
  color: #08120b !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* texto "Ver carrinho" */
.cart-label {
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .01em;
}

/* ═══════════════════════════════════════════════════════════════
   9. LOJA FECHADA
══════════════════════════════════════════════════════════════ */
.loja-fechada {
  max-width: 860px;
  margin: 18px auto 22px;
  padding: 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  border: 1px solid rgba(239,68,68,.22);
  background: linear-gradient(180deg, #fff7f7 0%, #fff 100%);
  border-radius: 20px;
  text-align: left;
  box-shadow: 0 12px 30px rgba(15,23,42,.07);
}

.loja-fechada__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #fee2e2;
  color: #dc2626;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.loja-fechada__content {
  min-width: 0;
}

.loja-fechada__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.loja-fechada__status {
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fee2e2;
  color: #991b1b;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.loja-fechada h2 {
  font-size: clamp(1rem, 2.8vw, 1.22rem);
  font-weight: 900;
  margin: 0;
  color: #0f172a;
}

.loja-fechada p {
  color: #64748b;
  margin: 8px 0 12px;
  line-height: 1.45;
}

.loja-fechada__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.loja-fechada details {
  min-width: min(100%, 280px);
}

.loja-fechada summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.24);
  background: #fff;
  color: #334155;
  font-weight: 800;
  user-select: none;
}

.loja-fechada__whatsapp {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px !important;
  border-radius: 12px !important;
  white-space: nowrap;
}

.lista-horarios {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 6px;
}

.loja-fechada .lista-horarios li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  font-size: .9rem;
}

@media (max-width: 520px) {
  .loja-fechada {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 14px 12px 18px;
    padding: 14px;
  }

  .loja-fechada__actions,
  .loja-fechada details,
  .loja-fechada summary,
  .loja-fechada__whatsapp {
    width: 100%;
  }
}

.lista-horarios li {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fdecea;
  font-size: .9rem;
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 14px;
  border: 1.5px solid #25D366;
  background: #eafff3;
  color: #145c32;
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  transition: background .15s;
}
.btn-whatsapp:hover { background: #d4f8e5; }

/* ═══════════════════════════════════════════════════════════════
   10. EMPTY SEARCH
══════════════════════════════════════════════════════════════ */
.menu-empty {
  margin: 20px 0 36px;
  padding: 24px;
  border: 1.5px dashed rgba(15,23,42,.14);
  border-radius: 16px;
  background: #f8fafc;
  color: #64748b;
  text-align: center;
  font-weight: 600;
  font-size: .95rem;
}

/* ═══════════════════════════════════════════════════════════════
   11. VER MAIS
══════════════════════════════════════════════════════════════ */
.btn-ver-mais {
  display: none;
  margin-top: 4px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent, #54CC0A);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity .12s;
}
.btn-ver-mais:hover { opacity: .75; }

@media (min-width: 680px) {
  .cardapio-shell .btn-ver-mais { display: inline; }
}
@media (max-width: 679px) {
  .cardapio-shell .btn-ver-mais.tem-overflow { display: inline; }
}

/* ═══════════════════════════════════════════════════════════════
   12. FOOTER
══════════════════════════════════════════════════════════════ */
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 16px;
  border-top: 1px solid rgba(15,23,42,.08);
  font-family: "Roboto", sans-serif;
  font-size: .84rem;
  color: #94a3b8;
}

.paragrafo-footer { margin: 0; }

.logoGF {
  height: 22px;
  width: auto;
  object-fit: contain;
  opacity: .7;
  transition: opacity .15s;
}
.logoGF:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   13. SCROLL SEARCH HIDDEN
══════════════════════════════════════════════════════════════ */
.cardapio-shell .item-card.is-hidden-by-search,
.cardapio-shell .indisponivel.is-hidden-by-search,
.cardapio-shell .categoria-section.is-hidden-by-search {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   14. LIGHTBOX
══════════════════════════════════════════════════════════════ */
.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.9);
  backdrop-filter: blur(6px);
  padding: 16px;
  animation: fadeIn .15s ease;
  cursor: zoom-out;
}
.img-lightbox[hidden] { display: none !important; }

.lightbox-img {
  max-width: min(94vw, 900px);
  max-height: 90vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0,0,0,.62);
  cursor: default;
}

.lightbox-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1.5px solid rgba(255,255,255,.24);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.lightbox-close:hover { background: rgba(255,255,255,.26); }

/* ═══════════════════════════════════════════════════════════════
   15. RESPONSIVIDADE
══════════════════════════════════════════════════════════════ */

/* ── Tablet ── */
@media (max-width: 860px) {
  .cardapio-toolbar {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
  }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .cardapio-shell {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 32px;
  }

  .cardapio-toolbar {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: none;
    padding: 12px 14px;
    margin-bottom: 0;
  }

  .cardapio-summary { display: none; }

  /* nav mobile — horizontal scroll */
  .cardapio-shell .menu-wrapper {
    border-radius: 0;
    padding: 8px 0;
    overflow: visible;
  }

  .cardapio-shell .menu-toggle { display: none !important; }
  #menu-backdrop { display: none !important; }

  .cardapio-shell .menu-nav,
  .cardapio-shell .menu-nav.open {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    padding: 2px 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    animation: none !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cardapio-shell .menu-nav::-webkit-scrollbar { display: none; }

  /* chips compactos no mobile */
  .cardapio-shell .menu-nav .nav-btn,
  .cardapio-shell .menu-nav.open .nav-btn {
    flex: 0 0 auto !important;
    padding: 8px 14px !important;
    font-size: .84rem !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }

  /* fade-out à direita indicando scroll */
  .cardapio-shell .menu-wrapper::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--bg-app, #fff));
    pointer-events: none;
    z-index: 2;
  }

  /* cards mobile */
  .cardapio-shell .div-info-produtos.item-card,
  .cardapio-shell .div-info-produtos.indisponivel {
    grid-template-columns: 100px minmax(0,1fr) !important;
    min-height: 100px;
    border-radius: 14px;
  }

  .cardapio-shell .div-img-menu,
  .cardapio-shell .img-itens {
    width: 100px !important;
    min-height: 100px !important;
  }

  .cardapio-shell .desc-comidas {
    padding: 10px 12px !important;
  }

  .cardapio-shell .nome-produto { font-size: .92rem; }
  .cardapio-shell .descricao-produto { font-size: .8rem; }
  .cardapio-shell .preco-produto,
  .cardapio-shell .pre\?o-produto { font-size: .94rem; }

  .item-card-action { width: 30px; height: 30px; flex: 0 0 30px; font-size: .82rem; }

  .categoria-section { scroll-margin-top: 70px; margin-bottom: 28px; }

  /* hero */
  .cabecalho .capa {
    height: clamp(180px, 26vh, 240px);
    padding-bottom: 18px;
  }

  .brand-lockup { gap: 12px; }

  .logoprincipal {
    width: 64px;
    border-radius: 14px;
  }

  .brand-name { font-size: clamp(1rem, 5vw, 1.4rem); }

  /* info cards */
  .painel-cards {
    width: 100%;
    justify-content: center;
    gap: 6px;
    padding: 10px 0 4px;
    margin: 0;
    overflow: hidden;
  }
  .info-card { min-width: 0; padding: 8px 5px; }
  .info-icon { width: 30px; height: 30px; border-radius: 10px; font-size: .86rem; }
  .delivery-icon { width: 18px; height: 18px; }
  .info-titulo { font-size: clamp(.58rem, 2.35vw, .72rem); }

  /* carrinho FAB mobile — mantém o label */
  .btn-carrinho {
    padding: 0 18px 0 14px !important;
    height: 48px !important;
    gap: 8px !important;
  }
}

/* ── Extra small (< 420px): esconde texto, mantém ícone + badge ── */
@media (max-width: 420px) {
  .cart-label { display: none; }
  .btn-carrinho { padding: 0 16px !important; }
}

/* ── Extra small (< 380px) ── */
@media (max-width: 380px) {
  .cardapio-shell .div-info-produtos.item-card,
  .cardapio-shell .div-info-produtos.indisponivel {
    grid-template-columns: 88px minmax(0,1fr) !important;
  }
  .cardapio-shell .div-img-menu,
  .cardapio-shell .img-itens {
    width: 88px !important;
    min-height: 88px !important;
  }

  .info-card { min-width: 0; padding: 7px 4px; }
  .info-icon { width: 28px; height: 28px; }
  .info-titulo { font-size: clamp(.55rem, 2.45vw, .66rem); }
}

/* ── Keyframes ── */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes uiFade  { from { opacity: 0; } to { opacity: 1; } }

/* ═══════════════════════════════════════════════════════════════
   16. MODAL CARRINHO — layout iFood-inspired
══════════════════════════════════════════════════════════════ */

/* ── Animações ── */
@keyframes cartSlideUp {
  from { transform: translateY(32px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes cartPop {
  from { transform: scale(.96) translateY(8px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes qtyBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(.9); }
  100% { transform: scale(1); }
}

/* ── Backdrop ── */
#modal-cart.background-modal {
  backdrop-filter: blur(4px) !important;
  background: rgba(0,0,0,.54) !important;
  display: none;
  position: fixed !important;
  inset: 0 !important;
  justify-content: center !important;
  align-items: flex-end !important;
  z-index: 9999 !important;
}
#modal-cart.background-modal.ativo { display: flex !important; }

/* ── Painel ── */
.modal-carrinho {
  width: min(540px, 100%) !important;
  max-height: 88vh !important;
  border-radius: 22px 22px 0 0 !important;
  border: none !important;
  background: #fff !important;
  color: #0f172a !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: 0 -8px 36px rgba(0,0,0,.22) !important;
  font-weight: normal !important;
  text-align: left !important;
  animation: cartSlideUp .24s cubic-bezier(0.32,0.72,0,1);
}

@media (min-width: 600px) {
  #modal-cart.background-modal { align-items: center !important; }
  .modal-carrinho {
    border-radius: 20px !important;
    max-height: 82vh !important;
    animation: cartPop .22s ease;
  }
}

/* ── Header ── */
.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}

.h2-titulo-carrinho {
  margin: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  font-family: "Roboto", sans-serif !important;
  letter-spacing: -.01em;
}

.cart-header-badge {
  font-size: .76rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #54CC0A) 12%, transparent);
  color: color-mix(in srgb, var(--accent, #54CC0A) 78%, #000);
  border: 1px solid color-mix(in srgb, var(--accent, #54CC0A) 26%, transparent);
}
.cart-header-badge:empty { display: none; }

/* ── Lista de itens ── */
.carrinho-itens {
  flex: 1 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-content: initial !important;
}
.carrinho-itens::-webkit-scrollbar { width: 3px; }
.carrinho-itens::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }

/* ── Item — wrapper ── */
.cart-item-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.cart-item-row:last-child { border-bottom: none !important; }

/* ── Item header: nome + preço ── */
.cart-item-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 6px !important;
}

.cart-item-title-group {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.cart-item-name {
  margin: 0 !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
}

.cart-item-price {
  flex-shrink: 0 !important;
  margin: 0 !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  color: color-mix(in srgb, var(--accent, #54CC0A) 72%, #000) !important;
  letter-spacing: -.01em !important;
}

/* adicionais */
.cart-additionals-cat {
  margin: 0 !important;
  font-size: .76rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
}
.cart-additionals-list {
  padding: 0 !important;
  margin: 1px 0 !important;
  list-style: none !important;
}
.cart-additional-item {
  font-size: .76rem !important;
  color: #64748b !important;
  line-height: 1.5 !important;
}
.cart-additional-item strong { color: #475569; font-weight: 700; }

/* ── Item footer: lixeira + controles ── */
.cart-item-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 0 12px !important;
}

/* lixeira */
.cart-remove-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: 1px solid #f1f5f9 !important;
  background: #f8fafc !important;
  color: #cbd5e1 !important;
  font-size: .84rem !important;
  cursor: pointer !important;
  transition: background .14s, color .14s, border-color .14s !important;
  flex-shrink: 0 !important;
}
.cart-remove-btn:hover {
  background: #fdecea !important;
  border-color: #fecaca !important;
  color: #e53e3e !important;
}

/* controles - qty */
.cart-item-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.cart-qty-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .12s !important;
  line-height: 1 !important;
  min-height: 38px !important;
}

.cart-qty-minus {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border-right: 1.5px solid #e2e8f0 !important;
}
.cart-qty-minus:hover { background: #fee2e2 !important; }
.cart-qty-minus:active { background: #fecaca !important; }

.cart-qty-plus {
  background: color-mix(in srgb, var(--accent, #54CC0A) 10%, #fff) !important;
  color: color-mix(in srgb, var(--accent, #54CC0A) 78%, #000) !important;
  border-left: 1.5px solid #e2e8f0 !important;
}
.cart-qty-plus:hover { background: color-mix(in srgb, var(--accent, #54CC0A) 18%, #fff) !important; }
.cart-qty-plus:active { background: color-mix(in srgb, var(--accent, #54CC0A) 26%, #fff) !important; }

.cart-qty-num {
  min-width: 36px !important;
  text-align: center !important;
  font-family: "Roboto", sans-serif !important;
  font-size: .98rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  display: inline-block !important;
}
.cart-qty-num.qty-bounce { animation: qtyBounce .28s ease; }

/* ── Botão de observação: full-width, input-like ── */
.cart-obs-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  margin-bottom: 14px !important;
  border: 1.5px dashed #e2e8f0 !important;
  border-radius: 12px !important;
  background: #fafcff !important;
  color: #94a3b8 !important;
  font-family: "Roboto", sans-serif !important;
  font-size: .86rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: border-color .15s, background .15s, color .15s !important;
  min-height: 42px !important;
}
.cart-obs-btn:hover {
  border-color: color-mix(in srgb, var(--accent, #54CC0A) 40%, #e2e8f0) !important;
  background: color-mix(in srgb, var(--accent, #54CC0A) 5%, #fff) !important;
  color: #475569 !important;
}

/* preenchida com texto — neutro (sem depender da cor accent) */
.cart-obs-btn.cart-obs-btn--filled {
  border-style: solid !important;
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  color: #334155 !important;
  font-weight: 600 !important;
}

.cart-obs-label {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.cart-obs-edit { color: #94a3b8 !important; font-size: .72rem !important; flex-shrink: 0 !important; }

/* ── Total ── */
.cart-total-row {
  padding: 14px 20px 12px !important;
  border-top: 2px solid #f1f5f9 !important;
  flex-shrink: 0 !important;
}

.cart-total-info {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.cart-total-label {
  font-family: "Roboto", sans-serif !important;
  font-size: .86rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  margin: 0 !important;
}

.cart-total-value {
  font-family: "Roboto", sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: -.03em !important;
  margin: 0 !important;
}

/* oculta elemento legado */
.modal-carrinho > p.info-total { display: none !important; }

/* ── Ações do rodapé do CARRINHO (scoped — não afetar outros modais) ── */
#modal-cart .btns-inicio-carrinho {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px 20px calc(14px + env(safe-area-inset-bottom)) !important;
  flex-shrink: 0 !important;
  cursor: default !important;
}

/* Botões lado a lado nos formulários de endereço/retirada */
.modal-form02 .btns-inicio-carrinho,
.modal-endereco .btns-inicio-carrinho {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 0 !important;
  margin-top: 8px !important;
}

/* Botão primário — Finalizar pedido */
.btn-continuar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 54px !important;
  border-radius: 16px !important;
  border: none !important;
  background: var(--accent, #54CC0A) !important;
  color: #08120b !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  letter-spacing: .01em !important;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent, #54CC0A) 40%, transparent) !important;
  transition: transform .14s ease, box-shadow .14s ease !important;
}
.btn-continuar:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent, #54CC0A) 48%, transparent) !important;
}
.btn-continuar:active { transform: scale(.97) !important; }

/* Botão secundário — Pedir mais */
.btn-pedirmais {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 42px !important;
  border-radius: 12px !important;
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  font-family: "Roboto", sans-serif !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: color .14s, background .14s !important;
}
.btn-pedirmais:hover {
  color: #0f172a !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
}

/* Legado */
.img-proximo { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   17. MODAIS INFORMATIVOS (Horários, Entrega, Retirada, Sobre)
   Substitui o estilo antigo de position:absolute do style.css
══════════════════════════════════════════════════════════════ */
.modal-func {
  position: fixed !important;
  inset: 0 !important;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,.42) !important;
  backdrop-filter: blur(12px);
  z-index: 9999 !important;
  padding: 20px;
}
.modal-func.show {
  display: flex !important;
  animation: uiFade .15s ease;
}

.modal-content-func {
  position: relative;
  width: min(760px, 94vw) !important;
  max-width: 94vw !important;
  max-height: 88vh;
  overflow-y: auto;
  box-sizing: border-box;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color: #0f172a !important;
  border-radius: 24px !important;
  border: 1px solid rgba(148,163,184,.22);
  padding: 0 !important;
  text-align: left !important;
  box-shadow: 0 28px 70px rgba(15,23,42,.20) !important;
  animation: uiFade .15s ease;
}
@media (prefers-color-scheme: dark) {
  .modal-content-func {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    color: #0f172a !important;
    border-color: rgba(148,163,184,.22);
  }
}

.ui-modal-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 20px 22px 14px;
  border-bottom: 1px solid rgba(148,163,184,.14);
  background: linear-gradient(180deg, var(--accent-10, rgba(84,204,10,.12)), rgba(255,255,255,0));
}

.ui-modal-head::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent, #54CC0A);
  box-shadow: 0 0 0 6px var(--accent-10, rgba(84,204,10,.12));
  flex: 0 0 auto;
}

.ui-title {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
}

.close-modal {
  position: absolute !important;
  right: 16px !important;
  top: 16px !important;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  width: 36px;
  height: 36px;
  color: inherit !important;
  opacity: .65;
  transition: opacity .15s, background .15s, transform .15s;
  background: rgba(148,163,184,.12);
  border: none;
}
.close-modal:hover { opacity: 1; transform: scale(1.04); background: rgba(15,23,42,.08); }

.ui-body { padding: 16px 22px 22px; }

.ui-sub {
  margin: 0 0 12px;
  opacity: .95;
  font-size: .96rem;
  line-height: 1.5;
  color: #475569;
}

.ui-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f8fafc;
  color: #475569;
  font-size: .86rem;
  line-height: 1.45;
  border: 1px solid rgba(148,163,184,.18);
}

.ui-body > div {
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(148,163,184,.18);
}

.ui-body > .ui-note,
.ui-body > .ui-sub,
.ui-body > .ui-info-list,
.ui-body > .ui-bairros,
.ui-body > .ui-dias {
  margin-top: 12px;
}

/* lista de bairros */
.ui-bairros {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.ui-bairros li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #0f172a;
  box-shadow: 0 8px 18px rgba(15,23,42,.10);
}
.price-pill {
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-10, rgba(84,204,10,.12));
  color: var(--accent, #54CC0A);
  white-space: nowrap;
}

/* dias da semana */
.ui-dias {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.ui-dia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #0f172a;
  font-size: .9rem;
  box-shadow: 0 8px 18px rgba(15,23,42,.10);
}
.ui-dia .nome { font-weight: 600; }
.ui-dia.is-today {
  border-color: color-mix(in srgb, var(--accent, #54CC0A) 40%, transparent);
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
}
.ui-badge {
  font-size: .73rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.ui-badge.open  { background: var(--accent-10, rgba(84,204,10,.12)); color: var(--accent, #54CC0A); }
.ui-badge.close { background: rgba(248,113,113,.12); color: #dc2626; }

/* info list (Sobre) */
.ui-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .ui-info-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.ui-info {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #0f172a;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(15,23,42,.10);
}
.icon-bubble {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--accent-10, rgba(84,204,10,.12));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ui-info .text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ui-info .label { font-size: .73rem; opacity: .72; color: #64748b; }
.ui-info .value { font-weight: 600; overflow-wrap: anywhere; }
.ui-info .value a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(84,204,10,.35);
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.btn-copy {
  flex: 0 0 auto;
  white-space: nowrap;
  border: 1px solid rgba(84,204,10,.18);
  background: #fff;
  color: var(--accent, #54CC0A);
  padding: .48rem .7rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: .82rem;
  display: flex;
  align-items: center;
  gap: .38rem;
  transition: background .12s;
}
.btn-copy:hover { background: var(--accent-10, rgba(84,204,10,.12)); }
@media (max-width: 440px) { .btn-copy span { display: none; } }

@media (max-width: 640px) {
  .modal-func { padding: 12px; }
  .modal-content-func {
    width: min(100%, 100vw) !important;
    max-width: 100vw !important;
    max-height: 92vh;
    border-radius: 18px !important;
  }
  .ui-modal-head {
    padding: 18px 18px 12px;
  }
  .ui-body {
    padding: 14px 18px 18px;
  }
  .ui-bairros,
  .ui-dias,
  .ui-info-list {
    grid-template-columns: 1fr;
  }
  .ui-info {
    grid-template-columns: 40px 1fr;
    align-items: start;
  }
  .ui-info .btn-copy {
    grid-column: 2 / -1;
    justify-self: start;
    margin-top: 2px;
  }
}

/* hero do modal de item */
#conteudo-modal-item .item-hero {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 8px;
}
#conteudo-modal-item .item-hero img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
#conteudo-modal-item .item-meta h2 { margin: 0 0 4px; }
#conteudo-modal-item .chip-subcat {
  display: inline-block;
  font-size: .73rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3b82f6;
  margin: 2px 0 6px;
}
#conteudo-modal-item .item-desc { margin: 0; opacity: .82; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════
   18. MODAL DE OBSERVAÇÃO
══════════════════════════════════════════════════════════════ */

/* backdrop */
.background-observacao {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  background: rgba(0,0,0,.52) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 10002 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .22s ease, visibility .22s ease !important;
}
.background-observacao.ativo {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

/* painel */
.campo-observacao {
  width: min(520px, 100%) !important;
  max-height: 92vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  background: #fff !important;
  color: #0f172a !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: normal !important;
  text-align: left !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,.18) !important;
  animation: cartSlideUp .22s ease;
  overflow: hidden !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}

/* handle */
.obs-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: #e2e8f0;
  margin: 12px auto 0;
  flex-shrink: 0;
}

/* header */
.obs-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px 14px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}

.obs-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent, #54CC0A) 12%, transparent);
  color: color-mix(in srgb, var(--accent, #54CC0A) 78%, #000);
  font-size: 1.15rem;
  flex-shrink: 0;
}

.obs-header-kicker {
  margin: 0 0 2px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.obs-header-title {
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  font-family: "Roboto", sans-serif !important;
}

/* corpo */
.obs-body {
  padding: 18px 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  overflow-y: auto;
}

.obs-label {
  font-size: .86rem;
  font-weight: 600;
  color: #475569;
  display: block;
}

/* textarea */
.observacao {
  width: 100% !important;
  min-height: 110px !important;
  height: auto !important;
  resize: none !important;
  padding: 13px 14px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  font-family: "Roboto", sans-serif !important;
  font-size: .95rem !important;
  color: #0f172a !important;
  background: #f8fafc !important;
  transition: border-color .15s, box-shadow .15s !important;
  line-height: 1.55 !important;
  box-sizing: border-box !important;
}
.observacao:focus {
  outline: none !important;
  border-color: var(--accent, #54CC0A) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #54CC0A) 14%, transparent) !important;
}
.observacao::placeholder { color: #94a3b8 !important; }

/* contador de caracteres */
.obs-char-hint {
  margin: 0;
  font-size: .76rem;
  color: #94a3b8;
  text-align: right;
}
.obs-char-hint--warn { color: #f59e0b; font-weight: 600; }

/* botões */
.obs-actions,
.btn-observacao {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  padding: 14px 22px calc(16px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid #f1f5f9 !important;
  flex-shrink: 0 !important;
}

.btn-obs-voltar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  width: 100% !important;
  border-radius: 14px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #fff !important;
  color: #475569 !important;
  font-family: "Roboto", sans-serif !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .13s, border-color .13s !important;
}
.btn-obs-voltar:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

.btn-obs-confirma {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  width: 100% !important;
  border-radius: 14px !important;
  border: none !important;
  background: var(--accent, #54CC0A) !important;
  color: #08120b !important;
  font-family: "Roboto", sans-serif !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #54CC0A) 36%, transparent) !important;
  transition: transform .13s, box-shadow .13s !important;
}
.btn-obs-confirma:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent, #54CC0A) 44%, transparent) !important;
}
.btn-obs-confirma:active { transform: scale(.97) !important; }

/* esconde imagem antiga */
.img-confirme { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   19. MOBILE — RESPONSIVIDADE PROFISSIONAL
   Regras cirúrgicas: não duplicam, não brigam com style.css
══════════════════════════════════════════════════════════════ */

/* ── Tap targets globais ── */
.item-card-action { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; border-radius: 11px !important; }
.cart-qty-btn     { width: 36px !important; height: 36px !important; }
.cart-remove-btn  { width: 36px !important; height: 36px !important; }
.cart-obs-btn     { min-height: 38px !important; padding: 8px 12px !important; }

/* ── FAB: posição correta com safe-area ── */
.view-carrinho {
  bottom: max(20px, calc(16px + env(safe-area-inset-bottom))) !important;
  right:  max(16px, env(safe-area-inset-right)) !important;
}

/* ── Nav centraliza ou scrolla conforme JS ── */
.cardapio-shell .menu-nav.is-centered  { justify-content: center !important; }
.cardapio-shell .menu-nav.is-scrollable { justify-content: flex-start !important; }

/* ── Padding-bottom: conteúdo limpo acima do FAB
   Aplica SOMENTE em .cardapio-shell — #menu está dentro dele,
   aplicar nos dois geraria espaço em branco duplo ── */
.cardapio-shell {
  padding-bottom: max(88px, calc(72px + env(safe-area-inset-bottom))) !important;
}

/* ── Toast: sempre no topo direito (padrão do Toastify — não reposicionar) ── */
.toastify.on {
  border-radius: 12px !important;
  font-size: .9rem !important;
  padding: 11px 18px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.20) !important;
  font-family: "Roboto", sans-serif !important;
  max-width: min(360px, calc(100vw - 24px)) !important;
}

/* ── Mobile 640px ── */
@media (max-width: 640px) {
  /* toolbar: flat, sem bordas laterais */
  .cardapio-toolbar {
    padding: 12px 14px !important;
    gap: 12px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(15,23,42,.09) !important;
    margin: 0 !important;
  }
  .cardapio-title  { font-size: 1.05rem !important; }
  .cardapio-search { height: 44px !important; }
  .cardapio-shell  { margin-top: 6px !important; }

  /* nav wrapper: sem borda pesada */
  .cardapio-shell .menu-wrapper {
    padding: 8px 14px !important;
    margin-bottom: 12px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.06) !important;
  }

  /* seções de categoria: espaçamento confortável */
  .categoria-section               { margin-bottom: 24px !important; }
  .cardapio-shell .menu-section-header { padding-bottom: 10px !important; margin-bottom: 14px !important; }
  .categoria-titulo                { font-size: 1rem !important; }
  .categoria-meta                  { font-size: .74rem !important; padding: 4px 10px !important; }

  /* items: descrição em 1 linha → mais cards visíveis por tela */
  .cardapio-shell .descricao-produto { -webkit-line-clamp: 1 !important; font-size: .8rem !important; }
  .cardapio-shell .desc-comidas      { padding: 10px 12px !important; }
  .cardapio-shell .conteudo-categoria { gap: 10px !important; }

  /* footer */
  .footer { padding: 14px 12px calc(14px + env(safe-area-inset-bottom)) !important; }
}

/* ── Hero estreito < 380px ── */
@media (max-width: 380px) {
  .brand-lockup    { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 8px !important; }
  .brand-chip      { align-items: center !important; }
  .brand-chip::after { margin: 0 auto !important; }
  .logoprincipal   { width: 60px !important; }
  .brand-name      { font-size: 1.1rem !important; }
}

/* ── Extra small < 360px ── */
@media (max-width: 360px) {
  /* info cards */
  .painel-cards { gap: 4px !important; padding: 8px 0 0 !important; overflow: hidden !important; }
  .info-card    { min-width: 0 !important; max-width: none !important; padding: 7px 3px !important; }
  .info-icon    { width: 26px !important; height: 26px !important; font-size: .78rem !important; }
  .info-titulo  { font-size: .55rem !important; }

  /* cart modal */
  .cart-item-row        { padding: 14px 16px !important; }
  .cart-qty-btn         { width: 32px !important; height: 32px !important; }
  .cart-remove-btn      { width: 30px !important; height: 30px !important; }
  .cart-qty-num         { min-width: 18px !important; font-size: .88rem !important; }
  .cart-total-value     { font-size: 1.1rem !important; }
  #modal-cart .btns-inicio-carrinho { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important; gap: 8px !important; }
  .modal-carrinho       { border-radius: 20px 20px 0 0 !important; }
  .cart-header          { padding: 16px 16px 12px !important; }

  /* obs modal */
  .campo-observacao { border-radius: 20px 20px 0 0 !important; }
  .obs-header       { padding: 14px 16px 12px !important; }
  .obs-body         { padding: 14px 16px 10px !important; }
  .obs-actions      { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)) !important; }
  .observacao       { min-height: 90px !important; }
}

/* ── Ultra small < 340px ── */
@media (max-width: 340px) {
  .cardapio-shell .div-info-produtos.item-card,
  .cardapio-shell .div-info-produtos.indisponivel {
    grid-template-columns: 80px minmax(0,1fr) !important;
  }
  .cardapio-shell .div-img-menu,
  .cardapio-shell .img-itens    { width: 80px !important; min-height: 80px !important; }
  .cardapio-shell .nome-produto { font-size: .85rem !important; }
  .item-card-action             { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; }
}

/* ── Prefers reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .modal-carrinho, .campo-observacao, .sheet-panel,
  .card-item, .info-card, .btn-primary, .btn-continuar {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   21. FIX CRÍTICO — background-confirm sem position:fixed
   O style.css original nunca definiu position para este elemento,
   causando o bug de "volta ao cardápio" ao confirmar pedido.
══════════════════════════════════════════════════════════════ */
#background-confirm,
.background-confirm {
  position: fixed !important;
  inset: 0 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(5, 10, 22, 0.68) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 10001 !important;
  padding: 16px !important;
  overflow-y: auto !important;
}

#background-confirm.ativo,
.background-confirm.ativo {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

/* ═══════════════════════════════════════════════════════════════
   22. TELA DE PAGAMENTO — polimento e responsividade
══════════════════════════════════════════════════════════════ */

/* Botões Voltar: escondidos por padrão (JS inicializa o correto) */
#btn-voltar-pagamento { display: none; }

/* Imagens PNG antigas substituídas por ícones */
.img-voltar,
.img-proximo,
.img-confirme { display: none !important; }

/* Botões de voltar/avançar — estilo moderno */
.btn-voltar-endereco,
.btn-voltar-pagamento,
.btn-retornar,
.btn-pagamento,
.btn-avancar-retirada {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  padding: 0 20px !important;
  border-radius: 14px !important;
  font-family: "Inter", "Roboto", sans-serif !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .14s, transform .14s !important;
}

.btn-voltar-endereco,
.btn-voltar-pagamento,
.btn-retornar {
  border: 1.5px solid rgba(148, 163, 184, 0.3) !important;
  background: #fff !important;
  color: #475569 !important;
}
.btn-voltar-endereco:hover,
.btn-voltar-pagamento:hover,
.btn-retornar:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
}

.btn-pagamento,
.btn-avancar-retirada {
  border: none !important;
  background: #0f172a !important;
  color: #fff !important;
}
.btn-pagamento:hover,
.btn-avancar-retirada:hover {
  background: #1e293b !important;
  transform: translateY(-1px) !important;
}

/* Botão enviar pedido */
.btn-enviar-pedido {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 52px !important;
  padding: 0 28px !important;
  border-radius: 16px !important;
  border: none !important;
  background: var(--accent, #54CC0A) !important;
  color: #08120b !important;
  font-family: "Inter", "Roboto", sans-serif !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent, #54CC0A) 40%, transparent) !important;
  transition: transform .14s, box-shadow .14s !important;
}
.btn-enviar-pedido:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent, #54CC0A) 50%, transparent) !important;
}
.btn-enviar-pedido:active { transform: scale(.97) !important; }

/* Footer da tela de pagamento */
.btns-voltar-finalizar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding-top: 4px !important;
}

/* Cupom de desconto */
.cupom-desconto-bloco {
  padding: 16px !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(148, 163, 184, 0.18) !important;
  background: #f8fafc !important;
}

.titulo-cupom {
  font-size: .88rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.input-cupom-wrapper {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

#cupom-desconto {
  flex: 1 !important;
  height: 44px !important;
  padding: 0 14px !important;
  border: 1.5px solid rgba(148, 163, 184, 0.25) !important;
  border-radius: 12px !important;
  font-family: "Inter", "Roboto", sans-serif !important;
  font-size: .9rem !important;
  background: #fff !important;
  outline: none !important;
  transition: border-color .14s !important;
}
#cupom-desconto:focus {
  border-color: var(--accent, #54CC0A) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #54CC0A) 14%, transparent) !important;
}

#btn-aplicar-cupom {
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  border: none !important;
  background: var(--accent, #54CC0A) !important;
  color: #08120b !important;
  font-family: "Inter", "Roboto", sans-serif !important;
  font-size: .88rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: transform .13s !important;
}
#btn-aplicar-cupom:hover { transform: translateY(-1px) !important; }

/* ─ Mobile: tela de pagamento ─ */
@media (max-width: 640px) {
  .btns-voltar-finalizar {
    justify-content: space-between !important;
  }
  .btn-enviar-pedido {
    flex: 1 !important;
    height: 50px !important;
    padding: 0 16px !important;
    font-size: .88rem !important;
  }
  .btn-voltar-endereco,
  .btn-voltar-pagamento,
  .btn-retornar {
    height: 44px !important;
    padding: 0 16px !important;
    font-size: .86rem !important;
  }
  .input-cupom-wrapper { flex-direction: row !important; }
}

/* ═══════════════════════════════════════════════════════════════
   23. TELA DE CONFIRMAÇÃO — redesign profissional
══════════════════════════════════════════════════════════════ */

/* Botão WhatsApp enviar pedido */
.btn-whatsapp-enviar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 52px !important;
  border-radius: 16px !important;
  border: none !important;
  background: #25D366 !important;
  color: #fff !important;
  font-family: "Inter", "Roboto", sans-serif !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.36) !important;
  transition: transform .14s, box-shadow .14s !important;
}
.btn-whatsapp-enviar:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.46) !important;
}
.btn-whatsapp-enviar img { display: none !important; }
.btn-whatsapp-enviar::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 00-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") no-repeat center / contain;
  flex-shrink: 0;
}

/* Botão copiar PIX */
.btn-copiar-pix {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(148, 163, 184, 0.28) !important;
  background: #fff !important;
  color: #475569 !important;
  font-family: "Inter", "Roboto", sans-serif !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .13s !important;
}
.btn-copiar-pix:hover { background: #f8fafc !important; }

/* Botão fechar confirmação */
.btn-closeConfirm {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(239, 68, 68, 0.22) !important;
  background: #fef2f2 !important;
  color: #ef4444 !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: background .13s !important;
}
.btn-closeConfirm:hover { background: #fee2e2 !important; }

/* ─ Mobile: confirmação ─ */
@media (max-width: 640px) {
  .modal-confirm {
    padding: 16px !important;
    border-radius: 18px !important;
    width: 100% !important;
    max-height: 90vh !important;
  }
  .btn-whatsapp-enviar {
    height: 50px !important;
    font-size: .9rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   24. FORMULÁRIOS — endereço, retirada, inputs, grid mobile
══════════════════════════════════════════════════════════════ */

/* ── Inputs com classe input-cep: label vs input vs span de erro ── */
label.input-cep {
  font-family: "Inter", "Roboto", sans-serif !important;
  font-size: .86rem !important;
  font-weight: 700 !important;
  color: #334155 !important;
  display: block !important;
}

input.input-cep {
  width: 100% !important;
  min-height: 46px !important;
  padding: .75rem 1rem !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(148, 163, 184, 0.28) !important;
  background: #fff !important;
  color: #0f172a !important;
  font-family: "Inter", "Roboto", sans-serif !important;
  font-size: .95rem !important;
  box-sizing: border-box !important;
  display: block !important;
  transition: border-color .15s, box-shadow .15s !important;
}
input.input-cep:focus {
  outline: none !important;
  border-color: var(--accent, #54CC0A) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #54CC0A) 14%, transparent) !important;
}

span.input-cep#erro-cep {
  font-size: .8rem !important;
  font-weight: 600 !important;
  color: #ef4444 !important;
  margin-top: -4px !important;
  display: none !important; /* mostrado via JS quando CEP inválido */
}

/* ── Inputs readonly — visual diferenciado ── */
.input[readonly],
input.input-cep[readonly] {
  background: #f8fafc !important;
  color: #64748b !important;
  cursor: default !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

/* ── Select no formulário de endereço ── */
select.input {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
  cursor: pointer !important;
}
select.input:disabled {
  background-color: #f8fafc !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
}

/* ── h2-form: título dos modais de formulário ── */
.h2-form {
  margin: 0 0 4px !important;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

/* ── Botões Voltar/Próximo nos formulários ── */
.btn-retornar {
  min-width: 0 !important;
  flex: 0 0 auto !important;
  background: #fff !important;
  border: 1.5px solid rgba(148, 163, 184, 0.28) !important;
  color: #475569 !important;
  padding: 0 18px !important;
}
.btn-retornar:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
}

.btn-pagamento,
.btn-avancar-retirada {
  flex: 1 !important;
  background: linear-gradient(135deg, var(--accent, #54CC0A), color-mix(in srgb, var(--accent, #54CC0A) 80%, #fff)) !important;
  color: #08120b !important;
  border: none !important;
  font-weight: 800 !important;
}
.btn-pagamento:hover,
.btn-avancar-retirada:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent, #54CC0A) 36%, transparent) !important;
}

/* ── Modal de escolha de endereço ── */
.modal-content-endereco {
  padding: 24px !important;
}
.modal-content-endereco h3 {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  margin: 0 0 6px !important;
}
.modal-content-endereco p {
  font-size: .9rem !important;
  color: #64748b !important;
  margin: 0 0 16px !important;
}
#btn-novo-endereco {
  margin-top: 12px !important;
  width: 100% !important;
  justify-content: center !important;
}

/* ── Payment grid: stack no mobile ── */
@media (max-width: 700px) {
  .payment-grid {
    grid-template-columns: 1fr !important;
  }
  .conteudo-pagamento {
    max-height: 94vh !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }
  .btns-voltar-finalizar {
    flex-wrap: nowrap !important;
  }
  .btn-enviar-pedido {
    font-size: .86rem !important;
    padding: 0 14px !important;
  }
}

/* ── Confirm grid: stack no mobile ── */
@media (max-width: 600px) {
  .confirm-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ── Formulários: layout mobile ── */
@media (max-width: 600px) {
  .conteudo-endereco,
  .modal-content-endereco {
    padding: 18px !important;
    border-radius: 18px !important;
    gap: 14px !important;
  }
  .h2-form { font-size: 1.05rem !important; }
  .formulario { gap: 8px !important; }
  .input, input.input-cep { min-height: 44px !important; font-size: .9rem !important; }
  .modal-form02 .btns-inicio-carrinho,
  .modal-endereco .btns-inicio-carrinho { gap: 8px !important; }
  .btn-retornar  { padding: 0 14px !important; font-size: .86rem !important; }
  .btn-pagamento { padding: 0 14px !important; font-size: .86rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   25. TELA DE CONFIRMAÇÃO — redesign completo (PIX + layout)
══════════════════════════════════════════════════════════════ */

/* Separador "às" entre os horários de previsão */
.confirm-separator {
  margin: 0 4px;
  color: #94a3b8;
  font-weight: 400;
  font-size: .88em;
}

/* Label da seção Total */
.section-total .confirm-label {
  display: block;
  margin: 0 0 4px;
}

/* Botão fechar com ícone X */
.btn-closeConfirm i { font-size: .9rem !important; }

/* Botão WhatsApp — usa ícone FA (remove SVG ::before) */
.btn-whatsapp-enviar::before { display: none !important; }
.btn-whatsapp-enviar i {
  font-size: 1.15rem;
  flex-shrink: 0;
}

/* Header do bloco de pagamento */
.confirm-payment-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.confirm-payment-method {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  text-transform: capitalize;
}

/* Bloco PIX — flex column */
.chave-pix,
#chave-pix {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  border: 1.5px solid rgba(148, 163, 184, 0.22) !important;
}

/* Aviso PIX */
.paragrafo-pix {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: .86rem !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}
.paragrafo-pix i { color: #f59e0b; margin-top: 2px; flex-shrink: 0; }

/* Row: chave + botão copiar */
.pix-key-row {
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
}
.pix-key-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.pix-key-label {
  font-size: .76rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  display: block !important;
}
.pix-key-input,
#input-pix {
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border: 1.5px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #0f172a !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  cursor: default !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
}

/* Botão copiar redesenhado */
.btn-copiar-pix {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 44px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: 1.5px solid color-mix(in srgb, var(--accent, #54CC0A) 32%, transparent) !important;
  background: color-mix(in srgb, var(--accent, #54CC0A) 8%, #fff) !important;
  color: color-mix(in srgb, var(--accent, #54CC0A) 72%, #000) !important;
  font-family: "Inter", "Roboto", sans-serif !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: background .13s, border-color .13s !important;
}
.btn-copiar-pix:hover {
  background: color-mix(in srgb, var(--accent, #54CC0A) 14%, #fff) !important;
}

/* Troco */
.confirm-troco {
  display: none; /* mostrado pelo JS quando há troco */
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.18);
}
.confirm-troco__label {
  margin: 0 !important;
  font-size: .88rem !important;
  color: #64748b !important;
}
.confirm-troco__value {
  font-weight: 800 !important;
  color: #0f172a !important;
}

/* Preserva os IDs legacy para o JS (troco-Text e troco-confirm dentro de confirm-troco-row) */
#troco-Text { display: block !important; margin: 0 !important; }
#troco-confirm { display: inline !important; }

/* Mobile: confirmação */
@media (max-width: 560px) {
  .pix-key-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .btn-copiar-pix {
    width: 100% !important;
    height: 42px !important;
  }
  .chave-pix, #chave-pix {
    padding: 12px !important;
    gap: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   26. CHECKOUT — refinamentos de responsividade e estados
══════════════════════════════════════════════════════════════ */
body:has(.background-retirada-entrega.ativo) #view-carrinho,
body:has(#modal-escolha-endereco.ativo) #view-carrinho,
body:has(#modalObservacao.ativo) #view-carrinho {
  display: none !important;
}

.background-retirada-entrega,
.modal-endereco,
.modal-form02,
.modal-escolha-endereco,
.background-pagamento,
.background-confirm,
.background-observacao {
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
}

.conteudo-endereco,
.modal-content-endereco,
.conteudo-pagamento,
.modal-confirm {
  width: min(100%, 760px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.conteudo-endereco {
  gap: 14px !important;
}

.conteudo-endereco .formulario {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
}

.conteudo-endereco .formulario label,
.conteudo-endereco .formulario input,
.conteudo-endereco .formulario select,
.conteudo-endereco .formulario span {
  min-width: 0 !important;
}

.conteudo-endereco .formulario label {
  margin: 0 !important;
}

.conteudo-endereco .formulario label,
.conteudo-endereco .formulario input,
.conteudo-endereco .formulario select,
.conteudo-endereco .formulario span.input-cep {
  grid-column: span 1 !important;
}

.conteudo-endereco .formulario label[for="telefone"],
.conteudo-endereco .formulario #telefone,
.conteudo-endereco .formulario label[for="nome"],
.conteudo-endereco .formulario #nome,
.conteudo-endereco .formulario label[for="rua"],
.conteudo-endereco .formulario #rua,
.conteudo-endereco .formulario label[for="pontoReferencia"],
.conteudo-endereco .formulario #pontoReferencia {
  grid-column: 1 / -1 !important;
}

.input,
input.input-cep,
select.input,
#cupom-desconto,
#troco,
#input-pix,
.observacao {
  font-size: 16px !important;
}

.modal-endereco .btns-inicio-carrinho,
.modal-form02 .btns-inicio-carrinho {
  position: sticky !important;
  bottom: -1px !important;
  z-index: 2 !important;
  margin: 2px -2px -2px !important;
  padding-top: 10px !important;
  background: linear-gradient(180deg, rgba(248,250,252,0), #f8fafc 28%, #f8fafc 100%) !important;
}

.modal-content-endereco {
  width: min(100%, 640px) !important;
  gap: 12px !important;
}

#lista-endereco-encontrado {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
}

.card-endereco {
  width: 100% !important;
  border: 1.5px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: #0f172a !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  text-align: left !important;
  cursor: pointer !important;
  font-family: "Inter", "Roboto", sans-serif !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
}

.card-endereco:hover,
.card-endereco.selecionado {
  border-color: var(--accent, #54CC0A) !important;
  box-shadow: 0 0 0 4px var(--accent-10, rgba(84, 204, 10, 0.12)) !important;
}

.card-endereco__top,
.card-endereco__meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.card-endereco__top strong {
  font-size: .98rem !important;
  font-weight: 800 !important;
}

.card-endereco__top small {
  flex: 0 0 auto !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  color: color-mix(in srgb, var(--accent, #54CC0A) 72%, #111827) !important;
}

.card-endereco__line {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  color: #334155 !important;
  line-height: 1.35 !important;
}

.card-endereco__line i {
  color: var(--accent, #54CC0A) !important;
  margin-top: 2px !important;
}

.card-endereco__meta,
.card-endereco__ref {
  color: #64748b !important;
  font-size: .86rem !important;
}

.card-endereco__ref {
  display: block !important;
  padding-top: 2px !important;
}

.conteudo-pagamento {
  width: min(100%, 900px) !important;
  gap: 14px !important;
}

.payment-grid {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  align-items: start !important;
}

.forma-pagamento {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.div-opcartao-opdinheiro {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.btn-cartao,
.btn-pix,
.btn-opdinheiro,
.btn-opcartao {
  min-width: 0 !important;
  min-height: 54px !important;
  text-align: center !important;
}

.radio-debito-credito,
.div-radio,
.campo-troco {
  width: 100% !important;
}

.op-debito-credito {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto !important;
  gap: 8px !important;
}

.div-radio {
  grid-template-columns: 1fr auto 1fr auto !important;
  gap: 8px !important;
}

.btns-voltar-finalizar {
  display: grid !important;
  grid-template-columns: minmax(120px, auto) 1fr !important;
  align-items: center !important;
}

#btn-voltar-endereco[style*="none"],
#btn-voltar-pagamento[style*="none"] {
  display: none !important;
}

#chave-pix[style*="none"],
#div-opcartao-opdinheiro[style*="none"],
#div-debcred[style*="none"],
#div-troco[style*="none"],
#campo-troco[style*="none"] {
  display: none !important;
}

.btn-voltar-endereco,
.btn-voltar-pagamento {
  width: 100% !important;
}

.btn-enviar-pedido {
  width: 100% !important;
}

.modal-confirm {
  width: min(100%, 720px) !important;
  gap: 14px !important;
}

.confirm-hero {
  padding-right: 44px !important;
  align-items: flex-start !important;
}

.confirm-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.payment-details,
.section-entrega,
.section-total,
.div-btn-confirm {
  padding: 14px !important;
}

.pix-key-row {
  align-items: stretch !important;
}

@media (max-width: 760px) {
  .background-retirada-entrega,
  .modal-endereco,
  .modal-form02,
  .modal-escolha-endereco,
  .background-pagamento,
  .background-confirm,
  .background-observacao {
    align-items: flex-end !important;
    padding: 8px !important;
  }

  .modal-retirada-entrega,
  .conteudo-endereco,
  .modal-content-endereco,
  .conteudo-pagamento,
  .modal-confirm,
  .campo-observacao {
    width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 20px 20px 14px 14px !important;
    padding: 16px !important;
  }

  .conteudo-endereco .formulario {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .conteudo-endereco .formulario label,
  .conteudo-endereco .formulario input,
  .conteudo-endereco .formulario select,
  .conteudo-endereco .formulario span.input-cep {
    grid-column: 1 / -1 !important;
  }

  .payment-hero,
  .confirm-hero {
    gap: 10px !important;
  }

  .payment-hero__icon,
  .confirm-hero__icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }

  .payment-hero__lead,
  .subTitulo-confirm {
    font-size: .9rem !important;
    line-height: 1.35 !important;
  }

  .payment-grid,
  .confirm-grid,
  .forma-pagamento,
  .btns-voltar-finalizar {
    grid-template-columns: 1fr !important;
  }

  .div-opcartao-opdinheiro {
    grid-template-columns: 1fr !important;
  }

  .btns-voltar-finalizar {
    gap: 8px !important;
  }

  .input-cupom-wrapper,
  .pix-key-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #btn-aplicar-cupom,
  .btn-copiar-pix {
    width: 100% !important;
  }

  .op-debito-credito {
    grid-template-columns: 1fr auto !important;
  }

  .div-radio {
    grid-template-columns: 1fr auto !important;
  }

  .card-endereco__top,
  .card-endereco__meta {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .confirm-hero {
    padding-right: 38px !important;
  }

  .titulo-confirm,
  .h3-pagamento {
    font-size: 1.18rem !important;
  }

  .btn-whatsapp-enviar,
  .btn-enviar-pedido {
    min-height: 50px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   27. MODAL DE PERSONALIZAÇÃO DO ITEM
══════════════════════════════════════════════════════════════ */
#modal-item-personalizacao.background-modal {
  position: fixed !important;
  inset: 0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
  background: rgba(5, 10, 22, .62) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  z-index: 10020 !important;
  overflow: hidden !important;
}

#modal-item-personalizacao.background-modal.ativo {
  display: flex !important;
}

#conteudo-modal-item.modal-item-conteudo {
  width: min(100%, 680px) !important;
  max-width: 680px !important;
  max-height: calc(100dvh - 28px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0 !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color: #0f172a !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .28) !important;
  font-family: "Inter", "Roboto", sans-serif !important;
  display: flex !important;
  flex-direction: column !important;
}

#conteudo-modal-item .item-hero {
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 16px !important;
  border-bottom: 1px solid rgba(148, 163, 184, .16) !important;
  background: #fff !important;
}

#conteudo-modal-item .item-hero img {
  width: 116px !important;
  height: 96px !important;
  object-fit: cover !important;
  border-radius: 16px !important;
  background: #f1f5f9 !important;
}

#conteudo-modal-item .item-meta {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#conteudo-modal-item .item-meta h2 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: clamp(1.08rem, 2.4vw, 1.45rem) !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
}

#conteudo-modal-item .chip-subcat {
  align-self: flex-start !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: var(--accent-10, rgba(84, 204, 10, .12)) !important;
  color: color-mix(in srgb, var(--accent, #54CC0A) 72%, #111827) !important;
  font-size: .74rem !important;
  font-weight: 800 !important;
}

#conteudo-modal-item .item-desc {
  margin: 0 !important;
  color: #64748b !important;
  font-size: .9rem !important;
  line-height: 1.4 !important;
}

#conteudo-modal-item .modal-total {
  margin: 14px 16px 0 !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--accent, #54CC0A) 8%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--accent, #54CC0A) 22%, transparent) !important;
  color: #0f172a !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}

#conteudo-modal-item .categoria-bloco {
  margin: 14px 16px 0 !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(148, 163, 184, .20) !important;
  border-left: 4px solid var(--accent, #54CC0A) !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
}

#conteudo-modal-item .categoria-bloco h3 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

#conteudo-modal-item .categoria-regras {
  margin: 6px 0 12px !important;
  color: #64748b !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
}

#conteudo-modal-item .opcao-container {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#conteudo-modal-item .checkbox-container,
#conteudo-modal-item .opcao-container {
  width: 100% !important;
}

#conteudo-modal-item .checkbox-container {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(148, 163, 184, .20) !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  cursor: pointer !important;
  transition: border-color .14s, background .14s, box-shadow .14s !important;
}

#conteudo-modal-item .checkbox-container:hover {
  border-color: color-mix(in srgb, var(--accent, #54CC0A) 42%, #cbd5e1) !important;
  background: #fff !important;
}

#conteudo-modal-item .checkbox-container:has(input:checked) {
  border-color: var(--accent, #54CC0A) !important;
  background: color-mix(in srgb, var(--accent, #54CC0A) 7%, #fff) !important;
  box-shadow: 0 0 0 3px var(--accent-10, rgba(84,204,10,.12)) !important;
}

#conteudo-modal-item input[type="radio"],
#conteudo-modal-item input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: var(--accent, #54CC0A) !important;
}

#conteudo-modal-item .opcao-texto {
  min-width: 0 !important;
  color: #0f172a !important;
  font-size: .94rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

#conteudo-modal-item .opcao-detalhe {
  color: #64748b !important;
  font-weight: 500 !important;
}

#conteudo-modal-item .opcao-preco {
  color: color-mix(in srgb, var(--accent, #54CC0A) 72%, #111827) !important;
  font-weight: 900 !important;
}

#conteudo-modal-item .nomeDiv {
  min-width: 0 !important;
  color: #0f172a !important;
  font-size: .94rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

#conteudo-modal-item .opcao-container:has(.contador-controls) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(148, 163, 184, .20) !important;
  background: #f8fafc !important;
}

#conteudo-modal-item .contador-controls {
  display: inline-grid !important;
  grid-template-columns: 34px 42px 34px !important;
  align-items: center !important;
  gap: 6px !important;
}

#conteudo-modal-item .btn-contador-menos,
#conteudo-modal-item .btn-contador-mais {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, .25) !important;
  background: #fff !important;
  color: #0f172a !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

#conteudo-modal-item .btn-contador-mais {
  background: var(--accent, #54CC0A) !important;
  color: #08120b !important;
  border-color: transparent !important;
}

#conteudo-modal-item .input-quantidade {
  width: 42px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 1px solid rgba(148, 163, 184, .25) !important;
  border-radius: 10px !important;
  background: #fff !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

#conteudo-modal-item .bloco-observacao {
  margin: 14px 16px 0 !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(148, 163, 184, .20) !important;
  background: #fff !important;
}

#conteudo-modal-item .bloco-observacao label {
  display: block !important;
  margin: 0 0 8px !important;
  color: #334155 !important;
  font-size: .86rem !important;
  font-weight: 800 !important;
}

#conteudo-modal-item #observacao-item {
  width: 100% !important;
  min-height: 78px !important;
  resize: vertical !important;
  padding: 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(148, 163, 184, .25) !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

#conteudo-modal-item #observacao-item:focus {
  outline: none !important;
  border-color: var(--accent, #54CC0A) !important;
  box-shadow: 0 0 0 3px var(--accent-10, rgba(84,204,10,.12)) !important;
  background: #fff !important;
}

#conteudo-modal-item .modal-footer.fixado-footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 4 !important;
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 14px 0 0 !important;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(180deg, rgba(248,250,252,.82), #fff 36%, #fff 100%) !important;
  border-top: 1px solid rgba(148, 163, 184, .18) !important;
  text-align: left !important;
}

#conteudo-modal-item #preco-fixado-total {
  color: #0f172a !important;
  font-size: .98rem !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#conteudo-modal-item .divBtns {
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(96px, .42fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
}

#conteudo-modal-item .modal-btn-cancel,
#conteudo-modal-item .modal-btn-add {
  width: 100% !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  font-family: "Inter", "Roboto", sans-serif !important;
  font-size: .9rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

#conteudo-modal-item .modal-btn-cancel {
  border: 1px solid rgba(148, 163, 184, .25) !important;
  background: #fff !important;
  color: #475569 !important;
}

#conteudo-modal-item .modal-btn-add {
  border: none !important;
  background: var(--accent, #54CC0A) !important;
  color: #08120b !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent, #54CC0A) 32%, transparent) !important;
}

/* Mantém os botões de avanço dos formulários na cor principal escolhida */
#pagamento-btn,
#btn-avancar-retirada {
  background: var(--accent, #54CC0A) !important;
  color: #08120b !important;
  border: none !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent, #54CC0A) 34%, transparent) !important;
}

#pagamento-btn:hover,
#btn-avancar-retirada:hover {
  background: color-mix(in srgb, var(--accent, #54CC0A) 88%, #fff) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent, #54CC0A) 42%, transparent) !important;
}

/* Evita zoom automático do navegador ao focar campos no mobile */
input,
select,
textarea,
button,
.cardapio-search input,
#campo-busca,
.input,
.input-cep,
.observacao,
#observacao-item,
#cupom-desconto,
#troco,
#input-pix {
  font-size: 16px !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus,
.cardapio-search:focus-within,
.cardapio-search input:focus,
#campo-busca:focus {
  transform: none !important;
  zoom: 1 !important;
}

@media (max-width: 640px) {
  #modal-item-personalizacao.background-modal {
    align-items: flex-end !important;
    padding: 8px !important;
  }

  #conteudo-modal-item.modal-item-conteudo {
    width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 22px 22px 14px 14px !important;
  }

  #conteudo-modal-item .item-hero {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  #conteudo-modal-item .item-hero img {
    width: 88px !important;
    height: 78px !important;
    border-radius: 14px !important;
  }

  #conteudo-modal-item .categoria-bloco,
  #conteudo-modal-item .bloco-observacao,
  #conteudo-modal-item .modal-total {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  #conteudo-modal-item .opcao-container:has(.contador-controls) {
    grid-template-columns: 1fr !important;
  }

  #conteudo-modal-item .contador-controls {
    justify-content: end !important;
  }

  #conteudo-modal-item .modal-footer.fixado-footer {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  }

  #conteudo-modal-item .divBtns {
    grid-template-columns: .42fr 1fr !important;
  }

  #conteudo-modal-item .modal-btn-cancel,
  #conteudo-modal-item .modal-btn-add {
    min-height: 48px !important;
    font-size: .86rem !important;
    padding: 0 10px !important;
  }
}