/* ============================================================
   FOOTER — ShopGP3 App
   Ajustes de alinhamento + dropdown + refinamento UI
   ============================================================ */

:root {
    --layout-padding: 12px;
    --footer-font-size: 0.72rem;
    --footer-dropdown-bg: rgba(15, 23, 42, 0.98);
    --footer-dropdown-border: rgba(129, 140, 248, 0.35);
    --footer-dropdown-shadow: 0 14px 40px rgba(15, 23, 42, 0.85);
}

/* ============================================================
   BLOCO SUPERIOR — Info + País
   ============================================================ */

.app-footer-extra {
    max-width: 1080px;
    margin: 0 auto 6px;
    padding: 4px var(--layout-padding) 0;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    font-size: var(--footer-font-size);
    color: var(--text-soft);
}

.app-footer-extra__left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.app-footer-extra__left .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.7);
}

.app-footer-extra__right form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.app-footer-extra__right label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.app-footer-extra__right select {
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-soft);
    background: rgba(15, 23, 42, 0.95);
    color: var(--text-main);
    font-size: var(--footer-font-size);
}

/* ============================================================
   BOTTOM NAV — alinhamento perfeito + dropdown nativo
   ============================================================ */

.app-bottom-nav__inner {
    display: flex;
    justify-content: space-around;
    align-items: center; /* Alinhamento vertical perfeito */
}

/* Cada item perfeitamente alinhado */
.app-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* eixo vertical */
    gap: 3px;

    text-align: center;
    font-size: 0.68rem;
    color: rgba(226, 232, 240, 0.9);

    position: relative; /* necessário para dropdown */
}

/* Ícone mais alinhado */
.app-bottom-nav__item span.icon {
    font-size: 1.12rem;
    line-height: 1;
}

/* Item primário com maior destaque */
.app-bottom-nav__item--primary {
    background: var(--nav-chip-bg);
    border-radius: 999px;
    padding: 4px 10px;
    margin: 0 4px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ============================================================
   DROPDOWN — item "Mais"
   ============================================================ */

.app-bottom-nav__dropdown {
    display: none;
    flex-direction: column;

    position: absolute;
    bottom: 44px;
    left: 50%;
    transform: translateX(-50%);

    background: var(--footer-dropdown-bg);
    border: 1px solid var(--footer-dropdown-border);
    border-radius: 14px;

    box-shadow: var(--footer-dropdown-shadow);

    padding: 8px 0;
    min-width: 160px;
    z-index: 9999;
}

.app-bottom-nav__dropdown a {
    padding: 10px 14px;
    color: #e2e8f0;
    font-size: 0.78rem;
    text-decoration: none;

    display: flex;
    align-items: center;
    gap: 6px;
}

.app-bottom-nav__dropdown a:hover {
    background: rgba(255,255,255,0.08);
}

/* Mostrar dropdown ao clicar */
.app-bottom-nav__item--more.active .app-bottom-nav__dropdown {
    display: flex;
}