/* Startsidans utbyggnad: snabbval (populara kategorier) i hero + trygghetsband.
   Egen fil sa den inte krockar med ovrig styling. Laddas efter styles.css. */

/* Populara kategorier i hero (pa mork bakgrund) */
.hero__snabbval { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.hero__snabbval .snabb-label { font-size: 13px; color: #b9c6dc; margin-right: 4px; }
.snabbchip { background: rgba(255,255,255,0.10); color: #eaf0fa; border: 1px solid rgba(255,255,255,0.22); border-radius: 16px; padding: 6px 14px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.snabbchip:hover { background: var(--amber-500); color: var(--navy-900); border-color: var(--amber-500); }

/* Trygghetsband under hero: verifikat-typer + tre steg.
   Ljus navy-bakgrund sa bandet far egen tyngd mellan mork hero och vitt innehall. */
.trygghetsband { background: var(--navy-50); border-bottom: 1px solid var(--line); }
.trygghetsband__inner { max-width: 1280px; margin: 0 auto; padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.trygghet { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.trygghet__rubrik { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.trygghet__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.vbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--navy-800); background: var(--navy-50); border: 1px solid var(--navy-100); border-radius: 14px; padding: 4px 11px; }
.steg-mini { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-soft); }
.steg-mini__item { display: inline-flex; align-items: center; gap: 6px; }
.steg-mini__item b { width: 20px; height: 20px; border-radius: 50%; background: var(--navy-800); color: var(--amber-400); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.steg-mini__pil { color: var(--ink-mute); }
.steg-mini__lank { margin-left: 4px; font-weight: 600; font-size: 13px; color: var(--navy-800); text-decoration: none; white-space: nowrap; }
.steg-mini__lank:hover { text-decoration: underline; }

@media (max-width: 960px) {
  .trygghetsband__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}