/* ==========================================================================
   Mega Menu Pro Divi 5 - Estilos Públicos (Frontend Estilo Elegant Themes)
   ========================================================================== */

/* Comportamiento del elemento <li> padre según el ancho elegido */
li.mmpd5-custom-width-li {
    position: relative !important; /* Mantiene el menú hijo anclado al centro del ítem */
}

li.mmpd5-full-width-li {
    position: static !important; /* Permite que el menú hijo se expanda por toda la pantalla */
}

/* Ocultar el submenú nativo de Divi si choca con nuestro plugin */
#top-menu li.mmpd5-has-mega-menu > ul {
    display: none !important; 
}

/* ==========================================================================
   Contenedor Principal del Mega Menú
   ========================================================================== */
.mmpd5-mega-menu-container {
    position: absolute;
    top: 100%;
    z-index: 99999;
    
    /* Efecto Visual Estilo Divi */
    background: #ffffff;
    border-radius: var(--mmpd5-radius, 8px) !important;
    /* ❌ AQUÍ QUITAMOS EL OVERFLOW PARA QUE LA FLECHA PUEDA VERSE ❌ */
    
    box-shadow: 0 10px 40px rgba(0,0,0,0.08), 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.05); 
    
    /* Configuración de Animación y Ocultamiento */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.3s;
    
    /* Pegamos el menú a la barra superior */
    margin-top: 0px; 
}

/* Contenedor interior para dar espacio y evitar que el contenido desborde las esquinas */
.mmpd5-menu-content-wrap {
    overflow: hidden !important; /* ✅ EL OVERFLOW SE QUEDA SOLO AQUÍ ✅ */
    border-radius: var(--mmpd5-radius, 8px) !important;
    position: relative;
    z-index: 2;
    padding: 25px;
    box-sizing: border-box;
    width: 100%;
}

/* ==========================================================================
   La Flecha Superior (Pointer)
   ========================================================================== */
.mmpd5-menu-arrow {
    position: absolute;
    top: -8px; 
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,0.05);
    border-left: 1px solid rgba(0,0,0,0.05);
    transform: rotate(45deg); 
    z-index: 1;
}

/* ==========================================================================
   Comportamiento: Ancho Personalizado
   ========================================================================== */
.mmpd5-mega-menu-container.mmpd5-width-custom {
    left: 50%;
}

.mmpd5-width-custom .mmpd5-menu-arrow {
    left: 50%;
    margin-left: -8px; 
}

/* Hover Animación: Ancho Personalizado */
li.mmpd5-custom-width-li:hover .mmpd5-width-custom {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) !important; 
    pointer-events: auto; 
}

/* ==========================================================================
   Comportamiento: Ancho Completo (Full Width)
   ========================================================================== */
.mmpd5-mega-menu-container.mmpd5-width-full {
    left: 0;
    right: 0;
    width: 100%;
}

.mmpd5-width-full .mmpd5-menu-arrow {
    left: 20%; 
}

/* Hover Animación: Ancho Completo */
li.mmpd5-full-width-li:hover .mmpd5-width-full {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) !important;
    pointer-events: auto; 
}