/* Kommunslöseri — scoped styles
 * Inherits theme fonts (Graphik Web) and colors (sb-red, sb-blue).
 * Green (#67BD5E) from skattesnurra for "bästa kommun" bars.
 */

#kommunsloseri {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  color: #1a1a1a;
}

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

/* ── Heading with red pipe ──────────────────────────────────────── */
#kommunsloseri .ks-heading {
  font-size: 0.95rem;
  font-weight: 600;
}
#kommunsloseri .ks-heading::before {
  content: "|";
  font-weight: 900;
  color: var(--color-sb-red, #f9423a);
  margin-right: 0.5rem;
}

/* ── Kommun picker ──────────────────────────────────────────────── */
#kommunsloseri .ks-picker {
  background: #f6f6f6;
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}
#kommunsloseri .ks-picker label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.375rem;
}
#kommunsloseri .ks-search-wrap {
  position: relative;
  max-width: 24rem;
}
#kommunsloseri .ks-search {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: #1a1a1a;
  background: #fff;
  transition: border-color 0.15s;
}
#kommunsloseri .ks-search:focus {
  outline: none;
  border-color: var(--color-sb-blue, #0072ce);
  box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.15);
}
#kommunsloseri .ks-dropdown {
  display: none;
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 16rem;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  margin-top: 0.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
}
#kommunsloseri .ks-dropdown li::before {
  content: none;
}
#kommunsloseri .ks-dropdown.open {
  display: block;
}
#kommunsloseri .ks-dropdown li {
  padding: 0.5rem 0.875rem;
  cursor: pointer;
  font-size: 0.9375rem;
  transition: background 0.1s;
}
#kommunsloseri .ks-dropdown li:hover,
#kommunsloseri .ks-dropdown li.highlighted {
  background: #f0f4ff;
}
#kommunsloseri .ks-dropdown li.selected {
  background: var(--color-sb-red, #f9423a);
  color: #fff;
}

/* ── Results section ────────────────────────────────────────────── */
#kommunsloseri .ks-results {
  display: none;
}
#kommunsloseri .ks-results.visible {
  display: block;
}

#kommunsloseri .ks-info {
  background: #f6f6f6;
  padding: 1.5rem;
  border-radius: 0.5rem;
}
#kommunsloseri .ks-cost {
  font-size: 1.875rem;
  font-weight: 700;
  margin: 0.5rem 0 0.75rem;
  line-height: 1.2;
}
#kommunsloseri .ks-cost span {
  font-weight: 400;
  font-size: 1.25rem;
}
#kommunsloseri .ks-desc {
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.7;
  margin-bottom: 1rem;
}
#kommunsloseri .ks-efficient {
  color: var(--color-sb-green, #67BD5E);
  font-weight: 600;
}

/* ── Metrics grid ───────────────────────────────────────────────── */
#kommunsloseri .ks-divider {
  border: none;
  border-top: 2px solid #c6c6c6;
  margin: 1rem 0;
}
#kommunsloseri .ks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
}
#kommunsloseri .ks-metric-icons {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.375rem;
}
#kommunsloseri .ks-metric-icons img {
  height: 2rem;
  width: 2rem;
}
#kommunsloseri .ks-metric-text {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #4b5563;
}
#kommunsloseri .ks-metric-icons.dimmed img {
  opacity: 0.3;
  filter: grayscale(100%);
}

/* ── Chart section ──────────────────────────────────────────────── */
#kommunsloseri .ks-chart-wrap {
  background: #f6f6f6;
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin-top: 1.5rem;
}
#kommunsloseri .ks-chart-title {
  font-size: 1.25rem;
  text-align: center;
  margin-bottom: 1rem;
  font-weight: 600;
}
#kommunsloseri .ks-chartdiv {
  width: 100%;
  height: 420px;
}

/* ── About section ──────────────────────────────────────────────── */
#kommunsloseri .ks-about {
  margin-top: 1.25rem;
}
#kommunsloseri .ks-about-text {
  font-size: 0.8125rem;
  color: #6b7280;
  line-height: 1.7;
  margin-top: 0.5rem;
}

/* ── CTA ────────────────────────────────────────────────────────── */
#kommunsloseri .ks-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-sb-red, #f9423a);
  color: #fff;
  padding: 0.625rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  margin-top: 1.5rem;
  transition: background 0.15s;
}
#kommunsloseri .ks-cta:hover {
  background: #e03830;
  color: #fff;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #kommunsloseri .ks-grid {
    grid-template-columns: 1fr;
  }
  #kommunsloseri .ks-chartdiv {
    height: 300px;
  }
}