/* Rekenhulp "Vergoeding zorgverzekeraar". Alles valt onder .dvz zodat het thema er niet doorheen loopt.
   Kleuren zijn aan te passen via de variabelen hieronder. Lettertype komt van het thema. */
.dvz {
  --dvz-accent: #5C1590;
  --dvz-accent-ink: #FFFFFF;
  --dvz-tint: #F3ECF8;
  --dvz-ground: #F7F5F9;
  --dvz-surface: #FFFFFF;
  --dvz-ink: #1F1A24;
  --dvz-ink-2: #5E5866;
  --dvz-line: #DDD6E3;
  --dvz-focus: #1D5FC4;
  --dvz-warn: #8A4B00;
  --dvz-warn-bg: #FBF0DD;
  --dvz-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  color: var(--dvz-ink);
  /* Geen rem: Bootstrap 3 zet html op 10px. */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  max-width: 900px;
}
.dvz, .dvz *, .dvz *::before, .dvz *::after { box-sizing: border-box; }

/* Thema-stijlen neutraliseren binnen het blok.
   Lopende tekst staat in div, niet in p: het thema stijlt #wrapper p, en een id wint altijd van een class.
   Koppen volgen om dezelfde reden het thema (#wrapper h1, #wrapper h3). */
.dvz h1, .dvz h3, .dvz ul, .dvz dl, .dvz dd, .dvz dt { margin: 0; padding: 0; }
.dvz h1, .dvz h3 { text-transform: none; letter-spacing: normal; }
.dvz table { margin: 0; width: 100%; border-collapse: collapse; background: none; border: 0; }
.dvz tr { background: none; border: 0; }
.dvz th, .dvz td { background: none; border: 0; box-shadow: none; }
.dvz label { display: block; margin: 0; font-weight: 700; font-size: inherit; text-transform: none; letter-spacing: normal; }
.dvz input, .dvz select, .dvz button { font: inherit; letter-spacing: normal; text-transform: none; box-shadow: none; margin: 0; }
.dvz input, .dvz select { height: auto; max-width: 100%; color: var(--dvz-ink); }

.dvz-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Intro */
.dvz-intro { display: grid; gap: 10px; }
.dvz .dvz-h1 { line-height: 1.2; text-wrap: balance; }
.dvz .dvz-h2 { line-height: 1.25; text-wrap: balance; }
.dvz-lead { font-size: 1.1em; max-width: 62ch; }
.dvz-muted { color: var(--dvz-ink-2); max-width: 62ch; }

.dvz-card {
  background: var(--dvz-surface);
  border: 1px solid var(--dvz-line);
  border-radius: 14px;
  padding: 24px;
  display: grid;
  gap: 18px;
  min-width: 0;
}
@media (max-width: 520px) { .dvz-card { padding: 20px 16px; } }

.dvz-begrippen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px 24px; }
.dvz-begrippen dl { display: grid; gap: 4px; align-content: start; }
.dvz-begrippen dt { font-weight: 700; }
.dvz-begrippen dd { color: var(--dvz-ink-2); font-size: .94em; }

/* Verzekering */
.dvz-polis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px 16px; }
.dvz-veld { display: grid; gap: 6px; }
.dvz-opt { font-weight: 400; color: var(--dvz-ink-2); }
.dvz .dvz-veld input {
  width: 100%;
  border: 1.5px solid var(--dvz-line); border-radius: 8px; background: var(--dvz-surface);
  padding: 9px 10px; min-width: 0;
}

