:root {
    /* DEFAULT COLORS - ORANGE THEME */
    --wp-md-primary: #E65100; /* Skarp orange */
    --wp-md-on-primary: #FFFFFF;
    --wp-md-primary-container: #FFF3E0; /* Mycket ljus orange */
    --wp-md-on-primary-container: #E65100; /* Mörkare orange för text */
    --wp-md-surface: #FFFFFF;
    --wp-md-surface-variant: #F5F5F5;
    --wp-md-on-surface: #1D1B20;
    --wp-md-outline: #9E9E9E;
    
    /* DEFAULT FONTS */
    --wp-menu-font-size: 16px;
    --wp-bottom-bar-font-size: 11px;
    --wp-menu-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* LAYOUT VARS */
    --wp-drawer-padding-x: 20px; 
    --wp-icon-fixed-width: 1.5em; 
    
    /* NYA VARS FÖR HÖJD */
    --wp-menu-height: auto; 
}

/* --- Base Layout --- */
.webplus-menu-container {
    font-family: var(--wp-menu-font-family);
    width: 100%;
    /* ÄNDRAT: Använd min-height så den kan växa vid wrapping */
    min-height: var(--wp-menu-height); 
    height: auto;
    display: flex;
    align-items: center; /* Centrera allt vertikalt om det är en rad */
    box-sizing: border-box; /* Se till att padding räknas in */
}

/* TA BORT BOXAR VID KLICK */
.webplus-menu-container * {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}
.webplus-menu-container a:focus, 
.webplus-menu-container button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* --- Navbar --- */
.webplus-navbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end; 
    min-height: 100%; /* Fyll ut containern */
    gap: 0.5rem; 
    /* ÄNDRAT: Tillåt wrapping */
    flex-wrap: wrap; 
    padding: 0; 
}

/* Slimmad knappstil */
.webplus-icon-btn {
    background: none;
    border: none;
    padding: 0; 
    border-radius: 50%;
    cursor: pointer;
    color: var(--wp-md-on-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; 
    font-size: 1.15rem; 
    transition: background 0.2s;
    height: 36px; 
    width: 36px;  
    flex-shrink: 0;
}

.webplus-icon-btn:hover {
    background-color: var(--wp-md-surface-variant);
    color: var(--wp-md-primary);
}

/* --- Desktop Nav --- */
.webplus-desktop-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 100%;
    /* ÄNDRAT: Tillåt wrapping även här */
    flex-wrap: wrap;
    justify-content: flex-end; /* Håll åt höger */
}

.webplus-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
    align-items: center;
    /* ÄNDRAT: Tillåt wrapping av menyobjekten */
    flex-wrap: wrap; 
    justify-content: flex-end;
    min-height: 100%;
}

.webplus-nav-list > li { 
    position: relative; 
    min-height: 100%; /* Låt li fylla höjden */
    display: flex;
    align-items: center;
    /* Lägg till lite marginal vertikalt vid radbrytning */
    margin-top: 2px;
    margin-bottom: 2px;
}

/* VIKTIGT: Exkludera WP-knappar från meny-stylingen */
.webplus-nav-list > li > a:not(.wp-block-button__link) {
    display: flex;
    align-items: center;
    gap: 0; 
    padding: 0.4rem 0.8rem;
    border-radius: 999px; 
    color: var(--wp-md-on-surface);
    text-decoration: none;
    font-size: var(--wp-menu-font-size);
    font-family: inherit;
    font-weight: 500;
    transition: all 0.2s;
    line-height: 1; 
    white-space: nowrap; 
}

/* HOVER & AKTIV STATE (Desktop - Top Level) */
.webplus-nav-list > li > a:not(.wp-block-button__link):hover,
.webplus-nav-list > li.current-menu-item > a:not(.wp-block-button__link),
.webplus-nav-list > li.current-menu-ancestor > a:not(.wp-block-button__link),
.webplus-nav-list > li.current_page_item > a:not(.wp-block-button__link) {
    background-color: var(--wp-md-primary-container);
    color: var(--wp-md-on-primary-container);
}

/* NYTT: Tvinga ikonen att följa med i färgbytet på desktop (Hover/Aktiv) */
.webplus-nav-list > li > a:not(.wp-block-button__link):hover .menu-fa-icon,
.webplus-nav-list > li.current-menu-item > a:not(.wp-block-button__link) .menu-fa-icon,
.webplus-nav-list > li.current-menu-ancestor > a:not(.wp-block-button__link) .menu-fa-icon,
.webplus-nav-list > li.current_page_item > a:not(.wp-block-button__link) .menu-fa-icon {
    color: var(--wp-md-on-primary-container) !important;
}

