/* ==========================================================================
   Variables
   ========================================================================== */
:root {
    --woo-mega-menu-primary: #00a884; /* Verde principal basado en capturas */
    --woo-mega-menu-text: #333333;
    --woo-mega-menu-bg: #ffffff;
    --woo-mega-menu-hover-bg: #f5f5f5;
    --woo-mega-menu-border: #eeeeee;
}

/* ==========================================================================
   General Reset & Wrapper
   ========================================================================== */
.woo-mega-menu-wrapper {
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.woo-mega-menu-wrapper * {
    box-sizing: border-box;
}

.woo-mega-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.woo-menu-item {
    position: relative;
    margin: 0 15px;
}

.woo-menu-item > a {
    display: block;
    padding: 15px 0;
    color: var(--woo-mega-menu-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: color 0.3s ease;
}

.woo-menu-item:hover > a,
.woo-menu-item.clicked-open > a {
    color: var(--woo-mega-menu-primary);
}

.woo-mega-menu-toggle {
    display: none; /* Oculto en desktop */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--woo-mega-menu-primary);
    padding: 10px;
}

/* ==========================================================================
   Desktop Mega Menu Panel
   ========================================================================== */
@media (min-width: 992px) {
    .woo-mega-menu-wrapper {
        position: relative; /* El contenedor principal es el punto de referencia */
        width: 100%;
    }

    .woo-menu-item {
        position: relative !important; /* Default para manual, garantiza que el dropdown se alinee debajo del item */
    }

    .woo-menu-item.woo-has-dynamic-mega-menu {
        position: static !important; /* El mega menú dinámico usa static para expandirse al 100% del wrapper */
    }

    .woo-menu-item.has-mega-menu > a {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .woo-menu-item.has-mega-menu > a::after {
        content: "";
        display: inline-block;
        border-style: solid;
        border-width: 4px 4px 0 4px;
        border-color: currentColor transparent transparent transparent;
        margin-left: 2px;
        transition: transform 0.3s ease;
    }

    .woo-menu-item.has-mega-menu:hover > a::after,
    .woo-menu-item.has-mega-menu.clicked-open > a::after {
        transform: rotate(180deg);
    }

    .woo-mega-menu-panel {
        position: absolute;
        top: 100%;
        background: var(--woo-mega-menu-bg);
        border-top: 1px solid var(--woo-mega-menu-border);
        border-bottom: 1px solid var(--woo-mega-menu-border);
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.3s ease, visibility 0s 0.3s, transform 0.3s ease, max-height 0s 0.3s;
        z-index: 9999;
        transform: translateY(10px);
    }

    .woo-menu-item.has-mega-menu:hover .woo-mega-menu-panel,
    .woo-menu-item.has-mega-menu .woo-mega-menu-panel.force-open {
        opacity: 1;
        visibility: visible;
        max-height: 9999px;
        overflow: visible;
        transform: translateY(0);
        transition: opacity 0.3s ease, visibility 0s, transform 0.3s ease, max-height 0s;
    }
    
    .woo-menu-item.has-mega-menu:hover .woo-mega-menu-panel.woo-manual-dropdown,
    .woo-menu-item.has-mega-menu .woo-mega-menu-panel.woo-manual-dropdown.force-open {
        transform: translateY(0) !important;
    }

    .woo-mega-menu-panel-inner {
        padding: 40px 20px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .woo-mobile-panel-header {
        display: none;
    }

    .woo-mega-menu-header-desktop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--woo-mega-menu-border);
        padding-bottom: 15px;
        margin-bottom: 30px;
    }

    .woo-desktop-title {
        font-size: 24px;
        font-weight: 700;
        color: var(--woo-mega-menu-text);
    }

    .woo-view-all {
        color: var(--woo-mega-menu-primary);
        text-decoration: none;
        font-weight: 600;
    }

    .woo-view-all:hover {
        text-decoration: underline;
    }

    .woo-mega-menu-columns {
        column-count: 4; /* Masonry layout */
        column-gap: 40px;
    }

    .woo-mega-menu-column {
        break-inside: avoid-column;
        page-break-inside: avoid;
        margin-bottom: 30px;
    }

    .woo-mega-menu-column h4 a {
        color: var(--woo-mega-menu-primary);
        text-decoration: none;
        font-weight: 600;
    }

    .woo-mega-menu-column ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .woo-mega-menu-column ul li {
        position: relative;
        margin-bottom: 8px;
    }

    /* Viñetas Toggle - SÍ */
    .woo-bullets-yes .woo-mega-menu-column ul li::before,
    .woo-bullets-yes .woo-manual-menu-list ul li::before {
        content: "•";
        position: absolute;
        left: 0;
        color: var(--woo-mega-menu-text);
    }
    
    .woo-bullets-yes .woo-mega-menu-column ul li,
    .woo-bullets-yes .woo-manual-menu-list ul li {
        padding-left: 12px;
    }

    /* Viñetas Toggle - NO */
    .woo-bullets-no .woo-mega-menu-column ul li::before,
    .woo-bullets-no .woo-manual-menu-list ul li::before {
        display: none;
    }

    .woo-bullets-no .woo-mega-menu-column ul li,
    .woo-bullets-no .woo-manual-menu-list ul li {
        padding-left: 0;
    }

    .woo-mega-menu-column ul li a {
        color: var(--woo-mega-menu-text);
        text-decoration: none;
        font-size: 14px;
        transition: color 0.2s;
    }

    .woo-mega-menu-column ul li a:hover {
        color: var(--woo-mega-menu-primary);
    }

    /* Menú Desplegable Manual */
    .woo-mega-menu-panel.woo-manual-dropdown {
        width: max-content;
        min-width: 220px;
        max-width: 350px;
        left: 0 !important;
        right: auto !important;
        transform: translateY(10px) !important;
    }

    .woo-manual-dropdown .woo-mega-menu-panel-inner {
        padding: 0;
        margin: 0;
    }

    .woo-manual-menu-list {
        display: flex;
        flex-direction: column;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .woo-manual-menu-list > li {
        margin: 0;
    }

    .woo-manual-menu-list > li > a {
        display: block;
        color: var(--woo-mega-menu-text);
        text-decoration: none;
        transition: background 0.2s, color 0.2s;
    }

    .woo-manual-menu-list > li > a:hover {
        background-color: var(--woo-mega-menu-hover-bg);
        color: var(--woo-mega-menu-primary);
    }

    /* Sub-niveles manuales */
    .woo-manual-menu-list ul {
        list-style: none;
        padding: 0;
        margin: 0;
        background: transparent;
    }
    
    .woo-manual-menu-list ul li {
        position: relative;
        margin: 0;
    }
    
    .woo-manual-menu-list ul li a {
        display: block;
        color: var(--woo-mega-menu-text);
        text-decoration: none;
        font-size: 14px;
        transition: color 0.2s, background 0.2s;
    }
    
    .woo-manual-menu-list ul li a:hover {
        color: var(--woo-mega-menu-primary);
        background-color: var(--woo-mega-menu-hover-bg);
    }
}

/* ==========================================================================
   Mobile Mega Menu (Off-canvas)
   ========================================================================== */
@media (max-width: 991px) {
    .woo-mega-menu-toggle {
        display: block;
    }

    .woo-mega-menu-nav {
        position: fixed;
        top: 0;
        left: -100%;
        width: 300px;
        max-width: 80vw;
        height: 100vh;
        background: var(--woo-mega-menu-bg);
        z-index: 99999;
        overflow-y: auto;
        transition: left 0.3s ease, visibility 0s 0.3s, opacity 0.3s ease;
        visibility: hidden;
        opacity: 0;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        padding: 20px 0;
    }

    .woo-mega-menu-nav.active {
        left: 0;
        visibility: visible;
        opacity: 1;
        transition: left 0.3s ease, visibility 0s, opacity 0.3s ease;
    }

    .woo-mega-menu-list {
        flex-direction: column;
        align-items: stretch;
    }

    .woo-menu-item {
        margin: 0;
        border-bottom: 1px solid var(--woo-mega-menu-border);
    }

    .woo-menu-item > a {
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
    }

    .woo-menu-item.has-mega-menu > a::after {
        content: "›";
        font-size: 20px;
        color: var(--woo-mega-menu-primary);
    }

    /* Off-canvas Panel para Submenús */
    .woo-mega-menu-panel {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background: var(--woo-mega-menu-bg);
        z-index: 100000;
        transition: left 0.3s ease, visibility 0s 0.3s, opacity 0.3s ease;
        visibility: hidden;
        opacity: 0;
        overflow-y: auto;
    }

    .woo-mega-menu-panel.active {
        left: 0;
        visibility: visible;
        opacity: 1;
        transition: left 0.3s ease, visibility 0s, opacity 0.3s ease;
    }

    .woo-mega-menu-header-desktop {
        display: none;
    }

    .woo-mobile-panel-header {
        display: flex;
        flex-direction: column;
        padding: 20px;
        border-bottom: 1px solid var(--woo-mega-menu-border);
    }

    .woo-mobile-back {
        background: none;
        border: none;
        color: var(--woo-mega-menu-primary);
        font-size: 16px;
        font-weight: 600;
        text-align: left;
        padding: 0 0 15px 0;
        cursor: pointer;
    }

    .woo-mobile-title {
        font-size: 24px;
        font-weight: 700;
        color: var(--woo-mega-menu-text);
    }

    .woo-mega-menu-columns {
        padding: 20px;
    }

    .woo-mega-menu-column {
        margin-bottom: 30px;
    }

    .woo-mega-menu-column h4 {
        margin: 0 0 10px 0;
        font-size: 18px;
    }

    .woo-mega-menu-column h4 a {
        color: var(--woo-mega-menu-primary);
        text-decoration: none;
    }

    .woo-mega-menu-column ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .woo-mega-menu-column ul li {
        padding: 10px 0;
        border-bottom: 1px solid #f9f9f9;
    }

    .woo-mega-menu-column ul li a {
        color: var(--woo-mega-menu-text);
        text-decoration: none;
        font-size: 15px;
    }
}