:root {
    --max-width: 85rem;
    --container-padding: 1rem;

    --background: #fcfcfc;          /* Bakgrunden på hela main sidan */
    --text-main: #2d3436;         /* Huvudtexten (mjukare än svart) */
    --text-muted: #636e72;        /* För mindre viktig text (t.ex. datum) */
    --brand-color: #0984e3;       /* Din primära färg (t.ex. blå) */
    --bg-page: #f0f2f5;    /* Den ljusgrå färgen för hela "golvet" */
    --border-color: #e4e6eb; /* En mycket svag kantlinje för extra krispighet */
    --link-color:#3396ff;
    --toggle-bg: white;
    --toggle-active-text: #fff;
    --toggle-inactive-text: #495057;
    --toggle-slider-bg: #007bff; /* Din accentfärg */
}

/* POPPINS REGULAR (400) */
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/poppins-v23-latin_latin-ext-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* POPPINS MEDIUM (500) */
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/poppins-v23-latin_latin-ext-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* POPPINS SEMI-BOLD (600) */
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/poppins-v23-latin_latin-ext-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* POPPINS BOLD (700) - Den du hade i din kod tidigare */
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/poppins-v23-latin_latin-ext-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* POPPINS EXTRA-BOLD (800) */
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/poppins-v23-latin_latin-ext-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


/* MONTSERRAT REGULAR (400) */
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat/montserrat-v30-latin_latin-ext-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* MONTSERRAT MEDIUM (500) */
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat/montserrat-v30-latin_latin-ext-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* MONTSERRAT SEMI-BOLD (600) */
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat/montserrat-v30-latin_latin-ext-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* MONTSERRAT BOLD (700) */
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat/montserrat-v30-latin_latin-ext-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ROBOTO LIGHT (300) */
@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto/roboto-v48-latin_latin-ext-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* ROBOTO REGULAR (400) - Den som kraschade tidigare! */
@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto/roboto-v48-latin_latin-ext-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ROBOTO MEDIUM (500) */
@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto/roboto-v48-latin_latin-ext-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ROBOTO SEMI-BOLD (600) */
@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto/roboto-v48-latin_latin-ext-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html 
{
    scroll-behavior: smooth;
}
body {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    line-height: 1.6;
    color: #333;
    display: flex;
    flex-direction: column;
    min-width: 20rem;
    min-height: 100vh; /* 100% av Viewport Height */
    margin: 0;

}

h1, h2, h3, .heading-font {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing:0.5px;
}

body a:visited,
body a:hover,
body a:active
{
    color:inherit!important;
}

section , .container
{
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
}

.filter-text
{
    font-family: 'Poppins';
    letter-spacing: 0.5px;
    font-size: 1.1em;
}

.right
{
   margin: 0 0 0 auto;
}

.split
{
        display:grid;
        grid-template-columns: auto auto;
}

fieldset:disabled {
            /* Gör text och ramar halvtransparenta */
            opacity: 0.5;
            
            /* Gör att muspekaren visar "förbjudet" när man hovrar över */
            cursor: not-allowed;
            
            pointer-events: none;
            
            filter: grayscale(100%);
        }


        fieldset:disabled input {
            background-color: #eeeeee;
        }

        fieldset
        {
            transition : opacity 0.3s ease;
            border:none;
            width: 100%;
        }



.disabled
{
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(100%);
}


input::placeholder {
    color: #a09e9c;
}


input[type="text"], input[type="email"] , input[type="password"]{
    width: 100%;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    display: inline-block;
    border: 1px solid #e1e1e1;
    border-radius: 6px; /* Mjukt rundade hörn */
    box-sizing: border-box;
    font-size: 1rem; /* Förhindrar auto-zoom på iPhone */
    transition: all 0.2s ease;
    max-width: 21.875rem;
}

input:focus {
    outline: none;
    border-color: #007bff;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1); /* Mjuk "halo"-effekt */
}



.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 2.1875rem;
    cursor: pointer;
    font-size: 1rem;
    user-select: none;
}
/* Styr texten inuti din custom-checkbox */
.custom-checkbox .checkbox-text {
    display: block;                  /* Gör spannen till ett block-element */
    white-space: nowrap !important;  /* Förbjuder texten att radbrytas */
    overflow: hidden !important;      /* Gömmer den text som hamnar utanför skärmen */
    text-overflow: ellipsis !important; /* Lägger till "..." i slutet */
}
/* Dölj webbläsarens standard-checkbox */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Skapa den anpassade boxen */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.375rem;
    width: 1.375rem;
    background-color: white;
    border: 1px solid #e1e1e1;
    border-radius: 4px; /* Matchar dina input-fält */
    transition: all 0.2s;
}

/* Vid hovring */
.custom-checkbox:hover input ~ .checkmark 
{
    background-color: white;
    border-color: #007bff;
}

/* När checkboxen är ikryssad */
.custom-checkbox input:checked ~ .checkmark {
    background-color: #007bff;
    border-color: #007bff;
}

/* Skapa "kroken" (the check) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Styla själva kroken */
.custom-checkbox .checkmark:after {
    left: 0.4375rem;
    top: 0.1875rem;
    width: 0.3125rem;
    height: 0.625rem;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

main {
    
    padding-bottom: clamp(2.5rem, 10vw, 12.5rem);
    
}

.top-space
{
    padding-top: clamp(2.5rem,6vw, 5rem);
}
header {
    background-color: var(--background);
    padding-top: 1rem;
    & .main-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
footer 
{
    background-color:  #404040;
    padding-block: 3rem;
    margin-top: auto; /* Trycker ner footern till botten om sidan har lite innehåll */
    color: rgba(255, 255, 255, .75);
    border-top: solid 6px rgba(255, 255, 255, .15);
}

footer a:link {
    color: white;
}

a:link
{
    letter-spacing:0.5px;
    font-family:'Poppins';
    color: var(--link-color);
    text-decoration: none;    
}

a:visited , a:active
{
    text-decoration: none;
}

.space
{
    margin-top: 2.1875rem;
}

a:hover
{
    text-decoration: underline;
}

.footerGrid a {
    text-align: center;
    color: deepskyblue;
    align-items: center;
    text-decoration: none;
}

#footerMenu>div {
    flex: 1 1 25%;
    text-align: center;
    margin: auto;
    font-family: 'Poppins', sans-serif;
    font-size: 1.125rem;
}
.footerGrid
{
    text-align:center;
}

#footerMenu {

    width: 85%;
    text-align: center;
    margin: auto;
    max-width: 75rem;
    margin-top: 2.1875rem;
    display: inline-flex;
}

.link
{
    cursor:pointer;
    letter-spacing:0.5px;
    font-family:'Poppins';
    color: var(--link-color);
}

.link:hover
{
    text-decoration: underline;
}

.breadCrumb
{
    letter-spacing:0.5px;
    font-family:'Poppins';
}
.mad-display {
    position: fixed;
    z-index: 100;
    padding-top: 0;
    left: 0;
    top: 0;
    right: 17.8125rem;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow-y: visible;
    margin: 0 auto;
    background: rgba(65, 73, 89, .65);

}

#menuBar 
{
     svg {
            vertical-align: middle;
            margin-bottom: 0.0625rem;
        }
}

#menuBar,
#menuBar2 {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto auto;
    padding: 0.625rem;
    padding-bottom: 0.25rem;
    margin: 0 auto;
    max-width: 81.25rem;
    padding-top: 0.9375rem;
    color: black;
    font-size: 1rem;
    position: relative;
    letter-spacing: 0.5px;

    z-index:2;
}

/* div som inte är span */
#menuBar div:not(span),
#menuBar2 div:not(span) {
    align-self: end;
}

/* mRows blocket */
#menuBar #mRows,
#menuBar2 #mRows {
    display: grid;
    grid-template-columns: auto auto auto auto;
    margin: 0 0 0 auto;
}

/* span i mRows */
#menuBar #mRows span,
#menuBar2 #mRows span {
    line-height: 1;
    padding-left: clamp(0, 2vw, 0.3125rem);
    align-self: end;
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    padding-bottom: 0.3125rem;
    letter-spacing: 0.7px;
}

/* alla divs direkt i #menuBar som inte är .mad-display */
#menuBar > div:not(.mad-display),
#menuBar2 > div:not(.mad-display) {
    cursor: pointer;
}

.hidden
{
    display:none !important;
}


.hero-image-wrapper {
    position: relative;
    width: 100%;
    max-width: var(--max-width); /* Ändrat från 2048px till din hussmak på 1360px */
    margin: 0 auto;              /* Centrerar bilden perfekt på skärmen */
    display: flex;
    flex-direction: column;
    align-items: center; 
}

