/* ============================================================
   menu.css — PRINT3D NERD · Loja Virtual de Impressão 3D
   Paleta: #0A0A1A (fundo) | #E8001C (vermelho) | #0057FF (azul)
           #FFFFFF (branco) | #FF6A00 (laranja neon — acento)
   Fontes: Rajdhani (exibição nerd) + Nunito (corpo)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800&family=Orbitron:wght@400;700;900&display=swap');

/* ── RESET ESCOPO ── */
.menu-superior *,
.menu-superior *::before,
.menu-superior *::after {
    box-sizing: border-box;
}

/* ── VARIÁVEIS DE MENU ── */
:root {
    --m-bg:           #0A0A1A;
    --m-surface:      #12122A;
    --m-border:       #1E1E3A;
    --m-vermelho:     #E8001C;
    --m-vermelho-esc: #B8001A;
    --m-azul:         #0057FF;
    --m-azul-esc:     #0042CC;
    --m-neon:         #FF6A00;
    --m-neon-glow:    rgba(255,106,0,.55);
    --m-branco:       #FFFFFF;
    --m-cinza-claro:  #CCCCDD;
    --m-cinza:        #6B6B8A;
    --m-altura:       68px;
    --m-radius:       8px;
    --m-bounce:       cubic-bezier(.68,-.55,.27,1.55);
    --m-ease:         cubic-bezier(.25,.46,.45,.94);
}

/* ── BARRA PRINCIPAL ── */
.menu-superior {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--m-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    height: var(--m-altura);
    z-index: 1000;
    border-bottom: 2px solid var(--m-vermelho);
    box-shadow:
        0 4px 24px rgba(0,0,0,.75),
        0 0 40px rgba(232,0,28,.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* fundo com textura de circuito sutil */
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(0,87,255,.06) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(232,0,28,.06) 0%, transparent 60%);
}

/* linha de scan animada no topo */
.menu-superior::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--m-azul) 20%,
        var(--m-neon) 50%,
        var(--m-vermelho) 80%,
        transparent 100%
    );
    background-size: 300% 100%;
    animation: scanLine 4s linear infinite;
    pointer-events: none;
}

/* pontilhado decorativo interno */
.menu-superior::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: repeating-linear-gradient(
        90deg,
        var(--m-azul) 0px, var(--m-azul) 4px,
        transparent 4px, transparent 12px
    );
    opacity: .25;
    pointer-events: none;
}

@keyframes scanLine {
    0%   { background-position: -300% 0; }
    100% { background-position:  300% 0; }
}

.menu-superior.hidden {
    transform: translateY(-100%);
    box-shadow: none;
}

/* ── LOGO ── */
.menu-esquerda {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--m-branco);
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15em;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color .35s ease, transform .4s var(--m-bounce), filter .35s ease;
    /* efeito glitch sutil no hover via CSS */
}

.logo-link:hover {
    color: var(--m-neon);
    transform: scale(1.04);
    filter: drop-shadow(0 0 8px var(--m-neon-glow));
}

.logo-link .logo-destaque {
    color: var(--m-vermelho);
}

.logo-link:hover .logo-destaque {
    color: var(--m-neon);
}

.logo-icon {
    flex-shrink: 0;
    transition: filter .35s ease;
}

.logo-link:hover .logo-icon {
    filter: drop-shadow(0 0 8px var(--m-neon-glow));
}

.logo-img {
    height: 44px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    flex-shrink: 0;
    transition: filter .35s ease;
}

.logo-link:hover .logo-img {
    filter: drop-shadow(0 0 8px var(--m-neon-glow));
}

/* ── MENU CENTRAL ── */
.menu-central {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
}

.menu-central > li {
    position: relative;
}

.menu-central > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: var(--m-cinza-claro);
    font-family: 'Rajdhani', sans-serif;
    font-size: .88em;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: var(--m-radius);
    background: linear-gradient(145deg, var(--m-surface), var(--m-bg));
    border: 1px solid var(--m-border);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition:
        color .3s ease,
        border-color .3s ease,
        transform .35s var(--m-ease),
        box-shadow .3s ease;
}

/* brilho de varredura no hover */
.menu-central > li > a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--m-azul), var(--m-vermelho));
    opacity: 0;
    transition: opacity .3s ease;
    border-radius: inherit;
    z-index: 0;
}

.menu-central > li > a * { position: relative; z-index: 1; }
.menu-central > li > a span,
.menu-central > li > a i { position: relative; z-index: 1; }

.menu-central > li > a:hover,
.menu-central > li > a.active {
    color: var(--m-branco);
    border-color: var(--m-azul);
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        0 6px 18px rgba(0,87,255,.35),
        0 0 0 1px rgba(0,87,255,.3);
}