/* Tabel */
.dvz-table-wrap { border: 1px solid var(--dvz-line); border-radius: 10px; overflow-x: auto; container: dvztabel / inline-size; }
.dvz-table { font-variant-numeric: tabular-nums; }
.dvz .dvz-table th, .dvz .dvz-table td { padding: 10px 8px; text-align: left; vertical-align: middle; background: transparent; border: 0; border-bottom: 1px solid var(--dvz-line); color: var(--dvz-ink); }
.dvz .dvz-table th:first-child, .dvz .dvz-table td:first-child { padding-left: 14px; }
.dvz .dvz-table th:last-child, .dvz .dvz-table td:last-child { padding-right: 14px; }
.dvz .dvz-table tbody tr:last-child td { border-bottom: 0; }
.dvz .dvz-table thead th {
  font-size: .75em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dvz-ink-2); background: var(--dvz-ground); vertical-align: bottom;
}
.dvz .dvz-table .dvz-num { text-align: right; white-space: nowrap; }
.dvz .dvz-table tr.dvz-groep th {
  background: var(--dvz-tint); padding-top: 12px; padding-bottom: 12px;
  font-size: 1em; letter-spacing: 0; text-transform: none; color: var(--dvz-ink); font-weight: 400;
}
.dvz-groep-naam { display: block; font-weight: 700; }
.dvz-groep-uitleg { display: block; font-size: .88em; color: var(--dvz-ink-2); max-width: 70ch; }
.dvz-soort { font-weight: 600; }
.dvz-code { font-family: var(--dvz-mono); font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.dvz .dvz-table td.dvz-c-verg { width: 150px; }
.dvz .dvz-table td.dvz-pct { width: 78px; font-weight: 700; }
.dvz .dvz-table td.dvz-pct.dvz-leeg { color: var(--dvz-ink-2); font-weight: 400; }
.dvz .dvz-in-label { display: none; font-size: .82em; margin-bottom: 4px; }
.dvz-row-msg { display: block; font-size: .82em; color: var(--dvz-warn); margin-top: 4px; }
.dvz-row-msg:empty { display: none; }

.dvz select {
  width: auto;
  border: 1.5px solid var(--dvz-line); border-radius: 8px; background-color: var(--dvz-surface);
  padding: 7px 8px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.dvz-box {
  display: flex; align-items: center;
  border: 1.5px solid var(--dvz-line); border-radius: 8px; background: var(--dvz-surface);
}
.dvz-box.dvz-fout-veld { border-color: var(--dvz-warn); }
.dvz-cur { padding-left: 10px; color: var(--dvz-ink-2); }
.dvz .dvz-box input {
  flex: 1; width: 100%; min-width: 0;
  border: 0; background: transparent; border-radius: 0;
  font-variant-numeric: tabular-nums;
  padding: 8px 10px; text-align: right;
}
.dvz input::placeholder { color: var(--dvz-ink-2); opacity: .7; }

/* Focus */
.dvz select:focus-visible,
.dvz .dvz-veld input:focus-visible { outline: 3px solid var(--dvz-focus); outline-offset: 1px; border-color: var(--dvz-accent); }
.dvz .dvz-box:focus-within { border-color: var(--dvz-accent); outline: 3px solid var(--dvz-focus); outline-offset: 1px; }
.dvz .dvz-box input:focus { outline: none; }

@container dvztabel (max-width: 700px) {
  .dvz .dvz-table, .dvz .dvz-table thead, .dvz .dvz-table tbody, .dvz .dvz-table tr, .dvz .dvz-table th, .dvz .dvz-table td { display: block; }
  .dvz .dvz-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dvz .dvz-table tr.dvz-groep th { padding: 14px; }
  .dvz .dvz-table tbody tr.dvz-regel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "soort code" "duur tarief" "verg verg" "pct verschil";
    gap: 8px 12px;
    padding: 14px;
    border-bottom: 1px solid var(--dvz-line);
  }
  .dvz .dvz-table tbody tr.dvz-regel td { padding: 0; border: 0; width: auto; }
  .dvz .dvz-table .dvz-c-soort { grid-area: soort; }
  .dvz .dvz-table .dvz-c-code { grid-area: code; text-align: right; }
  .dvz .dvz-table .dvz-c-duur { grid-area: duur; }
  .dvz .dvz-table .dvz-c-tarief { grid-area: tarief; align-self: end; padding-bottom: 8px; }
  .dvz .dvz-table .dvz-c-verg { grid-area: verg; }
  .dvz .dvz-table .dvz-c-vergoed { grid-area: pct; text-align: left; }
  .dvz .dvz-table .dvz-c-verschil { grid-area: verschil; }
  .dvz .dvz-in-label { display: block; }
  .dvz .dvz-table td[data-label]::before { content: attr(data-label); display: block; font-size: .82em; font-weight: 700; color: var(--dvz-ink-2); }
}

/* Totaal */
.dvz-cijfers { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.dvz-cijfer { display: grid; gap: 2px; }
.dvz-cijfer-label { font-size: .88em; color: var(--dvz-ink-2); }
.dvz-cijfer-waarde { font-size: 2.5em; font-weight: 700; line-height: 1.1; color: var(--dvz-accent); font-variant-numeric: tabular-nums; }
.dvz-cijfer-waarde.dvz-zelf { color: var(--dvz-ink); }
.dvz-uitleg { font-size: .88em; color: var(--dvz-ink-2); max-width: 62ch; }
.dvz-er { padding: 12px 14px; border-radius: 8px; background: var(--dvz-ground); font-size: .94em; max-width: 70ch; }
.dvz-status { font-size: .88em; color: var(--dvz-ink-2); }
.dvz-status:empty, .dvz-uitleg:empty, .dvz-pdf-msg:empty { display: none; }
.dvz-status.dvz-warn { color: var(--dvz-warn); background: var(--dvz-warn-bg); padding: 10px 12px; border-radius: 8px; }

.dvz-acties { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.dvz .dvz-btn {
  font-weight: 700; font-size: 1em; line-height: 1.3;
  color: var(--dvz-accent-ink); background: var(--dvz-accent);
  border: 0; border-radius: 10px; padding: 12px 18px; cursor: pointer;
}
.dvz .dvz-btn:hover { filter: brightness(1.12); }
.dvz .dvz-btn:disabled { opacity: .6; cursor: progress; }
.dvz .dvz-link {
  background: none; border: 0; padding: 0; color: var(--dvz-accent);
  font-size: .88em; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.dvz .dvz-btn:focus-visible, .dvz .dvz-link:focus-visible { outline: 3px solid var(--dvz-focus); outline-offset: 2px; }
.dvz-pdf-msg { font-size: .88em; }
.dvz-pdf-msg.dvz-warn { color: var(--dvz-warn); }

.dvz-notes { font-size: .88em; color: var(--dvz-ink-2); max-width: 66ch; display: grid; gap: 4px; padding-left: 20px !important; }
.dvz-fout { padding: 12px 14px; border-radius: 8px; background: var(--dvz-warn-bg); color: var(--dvz-warn); }