/**
 * Estilos Públicos para o Plugin Brilha Brasil
 * Versão: Final com Variáveis CSS Dinâmicas
 *
 * Este arquivo utiliza variáveis CSS (--bb-...) para aplicar as personalizações
 * definidas no painel de administração do WordPress.
 */

:root {
    /* Define valores padrão (fallbacks) caso as variáveis não sejam injetadas pelo PHP. */
    --bb-border-color: #FF416C;
    --bb-carousel-height: 100px;
    --bb-item-width: 70px;
}


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

.bb-container {
    padding: 20px 0;
    margin: 20px 0;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: var(--bb-carousel-height); /* USA A ALTURA DEFINIDA NO PAINEL */
    display: flex;
    align-items: center; /* Centraliza verticalmente o carrossel. */
}


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

.bb-swiper-container .swiper-wrapper {
    /* Força a transição a ter uma velocidade constante. */
    transition-timing-function: linear !important;
    align-items: center; /* Garante o alinhamento vertical dos slides. */
}

/* Esconde as setas de navegação. */
.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: auto; /* A altura é controlada pelo conteúdo. */
}

.swiper-slide {
    width: auto; /* Deixa o Swiper controlar a largura. */
    flex-shrink: 0; /* Impede que os itens encolham. */
}


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

.bb-story {
    display: block;
    transition: transform 0.2s ease-in-out;
}

/* APLICA O EFEITO DE HOVER APENAS SE A CLASSE .hover-enabled ESTIVER PRESENTE */
.bb-container.hover-enabled .bb-story:hover {
    transform: scale(1.05);
}

/* Círculo da Imagem (Thumbnail) */
.bb-story-thumbnail {
    width: var(--bb-item-width); /* USA A LARGURA DEFINIDA NO PAINEL */
    height: var(--bb-item-width); /* USA A LARGURA (para manter o círculo) */
    border-radius: 50%;
    border: 3px solid var(--bb-border-color); /* USA A COR DEFINIDA NO PAINEL */
    padding: 3px;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

/* 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%;
}