/* ============================================
   FIX CONTESTO DI POSIZIONAMENTO
   ============================================ */
#serviziProfessionistiDropdown {
    position: static !important;
}

.navbar {
    position: relative;
}

/* ============================================
   MEGAMENU - DESKTOP (>= 1200px, navbar espansa)
   ============================================ */
@media (min-width: 1200px) {
    .megamenu-dropdown {
        position: absolute !important;
        min-width: 1100px !important;
        max-width: 98vw !important;
        padding: 2rem !important;
        left: 50% !important;
        right: auto !important;
        top: 100% !important;
        transform: translateX(-50%) !important;
        margin-top: 30px !important;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
    }

        .megamenu-dropdown .col-md-3 {
            flex: 0 0 auto;
            width: 25%;
            min-width: 200px;
        }
}

/* Stili comuni (validi a tutte le larghezze) */
.megamenu-category {
    margin-bottom: 0.5rem;
}

    .megamenu-category .dropdown-header {
        font-size: 1.1rem !important;
        font-weight: 700;
        color: #2c3e50;
        padding: 0.75rem 0 0.5rem 0;
        margin-bottom: 0.5rem;
    }

    .megamenu-category .dropdown-item .nav-link {
        padding: 0.4rem 0.5rem;
        color: #495057;
        font-size: 1rem !important;
        font-weight: 500;
        white-space: normal;
        word-break: break-word;
        position: relative;
        transition: padding-left 0.2s;
    }

        .megamenu-category .dropdown-item .nav-link:hover {
            padding-left: 1.5rem !important;
            color: #0d6efd;
            background-color: transparent;
        }

    .megamenu-category .dropdown-item {
        padding: 0.3rem 0.5rem !important;
        border-radius: 4px;
        transition: all 0.2s;
    }

        .megamenu-category .dropdown-item:hover {
            background-color: #f8f9fa;
        }

            .megamenu-category .dropdown-item:hover i {
                color: #0d6efd;
            }

        .megamenu-category .dropdown-item i {
            color: #6c757d;
            font-size: 1.1rem !important;
            width: 24px !important;
            text-align: center;
        }

    .megamenu-category .dropdown-header i {
        font-size: 1.2rem !important;
    }

.megamenu-dropdown hr {
    opacity: 0.3;
}

.megamenu-dropdown .row {
    flex-wrap: wrap;
    margin: 0;
}

.nav-item.dropdown > .nav-link > i {
    font-size: 1rem;
}

/* ============================================
   MEGAMENU - TABLET (992px - 1199.98px)
   A questa larghezza con navbar-expand-xl
   il menu è GIÀ collassato in hamburger,
   quindi qui deve comportarsi come mobile
   ============================================ */

/* ============================================
   MEGAMENU - MOBILE/HAMBURGER (< 1200px)
   Colonne impilate dentro il collapse
   ============================================ */
@media (max-width: 1199.98px) {
    .megamenu-dropdown {
        position: static !important;
        min-width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        left: auto !important;
        border: none !important;
        box-shadow: none !important;
        padding: 1rem !important;
        margin-top: 0 !important;
        max-height: none;
        overflow-y: visible;
    }

        .megamenu-dropdown .col-md-3 {
            width: 100% !important;
            flex: 0 0 100% !important;
            min-width: 0 !important;
            margin-bottom: 1.5rem;
        }

    .megamenu-category .dropdown-header {
        font-size: 1.2rem !important;
    }

    .megamenu-category .dropdown-item .nav-link {
        font-size: 1.05rem !important;
    }
}