/* ============================================================================
   ZERANO DELIVERY — Camada de Redesign (Piloto: Vitrine/Cardápio)
   ----------------------------------------------------------------------------
   Carregada DEPOIS de style.css para sobrescrever a aparência sem quebrar a
   lógica (os IDs/classes usados pelo JS são preservados).
   A cor da marca é uma variável única (--zn-brand): troque aqui e o site
   inteiro muda de cor. Ideal para tematizar por estabelecimento.
   ========================================================================== */

:root {
    /* ---- Marca (quente / apetitosa) ---- */
    --zn-brand:        #E8452B;   /* principal  */
    --zn-brand-dark:   #C6371F;   /* hover/pressionado */
    --zn-brand-2:      #FF8A1E;   /* laranja-chama de apoio (gradientes) */
    --zn-brand-soft:   #FDECE7;   /* tinta clara de fundo */
    --zn-brand-rgb:    232, 69, 43;

    /* ---- Degradê-assinatura (vermelho -> laranja) ---- */
    --zn-grad:         linear-gradient(135deg, #E8452B 0%, #F5661F 45%, #FF9A2E 100%);
    --zn-grad-soft:    linear-gradient(135deg, #FDECE7, #FFF1E4);

    /* ---- Semânticos ---- */
    --zn-ok:           #2FA65A;
    --zn-ok-soft:      #E7F6EC;

    /* ---- Neutros / superfícies (quentes, puxados p/ o acento) ---- */
    --zn-ink:          #211712;   /* texto forte (marrom-quase-preto) */
    --zn-ink-2:        #6F625A;   /* texto secundário (cinza quente) */
    --zn-line:         #F0E7E1;   /* bordas suaves */
    --zn-line-2:       #E7DACF;   /* borda um pouco mais marcada */
    --zn-surface:      #FFFFFF;
    --zn-bg:           #FBF7F4;   /* fundo da página (creme quente) */

    /* ---- Forma ---- */
    --zn-radius:       18px;
    --zn-radius-sm:    12px;
    --zn-radius-pill:  999px;
    --zn-shadow:       0 6px 22px rgba(33, 23, 18, .07);
    --zn-shadow-hover: 0 16px 40px rgba(33, 23, 18, .14);

    /* Reforça o "primary" do Bootstrap/Metronic para a marca (texto, bordas) */
    --bs-primary:      #E8452B;
    --bs-primary-rgb:  232, 69, 43;

    /* Fonte do site (troque aqui para mudar a tipografia inteira) */
    --zn-font: 'Plus Jakarta Sans', 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-family: var(--zn-font);
    --bs-font-sans-serif: var(--zn-font);
}

/* ---------- Base ---------- */
body#kt_app_body {
    background: var(--zn-bg);
    font-family: var(--zn-font);
    -webkit-font-smoothing: antialiased;
    color: var(--zn-ink);
}
/* Garante a fonte nos elementos que herdam do corpo (mantém as fontes de ícone intactas) */
body#kt_app_body input,
body#kt_app_body button,
body#kt_app_body select,
body#kt_app_body textarea,
body#kt_app_body .btn,
body#kt_app_body .form-control,
body#kt_app_body .menu,
body#kt_app_body h1, body#kt_app_body h2, body#kt_app_body h3,
body#kt_app_body h4, body#kt_app_body h5, body#kt_app_body h6 {
    font-family: var(--zn-font);
}
.text-corPrincipal { color: var(--zn-brand) !important; }
.corPrincipal      { background-color: var(--zn-brand) !important; }
.corSecundaria     { background-color: var(--zn-brand-2) !important; }

/* ============================================================================
   CABEÇALHO (loja)
   ========================================================================== */
#kt_app_header {
    background: var(--zn-surface);
    box-shadow: 0 1px 0 var(--zn-line), 0 4px 16px rgba(17,17,26,.04);
    border: 0;
}
#kt_app_header #tituloLogoImg {
    border-radius: 12px;
    box-shadow: var(--zn-shadow);
    object-fit: cover;
}
#kt_app_header .tituloNomeEst {
    color: var(--zn-ink) !important;
    font-weight: 700;
    font-size: 1.05rem !important;
}
/* Selo de status (Aberto/Fechado) */
#kt_app_header .status_est {
    font-weight: 600;
    font-size: .8rem;
    color: var(--zn-ink-2);
}
/* Ícones sociais e de ação no topo */
#kt_app_header .app-navbar-item i { color: var(--zn-ink-2); transition: color .15s ease; }
#kt_app_header .app-navbar-item a:hover i { color: var(--zn-brand); }
#kt_app_header .ki-information { color: var(--zn-brand) !important; }

/* ============================================================================
   TOOLBAR — vira barra de loja (não "painel administrativo")
   ========================================================================== */
#kt_app_toolbar { padding-top: .75rem !important; padding-bottom: .25rem !important; }
/* Título "Categorias / Lista de Produtos" — deixa discreto */
#kt_app_toolbar .page-heading {
    color: var(--zn-ink) !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
}
#kt_app_toolbar .breadcrumb-item { color: var(--zn-ink-2) !important; }

/* Botões da toolbar */
#kt_app_toolbar .btn.btnCarrinho {
    border-radius: var(--zn-radius-sm);
    font-weight: 700;
    padding: .6rem 1rem;
    box-shadow: none;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}
