/* =============================================================
   Thuisbatterij.nl — Accu Calculator
   Alle styling staat expliciet, zodat het thema er niet doorheen komt.
   Huisstijl: zwarte tekst, groen #00A845 voor keuzes, minimaal 600 gewicht.
   ============================================================= */

.tbc-app {
  --tbc-groen: #00A845;
  --tbc-groen-donker: #018038;
  --tbc-groen-licht: #7FD98F;
  --tbc-groen-vlak: #EDF8F1;
  --tbc-groen-ring: rgba(0,168,69,.16);
  --tbc-zwart: #0B0D12;
  --tbc-tekst: #1C2430;
  --tbc-grijs: #5A6472;
  --tbc-lijn: #E2E6EC;
  --tbc-vlak: #F6F8FA;
  --tbc-veldvlak: #F7F9FC;
  --tbc-wit: #FFFFFF;
  /* Geen rood in de huisstijl: waarschuwingen krijgen het oranje, negatieve
     meldingen het donkergrijs. */
  --tbc-rood: #454645;
  --tbc-oranje: #97600A;
  --tbc-radius: 14px;
  --tbc-schaduw: 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05);
  --tbc-schaduw-klein: 0 1px 2px rgba(16,24,40,.05);

  display: block;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--tbc-tekst) !important;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  container-type: inline-size;
}
.tbc-app *, .tbc-app *::before, .tbc-app *::after { box-sizing: border-box; }


/* ============================================================
   Basis
   ============================================================ */
.tbc-app h2, .tbc-app h3, .tbc-app h4, .tbc-app h5 { color: var(--tbc-zwart) !important; }
.tbc-app p, .tbc-app li, .tbc-app td, .tbc-app th, .tbc-app label, .tbc-app span,
.tbc-app b, .tbc-app summary, .tbc-app legend, .tbc-app div { color: var(--tbc-tekst) !important; }
.tbc-hint, .tbc-toelicht, .tbc-vak-voet, .tbc-optie-spec, .tbc-peildatum, .tbc-disclaimer,
.tbc-bron-gebruik, .tbc-sub { color: var(--tbc-grijs) !important; font-weight: 500; }

/* ---------- kop ---------- */
.tbc-kop { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 22px; }
.tbc-kop h1, .tbc-kop h2 { font-size: 27px; font-weight: 700; margin: 0 0 6px; line-height: 1.2; letter-spacing: -0.01em; }
.tbc-intro { margin: 0; max-width: 60ch; font-size: 15px; }

.tbc-app button.tbc-schakel {
  background: var(--tbc-groen-vlak) !important; background-image: none !important;
  border: 1px solid var(--tbc-lijn); border-radius: 999px;
  padding: 10px 18px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap;
  color: var(--tbc-tekst) !important; box-shadow: var(--tbc-schaduw-klein);
}
.tbc-schakel:hover { border-color: var(--tbc-groen); color: var(--tbc-groen-donker) !important; }

/* ---------- lay-out ---------- */
/* Beide panelen even hoog, zodat de calculator als één blok oogt en niet
   als een lange linkerkolom naast een korte rechter. */
.tbc-kolommen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; align-items: stretch; }

/* Op een breed scherm staan de panelen naast elkaar en is er geen stappen-
   navigatie nodig. Die staat wel in de pagina, maar blijft hier verborgen. */
.tbc-stappen, .tbc-mini, .tbc-stapverder, .tbc-stapterug, .tbc-modusonder { display: none; }