.hero-image-wrapper picture {
    width: 100%;
}

.main-img {
    width: 100%;
    height: 25rem;
    object-fit: cover;
    display: block;
    border-radius: 0px 0px 8px 8px;
}

[data-click] * {
    pointer-events: none;
}

[data-click] {
    cursor: pointer;
}

.overlap-card {
   
    display: flex;
    flex-direction: column;
    width: 51.875rem;
    position:relative;
    background-color: white;
    padding: 1.2em;
    margin: 0 auto;
    border-radius: 9px;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .15);
    text-align: center;

    transform: translateY(-50%);
    margin-bottom: -3.125rem; 
    z-index:101;

    .filter-drawer 
    {
    /* Gör att denna del svävar över allt annat */
    position: absolute;
    top: 100%;       /* Startar precis vid botten av .overlap-card */
    left: 0;
    right: 0;        /* Gör den lika bred som kortet */
    background: white; 
    z-index: 999;    /* Lägger den över innehåll under */
    
    /* Din snygga animation */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
    clip-path: inset(0px -20px -20px -20px);
    border-radius: 0 0 9px 9px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, .15);
    overflow: hidden;

    }

    .overlap-card.drawer-is-open {
        border-radius: 9px 9px 0 0 !important;
    }
    .filter-drawer.open {
        grid-template-rows: 1fr;
    }

    .filter-content {
        min-height: 0; /* Krävs för att grid-animationen ska fungera */
    }

    .filter-grid {
        padding: 1.25rem; /* Innehållet får lite luft */
        min-height: 18.75rem;
    }
    .search-wrapper , .search-wrapper2 {
        display: flex;
        align-items: center;
        background-color: white;
        border: 2px solid  rgb(204, 204, 204);
        border-radius: 4px;
        padding: 0 0.9375rem;
        width: 100%;
        max-width: 43.75rem;
        transition: border-color 0.3s;
    }

    .search-wrapper2
    {
        max-width: 56.25rem;
        height: 2.6875rem;
        margin: 0 auto;
    }
    .search-wrapper input[type="text"],.search-wrapper2 input[type="text"] 
    {
        border: none;
        background: none;
        outline: none;
        width: auto;
        max-width: none;
        padding: 0 0;
        margin: 0;
        flex: 1;
        font-size: 1rem;
    }

   
    .search-wrapper input[type="text"]:focus,
    .search-wrapper2 input[type="text"]:focus {
        outline: none !important;   
        box-shadow:none !important;
    }


    .search-button {
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.3125rem;
        transition: opacity 0.2s;
    }

    .search-button:hover {
        opacity: 0.7;
    }

    .search-button img {
        width: 1.25rem;         /* Justera ikonens storlek här */
        height: 1.25rem;
        object-fit: contain;
    }

    .search-box
    {
        display:flex;
        gap: 0.625rem;
        flex-direction: row;
    }

    .filter-sections
    {
        display:grid;
        grid-template-columns:50% 50%;
        height: 100%;

        div
        {
            text-align:left;
        }
        
        .places-container 
        {
            display: grid;
            grid-auto-flow: column; 
            
            column-gap: 2rem;
            row-gap: 0.2rem; 
            overflow-x:hidden; 
            grid-template-rows:repeat(12,auto);
        }

        .place-row 
        {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .categories , .stakeholders
        {
            display:grid;
            grid-template-columns: auto;
            row-gap: 0.2rem;
        }
       
        input[type="checkbox"]
            {
                transform: scale(1.6);
                cursor: pointer;
                margin-left: 0.375rem;
            }

            .sub-item
            {
                
                width: fit-content;
                padding-left: 0.625rem;
            }

            #cHeadline
            {
                padding-top: 0.625rem;
                padding-bottom: 0.3125rem;
            }

            label
            {
                padding-left: 0.3125rem;
                cursor:pointer;
            }
    }
}
#logos
{
    font-size: 1.5625rem; 
    display:grid; 
    grid-template-areas: 'u u b'
    'v v b'; 
    letter-spacing: 0.9px;
    margin: 0 auto 0 0;
    width: 20.3125rem;
    font-family:'Poppins';
}

.standard-button,.standard-button-small,
.contact-button,
.red-button,.tiny-button, .tiny-button2, .tiny-button-category {
    background: darkseagreen;
    display: inline-block;
    min-width: 6.875rem;
    text-decoration: none;
    border-radius: 3px;
    text-transform: capitalize;
    color: #fff;
    font-size: 1rem;
    padding: 0.3125rem 0.625rem 0.3125rem 0.625rem;
    font-weight: 500;
    border: 0;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    text-align: center;
    box-shadow: 0 .1875rem .375rem 0 rgba(140, 152, 164, .25);

    position:relative;
    transform:all 0.2 ease;
}

.standard-button:focus, .standard-button-small:focus
.standard-button:active,  .standard-button-small:active{
    background: #6e966e;
    color: #fff;
    text-decoration: none;
    outline: none;
}

.red-button {
   
    background: #f43032;
}

.standard-button:hover, .standard-button-small:hover {
    box-shadow: 0 5px 10px rgba(71, 71, 71, .4);
    background: #6e966e;
}

.red-button:hover {
     box-shadow: 0 5px 10px rgba(71, 71, 71, .4);
     background:#c20a0d;
}

.tiny-button , .tiny-button2 , .tiny-button-category
{
    background:#ffdd80;
    color:#333;
    font-size: 0.75rem;
    letter-spacing:0.5px;
    padding: 0.125rem 0.3125rem 0.125rem 0.3125rem;
    box-shadow:none;
}

.tiny-button:hover
{
    background: #ffc933;
}

.textbox {
    background-color: white;
    border-radius: 4px;
    width: 100%;
    min-height: 18.125rem;
    max-width: 78.125rem;
    padding: 0.9375rem;
    border: solid 1px #cccccc;
    margin: 0 auto;
}

.list-topics-content
{
    position: relative;
    padding-top: 5rem;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    display: grid;
    max-width: var(--max-width);
    margin: 0 auto;
    height: fit-content;
    column-gap: 0.625rem;
    row-gap: 1.875rem;
      
    .item
    {
        margin: 0;
        max-width: 12.1875rem;
        display:grid;

        

        .sum
        {
            margin: 0 auto;
            padding-top: 0.3125rem;
            font-size: 0.875rem;
        }

        img
        {
            width: 3.125rem;
            height: auto;
            margin: 0 auto;
        }

        .headline
        {
            font-family: 'Poppins';
            font-size: 1.2em;
            margin: 0 auto;
            padding-top: 0.5rem;
        }
    }    
    .item:hover
    {
        scale:1.05;
        cursor:pointer;
    }
    .item:hover .headline
    {
        color:red;
        font-weight:500;
    }
}

.center-text
{
    text-align:center;
}

.width
{
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
}

.center
{
    margin: 0 auto;
}

.tiny-button2
{
    background-color: #ff6b6b;
    color:white;
}

.tiny-button2:hover
{
    background-color:#c20a0d;
}



.sBox , .sBox2
{
    border-radius:4px;
    height: fit-content;
    width: fit-content;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    background-color:#fff1c9;
    font-size: 0.875rem;
    letter-spacing: 0.7px;

    font-weight: 500;
}

.sBox2
{
    background-color: #e6f2ff;
    color: #0566b3;
    border: 1px solid #079adf30;
    min-width: 0;           /* GÖR att flex-item kan bli smalare än texten */
    white-space: nowrap;    /* Hindrar texten från att radbrytas */
    overflow: hidden;       /* Gömmer texten som inte får plats */
    text-overflow: ellipsis; /* Lägger till "..." */
    flex-shrink: 1;         /* Tvingar boxen att krympa när utrymmet tar slut */
    padding: 0.0625rem 0.5rem 0.0625rem 0.5rem;

}

.infoBox
{
    margin-top: 3.125rem;
    background-color:#fafafa;
    height: fit-content;
    width: 100%;

    .box
    {
        max-width: var(--max-width);
        display:flex;
        flex-direction:row;
        margin: 0 auto;

        .text , .text2
        {
            order:1;
            padding: 2.5rem 0;
        }

        .container
        {
            
            position:relative;
            top: -3.125rem;
            height: 21.875rem;
            order:2;
            margin: 0 0 0 auto;

            Img
            {
                max-height: 100%;
            }
        }
    }
}