/* --- ICON SIZING --- */
.menu-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wp-icon-fixed-width); 
    flex-shrink: 0; 
    margin-right: 0.4rem; 
    text-align: center;
    line-height: 1; 
}

.menu-fa-icon {
    font-size: 1em; 
    vertical-align: 0; 
    /* color: currentColor !important; - Denna är kvar som fallback, men ovanstående regel tar över vid aktiv status */
    color: currentColor !important; 
}

.menu-custom-icon {
    height: 1.2em; 
    width: auto;
    max-width: 100%;
    vertical-align: middle;
    object-fit: contain;
}

/* --- DESKTOP CHEVRON (NYTT) --- */
.webplus-nav-list .chevron {
    margin-left: 6px; 
    font-size: 0.75em; 
    opacity: 1; 
    line-height: 1;
    color: currentColor;
}


/* --- Desktop Dropdowns --- */
.webplus-nav-list ul.sub-menu {
    position: absolute;
    top: 100%; 
    left: 0;
    margin-top: 0; 
    background: var(--wp-md-surface);
    min-width: 220px; 
    padding: 0.5rem 0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border: 1px solid var(--wp-md-surface-variant);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    list-style: none;
    z-index: 1000;
}

.webplus-nav-list li:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* NIVÅ 2+ */
.webplus-nav-list ul.sub-menu ul.sub-menu {
    position: static; 
    top: auto; 
    left: auto; 
    margin-left: 0; 
    box-shadow: none; 
    border: none;
    border-left: 2px solid var(--wp-md-primary-container); 
    border-radius: 0;
    padding: 0;
    width: 100%;
    min-width: unset;
    display: none; 
    background: #fafafa; 
    opacity: 1;
    visibility: visible;
    transform: none;
}

.webplus-nav-list ul.sub-menu li:hover > ul.sub-menu {
    display: block;
}

/* Länkstil i dropdowns */
.webplus-nav-list ul.sub-menu > li > a:not(.wp-block-button__link) { 
    display: flex;
    align-items: center;
    border-radius: 0; 
    padding: 0.6rem 1rem; 
    color: var(--wp-md-on-surface);
    text-decoration: none;
    white-space: normal;
    font-family: inherit;
    font-size: calc(var(--wp-menu-font-size) * 0.95);
    font-weight: 500; 
    line-height: 1.4; 
    border-bottom: 1px solid rgba(0,0,0,0.05); 
}

.webplus-nav-list ul.sub-menu > li:last-child > a { border-bottom: none; }

.webplus-nav-list ul.sub-menu > li > a:not(.wp-block-button__link):hover {
    background-color: transparent; 
    color: var(--wp-md-primary); 
}

/* Undermenyer (nivå 3) */
.webplus-nav-list ul.sub-menu ul.sub-menu > li > a {
    padding-left: 1.5rem;
    font-size: calc(var(--wp-menu-font-size) * 0.9);
    color: var(--wp-md-on-surface); 
}
.webplus-nav-list ul.sub-menu ul.sub-menu > li > a:hover {
    color: var(--wp-md-primary);
    background: transparent;
}


/* --- Drawer (Mobil) --- */
.webplus-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}

.webplus-drawer {
    position: fixed; top: 0; bottom: 0; width: 85%; max-width: 320px;
    background: var(--wp-md-surface); z-index: 9999;
    display: flex; flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 24px rgba(0,0,0,0.15);
    font-family: inherit;
    color: var(--wp-md-on-surface); 
}

.drawer-left { left: 0; transform: translateX(-100%); border-radius: 0 16px 16px 0; }
.drawer-right { right: 0; transform: translateX(100%); border-radius: 16px 0 0 16px; }

body.drawer-open { overflow: hidden; }
body.drawer-open .webplus-backdrop { opacity: 1; pointer-events: auto; }
body.drawer-open .webplus-drawer { transform: translateX(0); }

.drawer-header {
    padding: 0 var(--wp-drawer-padding-x); 
    height: 60px;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    border-bottom: 1px solid var(--wp-md-surface-variant);
    box-sizing: border-box; 
    flex-shrink: 0;
    background: var(--wp-md-surface); 
}
.drawer-title span { 
    font-size: 1.1rem; 
    font-weight: 700; 
    color: var(--wp-md-on-surface); 
}

.drawer-content { flex: 1; overflow-y: auto; padding: 0; background: var(--wp-md-surface); }

