/* ============================================================
   Tarievenpagina (tarieven.html) — bouwt op DESIGNSYSTEEM v2 in style.css.
   Uitgangspunt: precisie en rust. Geen decoratie; bedragen rechts en tabular.
   ============================================================ */

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

.tarief-wrap { max-width: var(--wide); }
.tarief-meta {
  margin-top: var(--space-s);
  font-size: var(--step--2) !important;
  font-variant-numeric: tabular-nums;
  max-width: none !important;
}
.tarief-section { padding-bottom: var(--space-m); }
.tarief-head { margin-bottom: var(--space-m); }
.tarief-head h2 { margin-top: var(--space-2xs); }
.tarief-head p { color: var(--text-muted); max-width: var(--measure); margin-top: var(--space-2xs); }

/* ── Rekenhulp ── */
.tcalc {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.tcalc__form { padding: var(--space-l); }
.tcalc__title { font-size: var(--step-2); }
.tcalc__sub { color: var(--text-muted); font-size: var(--step--1); margin: var(--space-3xs) 0 var(--space-m); }

.tcalc__group { border: 0; padding: 0; margin: 0 0 var(--space-m); min-width: 0; }
.tcalc__group:last-child { margin-bottom: 0; }
.tcalc__legend {
  padding: 0; margin-bottom: var(--space-2xs);
  font-family: var(--font-head); font-weight: 600; font-size: var(--step--1); color: var(--ink);
}
.tcalc__hint { margin-top: var(--space-2xs); font-size: var(--step--2); color: var(--text-muted); }

/* Segmentknoppen: echte radio's, dus toetsenbord en schermlezer werken vanzelf */
.seg { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.seg--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg__opt { position: relative; display: block; }
.seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg__opt span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 44px; padding: .5rem .95rem;
  border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface);
  font-family: var(--font-head); font-weight: 600; font-size: var(--step--1); line-height: 1.2;
  color: var(--ink);
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.seg__opt:hover span { border-color: rgba(46,125,79,.45); }
.seg__opt input:checked + span { background: rgba(46,125,79,.09); border-color: var(--action); color: #1F5C39; }
.seg__opt input:focus-visible + span { outline: 3px solid var(--green-light); outline-offset: 2px; }

.tcalc__m2 { margin-top: var(--space-s); }
.tcalc__m2 label { display: block; font-size: var(--step--1); font-weight: 600; margin-bottom: var(--space-3xs); }
.tcalc__m2-field { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.tcalc__m2-field span { color: var(--text-muted); }
.tcalc__m2 input {
  width: 8.5rem; min-height: 44px; padding: .5rem .75rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  font-family: inherit; color: var(--ink); font-variant-numeric: tabular-nums;
}
.tcalc__m2 input:focus-visible { outline: 3px solid var(--green-light); outline-offset: 1px; border-color: var(--action); }

.tcalc__result {
  background: var(--ink); color: #fff;
  padding: var(--space-l);
  display: flex; flex-direction: column; gap: var(--space-s);
}
.tcalc__service { font-size: var(--step--2); color: rgba(255,255,255,.72); }
.tcalc__price {
  font-family: var(--font-head); font-weight: 700; line-height: 1;
  font-size: var(--step-5); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-top: var(--space-3xs);
}
.tcalc__vat { font-size: var(--step--1); font-weight: 500; letter-spacing: 0; color: rgba(255,255,255,.72); }
.tcalc__lines { font-size: var(--step--2); border-top: 1px solid rgba(255,255,255,.14); padding-top: var(--space-2xs); }
.tcalc__lines div { display: flex; justify-content: space-between; gap: var(--space-s); padding: .3rem 0; color: rgba(255,255,255,.78); }
.tcalc__lines dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.tcalc__lines .tcalc__total { border-top: 1px solid rgba(255,255,255,.14); margin-top: .2rem; padding-top: .45rem; color: #fff; font-weight: 600; }
.tcalc__note { font-size: var(--step--2); color: rgba(255,255,255,.78); }
.tcalc__status { color: var(--text-muted); }
.tcalc__status[hidden], .tcalc__lines[hidden] { display: none; }
.tcalc__cta { width: 100%; justify-content: center; }
.tcalc__foot { margin-top: auto; }
.tcalc__foot { font-size: var(--step--2); color: rgba(255,255,255,.72); }
.tcalc__foot a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 820px) {
  .tcalc { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tcalc__form, .tcalc__result { padding: var(--space-m); }
  .seg__opt span { padding: .5rem .8rem; }
  .seg--3 .seg__opt span { padding-inline: .4rem; }
}

/* ── Vergelijkingstabel ── */
.ptable-wrap { background: var(--surface); border: 1px solid var(--border); }
.ptable { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.ptable th, .ptable td { padding: .85rem 1.25rem; text-align: left; vertical-align: middle; }
.ptable thead th {
  font-family: var(--font-head); font-weight: 600; font-size: var(--step--2);
  color: var(--text-muted); border-bottom: 1px solid var(--border); line-height: 1.3;
}
.ptable tbody th { font-weight: 500; color: var(--ink); white-space: nowrap; }
.ptable tbody tr + tr th, .ptable tbody tr + tr td { border-top: 1px solid var(--border); }
.ptable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptable tbody td.num { font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.ptable tbody td.ptable__ask { font-family: inherit; font-weight: 400; color: var(--text-muted); }
.ptable .ptable__combi { background: rgba(46,125,79,.07); }
.ptable thead .ptable__combi { color: #1F5C39; }
.ptable__group th {
  font-family: var(--font-head); font-weight: 600; font-size: var(--step--2);
  color: #1F5C39; background: var(--bg); border-top: 1px solid var(--border);
}
.ptable tbody + tbody .ptable__group th { border-top: 1px solid var(--border); }

.ptable-flag {
  display: flex; align-items: center; gap: var(--space-2xs);
  margin-top: var(--space-xs); font-size: var(--step--2); color: var(--text-muted);
}
.ptable-flag__dot { align-self: flex-start; margin-top: .3em; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; background: rgba(46,125,79,.22); }
.ptable-notes { margin: var(--space-xs) 0 var(--space-s); display: grid; gap: var(--space-3xs); }
.ptable-notes li { font-size: var(--step--2); color: var(--text-muted); padding-left: 1rem; position: relative; }
.ptable-notes li::before { content: '·'; position: absolute; left: .25rem; font-weight: 700; }

@media (max-width: 600px) {
  .ptable th, .ptable td { padding: .7rem .5rem; }
  .ptable th:first-child, .ptable td:first-child { padding-left: .75rem; }
  .ptable th:last-child, .ptable td:last-child { padding-right: .75rem; }
  .ptable thead th, .ptable thead th.num { hyphens: manual; white-space: normal; }
  .ptable tbody th { white-space: normal; }
  .ptable tbody td.ptable__ask { white-space: normal; font-size: var(--step--2); }
}

@media (max-width: 360px) {
  .ptable { font-size: var(--step--2); }
  .ptable th, .ptable td { padding-inline: .35rem; }
  .ptable th:first-child, .ptable td:first-child { padding-left: .6rem; }
  .ptable th:last-child, .ptable td:last-child { padding-right: .6rem; }
}

/* Wat zit erin */
.incl-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-m); margin-top: var(--space-l);
}
.incl { border-top: 2px solid var(--border); padding-top: var(--space-s); }
.incl__title { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.incl li { font-size: var(--step--1); color: var(--text-muted); padding: .2rem 0 .2rem 1.35rem; position: relative; }
.incl li::before {
  content: ''; position: absolute; left: .1rem; top: .62em; width: .6rem; height: .32rem;
  border-left: 2px solid var(--action); border-bottom: 2px solid var(--action); transform: rotate(-45deg);
}

.tarief-links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-l); margin-top: var(--space-l); }
.tarief-links .btn--link { min-height: 44px; font-size: var(--step--1); color: #256B42; }

/* ── Toeslagen, kortingen en losse diensten ── */
.extra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--space-s); }
.extra { display: flex; flex-direction: column; padding: var(--space-m); }
.extra__title { font-size: var(--step-1); }
.extra__text { font-size: var(--step--2); color: var(--text-muted); margin: var(--space-3xs) 0 var(--space-xs); }
.extra__text a { color: #256B42; text-decoration: underline; text-underline-offset: 2px; }
.rows { margin-top: var(--space-3xs); }
.rows div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s);
  padding: .45rem 0; border-top: 1px solid rgba(22,24,29,.1); font-size: var(--step--1);
}
.rows dt { color: var(--ink); }
.rows dd {
  margin: 0; white-space: nowrap; text-align: right;
  font-family: var(--font-head); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
}

/* Portefeuilleprijzen: inklapbaar */
.more { margin-top: var(--space-m); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.more summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
  min-height: 48px; padding: .75rem var(--space-m); cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 600; font-size: var(--step--1); color: var(--ink);
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after {
  content: ''; width: .55rem; height: .55rem; flex-shrink: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 150ms ease;
}
.more[open] summary::after { transform: rotate(-135deg); }
.more summary:focus-visible { outline: 3px solid var(--green-light); outline-offset: 2px; border-radius: var(--radius); }
.more > :not(summary) { margin-inline: var(--space-m); }
.more .ptable-wrap { border-radius: var(--radius-sm); }
.more__note { font-size: var(--step--2); color: var(--text-muted); margin-block: var(--space-xs); }
.more .btn { margin-bottom: var(--space-m); }
@media (max-width: 600px) {
  .more > :not(summary) { margin-inline: var(--space-s); }
  .more summary { padding-inline: var(--space-s); }
}

/* ── Goed om te weten ── */
.terms__title { font-size: var(--step-2); margin-bottom: var(--space-s); }
.terms__list { display: grid; gap: var(--space-2xs); }
.terms__list li { font-size: var(--step--1); color: var(--text-muted); padding-left: 1.1rem; position: relative; max-width: var(--measure); }
.terms__list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--action); }
.terms__list strong { color: var(--ink); }
.terms__foot { margin-top: var(--space-s); font-size: var(--step--2); color: var(--text-muted); }
.terms__foot a { color: #256B42; text-decoration: underline; text-underline-offset: 2px; }

/* ── FAQ ── */
.tarief-faq { max-width: 760px; }
.tarief-faq .faq-trigger { min-height: 48px; }
.tarief-faq .faq-body p { font-size: var(--step--1); }
.tarief-faq .tarief-links { margin-top: var(--space-m); }

@media (prefers-reduced-motion: reduce) {
  .seg__opt span, .more summary::after { transition: none; }
}

/* Smalle telefoons: drie dienstknoppen onder elkaar i.p.v. krap naast elkaar */
@media (max-width: 420px) {
  .seg--3 { grid-template-columns: 1fr; display: grid; }
}