/* ═══════════════════════════════════════════════════════════════════
   Immersive pill-kontroller
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design A (prod) – identisk pill-layout som Design B ────────── */

body[data-filter-design="A"].immersive-mode #immersive-controls {
  flex-direction: column;
  align-items: center;
  align-self: center;
  padding: 0;
  border-radius: 50px;
  transition: border-radius 0.25s ease;
  white-space: nowrap;
}

body[data-filter-design="A"].immersive-mode #immersive-controls.expanded {
  border-radius: 16px;
}

body[data-filter-design="A"].immersive-mode #immersive-controls-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
}

body[data-filter-design="A"].immersive-mode #immersive-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

body[data-filter-design="A"] #immersive-category-row {
  display: flex;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 14px;
  border-top: 1px solid transparent;
  justify-content: center;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  transition: max-height 0.28s ease,
              opacity 0.22s ease,
              padding-top 0.28s ease,
              padding-bottom 0.28s ease,
              border-top-color 0.28s ease;
}

body[data-filter-design="A"] #immersive-category-row.expanded {
  max-height: 48px;
  opacity: 1;
  padding-top: 8px;
  padding-bottom: 8px;
  border-top-color: rgba(255,255,255,0.18);
}

body[data-filter-design="A"] .imm-cat-btn {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 3px 8px;
  color: rgba(255,255,255,0.60);
  font-size: 0.78rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: color 0.15s;
}

body[data-filter-design="A"] .imm-cat-btn + .imm-cat-btn {
  border-left: 1px solid rgba(255,255,255,0.25);
}

body[data-filter-design="A"] .imm-cat-btn:hover  { color: #fff; }
body[data-filter-design="A"] .imm-cat-btn.active { color: #fff; }

body[data-filter-design="A"].immersive-mode #panel #filter-bar {
  display: none;
}

body[data-filter-design="A"].immersive-mode #immersive-scroll-hint {
  display: none;
}

body[data-filter-design="A"].immersive-mode #list-content {
  padding-bottom: 80px;
}

body[data-filter-design="B"].immersive-mode #immersive-controls {
  flex-direction: column;
  align-items: center;
  align-self: center;
  padding: 0;
  border-radius: 50px;
  transition: border-radius 0.25s ease;
  white-space: nowrap;
}

body[data-filter-design="B"].immersive-mode #immersive-controls.expanded {
  border-radius: 16px;
}

body[data-filter-design="B"].immersive-mode #immersive-controls-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
}

body[data-filter-design="B"].immersive-mode #immersive-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

body[data-filter-design="B"] #immersive-category-row {
  display: flex;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 14px;
  border-top: 1px solid transparent;
  justify-content: center;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  transition: max-height 0.28s ease,
              opacity 0.22s ease,
              padding-top 0.28s ease,
              padding-bottom 0.28s ease,
              border-top-color 0.28s ease;
}

body[data-filter-design="B"] #immersive-category-row.expanded {
  max-height: 48px;
  opacity: 1;
  padding-top: 8px;
  padding-bottom: 8px;
  border-top-color: rgba(255,255,255,0.18);
}

body[data-filter-design="B"] .imm-cat-btn {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 3px 8px;
  color: rgba(255,255,255,0.60);
  font-size: 0.78rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: color 0.15s;
}

body[data-filter-design="B"] .imm-cat-btn + .imm-cat-btn {
  border-left: 1px solid rgba(255,255,255,0.25);
}

body[data-filter-design="B"] .imm-cat-btn:hover  { color: #fff; }
body[data-filter-design="B"] .imm-cat-btn.active { color: #fff; }

body[data-filter-design="B"].immersive-mode #panel #filter-bar {
  display: none;
}

body[data-filter-design="B"].immersive-mode #immersive-scroll-hint {
  display: none;
}

body[data-filter-design="B"].immersive-mode #list-content {
  padding-bottom: 80px;
}