/* ---------- smal scherm: twee stappen in plaats van alles onder elkaar ---------- */
@container (max-width: 900px) {
  .tbc-kolommen { grid-template-columns: 1fr; }

  .tbc-stappen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .tbc-stapknop {
    display: flex; align-items: center; gap: 8px; text-align: left;
    background: var(--tbc-wit); border: 1px solid var(--tbc-lijn); border-radius: 10px;
    padding: 10px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    color: var(--tbc-grijs) !important;
  }
  .tbc-app button.tbc-stapknop {
    background-image: none !important; background-color: var(--tbc-wit) !important;
    text-transform: none; letter-spacing: normal; box-shadow: none;
  }
  .tbc-stapnr {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 22px; height: 22px; border-radius: 50%; font-size: 12px;
    background: var(--tbc-vlak) !important; background-image: none !important;
    color: var(--tbc-grijs) !important;
  }
  .tbc-app button.tbc-stapknop.is-actief {
    border-color: var(--tbc-groen); color: var(--tbc-tekst) !important;
    background-color: var(--tbc-groen-vlak) !important;
  }
  .tbc-stapknop.is-actief .tbc-stapnr { background: var(--tbc-groen) !important; color: var(--tbc-wit) !important; }
  .tbc-stapnaam { min-width: 0; }

  /* De compacte uitkomstbalk staat niet meer in de weg: bij stap 1 leidt hij af
     van het invullen en bij stap 2 herhaalt hij letterlijk het paneel eronder.
     De opmaak blijft staan voor het geval we hem ooit weer aanzetten. */
  .tbc-mini { display: none; }
  .tbc-mini--aan {
    display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 12px;
    padding: 10px 14px; border-radius: 10px; background: var(--tbc-groen-vlak);
    font-size: 13px;
  }
  .tbc-mini b { font-size: 15px; font-weight: 700; }

  /* Op een smal scherm telt elke regel boven de eerste vraag. De inleiding en
     de knop naar de uitgebreide instellingen staan de invoer in de weg; de
     knop verhuist naar onderaan stap 1, de inleiding vervalt. */
  .tbc-intro { display: none; }
  .tbc-kop [data-slot="modusknop"] { display: none; }
  .tbc-modusonder { display: block; margin-top: 10px; }
  .tbc-modusonder .tbc-schakel { width: 100%; padding: 12px 16px; }

  [data-stap="1"] .tbc-paneel--uit { display: none; }
  [data-stap="2"] .tbc-paneel--invoer { display: none; }

  .tbc-stapverder, .tbc-stapterug {
    display: block; width: 100%; font: inherit; cursor: pointer; border-radius: 10px;
  }
  .tbc-stapverder {
    margin-top: 18px; padding: 13px 16px; font-weight: 700; font-size: 15px;
    background: var(--tbc-groen); border: 1px solid var(--tbc-groen); color: var(--tbc-wit) !important;
  }
  .tbc-app button.tbc-stapverder {
    background-image: none !important; background-color: var(--tbc-groen) !important;
    text-transform: none; letter-spacing: normal;
  }
  .tbc-stapterug {
    margin: -6px 0 14px; padding: 0; text-align: left; background: none; border: none;
    font-size: 13px; font-weight: 600; color: var(--tbc-groen-donker) !important;
  }
}

.tbc-paneel {
  background: var(--tbc-wit); border: 1px solid var(--tbc-lijn);
  border-radius: var(--tbc-radius); padding: 22px; box-shadow: var(--tbc-schaduw);
}
.tbc-paneelkop {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
  color: var(--tbc-grijs) !important;
}
.tbc-app .tbc-paneelkop span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--tbc-groen-vlak) !important; background-image: none !important;
  color: var(--tbc-groen-donker) !important; font-size: 12px; letter-spacing: 0;
}

/* Themas zetten soms een eigen achtergrond of kleur op spans, knoppen en
   labels. Onze eigen onderdelen leggen die daarom expliciet vast; anders
   verschijnt er ineens een kleur die niet in de huisstijl voorkomt. */
.tbc-app .tbc-vak-label, .tbc-app .tbc-vak-waarde, .tbc-app .tbc-vak-voet,
.tbc-app .tbc-stapper-waarde, .tbc-app .tbc-optie-spec, .tbc-app .tbc-hint,
.tbc-app .tbc-optie-prijs span, .tbc-app .tbc-beoordeling, .tbc-app .tbc-sterren,
.tbc-app .tbc-sterren-leeg, .tbc-app .tbc-sterren-vol, .tbc-app .tbc-sterren-aantal {
  background: transparent !important; background-image: none !important;
}

/* ---------- velden ---------- */
.tbc-groep { border: none; border-top: 1px solid var(--tbc-lijn); padding: 18px 0 2px; margin: 0 0 6px; }
.tbc-groep:first-child { border-top: none; padding-top: 0; }
.tbc-groep legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; color: var(--tbc-grijs) !important; padding: 0 8px 0 0; }

.tbc-veld { margin-bottom: 18px; }
.tbc-veld:last-child { margin-bottom: 0; }
.tbc-veld label, .tbc-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; }

