/*
 * O BOTÃO ZEN — o lançador dos produtos (Fase 1 do Zen Hub).
 *
 * Independente da casca: as cores são variáveis PRÓPRIAS (`--bz-*`), que
 * seguem os tokens do Hub quando o botão está dentro de `.marca-hub` e caem
 * para os valores do manual (azul-noite #00101E, azul-claro #E5EEEF) em
 * qualquer outra casca — é o que deixa o mesmo botão entrar no ZenBusiness sem
 * trazer a casca do Hub junto.
 *
 * Na casca do ZenBusiness (fim deste arquivo) as mesmas `--bz-*` apontam para
 * os tokens `--zen-*` da Clareira: o desenho é o do Hub, a paleta é a do
 * produto. Os `--zen-*` já trocam sozinhos no escuro, então o mapa é um só.
 *
 * Duas variáveis existem porque o gatilho e o pop-up podem estar em fundos
 * diferentes: no ZenBusiness o botão mora na barra navy, e o pop-up é claro.
 *   · `--bz-gatilho-hover` — o círculo atrás do ícone (passar o mouse, aberto);
 *   · `--bz-foco-gatilho` — o anel de foco do ícone.
 */

.botao-zen {
    --bz-fundo: var(--hub-tint, #e5eeef);
    --bz-folha: var(--hub-surface, #ffffff);
    --bz-tinta: var(--hub-ink, #00101e);
    --bz-suave: var(--hub-muted, #4a5a66);
    --bz-linha: var(--hub-line2, #c9d5d7);
    --bz-hover: var(--hub-hover, #eef3f4);
    --bz-foco: var(--hub-foco, #3a51f6);
    --bz-atual: var(--hub-ink, #00101e);
    --bz-atual-fundo: var(--hub-hover, #eef3f4);
    --bz-gatilho-hover: var(--bz-fundo);
    --bz-foco-gatilho: var(--bz-foco);
    --bz-borda: transparent;
    position: relative;
}

:root[data-tema='escuro'] .botao-zen {
    --bz-fundo: var(--hub-tint, #12283d);
    --bz-folha: var(--hub-surface, #0a1c2c);
    --bz-tinta: var(--hub-ink, #e5eeef);
    --bz-suave: var(--hub-muted, #9fb1bd);
    --bz-linha: var(--hub-line2, #2b4660);
    --bz-hover: var(--hub-hover, #14293e);
    --bz-atual: var(--hub-ink, #e5eeef);
    --bz-atual-fundo: var(--hub-hover, #14293e);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema='claro']) .botao-zen {
        --bz-fundo: var(--hub-tint, #12283d);
        --bz-folha: var(--hub-surface, #0a1c2c);
        --bz-tinta: var(--hub-ink, #e5eeef);
        --bz-suave: var(--hub-muted, #9fb1bd);
        --bz-linha: var(--hub-line2, #2b4660);
        --bz-hover: var(--hub-hover, #14293e);
        --bz-atual: var(--hub-ink, #e5eeef);
        --bz-atual-fundo: var(--hub-hover, #14293e);
    }
}

.botao-zen > summary {
    list-style: none;
}

.botao-zen > summary::-webkit-details-marker {
    display: none;
}

.botao-zen-gatilho {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
}

.botao-zen-gatilho:hover,
.botao-zen[open] > .botao-zen-gatilho {
    background: var(--bz-gatilho-hover);
}

.botao-zen-gatilho:focus-visible {
    outline: 2px solid var(--bz-foco-gatilho);
    outline-offset: 2px;
}

.botao-zen-app:focus-visible,
.botao-zen-mais:focus-visible {
    outline: 2px solid var(--bz-foco);
    outline-offset: 2px;
}

.botao-zen-painel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 360px;
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid var(--bz-borda);
    border-radius: 28px;
    background: var(--bz-fundo);
    color: var(--bz-tinta);
    box-shadow:
        0 1px 3px rgba(0, 16, 30, 0.18),
        0 6px 18px rgba(0, 16, 30, 0.14);
    font-family: Poppins, system-ui, sans-serif;
}

.botao-zen-grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 8px;
    max-height: 452px;
    overflow-y: auto;
    border-radius: 24px;
    background: var(--bz-folha);
    list-style: none;
}

.botao-zen-grade form {
    margin: 0;
}

.botao-zen-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 4px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--bz-tinta);
    font:
        13px/16px Poppins,
        system-ui,
        sans-serif;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.botao-zen-app:hover {
    filter: none;
    background: var(--bz-hover);
}

.botao-zen-app img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

/* O produto em que a pessoa está: anel e fundo — e `aria-current` no HTML,
   para não depender só de cor. */
.botao-zen-atual,
.botao-zen-atual:hover {
    background: var(--bz-atual-fundo);
    box-shadow: inset 0 0 0 2px var(--bz-atual);
}

.botao-zen-app small {
    color: var(--bz-suave);
    font-size: 11px;
    line-height: 14px;
    overflow-wrap: anywhere;
}

.botao-zen-mais {
    align-self: center;
    display: flex;
    align-items: center;
    height: 40px;
    margin-bottom: 4px;
    padding: 0 20px;
    border: 1px solid var(--bz-linha);
    border-radius: 999px;
    background: var(--bz-folha);
    color: var(--bz-tinta);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.botao-zen-mais:hover {
    background: var(--bz-hover);
}

/* "Carregando" e o erro do pedido sob demanda (casca do ZenBusiness). */
.botao-zen-estado {
    margin: 0;
    padding: 4px 16px;
    color: var(--bz-suave);
    font:
        13px/18px Poppins,
        system-ui,
        sans-serif;
    text-align: center;
}

.botao-zen-estado:empty {
    display: none;
}

.botao-zen-estado button {
    display: inline-flex;
    width: auto;
    margin: 6px 0 0;
    padding: 4px 14px;
    border: 1px solid var(--bz-linha);
    border-radius: 999px;
    background: var(--bz-folha);
    color: var(--bz-tinta);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.botao-zen-estado button:hover {
    filter: none;
    background: var(--bz-hover);
}

.botao-zen-estado button:focus-visible {
    outline: 2px solid var(--bz-foco);
    outline-offset: 2px;
}

/* No celular o pop-up ocupa a largura da tela, logo abaixo do botão: a barra
   pode ter uma ou duas linhas (a do ZenBusiness quebra), e o `botao-zen.js`
   mede onde o botão termina (`--bz-topo`). */
@media (max-width: 639px) {
    .botao-zen-painel {
        position: fixed;
        top: var(--bz-topo, 64px);
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100vh - var(--bz-topo, 64px) - 8px);
        overflow-y: auto;
    }
}

/* ------------------------------------------------------------------------
   NA CASCA DO ZENBUSINESS — a paleta Clareira (`--zen-*`, que não muda).
   `:root .casca` para vencer as regras de tema acima, que têm o `:root`.
   ------------------------------------------------------------------------ */
:root .casca .botao-zen {
    --bz-fundo: var(--zen-surface-2);
    --bz-folha: var(--zen-surface);
    --bz-tinta: var(--zen-text-main);
    --bz-suave: var(--zen-text-soft);
    --bz-linha: var(--zen-border-strong);
    --bz-hover: var(--zen-surface-3);
    --bz-borda: var(--zen-border);
    --bz-foco: var(--zen-ring);
    --bz-atual: var(--zen-accent-text);
    --bz-atual-fundo: var(--zen-accent-soft);
    --bz-gatilho-hover: var(--zen-chrome-ativo);
    --bz-foco-gatilho: var(--zen-bege);
    color: var(--zen-chrome-text);
}