/* "Meus Pedidos" — botão fantasma elegante */
#kt_perfil_toggle.btn.btn-primary {
    background: var(--zn-brand-soft) !important;
    color: var(--zn-brand) !important;
    border: 1px solid transparent !important;
}
#kt_perfil_toggle.btn.btn-primary:hover { background: #fbdcd6 !important; }
/* "Meu carrinho" — botão de marca (sólido) */
#kt_carrinho_toggle.btn.btn-danger {
    background: var(--zn-brand) !important;
    color: #fff !important;
    border: 0 !important;
}
#kt_carrinho_toggle.btn.btn-danger:hover {
    background: var(--zn-brand-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(var(--zn-brand-rgb), .35);
}
/* Botão trocar visual das categorias */
#btn_mudar_categorias { border-radius: 10px; }
#btn_mudar_categorias:hover i { color: var(--zn-brand) !important; }

/* ============================================================================
   BUSCA — vira uma pílula moderna
   ========================================================================== */
#kt_app_content .typeahead,
#kt_app_content #ipt_search_prod {
    border-radius: var(--zn-radius-pill) !important;
    border: 1px solid var(--zn-line) !important;
    background: var(--zn-surface) !important;
    height: 48px !important;
    box-shadow: var(--zn-shadow);
    transition: box-shadow .15s ease, border-color .15s ease;
}
#kt_app_content #ipt_search_prod:focus {
    border-color: var(--zn-brand) !important;
    box-shadow: 0 0 0 4px rgba(var(--zn-brand-rgb), .12) !important;
}
#sp_icone_search { color: var(--zn-brand) !important; opacity: .55; }

/* ============================================================================
   ATALHO DE CATEGORIAS (modo lista) — linhas viram cards clicáveis
   ========================================================================== */
#lista_categorias .d-flex.flex-stack.itemHand,
#div_categorias_promocoes .d-flex.flex-stack.pointer {
    background: var(--zn-surface);
    border: 1px solid var(--zn-line);
    border-radius: var(--zn-radius);
    padding: 12px 16px;
    margin-bottom: 12px;
    box-shadow: var(--zn-shadow);
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
#lista_categorias .d-flex.flex-stack.itemHand:hover,
#div_categorias_promocoes .d-flex.flex-stack.pointer:hover {
    transform: translateY(-2px);
    box-shadow: var(--zn-shadow-hover);
    border-color: rgba(var(--zn-brand-rgb), .35);
}
#lista_categorias .flex-stack img,
#div_categorias_promocoes .flex-stack img {
    border-radius: 12px !important;
    box-shadow: 0 3px 10px rgba(17,17,26,.10);
}
/* Remove os separadores tracejados antigos (o card já separa) */
#lista_categorias .separator.separator-dashed,
#div_categorias_promocoes .separator.separator-dashed { display: none !important; }
/* Título e descrição da categoria */
#lista_categorias .flex-stack .fs-5.fw-bold { color: var(--zn-ink) !important; font-weight: 700 !important; }

/* ============================================================================
   CATEGORIAS EM GRADE (cards com imagem)
   ========================================================================== */
.categorias {
    min-height: 200px;
    border-radius: var(--zn-radius) !important;
    box-shadow: var(--zn-shadow) !important;
    transition: transform .16s ease, box-shadow .18s ease;
}
.box_button_categorias {
    border-radius: var(--zn-radius) !important;
    box-shadow: none !important;
    overflow: hidden;
}
.box_button_categorias:hover .categorias { transform: translateY(-3px); box-shadow: var(--zn-shadow-hover) !important; }
.categorias-info {
    background: linear-gradient(360deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,0) 100%) !important;
    padding: 18px !important;
}
.categorias-info-titulo {
    font-weight: 800 !important;
    letter-spacing: .01em;
    text-transform: none !important;
    font-size: 1.05rem !important;
}
.categorias-info-descricao { color: #FFD9CF !important; font-weight: 500; }

/* ============================================================================
   ITENS DE PRODUTO (lista de produtos dentro da categoria)
   ========================================================================== */
.man-section {
    width: 100% !important;
    border-bottom: 1px solid var(--zn-line) !important;
    padding: 6px 4px;
    border-radius: 12px;
    transition: background .15s ease;
}
.man-section:hover { background: var(--zn-brand-soft); }
.image-section img {
    width: 64px !important; height: 64px !important;
    border: 0 !important;
    border-radius: 12px !important;
    object-fit: cover;
    box-shadow: 0 3px 10px rgba(17,17,26,.12);
    margin: 6px 10px 6px 0 !important;
}
.spNomeProduto, .description-section h1 {
    color: var(--zn-ink) !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
}
.spDescProduto { font-weight: 700 !important; color: var(--zn-ink) !important; }
.description-section p { color: var(--zn-ink-2) !important; }

/* Preço do produto — cor de marca e destaque */
.valorProd { font-weight: 800 !important; }
.valorProd .text-danger { color: var(--zn-brand) !important; }
.color_strike span { color: #B9BCC4 !important; }

/* ============================================================================
   CARRINHO (drawer) — total e botão finalizar
   ========================================================================== */
#kt_carrinho #total_pedido { color: var(--zn-brand) !important; font-weight: 800 !important; }
#div_btn_finaliza_carrinho { border-radius: var(--zn-radius) !important; }

/* ============================================================================
   BOTÕES GERAIS — alinhados à marca (mantém "success" verde p/ confirmar)
   ========================================================================== */
.btn.btn-primary {
    background-color: var(--zn-brand);
    border-color: var(--zn-brand);
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active {
    background-color: var(--zn-brand-dark) !important;
    border-color: var(--zn-brand-dark) !important;
}
.btn.btn-light-primary { background-color: var(--zn-brand-soft); color: var(--zn-brand); }
.text-primary { color: var(--zn-brand) !important; }

/* ============================================================================
   CARROSSEL / PROMOÇÕES
   ========================================================================== */
#div_carrossel .owl-carousel img { border-radius: var(--zn-radius) !important; box-shadow: var(--zn-shadow); }

/* ============================================================================
   RESPONSIVO (mobile-first)
   ========================================================================== */
@media (max-width: 767.98px) {
    #kt_app_toolbar .page-title { display: none !important; }         /* some o breadcrumb "admin" no celular */
    #kt_app_toolbar_container { justify-content: flex-end !important; }
    #kt_carrinho_toggle.btn.btn-danger { box-shadow: 0 6px 16px rgba(var(--zn-brand-rgb), .35); }
    .categorias { min-height: 160px; }
}

/* ============================================================================
   ===============  CHECKOUT / CARRINHO / MODAIS (2ª fase)  ==================
   ========================================================================== */

/* ---------- Drawers laterais (carrinho, info, perfil) ---------- */
#kt_carrinho, #kt_info, #kt_perfil { box-shadow: -14px 0 46px rgba(17,17,26,.14); }
#kt_carrinho_messenger_header,
#kt_info_messenger_header,
#kt_perfil_messenger_header {
    background: var(--zn-surface);
    border-bottom: 1px solid var(--zn-line);
}
#kt_carrinho_messenger_header a.text-danger,
#kt_info_messenger_header a.text-danger { color: var(--zn-brand) !important; }
#kt_carrinho_close, #kt_info_close, #kt_perfil_close { border-radius: 10px; transition: background .15s ease; }
#kt_carrinho_close:hover, #kt_info_close:hover, #kt_perfil_close:hover {
    background: var(--zn-brand-soft);
}
#kt_carrinho_close:hover i, #kt_info_close:hover i, #kt_perfil_close:hover i { color: var(--zn-brand) !important; }

/* ---------- Itens do carrinho (gerados pelo carrinho.js) ---------- */
#meuCarrinho .list-group-item {
    background: var(--zn-surface) !important;
    border: 1px solid var(--zn-line) !important;
    border-radius: var(--zn-radius-sm) !important;
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
    transition: box-shadow .15s ease, border-color .15s ease;
}
#meuCarrinho .list-group-item:hover {
    box-shadow: var(--zn-shadow);
    border-color: rgba(var(--zn-brand-rgb), .30);
}
#meuCarrinho .list-group-item h2 { color: var(--zn-ink) !important; font-size: 1rem !important; font-weight: 700 !important; }
#meuCarrinho .check .text-gray-800 { color: var(--zn-brand) !important; font-weight: 800 !important; }
#meuCarrinho .ki-trash-square { color: #C9CDD6; transition: color .15s ease; }
#meuCarrinho a:hover .ki-trash-square { color: var(--zn-brand); }