.unique
{
    max-width: var(--max-width);
    margin: 0 auto;

    .divided
    {
        display:grid;
        grid-template-columns: 70% 30%;
        
        .d1
        {
            padding: 0.625rem;
        }

         .d2
         {
            background-color:#8fbc8f;
            min-height: 12.5rem;
            color:white;
            border:solid 1px darkgreen;
            border-radius:4px;

            ul
            {
                li
                {
                    text-align:left;
                    
                    a
                    {
                        color:black;
                        font-size: 1em;
                    }
                }
            }
         }
    }
}

.contact
{
    margin-top: 3.125rem;
    padding-bottom: 2.5rem;
    background-color: #056794;
    height: fit-content;
    color:white;
    .info
    {
        max-width: var(--max-width);
        margin: 0 auto;

        h2
        {
            color:white;
        }

        .buttonGroup
        {
            display:flex;
            flex-direction: row;
            column-gap: 2.1875rem;
            margin-top: 2.1875rem;

            .button
            {
                border:solid 2px white;
                padding: 0.4375rem;
                text-align:center;

                min-width: 11.875rem;
                font-weight:600;
                letter-spacing: 0.5px;
                cursor:pointer;
                border-radius:4px;
            }
            .button:hover
            {
                background-color:white;
                color:#0578ad;
            }
        }
        .mail
        {           
            display:grid;
            grid-template-columns: 10% 90%;
            width: 21.875rem;
            height: 3.125rem;
            column-gap: 0.625rem;

            img {
                    width: 2.1875rem;
                    height: 2.1875rem;
                    display: block;
                    object-fit: contain; /* Ser till att ikonen inte trycks ihop inuti */
                }

            .header
            {
                font-family:'Poppins'; font-size: 1.01em; font-weight:500; letter-spacing: 1px;
            }
        }

        .flexer
        {
            display:flex; flex-direction:column;
            margin-top: 0.25rem;
            align-items:normal;
        }        
    }
}
.colab
{
    .col
    {
        max-width: var(--max-width);
        
        .colabImgs
        {
            display:flex;
            flex-direction: row;
        
            margin: 0 auto;
            justify-content:space-around;
            margin-top: 3.125rem;

            div
            {
                flex-grow:1;
                flex-basis: 0;
                display:flex;
                justify-content: center;
                align-items: center;

                text-align:center;
            }

            img
            {
                height: 9.375rem;
                width: auto;
            }

            #convoy
            {
                align-self:center;
                
                img
                {
                    width: 13.75rem;
                    height: 6.25rem;
                }
            }
        }
    }
}

.dropdown , .dropdown2{
    max-width: 18.75rem; height: 4.375rem;

    details {
        width: 100%;
        margin: 0.5rem 0;
        position: relative;
        border: 1px solid #e1e1e1;
        border-radius: 6px;
        background-color: white;
        transition: all 0.2s ease;

        z-index:10;
    }

    .all
    {
        border-bottom:solid 2px red;
        background-color:white!important;
    }

    details[open]
    {
        z-index:100;
        position:relative;
    }

    
        .checkbox-list
        {
            padding: 0.625rem;

        }

        .checkbox-list:nth-child(even) {
            background-color: #f1f1f1;
        }

        .checkbox-list:nth-child(odd) {
            background-color: #ffffff; /* Vit */
        }

        /* Lägg till en liten hover-effekt också så man ser exakt vilken rad man pekar på */
        .checkbox-list:hover
        {
            background-color: #f0f7ff !important;
            color: #007bff;
        }
    

        .sub-category-group:nth-child(odd) .sub-header{
             background-color: #f0f4f8;
        }

        .sub-category-group:nth-child(even) .sub-header {
            background-color: #ffffff; /* Vit */
        }

        .sub-category-group .sub-header:hover
        {
            background-color: #f0f7ff !important;
            color: #007bff;
        }
        
        .standard-dropdown
        {
            .checkbox-list
            {
                padding: 0.625rem;
            }

            .checkbox-list:nth-child(odd) {
                background-color: #f1f1f1;
            }

            .checkbox-list:nth-child(even) {
                background-color: #ffffff; /* Vit */
            }

            .checkbox-list:hover
            {
                background-color: #f0f7ff !important;
                color: #007bff;
            }
        }
    /* Stora pilen (Huvudmenyn) */
    .arrow {
        transition: transform 0.2s ease, fill 0.2s ease;
        fill: #666;
    }

    /* Rotation för huvudmenyn */
    & > details[open] > summary .arrow {
        transform: rotate(180deg);
    }

    /* Underkategoriernas pilar */
    .sub-category-group .cat-arrow {
        transition: transform 0.2s ease;
        fill: #888;
    }

    /* RÄTTELSE: Rotation för underkategorierna */
    .sub-category-group[open] .cat-arrow {
        transform: rotate(180deg);
        fill: #333;
    }

    summary {
        list-style: none;
        padding: 0.75rem 1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 500;
        color: #333;
    }

    summary::-webkit-details-marker {
        display: none;
    }

    .dropdown-content {
        max-height: 15.625rem;
        overflow-y: auto;
        border-top: 1px solid #eee;
        padding: 0.25rem 0;

        .sub-category-group {
            border: none; /* Ta bort ram på inre rader */
            margin: 0;
            border-radius: 0;
            box-shadow: none;
        }

        .sub-header {
           
            padding: 0.625rem 1rem;
            font-size: 0.9rem;
            border-bottom: 1px solid #fff; /* Skapar en snygg avskiljare */
        }
    }


}

.dropdown2
{
    summary
    {
        padding: 0.25rem 1rem;
    }

    .checkbox-list:nth-child(odd) {
                background-color: #ffffff;
    }

    .checkbox-list:nth-child(even) {
                background-color: #ffffff;
    }

    details
    {
        margin: 0;
    }

    width: 14.375rem;
}

#ob
{
    margin-top: 5rem;
    
    #bar
    {
        display: grid;
        grid-template-columns: 1fr auto;
        width: 100%;
        margin-top: 3.4375rem;
        column-gap: 0.9375rem;

        >div
        {
            justify-self: end;
        }
    }
    .headline
    {
        font-family:'Poppins';
        font-weight:600;        
    }

    .reset
    {
        color:#333;
        font-weight:600;
        display:block;
        width: 8.75rem;
        text-align:center;
        padding: 0.25rem 1rem;

        border:solid 1px  lightgray;
        align-items: center;
        border-radius:6px;
        cursor:pointer;       
        
    }

    .reset:hover
    {
        background-color:darkseagreen;
        color:#fff;
    }
}

.dashboard
{
    
    display:grid;
    grid-template-columns: 0.7fr 0.3fr;
    gap: 1.5625rem;
    
    .external
    {
        margin-top: 2.1875rem;
        padding-left: 1.25rem;
        font-family:'Poppins';
    }

    .ms-flex
    {
        display:flex;
        flex-direction: column;
    }

    .part
    {

        margin-top: 0.9375rem;
        min-height: 12.5rem;

        
        display: flex;
        flex-direction: column;

        .box
        {
            

            border:solid 1px #cccccc;
            border-radius:4px;
            
            display: flex;
            flex-direction: column;            

            .content {
                flex-grow: 1; /* Detta trycker ned allt under sig till botten */

                .grid {
                    display: grid;
                    grid-template-columns: 1fr auto;
                    padding: 0.5rem 0.625rem; /* Ger lite luft inuti raden */
                    border-radius: 4px;
                    align-items: center;

                    /* HÄR ÄR TRICKET: Färga varannan grid-rad */
                    &:nth-child(even) {
                        background-color: #f1f1f1;
                        /* Valfritt: border: solid 1px #cccccc; */
                    }
                }
            }

            .button {
                margin-top: 1.5625rem;
                width: 100%;
            }

            .cn
            {
                padding: 1.25rem;
            }

            .grider
            {
                display:grid;
                grid-template-columns: 1fr 1fr;
                column-gap: 0.625rem;
            }
        }
    }

    .headline
    {
        color:#2d3436;
        font-family:'Poppins';
        font-weight:500;
        padding-top: 0.9375rem;
        font-size: 1.375rem;
        
        line-height: 1.2;
        letter-spacing: 0.5px;
        padding-bottom: 0.125rem;

        background-color: #f4f8fa;
        border-radius:4px;        
    }
}

.flexer
{
    flex:1;
    display: flex; align-items: center;
}

.segmented-control {
    position: relative;
    display: flex;
    width: 20rem; /* Eller 100% om du vill ha den bred */
    background-color: var(--toggle-bg);
    border-radius: 10px;
    padding: 0.25rem;
   
    user-select: none;
}