.drawer-footer {
    padding: 1rem; text-align: center; font-size: 0.75rem; color: var(--wp-md-outline);
    border-top: 1px solid var(--wp-md-surface-variant);
    flex-shrink: 0;
    background: var(--wp-md-surface); 
}

/* Mobile List */
.webplus-mobile-list { 
    list-style: none !important; 
    padding: 0 !important; 
    margin: 0 !important; 
    width: 100%;
}

.mobile-item { 
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style-type: none !important;
}

/* --- MOBIL STRUKTUR & DESIGN --- */
.mobile-link-wrapper {
    display: flex;
    align-items: center;
    min-height: 56px; 
    padding-left: var(--wp-drawer-padding-x); 
    padding-right: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.06); 
    box-sizing: border-box;
    transition: background 0.2s;
    position: relative; 
    background: var(--wp-md-surface); 
}

.drawer-right .mobile-link-wrapper {
    padding-left: var(--wp-drawer-padding-x); 
    padding-right: 8px;
}

/* Länken */
.mobile-item a:not(.wp-block-button__link) {
    flex: 1;
    display: flex; 
    align-items: center; 
    gap: 0; 
    text-decoration: none; 
    color: var(--wp-md-on-surface); 
    font-weight: 500; 
    font-size: 1.05rem; 
    font-family: inherit;
    padding: 12px 0; 
}

.mobile-item a:not(.wp-block-button__link) .menu-icon-wrapper {
    color: inherit; 
    opacity: 1; 
    margin-right: 12px;
}

/* --- AKTIV STATUS & HOVER (MOBIL) --- */
.mobile-link-wrapper:active,
.mobile-link-wrapper:hover {
    background-color: var(--wp-md-surface-variant); 
}

.webplus-mobile-list li.current-menu-item > .mobile-link-wrapper,
.webplus-mobile-list li.current_page_item > .mobile-link-wrapper {
    background-color: transparent; 
    border-bottom-color: rgba(230, 81, 0, 0.2); 
}

.webplus-mobile-list li.current-menu-item > .mobile-link-wrapper a,
.webplus-mobile-list li.current_page_item > .mobile-link-wrapper a {
    color: var(--wp-md-primary); 
    font-weight: 700;
}

.webplus-mobile-list li.current-menu-item > .mobile-link-wrapper a .menu-icon-wrapper,
.webplus-mobile-list li.current_page_item > .mobile-link-wrapper a .menu-icon-wrapper {
    color: var(--wp-md-primary);
}

.webplus-mobile-list li.current-menu-ancestor > .mobile-link-wrapper a {
    color: var(--wp-md-primary); 
    font-weight: 600;
}
.webplus-mobile-list li.current-menu-ancestor > .mobile-link-wrapper .submenu-toggle {
    color: var(--wp-md-primary);
}


/* --- STRUKTUR FÖR UNDERMENYER --- */
.mobile-item > ul.sub-menu {
    display: none; 
    list-style: none; 
    padding: 0; 
    margin: 0;
    margin-left: 0; 
    background: var(--wp-md-surface); 
}

.mobile-item > ul.sub-menu.open { display: block; animation: slideDown 0.2s ease-out; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

.mobile-item.depth-1 > .mobile-link-wrapper {
    padding-left: calc(var(--wp-drawer-padding-x) + 0px); 
    background: var(--wp-md-surface); 
    min-height: 50px;
}

.mobile-item.depth-2 > .mobile-link-wrapper {
    padding-left: calc(var(--wp-drawer-padding-x) + 20px); 
    min-height: 46px;
}

.mobile-item.depth-1 a {
    font-size: 1rem;
    font-weight: 400;
    color: var(--wp-md-on-surface); 
}

.mobile-item.depth-1 a .menu-icon-wrapper {
    color: inherit; 
    font-size: 0.9em;
}

.mobile-item.depth-1 a:hover {
    color: var(--wp-md-primary);
}


/* --- TOGGLE KNAPP --- */
.submenu-toggle {
    background: transparent; 
    border: none; 
    cursor: pointer; 
    color: var(--wp-md-outline); 
    transition: all 0.2s ease; 
    display: flex; 
    align-items: center;
    justify-content: center;
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    margin-left: 8px; 
    margin-right: 0;
    flex-shrink: 0;
}

.webplus-mobile-list li.current-menu-ancestor > .mobile-link-wrapper .submenu-toggle:not(.active),
.webplus-mobile-list li.current-menu-item > .mobile-link-wrapper .submenu-toggle:not(.active) {
    color: var(--wp-md-outline) !important; 
}

.submenu-toggle.active { 
    transform: rotate(180deg); 
    background-color: var(--wp-md-primary); 
    color: #FFFFFF !important; 
}

.submenu-toggle.active i {
    color: #FFFFFF !important;
}

/* --- Bottom Bar --- */
.webplus-bottom-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: auto; 
    padding-top: 6px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    background: var(--wp-md-surface);
    border-top: 1px solid var(--wp-md-surface-variant);
    display: flex; 
    justify-content: space-evenly; 
    align-items: flex-start;
    z-index: 9990;
    font-family: inherit;
}

