/* Barra de categorias em CÍRCULOS com imagem (estilo iFood)
 * O HTML mantém a classe .category-chip (o filtro em script.v2.js depende dela);
 * .cat-circ só troca o visual. A barra é fixa ao rolar: ao "grudar" no topo o JS
 * (categorias-circ.js) põe .is-compact, que encolhe os círculos em pílulas pequenas —
 * senão a barra ocuparia ~110px da tela o tempo todo.
 *
 * CORES PERSONALIZADAS: o admin (Cores avançadas → core/dynamic-colors-avancado.php) define --chip-ativa-cor e
 * impõe `.category-chip.active { background: <gradiente> !important }`. Aqui o círculo grande NÃO usa esse fundo
 * (por isso o `!important` de volta) mas usa a MESMA cor para o anel e o rótulo; no modo compacto usa o gradiente.
 */

.categories-section.has-circ .categories-scroll {
    gap: 8px;
    padding: 12px 16px 8px;
    align-items: flex-start;
}

/* ── círculo grande (topo da página) ── */
.category-chip.cat-circ {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 76px;
    width: 76px;
    padding: 2px 0 0;
    background: transparent;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    transform: none;
    color: var(--text-secondary);
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
}
.cat-circ-img {
    position: relative;
    width: 64px; height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-secondary);
    box-shadow: 0 0 0 1px var(--border-color);
    transition: box-shadow .18s, transform .18s;
    flex-shrink: 0;
}
.cat-circ-img img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.cat-circ-emoji   { font-size: 1.9rem; line-height: 1; }
.cat-circ-inicial { font-size: 1.5rem; font-weight: 800; color: var(--chip-ativa-cor, var(--primary)); }
.cat-circ-todos   { background: rgba(255, 87, 34, .10); color: var(--chip-ativa-cor, var(--primary)); font-size: 1.5rem; }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .cat-circ-todos { background: color-mix(in srgb, var(--chip-ativa-cor, var(--primary)) 12%, transparent); }
}
.cat-circ-label {
    font-size: .72rem; line-height: 1.15; text-align: center;
    max-width: 76px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; white-space: normal; overflow-wrap: anywhere;
    letter-spacing: -.005em;
}

/* Só cor/sombra animam. O `transition: all` do .category-chip (style.css) animaria padding/gap ao compactar:
 * durante ~180 ms a barra teria uma altura "no meio do caminho" e o conteúdo abaixo daria um pulo. */
.category-chip.cat-circ { transition: background-color .18s, color .18s, box-shadow .18s, border-color .18s; }
/* usada só pelo JS enquanto mede a altura nos dois modos (leitura instantânea, sem animação) */
.categories-section.medindo, .categories-section.medindo * { transition: none !important; }

.category-chip.cat-circ:hover { transform: none; background: transparent; border-color: transparent; color: var(--primary); }
.category-chip.cat-circ:hover .cat-circ-img { box-shadow: 0 0 0 2px var(--chip-ativa-cor, var(--primary)); }
.category-chip.cat-circ:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* selecionada: anel na cor da loja + rótulo em destaque */
/* !important: vence `.category-chip.active { background: … !important }` das cores personalizadas */
.category-chip.cat-circ.active { background: transparent !important; box-shadow: none; transform: none; color: var(--chip-ativa-cor, var(--primary)); font-weight: 800; }
.category-chip.cat-circ.active .cat-circ-img { box-shadow: 0 0 0 3px var(--chip-ativa-cor, var(--primary)), 0 0 0 6px rgba(255, 87, 34, .16); }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .category-chip.cat-circ.active .cat-circ-img { box-shadow: 0 0 0 3px var(--chip-ativa-cor, var(--primary)), 0 0 0 6px color-mix(in srgb, var(--chip-ativa-cor, var(--primary)) 18%, transparent); }
}

@media (min-width: 700px) {
    .category-chip.cat-circ { flex-basis: 92px; width: 92px; }
    .cat-circ-img { width: 74px; height: 74px; }
    .cat-circ-emoji { font-size: 2.2rem; }
    .cat-circ-label { max-width: 90px; font-size: .78rem; }
}

/* ── compacto (barra fixa no topo): círculo pequeno + nome ao lado, em pílula ── */
.categories-section.has-circ.is-compact .categories-scroll { padding: 8px 16px; align-items: center; gap: 6px; }
.categories-section.is-compact .category-chip.cat-circ {
    flex: 0 0 auto; width: auto;
    flex-direction: row; gap: 7px;
    padding: 4px 13px 4px 4px;
    background: var(--bg-secondary);
    border-radius: 999px;
}
.categories-section.is-compact .cat-circ-img { width: 30px; height: 30px; box-shadow: none; }
.categories-section.is-compact .cat-circ-emoji { font-size: 1.05rem; }
.categories-section.is-compact .cat-circ-inicial { font-size: .95rem; }
.categories-section.is-compact .cat-circ-todos { font-size: .95rem; }
.categories-section.is-compact .cat-circ-label { max-width: none; font-size: .76rem; -webkit-line-clamp: 1; white-space: nowrap; text-align: left; }
.categories-section.is-compact .category-chip.cat-circ:hover { background: rgba(255, 87, 34, .08); }
/* compacto: a pílula ativa usa o gradiente da cor escolhida no admin (o mesmo das chips antigas) */
.categories-section.is-compact .category-chip.cat-circ.active {
    background: linear-gradient(135deg, var(--chip-ativa-cor, var(--primary)) 0%, var(--secondary) 100%) !important;
    color: #fff !important;
}
.categories-section.is-compact .category-chip.cat-circ.active .cat-circ-img { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
/* sobre o gradiente colorido, o "Todos" precisa de fundo branco para o ícone aparecer */
.categories-section.is-compact .category-chip.cat-circ.active .cat-circ-todos { background: #fff; color: var(--chip-ativa-cor, var(--primary)); }

/* Rolar até uma categoria (toque no círculo) para logo abaixo das barras fixas, em vez de esconder o título atrás delas.
 * --cat-offset é calculado por categorias-circ.js. */
.category-section { scroll-margin-top: var(--cat-offset, 0px); }

@media (prefers-reduced-motion: reduce) { .cat-circ-img { transition: none; } }