/*
 * Vägvisaren widget. Every colour, font and radius is a CSS variable with a default, so the
 * customer's stylesheet can restyle the component without editing this file, for example:
 *   .vv-widget, .vv-options { --vv-accent: #8a1538; --vv-radius: 0; }
 * See docs/api-och-integration.md, section "Stilmall".
 */
.vv-widget,
.vv-options {
  font: var(--vv-font, inherit);
  color: var(--vv-text, #172e46);
  line-height: 1.6;
}
.vv-widget {
  margin: 1.5rem 0;
}
.vv-widget h2 {
  font-size: var(--vv-heading-size, 1.3rem);
  margin: 0 0 0.7rem;
}
.vv-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.vv-links li {
  border-bottom: 1px solid var(--vv-border, #c7d3dd);
}
.vv-link {
  display: block;
  padding: 0.65rem 0.15rem;
  color: var(--vv-accent, #00265a);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vv-link:hover {
  background: var(--vv-highlight, #f3fcff);
}
.vv-label {
  display: block;
  font-size: 0.8em;
  color: var(--vv-muted, #41586f);
}
.vv-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.4rem 0;
}
.vv-quicklinks .vv-link {
  padding: 0.65rem 1rem;
  background: var(--vv-accent, #00265a);
  color: var(--vv-on-accent, #fff);
  border-radius: var(--vv-radius, 3px);
  font-size: 0.95rem;
}
.vv-quicklinks .vv-label {
  color: var(--vv-on-accent, #fff);
}
.vv-faq {
  border-top: 1px solid var(--vv-border, #c7d3dd);
  padding-top: 1.4rem;
}
.vv-faq label {
  display: block;
  font-weight: 600;
}
.vv-faq input {
  display: block;
  margin: 0.5rem 0;
  padding: 0.7rem;
  border: 1px solid var(--vv-border-strong, #687b90);
  border-radius: var(--vv-radius, 3px);
  width: 100%;
  box-sizing: border-box;
  font: inherit;
}
.vv-faq button {
  font: inherit;
  padding: 0.6rem 1rem;
  background: var(--vv-accent, #00265a);
  color: var(--vv-on-accent, #fff);
  border: 0;
  border-radius: var(--vv-radius, 3px);
}
.vv-faq button:disabled {
  opacity: 0.6;
}
.vv-answer:not(:empty) {
  background: var(--vv-highlight, #f3fcff);
  border-left: 3px solid var(--vv-accent, #00265a);
  padding: 0.8rem 1rem;
  margin-top: 1rem;
}
.vv-options {
  list-style: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0;
  padding: 0;
  background: var(--vv-surface, #fff);
  border: 1px solid var(--vv-border-strong, #687b90);
  box-shadow: 0 5px 16px #00265a20;
  z-index: var(--vv-z-index, 100);
  max-height: 22rem;
  overflow: auto;
}
.vv-options li {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--vv-divider, #dde4e9);
  cursor: pointer;
}
.vv-options li[aria-selected='true'],
.vv-options li:hover {
  background: var(--vv-selected, #e1f2fb);
  color: var(--vv-accent, #00265a);
}
/* The light background alone is below 3:1 against white (WCAG 1.4.11); the bar carries the state. */
.vv-options li[aria-selected='true'] {
  box-shadow: inset 4px 0 0 var(--vv-accent, #00265a);
  text-decoration: underline;
}
.vv-options[hidden] {
  display: none;
}
.vv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.vv-widget :focus-visible,
.vv-options :focus-visible {
  outline: 3px solid var(--vv-focus, #0056a8);
  outline-offset: 3px;
}
.vv-search-anchor {
  position: relative;
}

.vv-slot--recommendations { min-block-size: 16rem; }
.vv-slot--quicklinks { min-block-size: 5rem; }
.vv-slot--faq { min-block-size: 7rem; }
.vv-slot--all { min-block-size: 28rem; }
.vv-slot > [data-vagvisaren-fallback] { min-block-size: 0; }