/* ---------- Rodapé do carrinho (subtotal + finalizar) ---------- */
#kt_carrinho .card-footer .bg-light-warning {
    background: var(--zn-brand-soft) !important;
    border-radius: var(--zn-radius) !important;
}
#div_btn_finaliza_carrinho {
    border-radius: var(--zn-radius) !important;
    box-shadow: 0 8px 20px rgba(38, 166, 91, .28);
}

/* ---------- Modais (iziModal .zModal) ---------- */
.iziModal.zModal { border-radius: var(--zn-radius) !important; overflow: hidden; }
.iziModal .iziModal-content { border-radius: 0 0 var(--zn-radius) var(--zn-radius); }

/* ---------- Cartões de opção selecionável (entrega/retirada, pix/cartão) ---------- */
.btn.btn-outline-dashed {
    border-radius: var(--zn-radius-sm) !important;
    border-color: var(--zn-line) !important;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn.btn-outline-dashed:hover { border-color: rgba(var(--zn-brand-rgb), .5) !important; }
[data-kt-buttons] .btn.btn-active-light-warning.active,
.btn.btn-active-light-warning.active {
    background: var(--zn-brand-soft) !important;
    border-color: var(--zn-brand) !important;
    border-style: solid !important;
    box-shadow: 0 4px 14px rgba(var(--zn-brand-rgb), .12);
}
[data-kt-buttons] .btn.btn-active-light-warning.active h2 { color: var(--zn-brand) !important; }

/* ---------- Radios / checkboxes (corrige o "bisque" antigo) ---------- */
.form-check-input {
    background-color: #fff !important;
    border: 1.5px solid #D5D7DE !important;
}
.form-check-input:checked {
    background-color: var(--zn-brand) !important;
    border-color: var(--zn-brand) !important;
}

/* ---------- Seções do checkout (Seus dados, Entrega, Cupom, Pagamento) ---------- */
.divEntrega {
    border-radius: var(--zn-radius) !important;
    border-color: var(--zn-line) !important;
    background: var(--zn-surface);
    box-shadow: var(--zn-shadow);
    padding: 16px !important;
}
.divEntrega .text-primary { color: var(--zn-ink) !important; font-weight: 800 !important; }

/* ---------- Acordeão de pagamento ---------- */
#kt_accordion_1 .accordion-item {
    border: 1px solid var(--zn-line) !important;
    border-radius: var(--zn-radius-sm) !important;
    overflow: hidden;
    margin-bottom: 8px;
}
#kt_accordion_1 .accordion-button:not(.collapsed) {
    background: var(--zn-brand-soft) !important;
    color: var(--zn-brand) !important;
}
#kt_accordion_1 .accordion-button:not(.collapsed) .text-gray-700 { color: var(--zn-brand) !important; }
#kt_accordion_1 .accordion-button:focus { box-shadow: none !important; border-color: var(--zn-line) !important; }

/* ---------- Controle de quantidade (wan-spinner) ---------- */
.wan-spinner {
    border-radius: var(--zn-radius-pill) !important;
    overflow: hidden;
    border: 1px solid var(--zn-line);
}
.wan-spinner .minus, .wan-spinner .plus { color: var(--zn-brand) !important; font-weight: 800 !important; }

