/* Tryggly — Villkorskollen preview widget. Injected on /villkorskollen. */
.tg-vk {
  max-width: 52rem;
  margin: 1.5rem auto 0;
  background: var(--dw-panel);
  border: 1px solid var(--dw-line);
  border-radius: var(--dw-r-lg, 24px);
  box-shadow: var(--dw-shadow-soft);
  padding: clamp(1.3rem, 3.5vw, 2rem);
}
.tg-vk__banner {
  margin: 0 0 1.2rem;
  padding: .7rem .9rem;
  font-size: .85rem;
  color: var(--dw-warning, #8A4B10);
  background: color-mix(in srgb, var(--tg-apricot, #F2BD99) 22%, var(--dw-panel));
  border: 1px solid color-mix(in srgb, var(--dw-warning, #8A4B10) 25%, transparent);
  border-radius: var(--dw-r-sm, 10px);
}
.tg-vk__controls { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem 1rem; }
.tg-vk__ctrl { display: grid; gap: .35rem; flex: 1 1 12rem; }
.tg-vk__ctrl > span { font-size: .82rem; font-weight: 600; color: var(--dw-ink); }
.tg-vk__vs { padding-bottom: .7rem; color: var(--dw-dis); font-size: .85rem; }
.tg-vk__select {
  font: inherit; font-size: 1rem; color: var(--dw-ink);
  background: var(--dw-deep); border: 1px solid var(--dw-line);
  border-radius: var(--dw-r-sm, 10px); padding: .65em .8em; width: 100%;
}
.tg-vk__select:focus-visible { outline: 2px solid var(--dw-glow); outline-offset: 2px; }

.tg-vk__out { margin-top: 1.3rem; }
.tg-vk__mismatch {
  margin: 0 0 1rem; padding: .7rem .9rem; font-size: .9rem;
  color: var(--dw-warning, #8A4B10);
  background: color-mix(in srgb, var(--dw-warning, #8A4B10) 8%, var(--dw-panel));
  border-radius: var(--dw-r-sm, 10px);
}
.tg-vk__stamps { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1rem; }
@media (max-width: 560px) { .tg-vk__stamps { grid-template-columns: 1fr; } }
.tg-vk__stamp { display: grid; gap: .15rem; padding: .6rem .75rem; border: 1px solid var(--dw-line); border-radius: var(--dw-r-sm, 10px); background: color-mix(in srgb, var(--tg-sage, #E8EFE6) 40%, var(--dw-panel)); }
.tg-vk__stamp strong { font-size: .92rem; color: var(--dw-ink); }
.tg-vk__stamp span { font-size: .76rem; color: var(--dw-dis); }
.tg-vk__cat { font-family: var(--dw-mono); letter-spacing: .04em; }

.tg-vk__scroll { overflow-x: auto; }
.tg-vk__table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tg-vk__table th, .tg-vk__table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--dw-line); vertical-align: top; }
.tg-vk__table thead th { font-family: var(--dw-display); font-size: .82rem; color: var(--dw-ember); }
.tg-vk__table tbody th { font-weight: 600; color: var(--dw-ink); }
.tg-vk__table td { color: var(--dw-ink); font-variant-numeric: tabular-nums; }
.tg-vk__table tr.is-diff td, .tg-vk__table tr.is-diff th { background: color-mix(in srgb, var(--tg-apricot, #F2BD99) 12%, transparent); }
.tg-vk__badge { display: inline-block; margin-left: .5em; padding: .05em .5em; font-family: var(--dw-mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dw-warning, #8A4B10); background: color-mix(in srgb, var(--tg-apricot, #F2BD99) 30%, transparent); border-radius: 999px; vertical-align: middle; }
.tg-vk__unknown { color: var(--dw-dis); font-style: italic; }

.tg-vk__note { margin: 1rem 0 0; font-size: .84rem; color: var(--dw-dis); }
.tg-vk__quote { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--dw-line); display: grid; gap: .2rem; }
.tg-vk__quote span { font-size: .88rem; color: var(--dw-ink); }
.tg-vk__quote-note { color: var(--dw-dis); font-size: .8rem; }