/* ════════════════════════════════════════════════════
   nav-dropdown.css — Mega-menu "Outros Serviços"
   Tema ESCURO — usado nas sub-páginas Ampopar
   Mesmo padrão do index.html (posição absolute)
   Controlado por js/dropdown.js
════════════════════════════════════════════════════ */

/* O <li> é o contexto de posicionamento */
.nav-item-dropdown {
    position: relative !important;
}

/* Link do trigger */
.nav-item-dropdown > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

/* Seta de caret */
.nav-item-dropdown > a .dd-arrow {
    font-size: 0.58rem;
    display: inline-block;
    transition: transform 0.22s ease, color 0.22s ease;
}

/* ── PAINEL — fechado por padrão ──
   position: absolute relativo ao <li>
   top: 100% = imediatamente abaixo do link
   O padding-top (24px) cobre o gap visual e
   evita que o mouse "saia" ao descer para o painel */
.nav-item-dropdown .nav-ix-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-6px) !important;
    width: 560px !important;
    max-width: calc(100vw - 24px) !important;
    /* padding-top cobre gap + conteúdo interno */
    padding: 24px 18px 18px !important;
    background: rgba(8, 12, 30, 0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 18px !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(249,115,22,0.07) inset !important;
    box-sizing: border-box !important;
    /* Estado fechado */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s !important;
    z-index: 99999 !important;
}

/* Seta decorativa — fica no padding-top */
.nav-item-dropdown .nav-ix-dropdown::before {
    content: '' !important;
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border: 7px solid transparent !important;
    border-top: none !important;
    border-bottom-color: rgba(255,255,255,0.12) !important;
    pointer-events: none !important;
}

/* ── ABERTO — classe .dd-open adicionada pelo JS ── */
.nav-item-dropdown .nav-ix-dropdown.dd-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
    transform: translateX(-50%) translateY(0) !important;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0s !important;
}

/* Girar seta quando aberto */
.nav-item-dropdown:has(.dd-open) > a .dd-arrow {
    transform: rotate(180deg) !important;
    color: #f97316 !important;
}

/* ── Cabeçalho do painel ── */
.nix-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.nix-header-icon {
    width: 30px; height: 30px; flex-shrink: 0;
    background: linear-gradient(135deg, #f97316, #ea580c);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem; color: #fff;
}

.nix-header h4 {
    font-size: 0.77rem; font-weight: 800;
    color: #fff; letter-spacing: 0.03em; margin: 0;
}

.nix-header p {
    font-size: 0.67rem; color: rgba(255,255,255,0.38); margin: 1px 0 0;
}

/* ── Grid 2 × 2 ── */
.nix-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── Item individual ── */
.nix-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 11px !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    transition: background 0.18s, border-color 0.18s !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    color: #dde2f0 !important;
}

.nix-item:hover {
    background: rgba(249,115,22,0.09) !important;
    border-color: rgba(249,115,22,0.22) !important;
}

.nix-item-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    transition: transform 0.18s ease;
}
.nix-item:hover .nix-item-icon { transform: scale(1.07); }

.nix-item-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.nix-item-text h6 {
    font-size: 0.79rem; font-weight: 700;
    color: #dde2f0; margin: 0 0 2px; line-height: 1.25;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
}

.nix-item-text p {
    font-size: 0.67rem; color: rgba(220,224,240,0.44);
    margin: 0; line-height: 1.35;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
}

.nix-item:hover .nix-item-text h6 { color: #f97316 !important; }

/* ── Rodapé ── */
.nix-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.nix-footer-link {
    font-size: 0.69rem; color: rgba(255,255,255,0.32);
    text-decoration: none; display: inline-flex; align-items: center;
    gap: 5px; transition: color 0.18s; white-space: nowrap; flex-shrink: 0;
}
.nix-footer-link:hover { color: #f97316; }

.nix-footer-wpp {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(37,211,102,0.1); border: 1px solid rgba(37,211,102,0.22);
    color: #25D366; font-size: 0.69rem; font-weight: 700;
    padding: 5px 13px; border-radius: 20px;
    text-decoration: none; transition: background 0.18s, transform 0.18s;
    white-space: nowrap; flex-shrink: 0;
}
.nix-footer-wpp:hover { background: rgba(37,211,102,0.2); transform: translateY(-1px); }

/* ── Mobile: ocultar dropdown ── */
@media (max-width: 860px) {
    .nav-item-dropdown .nav-ix-dropdown {
        display: none !important;
    }
}