/* Estilos para o contêiner das bolinhas de cor */
.color-switcher-kapnet {
    display: flex; /* Para as bolinhas ficarem em linha */
    gap: 10px; /* Espaçamento entre as bolinhas */
    margin-top: 20px; /* Espaçamento do topo, ajuste conforme seu layout */
    padding: 10px;
    /* Você pode adicionar uma linha divisória se desejar */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: center; /* Centraliza as bolinhas horizontalmente */
    flex-wrap: wrap; /* Permite que as bolinhas quebrem para a próxima linha em telas menores */
    background-color: rgba(0, 0, 0, 0.2); /* Um fundo leve para o switcher, ajuste se precisar */
    border-radius: 5px;
}

/* Estilos para cada bolinha de cor */
.color-option-kapnet {
    width: 25px; /* Tamanho da bolinha */
    height: 25px; /* Tamanho da bolinha */
    border-radius: 50%; /* Faz a forma de bolinha */
    cursor: pointer; /* Indica que é clicável */
    border: 2px solid transparent; /* Borda transparente, para ser usada quando selecionado */
    transition: all 0.2s ease-in-out; /* Suaviza transições de hover e clique */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Sombra para dar profundidade */
}

.color-option-kapnet:hover {
    transform: scale(1.1); /* Efeito de zoom ao passar o mouse */
    border-color: rgba(255, 255, 255, 0.6); /* Borda clara no hover */
}

/* Define a variável CSS para a cor de fundo no :root */
/* Cor de fundo padrão inicial do seu sistema */
:root {
    --kapnet-background-color: #38055f; /* Cor padrão, que será alterada pelo JS */
}

/* Aplica a cor de fundo ao body usando a variável */
body.elementor-page { /* ou .site-main body, ou outro seletor que seu tema usa para o conteúdo principal */
    background-color: var(--kapnet-background-color, #38055f) !important; /* Adicione !important */
    transition: background-color 0.4s ease-in-out;
}

/* Você pode adicionar um estilo para indicar a bolinha selecionada (opcional) */
.color-option-kapnet.selected {
    border-color: #FFFFFF; /* Borda branca para a bolinha selecionada */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); /* Anel ao redor da bolinha selecionada */
}