.bottom-nav-item {
    display: flex; flex-direction: column; align-items: center; text-decoration: none;
    color: var(--wp-md-outline); 
    gap: 2px;
    flex: 1; 
    max-width: 20%; 
    min-width: 60px; 
}

.bottom-nav-item .icon-pill {
    width: 56px; height: 28px; border-radius: 14px; 
    display: flex; align-items: center; justify-content: center; 
    transition: background 0.2s;
    font-size: 1.1rem; color: var(--wp-md-on-surface);
}
.bottom-nav-item .icon-pill i { color: inherit; }
.bottom-nav-item .icon-pill img.menu-custom-icon { height: 20px; width: auto; }

/* Aktiv state för Bottom Bar */
.bottom-nav-item.is-active .icon-pill { 
    background-color: var(--wp-md-primary-container); 
    color: var(--wp-md-on-primary-container); 
}
.bottom-nav-item.is-active .label { 
    color: var(--wp-md-on-primary-container); 
    font-weight: 600; 
}

.bottom-nav-item .label { 
    font-size: var(--wp-bottom-bar-font-size);
    font-weight: 500; 
    text-align: center; 
    line-height: 1.1; 
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px; 
    box-sizing: border-box;
}

.letter-icon { font-weight: bold; }

/* --- Responsive --- */
.mobile-only { display: none !important; }
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: flex !important; align-items: center; }
    .webplus-bottom-bar.mobile-only { display: flex !important; align-items: flex-start; }
}

/* --- BUTTON FIX --- */
.webplus-menu-container .wp-block-button__link {
    border-radius: var(--wp--style--global--elements--button--border-radius, 4px) !important;
}

/* --- EDITOR SPECIFIC STYLES --- */
.webplus-slim-preview {
    height: 60px; background: #fff; border: 1px solid #e0e0e0; display: flex !important;
    align-items: center; justify-content: flex-end; padding: 0 20px; border-radius: 4px;
    overflow: hidden; box-sizing: border-box; margin-bottom: 20px;
}
.webplus-slim-preview ul.preview-nav-list {
    display: flex !important; flex-direction: row !important; list-style: none !important;
    gap: 15px !important; margin: 0 !important; padding: 0 !important; align-items: center !important;
}
.webplus-slim-preview ul.preview-nav-list li {
    display: flex !important; align-items: center; gap: 8px; font-size: 14px; color: #333;
    list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.webplus-slim-preview ul.preview-nav-list li::before,
.webplus-slim-preview ul.preview-nav-list li::after { content: none !important; display: none !important; }

.preview-fa-icon { font-size: 1.1em; color: inherit; }
.preview-custom-icon { height: 1.2em; width: auto; }
.preview-search { margin-left: 15px; color: #555; font-size: 1.2em; display: inline-block; }
.more-dots { color: #999; }
.icon-config-item { padding: 12px 0; border-bottom: 1px solid #eee; }

/* --- ICON PICKER MODAL --- */
.webplus-icon-modal .components-modal__content { display: flex; flex-direction: column; max-width: 800px; max-height: 80vh; }
.icon-search-input { margin-bottom: 20px; }
.icon-grid-container { flex: 1; overflow-y: auto; padding-right: 10px; }
.icon-group h4 { margin: 15px 0 10px; text-transform: uppercase; font-size: 0.75rem; color: #666; letter-spacing: 0.05em; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; }
.icon-grid-btn {
    display: flex !important; flex-direction: column !important; align-items: center; justify-content: center;
    height: 80px; gap: 8px; border: 1px solid #eee !important; border-radius: 8px !important;
    transition: all 0.2s; background: #fff !important;
}
.icon-grid-btn:hover { background: #f0f0f0 !important; border-color: #ccc !important; transform: translateY(-2px); }
.icon-grid-btn.is-selected { background: #EADDFF !important; border-color: #E65100 !important; color: #E65100 !important; }
.icon-grid-btn i { font-size: 1.5rem; }
.icon-grid-btn span { font-size: 0.7rem; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; text-align: center; }