.menu-central > li > a:hover::before,
.menu-central > li > a.active::before {
    opacity: 1;
}

/* botão de destaque (ex: Orçamento / Comprar agora) */
.destaque-nav {
    background: linear-gradient(135deg, var(--m-vermelho), var(--m-vermelho-esc)) !important;
    color: var(--m-branco) !important;
    border-color: var(--m-vermelho) !important;
    box-shadow: 0 3px 14px rgba(232,0,28,.45) !important;
    animation: pulseNav 2.5s ease-in-out infinite;
}

.destaque-nav::before { display: none !important; }

@keyframes pulseNav {
    0%, 100% { box-shadow: 0 3px 14px rgba(232,0,28,.45); }
    50%       { box-shadow: 0 6px 26px rgba(232,0,28,.75); }
}

.destaque-nav:hover {
    background: linear-gradient(135deg, var(--m-neon), #E05500) !important;
    border-color: var(--m-neon) !important;
    box-shadow: 0 6px 24px var(--m-neon-glow) !important;
    transform: translateY(-3px) scale(1.06) !important;
}

/* setas */
.seta, .seta-sub {
    font-size: .68em;
    opacity: .55;
    transition: transform .25s ease;
    line-height: 1;
}

.dropdown:hover > a .seta             { transform: rotate(180deg); opacity: 1; }
.dropdown-submenu:hover > a .seta-sub { transform: translateX(4px); opacity: 1; }

/* ─────────────────────────────────────────
   DROPDOWN — NÍVEL 1
───────────────────────────────────────── */
.dropdown .submenu {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
    background-color: var(--m-surface);
    list-style: none;
    width: max-content;
    min-width: 210px;
    border: 1px solid var(--m-border);
    border-top: 2px solid var(--m-azul);
    border-radius: 0 0 10px 10px;
    opacity: 0;
    transform: translateY(8px) scale(.97);
    transition:
        opacity .22s ease,
        transform .32s var(--m-bounce),
        visibility 0s linear .22s;
    z-index: 100;
    padding: 6px 0;
    box-shadow:
        0 16px 36px rgba(0,0,0,.65),
        0 0 0 1px rgba(0,87,255,.1);
    background-image: linear-gradient(180deg, rgba(0,87,255,.06) 0%, transparent 100%);
    /* CRÍTICO: permite que o subsubmenu absolute vaze para fora */
    overflow: visible;
}

/* bridge invisível */
.dropdown > a {
    position: relative;
}
.dropdown > a::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 12px;
    background: transparent;
}

.dropdown:hover .submenu,
.dropdown:focus-within .submenu {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
        opacity .22s ease,
        transform .32s var(--m-bounce),
        visibility 0s linear 0s;
}

/* ── ITENS DO SUBMENU ── */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    color: var(--m-cinza-claro);
    font-family: 'Nunito', sans-serif;
    font-size: .88em;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, padding-left .22s ease;
    white-space: nowrap;
    position: relative;
    border-left: 3px solid transparent;
}

.dropdown-submenu > a:hover {
    background: rgba(0,87,255,.12);
    color: #5BA3FF;
    padding-left: 26px;
    border-left-color: var(--m-azul);
}

/* ─────────────────────────────────────────
   SUB-SUBMENU — NÍVEL 2
───────────────────────────────────────── */
.dropdown-submenu .subsubmenu {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    top: -6px;
    left: 100%;
    margin-left: 2px;
    background-color: var(--m-surface);
    list-style: none;
    width: max-content;
    min-width: 260px;
    border: 1px solid var(--m-border);
    border-left: 3px solid var(--m-vermelho);
    border-radius: 0 10px 10px 10px;
    opacity: 0;
    transform: translateX(8px) scale(.97);
    transition:
        opacity .22s ease,
        transform .32s var(--m-bounce),
        visibility 0s linear .22s;
    z-index: 9999;
    padding: 6px 0;
    box-shadow:
        10px 12px 30px rgba(0,0,0,.60),
        0 0 0 1px rgba(232,0,28,.1);
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: visible;
    background-image: linear-gradient(180deg, rgba(232,0,28,.04) 0%, transparent 100%);
}

/* bridge lateral */
.dropdown-submenu > a {
    position: relative;
}
.dropdown-submenu > a::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    width: 10px;
    height: 100%;
    background: transparent;
}

.dropdown-submenu:hover .subsubmenu,
.dropdown-submenu:focus-within .subsubmenu {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0) scale(1);
    transition:
        opacity .22s ease,
        transform .32s var(--m-bounce),
        visibility 0s linear 0s;
}

