/*
 * Mobiele verbeteringen voor /bereken/ (13-11-2026)
 * ---------------------------------------------------------------------------
 * Aanleiding: de mobiele analyse van 13-11-2026 (projectdocument
 * claude/mobiele-conversie-bereken-13nov2026.md). Op mobiel klikte 34% van de
 * resultaatbezoekers door naar een winkel, op desktop 50%. Bovenaan de
 * resultaatpagina presteerde mobiel gelijk; het verschil zat in de delen die
 * op een telefoon 12 tot 16 schermen diep stonden, in kleine letters en in
 * kleine tikvlakken.
 *
 * Dit bestand laadt na resultaat-v3.css. Bijna alles staat binnen een
 * media query tot 640px (of 480px): op desktop verandert er niets, behalve
 * dat de nieuwe mobiele blokken daar verborgen zijn.
 */

/* ----- 0. Overal ---------------------------------------------------------- */

/* De stapkop krijgt bij elke wizardstap programmatisch focus (voor
   schermlezers, zie gaNaarStap). Een kop is geen bedieningselement; het
   blauwe kader dat de browser er dan omheen tekent, leek een fout. */
.wizardcard h2[tabindex="-1"]:focus { outline: none; }

/* Alleen op telefoons: de winkels op de advieskaart, de sprongknoppen en de
   inklapknoppen van de verdiepingskaarten. */
.res-keuze-winkels, .res-sprong, .res-mob-toggle, .bereken-intro-meer { display: none; }

