/* Shared 7PLAY77 navigation. Each icon asset includes its Portuguese caption. */
html.play77-tab-child #tabBar { display: none !important; }
#tabBar.gax-tabbar {
    right: auto;
    left: 50%;
    width: min(100%, 520px);
    max-width: 520px;
    height: 80px;
    transform: translateX(-50%);
    background: transparent !important;
}
#tabBar .gax-tabbar-bg { display: block; height: 80px; object-fit: fill; }
#tabBar .gax-tabbar-items {
    align-items: flex-end;
    justify-content: space-around;
    height: 80px;
    padding: 0 0 4px;
}
#tabBar .gax-tabbar-item {
    top: 0;
    flex: 0 0 20%;
    align-items: flex-end;
    width: 20%;
    height: 80px;
}
#tabBar .gax-tabbar-icon,
#tabBar .gax-tabbar-item.is-active .gax-tabbar-icon {
    width: 60px;
    height: 36px;
    transform: none;
    clip-path: none;
    object-fit: fill;
}
#tabBar .gax-tabbar-item[data-key="agent"] .gax-tabbar-icon,
#tabBar .gax-tabbar-item[data-key="agent"].is-active .gax-tabbar-icon { height: 60px; }
#tabBar .gax-tabbar-label { display: none; }
#tabBar .gax-tabbar-item[data-key="activity"]::after,
#tabBar .gax-tabbar-item[data-key="personal"]::after {
    position: absolute;
    z-index: 12;
    top: 41.5px;
    left: calc(50% + 4.5px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: url('https://d2xzmbk1lnguwx.cloudfront.net/releases/20261013072345-ec28983f/static/image/play77/tabbar-red-dot.png') center / 100% 100% no-repeat;
    content: "";
    pointer-events: none;
    animation: play77-red-pulse 0.6s ease infinite;
}
@keyframes play77-red-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
    #tabBar .gax-tabbar-item[data-key="activity"]::after,
    #tabBar .gax-tabbar-item[data-key="personal"]::after { animation: none; }
}
body.gax-promotion-page #tabBar.gax-tabbar { width: min(100%, 520px); max-width: 520px; }
body.gax-promotion-page .gax-promotion-list { padding-bottom: 80px; }
@media screen and (max-width: 750px) {
    #tabBar.gax-tabbar,
    body.gax-promotion-page #tabBar.gax-tabbar {
        right: auto;
        left: 50%;
        width: 100%;
        max-width: 520px;
        transform: translateX(-50%);
    }
}