.subsubmenu li a {
    display: block;
    padding: 9px 20px;
    color: var(--m-cinza-claro);
    font-family: 'Nunito', sans-serif;
    font-size: .85em;
    font-weight: 600;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .2s ease, color .2s ease, padding-left .2s ease, border-color .2s ease;
    white-space: nowrap;
}

.subsubmenu li a:hover {
    background: rgba(232,0,28,.10);
    color: #FF6680;
    padding-left: 26px;
    border-left-color: var(--m-vermelho);
}

/* ── DIREITA DO MENU ── */
.menu-direita {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ── CARRINHO (ícone flutuante) ── */
.btn-carrinho {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--m-surface), var(--m-bg));
    border: 1px solid var(--m-border);
    color: var(--m-cinza-claro);
    font-size: 1.1em;
    text-decoration: none;
    cursor: pointer;
    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .4s var(--m-bounce),
        box-shadow .3s ease;
}

.btn-carrinho:hover {
    background: linear-gradient(145deg, var(--m-neon), #CC4400);
    border-color: var(--m-neon);
    color: var(--m-branco);
    transform: translateY(-3px) scale(1.12) rotate(-8deg);
    box-shadow: 0 6px 18px var(--m-neon-glow);
}

.btn-carrinho .badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--m-vermelho);
    color: var(--m-branco);
    font-family: 'Orbitron', sans-serif;
    font-size: .6em;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232,0,28,.5); }
    50%       { box-shadow: 0 0 0 4px rgba(232,0,28,.0); }
}

/* ── HAMBURGER (mobile) ── */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

.hamburger span {
    display: block;
    height: 2px;
    background: var(--m-cinza-claro);
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease, background .3s ease, width .3s ease;
}

.hamburger span:nth-child(1) { width: 100%; }
.hamburger span:nth-child(2) { width: 70%; }
.hamburger span:nth-child(3) { width: 100%; }

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--m-vermelho); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--m-vermelho); }
.hamburger:hover span             { background: var(--m-neon); }

/* ── BOTÃO COROA / ADMIN ── */
.botao-coroa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--m-surface), var(--m-bg));
    border: 1px solid var(--m-border);
    color: var(--m-cinza);
    font-size: 1em;
    text-decoration: none;
    flex-shrink: 0;
    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .4s var(--m-bounce),
        box-shadow .3s ease;
}

.botao-coroa:hover {
    background: linear-gradient(145deg, #1E1E3A, #0A0A1A);
    color: var(--m-neon);
    border-color: var(--m-neon);
    transform: translateY(-3px) scale(1.12) rotate(8deg);
    box-shadow: 0 6px 16px var(--m-neon-glow);
}

.botao-coroa--master {
    color: var(--m-neon);
    border-color: rgba(255,106,0,.35);
    box-shadow: 0 0 10px rgba(255,106,0,.25);
    animation: coroaPulse 2.5s ease-in-out infinite;
}

@keyframes coroaPulse {
    0%, 100% { box-shadow: 0 0 8px  rgba(255,106,0,.25); }
    50%       { box-shadow: 0 0 20px rgba(255,106,0,.55); }
}

/* ── BLOCO DO USUÁRIO ── */
.usuario-wrap {
    position: relative;
    flex-shrink: 0;
}

.usuario-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(145deg, var(--m-surface), var(--m-bg));
    border: 1px solid var(--m-border);
    border-radius: 24px;
    color: var(--m-branco);
    font-family: 'Rajdhani', sans-serif;
    font-size: .88em;
    font-weight: 700;
    letter-spacing: .8px;
    padding: 7px 14px 7px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.usuario-btn:hover {
    background: linear-gradient(145deg, #1E1E3A, #12122A);
    border-color: var(--m-azul);
    box-shadow: 0 4px 16px rgba(0,87,255,.30);
    transform: translateY(-1px);
}

.usuario-btn .fa-circle-user {
    font-size: 1.25em;
    color: var(--m-azul);
}

.seta-usr {
    font-size: .75em;
    color: var(--m-cinza);
    transition: transform .3s ease, color .3s ease;
}

.usuario-btn:hover .seta-usr {
    color: var(--m-azul);
    transform: rotate(180deg);
}

/* ── DROPDOWN DO USUÁRIO ── */
.usuario-dropdown {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 230px;
    background-color: var(--m-surface);
    border: 1px solid var(--m-border);
    border-top: 3px solid var(--m-azul);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 16px 36px rgba(0,0,0,.70);
    opacity: 0;
    transform: translateY(10px) scale(.97);
    transition:
        opacity .22s ease,
        transform .3s var(--m-bounce),
        visibility 0s linear .22s;
    z-index: 200;
    overflow: hidden;
    background-image: linear-gradient(180deg, rgba(0,87,255,.05) 0%, transparent 30%);
}

.usuario-wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 10px;
    background: transparent;
}

.usuario-dropdown.open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
        opacity .22s ease,
        transform .3s var(--m-bounce),
        visibility 0s linear 0s;
}

