/**
 * Estilos Públicos para o Plugin Brilha Brasil
 * Versão: Autoplay Contínuo (Marquee Effect) - Sem Título
 *
 * Este arquivo estiliza o carrossel de stories, configurado para
 * um deslize automático, infinito e sem os títulos dos posts.
 */

:root {
    /* Define uma cor padrão de fallback caso a variável não seja injetada pelo PHP. */
    --bb-border-color: #FF416C;
}


/* * 1. Container Principal
 * -------------------------------------------------------------------------- */

.bb-container {
    padding: 20px 0;
    margin: 20px 0;
    position: relative;
    max-width: 100%;
    overflow: hidden; /* Essencial para que o carrossel não crie uma barra de rolagem. */
    height: 100px;    /* Define uma altura fixa para a faixa do carrossel. */
    display: flex;    /* Usa flexbox para melhor alinhamento. */
    align-items: center; /* Centraliza verticalmente o carrossel dentro do container. */
}


/* * 2. Ajustes para o Efeito de Scroll Contínuo
 * -------------------------------------------------------------------------- */

.bb-swiper-container .swiper-wrapper {
    /* ESTA É A LINHA MAIS IMPORTANTE PARA O EFEITO! */
    /* Força a transição a ter uma velocidade constante, sem aceleração ou desaceleração. */
    transition-timing-function: linear !important;
}

/* Esconde completamente as setas de navegação, pois não são necessárias. */
.bb-swiper-container .swiper-button-next,
.bb-swiper-container .swiper-button-prev {
    display: none !important;
}


/* * 3. Estrutura do Swiper (Carrossel)
 * -------------------------------------------------------------------------- */

.bb-swiper-container {
    width: 100%;
    height: 100%; /* Ocupa toda a altura do container pai. */
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center; /* Centraliza o wrapper dentro do container do swiper. */
}

.swiper-slide {
    width: 85px; /* Largura de cada item, incluindo um respiro visual. */
    text-align: center;
    display: flex;
    justify-content: center;
}


/* * 4. Estilo do Item "Story"
 * -------------------------------------------------------------------------- */

.bb-story {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    transition: transform 0.2s ease-in-out;
}

/* Adiciona um leve zoom ao passar o mouse para dar feedback ao usuário. */
.bb-story:hover {
    transform: scale(1.05);
}

/* Círculo da Imagem (Thumbnail) */
.bb-story-thumbnail {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    /* Usa a variável de cor definida no painel do WordPress. */
    border: 3px solid var(--bb-border-color);
    padding: 3px;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0; /* Remove a margem inferior, já que não há mais título. */
}

/* Imagem dentro do Círculo */
.bb-story-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha o círculo sem distorcer. */
    border-radius: 50%;
}