/* ---------- Navegação do modal de produto (Voltar / Continuar) ---------- */
#div_footer_next2 { border-radius: var(--zn-radius-pill) !important; box-shadow: var(--zn-shadow); }
.btn.btn-danger.next, .btn.next.btn_next {
    background: var(--zn-brand) !important;
    border: 0 !important;
    border-radius: var(--zn-radius-pill) !important;
}
.btn.btn-danger.next:hover { background: var(--zn-brand-dark) !important; }

/* ---------- Botões de confirmação / apoio ---------- */
#btn_cad_endereco.btn-danger {
    background: var(--zn-brand) !important;
    border: 0 !important;
    border-radius: var(--zn-radius-sm) !important;
}
.btn.btn-light-warning { background: var(--zn-brand-soft) !important; color: var(--zn-brand) !important; }
.btn.btn-success { border-radius: var(--zn-radius-sm); }
#btn_EnviarPedido.btn-success, #btnFinalizarPedido.btn-success { box-shadow: 0 8px 20px rgba(38, 166, 91, .25); }

/* ---------- Inputs / selects em foco ---------- */
.form-control:focus, .form-select:focus, .form-control_pgt_online:focus {
    border-color: var(--zn-brand) !important;
    box-shadow: 0 0 0 3px rgba(var(--zn-brand-rgb), .12) !important;
}
.form-floating > .form-control:focus ~ label { color: var(--zn-brand); }

/* ---------- Pix / Cartão ---------- */
#md_pgt_online_pix, #md_pgt_online_cartao { background: #fff !important; }
#pix_on_ipt_copia_e_cola { border-radius: 10px !important; }
#pix_on_ipt_copia_e_cola_btn { border-radius: 10px !important; }

/* ---------- Títulos internos dos modais ---------- */
.iziModal .card-title.text-gray-800, #kt_info h5.card-title { color: var(--zn-ink) !important; font-weight: 700 !important; }

/* ---------- Ajustes mobile do checkout ---------- */
@media (max-width: 767.98px) {
    #meuCarrinho .list-group-item { padding: 8px 10px !important; }
    .divEntrega { padding: 12px !important; }
}

/* ============================================================================
   ===============  MINIATURA DO PRODUTO + LIGHTBOX (imagem)  ================
   ========================================================================== */

/* ---------- Miniatura dentro do modal de produto ---------- */
.img_prod { position: relative; display: inline-block; cursor: zoom-in; }
.img_prod .image-input { border: 0 !important; }
.img_prod .image-input-wrapper {
    border-radius: 14px !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 4px 14px rgba(17, 17, 26, .16);
    transition: transform .18s ease, box-shadow .18s ease;
}
.img_prod:hover .image-input-wrapper {
    transform: scale(1.04);
    box-shadow: 0 10px 24px rgba(17, 17, 26, .22);
}
/* esconde o botão "trocar avatar" herdado do Metronic (sem sentido aqui) */
.img_prod [data-kt-image-input-action],
.img_prod label.btn { display: none !important; }

/* lupa no hover — sinaliza que dá pra ampliar */
.img_prod::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 14px;
    background: rgba(0, 0, 0, .30) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16 16l6 6'/%3E%3C/svg%3E") center / 26px no-repeat;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}
.img_prod:hover::after { opacity: 1; }

/* miniatura simples (resultados de busca / outras listagens) */
.img_prod .responsive_img {
    border-radius: 12px !important;
    box-shadow: 0 3px 10px rgba(17, 17, 26, .12);
    transition: transform .18s ease;
}
.img_prod:hover .responsive_img { transform: scale(1.04); }

/* ---------- Lightbox (imagem ampliada) ---------- */
.zn-lightbox {
    position: fixed; inset: 0; z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(15, 15, 18, .82);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}
.zn-lightbox.is-open { opacity: 1; visibility: visible; }
.zn-lightbox-figure {
    margin: 0;
    transform: scale(.92);
    transition: transform .26s cubic-bezier(.2, .8, .25, 1);
}
.zn-lightbox.is-open .zn-lightbox-figure { transform: scale(1); }
.zn-lightbox-img {
    display: block;
    max-width: 92vw; max-height: 86vh;
    border-radius: 18px;
    background: #fff;
    object-fit: contain;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.zn-lightbox-close {
    position: absolute; top: 18px; right: 20px;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .15); color: #fff;
    font-size: 28px; line-height: 1; cursor: pointer;
    transition: background .15s ease, transform .2s ease;
}
.zn-lightbox-close:hover { background: rgba(255, 255, 255, .30); transform: rotate(90deg); }

@media (max-width: 767.98px) {
    .zn-lightbox { padding: 14px; }
    .zn-lightbox-close { top: 10px; right: 12px; width: 42px; height: 42px; }
}

/* ============================================================================
   ===============  BARRA FIXA DE CARRINHO (estilo iFood)  ==================
   ========================================================================== */
