/* Container externo para posicionar a seta */
.scrollmenu-container {
    position: relative;
}

/* Menu de categorias com scroll */
div.scrollmenu {
    background-color: white;
    overflow: auto;
    overflow-y: hidden; /* apenas horizontal */
    white-space: nowrap;
    padding-bottom: 8px;
    padding-top: 8px;
}

    div.scrollmenu a {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px;
        text-decoration: none;
    }

        div.scrollmenu a:hover {
            background-color: white;
        }

/* Estilo geral para a seta */
.scrollmenu-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    color: #007bff; /* azul vivo */
    font-weight: bold;
    background-color: white;
    border: 2px solid red;
    border-radius: 50%; /* deixa redonda */
    padding: 8px; /* mais espaço dentro da seta */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease; /* animação suave */
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); /* sombreamento para a seta */
}

    /* Efeito de hover na seta */
    .scrollmenu-arrow:hover {
        background-color: red;
        color: white;
        transform: scale(1.1); /* aumenta a seta quando passa o mouse */
    }

    /* Efeito ativo na seta */
    .scrollmenu-arrow:active {
        transform: translateY(-50%) scale(0.95); /* diminui a seta ao clicar */
        background-color: #e74c3c; /* vermelho suave */
        border: 2px solid #e74c3c; /* borda vermelha */
        color: white;
    }

    /* Seta da direita */
    .scrollmenu-arrow.right {
        right: 5px; /* Posiciona à direita */
    }

    /* Seta da esquerda */
    .scrollmenu-arrow.left {
        left: 5px; /* Posiciona à esquerda */
    }