/* Barra do topo v2 (carregada só no modo prévia).
   Referências: 21st.dev (campo de busca com atalho visível, menus densos), cta.gallery (botão de ação sólido). */

/* ---------- Botão "Comece a vender" ---------- */
.navbar .mxp-sell {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
    border-radius: 10px; border: 0; background: #2563eb !important; color: #fff !important;
    font-family: var(--font-body, 'Poppins', sans-serif); font-size: .88rem; font-weight: 600; letter-spacing: 0; text-transform: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 16px rgba(37, 99, 235, .28);
    transition: background-color .15s, transform .1s, box-shadow .15s; white-space: nowrap;
}
.navbar .mxp-sell:hover { background: #1d4ed8 !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 20px rgba(37, 99, 235, .36); }
.navbar .mxp-sell:active { transform: translateY(1px); }
.navbar .mxp-sell i { font-size: .8rem; }
.navbar .mxp-sell:focus-visible { outline: 3px solid rgba(96, 165, 250, .7); outline-offset: 2px; }

/* ---------- Busca ---------- */
.navbar .nav-search-wrapper.mxp-search { max-width: 540px; flex: 1 1 420px; }
.navbar .nav-search-wrapper.mxp-search input {
    height: 44px; border-radius: 12px !important; padding: 0 64px 0 42px !important; font-size: .92rem;
    background: var(--mx-nav-search-bg) !important; border: 1px solid var(--mx-nav-search-border) !important;
}
.navbar .nav-search-wrapper.mxp-search input:hover { border-color: color-mix(in srgb, var(--mx-nav-search-focus) 45%, var(--mx-nav-search-border)) !important; }
.navbar .nav-search-wrapper.mxp-search > i.fa-search { color: var(--mx-nav-search-muted); font-size: .9rem; }
.navbar .nav-search-wrapper.mxp-search:focus-within > i.fa-search { color: var(--mx-nav-search-focus); }
.mxp-kbd {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none;
    min-width: 24px; height: 24px; padding: 0 7px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--mx-nav-search-border); background: var(--mx-nav-search-drop); color: var(--mx-nav-search-muted);
    font: 600 .75rem/1 ui-monospace, 'SFMono-Regular', Menlo, monospace; transition: opacity .15s;
}
.nav-search-wrapper.mxp-search:focus-within .mxp-kbd { opacity: 0; }

/* ---------- Menu do usuário (mesma organização do menu do chat) ---------- */
.navbar .profile-dropdown.mxp-menu { width: 300px; padding: 0; overflow: hidden; border-radius: 14px; border: 1px solid var(--border-color); background: var(--card-color) !important; box-shadow: 0 18px 40px rgba(15, 23, 42, .18); }
.mxp-menu .mxp-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: color-mix(in srgb, var(--card-color) 90%, var(--primary-color) 10%); }
.mxp-menu .mxp-head img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.mxp-menu .mxp-head strong { display: block; color: var(--text-primary); font-size: 1rem; line-height: 1.2; }
.mxp-menu .mxp-head a { color: var(--primary-color); font-size: .82rem; text-decoration: none; font-weight: 500; }
.mxp-menu .mxp-head a:hover { text-decoration: underline; }
.mxp-menu .mxp-level { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .72rem; color: var(--text-secondary); }
.mxp-menu .mxp-level i { display: block; flex: 1 1 auto; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--text-secondary) 25%, transparent); overflow: hidden; }
.mxp-menu .mxp-level i b { display: block; height: 100%; background: #2563eb; border-radius: 999px; }
.mxp-menu .mxp-balance { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; color: var(--text-primary); text-decoration: none; font-size: .9rem; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.mxp-menu .mxp-balance:hover { background: color-mix(in srgb, var(--card-color) 94%, var(--text-primary) 6%); color: var(--text-primary); }
.mxp-menu .mxp-balance span { display: inline-flex; align-items: center; gap: 10px; color: var(--text-secondary); }
.mxp-menu .mxp-balance strong { font-family: var(--font-heading, 'Manrope', sans-serif); font-size: 1rem; font-variant-numeric: tabular-nums; }
.mxp-menu .mxp-group { padding: 6px; }
.mxp-menu .mxp-group + .mxp-group { border-top: 1px solid var(--border-color); }
.mxp-menu .dropdown-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 9px; color: var(--text-primary); font-size: .9rem; background: transparent; }
.mxp-menu .dropdown-item i { width: 18px; text-align: center; color: var(--text-secondary); font-size: .9rem; margin: 0 !important; }
.mxp-menu .dropdown-item:hover, .mxp-menu .dropdown-item:focus { background: color-mix(in srgb, var(--card-color) 92%, var(--text-primary) 8%); color: var(--text-primary); }
.mxp-menu .dropdown-item .badge-inline-count { margin-left: auto; }
.mxp-menu .mxp-gift i { color: #7c3aed; }
.mxp-menu .mxp-logout, .mxp-menu .mxp-logout i { color: #dc2626 !important; }
body.dark-theme .mxp-menu .mxp-logout, body.dark-theme .mxp-menu .mxp-logout i { color: #f87171 !important; }

/* ---------- Botão "Comece a vender" v2 (prévia) ---------- */
.navbar .mxp-sell.mxp-sell--v2 {
    position: relative; overflow: hidden; height: 42px; padding: 0 18px 0 6px; gap: 10px; border-radius: 12px;
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important; border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 22px -8px rgba(37, 99, 235, .7);
    font-weight: 700; font-size: .9rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.navbar .mxp-sell.mxp-sell--v2 i {
    width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; font-size: .78rem;
    background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    transition: transform .2s ease;
}
.navbar .mxp-sell.mxp-sell--v2::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg);
}
.navbar .mxp-sell.mxp-sell--v2:hover { background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%) !important; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 26px -8px rgba(37, 99, 235, .8); }
.navbar .mxp-sell.mxp-sell--v2:hover i { transform: rotate(90deg); }
.navbar .mxp-sell.mxp-sell--v2:active { transform: translateY(0); }
@media (prefers-reduced-motion: no-preference) {
    .navbar .mxp-sell.mxp-sell--v2:hover::after { animation: mxp-shine .7s ease; }
}
@keyframes mxp-shine { to { left: 130%; } }