.zn-sticky-cart {
    position: fixed; left: 50%; bottom: 16px;
    transform: translateX(-50%) translateY(160%);
    width: calc(100% - 28px); max-width: 640px;
    /* abaixo do overlay do iziModal (997) p/ não sobrepor o modal de produto aberto;
       ainda bem acima do conteúdo normal da página. */
    z-index: 990;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--zn-brand); color: #fff; font-weight: 700;
    padding: 15px 20px; border-radius: 16px;
    box-shadow: 0 12px 30px rgba(var(--zn-brand-rgb), .45);
    cursor: pointer;
    transition: transform .3s cubic-bezier(.2, .8, .25, 1), background .15s ease;
}
.zn-sticky-cart.is-visible { transform: translateX(-50%) translateY(0); }
.zn-sticky-cart:hover { background: var(--zn-brand-dark); }
.zn-sticky-cart .zn-sc-left { font-size: 13px; font-weight: 600; opacity: .95; }
.zn-sticky-cart .zn-sc-right { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.zn-sticky-cart .zn-sc-right i { font-style: normal; font-size: 18px; }
@media (min-width: 768px) { .zn-sticky-cart { bottom: 20px; padding: 16px 22px; } }

/* ============================================================================
   ===============  CABEÇALHO ESTILO LOJA + BANNER PROMO  ====================
   ========================================================================== */
.zn-store-head #tituloLogoImg { border-radius: 12px; box-shadow: var(--zn-shadow); object-fit: cover; }
.zn-store-info .tituloNomeEst { color: var(--zn-ink) !important; line-height: 1.1; font-weight: 700 !important; }
.zn-store-status .status_est { color: var(--zn-ink-2) !important; }
/* esconde o antigo status pequeno da direita (agora aparece ao lado do nome) */
.app-navbar .app-navbar-item:has(> .btn > .status_est) { display: none !important; }

/* Faixa "Promoções do Dia" como banner em gradiente (estilo mockup) */
#div_categorias_promocoes .d-flex.flex-stack.pointer {
    background: linear-gradient(100deg, var(--zn-brand), var(--zn-brand-2)) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(var(--zn-brand-rgb), .28) !important;
}
#div_categorias_promocoes .d-flex.flex-stack.pointer a,
#div_categorias_promocoes .d-flex.flex-stack.pointer span { color: #fff !important; }
#div_categorias_promocoes .d-flex.flex-stack.pointer .text-gray-500 { color: rgba(255,255,255,.85) !important; }

/* ============================================================================
   ===============  CARDS DE PRODUTO (dentro do modal)  =====================
   ========================================================================== */
#produtos .list-group-item,
#produtos_promo .list-group-item {
    background: var(--zn-surface) !important;
    border: 1px solid var(--zn-line) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
    align-items: center !important;
    transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
#produtos .list-group-item:hover,
#produtos_promo .list-group-item:hover {
    box-shadow: var(--zn-shadow);
    border-color: rgba(var(--zn-brand-rgb), .30);
}
#produtos .spNomeProduto { color: var(--zn-ink) !important; font-weight: 700 !important; font-size: 1rem !important; }
#produtos .spDescProduto { color: var(--zn-ink-2) !important; font-size: .82rem !important; }
#produtos .valorProd,
#produtos_promo .valorProd { color: var(--zn-brand) !important; font-weight: 800 !important; }
#produtos .valorProd .text-danger,
#produtos_promo .valorProd .text-danger { color: var(--zn-brand) !important; }

/* ---------- Seleção de produtos: checkbox com "✓" e linha destacada ---------- */
/* Base do controle (checkbox e radio) dentro do modal de produtos.
   NAO selecionado = totalmente invisivel (sem borda, sem fundo); so aparece
   quando o item e escolhido. */
#produtos .form-check-input,
#produtos_promo .form-check-input {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex: 0 0 24px !important;
    margin-top: 0 !important;
    border: 2px solid transparent !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 68% 68% !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
    -webkit-print-color-adjust: exact;
}
/* checkbox = quadradinho arredondado; radio = círculo */
#produtos .inputCheckbox.form-check-input,
#produtos_promo .inputCheckbox.form-check-input { border-radius: 7px !important; }
#produtos .inputRadiobox.form-check-input,
#produtos_promo .inputRadiobox.form-check-input { border-radius: 50% !important; }

/* Estado SELECIONADO — dirigido pela classe .selecProduto (fonte de verdade),
   e tambem por :checked como reforço. Fundo vermelho + "✓" branco. */
#produtos .list-group-item.selecProduto .form-check-input,
#produtos_promo .list-group-item.selecProduto .form-check-input,
#produtos .form-check-input:checked,
#produtos_promo .form-check-input:checked {
    background-color: var(--zn-brand) !important;
    border-color: var(--zn-brand) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 10.5l3.5 3.5L16 5.5'/%3e%3c/svg%3e") !important;
}

/* Linha selecionada: vermelho claro evidente + borda vermelha */
#produtos .list-group-item.selecProduto,
#produtos_promo .list-group-item.selecProduto {
    background: #FDE3DE !important;
    border-color: var(--zn-brand) !important;
    box-shadow: 0 2px 12px rgba(var(--zn-brand-rgb), .18) !important;
}
#produtos .list-group-item.selecProduto .spNomeProduto,
#produtos_promo .list-group-item.selecProduto .spNomeProduto,
#produtos .list-group-item.selecProduto h4,
#produtos_promo .list-group-item.selecProduto h4 {
    color: var(--zn-brand-dark) !important;
}

/* ============================================================================
   ===============  CATEGORIAS EM CHIPS (home, modo lista)  =================
   ========================================================================== */
#lista_categorias .row { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin: 0 !important; }
#lista_categorias .row > * { width: auto !important; max-width: none !important; flex: 0 0 auto !important; padding: 0 !important; }
#lista_categorias .d-flex.flex-stack.itemHand {
    display: inline-flex !important;
    width: auto !important;
    align-items: center !important;
    background: var(--zn-surface) !important;
    border: 1px solid var(--zn-line) !important;
    border-radius: 999px !important;
    padding: 9px 18px !important;
    margin: 0 !important;
    box-shadow: var(--zn-shadow) !important;
    transition: border-color .15s ease, transform .12s ease;
}
#lista_categorias .d-flex.flex-stack.itemHand:hover {
    border-color: var(--zn-brand) !important;
    transform: translateY(-1px);
}
/* dentro do chip: mostra só o nome da categoria */
#lista_categorias .flex-stack img,
#lista_categorias .flex-stack .text-gray-500,
#lista_categorias .flex-stack .w-50px { display: none !important; }
#lista_categorias .flex-stack .me-3 { margin-right: 0 !important; }
#lista_categorias .flex-stack .fs-5.fw-bold {
    font-size: .92rem !important; font-weight: 700 !important;
    color: var(--zn-ink) !important; white-space: nowrap;
}
#lista_categorias .flex-stack.itemHand:hover .fs-5.fw-bold { color: var(--zn-brand) !important; }