.segmented-control input[type="radio"] {
    display: none; /* Göm de fula cirklarna */
}

.segmented-control .option {
    flex: 1;
    padding: 0.4375rem 0;
    cursor: pointer;
    text-align: center;
    font-weight: 500;
    z-index: 2; /* Lägg texten ovanpå glidaren */
    transition: color 0.3s ease;
    color: var(--toggle-inactive-text);
}

/* Själva glidaren */
.selection-slider {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: calc(50% - 0.25rem); /* Hälften av bredden minus padding */
    height: calc(100% - 0.5rem);
    background-color: var(--toggle-slider-bg);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: 1;
}

/* Flytta glidaren och byt textfärg baserat på vald radio */
#scope-place:checked ~ .selection-slider {
    transform: translateX(0);
}

#scope-district:checked ~ .selection-slider {
    transform: translateX(100%);
}

#scope-place:checked ~ label[for="scope-place"],
#scope-district:checked ~ label[for="scope-district"] {
    color: var(--toggle-active-text);
}

/* input.missingData gör regeln super-specifik och vinner i debug-verktyget */
input.missingData, textarea.missingData, select.missingData {
    border: 2px solid #dc3545 !important;       /* Tydlig röd kant */
    background-color: red !important;     /* Ljusrosa bakgrund */
    box-shadow: 0 0 5px red !important; /* Rött sken */
    outline: none !important;
}

