/**
 * PWL Mega Menu - Responsive Styles
 */
 .pwl-mega-menu-toggle-container{
    display: none !important;
    position: relative;
    z-index: 10001 !important;
 }
@media (max-width: 800px) {
    .pwl-mega-menu-toggle-container{
        display: block !important;
        position: relative;
        z-index: 10001 !important;
    }

    #wpadminbar{
        display: none !important;
    }
    html {
        margin-top: 0px !important;
    }

    /* Grundläggande mobilvy-konfiguration */
    .pwl-mega-menu__toggle {
        display: block;
        width: 24px;
        height: 16px;
    }
    
    .pwl-mega-menu__nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: white;
        padding: 20px; /* Keep adequate padding for toggle/close button */
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        width: 100vw; /* Set explicit width to viewport width */
        max-width: 100vw; /* Ensure it doesn't exceed viewport */
        box-sizing: border-box; /* Include padding in width calculation */
    }
    
    /* Add proper handling for toggle button */
    .pwl-mega-menu.mobile-open .pwl-mega-menu__toggle {
        position: fixed;
        right: 20px;
        top: 20px;
        z-index: 10000; /* Ensure it's above the menu */
    }
    
    /* Ensure the toggle button is visible and properly positioned */
    .pwl-mega-menu__toggle span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: var(--toggle-color, #1b1b1b);
        transition: all 0.1s ease;
    }
    
    /* Move dropdown content away from the exit button */
    .pwl-mega-menu__items {
        padding-top: 15px;
    }
    
    /* Vertikala menyobjekt */
    .pwl-mega-menu__items {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .pwl-mega-menu__item {
        margin: 0;
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    .pwl-mega-menu__link {
        padding: 20px 0;
        width: 100%;
        display: block;
        padding-right: 0px !important;
        font-size: 18px;
        font-weight: 600;
    }
    
    /* Dölj feature-boxarna */
    .pwl-mega-menu__features {
        display: none !important;
    }
    
    /* Förenkla dropdown-reglerna */
    .pwl-mega-menu__dropdown {
        position: static !important;
        width: 100% !important; /* Use full width */
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }
    
    .pwl-mega-menu__category{
        font-weight: 500 !important;
        width: 100% !important;
        padding: 8px 5px !important;
        border: none !important;
    }


    /* Menyalternativ som är öppna visar sina dropdowns */
    .pwl-mega-menu__item.open > .pwl-mega-menu__dropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Länkgrupper är alltid dolda tills aktiverade */
    .pwl-mega-menu__link-group {
        display: none !important;
    }
    
    /* Aktiva länkar visas */
    .pwl-mega-menu__link-group.active {
        display: block !important;
    }
    .pwl-mega-menu__category.active::after{
        display: none !important;
    }
    
    /* Kategorier i mobilvy - måste vara synliga! */
    .pwl-mega-menu__category-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: block !important; /* Garanterar synlighet */
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
    
    .pwl-mega-menu__category {
        display: block !important; /* Garanterar synlighet */
        width: 100%;
        padding: 12px 0;
        margin-bottom: 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        position: relative;
        cursor: pointer;
    }
    
    /* Aktivt tillstånd ska också vara synligt */
    .pwl-mega-menu__category.active {
        background-color: rgba(0,0,0,0.03);
        display: block !important;
    }
    
    /* Undermenylänkar */
    .pwl-mega-menu__link-list {
        column-count: 1 !important;
        column-gap: 0 !important;
        margin: 0;
        padding: 10px 0;
        font-size: 16px !important; 
        width: calc(100% - 30px);
        margin-bottom: 20px !important;
        padding: 20px 20px;
    }
    
    .pwl-mega-menu__link-item {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
        padding: 0px;

    }
    
    .pwl-mega-menu__sublink {
        padding: 5px 0;
        display: block;
        width: 100%;
        line-height: 1.4 !important;
        font-size: 16px;
        font-weight: 500;
       /* border-bottom: 1px solid rgba(0,0,0,0.03);*/
    }
    
    .pwl-mega-menu__link-item:last-child .pwl-mega-menu__sublink {
        border-bottom: none;
    }
    
    /* Ta bort tillbakaknappen */
    .pwl-mega-menu__back-button {
        display: none !important;
    }
    
    /* Färginställningar för menyn */
    .pwl-mega-menu__link,
    .pwl-mega-menu__item a:not([style*="color"]),
    .pwl-mega-menu__sublink:not([style*="color"]),
    .pwl-mega-menu__category,
    .pwl-mega-menu-container a:not([style*="color"]) {
        color: #1b1b1b !important;
    }
    
    /* Pil för expanderbara huvudalternativ */
    .pwl-mega-menu__item.has-mega-menu > .pwl-mega-menu__link {
        position: relative;
        padding-right: 30px;
    }
    
    .pwl-mega-menu__item.has-mega-menu > .pwl-mega-menu__link::after {
        content: '';
        position: absolute;
        right: 5px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid #1b1b1b;
        border-bottom: 2px solid #1b1b1b;
        transform: translateY(-50%) rotate(45deg);
        transition: transform 0.2s ease;
    }
    
    .pwl-mega-menu__item.has-mega-menu.open > .pwl-mega-menu__link::after {
        transform: translateY(-50%) rotate(-135deg);
    }
    
    /* Body class för att förhindra scrollning */
    body.has-open-menu {
        overflow: hidden !important;
        position: fixed;
        width: 100%;
        height: 100%;
    }
    
    /* Ta bort överflödiga regler som kan orsaka problem */
    .pwl-mega-menu-container [style*="display: block"],
    .pwl-mega-menu-container [style*="display: none"] {
        /* Ta bort dessa regler om de orsakar problem */
    }
    
    /* Dropdown-inner - kräver korrekt layout för att visa kategorier */
    .pwl-mega-menu__dropdown-inner {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Specifik fix för att säkerställa synlighet av kategorier */
    .pwl-mega-menu__item.open .pwl-mega-menu__dropdown .pwl-mega-menu__categories,
    .pwl-mega-menu__item.open .pwl-mega-menu__dropdown .pwl-mega-menu__category-list,
    .pwl-mega-menu__item.open .pwl-mega-menu__dropdown .pwl-mega-menu__category {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        border: none;
    }
    
    /* Initial state - dölj dropdown och kategorier */
    .pwl-mega-menu__dropdown,
    .pwl-mega-menu__item:not(.open) .pwl-mega-menu__categories {
        display: none !important;
    }
    
    /* Ensure the X transformation is visible */
    .pwl-mega-menu.mobile-open .pwl-mega-menu__toggle span {
        background-color: #1b1b1b; /* Force dark color for visibility */
    }
    
    /* Make sure content is properly contained */
    .pwl-mega-menu__container {
        position: relative;
        width: 100%;
        max-width: 100%;
    }

    /* Säkerställ att toggleknappen själv har rätt z-index */
    .pwl-mega-menu-toggle-container .pwl-mega-menu__toggle {
        position: relative;
        z-index: 10001 !important;
    }
    
    /* Vid öppen meny, säkerställ att toggle-container fortfarande ligger överst */
    body.has-open-menu .pwl-mega-menu-toggle-container {
        position: relative;
        z-index: 10001 !important;
    }
    
    /* Simple layout on mobile - left aligned and stacked */
    .pwl-mega-menu__dropdown-inner.simple-layout .pwl-mega-menu__link-list {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 0 !important;
    }
    
    /* Hide column borders on mobile */
    .pwl-mega-menu__category-column {
        border-right: none !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 30px !important;
    }
    
    /* Category titles color on mobile */
    .pwl-mega-menu__category-title {
        color: var(--pwl-menu-hover) !important;
    }
    
    /* Remove left/right padding/margin from link list on mobile */
    .pwl-mega-menu__link-list {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}