.tbc-invoerrij {
  display: flex; align-items: stretch; background: var(--tbc-veldvlak);
  border: 1px solid var(--tbc-lijn); border-radius: 10px; overflow: hidden;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.tbc-invoerrij:focus-within { border-color: var(--tbc-groen); box-shadow: 0 0 0 3px var(--tbc-groen-ring); background: var(--tbc-wit); }
.tbc-affix { display: flex; align-items: center; padding: 0 13px; font-size: 14px; font-weight: 500; color: var(--tbc-grijs) !important; }
.tbc-invoerrij .tbc-affix:first-child { border-right: 1px solid var(--tbc-lijn); }
.tbc-invoerrij .tbc-affix:last-child { border-left: 1px solid var(--tbc-lijn); }

.tbc-app input.tbc-input, .tbc-app select.tbc-input {
  width: 100%; border: none; outline: none; background: transparent;
  padding: 12px 13px; font: inherit; font-weight: 600; font-size: 16px;
  color: var(--tbc-tekst) !important; min-width: 0; border-radius: 0;
}
.tbc-app select.tbc-input {
  border: 1px solid var(--tbc-lijn); border-radius: 10px; background: var(--tbc-veldvlak);
  padding: 12px 13px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23566074' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.tbc-app select.tbc-input:focus { border-color: var(--tbc-groen); box-shadow: 0 0 0 3px var(--tbc-groen-ring); }
.tbc-hint { font-size: 13px; margin: 7px 0 0; line-height: 1.45; }

/* ---------- keuzeknoppen ---------- */
.tbc-keuzegroep { display: flex; flex-wrap: wrap; gap: 8px; }
.tbc-keuze {
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  background: var(--tbc-wit); color: var(--tbc-tekst) !important;
  border: 1px solid var(--tbc-lijn); border-radius: 9px; padding: 10px 14px;
  transition: border-color .12s ease, background .12s ease;
}
.tbc-app button.tbc-keuze, .tbc-app button.tbc-stap, .tbc-app button.tbc-info,
.tbc-app button.tbc-schakel {
  background-image: none !important; text-transform: none; letter-spacing: normal; box-shadow: none;
}
.tbc-keuze:hover { border-color: var(--tbc-groen); }
.tbc-app button.tbc-keuze:hover:not(.is-actief), .tbc-app button.tbc-keuze:focus:not(.is-actief) {
  background: var(--tbc-wit) !important; color: var(--tbc-tekst) !important;
}
.tbc-app button.tbc-keuze.is-actief, .tbc-app button.tbc-keuze.is-actief:hover,
.tbc-app button.tbc-keuze.is-actief:focus {
  background: var(--tbc-groen) !important; color: var(--tbc-wit) !important;
}
.tbc-keuze.is-actief { background: var(--tbc-groen); border-color: var(--tbc-groen); color: var(--tbc-wit) !important; }
.tbc-keuze--klein { font-size: 13px; padding: 9px 13px; }
.tbc-keuze:focus-visible, .tbc-schakel:focus-visible, .tbc-schuif:focus-visible,
.tbc-stap:focus-visible, .tbc-info:focus-visible, .tbc-app summary:focus-visible,
.tbc-link:focus-visible, .tbc-bestel:focus-visible { outline: 2px solid var(--tbc-groen); outline-offset: 2px; }

/* ---------- schuifknop ---------- */
.tbc-schuif, .tbc-app button.tbc-schuif {
  background: var(--tbc-veldvlak) !important; background-image: none !important;
  color: var(--tbc-tekst) !important; text-transform: none; letter-spacing: normal;
}
.tbc-schuif {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--tbc-veldvlak); border: 1px solid var(--tbc-lijn); border-radius: 999px;
  padding: 6px 16px; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px;
  color: var(--tbc-tekst) !important;
}
.tbc-schuif:hover, .tbc-schuif:focus, .tbc-schuif:active, .tbc-schuif[aria-checked] {
  background: var(--tbc-veldvlak) !important; background-image: none !important;
  color: var(--tbc-tekst) !important; box-shadow: none;
}
.tbc-schuif:hover { border-color: var(--tbc-groen) !important; }
.tbc-schuif-tekst { white-space: nowrap; }
.tbc-schuif-baan { position: relative; width: 52px; height: 28px; flex: none; border-radius: 999px; background: var(--tbc-wit); border: 1px solid var(--tbc-lijn); }
.tbc-schuif-knop { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--tbc-groen); transition: left .16s ease; }
.tbc-schuif.is-aan .tbc-schuif-knop { left: 27px; }
@media (prefers-reduced-motion: reduce) { .tbc-schuif-knop { transition: none; } }

/* ---------- uitkomst ---------- */
/* Het vak met de ring krijgt de ruimte, zodat de ring en de legenda naast
   elkaar passen en het blok laag blijft: de productkaarten komen dan eerder
   in beeld. Het bedrag rechts heeft die breedte niet nodig. */