.usr-cabecalho {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(0,87,255,.07);
    border-bottom: 1px solid var(--m-border);
}

.usr-avatar {
    font-size: 2em;
    color: var(--m-azul);
    line-height: 1;
    flex-shrink: 0;
}

.usr-nome-comp {
    font-family: 'Rajdhani', sans-serif;
    font-size: .9em;
    font-weight: 700;
    color: var(--m-branco);
    letter-spacing: .5px;
    line-height: 1.3;
}

.usr-nivel {
    display: inline-block;
    margin-top: 4px;
    font-family: 'Nunito', sans-serif;
    font-size: .7em;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
}

.usr-nivel.nivel-master   { background: rgba(255,106,0,.2);  color: var(--m-neon); }
.usr-nivel.nivel-admin    { background: rgba(232,0,28,.2);   color: #FF5566; }
.usr-nivel.nivel-operador { background: rgba(0,87,255,.2);   color: #5BA3FF; }

.usr-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--m-border), transparent);
    margin: 2px 0;
}

.usr-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--m-cinza-claro);
    font-family: 'Nunito', sans-serif;
    font-size: .88em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    border-left: 3px solid transparent;
    transition: background .2s ease, color .2s ease, padding-left .2s ease, border-color .2s ease;
}

.usr-link i {
    width: 16px;
    text-align: center;
    color: var(--m-cinza);
    transition: color .2s ease;
    flex-shrink: 0;
}

.usr-link:hover {
    background: rgba(0,87,255,.10);
    color: #5BA3FF;
    padding-left: 22px;
    border-left-color: var(--m-azul);
}

.usr-link:hover i { color: var(--m-azul); }

.usr-sair       { color: #FF5566; }
.usr-sair i     { color: #CC2233; }
.usr-sair:hover { background: rgba(232,0,28,.10); color: #FF5566; border-left-color: var(--m-vermelho); }
.usr-sair:hover i { color: #FF5566; }

/* ── RESPONSIVIDADE ── */
@media (max-width: 960px) {
    .menu-superior {
        padding: 0 16px;
        height: auto;
        min-height: 60px;
        flex-wrap: wrap;
    }

    .hamburger { display: flex; }

    .menu-central {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--m-bg);
        padding: 12px 16px 18px;
        border-top: 2px solid var(--m-vermelho);
        box-shadow: 0 16px 32px rgba(0,0,0,.65);
        z-index: 999;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        background-image:
            radial-gradient(ellipse at 50% 0%, rgba(232,0,28,.08) 0%, transparent 50%);
    }

    .menu-central.active { display: flex; }

    .menu-central > li { width: 100%; }

    .menu-central > li > a {
        width: 100%;
        justify-content: space-between;
    }

    .dropdown .submenu,
    .dropdown-submenu .subsubmenu {
        display: none;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        position: static;
        transform: none;
        width: 100%;
        min-width: 0;
        margin: 2px 0 0;
        border: none;
        border-left: 3px solid var(--m-azul);
        border-radius: 0;
        background-color: rgba(18,18,42,.95);
        box-shadow: none;
        padding: 4px 0 4px 14px;
        max-height: none;
        overflow: visible;
        background-image: none;
    }

    .dropdown.mob-open > .submenu            { display: block; }
    .dropdown-submenu.mob-open > .subsubmenu { display: block; }

    .dropdown.mob-open > a .seta              { transform: rotate(180deg); }
    .dropdown-submenu.mob-open > a .seta-sub  { transform: rotate(90deg); }

    .dropdown > a::after,
    .dropdown-submenu > a::after { display: none; }

    .subsubmenu li a { white-space: normal; }
    .menu-central > li > a:hover { transform: none; }

    .botao-coroa { width: 34px; height: 34px; font-size: .9em; }
    .usuario-btn .usr-nome { display: none; }
    .usuario-dropdown { right: 0; min-width: 200px; }
}

/* scrollbar personalizada nos submenus */
.dropdown-submenu .subsubmenu::-webkit-scrollbar {
    width: 4px;
}
.dropdown-submenu .subsubmenu::-webkit-scrollbar-track {
    background: var(--m-bg);
}
.dropdown-submenu .subsubmenu::-webkit-scrollbar-thumb {
    background: var(--m-azul);
    border-radius: 2px;
}

/* ── FIX CRÍTICO: overflow visible para subsubmenu não ser cortado ──
   O submenu-scroll usa overflow-y: auto que corta elementos absolute.
   Forçamos overflow-x visible para o subsubmenu vazar para a direita. */
.submenu-scroll {
    overflow-x: visible !important;
}