/* ============================================================
 * TP V4 — Bottom mobile bar (Ignavo-style)
 * Visível só em <768px. 5 quick actions na safe area.
 * ============================================================ */

.tp4-bottombar {
    position: fixed; left: 0; right: 0; bottom: 0;
    display: none;
    z-index: 80;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--tp4-border);
    box-shadow: 0 -4px 20px rgba(15, 17, 21, 0.08);
    padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 767px) {
    .tp4-bottombar { display: grid; grid-template-columns: repeat(5, 1fr); }
    /* Reserve scroll space para o bar */
    body.tp4-theme { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

    /* 2026-08-21 (BUG7) — subir o FAB do WhatsApp (plugin wp-whatsapp,
       .wa__btn_popup, fixo a bottom:30px) para acima da .tp4-bottombar
       (64px + safe-area) + 16px de margem. Só no breakpoint mobile onde a
       barra aparece; em desktop a barra é display:none e o botão fica em 30px. */
    .wa__btn_popup {
        bottom: calc(64px + env(safe-area-inset-bottom) + 16px) !important;
    }
    /* manter o popup de chat acima do botão que subiu */
    .wa__popup_chat_box {
        bottom: calc(152px + env(safe-area-inset-bottom)) !important;
    }
}

.tp4-bottombar__item {
    appearance: none; border: none; background: transparent; cursor: pointer;
    text-decoration: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.15rem;
    padding: 0.55rem 0.25rem 0.6rem;
    color: var(--tp4-text-soft);
    font-size: 10.5px; font-weight: var(--tp4-fw-semi); letter-spacing: 0.02em;
    transition: color var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-bottombar__item:hover { color: var(--tp4-c-brand); }
.tp4-bottombar__item.is-active { color: var(--tp4-c-brand); }
.tp4-bottombar__item.is-active::before {
    content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 3px;
    background: var(--tp4-c-brand); border-radius: 0 0 3px 3px;
}
.tp4-bottombar__item { position: relative; }

.tp4-bottombar__icon { position: relative; line-height: 0; }
/* 2026-08-21 (BUG8) — a lupa "Pesquisar" do CTA (e restantes ícones da
   bottombar) deformava no mobile: o reset `svg{max-width:100%}` NÃO fixa a
   height, por isso dentro do flex-center do círculo o SVG estica/achata
   (bug conhecido de SVG-em-flex no Safari iOS). Fixar flex:0 0 auto +
   max-width:none deixa o SVG no tamanho intrínseco (dos atributos), e o CTA
   fica com dimensões explícitas. */
.tp4-bottombar__icon svg { stroke-width: 1.7; flex: 0 0 auto; max-width: none; height: auto; }
.tp4-bottombar__item--cta .tp4-bottombar__icon svg { width: 24px; height: 24px; }

.tp4-bottombar__label { line-height: 1; }

/* 2026-08-21 (BUG8b) — no site REAL carregam ~69 folhas de estilo (tema,
   Woo, Elementor, Jetpack…). Uma delas esmagava o container do ícone CTA
   para uma ELIPSE (largura esticada / altura comprimida) — em isolamento o
   círculo 48×48 está perfeito, logo é conflito de cascata. Blindar com
   especificidade extra (.tp4-bottombar ...) + !important + aspect-ratio para
   garantir um círculo 48×48 imutável, e o SVG interno fixo a 24×24. */
.tp4-bottombar .tp4-bottombar__item--cta .tp4-bottombar__icon {
    width: 48px !important; height: 48px !important;
    min-width: 48px; max-width: 48px; min-height: 48px; max-height: 48px;
    flex: 0 0 48px !important; aspect-ratio: 1 / 1;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    padding: 0 !important;
    background: linear-gradient(135deg, var(--tp4-c-brand), var(--tp4-c-brand-light)) !important;
    color: #fff !important;
}
.tp4-bottombar .tp4-bottombar__item--cta .tp4-bottombar__icon svg {
    width: 24px !important; height: 24px !important; max-width: 24px !important;
    stroke: #fff;
}
/* Ícones inativos: cor mais nítida (o utilizador queixou-se de "sempre a
   cinza"); mantém o brand só no ativo/hover. */
.tp4-bottombar__item { color: var(--tp4-c-gray-700); }
.tp4-bottombar__item .tp4-bottombar__icon svg { stroke: currentColor; }

/* CTA central (Pesquisar) — pílula destacada estilo Ignavo */
.tp4-bottombar__item--cta {
    position: relative;
}
.tp4-bottombar__item--cta .tp4-bottombar__icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tp4-c-brand), var(--tp4-c-brand-light));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: -22px;
    box-shadow: 0 8px 18px rgba(var(--tp4-c-brand-rgb), 0.40);
    transition: transform var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-bottombar__item--cta:hover .tp4-bottombar__icon { transform: translateY(-2px); }
.tp4-bottombar__item--cta .tp4-bottombar__label { color: var(--tp4-text); margin-top: 0.1rem; }

/* Cart badge — visual igual ao cart-btn__count */
.tp4-bottombar__badge {
    position: absolute; top: -4px; right: -8px;
    min-width: 18px; height: 18px; padding: 0 4px;
    background: var(--tp4-c-brand); color: #fff;
    border-radius: var(--tp4-r-pill);
    font-size: 10px; font-weight: var(--tp4-fw-bold);
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
    border: 2px solid #fff;
}
.tp4-bottombar__badge[data-empty="1"] { display: none; }