/* ============================================================================
   ===========  CARDÁPIO — GRUPOS DE MODIFICADORES ("monte seu item")  =======
   ----------------------------------------------------------------------------
   Estiliza o formulário renderizado por pages_js/grupos_modal.js
   (znGruposRenderForm) dentro do modal #produtos (#divLista_prod), + a linha
   de produto-com-grupos (.zn-prod-grupos) na lista da categoria.
   Namespace .zn- não colide com o tema → dispensa !important.
   Assinatura: o "chip de fração" (½ ⅓ ¼) do ajuste meia-a-meia.
   ========================================================================== */

/* ---------- Linha de produto que abre o montador (lista da categoria) ------ */
.zn-prod-grupos.list-group-item {
    position: relative;
    background: var(--zn-surface);
    border: 1px solid var(--zn-line);
    border-radius: var(--zn-radius-sm);
    padding: 14px 40px 14px 16px;   /* folga p/ o chevron à direita */
    margin-bottom: 10px;
    gap: 10px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.zn-prod-grupos.list-group-item:hover {
    border-color: rgba(var(--zn-brand-rgb), .35);
    box-shadow: var(--zn-shadow);
    transform: translateY(-1px);
}
.zn-prod-grupos .fw-bold { color: var(--zn-ink); font-weight: 700; font-size: .98rem; }
.zn-prod-grupos .zn-apartir { color: var(--zn-ink-2); font-size: .8rem; font-weight: 600; white-space: nowrap; }
/* chevron: sinaliza que abre um montador (o item não tem imagem) */
.zn-prod-grupos::after {
    content: "";
    position: absolute; top: 50%; right: 15px;
    width: 8px; height: 8px; margin-top: -5px;
    border-right: 2px solid #C9CDD6; border-bottom: 2px solid #C9CDD6;
    transform: rotate(-45deg);
    transition: border-color .15s ease, right .15s ease;
}
.zn-prod-grupos:hover::after { border-color: var(--zn-brand); right: 12px; }

/* ---------- Container do formulário dentro do modal ------------------------ */
.zn-grupos { padding: 2px 2px 0; }

/* ---------- Cada grupo (pergunta) = cartão suave --------------------------- */
.zn-grupo {
    background: var(--zn-surface);
    border: 1px solid var(--zn-line);
    border-radius: var(--zn-radius-sm);
    padding: 2px 14px 12px;
    margin-bottom: 14px;
}
.zn-grupo-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 0 9px; margin-bottom: 4px;
    border-bottom: 1px solid var(--zn-line);
}
.zn-grupo-head b { color: var(--zn-ink); font-weight: 700; font-size: 1rem; }
.zn-grupo-head small {
    flex: 0 0 auto;
    font-size: .72rem; font-weight: 600; color: var(--zn-ink-2);
    background: #F1F2F5; padding: 3px 10px; border-radius: var(--zn-radius-pill);
    white-space: nowrap;
}
/* grupo obrigatório (min ≥ 1): selo na cor da marca */
.zn-grupo:not([data-min="0"]) .zn-grupo-head small {
    color: var(--zn-brand); background: var(--zn-brand-soft);
}

/* ---------- Rótulo de seção (Salgados / Doces …) --------------------------- */
.zn-secao {
    text-transform: uppercase; font-size: .68rem; font-weight: 700;
    letter-spacing: .08em; color: var(--zn-ink-2);
    margin: 12px 0 2px;
}

