/**
 * TurboJet - Estilos para Barra Fixa
 */

.tj-barra-fixa-placeholder {
    /* Altura será definida pelo JS */
    width: 100%;
    display: none; /* Inicialmente oculto */
}

.tj-barra-fixa-content {
    /* width é definido inline pelo PHP via shortcode */
    box-sizing: border-box;
    /* Outros estilos base como cor_fundo, padding, borda são aplicados inline pelo PHP */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    /* Para centralizar no fluxo normal se a largura for < 100% */
    margin-left: auto;
    margin-right: auto;
}

.tj-barra-fixa-content.tj-fixed {
    position: fixed;
    /* Z-index, top/bottom são definidos pelo JS */

    /* Para centralizar quando a largura é < 100% e position: fixed */
    /* O PHP aplica a 'width' inline. */
    /* Com left:0, right:0 e width definido, margin:auto deve centralizar. */
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    /* Se a abordagem acima não funcionar perfeitamente em todos os casos,
       uma alternativa seria o JS calcular e aplicar:
       left: 50%;
       transform: translateX(-50%);
       Mas isso requer que o JS saiba a largura e se ela é < 100%.
       Vamos tentar com left/right/margin auto primeiro.
    */
}

.tj-barra-fixa-content.tj-fixed-topo {
    top: 0;
}

.tj-barra-fixa-content.tj-fixed-rodape {
    bottom: 0;
}

.tj-barra-sombra {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}
.tj-barra-fixa-content.tj-fixed.tj-barra-sombra {
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}


/* Animações */
.tj-barra-fixa-content.tj-anim-nenhuma {
    /* Sem animação */
}

.tj-barra-fixa-content.tj-anim-fade-in {
    animation: tj-bf-fadeIn 0.3s ease-out forwards;
}
.tj-barra-fixa-content.tj-anim-fade-out {
    animation: tj-bf-fadeOut 0.3s ease-out forwards;
}

.tj-barra-fixa-content.tj-anim-slide-down {
    animation: tj-bf-slideDown 0.3s ease-out forwards;
}
.tj-barra-fixa-content.tj-anim-slide-up {
    animation: tj-bf-slideUp 0.3s ease-out forwards;
}

.tj-barra-fixa-content.tj-fixed-topo.tj-oculto-scroll {
    transform: translateY(-100%);
    opacity: 0.7; 
}


@keyframes tj-bf-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; } 
}
@keyframes tj-bf-fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes tj-bf-slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes tj-bf-slideUp {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-100%); opacity: 0; }
}

.tj-barra-fixa-content.tj-fixed-rodape.tj-anim-slide-up-rodape { 
    animation: tj-bf-slideUpRodape 0.3s ease-out forwards;
}
@keyframes tj-bf-slideUpRodape {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.tj-barra-fixa-content.tj-anim-slide-down-rodape { 
    animation: tj-bf-slideDownRodape 0.3s ease-out forwards;
}
@keyframes tj-bf-slideDownRodape {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(100%); opacity: 0; }
}