/* ===== FLIKAR (odd/even) ===== */
.flikar {
/*    margin: 2rem 0; */
   margin-top: 1.5em;
   margin-bottom: 2.5em;
}

/* Tabb-raden */
.flikar__tabs {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Tabb-knappar */
.flikar__tab {
    background: #fff !important;
    color: #222 !important;
    border: 1px solid #ddd;
    padding: 0.5em 1em !important;
    cursor: pointer;
    font: inherit;
    text-decoration: none;
}

/* Anpassa paddingen för skärmstorlek 667px och mindre */
@media (max-width: 667px) {
    .flikar__tab {
        padding: 0.3em .6em !important;
    }
}

/* Aktiv flik */
.flikar__tab[aria-selected="true"] {
    background: #f3f3f3 !important;
    /* ljusgrå bakgrund för aktiv */
    color: #222 !important;
    text-decoration: none;
    cursor: default;
    pointer-events: none;
    /* gör den “oklickbar” */
    font-weight: 600;
}

/* Fokusmarkering (tangentbord) */
.flikar__tab:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

/* Paneler */
.flikar__panel {
    background: #fff;
    border: 2px solid #f3f3f3;
    border-left: 0px;
    border-right: 0px;
    margin-bottom: 1rem;
}

/* Dolda element (via [hidden]) */
.flikar__panel[hidden],
.flikar__label[hidden] {
    display: none !important;
}

/* Hjälpklass om du vill dölja en källrubrik visuellt men behålla för skärmläsare */
.sv-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* (Valfritt) “Sammanfogad” stil där aktiv flik smälter ihop med panelen nedan: Lägg klassen .flikar--merge på containern om du vill använda detta. */
.flikar.flikar--merge .flikar__tabs {
    margin-bottom: 0;
}

.flikar.flikar--merge .flikar__tab[aria-selected="true"] {
    border-bottom-color: transparent;
}

.flikar.flikar--merge .flikar__panel {
    border-top: 1px solid #ddd;
    /* lägg tillbaka top-border */
    margin-top: -1px;
    /* “smälter ihop” med aktiv flik */
}