/**
 * Estilos para a Top Bar Animada
 */

 :root {
    --promo-banner-height: 32px;
    --header-height: 68px;
    --secondary-nav-height: 56px;
    --total-sticky-height: calc(var(--promo-banner-height) + var(--header-height) + var(--secondary-nav-height));
}

/* Top Bar Sticky */
.top-bar-animada {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    font-family: var(--theme-font-family);
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    align-items: center;
    height: var(--promo-banner-height);
    background-color: var(--topbar-bg-color, #000000);
    color: var(--topbar-text-color, #FFFFFF);
    text-transform: uppercase;
    text-decoration: var(--has-link-decoration, var(--theme-text-decoration, none));
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.2px;
    z-index: 99999;
}

/* Quando o conjunto todo está sticky */
.unified-sticky .top-bar-animada {
    position: fixed;
    top: 0;
    z-index: 99999;
}

.top-bar-content {
    display: flex;
    white-space: nowrap;
    animation: scroll 20s linear infinite;
    /* Garantir que os itens sejam visíveis */
    min-width: 100%;
}

/* Pausa a animação quando o mouse estiver sobre a top bar */
.top-bar-animada:hover .top-bar-content {
    animation-play-state: paused;
}

.top-bar-item {
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.top-bar-item::after {
    content: "•";
    margin-left: 40px;
}

.top-bar-item:last-child::after {
    content: "";
}

.top-bar-item a {
    color: inherit;
    text-decoration: none;
}

.top-bar-item a:hover {
    text-decoration: underline;
}

/* Animação de rolagem horizontal */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 40px)); /* Metade da largura do conteúdo + pequeno ajuste */
    }
}

/* Ajustes para o tema Blocksy quando sticky */
.unified-sticky .ct-header {
    position: fixed !important;
    top: var(--promo-banner-height) !important;
    left: 0;
    right: 0;
    z-index: 100000 !important;
    width: 100% !important;
    margin-top: 0 !important;
}

.unified-sticky .ct-sticky-container {
    position: static !important;
    top: auto !important;
}

.unified-sticky .secondary-nav {
    position: fixed !important;
    top: calc(var(--promo-banner-height) + var(--header-height)) !important;
    left: 0;
    right: 0;
    z-index: 999;
    width: 100% !important;
}

/* Compensar o espaço quando está sticky */
.unified-sticky {
    padding-top: var(--total-sticky-height) !important;
}

/* Médias queries para responsividade */
@media (max-width: 768px) {
    :root {
        --promo-banner-height: 25px;
        --header-height: 60px;
        --secondary-nav-height: 0px; /* Secondary nav escondida em mobile */
        --total-sticky-height: calc(var(--promo-banner-height) + var(--header-height));
    }
    
    .top-bar-animada {
        font-size: 10px;
    }
    
    .top-bar-item {
        padding: 0 10px;
    }
    
    .top-bar-item::after {
        margin-left: 10px;
    }
    
    .unified-sticky .secondary-nav {
        display: none !important;
    }
}