/* ----- 1. Telefoon --------------------------------------------------------- */
@media (max-width: 640px) {

  /* --- 1a. Begin van de rekentool: de eerste vraag in het eerste scherm --- */
  h1 { font-size: 28px; line-height: 1.15; margin-bottom: 10px; }
  #berekenIntro:not(.open):not([hidden]) {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden; margin-bottom: 4px;
  }
  .bereken-intro-meer {
    display: inline-flex; align-items: center; min-height: 40px; margin: 0 0 12px; padding: 0;
    background: none; border: 0; font: inherit; font-size: 15px; font-weight: 600;
    color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  }
  #berekenIntro[hidden] + .bereken-intro-meer { display: none; }

  /* Welkom terug: de zes antwoorden op "Wat hield je vorige keer tegen?"
     stonden onder elkaar en duwden de rekentool een half scherm omlaag. Nu
     één rij die je opzij veegt. */
  .welkom-terug .welkom-terug-vraag { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .welkom-terug .welkom-terug-vraag::-webkit-scrollbar { display: none; }
  .welkom-terug .welkom-terug-vraag-kop { flex: none; white-space: nowrap; }
  .welkom-terug .welkom-terug-optie { flex: none; white-space: nowrap; min-height: 40px; font-size: 14px; }

  /* --- 1b. De drie goedkoopste winkels op de kaart van het advies --- */
  .res-keuze-winkels { display: block; margin-top: 14px; }
  .res-keuze-winkels .res-winkelbox { margin: 0; }
  /* De link "Vergelijk met 3 andere winkels en de prijsopbouw" zou nu vlak
     boven die winkels staan; prijsopbouw en prijsverloop staan in de
     sprongknoppen ("Winkels en prijsverloop"). */
  .res-keuze:has(.res-keuze-winkels) .res-keuze-verdieping { display: none; }

  /* --- 1c. Sprongknoppen onder "Ons advies" --- */
  .res-sprong { display: block; margin: 4px 0 22px; }
  .res-sprong[hidden] { display: none; }
  .res-sprong-kop { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
  .res-sprong-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .res-sprong-knop {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 52px; padding: 10px 12px; box-sizing: border-box;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    color: var(--accent-dark); font-size: 15px; font-weight: 600; line-height: 1.25; text-decoration: none;
  }
  .res-sprong-knop[hidden] { display: none; }
  .res-sprong-knop svg { flex: none; }
  .res-sprong-knop:active { background: var(--accent-soft); }

  /* --- 1d. Verdiepingskaarten standaard ingeklapt --- */
  #stap5 .res-mob-dicht > :not(.res-kop-groep):not(.res-mob-toggle) { display: none !important; }
  .res-mob-toggle {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 48px; margin: 14px 0 0; padding: 10px 16px; box-sizing: border-box;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--accent-dark); cursor: pointer;
  }
  .res-mob-toggle[aria-expanded="true"] { margin-bottom: 16px; }
  .res-mob-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* --- 1e. Leesbare letters op de resultaatpagina ---
     De analyse vond 24% van de tekst op 13px of kleiner en maar 21% op 16px
     of groter, voor een publiek dat voor een groot deel 50-plus is. Lopende
     tekst gaat naar 16px, uitleg naar 15px, kleine lettertjes naar 14px. */
  html[data-resultaat] #stap5 :is(.res-lead, .res-punten-lead, .wa-faq-body, .formaat-later, .formaat-kernsub,
    .formaat-dagtekst, .res-hulp-stappen, .res-reken-st, .res-eigen-sub, .res-kaart-kop-sub,
    .res-aan-label, .res-laagst-banner-tekst, .resb-vink, .res-punten-model-naam, .res-voetnoot) { font-size: 16px; }
  html[data-resultaat] #stap5 :is(.res-voordeel-zin, .res-aan-uitleg, .res-aan-niet, .res-voordeel-tekst,
    .res-maand-uitleg, .res-pop-uitleg, .res-jaar-noot, .res-keuze-redenen, .res-wb-citaat-zin, .tiny,
    .res-stopcontact-vgl, .res-keuze-praktisch, .res-keuze-actie) { font-size: 15px; }
  html[data-resultaat] #stap5 :is(.res-fijn, .res-winkelbox-sub, .formaat-voetnoot, .res-reden-tekst,
    .res-keuze-nadeel, .formaat-klein, .res-wr-meta, .res-pop-reden, .res-zb-legenda) { font-size: 14px; }
  html[data-resultaat] #stap5 :is(.res-keuze-cijfers .l, .res-conclusie-tegel .l, .res-toprij-cijfers .l) { font-size: 12px; }

  /* --- 1f. Tikvlakken van minstens 44px ---
     Kleine knopjes krijgen een groter tikvlak zonder dat ze groter ogen
     (een onzichtbare rand van ::after), knoppen met tekst een minimale hoogte. */
  #stap5 .netto-i { position: relative; }
  #stap5 .netto-i::after { content: ""; position: absolute; inset: -13px; }
  #stap5 .res-punt-uitklap > summary, #stap5 .res-keuze-nadeel > summary { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
  #stap5 .res-wr-kopieer { position: relative; min-height: 32px; padding: 4px 10px; }
  #stap5 .res-wr-kopieer::after { content: ""; position: absolute; inset: -6px -4px; }
  #stap5 .res-keuze-actie .kortingcode { min-height: 44px; }
  #stap5 .res-pop-pijl { width: 44px; height: 44px; }
  #stap5 .res-stuur-pil, #stap5 .wa-var { min-height: 40px; }
  #stap5 .pg-schakelaar button { min-height: 40px; }
  #stap5 .res-deel-knop { min-height: 44px; }
  #stap5 .formaat-terug { display: inline-flex; align-items: center; min-height: 44px; }
  #stap5 .resb-vink { min-height: 44px; align-items: center; }
  #stap5 .resb-vink input[type="checkbox"] { width: 22px; height: 22px; }
  #stap5 .res-conclusie-anker a { display: inline-flex; align-items: center; min-height: 40px; }

  /* Het bevestigingsbericht na het kopiëren van een code boven de compacte balk. */
  body:has(#stap5 .res-sticky.zichtbaar) .kopieer-toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* ----- 2. Compacte koopbalk op smalle telefoons ---------------------------
   Was twee regels plus een knop over de volle breedte: zo'n 120px, 14% van
   het scherm, met de productnaam en de terugverdientijd afgekapt. Nu één
   regel: het bedrag en de code links, de knop (met het merk) rechts. */
@media (max-width: 480px) {
  #stap5 .res-sticky { flex-wrap: nowrap; padding: 8px 8px 8px 14px; gap: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  #stap5 .res-sticky .res-sticky-tekst { flex: 0 0 auto; }
  #stickyKoopNaam { display: none; }
  #stickyKoopPrijs::before { content: none; }
  .res-sticky-naam { font-size: 19px; }
  .res-sticky-meta > span:not(.res-sticky-code) { display: none; }
  .res-sticky-meta:empty { display: none; }
  #stap5 .res-sticky-knop { flex: 1 1 auto; max-width: none; min-height: 48px; font-size: 16px; }
  body:has(#stap5 .res-sticky.zichtbaar) #stap5 { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body:has(#stap5 .res-sticky.zichtbaar) .kopieer-toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
}