/*
 * Comportamentos controlados por classe pelo JS.
 *
 * O layout vem do Tailwind (design system Organic Order System); aqui ficam
 * so os estados que o JS liga/desliga e que o Tailwind nao alcanca:
 * barra do carrinho, toasts, feedback do botao "+", reveal e chips.
 *
 * --cor-primaria e definida inline por tenant no base_tenant.html.
 */

/* ===== Barra do carrinho (carrinho.js: 'visivel' / 'pulse') ===== */
.cart-bar {
    transform: translateY(130%);
    transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.cart-bar.visivel { transform: translateY(0); }
.cart-bar-inner.pulse { animation: cart-pulse 0.45s ease-out; }
@keyframes cart-pulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.035); }
    100% { transform: scale(1); }
}

/* ===== Toasts (carrinho.js cria a area .toasts dinamicamente) ===== */
.toasts {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: calc(100% - 32px);
    max-width: 420px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #1b1b1e;
    color: #fff;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 0.86rem;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
    animation: toast-entra 0.22s ease-out;
}
.toast-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast a {
    color: #8fd798;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}
.toast.saindo { opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s; }
@keyframes toast-entra {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Feedback do "+" e do "Adicionar" (classe 'ok') ===== */
.btn-add.ok, #btn-adicionar.ok {
    background: #16a34a !important;
    color: #fff !important;
}

/*
 * Cards do cardapio: SEMPRE visiveis. O reveal-on-scroll (opacity:0 ate o
 * IntersectionObserver disparar) deixava categorias abaixo da dobra
 * aparentemente vazias no carregamento -- fragil e ruim num cardapio.
 * Mantemos so uma leve transicao quando a classe 'visivel' e adicionada.
 */
.card.visivel { transition: opacity 0.3s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .cart-bar { transition: none; }
}

/* ===== Chip de categoria ativo (cardapio.js: 'ativo') ===== */
.cat-chip.ativo {
    background: var(--cor-primaria, #3a7f49);
    color: #fff;
    border-color: transparent;
}