/* ============================================================
   AllTickets — barra de navegação inferior UNIFICADA
   Mesmo visual em: site público (mobile), app do usuário e app do organizador.
   FONTE ÚNICA destas regras — não duplicar em outros CSS.
   ============================================================ */

.oapp-nav {
    --app-brand: #004FCC;
    --app-brand-strong: #003a9b;
    --app-line: #e6eaf1;

    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    max-width: 540px;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(1.2) blur(8px);
    -webkit-backdrop-filter: saturate(1.2) blur(8px);
    border-top: 1px solid var(--app-line);
    box-shadow: 0 -8px 26px rgba(8, 20, 45, .08);
    font-family: "Red Hat Display", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
}

.oapp-nav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 44px;
    text-decoration: none;
    color: #97a1b0;
    font-size: 10.5px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
}
.oapp-nav__item i { font-size: 22px; }
.oapp-nav__item.is-active { color: var(--app-brand); }
.oapp-nav__item:active { transform: scale(.92); }

.oapp-nav__fab {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    margin: -26px 6px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--app-brand) 0%, var(--app-brand-strong) 100%);
    color: #fff;
    font-size: 28px;
    box-shadow: 0 12px 24px rgba(0, 79, 204, .42);
    text-decoration: none;
    border: 4px solid #fff;
    -webkit-tap-highlight-color: transparent;
}
.oapp-nav__fab:active { transform: scale(.92); }

/* Variante do SITE PÚBLICO: a mesma barra, mas só aparece no celular
   (nos app-shells a barra aparece sempre, inclusive na pré-visualização ?view=mobile no PC). */
.oapp-nav--public { display: none; }
@media (max-width: 767.98px) {
    .oapp-nav--public { display: flex; }
}