.tbc-uitkomstrij { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; }
@container (max-width: 560px) { .tbc-uitkomstrij { grid-template-columns: 1fr; } }
.tbc-vak { border: 1px solid var(--tbc-lijn); border-radius: 12px; padding: 16px 18px; background: var(--tbc-wit); }
.tbc-vak--hoofd { border-color: var(--tbc-groen); background: var(--tbc-groen-vlak); }
.tbc-vak-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tbc-grijs) !important; }
.tbc-vak-waarde { display: block; font-size: 32px; font-weight: 700; line-height: 1.1; margin: 6px 0 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tbc-vak-voet { display: block; font-size: 13px; font-weight: 600; }
/* Staafjes in het zelfvoorzieningsvak: per maat het deel van je zonnestroom
   dat thuis blijft. Ze lopen op met de capaciteit en vlakken vanzelf af. */
/* Ring met de verdeling van je zonnestroom, in het hoofdvak. Naast elkaar
   zolang het past, daaronder zodra het vak smal wordt. */
.tbc-ring { display: flex; align-items: center; gap: 14px; margin: 10px 0 12px; flex-wrap: wrap; }
.tbc-ring svg { width: 108px; height: 108px; flex: 0 0 auto; }
.tbc-ring-midden { font-size: 19px; font-weight: 700; fill: #1C2430; }
.tbc-ring-onder { font-size: 7.5px; font-weight: 600; fill: #454645; letter-spacing: .02em; }
.tbc-ringlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; min-width: 150px; flex: 1 1 150px; }
.tbc-ringlijst li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; line-height: 1.25; }
.tbc-ringlijst li span { flex: 1 1 auto; }
.tbc-ringlijst li b { font-weight: 700; font-variant-numeric: tabular-nums; }
.tbc-oordeel-goed   { color: var(--tbc-groen-donker) !important; }
.tbc-oordeel-goed::before   { content: "\2713\00a0"; }
.tbc-oordeel-matig  { color: var(--tbc-grijs) !important; }
.tbc-oordeel-matig::before  { content: "\2022\00a0"; }
.tbc-oordeel-slecht { color: var(--tbc-rood) !important; }
.tbc-oordeel-slecht::before { content: "\26a0\00a0"; }

/* Ruimte boven en onder, anders plakt de kop tegen de rand en tegen de
   vakken eronder. */
/* Onder de kaarten: links uitgelijnd en niet breder dan comfortabel leest. */
.tbc-oordeel--onder { margin: 20px 0 0; max-width: 640px; }
.tbc-oordeel { border-radius: 12px; padding: 20px 22px; border: 1px solid; margin: 2px 0 16px; }
.tbc-oordeel h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.tbc-oordeel p { margin: 0; font-size: 14px; }
.tbc-oordeel--goed    { background: var(--tbc-groen-vlak); border-color: var(--tbc-groen); }
.tbc-oordeel--matig   { background: var(--tbc-vlak); border-color: var(--tbc-lijn); }
.tbc-oordeel--slecht  { background: var(--tbc-vlak); border-color: var(--tbc-grijs); }
.tbc-oordeel--neutraal{ background: var(--tbc-vlak); border-color: var(--tbc-lijn); }

/* info-icoon */
.tbc-app button.tbc-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-left: 6px; padding: 0; vertical-align: -2px;
  border: 1px solid var(--tbc-lijn); border-radius: 50%;
  background: var(--tbc-groen-vlak) !important; background-image: none !important;
  font: inherit; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
  color: var(--tbc-grijs) !important; font-style: normal; text-transform: none; letter-spacing: 0;
}
.tbc-info:hover { border-color: var(--tbc-groen); color: var(--tbc-groen-donker) !important; }
.tbc-info-wrap { position: relative; display: inline-block; }
.tbc-info-tekst {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  z-index: 30; width: max-content; max-width: 300px;
  padding: 13px 15px; border-radius: 10px;
  background: var(--tbc-wit); border: 1px solid var(--tbc-lijn);
  box-shadow: 0 4px 6px rgba(16,24,40,.04), 0 12px 28px rgba(16,24,40,.14);
  font-size: 13px; font-weight: 500; line-height: 1.55; white-space: normal;
  text-transform: none; letter-spacing: 0; color: var(--tbc-tekst) !important;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease;
}
.tbc-info-tekst::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -7px;
  border: 7px solid transparent; border-top-color: var(--tbc-wit);
  filter: drop-shadow(0 1px 0 var(--tbc-lijn));
}
.tbc-info-wrap.is-open .tbc-info-tekst,
.tbc-info-wrap:hover .tbc-info-tekst,
.tbc-info:focus-visible + .tbc-info-tekst {
  opacity: 1; visibility: visible; pointer-events: auto;
}
@media (max-width: 600px) {
  .tbc-info-tekst { left: auto; right: -8px; transform: none; max-width: 260px; }
  .tbc-info-tekst::after { left: auto; right: 12px; margin-left: 0; }
}

