/* Kinnection, bouwstenen: prijsstrook en uitklapbare vraag. Prompt 05.
   De prijsstrook gebruikt de keuzebalk uit formulier.css als schakelaar tussen maand en jaar. Het wisselen staat in prijsstrook.js.
   De uitklapbare vraag is een gewone <details>: ze werkt zonder script, met muis, toetsenbord en schermlezer. */

/* ===== Prijsstrook ===== */
.prijs{position:relative;z-index:var(--layer-content);padding:var(--pad-card);border:var(--stroke-border) solid var(--color-border);border-radius:var(--radius-card);background:var(--op-card);box-shadow:var(--op-card-shadow)}
.prijs-nu{font:var(--type-title);letter-spacing:var(--tracking-title);color:var(--color-heading)}
.prijs-nu + p{margin-top:var(--gap-inline);font:var(--type-small);color:var(--color-text-muted)}
.prijs hr{border:0;border-top:var(--stroke-rule) solid var(--color-rule);margin-block:var(--gap-element)}
.prijs-kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gap-tight)}
.prijs-bedrag{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--gap-inline);margin-top:var(--gap-tight)}
.prijs-bedrag b{font:var(--type-number);letter-spacing:var(--tracking-heading);color:var(--color-heading)}
.prijs-bedrag span{font:var(--type-small);font-weight:var(--weight-bold);color:var(--color-text-muted)}
/* Wisselen: het bedrag telt naar zijn nieuwe waarde (prijsstrook.js) en veert even op, de eenheid schuift erachteraan */
.prijs-bedrag b{display:inline-block;transform-origin:left bottom;font-variant-numeric:tabular-nums}
.prijs-bedrag b.net{animation:prijs-veer var(--duration-enter) var(--ease-spring)}
.prijs-bedrag b.net + span{animation:prijs-volg var(--duration-enter) var(--ease-calm)}
@keyframes prijs-veer{0%{transform:scale(0.8) rotate(calc(var(--tilt-hover) * -1))}60%{transform:scale(1.08) rotate(var(--tilt-rest))}100%{transform:none}}
@keyframes prijs-volg{from{opacity:0;transform:translateX(calc(var(--gap-tight) * -1))}}
.prijs-klein{margin-top:var(--gap-hair);font:var(--type-small);color:var(--color-text-muted)}
.prijs .knop{margin-top:var(--gap-element)}
/* Laden: het bedrag is nog niet gekend */
.prijs[aria-busy="true"] .prijs-bedrag b{color:transparent;background:var(--color-placeholder);border-radius:var(--radius-check)}

/* De brede prijsstrook, patroon 7. Toegevoegd in prompt 09, want de website had hem nodig.
   Bovenaan een band met wat nu geldt, daaronder links de prijs met de knop en rechts wat erin zit.
   Opbouw: <div class="prijs prijs-breed"> met een <div class="prijs-band"> en een <div class="prijs-lijf">,
   en in dat lijf twee <div>: de prijs en de punten. De keuzebalk staat erboven, binnen hetzelfde [data-prijs].
   De band is in de kleur van de kaart, met een lijn eronder. Met class="op-moment" wordt hij indigo; dat telt dan als
   een indigo vlak van principe 5. Opdracht 12g, keuze van Chalo op 27-09-2026: op Home is de band crème, zodat de pagina
   op drie indigo vlakken blijft. */
.prijs-breed{padding:0;overflow:hidden}
.prijs-band{padding:var(--pad-card)}
.prijs-band:not(.op-moment){border-bottom:var(--stroke-border) solid var(--op-border)}
.prijs-band .prijs-nu{color:var(--op-heading)}
.prijs-band .prijs-nu ~ p{max-width:var(--measure-text);margin-top:var(--gap-inline);font:var(--type-small);color:var(--op-text-muted)}
.prijs-lijf{display:grid;gap:var(--gap-block);padding:var(--pad-card)}
.prijs-lijf .labels{margin-top:var(--gap-element)}
.prijs-lijf .punten{margin-top:var(--gap-tight)}
.prijs-schakel{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-tight);margin-bottom:var(--gap-element)}
@media (min-width:900px){
  .prijs-band{padding-inline:var(--pad-panel)}
  .prijs-lijf{grid-template-columns:minmax(0,var(--split-narrow)) minmax(0,var(--split-wide));gap:var(--gap-columns);padding:var(--pad-panel)}
  .prijs-lijf .punten{columns:2;column-gap:var(--gap-columns)}
  .prijs-lijf .punten li{break-inside:avoid}
}

/* ===== Uitklapbare vraag ===== */
.vragen{border-top:var(--stroke-rule) solid var(--op-rule);max-width:var(--measure-text)}
.vraag{border-bottom:var(--stroke-rule) solid var(--op-rule)}
.vraag summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--gap-tight);min-height:var(--control-lg);padding-block:var(--gap-tight);list-style:none;cursor:pointer;font:var(--type-title);letter-spacing:var(--tracking-title);color:var(--op-heading);-webkit-tap-highlight-color:transparent}
.vraag summary::-webkit-details-marker{display:none}
/* Het plusje: twee streepjes, waarvan er één wegdraait wanneer de vraag open is */
.vraag-teken{position:relative;flex:none;width:var(--check-size);height:var(--check-size);border:var(--stroke-border) solid var(--op-border);border-radius:var(--radius-check);background:var(--op-quiet);transition:background-color var(--duration-fast) var(--ease-calm),transform var(--duration-spring) var(--ease-spring)}
.vraag-teken::before,.vraag-teken::after{content:"";position:absolute;left:25%;right:25%;top:calc(50% - var(--stroke-border) / 2);height:var(--stroke-border);background:var(--op-quiet-text);transition:transform var(--duration-spring) var(--ease-spring),background-color var(--duration-fast)}
.vraag-teken::after{transform:rotate(90deg)}
.vraag[open] .vraag-teken{background:var(--op-action);border-color:var(--op-action)}
.vraag[open] .vraag-teken::before,.vraag[open] .vraag-teken::after{background:var(--op-action-text)}
.vraag[open] .vraag-teken::after{transform:rotate(0deg)}
@media (hover:hover),(min-width:900px){
  .vraag summary:hover .vraag-teken{background:var(--op-tint)}
  .vraag[open] summary:hover .vraag-teken{background:var(--op-action)}
}
.vraag summary.toestand-aanwijzen .vraag-teken{background:var(--op-tint)}
.vraag summary:active .vraag-teken{transform:scale(0.9)}
.vraag-antwoord{padding-bottom:var(--gap-element);padding-right:calc(var(--check-size) + var(--gap-tight));color:var(--op-text-muted)}
.vraag[open] .vraag-antwoord{animation:vraag-open var(--duration-fast) var(--ease-calm)}
@keyframes vraag-open{from{opacity:0;transform:translateY(calc(var(--gap-inline) * -1))}}

/* Aanwijzen: het plusje draait een kwartslag en wordt iets groter. Prompt 10. */
@media (hover:hover),(min-width:900px){
  .vraag summary:hover .vraag-teken{transform:rotate(90deg) scale(1.12)}
}