/* ================== VARIABLER ================== */
.inlineSelectParent{
  /* Ikon */
  --icon-left: 0.35em;
  --icon-w: 1.15em;
  --icon-gap: 0.40em;
  --icon-nudge-y: 2px;
  --icon-stroke: 2px;
  --icon-closed-nudge: 1px;    /* flytta hela hamburgaren ned i stängt läge */
  --icon-closed-gap: 3px;      /* extra avstånd mellan strecken stängt */
  --icon-closed-gap-half: calc(var(--icon-closed-gap) / 2);

  /* Menyrader */
  --item-vpad: 6px;
  --item-hpad: 12px;
  --item-min-h: 36px;

  /* Menybredd och marginaler */
  --menu-min-width: 0px;
  --menu-max-width: 92vw;
  --menu-gutter: 8px;
  --menu-extra: 12px;

  /* YTTRE luft mot fönsterbotten (hanteras i JS) */
  --menu-bottom-gap: 20px;

  /* Grupp- och kolumn-gap */
  --group-gap: 10px;       /* luft ovanför varje rubrik */
  --menu-col-gap: 16px;    /* mellanrum mellan kolumnerna */
}

/* Mellanstora skärmar */
@media (max-width: 768px){
  .inlineSelectParent{
    --icon-nudge-y: 1px;
    --icon-closed-nudge: -0.5px;
  }
}

/* Mindre skärmar */
@media (max-width: 480px){
  .inlineSelectParent{
    --icon-nudge-y: 1.5px;
    --icon-closed-nudge: 0.5px;
  }
}

/* ================== CONTAINER ================== */
.inlineSelectParent{
  position: relative;
  display: inline-block;
  width: auto;
  text-align: left;
  vertical-align: middle;
  align-self: flex-start;
  justify-self: start;
  margin: 0;
  padding: 0;
  color: #3373cd;
  isolation: isolate;
  overflow: visible;

  font-family: Oswald, sans-serif;
  font-size: clamp(16px, 3vw, 27px);
}