/* ---------- productkaarten ---------- */
.tbc-opties { margin-top: 26px; }
.tbc-opties h4 { font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.tbc-optielijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@container (max-width: 680px) { .tbc-optielijst { grid-template-columns: 1fr; } }
/* ÉÉN KAART — op een productpagina.
   Daar valt niets te kiezen: er is één model en de bezoeker staat er al op.
   Een smalle, hoge kaart met een groene "gekozen"-rand suggereert een keuze
   die er niet is, en laat de halve kolom leeg. Daarom hier een liggende
   indeling: foto links, gegevens rechts, en een gewone witte kaart met de
   bestelknop als enige groene element. */
.tbc-optielijst.is-enkel { grid-template-columns: minmax(0, 560px); }
.tbc-optielijst.is-enkel .tbc-optie { cursor: default; }
.tbc-optielijst.is-enkel .tbc-optie.is-gekozen {
  border-color: var(--tbc-lijn); border-width: 1px; padding: 16px;
  background: var(--tbc-wit); box-shadow: var(--tbc-schaduw-klein);
}
.tbc-optielijst.is-enkel .tbc-optie:hover { border-color: var(--tbc-lijn); }
.tbc-optielijst.is-enkel .tbc-optie--metfoto { flex-direction: row; gap: 18px; align-items: flex-start; }
.tbc-optielijst.is-enkel .tbc-optie--metfoto .tbc-optie-foto {
  position: static; flex: 0 0 104px; width: 104px; height: 104px; border-radius: 10px;
}
.tbc-optielijst.is-enkel .tbc-optie-labels,
.tbc-optielijst.is-enkel .tbc-optie h5 { padding-right: 0; }
@container (max-width: 420px) {
  .tbc-optielijst.is-enkel .tbc-optie--metfoto { gap: 12px; }
  .tbc-optielijst.is-enkel .tbc-optie--metfoto .tbc-optie-foto { flex-basis: 72px; width: 72px; height: 72px; }
}
.tbc-optie {
  position: relative;
  border: 1px solid var(--tbc-lijn); border-radius: 12px; padding: 16px; background: var(--tbc-wit);
  display: flex; flex-direction: column; gap: 3px; box-shadow: var(--tbc-schaduw-klein);
}
/* Alles behalve de foto zit in dit blok. In de rij van drie kaarten vult het
   de hele kaart (zodat de knoppen onderaan gelijk uitkomen); op een
   productpagina staat het naast de foto. */
.tbc-optie-body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
/* Maat, prijs en beoordeling schuiven naar de onderkant van de kaart, zodat
   drie kaarten naast elkaar op dezelfde regels uitkomen ongeacht de lengte van
   de productnaam. */
.tbc-optie-onder { margin-top: auto; padding-top: 6px; }
.tbc-optielijst.is-enkel .tbc-optie-onder { margin-top: 8px; }

/* Beoordeling: vijf sterren met het gemiddelde ingekleurd. */
.tbc-beoordeling { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; text-decoration: none; }
.tbc-optie-prijs .tbc-beoordeling { margin-left: 0; }
/* De basisregels van de plugin kleuren élke span in de tekstkleur; deze
   selectors zijn daarom bewust specifieker. */
.tbc-app .tbc-sterren { position: relative; display: inline-block; line-height: 1; font-size: 14px; letter-spacing: 1px; white-space: nowrap; }
.tbc-app .tbc-sterren-leeg { display: block; color: #D5DBE2 !important; }
.tbc-app .tbc-sterren-vol {
  position: absolute; left: 0; top: 0; display: block; overflow: hidden; white-space: nowrap;
  color: #ECAA15 !important;
}
.tbc-app .tbc-sterren-aantal { display: inline; font-size: 12px; font-weight: 600; color: var(--tbc-grijs) !important; }
.tbc-app .tbc-beoordeling--leeg { font-size: 12px; font-weight: 500; color: var(--tbc-grijs) !important; }
.tbc-beoordeling--link:hover .tbc-sterren-aantal { color: var(--tbc-groen-donker) !important; text-decoration: underline; }
/* Productfoto rechtsboven. De labels en de naam houden ruimte vrij zodat er
   niets onder de foto doorloopt, ook niet bij een lange productnaam. */
.tbc-optie-foto {
  position: absolute; top: 14px; right: 14px;
  width: 52px; height: 52px; object-fit: contain;
  border-radius: 8px; background: transparent; pointer-events: none;
}
.tbc-optie.is-gekozen .tbc-optie-foto { top: 13px; right: 13px; }
.tbc-optie-labels, .tbc-optie h5 { padding-right: 62px; }
.tbc-optie { cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.tbc-optie:hover { border-color: var(--tbc-groen); }
.tbc-optie:focus-visible { outline: 2px solid var(--tbc-groen); outline-offset: 2px; }
/* De groene kaart is de samenstelling waar de cijfers hierboven bij horen. */
.tbc-optie.is-gekozen { border-color: var(--tbc-groen); border-width: 2px; padding: 15px; background: var(--tbc-groen-vlak); box-shadow: none; }
.tbc-optie .tbc-bestel { background: var(--tbc-wit); color: var(--tbc-tekst) !important; border: 1px solid var(--tbc-lijn); }
.tbc-optie .tbc-bestel:hover { background: var(--tbc-vlak); color: var(--tbc-tekst) !important; border-color: var(--tbc-grijs); }
.tbc-optie.is-gekozen .tbc-bestel { background: var(--tbc-groen); color: var(--tbc-wit) !important; border-color: var(--tbc-groen); }
.tbc-optie.is-gekozen .tbc-bestel:hover { background: var(--tbc-groen-donker); color: var(--tbc-wit) !important; border-color: var(--tbc-groen-donker); }
.tbc-optie.is-gekozen .tbc-meer { background: transparent; }
.tbc-optie h5 { margin: 4px 0 2px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.tbc-optie-spec { margin: 0; font-size: 13px; }
.tbc-optie-prijs { margin: 8px 0 0; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tbc-optie-prijs span { display: block; font-size: 12px; font-weight: 500; color: var(--tbc-grijs) !important; margin-top: 1px; }
/* Productpagina: prijs links, beoordeling rechts in de vrije ruimte. */
.tbc-prijsrij { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.tbc-prijsrij .tbc-optie-prijs { margin: 8px 0 0; }

.tbc-optie-let { margin: 8px 0 0; font-size: 12px; color: var(--tbc-grijs) !important; font-weight: 600; }
.tbc-optie .tbc-bestel { margin-top: 14px; text-align: center; }
.tbc-tip {
  align-self: flex-start; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--tbc-groen) !important; background-image: none !important;
  color: var(--tbc-wit) !important; border-radius: 4px; padding: 2px 6px;
  line-height: 1.35;
}
.tbc-uitverkocht { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--tbc-grijs) !important; }

/* stapper */
.tbc-stapper { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; }
.tbc-app button.tbc-stap {
  width: 30px; height: 30px; flex: none; border: 1px solid var(--tbc-lijn); border-radius: 8px;
  background: var(--tbc-groen-vlak) !important; background-image: none !important;
  color: var(--tbc-tekst) !important;
  font: inherit; font-size: 17px; font-weight: 600; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tbc-stap:hover { border-color: var(--tbc-groen); color: var(--tbc-groen-donker) !important; }
.tbc-app .tbc-stap.is-uit { border-color: var(--tbc-lijn); color: #C8CDD4 !important; cursor: default;
  background: var(--tbc-vlak) !important; background-image: none !important; }
.tbc-stapper-waarde { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* bestelknop */
.tbc-bestel {
  display: inline-block; background: var(--tbc-groen); color: var(--tbc-wit) !important;
  text-decoration: none; font-weight: 600; font-size: 14px; padding: 11px 18px; border-radius: 9px;
  border: none; cursor: pointer; font-family: inherit; transition: background .12s ease;
}
.tbc-bestel:hover { background: var(--tbc-groen-donker); color: var(--tbc-wit) !important; text-decoration: none; }

/* ---------- stroombalk ---------- */
.tbc-grafiek h4 { font-size: 14px; font-weight: 700; margin: 0 0 10px; }
.tbc-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.tbc-oordeel .tbc-verwijzing { margin: 12px 0 0; }
.tbc-oordeel .tbc-meer { background: var(--tbc-wit) !important; }
.tbc-geenmatch { margin: 4px 0 0; font-size: 14px; line-height: 1.55; }
.tbc-verwijzing { margin: 16px 0 0; }
.tbc-meer--breed { display: inline-block; padding: 11px 20px; }

.tbc-nacht { margin-top: 18px; padding: 14px 16px; background: var(--tbc-vlak); border-radius: 10px; font-size: 13px; line-height: 1.55; }

/* ---------- grafiek ---------- */
.tbc-grafiek svg { width: 100%; height: auto; display: block; }
.tbc-staaf rect { fill: #D5DBE2; }
.tbc-staaf.is-actief rect { fill: var(--tbc-groen); }
.tbc-staaf-waarde { font-size: 11px; font-weight: 700; fill: #566074; }
.tbc-staaf-label { font-size: 12px; font-weight: 600; fill: #0b0d12; }

/* ---------- uitklap ---------- */
.tbc-uitleg { margin-top: 12px; border: 1px solid var(--tbc-lijn); border-radius: var(--tbc-radius); background: var(--tbc-wit); overflow: hidden; }
.tbc-uitleg > summary {
  cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tbc-uitleg > summary::-webkit-details-marker { display: none; }
.tbc-uitleg > summary:hover { background: var(--tbc-vlak); }
.tbc-chevron { width: 8px; height: 8px; border-right: 2px solid var(--tbc-grijs); border-bottom: 2px solid var(--tbc-grijs); transform: rotate(45deg); flex: none; transition: transform .15s ease; }
.tbc-uitleg[open] > summary { border-bottom: 1px solid var(--tbc-lijn); }

/* ---------- de vier verdiepende blokken, samen of los ----------
   Los (brede algemene weergave): het omhulsel staat open en zijn kopje is
   verborgen, dus je ziet precies wat je eerder zag.
   Samen (smal scherm of productpagina): één kop "Meer informatie" met de vier
   blokken erin. In beide gevallen staat dezelfde inhoud in de HTML. */
.tbc-bundel > summary { display: none; }
.tbc-bundel.is-gebundeld {
  margin-top: 12px; border: 1px solid var(--tbc-lijn); border-radius: var(--tbc-radius);
  background: var(--tbc-wit); overflow: hidden;
}
.tbc-bundel.is-gebundeld > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 600; font-size: 15px;
}
.tbc-bundel.is-gebundeld > summary::-webkit-details-marker { display: none; }
.tbc-bundel.is-gebundeld > summary:hover { background: var(--tbc-vlak); }
.tbc-bundel.is-gebundeld[open] > summary { border-bottom: 1px solid var(--tbc-lijn); }
.tbc-bundel.is-gebundeld[open] > summary .tbc-chevron { transform: rotate(-135deg); }
/* Binnen de bundel geen dubbele randen: de blokken worden regels in één kaart. */
.tbc-bundel.is-gebundeld .tbc-bundel-body { padding: 4px 0; }
.tbc-bundel.is-gebundeld .tbc-uitleg {
  margin-top: 0; border: none; border-top: 1px solid var(--tbc-lijn); border-radius: 0;
}
.tbc-bundel.is-gebundeld .tbc-bundel-body > .tbc-uitleg:first-child { border-top: none; }
.tbc-uitleg[open] .tbc-chevron { transform: rotate(-135deg); }
.tbc-uitleg-body { padding: 6px 20px 22px; }
.tbc-uitleg-body h4 { font-size: 15px; font-weight: 700; margin: 24px 0 8px; }
.tbc-uitleg-body h5 { font-size: 14px; font-weight: 700; margin: 18px 0 6px; }
.tbc-uitleg-body p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; }

.tbc-faq { border-top: 1px solid var(--tbc-lijn); }
.tbc-faq:first-child { border-top: none; }
.tbc-faq > summary { cursor: pointer; padding: 14px 0; font-weight: 600; font-size: 14px; list-style: none; }
.tbc-faq > summary::-webkit-details-marker { display: none; }
.tbc-faq > summary::before { content: "+"; display: inline-block; width: 20px; font-weight: 600; color: var(--tbc-grijs); }
.tbc-faq[open] > summary::before { content: "\2212"; }
.tbc-faq p { margin: 0 0 16px 20px; font-size: 14px; line-height: 1.6; }

/* ---------- tabellen ---------- */
.tbc-scroll { overflow-x: auto; }
.tbc-app table.tbc-tabel { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 13px; }
.tbc-app .tbc-tabel th, .tbc-app .tbc-tabel td { border-bottom: 1px solid var(--tbc-lijn); padding: 10px 12px; text-align: left; font-weight: 500; vertical-align: top; }
.tbc-app .tbc-tabel thead th { background: var(--tbc-vlak); font-weight: 700; font-size: 12px; }
.tbc-app .tbc-tabel tbody th { font-weight: 600; width: 32%; }
.tbc-toelicht { font-size: 12px; line-height: 1.5; }
.tbc-tabel--vergelijk td { text-align: right; font-variant-numeric: tabular-nums; }
.tbc-tabel--vergelijk thead th { text-align: right; }
.tbc-tabel--vergelijk thead th:first-child { text-align: left; }
.tbc-uitkomst td, .tbc-uitkomst th { background: var(--tbc-groen-vlak); font-weight: 700 !important; }
.tbc-tabel--jaren td { font-variant-numeric: tabular-nums; }
.tbc-tabel--jaren .tbc-start td { background: var(--tbc-vlak); }
.tbc-tabel--jaren tr.tbc-positief td:last-child { color: var(--tbc-groen-donker) !important; font-weight: 700; }

.tbc-bronnen { list-style: none; padding: 0; margin: 0 0 12px; }
.tbc-bronnen li { border-top: 1px solid var(--tbc-lijn); padding: 11px 0; font-size: 13px; }
.tbc-bronnen a { font-weight: 600; text-decoration: underline; color: var(--tbc-groen-donker) !important; }
.tbc-bron-gebruik { display: block; font-size: 12px; margin-top: 3px; line-height: 1.5; }
.tbc-peildatum, .tbc-disclaimer { font-size: 12px; line-height: 1.55; }
.tbc-disclaimer { margin-top: 16px; }
.tbc-fout { padding: 14px; border: 1px solid var(--tbc-rood); border-radius: 10px; font-size: 14px; }
.tbc-laden { padding: 14px; border: 1px solid var(--tbc-lijn); border-radius: 10px; font-size: 14px; color: var(--tbc-grijs); }
.tbc-link { background: none; border: none; padding: 0; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; color: var(--tbc-groen-donker) !important; }
.tbc-advies { margin: 14px 0 0; background: var(--tbc-vlak); border-radius: 10px; padding: 12px 14px; font-size: 14px; }

/* ---------- AI-adviseur ---------- */
.tbc-ai { margin-top: 14px; border: 1px solid var(--tbc-groen); border-radius: var(--tbc-radius); background: var(--tbc-groen-vlak); padding: 18px 20px; }
.tbc-ai p { margin: 0 0 14px; font-size: 14px; }
.tbc-ai-knoppen { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tbc-ai-weg { background: none; border: none; padding: 0; font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; color: var(--tbc-grijs) !important; }
.tbc-ai-oplicht { outline: 3px solid var(--tbc-groen); outline-offset: 6px; border-radius: 10px; }

/* ---------- toegankelijkheid en print ---------- */
@media (prefers-reduced-motion: reduce) { .tbc-app * { transition: none !important; animation: none !important; } }
@media print {
  .tbc-schakel, .tbc-link, .tbc-ai, .tbc-stap { display: none !important; }
  .tbc-uitleg { break-inside: avoid; border: none; }
  .tbc-uitleg > summary { display: none; }
  .tbc-uitleg-body { display: block !important; padding: 12px 0 0; }
  .tbc-kolommen { grid-template-columns: 1fr; }
  .tbc-paneel { box-shadow: none; }
}

/* ---------- kaartlabels en knoppen onderaan ---------- */
.tbc-optie-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.tbc-optie-labels .tbc-tip { align-self: auto; }
.tbc-tip--premium { background: #ECAA15 !important; color: #0B0D12 !important; }

/* De vrije ruimte gaat naar het blok met maat, prijs en beoordeling (dat
   heeft margin-top:auto); de knoppen sluiten daar met een vaste afstand op
   aan. Twee keer auto zou de ruimte verdelen en dan staan de prijzen van drie
   kaarten niet meer op dezelfde hoogte. */
.tbc-optie-knoppen { margin-top: 0; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.tbc-optie .tbc-bestel { margin-top: 0; text-align: center; }
.tbc-meer {
  display: block; text-align: center; text-decoration: none;
  background: var(--tbc-wit); color: var(--tbc-tekst) !important;
  border: 1px solid var(--tbc-lijn); border-radius: 9px;
  padding: 10px 16px; font-weight: 500; font-size: 13px;
}
.tbc-meer:hover { border-color: var(--tbc-grijs); color: var(--tbc-tekst) !important; text-decoration: none; }
.tbc-meer:focus-visible { outline: 2px solid var(--tbc-groen); outline-offset: 2px; }

.tbc-app .tbc-tip--premium button.tbc-info { background: transparent !important; border-color: rgba(11,13,18,.45); color: #0B0D12 !important; width: 14px; height: 14px; font-size: 10px; margin-left: 5px; }
.tbc-tip--premium .tbc-info:hover { border-color: #0B0D12; }
.tbc-tip--premium .tbc-info-tekst { text-transform: none; font-weight: 500; }