/* =========================================================
   MENU INFERIOR MOBILE - CONECTADO EM SERGIPE
   ========================================================= */

.app-mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    min-height: 60px;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding: 4px max(10px, env(safe-area-inset-right, 0px)) calc(3px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid #dbe3ef;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-sizing: border-box;
    gap: 4px;
}

.app-mobile-bottom-nav::-webkit-scrollbar {
    display: none;
}

.app-mobile-bottom-nav .app-bottom-nav-item {
    flex: 0 0 62px;
    min-width: 62px;
    scroll-snap-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #52627a;
    font-size: 0.65rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    padding: 2px 4px;
}

.app-mobile-bottom-nav .app-bottom-nav-item i {
    font-size: 1.15rem;
    transition: transform 0.15s ease, color 0.15s ease;
}

.app-mobile-bottom-nav .app-bottom-nav-item:active {
    transform: scale(0.94);
}

.app-mobile-bottom-nav .app-bottom-nav-item.active {
    color: #075be8;
}

.app-mobile-bottom-nav .app-bottom-nav-item.active i {
    color: #075be8;
}

/* Botão Central Destacado (+ Anunciar) */
.app-mobile-bottom-nav .app-bottom-nav-item.is-announce {
    flex: 0 0 68px;
    min-width: 68px;
    color: #075be8;
}

.app-mobile-bottom-nav .app-bottom-nav-plus {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    margin: 0 auto;
    color: #ffffff;
    background: linear-gradient(135deg, #075be8, #0649c9);
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(7, 91, 232, 0.35);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.app-mobile-bottom-nav .app-bottom-nav-plus i {
    font-size: 0.92rem;
    color: #ffffff !important;
}

.app-mobile-bottom-nav .app-bottom-nav-item.is-announce:active .app-bottom-nav-plus {
    transform: scale(0.90);
}

.app-mobile-bottom-nav .app-bottom-nav-item.is-announce span:last-child {
    color: #075be8;
    font-weight: 700;
    font-size: 0.65rem;
    margin-top: 2px;
}

/* ─── Modo Escuro (Dark Mode) ────────────────────────────────────────────── */
html[data-theme="dark"] .app-mobile-bottom-nav,
[data-bs-theme="dark"] .app-mobile-bottom-nav {
    background: rgba(15, 23, 42, 0.96) !important;
    border-top-color: #283548 !important;
    box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .app-mobile-bottom-nav .app-bottom-nav-item,
[data-bs-theme="dark"] .app-mobile-bottom-nav .app-bottom-nav-item {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .app-mobile-bottom-nav .app-bottom-nav-item.active,
[data-bs-theme="dark"] .app-mobile-bottom-nav .app-bottom-nav-item.active {
    color: #3b82f6 !important;
}

html[data-theme="dark"] .app-mobile-bottom-nav .app-bottom-nav-item.active i,
[data-bs-theme="dark"] .app-mobile-bottom-nav .app-bottom-nav-item.active i {
    color: #3b82f6 !important;
}

html[data-theme="dark"] .app-mobile-bottom-nav .app-bottom-nav-plus,
[data-bs-theme="dark"] .app-mobile-bottom-nav .app-bottom-nav-plus {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.45) !important;
}

html[data-theme="dark"] .app-mobile-bottom-nav .app-bottom-nav-item.is-announce span:last-child,
[data-bs-theme="dark"] .app-mobile-bottom-nav .app-bottom-nav-item.is-announce span:last-child {
    color: #3b82f6 !important;
}

/* ─── Ajustes de Posição de Botões Flutuantes e Espaçamento no Mobile ───── */
@media (max-width: 991.98px) {
    body.user-authenticated,
    body:has(.app-mobile-bottom-nav) {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    body.user-authenticated .theme-toggle-wrapper,
    body.user-authenticated .theme-toggle-container,
    body:has(.app-mobile-bottom-nav) .theme-toggle-wrapper,
    body:has(.app-mobile-bottom-nav) .theme-toggle-container {
        bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 1050 !important;
    }

    body.user-authenticated .back-to-top-btn,
    body:has(.app-mobile-bottom-nav) .back-to-top-btn {
        bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 1050 !important;
    }

    body.user-authenticated .site-footer,
    body:has(.app-mobile-bottom-nav) .site-footer {
        padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ─── Ocultar no Desktop ─────────────────────────────────────────────────── */
@media (min-width: 992px) {
    .app-mobile-bottom-nav {
        display: none !important;
    }
}