/* ---------- Linha de opção ------------------------------------------------- */
.zn-opc-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px; margin: 2px -6px;
    border-radius: 10px; cursor: pointer;
    transition: background .13s ease;
}
.zn-opc-row:hover { background: var(--zn-bg); }
.zn-opc-row.is-sel { background: var(--zn-brand-soft); }
.zn-opc-nome { flex: 1; color: var(--zn-ink); font-weight: 500; font-size: .93rem; }
.zn-opc-valor { color: var(--zn-ink-2); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.zn-opc-row.is-sel .zn-opc-nome { color: var(--zn-brand-dark); font-weight: 600; }
.zn-opc-row.is-sel .zn-opc-valor { color: var(--zn-brand); }
/* grupo de adicionais (soma): valores exibidos como acréscimo */
.zn-grupo[data-cobrar="soma"] .zn-opc-valor::before { content: "+ "; }

/* checkbox custom (mesma ✓ do restante do tema) */
.zn-opc {
    -webkit-appearance: none; appearance: none;
    flex: 0 0 22px; width: 22px; height: 22px; margin: 0;
    border: 2px solid #D5D7DE; border-radius: 7px;
    background: #fff no-repeat center / 66% 66%;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.zn-opc:checked {
    background-color: var(--zn-brand); border-color: var(--zn-brand);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 10.5l3.5 3.5L16 5.5'/%3e%3c/svg%3e");
}
.zn-opc:focus-visible { outline: 3px solid rgba(var(--zn-brand-rgb), .30); outline-offset: 2px; }

/* ---------- Ajuste de proporção (meia-a-meia) ----------------------------- */
.zn-prop-toggle {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    font-size: .82rem; font-weight: 700; color: var(--zn-brand);
    background: var(--zn-brand-soft); border: 0; border-radius: var(--zn-radius-pill);
    padding: 7px 14px; cursor: pointer;
    transition: background .15s ease;
}
.zn-prop-toggle:hover { background: #fbdcd6; }
.zn-prop-toggle::before { content: "◑"; font-size: .95rem; line-height: 1; }
.zn-prop {
    margin-top: 10px; background: var(--zn-bg);
    border: 1px solid var(--zn-line); border-radius: var(--zn-radius-sm);
    padding: 4px 12px;
}
.zn-prop-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.zn-prop-row + .zn-prop-row { border-top: 1px dashed var(--zn-line); }
.zn-prop-row > span:first-child { flex: 1; color: var(--zn-ink); font-weight: 500; font-size: .9rem; }
.zn-prop-row button {
    width: 30px; height: 30px; flex: 0 0 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--zn-line); border-radius: 9px;
    background: var(--zn-surface); color: var(--zn-brand);
    font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer;
    transition: background .13s ease, border-color .13s ease, transform .08s ease;
}
.zn-prop-row button:hover { background: var(--zn-brand-soft); border-color: rgba(var(--zn-brand-rgb), .4); }
.zn-prop-row button:active { transform: scale(.94); }
/* CHIP DE FRAÇÃO — elemento-assinatura (½ ⅓ ¼ da pizza) */
.zn-frac {
    min-width: 42px; text-align: center;
    font-weight: 800; font-size: 1.02rem; color: var(--zn-brand-dark);
    background: var(--zn-brand-soft); border-radius: var(--zn-radius-pill);
    padding: 3px 8px;
}

/* ---------- Total + botão ------------------------------------------------- */
.zn-total {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-top: 6px; padding: 15px 4px 4px;
    border-top: 1px solid var(--zn-line);
    font-size: 1.5rem; font-weight: 800; color: var(--zn-brand);
}
.zn-total::before {
    content: "Total"; text-transform: uppercase;
    font-size: .8rem; font-weight: 700; letter-spacing: .03em; color: var(--zn-ink-2);
}
.zn-add-grupos.btn {
    background: var(--zn-brand); border: 0; border-radius: var(--zn-radius-pill);
    padding: 14px; font-weight: 700; font-size: 1rem; color: #fff;
    box-shadow: 0 10px 24px rgba(var(--zn-brand-rgb), .30);
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.zn-add-grupos.btn:hover { background: var(--zn-brand-dark); transform: translateY(-1px); }
.zn-add-grupos.btn:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(var(--zn-brand-rgb), .28); }

@media (max-width: 767.98px) {
    .zn-grupo { padding: 2px 12px 10px; }
    .zn-total { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
    .zn-prod-grupos, .zn-prod-grupos::after, .zn-opc-row, .zn-opc,
    .zn-prop-toggle, .zn-prop-row button, .zn-add-grupos.btn { transition: none; }
    .zn-prod-grupos:hover, .zn-add-grupos.btn:hover { transform: none; }
}

/* ============================================================================
   ===================  BOLD v2 — SISTEMA DE DEGRADÊ + MOVIMENTO  =============
   ----------------------------------------------------------------------------
   Camada "mais ousada": o degradê-assinatura (--zn-grad) vira sistema visual
   (cabeçalho dos modais, CTAs de marca, categoria em foco, sacola, brilho da
   loja) + micro-interações. Aditivo — não remove nada acima.
   ========================================================================== */

/* ---- Cabeçalho dos modais em degradê (sobrepõe o headerColor inline do JS) ---- */
.iziModal.zModal .iziModal-header {
    background: var(--zn-grad) !important;
    border: 0 !important;
}
.iziModal.zModal .iziModal-header-title {
    color: #fff !important; font-weight: 800 !important; letter-spacing: -.01em;
}
.iziModal.zModal .iziModal-header-subtitle { color: rgba(255, 255, 255, .88) !important; }
/* X de fechar: branco sobre o degradê (o padrão é um PNG escuro) */
.iziModal.zModal .iziModal-button-close {
    background-color: rgba(255, 255, 255, .18) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 2l10 10M12 2L2 12'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 13px 13px !important;
    border-radius: 50% !important;
    transition: background-color .15s ease;
}
.iziModal.zModal .iziModal-button-close:hover { background-color: rgba(255, 255, 255, .32) !important; }

/* ---- CTA de marca em degradê (Continuar do montador / wizard) ---- */
.btn.btn-danger.next, .btn.next.btn_next {
    background: var(--zn-grad) !important;
    box-shadow: 0 10px 24px rgba(var(--zn-brand-rgb), .34) !important;
}
.btn.btn-danger.next:hover, .btn.next.btn_next:hover {
    background: var(--zn-grad) !important; filter: brightness(1.05);
}
.btn.next.btn_next:active { transform: translateY(1px); }

/* botão "Adicionar ao carrinho" do montador em degradê */
.zn-add-grupos.btn, .zn-add-grupos.btn:hover { background: var(--zn-grad) !important; }
.zn-add-grupos.btn:hover { filter: brightness(1.05); }

/* ---- "Meu carrinho" (topo) em degradê ---- */
#kt_carrinho_toggle.btn.btn-danger { background: var(--zn-grad) !important; border: 0 !important; }
#kt_carrinho_toggle.btn.btn-danger:hover { filter: brightness(1.05); }

/* ---- Sacola fixa: degradê + entrada animada ---- */
.zn-sticky-cart { background: var(--zn-grad) !important; }
.zn-sticky-cart.is-visible { animation: znBagIn .38s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes znBagIn {
    from { opacity: 0; transform: translateX(-50%) translateY(34%); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- Categoria (chip) em foco/hover: preenche com degradê ---- */
#lista_categorias .d-flex.flex-stack.itemHand:hover {
    background: var(--zn-grad) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 22px rgba(var(--zn-brand-rgb), .30) !important;
    transform: translateY(-2px) !important;
}
#lista_categorias .flex-stack.itemHand:hover .fs-5.fw-bold { color: #fff !important; }

/* ---- Cabeçalho da loja: brilho quente no logo ---- */
.zn-store-head #tituloLogoImg {
    box-shadow: 0 10px 24px rgba(var(--zn-brand-rgb), .30) !important;
}

/* ---- Opção selecionada + total: leve degradê ---- */
.zn-opc-row.is-sel { background: var(--zn-grad-soft) !important; }
.zn-total { background: var(--zn-grad-soft); border-radius: var(--zn-radius-sm); }

/* ---- Hover de card mais presente ---- */
.zn-prod-grupos.list-group-item:hover,
#produtos .list-group-item:hover,
#produtos_promo .list-group-item:hover { box-shadow: var(--zn-shadow-hover) !important; }
.box_button_categorias:hover .categorias { box-shadow: var(--zn-shadow-hover) !important; }

/* ---- Entrada suave da vitrine (chips de categoria) ---- */
#lista_categorias .d-flex.flex-stack.itemHand { animation: znFadeUp .4s ease both; }
@keyframes znFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .zn-sticky-cart.is-visible,
    #lista_categorias .d-flex.flex-stack.itemHand { animation: none; }
    .btn.next.btn_next:active { transform: none; }
}

/* ============================================================================
   ===================  BOLD v2 — CHECKOUT + CARRINHO  =======================
   ----------------------------------------------------------------------------
   Trato dedicado do fluxo de fechamento: cartões de opção (Entrega/Retirada,
   Pix/Cartão) com estado selecionado em degradê suave; polish do drawer do
   carrinho. Ações de CONFIRMAR (Finalizar/Enviar) seguem verdes (semântica).
   ========================================================================== */

/* Cartão de opção SELECIONADO: degradê suave + borda de marca + realce */
[data-kt-buttons] .btn.btn-active-light-warning.active,
.btn.btn-active-light-warning.active {
    background: var(--zn-grad-soft) !important;
    border-color: var(--zn-brand) !important;
    /* outline de marca — raramente disputado pelas regras de botão do tema */
    outline: 2px solid var(--zn-brand) !important;
    outline-offset: -2px !important;
}
[data-kt-buttons] .btn.btn-active-light-warning.active h2,
.btn.btn-active-light-warning.active h2 { color: var(--zn-brand-dark) !important; }
/* hover dos cartões de opção não-selecionados */
.btn.btn-outline-dashed:hover {
    border-color: rgba(var(--zn-brand-rgb), .55) !important;
    background: var(--zn-surface) !important;
    box-shadow: var(--zn-shadow) !important;
}

/* Título das seções do checkout ("› Seus dados", "› Entrega ou Retirada") */
.divEntrega .fs-3.fw-bold.text-primary,
.divEntrega .fs-3.fw-bold { color: var(--zn-ink) !important; }

/* Cabeçalho dos drawers (carrinho/perfil/info): título forte + acento */
#kt_carrinho_messenger_header,
#kt_perfil_messenger_header,
#kt_info_messenger_header { border-bottom: 2px solid var(--zn-line) !important; }
#kt_carrinho_messenger_header .card-title,
#kt_perfil_messenger_header .card-title,
#kt_info_messenger_header .card-title { color: var(--zn-ink) !important; font-weight: 800 !important; }

/* Subtotal do carrinho em destaque */
#kt_carrinho #total_pedido { color: var(--zn-brand) !important; font-weight: 800 !important; letter-spacing: -.01em; }

/* Carrinho vazio: deixa o aviso respirável */
#meuCarrinho:empty::before,
#meuCarrinho .cart-empty {
    display: block; text-align: center; color: var(--zn-ink-2);
    padding: 34px 16px; font-weight: 600;
}

/* Cupom / campos do checkout com foco de marca (reforço) */
.divEntrega .form-control:focus { border-color: var(--zn-brand) !important; }


/* ─────────────────────────────────────────────────────────────
   DESCRIÇÃO DO PRODUTO — card do cardápio
   Aparece logo abaixo do nome, e só quando o produto tem descrição
   (o JS não emite o elemento quando ela é vazia).

   Papel: informação de apoio. Precisa ser LIDA sem disputar com o nome
   nem com o preço, que são o que decide a compra. Daí o corpo menor,
   o cinza quente do próprio tema e o peso normal — a classe antiga
   (spDescProduto) vinha em negrito porque no carrossel de Promoções ela
   guarda o NOME do produto, não a descrição.

   Teto de 2 linhas: as descrições variam de 20 a 240 caracteres. Sem
   limite, um produto falante empurra o preço para baixo e quebra o
   alinhamento da lista inteira.
   ───────────────────────────────────────────────────────────── */
.zn-prod-desc {
    margin: .15rem 0 0;
    color: var(--zn-ink-2);
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Produto com grupos: nome + descrição empilhados à esquerda, "a partir de" à direita.
   min-width:0 é o que faz o clamp funcionar dentro do flex — sem isso o filho não
   encolhe e o texto empurra o preço para fora da linha. */
.zn-prod-grupos .zn-prod-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; padding-right: .75rem; }
.zn-prod-grupos .zn-apartir { flex: 0 0 auto; }

/* Opção dentro do grupo: nome + descrição empilhados, valor à direita.
   Mesmo min-width:0 do card — sem ele o clamp não corta e o texto empurra o preço. */
.zn-opc-row .zn-opc-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; padding-right: .5rem; }
.zn-opc-row .zn-opc-valor { flex: 0 0 auto; }