/**
 * Global Bottom Nav Bar — Frontend CSS
 * @version 1.0.0
 *
 * Nota: A maioria dos estilos são gerados dinamicamente via PHP inline.
 * Este arquivo contém apenas base resets e animações.
 */

/* Reset */
.gbn-bar,
.gbn-bar * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.gbn-bar {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Transição suave de entrada */
.gbn-bar {
    animation: gbnSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes gbnSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Após a animação de entrada, a transição inline do JS assume.
   A animação é removida pelo JS após concluída para não conflitar. */
.gbn-bar.gbn-scroll-ready {
    animation: none !important;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

/* Desktop centralizado */
@media (min-width: 769px) {
    .gbn-bar {
        animation: gbnSlideUpDesktop 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes gbnSlideUpDesktop {
        from {
            transform: translateX(-50%) translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }
    }

    .gbn-bar.gbn-scroll-ready {
        animation: none !important;
    }
}

/* Ripple effect ao clicar */
.gbn-bar-item {
    overflow: hidden;
}

.gbn-bar-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, opacity 0.3s;
    opacity: 0;
}

.gbn-bar-item:active::after {
    width: 120%;
    height: 120%;
    opacity: 1;
    transition: width 0s, height 0s, opacity 0s;
}

/* Safe area para iPhones com notch/barra inferior */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .gbn-bar {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.gbn-bar-visible {
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Evitar conflito com WooCommerce e temas */
.gbn-bar a {
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.gbn-bar a:focus,
.gbn-bar [role="button"]:focus {
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: 2px;
    border-radius: inherit;
}

/* Shortcode content que pode aparecer (ex: FunnelKit cart icon) */
.gbn-shortcode-icon * {
    font-size: inherit;
    line-height: inherit;
}

/* O shortcode do FunnelKit renderiza inline — garantir que fique centrado */
.gbn-shortcode-icon a,
.gbn-shortcode-icon button,
.gbn-shortcode-icon span {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Esconder texto do shortcode do carrinho (só ícone SVG + badge) */
.gbn-shortcode-icon .fkcart-text,
.gbn-shortcode-icon .xoo-wsc-text {
    display: none !important;
}

/* Badge de quantidade do carrinho */
.gbn-bar-item .cart-count,
.gbn-bar-item .count,
.gbn-bar-item .fkcart-qty,
.gbn-bar-item .xoo-wsc-items-count {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 9px;
    background: #ff4444;
    color: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
}

/* Print: esconder a barra */
@media print {
    .gbn-bar {
        display: none !important;
    }
}