.missingData {
    border: solid 1px red !important;
}

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center;
    z-index: 1800;
}
.modal-content {
    background: white; padding: 1.25rem; border-radius: 8px;
    max-width: 25rem; width: 90%; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.modal-buttons { margin-top: 1.25rem; display: flex; justify-content: center; gap: 0.625rem; }
.modal-btn { padding: 0.625rem 1.25rem; border: none; border-radius: 4px; cursor: pointer; }
.btn-ok { background: #007bff; color: white; }
.btn-cancel { background: #6c757d; color: white; }

.sres
{
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);

    display:none;
    margin-bottom: 8.4375rem;
    max-width: var(--max-width);
    margin-top: 2.1875rem;
    width: 100%;


}

.centerPlace
{
    margin: 0 auto;
    margin-top: 6.25rem;

    text-align:center;
}

.resetPassword
{
    input
    {
        background-color: #eee;
        border: none;
        padding: 0.75rem 0.9375rem;
        margin: 0.5rem 0;
        width: 100%;
    }
    
    width: 28.125rem;

   
   
    margin-top: 3.4375rem;
   
    margin: 3.4375rem auto auto auto;
    div
    {
        align-self: center;
        font-family:'Poppins';
    }

    .grid
    {
        display:grid;
        grid-template-columns: auto auto;
        border:solid 1px #cccccc;
        border-radius:4px;

         padding: 0.9375rem;

         margin-bottom: 1.5625rem;
    }
}

.left-text
{
    text-align:left;
}

.is-working {
    pointer-events: none; /* Gör att man inte kan klicka igenom */
    color: transparent !important; /* Gömmer texten texten helt så den inte krockar med snurran */
}

/* Själva laddsnurran skapas magiskt som ett pseudo-element */
.is-working::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    
    /* Vi gör snurran lite mindre (20px) så den passar perfekt i en knapp */
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.625rem;  /* Hälften av höjden */
    margin-left: -0.625rem; /* Hälften av bredden */
    
    /* Vit snurra som poppar snyggt mot din orangea knappbakgrund */
    border: 3px solid rgba(45, 52, 54, 0.2);
    border-top: 3px solid var(--text-main, #2d3436);
    border-radius: 50%;
    
    box-sizing: border-box;
    animation: clean-spin 0.8s linear infinite; /* Lite snabbare snurr för bättre responsiv känsla */
}

/* Din utmärkta och rena rotation */
@keyframes clean-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.anns
{
     max-width: 62.5rem; 
     width: 100%;
     margin: 0 auto; 
     padding: 1.25rem;
       padding-bottom: clamp(2.5rem, 6vw, 6.25rem);


     .bar
     {
        display:grid; 
        grid-template-columns:auto 1fr auto; 
        margin-top: 3.125rem; 
        column-gap: 1.5625rem; 
        align-items: center;
    
        .info
        {
            min-height:9.375em;
            font-size: 0.9375rem;
            letter-spacing:0.5px;
            line-height: 1.5;
            font-family:'poppins';
        }

        h1
        {
            font-size: 1.5rem; 
            margin: 0 0 0.3125rem 0; 
            font-weight:600; 
            color: #333;
        }

        .address
        {
            display:grid;
            grid-template-columns: 1fr;
            margin-top: 0.625rem;
            color: #555;

            div
            {
                min-height:1em;
            }
        }

        .buttons
        {
            display:flex; 
            flex-direction:column; 
            gap: 0.625rem; 
            text-align: right;
        }

        .tel
        {
            display:inline-flex; 
            align-items:center; 
            justify-content:center; 
            gap: 0.5rem; 
            background:#0056b3; 
            color:white; 
            padding: 0.75rem 1.25rem; 
            border-radius:6px; 
            text-decoration:none; 
            font-weight:500;
        }

        .email
        {
            display:inline-flex; 
            align-items:center; 
            justify-content:center; 
            gap: 0.5rem; 
            background:#f4f4f4; 
            color:#333; 
            padding: 0.75rem 1.25rem; 
            border-radius:6px; 
            border:1px solid #ccc; 
            cursor:pointer; 
            font-family:'poppins'; 
            font-weight:500;
        }
   
   
    }.type {
            margin: 1rem 0 0.75rem 0 !important; 
            
            /* LÖSNINGEN: Gör om till flex och tryck badgen stenhårt till högerkanten */
            display: flex !important;
            justify-content: flex-end !important; 
            width: 100% !important;
        }

        .type .box {
            display: inline-block !important;
            background: #ffdd80 !important; 
            color: #634a00 !important; 
            border-radius: 20px !important; 
            padding: 0.25rem 0.875rem !important;   
            font-size: 0.71875rem !important;   
            font-weight: 600 !important;    
            letter-spacing: 0.3px !important; 
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important; 
        }

        hr
        {
            border: 0; 
            border-top: 1px solid #eee; 
            margin: 1.875rem 0 0.625rem 0;
        }

        h2
        {
            margin-bottom: 0.625rem; 
            margin-top: 0;
        }

        .categories
        {
            display:flex; 
            flex-direction:row; 
            gap: 0.5rem; 
            margin-bottom: 1.25rem;
        }    
    
     img
     {
        border-radius: 8px; 
        object-fit: cover;
     }

     .main-text
     {
        line-height: 1.6; 
        color: #444; 
        padding-bottom: 2.1875rem;
        padding-left: 0.4375rem;
     }

     .report
     {
        text-align:right;
     }

     .foot
     {
        display:grid; 
        grid-template-columns:1fr 1fr; 
        gap: 2.5rem;

        .part
        {
            display:inline-flex; 
            align-items:center; 
            gap: 0.3125rem;
        }

        .links
        {
            display:flex; 
            flex-direction:row; 
            gap: 0.9375rem; 
            align-items: center;
        }
     }
}

.tiny-button-category
{
    background:#e9ecef; 
    padding: 0.25rem 0.75rem; 
    border-radius:20px; 
    font-size: 0.8125rem;
}
.anns-view
{
    img
    {
        border: solid 1px #555;
        width: 6.25rem;
        height: 6.25rem;
    }
}
/* ==========================================================================
   FORMULÄR-DESIGN: Vit sida, tonade BLÅ rutor & inramad Action Bar
   ========================================================================== */

/* Hela sidan (golvet) blir krispigt ljust/vitt */
.edit {
    padding: 1.25rem var(--container-padding);
    background-color: #fff; 
    min-height: 100vh;
}

/* Nestade element inuti .edit (Korrigerade och isolerade) */
.edit .cb {
   display:flex;
   height: 2.8125rem;
   gap: 0.9375rem;
   margin-top: 0.625rem;
   align-items: center;
}
.edit .cb input[type="radio"] {
    scale:1.5;
    cursor:pointer;
}
.edit .cb label, .edit .cb2 label {
    padding-left: 0.125rem;
    cursor:pointer;
    display: inline-block; position: relative; padding-left: 2.1875rem; cursor: pointer; font-size: 1rem; user-select: none; font-family: 'Poppins', sans-serif; text-align: left;
}
.edit .cb2 label
{
    margin-top: 0.1875rem;
    padding-left: 0.3125rem;

}

.edit .box, 
.edit .box2, 
.edit .wb, 
.edit .uploader-wrapper.box, 
.edit .action-bar.box {
    border: 1px solid #d9e2ec;
    padding: 0.625rem;
    border-radius: 12px;
    background-color: #f0f4f8; /* Mjuk, professionell blågrå nyans */
    margin-bottom: 2.1875rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.01);
}

/* Specifika inställningar för formulärrader inuti boxarna */
.edit .box .anns-info, .edit .box .st-info,
.edit .box2 .anns-info, .edit .box2 .st-info {
    display:grid;
    grid-template-columns: 1.5fr 8.5fr;
}
.edit .box .anns-info .spacer, .edit .box .st-info .spacer { margin-top: 0.625rem!important; margin-bottom: 0.625rem; }
.edit .box .anns-info .mini-spacer, .edit .box .st-info .mini-spacer { margin-top: 0.625rem!important; margin-bottom: 0.3125rem; }
.edit .box .anns-info .keywords { display:flex; gap: 0.3125rem; width: 30.625rem; }          

.edit .box .anns-info .rb, .edit .box .st-info .rb {
    font-family:'Poppins';
    font-weight:500;
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: 0.5px;
}
.edit .box .anns-info .center-alignment { align-self:center; }
.edit .box .anns-info > div { margin-top: 0.625rem; }

.edit .box .place-select { padding-left: 0.9375rem; }
.edit .box textarea { width: 90%; }
.edit .box .psn input { width: 6.25rem; margin-left: 0.625rem; }

.edit .box .confirm {
    
    margin-top: 0; position: relative; width: 100%; display: flex; justify-content: flex-start; text-align: left;
}
.edit .box .confirm div { max-height: 2.1875rem; }
.edit .box svg { vertical-align: middle; margin-bottom: 0.1875rem; }

.edit .action-bar.box {
    margin-top: 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column; gap: 1.25rem; align-items: flex-start;

    hr
    {
        margin: 0; border: none; border-top: 1px solid #d9e2ec; width: 100%;
    }

    .p2
    {
        display: flex; justify-content: space-between; align-items: center; width: 100%; padding-top: 0.3125rem;
    }
}

/* Inmatningsfälten blir krispigt vita för att poppa ut ur de blå rutorna */
.edit input[type="text"], 
.edit input[type="email"], 
.edit textarea, 
.edit .dropdown summary {
    background-color: #ffffff !important;
    border: 1px solid #bcccdc !important;
    padding: 0.625rem;
    width: 100%;
    box-sizing: border-box;
}

/* Tvinga ner alla SVG-ikoner vid rubrikerna till en enhetlig storlek och blå färg */
.edit .rb svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-width: 1.25rem;
    min-height: 1.25rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.375rem;
    color: var(--brand-color, #0984e3);
}

.edit .wb {
    background-color: white;
    border:none;
    padding: 0;
}
.checkbox-textQ
{
    display: inline-block;text-align: left;
}


.edit .rb
{
    align-self:center;
}
.edit .wb .save { display:flex; gap: 1.25rem; margin: 0 0 0 auto; }
.edit .wb label { align-self: center; }

.edit .hl {
    display:grid;
    align-items: center;
    width: 100%;

    grid-template-columns: 1fr 1fr;
}


.edit .boxImage { padding: 1.25rem; background-color:white; margin-bottom: 4.0625rem; }
.edit .editor { visibility:hidden; height: 25rem; }
.edit .master-upload-btn {
    display: block;
    width: 100%;
    background: #ffffff;
    border: 2px dashed #bcccdc;
    border-radius: 8px;
    padding: 2.1875rem 1.25rem;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.edit .master-upload-btn:hover { background: #f7f9fb; border-color: var(--brand-color, #0984e3); }
.edit .master-upload-btn .btn-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-main, #2d3436);
}
.edit .master-upload-btn .btn-content p { font-weight: normal; font-size: 0.85rem; color: #636e72; margin-top: 0.375rem; }

.edit .image-grid { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.9375rem; }
.edit .image-slot { position: relative; width: 13.75rem; border: 1px solid #ddd; border-radius: 8px; background: #fff; padding: 0.625rem;}
.edit .remove-btn { position: absolute; top: -0.625rem; right: -0.625rem; background: #ff4d4d; color: white; border: 2px solid white; border-radius: 50%; width: 1.625rem; height: 1.625rem; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 10; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; font-size: 1.125rem; font-family: Arial, sans-serif; }
.edit .remove-btn:hover { background: #e60000; transform: scale(1.1); transition: all 0.2s; }
.edit .image-slot img { width: 100%; height: 9.375rem; object-fit: cover; border-radius: 4px; }
.edit .caption-input { margin-top: 0.625rem; width: 100%; padding: 0.3125rem; font-size: 0.75rem; border: 1px solid #eee; border-radius: 4px; box-sizing: border-box; }

.edit .type-selector {
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
    max-width: 37.5rem;
    margin: 0 0 0 auto;
}
.edit .type-selector .button-group {
    display: flex;
    flex-wrap: wrap;
}
.edit .type-selector .button-group input[type="radio"] { display: none; }
.edit .type-selector .button-group label { padding: 0.75rem 1.25rem; background-color: #fff; border: 1px solid #0984e3; color: #0984e3; cursor: pointer; font-family: 'Poppins', sans-serif; font-weight: 500; transition: all 0.2s ease; margin-right: -0.0625rem; flex: 1; text-align: center; }
.edit .type-selector .button-group label:first-of-type { border-radius: 6px 0 0 6px; }
.edit .type-selector .button-group label:last-of-type { border-radius: 0 6px 6px 0; }
.edit .type-selector .button-group label:hover { background-color: #f0f7ff; }
.edit .type-selector .button-group input[type="radio"]:checked + label { background-color: #0984e3; color: white; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }

.edit .box2 { border:solid 1px #ccebff; background-color:#e6f5ff; }
.edit .anns-view img { border: solid 1px #555; width: 6.25rem; height: 6.25rem; }
.edit .lt
{
    a
    {
        cursor:pointer;
        letter-spacing:0.5px;
        font-family:'Poppins';
        color: var(--link-color)!important;
    }

    text-align:end;
}

#editor-preview-view
{
    .container
    {
        max-width: 62.5rem; margin: 0 auto; padding: 0 var(--container-padding);
    }

    .preview-banner
    {
        background: #e3f2fd; color: #0d47a1; border: 1px solid #bbdefb; padding: 0.75rem 1.25rem; border-radius: 8px; margin-bottom: 1.25rem; display: flex; gap: 0.625rem; align-items: center;
    }

    .tbxBtn
    {
        display: flex; justify-content: flex-start; margin-bottom: 0.9375rem;

        button
        {
            background:#fff;
            border:solid 1px #333;
            border-radius:4px;
            padding: 0.625rem;
            font-family:'poppins';

            .tt
            {
                margin-top: 0.0625rem; display:inline-block; vertical-align:middle; letter-spacing:0.5px;
            }

        }

    }
}

.anns-places
{
    color: #555; padding-left: 1.7rem; letter-spacing:0.5px; font-family:'poppins';
}

.anns-gallery-grid
{
    display: flex; gap: 0.9375rem; flex-wrap: wrap;
}

#anns-gallery-wrapper
{
    margin-bottom: 2.1875rem;
}


.gallery-title
{
    margin-top: 1.875rem; margin-bottom: 0.625rem; font-weight: 600; font-family: 'Poppins'; color: #333;
}



.anns-view-slot
{
    width: 7.5rem; height: 7.5rem; overflow: hidden; border-radius: 6px; background: #f9f9f9; cursor: pointer;
}
/* --- DITT NYA DRAGSPEL (KATEGORIERNA) --- */
.main-cat-toggle, 
.main-cat-toggle:visited, 
.sub-cat-item, 
.sub-cat-item:visited {
    color: var(--text-main) !important;
    text-decoration: none;
    cursor: pointer;
}

/* 2. Unika regler för HUVUDKATEGORIN (Centrerar pilen vertikalt med texten) */
.main-cat-toggle {
    display: flex !important;       /* Flexbox för att kunna använda align-items */
    align-items: center !important; /* Centrerar pil och text perfekt i höjdled */
    gap: 0.5rem;                       /* Avstånd mellan pil och text */
    padding: 0.375rem 0;
}
.main-cat-toggle .arrow {
    display: block;
    flex-shrink: 0;
    fill: var(--text-main) !important;
}

.sub-cat-item {
    display: block !important;
    padding: 0.25rem 0;
    padding-left: 1.25rem;
}

.sub-cat-item.selectedCategory {
    font-weight: 500;
    opacity: 1;
    text-decoration: underline !important; /* Tvingar fram understrykning på den valda */
    color: #0066cc !important;             /* Tvingar fram din blåa färg på den valda */
}

.optional
{
   font-size: 0.85rem;
   color: #666;
}
.anns-image-box {
    width: 8.75rem;
    height: 8.75rem;
    flex-shrink: 0; 
}

.anns-image-box {
    width: 7.5rem;
    height: 7.5rem;
    margin: 1rem;
    border-radius: 6px; /* Rundar bildens egna hörn lite grann */
    overflow: hidden;
    flex-shrink: 0;
}
.anns-content-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Trycker upp header och ner footer */
    flex: 1;
    padding: 1rem;
}

.anns-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.anns-header h3 {
    margin: 0;
    font-size: 1.125rem;
    color: #333;
}

.anns-location {
    margin: 0.25rem 0 0 0;
    color: #666;
    font-size: 0.875rem;
}

/* Footern ligger alltid klistrad i botten av raden */
.anns-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
}

.anns-tags {
    display: flex;
    gap: 0.5rem; /* Ger mellanrum mellan dina blå taggar */
}

.anns-date {
    font-size: 0.75rem;
    color: #999;
}
/* Grundstil för stämpeln */
.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase; /* Gör texten till stora bokstäver för "stämpel"-känsla */
    display: inline-block;
}

/* Grön/gulaktig för de som vill utföra jobb */
.badge-erbjuder {
    background-color: #e6f4ea; /* Väldigt ljus, behaglig grön */
    color: #137333;            /* Mörkgrön text för bra kontrast */
    border: 1px solid #13733330;
}

/* Blå/grå för de som efterlyser hjälp */
.badge-sokes {
    background-color: #feeedb; /* Ljus, mjuk orange/gul (eller ljusblå) */
    color: #b06000;            /* Mörk text */
    border: 1px solid #b0600030;
}

.bagde-eb {
    background-color: #ebf7ed;
    color: #1f692d;
    border: 1px solid #28a74530;
}

/* Denna håller kvar footern i botten, men låter infon ovanför ligga kompakt */
.anns-content-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    flex: 1;
    padding: 1rem 1rem 1rem 0; /* Ingen padding till vänster om bilden redan har marginal */
}

/* Här styr du mellanrummet under ortnamnet innan taggarna kommer */
.anns-main-info {
    margin-bottom: 0.75rem; 
}

.anns-header h3 {
    margin: 0;
    font-size: 1.125rem;
    color: #333;
    line-height: 1.3;
}

.anns-meta-line {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.anns-company {
    font-weight: 500;
    color: #333;
}

.anns-divider {
    color: #ccc; /* Gör punkten lite diskret grå */
}

.anns-location {
    color: #666;
    margin: 0; /* Nollställ den gamla marginalen så allt linjerar */
}

#searchResult
{
    margin-top: 2.1875rem;
}

/* Container som centrerar pagineringen längst ner */
.pagination-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 2.5rem 0;
    font-family: sans-serif;
}

/* Standardstilen för alla pagineringsknappar */
.page-btn {
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #dcdcdc;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
}

/* Hover-effekt (när man håller musen över en klickbar knapp) */
.page-btn:not([disabled]):not(.active):hover {
    background-color: #f5f5f5;
    border-color: #adadad;
    color: #000000;
}

/* Den aktiva sidan (den man står på just nu) */
.page-btn.active {
    background-color: #007bff; /* Byt till din sidas primärfärg (t.ex. Blocket-blå eller liknande) */
    color: #ffffff;
    border-color: #007bff;
    cursor: default;
}

/* Knapparna för Föregående / Nästa */
.page-btn.prev, .page-btn.next {
    font-weight: 600;
}

/* Inaktiverade knappar (t.ex. "Föregående" när man står på sida 1) */
.page-btn[disabled] {
    background-color: #f9f9f9;
    color: #b5b5b5;
    border-color: #e4e4e4;
    cursor: not-allowed;
}

/* Styling för de tre punkterna (...) */
.page-dots {
    color: #777777;
    padding: 0 0.25rem;
    font-weight: bold;
    letter-spacing: 2px;
}


/* ==========================================================================
   STÅENDE ANNONS-KORT (ID-KORT STYLE) - REKRYTERING / UPPDRAG
   ========================================================================== */

/* Behållaren som styr rutnätet (Grid) */
.anns-section {
    padding-bottom: 5.9375rem;
    display: grid;
    /* Skapar kolumner dynamiskt: minst 260px breda, fyller ut raden perfekt */
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1.875rem;
    width: 100%;
    max-width: var(--max-width);
    margin: 1.875rem auto;
}

/* Det enskilda stående kortet */
.anns-section .item {
    width: 100%; /* Låter Grid-motorn bestämma bredden istället för låst 235px */
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 0; /* Vi sköter marginaler via padding istället */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    padding: 0; /* Ingen padding här så topp-bannern kan gå ända ut */
    border-radius: 8px;
    border: 1px solid var(--border-color);
    position: relative;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Hovringseffekt på hela kortet */
.anns-section .item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

/* När man hovrar över kortet byter rubriken färg automatiskt */
.anns-section .item:hover .anns-card-title {
    color: var(--brand-color);
}

/* Den gråa topp-bannern (ID-kortets övre del) */
.anns-section .item .img-container {
    width: 100%;
    height: 4.0625rem; /* Snygg, slimmad topplist */
    background-color: var(--bg-page); /* Använder ditt gråa golv från rot-variabeln */
    border-radius: 7px 7px 0 0; /* Rundar av endast de övre hörnen */
    border-bottom: 1px solid var(--border-color);
    position: relative;
    padding: 0;
    margin: 0;
    overflow: visible; /* CRITICAL: Tillåter loggboxen att hänga utanför! */
}
.anns-section .item .anns-logo-wrapper {
    position: absolute;
    top: 1.25rem; /* Trycker ner boxen så den överlappar kanten */
    left: 1rem;
    width: 7.5rem; /* Perfekt, enhetlig ID-storlek */
    height: 7.5rem;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Klipper av SVG-boxar så de följer ramens hörn */
    z-index: 2;
}
.anns-section .item .anns-logo-wrapper img,
.anns-section .item .anns-logo-wrapper svg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Tvingar dina genererade färg-boxar att täcka hela rutan */
}

.badge-float {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.25rem 0.5625rem;
    border-radius: 4px;
    letter-spacing: 0.5px;
    z-index: 1;
}

.badge-soker {
    background-color: #fff1c9;
    color: #b38600;
    border: 1px solid #ffdd80;
}

.info-box-content {
    padding: 6.25rem 1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.anns-card-title {
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-main);
    line-height: 1.4;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    height: 2.75rem; /* Fast höjd så alla kort matchar oavsett textlängd */
    transition: color 0.2s ease-in-out;
}
.anns-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.9375rem;
}

.anns-card-meta .anns-company {
    color: var(--text-muted);
    font-weight: 500;
}

.anns-card-meta .anns-location-pin {
    font-size: 0.8125rem;
    color: var(--text-main);
    font-weight: 400;
}
.anns-card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border-color);
}
.anns-card-tags 
{
    display: flex;
    gap: 0.375rem;
    flex-wrap:nowrap;
    overflow: hidden;
}

.anns-card-footer .anns-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.anns-main-link::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
}
.anns-main-link {
    color: inherit;
    text-decoration: none;
}

.logo-uploader .image-grid .image-slot {
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    padding: 0.625rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-uploader .image-grid .image-slot img {
    object-fit: contain !important; /* Överskriver cover! */
    width: 100% !important;
    height: 100% !important;
    max-height: 9.375rem;
}

.anns-list-row-link {
    text-decoration: none!important;
    
    display: flex;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    margin-bottom: 1rem;
    cursor:pointer;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.anns-list-row-link:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    background-color: #f9f9f9;
}
.anns-list-row-link:hover h3 {
    color: var(--brand-color); /* Rubriken ändrar färg vid hover på raden */
}

.no-results
{
    text-align:center;
    padding-top: 2.1875rem;
}

.main-cat-toggle .arrow {
    display: block;
    flex-shrink: 0;
    transition: transform 0.2s ease, fill 0.2s ease;
    transform: rotate(-90deg); 
    fill: var(--text-main) !important;
}

/* Öppet läge (När kategorin är öppen roterar vi ner pilen till 0 grader) */
.category-group.is-open .main-cat-toggle .arrow {
    transform: rotate(0deg) !important;
    fill: var(--text-main) !important; /* Behåller den mörka färgen */
}

/*Gör huvudkategorins text fetstilt när dragspelet är öppet */
.category-group.is-open .main-cat-toggle {
    font-weight: 600; 
}

/* Se till att själva behållaren för alla knappar ger ordentligt med luft mellan dem */
#mRows {
    display: flex;
    flex-wrap: wrap;   /* Tillåter radbrytning på små skärmar om det behövs */
    gap: 1.5rem;         /* ÖKAT: Avståndet MELLAN de olika knapparna så de inte krockar */
    align-items: center;
}

/* Fixa till varje enskild menyknapp */
.menuItem {
    display: flex !important;
    align-items: center;       /* Centrerar ikon och text vertikalt */
    gap: 0.25rem;                  /* Avståndet INUTI knappen (mellan SVG och sin egen text) */
    padding: 0.375rem 0;            /* Luft över och under */
    color: var(--text-main) !important; 
    text-decoration: none !important;
    cursor: pointer;
    
    /* Skapa en osynlig linje i botten från start för att förhindra "hopp" */
    border-bottom: 2px solid transparent !important;
    transition: border-color 0.2s ease;
}

/* Säkerställ att färgerna håller i sig även om de är besökta */
.menuItem:visited {
    color: var(--text-main) !important;
}

/* HOVER-EFFEKT: Enbart det röda strecket tänds, texten förblir mörk */
.menuItem:hover {
    border-bottom-color: #ff3838 !important; /* Den röda linjen i botten under hela blocket */
}

/* Centrera och nollställ SVG-ikoner inuti knapparna */
.menuItem svg {
    display: block;
    flex-shrink: 0;
}

.support-card {
    display: flex;
    align-items: center;       /* Centrerar kuvertet och texten vertikalt */
    gap: 0.75rem;                 /* Avstånd mellan kuvertet och textblocket */
    text-decoration: none !important; /* Tar bort länkens understrykning */
    color: white;
    transition: opacity 0.15s ease;
}

/* Behåll rätt färg även om länken har klickats på tidigare */
.support-card:visited {
    color: white !important;
}

/* HOVER-EFFEKT: Ger en subtil respons när man för muspekaren över */
.support-card:hover {
    opacity: 0.85; /* Gör hela kortet lite mjukare, eller byt till en färgförändring om du föredrar det */
}

/* Styling för textraderna */
.support-card .header {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1rem;
}

.support-card .email-text {
    font-family: 'Roboto', sans-serif;
    color: white;
    font-size: 0.9rem;
}

/* Nollställ eventuell konstig marginal på bilden */
.support-card .icon-wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* --- Behållare för hela sidan --- */
.secure-settings-container {
    max-width: 50rem;
    margin: 1.25rem auto;
    padding: 0 1.25rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
}

.secure-settings-container h1 {
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
    color: #2c3e50;
}

.secure-settings-container h2 {
    font-size: 1.125rem;
    margin-bottom: 0.625rem;
    color: #2c3e50;
}

/* --- 1. Breadcrumbs --- */
.breadcrumbs {
    max-width: 50rem;
    margin: 1.25rem auto 0.625rem auto;
    padding: 0 1.25rem;
    font-size: 0.875rem;
    color: #7f8c8d;
}
.breadcrumbs a {
    color: #3498db;
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}

/* --- 2. Informationsboxen (💡) --- */
.info-card {
    display: flex;
    background-color: #f4f8fa; /* Mjuk ljusblå bakgrund */
    border-left: 4px solid #3498db; /* Blå vänsterkant för fokus */
    border-radius: 4px;
    padding: 1.25rem;
    margin-bottom: 2.1875rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.info-icon {
    font-size: 1.5rem;
    margin-right: 0.9375rem;
    margin-top: 0.125rem;
}

.info-text h3 {
    margin: 0 0 0.5rem 0;
    color: #2c3e50;
    font-size: 1rem;
}

.info-text p {
    margin: 0 0 0.625rem 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #555;
}

.info-text p:last-child {
    margin-bottom: 0;
}

/* --- 3. Listan över e-postadresser --- */
.email-list-section {
    margin-bottom: 2.1875rem;
    padding-left: 0;
    padding-right: 0;
}

.section-desc {
    font-size: 0.875rem;
    color: #7f8c8d;
    margin-bottom: 0.9375rem;
}

.email-table {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.email-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9375rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.2s ease;
}

.email-row:last-child {
    border-bottom: none;
}

.email-row:hover {
    background-color: #f8fafc; /* Lätt visuell feedback vid hovring */
}

/* Stil för huvudkontot (Ägaren) */
.email-row.owner {
    background-color: #fafbfc;
}

.email-address {
    font-weight: 500;
    font-size: 0.9375rem;
    flex-grow: 1;
}

/* --- Badges / Etiketter --- */
.badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-weight: 600;
    margin-right: 1.25rem;
}

.badge-owner {
    background-color: #e6f4ea;
    color: #137333; /* Snygg dämpad grön */
}

.badge-guest {
    background-color: #f1f3f4;
    color: #5f6368; /* Neutral grå */
}

/* --- 4. Formulär & Knappar --- */
.add-email-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 1.5625rem 1.25rem;
}

.add-email-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #4a5568;
}
.input-inline 
{
    display: block;
}
.input-inline input[type="email"] {
    flex-grow: 1;
    padding: 0.75rem 0.9375rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.9375rem;
    outline: none;
    transition: border-color 0.2s;
}

.input-inline input[type="email"]:focus {
    border-color: #3498db; /* Blå ram när man skriver */
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* Knappar */
.btn-primary {
    background-color: #2ecc71; /* Professionell grön "Spara"-färg */
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background-color 0.15s;
    white-space: nowrap;
}

.btn-primary:hover {
    background-color: #27ae60;
}

.btn-delete {
    background: none;
    border: none;
    color: #94a3b8; /* Grå som standard */
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.3125rem 0.625rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-delete:hover {
    color: #e74c3c; /* Blir röd när man vill ta bort */
    background-color: #fdedec;
}




/* ==========================================================================
   SKOTTSÄKER & ISOLERAD CSS FÖR INFO- OCH FAQ-SIDAN
   ========================================================================== */

/* Huvudcontainern tvingas bli en vanlig vertikal block-stapel */
.ub-bulletproof-wrapper {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 56.25rem !important;
    margin: 3.75rem auto !important;
    padding: 0 1.25rem !important;
    box-sizing: border-box !important;
}

/* Sidan header slår ut över hela bredden */
.ub-bulletproof-wrapper .ub-page-header {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 2.5rem !important;
}
.ub-bulletproof-wrapper .ub-page-meta {
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin-top: 0.3125rem;
}

/* Informationskorten tvingas ta 100% bredd på egna rader */
.ub-bulletproof-wrapper .ub-info-card {
    display: block !important;
    float: none !important;
    width: 100% !important;
    background-color: white !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    margin-bottom: 1.875rem !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.01) !important;
    overflow: hidden !important;
    clear: both !important;
}

/* Kortrubriker */
.ub-bulletproof-wrapper .ub-info-headline {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-main);
    padding: 1.5rem 1.5rem 0.375rem 1.5rem;
    display: flex;
    align-items: center;
}
.ub-bulletproof-wrapper .ub-info-subline {
    font-size: 0.84375rem;
    color: var(--text-muted);
    padding: 0 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* Kortsidornas innehållskropp (Med din efterlängtade rymliga padding!) */
.ub-bulletproof-wrapper .ub-info-body {
    display: block !important;
    width: 100% !important;
    padding: 1.5rem 1.5rem !important; /* Härlig, luftig padding runt all text */
    box-sizing: border-box !important;
}

/* Textformatering inuti korten */
.ub-bulletproof-wrapper .ub-info-body p {
    margin: 0 0 1rem 0 !important;
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
    color: var(--text-main) !important;
}
.ub-bulletproof-wrapper .ub-info-body p:last-child {
    margin-bottom: 0 !important;
}
.ub-bulletproof-wrapper .ub-info-body h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 1.5rem 0 0.5rem 0;
    color: var(--text-main);
}
.ub-bulletproof-wrapper .ub-info-body h3:first-child {
    margin-top: 0;
}

/* --- FAQ-Komponenter --- */
.ub-bulletproof-wrapper .ub-faq-filters {
    display: flex !important;
    gap: 0.625rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 1.5625rem !important;
    padding-bottom: 0.9375rem !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.ub-bulletproof-wrapper .ub-faq-filter-btn {
    padding: 0.5rem 1rem;
    background-color: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.84375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-muted);
}
.ub-bulletproof-wrapper .ub-faq-filter-btn:hover {
    background-color: #e4e6eb;
    color: var(--text-main);
}
.ub-bulletproof-wrapper .ub-faq-filter-btn.active {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
    color: white;
}

.ub-bulletproof-wrapper .ub-faq-item {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--border-color);
}
.ub-bulletproof-wrapper .ub-faq-item:last-child {
    border-bottom: none;
}

.ub-bulletproof-wrapper .ub-faq-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center !important;
    padding: 1rem 0.5rem !important;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--text-main);
}
.ub-bulletproof-wrapper .ub-faq-trigger:hover {
    color: var(--brand-color);
}
.ub-bulletproof-wrapper .ub-faq-trigger i {
    font-size: 0.8125rem;
    color: var(--text-muted);
    transition: transform 0.25s ease;
}
.ub-bulletproof-wrapper .ub-faq-item.open .ub-faq-trigger i {
    transform: rotate(180deg);
    color: var(--brand-color);
}