/* Dölj original-select men behåll i DOM */
.inlineSelectParent .noAppearanceParent{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ================== KNAPP ================== */
.inlineSelectButton{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--icon-gap);

  margin: 0;
  width: auto; max-width: 100%;
  border: none;
  background: #fff;
  color: #3373cd;
  box-sizing: border-box;

  padding: 9px 12px 8px calc(var(--icon-left) + var(--icon-w) + var(--icon-gap));
  cursor: pointer;

  font-family: Oswald, sans-serif;
  font-size: clamp(20px, 3vw, 27px);  /* <- UPPDATERAD */
  line-height: 1.2;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.inlineSelectButton:focus{ outline: none; }
.inlineSelectButton:focus-visible{
  outline: 2px solid #3373cd;
  outline-offset: 3px;
}

/* Etiketten */
.inlineSelectLabel{
  flex: 1 1 auto;
  text-align: left;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================== HAMBURGARE/KRYSS (SVG) ================== */
.inlineSelectButton .menuIconParent{
  position: absolute;
  left: var(--icon-left);
  top: calc(50% + var(--icon-nudge-y));
  transform: translateY(-50%);
  width: var(--icon-w);
  height: calc(var(--icon-w) * 0.75); /* 24x18 ratio */
  -webkit-tap-highlight-color: transparent;
}
.menuIconParent svg{
  width: 100%;
  height: 100%;
  display: block;
  shape-rendering: geometricPrecision;
}
.menuIconParent line{
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.menuIconParent g{
  transform-box: view-box;
  transform-origin: 12px 9px;
  transition: transform .25s ease, opacity .15s ease;
}

/* STÄNGT läge */
.menuIconParent g.seg-top {
  transform:
    translateY(calc(-25% - var(--icon-closed-gap-half)))
    translateY(var(--icon-closed-nudge));
}
.menuIconParent g.seg-mid {
  transform:
    translateY(0)
    translateY(var(--icon-closed-nudge));
}
.menuIconParent g.seg-bot {
  transform:
    translateY(calc(25% + var(--icon-closed-gap-half)))
    translateY(var(--icon-closed-nudge));
}

/* ÖPPET läge: X mitt i */
.inlineSelectParent.is-open .menuIconParent g.seg-top { transform: translateY(0) rotate(45deg); }
.inlineSelectParent.is-open .menuIconParent g.seg-mid { opacity: 0; transform: translateY(0); }
.inlineSelectParent.is-open .menuIconParent g.seg-bot { transform: translateY(0) rotate(-45deg); }

/* ================== LIST-OVERLAY ================== */
.inlineSelectList{
  position: fixed; /* JS sätter absolute vid portal */
  left: 0; top: 0; width: 0;
  z-index: 2147483647;

  background: #fff;
  border: 1px solid #cbd5e1;  /* grundram när dold */
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  box-sizing: border-box;

  /* Innerluft */
  padding: 6px 0 6px;

  /* Ingen intern scroll */
  overflow: visible;

  list-style: none;
  margin: 0;

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, border-color .1s ease, border-width .1s ease;
  will-change: opacity, transform;

  font-family: Oswald, sans-serif;
  font-size: clamp(16px, 2.6vw, 27px);

  -webkit-tap-highlight-color: transparent;

  /* Grid-layout för flera kolumner */
  display: grid;
  grid-template-columns: 1fr;          /* standard: en kolumn */
  column-gap: var(--menu-col-gap);
  row-gap: 0;
}

.inlineSelectList.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;

  /* önskad ram när öppen */
  border: 2px solid #000000;
}

.inlineSelectList[data-cols="2"]{
  grid-template-columns: 1fr 1fr;      /* två kolumner när JS sätter flaggan */
}

/* Rubriker spänner över båda kolumnerna */
.inlineSelectHeader{ grid-column: 1 / -1; }

.inlineSelectHeader{
  color: #a8a8a8;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  cursor: default;
  user-select: none;

  /* spacing */
  margin-top: var(--group-gap);  /* extra space ovanför */
  margin-bottom: 0;              /* inget under */
  padding-top: var(--item-vpad);
  padding-right: var(--item-hpad);
  padding-bottom: 0;             /* ingen extra under rubriken */
  padding-left: var(--item-hpad);
  min-height: 0;                 /* rubriken ska inte tvingas lika hög som en rad */
}

/* första rubriken ska inte ha extra luft ovanför */
.inlineSelectList > .inlineSelectHeader:first-child{
  margin-top: 0;
}

/* ingen hover-stil på rubriker */
.inlineSelectHeader:hover{
  background: transparent;
  color: #a8a8a8;
}

/* Menyalternativ */
.inlineSelectOption{
  display: flex;
  align-items: center;
  padding: var(--item-vpad) var(--item-hpad);
  min-height: var(--item-min-h);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  color: #3373cd;
  -webkit-tap-highlight-color: transparent;
}
.inlineSelectOption[aria-selected="true"]{
  background: #eef5ff;
  color: #0f3e8a;
}
/* Visuellt fokus vid piltangenter eller mus */
.inlineSelectOption[data-active="true"],
.inlineSelectOption:hover{
  background: #eaf2ff;
  color: #0f3e8a;
}

/* När listan är öppen: visa endast aktuell rad i ljusblått */
.inlineSelectList.is-visible
  .inlineSelectOption[aria-selected="true"]:not([data-active="true"]):not(:hover){
  background: transparent;
  color: #3373cd;
}

/* ================== BACKDROP ================== */
.inlineSelectBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);          /* styr mörkret här */
  backdrop-filter: saturate(90%) brightness(96%);
  z-index: 2147483646;                  /* precis under listan */

  opacity: 0;
  pointer-events: none;

  /* 250 ms fade */
  transition: opacity .25s ease;
  will-change: opacity;
}
.inlineSelectBackdrop.is-visible{
  opacity: 1;
  pointer-events: auto;                 /* fånga klick för att stänga */
}
@media (prefers-reduced-motion: reduce){
  .inlineSelectBackdrop{ transition: none; }
}