/*
 * section-header.css — cabeçalho das seções de categoria.
 *
 * O par "ver tudo" + setas do carrossel aparece em toda listagem de jogos
 * (home, cassino, provedores, loteria, esportes, página de jogo). Estava
 * repetido como a mesma pilha de classes Tailwind em 29 lugares, então mudar
 * a aparência significava mudar 29 marcações. Agora é aqui.
 *
 *   .cat-action      o botão de texto ("Ver Tudo")
 *   .cat-nav         as setas de passar
 *   .cat-actions-nav o par de setas (some no celular)
 *
 * O cinza é o mesmo dos botões de ação do navbar (#3a4142) — é um neutro do
 * layout, não a cor de destaque do tema.
 */

.cat-action,
.cat-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    flex-shrink: 0;
    border: 0;
    border-radius: 10px;
    background-color: #3a4142;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

/* Botão de texto: o rótulo é o conteúdo, então vem em branco e em negrito. */
.cat-action {
    gap: 6px;
    padding: 0 14px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

.cat-action:hover {
    background-color: #4a5152;
    color: #ffffff;
}

/* Setas: o ícone é só navegação, fica em cinza e acende no hover. */
.cat-nav {
    width: 32px;
    color: #9ca3af;
    font-size: 12px;
}

.cat-nav:hover {
    background-color: #4a5152;
    color: #ffffff;
}

.cat-nav:disabled {
    opacity: .4;
    cursor: default;
}

.cat-nav:disabled:hover {
    background-color: #3a4142;
    color: #9ca3af;
}

/* No celular o carrossel se passa com o dedo: as setas não têm o que fazer.
   Quem esconde é o .cat-actions-nav, para o "ver tudo" continuar em cena. */
.cat-actions-nav {
    display: none;
    align-items: center;
    gap: 6px;
}

@media (min-width: 640px) {
    .cat-actions-nav { display: flex; }
}