.ub-bulletproof-wrapper .ub-faq-content {
    display: none;
    padding: 0 0.5rem 1rem 0.5rem;
    font-size: 0.90625rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* --- Kontakta oss --- */
.ub-bulletproof-wrapper .ub-contact-banner {
    text-align: center !important;
    max-width: 31.25rem;
    margin: 0 auto;
}
.ub-bulletproof-wrapper .ub-contact-email {
    display: inline-block !important;
    background-color: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.875rem 1.75rem;
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
    color: var(--text-main);
    margin-top: 0.625rem;
}

/* --- Supportkort i Kontakta oss --- */
.ub-bulletproof-wrapper .ub-support-container {
    display: block !important;
    width: 100% !important;
}

/* Själva kortet som är en länk (a-tagg) */
.ub-bulletproof-wrapper .ub-support-card {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1rem 1.25rem !important;
    background-color: var(--bg-page) !important; /* Din ljusa bakgrund */
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    text-decoration: none !important; /* Tar bort understrykning */
    margin-bottom: 1rem !important;
    transition: all 0.2s ease-in-out !important;
    box-sizing: border-box !important;
}

.ub-bulletproof-wrapper .ub-support-card:last-child {
    margin-bottom: 0 !important;
}

/* Hovringseffekt - Kortet lyfter lite och får tydligare kant */
.ub-bulletproof-wrapper .ub-support-card:hover {
    background-color: white !important;
    border-color: var(--brand-color) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
    transform: translateY(-1px);
}

/* Omslag för kuvert-bilden */
.ub-bulletproof-wrapper .ub-support-icon-wrapper {
    width: 2rem !important;
    height: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.ub-bulletproof-wrapper .ub-support-icon-wrapper img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Text-wrappers */
.ub-bulletproof-wrapper .ub-support-flexer {
    display: flex !important;
    flex-direction: column !important;
}

.ub-bulletproof-wrapper .ub-support-header {
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    margin-bottom: 0.125rem !important;
    line-height: 1.3 !important;
}

.ub-bulletproof-wrapper .ub-support-email {
    font-size: 0.875rem !important;
    color: var(--brand-color) !important; /* Din varumärkesfärg/blåa färg */
    font-family: 'Roboto', sans-serif !important;
}

.ub-global-header {
    display: block;
    width: 100%;
    background-color: #fcfcfc !important; /* Ljusare och krispigare än #fafafa */
    border-bottom: 1px solid var(--border-color, #e4e6eb);
}

/* Denna container styr raden där allt ligger */
.ub-nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end !important; /* Trycker ner logga, meny och hamburger till botten */
    margin: 0 auto;
    padding: 1.875rem 0 0.375rem 0 !important; /* Mer luft i toppen (30px), väldigt nära kanten i botten (6px) */
    box-sizing: border-box;
}

/* Hamburgerbehållaren i bottenläge */
.ub-hamburger-container {
    display: none !important;
}

/* Mobilmenyn (rullgardinen) hålls opåverkad av bottenjusteringen */
.ub-mobile-dropdown {
    display: block !important;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    background-color: #fcfcfc; /* Matchar den nya ljusa färgen */
    border-bottom: 0 solid var(--border-color, #e4e6eb);
    transition: max-height 0.3s ease-in-out;
}

.ub-mobile-dropdown-inner {
    padding: 0 1.25rem;
}

.ah
{
    display: flex; gap: 1.25rem; margin-top: 0.625rem;
}

#logos2
{
    display:none;
    flex-direction: column;
    align-items: center;

    font-size: 1.5625rem; 
    letter-spacing: 0.9px;
    font-family:'Poppins';
    text-align:center;

    margin: 0 auto;
}



.pnr
{
    display:flex;
    
    flex-direction:row;
}

/* 1. Centrera hela raden (om .cb2 har en viss höjd eller ligger i en rad) */
.cb2 {
    display: flex;
    align-items: center;    /* Centrerar båda alternativen vertikalt */
    gap: 0.3125rem;         
    margin-top: 0.75rem;
}

/* 2. Centrera radioknappen med sin tillhörande text */
.cb2 span {
    display: inline-flex;
    align-items: center;    /* Det här gör magin! Centrerar pricken exakt i höjd med texten */
}

.taa
{
    display:flex; flex-direction:row;
}

.map
{
    padding-top: 3.4375rem;
}

/* ==========================================================================
   GLOBAL DESIGN-BAS (Färger, former & effekter för alla skärmar)
   ========================================================================== */

/* Knapparnas utseende */
.bar .buttons a.tel,
.bar .buttons button.email,
.bar .buttons a.website {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.625rem 1.125rem !important; 
    font-size: 0.84375rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    height: 2.75rem !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important; /* Mjuk övergång vid hover */
}

/* Hemsidesknappen specifikt */
.bar .buttons a.website {
    background-color: #f8f9fa !important;
    color: #2d3748 !important;
    border: 1px solid #e2e8f0 !important;
}

/* Hover-effekter på desktop (ignoreras automatiskt på mobil) */
.bar .buttons a.website:hover {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e0 !important;
    color: #1a202c !important;
}
.bar .buttons a.tel:hover,
.bar .buttons button.email:hover {
    filter: brightness(0.95);
    cursor: pointer;
}
.anns-places {
    display: grid;
}

#anns-report-btn {

    font-size:0.9em;

    text-align:right; 


}
.anns-places a, 
.anns-places div, 
.anns-places span {
    display: inline-block !important;
    padding-bottom: 0.3125rem!important;
    font-weight: 500 !important;
    transition: all 0.15s ease-in-out !important;
}

.ub-hamburger-btn {
        background: none;
        border: 1px solid var(--border-color, #dfe6e9);
        border-radius: 6px;
        padding: 0.5rem 1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--text-main, #2d3436);
        font-family: 'Poppins', sans-serif;
        font-size: 0.9375rem;
        font-weight: 600;
        transition: all 0.2s;
        height: 2.6875rem;
        transform: all 0.2 ease;
        position:relative;
    }
    .ub-hamburger-btn:hover {
        background-color: var(--bg-page, #f4f8fa);
        border-color: var(--brand-color, #ff545a);
    }
    .ub-hamburger-btn i {
        font-size: 1rem;
        width: 1.125rem;
        text-align: center;
    }.nav-item-wrapper {
    position: relative;
    display: inline-block;
}


/* Nollställ alla lager som kan ha bakgrund eller skugga i GLightbox */
.gslide-inline .ginner-container,
.gslide-inline .gwindow-inner-content,
.gslide-inline .ginlined-content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 1.5rem !important;
    max-width: 100% !important;
    max-height:100% !important;
    height:100%!important;
    overflow: visible !important; /* VIKTIGT: Tillåter texten under bilden att synas! */
}

/* Behåll centrerings-regeln för huvudwrappern */
.gslide-media.gslide-inline {
    background: white !important;
    height: auto !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}



/* error.css */
.error-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    text-align: center;
    padding: 2rem;
    font-family: system-ui, -apple-system, sans-serif;
}

.error-page h1 {
    font-size: 5rem;
    margin: 0;
    color: #c47cbf; /* Din accentfärg */
}

.error-page h2 {
    font-size: 1.5rem;
    margin: 1rem 0;
    color: #2c3e50;
}

.error-page p {
    color: #666;
    max-width: 400px;
    margin-bottom: 2rem;
}

.error-actions {
    display: flex;
    gap: 1rem;
}

.btn {
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s;
}

.btn-primary { background: #c47cbf; color: white; }
.btn-secondary { background: #f0f0f0; color: #333; }
.btn:hover { opacity: 0.8; }