/* FitQuant Tools — calculator styles (namespace fq-calc-) */

/* ---------------------------------------------------------------------
 * Lokale design-tokens (productieverbetering #1)
 * Deze 16 variabelen worden lokaal op de hoofdwrapper gedefinieerd zodat
 * de Tools-pagina niet hard afhankelijk is van globale variabelen uit
 * andere WordPress-pagina's.
 *
 * LET OP — transparantie over de gebruikte waarden: dit bestand had geen
 * toegang tot de originele styles.css van de site, dus de exacte
 * hex/rgba-waarden van het thema konden niet één-op-één worden
 * overgenomen. Om te voorkomen dat het ontwerp per ongeluk verandert,
 * gebruikt elke variabele var(--naam, fallback): zolang het thema de
 * variabele al globaal levert (huidige situatie), wint die waarde en
 * blijft het ontwerp pixel-identiek. De fallback dient uitsluitend als
 * vangnet voor het geval de pagina ooit zonder de globale stylesheet
 * wordt geladen. Heb je de exacte waarden uit styles.css? Vervang dan de
 * fallback-waarde (na de komma) 1-op-1 voor 100% garantie.
 * ------------------------------------------------------------------- */
.fq-calc-print-wrap{
  --accent: var(--e-global-color-primary, #3ee8a8);
  --accent-soft: var(--e-global-color-fq-accent-soft, rgba(62,232,168,.12));
  --accent-strong: var(--e-global-color-fq-accent-strong, #29b788);
  --bg-alt: var(--e-global-color-fq-bg-alt, #14151a);
  --bg-card: var(--e-global-color-fq-bg-elevated, #15161b);
  --bg-elevated: var(--e-global-color-fq-bg-card-hover, #1b1c22);
  --border: var(--e-global-color-fq-border, rgba(255,255,255,.08));
  --border-strong: var(--e-global-color-fq-border-strong, rgba(255,255,255,.16));
  --font-body: var(--e-global-typography-text-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif);
  --font-display: var(--e-global-typography-primary-font-family, "Space Grotesk", var(--font-body));
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow-card: 0 20px 60px -20px rgba(0,0,0,.5);
  --text-primary: var(--e-global-color-text, #f4f4f5);
  --text-secondary: var(--e-global-color-accent, #a8acb3);
  --text-tertiary: var(--e-global-color-fq-text-tertiary, #6b7078);
}

/* =======================================================================
 * Ontbrekende gedeelde site-componenten (forensische bevinding: deze 18
 * selectors kwamen 0x voor in tools.css, terwijl tools.html er wél op
 * leunt — voor de eyebrow-badges, container/section-layout, FAQ-accordion
 * en de CTA-band + knoppen). Uitsluitend deze componenten toegevoegd, op
 * basis van de originele prototype-screenshots, met de bestaande lokale
 * FitQuant-tokens hierboven. Geen calculatorlogica, geen HTML, geen JS.
 *
 * SCOPING-CORRECTIE (na DOM-controle): de FAQ- en CTA-sectie zijn GEEN
 * afstammelingen van .fq-calc-print-wrap — ze zijn siblings ervan binnen
 * <main>. Alle FAQ-regels zijn daarom herschreven onder de unieke
 * .section.alt-bg-selector, en alle CTA-regels onder .cta-band. Geen
 * bare/globale .btn-, .section- of .container-selector gebruikt.
 *
 * REGRESSIE-FIX (gevonden tijdens de volledige DOM-scope-audit): bij die
 * herscoping is het hele oude .fq-calc-print-wrap .container/.eyebrow/
 * .lede/.section-sm-blok verwijderd, zonder te controleren of diezelfde
 * classes ook ECHT binnen de wrapper nog gebruikt worden. Dat is het
 * geval: de hero (.container/.eyebrow/.lede, regel 35-38 in tools.html)
 * en de "Totale fitheidscheck"-CTA (.section-sm/.container, regel 42-43)
 * zitten wél binnen .fq-calc-print-wrap en waren zo stijlloos geworden.
 * Hersteld met dezelfde waarden als voorheen — geen nieuwe waarden. */
.fq-calc-print-wrap .container{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}
.fq-calc-print-wrap .section-sm{
  padding:64px 0;
}
.fq-calc-print-wrap .eyebrow{
  display:inline-flex;
  align-items:center;
  padding:8px 20px;
  margin-bottom:20px;
  border-radius:999px;
  border:1px solid var(--accent-soft);
  background:var(--accent-soft);
  color:var(--accent);
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1;
}
.fq-calc-print-wrap .lede{
  color:var(--text-secondary);
  line-height:1.6;
}

/* --- FAQ-sectie: gescoped onder .section.alt-bg (unieke selector) ---- */
.section.alt-bg{
  padding:96px 0;
  background:var(--bg-alt);
  /* Bugfix: .section.alt-bg is GEEN afstammeling van .fq-calc-print-wrap
     (het zijn siblings in de DOM), dus de var(--…)-tokens hierboven
     kwamen hier nooit aan. Elke declaratie die zo'n var() gebruikte werd
     daardoor ongeldig: border-style viel terug op "none", tekstkleur op
     de overge-erfde themakleur, en het plus/min-icoon werd onzichtbaar
     (dit is met getComputedStyle bevestigd). Onderstaande regels maken
     exact dezelfde tokenwaarden lokaal beschikbaar, uitsluitend binnen
     deze sectie. Elders (calculator, tabs, steppers, resultaatkaart,
     CTA, footer) blijft alles ongewijzigd. */
  --bg-alt:#14151a;
  --bg-elevated:#1b1c22;
  --text-primary:#f4f4f3;
  --text-secondary:#a3a3a8;
  --accent:#3ee8a8;
  --accent-soft:rgba(62,232,168,.12);
  --border:rgba(255,255,255,.09);
}
.section.alt-bg .container{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}
.section.alt-bg .section-head{
  margin-bottom:48px;
}
.section.alt-bg .section-head h2{
  margin:0;
  color:var(--text-primary);
}
.section.alt-bg .eyebrow{
  display:inline-flex;
  align-items:center;
  padding:8px 20px;
  margin-bottom:20px;
  border-radius:999px;
  border:1px solid var(--accent-soft);
  background:var(--accent-soft);
  color:var(--accent);
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1;
}
.section.alt-bg .eyebrow-neutral{
  border-color:var(--accent-soft);
  background:var(--accent-soft);
  color:var(--accent);
}

/* FAQ-accordion — native <details>/<summary> blijft de interactie
   leveren (geen JS nodig); hier verbergen we alleen de browser-
   standaardmarker en bouwen we het custom +/− icoon en de
   rij-/scheidingslijnopmaak op. Maten 1-op-1 overgenomen van de
   bestaande site-FAQ (Elementor-accordion op de homepage). */
.section.alt-bg .faq-list{
  border-top:1px solid var(--border);
}
.section.alt-bg .faq-item{
  border-bottom:1px solid var(--border);
}
.section.alt-bg .faq-item summary{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:20px;
  padding:15px 20px;
  color:var(--text-primary);
  font-weight:700;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  list-style:none;
}
.section.alt-bg .faq-item summary::-webkit-details-marker{
  display:none;
}
.section.alt-bg .faq-item summary::marker{
  content:'';
}
.section.alt-bg .faq-item summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}
.section.alt-bg .faq-item .plus{
  order:-1;
  position:relative;
  flex:0 0 auto;
  width:16px;
  height:16px;
}
.section.alt-bg .faq-item .plus::before,
.section.alt-bg .faq-item .plus::after{
  content:'';
  position:absolute;
  background:var(--text-primary);
  transition:transform .18s ease;
}
.section.alt-bg .faq-item .plus::before{
  top:50%;left:0;width:100%;height:2px;
  transform:translateY(-50%);
}
.section.alt-bg .faq-item .plus::after{
  left:50%;top:0;width:2px;height:100%;
  transform:translateX(-50%);
}
.section.alt-bg .faq-item[open] .plus::after{
  transform:translateX(-50%) scaleY(0);
}
.section.alt-bg .faq-item[open] .faq-a{
  border-top:1px solid var(--border);
}
.section.alt-bg .faq-a{
  max-width:760px;
  padding:15px 20px;
  margin:0;
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.65;
}

/* --- CTA-band: gescoped onder .cta-band (unieke selector) ------------
 * Kaart met groene glow-gradient, zoals in het prototype (screenshot C).
 * .cta-band draagt zelf de breedte/centrering die anders van de
 * (hier niet aangeraakte) .container zou komen. */
/* LOCKED: CTA parity with approved prototype — purple gradient #8C52FF */
.cta-band{
  /* Lokale tokenherdefinitie: .cta-band is een sibling van .fq-calc-print-wrap
     (zie audit hierboven) en erfde de gedeelde --tokens daardoor niet. Hier
     lokaal herdefinieerd met exact dezelfde fallbackwaarden als het
     design-tokenblok bovenaan dit bestand, zodat badge, titel, tekst en
     knoppen binnen deze CTA weer correct renderen (ongewijzigd t.o.v.
     prototype). Enige bewuste kleurwijziging t.o.v. het prototype: de
     paarse glow-token hieronder i.p.v. de groene --accent-soft. */
  --accent: var(--e-global-color-primary, #3ee8a8);
  --accent-soft: var(--e-global-color-fq-accent-soft, rgba(62,232,168,.12));
  --border: var(--e-global-color-fq-border, rgba(255,255,255,.08));
  --bg-card: var(--e-global-color-fq-bg-elevated, #15161b);
  --radius-md: 16px;
  --text-primary: var(--e-global-color-text, #f4f4f5);
  --text-secondary: var(--e-global-color-accent, #a8acb3);
  --cta-purple-soft: rgba(140,82,255,.20);
  position:relative;
  max-width:1120px;
  margin:48px auto 0;
  overflow:hidden;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:
    radial-gradient(120% 120% at 50% 0%, var(--cta-purple-soft), transparent 60%),
    var(--bg-card);
  box-shadow:
    0 20px 60px -20px rgba(0,0,0,.55),
    0 0 90px -30px rgba(140,82,255,.35);
  padding:80px 40px;
  text-align:center;
}
.cta-band .eyebrow{
  display:inline-flex;
  align-items:center;
  padding:8px 20px;
  margin-bottom:24px;
  border-radius:999px;
  border:1px solid var(--accent-soft);
  background:var(--accent-soft);
  color:var(--accent);
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1;
}
.cta-band h2{
  margin:0 0 24px;
  color:var(--text-primary);
}
.cta-band .lede{
  max-width:640px;
  margin:0 auto 40px;
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.6;
}
.cta-band .cta-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
}

/* --- Knoppen: apart gescoped per daadwerkelijke context --------------
 * .fq-calc-print-wrap .btn dekt de knoppen die wél binnen de calculator
 * staan (hero, tab, resultaat-acties — daadwerkelijk afstammelingen).
 * .cta-band .btn dekt de knoppen in de CTA-band (staat buiten de
 * wrapper, zie DOM-controle). Geen bare/globale .btn-selector. */
.fq-calc-print-wrap .btn,
.cta-band .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:999px;
  border:1px solid transparent;
  font-family:var(--font-body);
  font-weight:700;
  font-size:15px;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:opacity .15s ease;
}
.fq-calc-print-wrap .btn:hover,
.cta-band .btn:hover{
  opacity:.9;
}
.fq-calc-print-wrap .btn-primary,
.cta-band .btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#0a0a0b;
}
.fq-calc-print-wrap .btn-secondary,
.cta-band .btn-secondary{
  background:transparent;
  border-color:#8C52FF;
  color:var(--text-primary);
  transition:border-color .2s ease-out,background-color .2s ease-out;
}
.fq-calc-print-wrap .btn-lg,
.cta-band .btn-lg{
  padding:18px 32px;
  font-size:16px;
}

.fq-calc-analysecta{margin-top:-20.5px;margin-bottom:28px}
/* Hero-fix: knop optisch centreren tussen boven- en ondertekst (scope: alleen deze hero-CTA) */
.fq-calc-analysecta .fq-calc-qnote{color:#3EE8A8;margin-top:69px !important}
.fq-calc-tab-analyse.is-active{outline:2px solid var(--accent);outline-offset:3px}
.fq-calc-tab-analyse:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Productieverbetering #5 — consistente focus-indicator voor alle
   interactieve tabs, pills, kaarten en steppers binnen de calculator */
.fq-calc-tab:focus-visible,
.fq-calc-pill:focus-visible,
.fq-calc-card:focus-visible,
.fq-orm-goal:focus-visible,
.fq-calc-num button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fq-calc-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.fq-calc-tab{font-size:14px;font-weight:700;padding:9px 18px;border-radius:999px;border:1px solid var(--border-strong);color:var(--text-secondary);background:transparent;cursor:pointer;font-family:var(--font-body)}
.fq-calc-tab.is-active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.fq-calc-tab.is-soon{opacity:.45;cursor:default}
.fq-calc-progress{display:flex;align-items:center;gap:8px;margin-bottom:36px}
.fq-calc-progress .fq-calc-pnode{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--text-tertiary);white-space:nowrap}
.fq-calc-pnode i{width:10px;height:10px;border-radius:50%;background:var(--bg-elevated);border:1.5px solid var(--border-strong);flex-shrink:0;transition:all .18s ease}
.fq-calc-pnode.is-done{color:var(--text-secondary)}
.fq-calc-pnode.is-done i,.fq-calc-pnode.is-active i{background:var(--accent);border-color:var(--accent)}
.fq-calc-pnode.is-active{color:var(--accent)}
.fq-calc-pline{flex:1;height:2px;background:var(--border);border-radius:2px;overflow:hidden}
.fq-calc-pline i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s ease}
.fq-calc-pline.is-done i{width:100%}
@media (max-width:700px){.fq-calc-pnode span{display:none}.fq-calc-pnode.is-active span{display:inline}}
.fq-calc-step{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:34px;margin-bottom:20px;transition:opacity .18s ease}
.fq-calc-step.is-locked{opacity:.38;pointer-events:none}
.fq-calc-step.is-done .fq-calc-step-body{display:none}
.fq-calc-step-head{display:flex;align-items:baseline;gap:16px}
.fq-calc-step-num{font-family:var(--font-display);font-size:22px;color:var(--accent);font-weight:600}
.fq-calc-step-title{font-family:var(--font-body);font-size:19px;font-weight:800;color:var(--text-primary)}
.fq-calc-summary{display:none;margin-left:auto;font-size:14px;color:var(--text-secondary);cursor:pointer}
.fq-calc-summary b{color:var(--accent);margin-right:8px}
.fq-calc-summary u{color:var(--text-tertiary);text-decoration:underline}
.fq-calc-step.is-done .fq-calc-summary{display:block}
.fq-calc-step-body{margin-top:24px}
.fq-calc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fq-calc-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:800px){.fq-calc-grid4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.fq-calc-grid2,.fq-calc-grid4{grid-template-columns:1fr}}
/* LOCKED: calculator field labels — FitQuant accent color */
.fq-calc-field label{display:block;font-size:13.5px;font-weight:700;color:#3EE8A8;margin-bottom:8px}
.fq-calc-num{display:flex;align-items:center;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius-sm);transition:border-color .15s ease;overflow:hidden}
.fq-calc-num:focus-within{border-color:var(--accent)}
.fq-calc-num input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text-primary);font-family:var(--font-body);font-size:16px;font-weight:600;padding:12px 4px 12px 16px;text-align:left}
.fq-calc-num .fq-calc-unit{font-size:13px;color:var(--text-tertiary);font-weight:700;padding-right:8px}
.fq-calc-num button{width:40px;align-self:stretch;background:none;border:none;border-left:1px solid var(--border);color:var(--text-secondary);font-size:17px;cursor:pointer;min-height:44px}
/* LOCKED: numeric stepper hover — dark background, mint symbol only */
.fq-calc-print-wrap .fq-calc-num button:hover,
.fq-calc-print-wrap .fq-calc-num button:focus,
.fq-calc-print-wrap .fq-calc-num button:active{background:none;color:#3EE8A8;border:none;border-left:1px solid var(--border);border-radius:0}
.fq-calc-print-wrap .fq-calc-num button:focus-visible{color:#3EE8A8}

/* LOCKED: numeric stepper micro-animation — symbol scale 1.25 on hover */
.fq-calc-print-wrap .fq-calc-num button{position:relative;color:transparent}
.fq-calc-print-wrap .fq-calc-num button::before{position:absolute;top:50%;left:50%;color:var(--text-secondary);font-size:17px;line-height:1;transform:translate(-50%,-50%) scale(1);transform-origin:center;transition:transform 160ms ease,color 160ms ease;pointer-events:none}
.fq-calc-print-wrap .fq-calc-num button.plus::before{content:"+"}
.fq-calc-print-wrap .fq-calc-num button.minus::before{content:"\2212"}
.fq-calc-print-wrap .fq-calc-num button:hover::before{transform:translate(-50%,-50%) scale(1.25);color:#3EE8A8}
.fq-calc-print-wrap .fq-calc-num button:focus::before{color:#3EE8A8}
.fq-calc-print-wrap .fq-calc-num button:active::before{transform:translate(-50%,-50%) scale(1.1)}
@media (prefers-reduced-motion: reduce){
  .fq-calc-print-wrap .fq-calc-num button::before{transition:none}
}
.fq-calc-pills{display:flex;gap:10px;flex-wrap:wrap}
.fq-calc-pill{font-family:var(--font-body);font-size:15px;font-weight:700;padding:11px 22px;border-radius:999px;border:1px solid var(--border-strong);background:transparent;color:var(--text-primary);cursor:pointer;transition:all .18s ease;min-height:44px}
/* LOCKED: pill and secondary-button states — purple hover, mint selected */
.fq-calc-print-wrap .fq-calc-pill:not(.is-on):hover{
  background:transparent;
  color:var(--text-primary);
  border-color:#8C52FF;
}
.fq-calc-print-wrap .fq-calc-pill.is-on:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
}
.fq-calc-print-wrap .btn-secondary:hover,
.cta-band .btn-secondary:hover{
  opacity:1;
  background:var(--accent-soft);
  color:var(--text-primary);
  border-color:var(--accent);
}
.fq-calc-print-wrap .btn-secondary:focus-visible{
  outline:2px solid #8C52FF;
  outline-offset:2px;
}
.fq-calc-pill.is-on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.fq-calc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fq-calc-cards.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:800px){.fq-calc-cards,.fq-calc-cards.c4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fq-calc-cards,.fq-calc-cards.c4{grid-template-columns:1fr}}
.fq-calc-card{text-align:left;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:18px;cursor:pointer;transition:all .18s ease;font-family:var(--font-body);color:var(--text-secondary);font-size:13.5px;line-height:1.45;min-height:44px}
.fq-calc-card b{display:block;color:var(--text-primary);font-size:15.5px;margin-bottom:5px}
.fq-calc-card small{display:block;color:var(--text-tertiary);font-size:12px;margin-top:6px}
.fq-calc-card:hover{border-color:var(--accent)}
.fq-calc-card.is-on{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-soft),var(--bg-elevated) 70%)}
.fq-calc-card.is-on b{color:var(--accent)}
.fq-calc-label{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#3EE8A8;margin:26px 0 12px}
.fq-calc-label:first-child{margin-top:0}
.fq-calc-next{margin-top:26px}
.fq-calc-hint{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:13px 16px;border:1px solid rgba(62,232,168,.3);background:var(--accent-soft);border-radius:var(--radius-sm);font-size:14px;color:var(--text-secondary)}
.fq-calc-hint b{color:var(--accent)}
.fq-calc-hint.warn{border-color:rgba(255,190,90,.35);background:rgba(255,190,90,.08)}
.fq-calc-hint.warn b{color:#ffbe5a}
.fq-calc-skinfold{margin-top:22px;border:1px solid rgba(62,232,168,.3);border-radius:var(--radius-md);padding:24px;background:var(--bg-alt)}
.fq-calc-sf-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
@media (max-width:700px){.fq-calc-sf-fields{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.fq-calc-sf-fields{grid-template-columns:1fr}}
.fq-calc-sf-fields .fq-calc-field{position:relative}
.fq-calc-sf-fields .fq-calc-field .fq-calc-sf-lblrow,.fq-calc-sf-fields .fq-calc-field .fq-calc-num{opacity:.45;transition:opacity .18s ease}
.fq-calc-sf-lblrow{display:flex;align-items:center;gap:7px}
.fq-calc-sf-lblrow label{margin-bottom:8px}
.fq-calc-tip-icon.fq-calc-tip-icon{width:18px;height:18px;margin-bottom:8px;flex-shrink:0;border-radius:50%;border:1px solid #8C52FF;background:transparent;color:#8C52FF;font-size:11px;font-weight:700;font-family:var(--font-body);line-height:1;cursor:help;display:inline-flex;align-items:center;justify-content:center;transition:all .18s ease;padding:0}
.fq-calc-tip-icon.fq-calc-tip-icon:hover,.fq-calc-tip-icon.fq-calc-tip-icon:focus-visible,.fq-calc-tip-icon.fq-calc-tip-icon[aria-expanded="true"]{color:#8C52FF;border-color:#8C52FF;background:rgba(140,82,255,.12);box-shadow:0 0 0 1px rgba(140,82,255,.45);outline:none}
.fq-calc-tip{position:absolute;z-index:150;top:0;left:0;width:272px;background:var(--bg-elevated);border:1px solid rgba(62,232,168,.35);border-radius:var(--radius-sm);box-shadow:0 12px 32px -8px rgba(0,0,0,.7);padding:16px;opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .18s ease,transform .18s ease;visibility:hidden}
.fq-calc-tip.is-open{opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible}
.fq-calc-tip-title{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--text-primary);letter-spacing:.2px}
.fq-calc-tip-row{display:flex;gap:14px;margin-top:10px;align-items:flex-start}
.fq-calc-tip-desc{font-size:13.5px;color:var(--text-secondary);line-height:1.55;flex:1}
.fq-calc-tip-fig{flex-shrink:0;text-align:center}
.fq-calc-tip-fig svg{display:block}
.fq-calc-tip-fig small{display:block;font-size:10px;color:var(--text-tertiary);font-weight:700;margin-top:4px;letter-spacing:.04em}
.fq-calc-tip-tip{margin-top:12px;padding:9px 12px;border-radius:8px;background:var(--accent-soft);border:1px solid rgba(62,232,168,.25);font-size:12.5px;color:var(--text-secondary);line-height:1.5}
.fq-calc-tip-tip b{color:var(--accent)}
@media (max-width:700px){.fq-calc-tip{position:fixed!important;top:auto!important;left:16px!important;right:16px!important;bottom:16px;width:auto;transform:translateY(8px)}.fq-calc-tip.is-open{transform:translateY(0)}}
.fq-calc-sf-fields .fq-calc-field.is-active .fq-calc-sf-lblrow,.fq-calc-sf-fields .fq-calc-field.is-filled .fq-calc-sf-lblrow,.fq-calc-sf-fields .fq-calc-field.is-active .fq-calc-num,.fq-calc-sf-fields .fq-calc-field.is-filled .fq-calc-num{opacity:1}
.fq-calc-sf-guide{margin-top:14px;font-size:13.5px;color:var(--text-secondary)}
.fq-calc-sf-guide b{color:var(--text-primary)}
.fq-calc-sf-live{display:flex;align-items:center;gap:18px;margin-top:20px;flex-wrap:wrap}
.fq-calc-sf-live .val{font-family:var(--font-display);font-size:30px;color:var(--accent);font-weight:600}
.fq-calc-result{border-color:rgba(62,232,168,.35)!important;background:linear-gradient(180deg,rgba(62,232,168,.05),var(--bg-card) 30%)!important}
.fq-calc-intro{font-size:16px;color:var(--text-secondary);margin-top:6px}
.fq-calc-quality{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:7px 15px;border-radius:999px;font-size:13px;font-weight:700;border:1px solid}
.fq-calc-quality i{width:8px;height:8px;border-radius:50%}
.fq-calc-quality.q-hoog{color:var(--accent);border-color:rgba(62,232,168,.35);background:var(--accent-soft)}
.fq-calc-quality.q-hoog i{background:var(--accent)}
.fq-calc-quality.q-gemiddeld{color:#ffbe5a;border-color:rgba(255,190,90,.35);background:rgba(255,190,90,.08)}
.fq-calc-quality.q-gemiddeld i{background:#ffbe5a}
.fq-calc-quality.q-indicatief{color:var(--text-secondary);border-color:var(--border-strong);background:var(--bg-elevated)}
.fq-calc-quality.q-indicatief i{background:var(--text-tertiary)}
.fq-calc-qnote{font-size:13px;color:var(--text-tertiary);margin-top:8px;max-width:640px}
.fq-calc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0;text-align:center}
@media (max-width:700px){.fq-calc-stats{grid-template-columns:1fr 1fr}}
.fq-calc-stat b{display:block;font-family:var(--font-display);font-size:32px;font-weight:600;color:var(--text-primary)}
.fq-calc-stat span{font-size:12.5px;color:var(--text-tertiary);font-weight:600}
.fq-calc-stat.hero b{font-size:46px;color:var(--accent)}
.fq-calc-stat .band{display:block;font-size:13px;color:var(--text-secondary);font-weight:700;margin-top:2px}
.fq-calc-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:8px}
@media (max-width:700px){.fq-calc-cols{grid-template-columns:1fr}}
.fq-calc-tier{display:flex;justify-content:space-between;align-items:baseline;padding:12px 2px;border-bottom:1px solid var(--border);font-size:15px}
.fq-calc-tier:first-of-type{border-top:1px solid var(--border)}
.fq-calc-tier span{color:var(--text-secondary)}
.fq-calc-tier b{color:var(--text-primary)}
.fq-calc-macrobar{display:flex;height:10px;border-radius:5px;overflow:hidden;margin:14px 0}
.fq-calc-macrobar i{transition:width .3s ease}
.fq-calc-macrobar .m1{background:var(--accent)}
.fq-calc-macrobar .m2{background:var(--accent-strong);opacity:.55}
.fq-calc-macrobar .m3{background:var(--accent-strong);opacity:.25}
.fq-calc-explain{margin-top:28px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-alt)}
.fq-calc-explain summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:700;font-size:15px;color:var(--text-primary)}
.fq-calc-explain summary::-webkit-details-marker{display:none}
.fq-calc-explain summary::before{content:'▸ ';color:var(--accent)}
.fq-calc-explain[open] summary::before{content:'▾ '}
.fq-calc-explain .body{padding:0 20px 20px;font-size:14.5px;color:var(--text-secondary);line-height:1.7}
.fq-calc-explain .body b{color:var(--text-primary)}
.fq-calc-explain .body code{font-family:inherit;color:var(--accent);font-weight:600}
.fq-calc-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.fq-calc-footnote{margin-top:22px;font-size:13.5px;color:var(--text-tertiary);line-height:1.65}
.fq-calc-footnote b{color:var(--text-secondary)}
#fq-orm-result .fq-calc-footnote,
#fq-orm-result .fq-calc-footnote a{color:#3EE8A8}
.fq-calc-sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;background:rgba(13,14,16,.92);backdrop-filter:blur(14px);border-top:1px solid var(--border-strong)}
.fq-calc-sticky .k{font-family:var(--font-display);font-size:24px;color:var(--accent);font-weight:600}
.fq-calc-sticky .k small{font-family:var(--font-body);font-size:11px;color:var(--text-tertiary);display:block;font-weight:700}
@media (max-width:700px){.fq-calc-sticky.is-visible{display:flex}}

/* ---------------------------------------------------------------------
 * Sticky-balk: knopstijl + aantoonbaar noodzakelijke aanvullingen
 * (DOM-scope-audit, vervolg op v1.2.1). #fq-calc-sticky staat buiten
 * .fq-calc-print-wrap (bevestigd), dus de knop had nog geen stijl.
 * Onderstaande knop-regels zijn 1-op-1 hergebruikt van
 * .fq-calc-print-wrap .btn / .btn-primary (zelfde eigenschappen, zelfde
 * waarden, zelfde — en enige — state: alleen :hover, want de bron-regel
 * heeft zelf ook geen losse :focus-visible/:active/:disabled-stijl).
 * De inline style="padding:10px 20px" op dit specifieke element (HTML,
 * niet aangepast) wint qua specificity over de padding hieronder — dat
 * is bestaand gedrag en blijft ongewijzigd.
 * ------------------------------------------------------------------- */
#fq-calc-sticky .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:999px;
  border:1px solid transparent;
  font-family:var(--font-body);
  font-weight:700;
  font-size:15px;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:opacity .15s ease;
}
#fq-calc-sticky .btn:hover{
  opacity:.9;
}
#fq-calc-sticky .btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#0a0a0b;
}

/* Aantoonbare noodzaak voor de 3 aanvullingen hieronder (geen van deze
 * eigenschappen bestond al op .fq-calc-sticky of zijn kinderen):
 * 1) box-sizing: de balk staat left:0/right:0 (=100vw) MET
 *    padding:14px 20px; zonder border-box telt die padding erbovenop en
 *    duwt de knop over de viewportrand — geen box-sizing stond hier al
 *    vast.
 * 2) min-width:0 op .k + flex-shrink:0/white-space:nowrap op de knop:
 *    flex-items hebben standaard min-width:auto, waardoor lange knoptekst
 *    ("Bekijk resultaat ↑") op smalle telefoons (<360px) de rij breder
 *    maakt dan de viewport i.p.v. dat .k inschikt — leidt tot horizontale
 *    overflow van de hele pagina.
 * 3) safe-area-inset-bottom: een fixed bottom:0-balk zonder deze padding
 *    valt op iPhones met home-indicator (alle iPhone X en nieuwer)
 *    deels samen met de systeem-gebaarzone — niets in de bestaande regel
 *    hield hier al rekening mee. */
#fq-calc-sticky,
#fq-calc-sticky *{
  box-sizing:border-box;
}
#fq-calc-sticky{
  padding-bottom:max(14px, env(safe-area-inset-bottom));
}
#fq-calc-sticky .k{
  min-width:0;
  overflow:hidden;
}
#fq-calc-sticky .btn{
  flex-shrink:0;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.fq-calc-recalc{margin-bottom:24px}
.fq-bmi-scale{display:flex;height:10px;border-radius:5px;overflow:visible;position:relative;margin-top:10px}
.fq-bmi-scale i{height:100%}
.fq-bmi-scale i:first-child{border-radius:5px 0 0 5px}
.fq-bmi-scale .z4{border-radius:0 5px 5px 0}
.fq-bmi-scale .z1{width:14%;background:var(--bg-elevated);border:1px solid var(--border-strong);border-right:none}
.fq-bmi-scale .z2{width:26%;background:var(--accent);opacity:.85}
.fq-bmi-scale .z3{width:20%;background:#ffbe5a;opacity:.55}
.fq-bmi-scale .z4{width:40%;background:#ffbe5a;opacity:.28}
.fq-bmi-marker{position:absolute;top:-5px;width:3px;height:20px;background:var(--text-primary);border-radius:2px;box-shadow:0 0 0 2px rgba(10,10,11,.65);transition:left .3s ease}
.fq-bmi-scale-lbls{position:relative;height:18px;margin-top:6px;font-size:11px;color:var(--text-tertiary);font-weight:700}
.fq-bmi-scale-lbls span{position:absolute;transform:translateX(-50%)}
.fq-ffmi-scale{display:flex;height:10px;border-radius:5px;overflow:visible;position:relative;margin-top:10px}
.fq-ffmi-scale i{height:100%;width:20%}
.fq-ffmi-scale .s1{background:var(--bg-elevated);border:1px solid var(--border-strong);border-right:none;border-radius:5px 0 0 5px}
.fq-ffmi-scale .s2{background:var(--accent);opacity:.22}
.fq-ffmi-scale .s3{background:var(--accent);opacity:.45}
.fq-ffmi-scale .s4{background:var(--accent);opacity:.7}
.fq-ffmi-scale .s5{background:var(--accent);opacity:.95;border-radius:0 5px 5px 0}
.fq-orm-rmgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
@media (max-width:600px){.fq-orm-rmgrid{grid-template-columns:1fr}}
.fq-orm-goal{width:100%;text-align:left;display:grid;grid-template-columns:1.4fr .8fr 1fr 1fr;gap:12px;align-items:baseline;padding:14px 16px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius-sm);margin-bottom:8px;cursor:pointer;font-family:var(--font-body);color:var(--text-secondary);font-size:14px;min-height:44px;transition:background-color .25s ease-out,border-color .25s ease-out}
.fq-orm-goal:hover{border-color:var(--accent)}
.fq-orm-goal.is-on{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-soft),var(--bg-elevated) 70%)}
.fq-orm-goal b{color:var(--text-primary);font-size:15px}
.fq-orm-goal .g-w{font-family:var(--font-display);font-size:19px;color:var(--accent);font-weight:600}


/* Persoonlijke trainingskaart (1RM) — herstijling default/hover/selected, hoge specificiteit i.v.m. .elementor-kit-225 button */
.fq-orm-goal.fq-orm-goal{background:transparent;border-color:#8C52FF}
.fq-orm-goal.fq-orm-goal.is-on{background:rgba(140,82,255,.12);border-color:var(--accent)}
.fq-orm-goal.fq-orm-goal:hover,
.fq-orm-goal.fq-orm-goal.is-on:hover{background:var(--accent-soft);border-color:var(--accent)}
.fq-orm-goal.fq-orm-goal b{color:var(--text-primary)}
.fq-orm-goal.fq-orm-goal > span:nth-child(2){color:var(--text-primary)}
.fq-orm-goal.fq-orm-goal > span:last-child{color:var(--text-primary)}
.fq-orm-goal.fq-orm-goal .g-w{color:var(--accent)}
@media (max-width:600px){.fq-orm-goal{grid-template-columns:1fr 1fr;gap:4px 12px}}
/* ---------------------------------------------------------------------
 * Print-CSS (productieverbetering #3) — Elementor/WordPress-veilig
 * Maakt GEEN aanname over de DOM-diepte (geen "body > header/main/footer").
 * Techniek: alles krijgt visibility:hidden + max-height:0 (i.p.v.
 * display:none), zodat een verborgen voorouder de zichtbare afstammeling
 * niet blokkeert — visibility laat dat toe, display niet. De te printen
 * kaart krijgt visibility:visible terug en wordt met position:absolute
 * los van de samengeklapte rest aan de top van de afdrukpagina gepind,
 * zodat er geen lege pagina's ontstaan. Drie toestanden, ongewijzigd
 * t.o.v. het origineel:
 *  - géén speciale class op body  → print #fq-calc-result (kCal)
 *  - body.fq-print-an             → print #fq-an-result (Analyse)
 *  - body.fq-print-sec            → print de dynamische .fq-print-target
 *                                    (BMI / FFMI / 1RM)
 * ------------------------------------------------------------------- */
@media print{
  body.fq-print-sec *,
  body.fq-print-an *,
  body:not(.fq-print-sec):not(.fq-print-an) *{
    visibility:hidden!important;
    max-height:0!important;
    overflow:hidden!important;
  }

  body:not(.fq-print-sec):not(.fq-print-an) #fq-calc-result,
  body:not(.fq-print-sec):not(.fq-print-an) #fq-calc-result *,
  body.fq-print-an #fq-an-result,
  body.fq-print-an #fq-an-result *,
  body.fq-print-sec .fq-print-target,
  body.fq-print-sec .fq-print-target *{
    visibility:visible!important;
    max-height:none!important;
    overflow:visible!important;
  }

  #fq-calc-result,#fq-an-result,.fq-print-target{
    position:absolute!important;
    top:0!important;
    left:0!important;
    width:100%!important;
    display:block!important;
    box-shadow:none!important;
    border-color:#ccc!important;
    background:#fff!important;
  }
  #fq-calc-result *,#fq-an-result *,.fq-print-target *{
    color:#111!important;background:none!important;border-color:#ddd!important;
  }
  #fq-calc-result .fq-calc-actions,#fq-calc-result .fq-calc-macrobar,
  #fq-an-result .fq-calc-actions,.fq-print-target .fq-calc-actions{
    display:none!important;
  }
  html,body{background:#fff;color:#111;height:auto!important}
}

/* LOCKED: calculator tab parity with approved prototype — do not alter from unrelated component fixes */
.fq-calc-tabs .fq-calc-tab:not(.is-active){
  color:var(--text-secondary,#a3a3a8);
  border-color:var(--border-strong,rgba(255,255,255,.16));
  background:transparent;
}
/* LOCKED: inactive calculator tab hover border #8C52FF */
.fq-calc-tabs .fq-calc-tab:not(.is-active):hover{
  color:#c9c9ce;
  border-color:#8C52FF;
}
.fq-calc-tabs .fq-calc-tab:not(.is-active):focus-visible{
  outline:2px solid var(--accent,#3ee8a8);
  outline-offset:2px;
  border-color:rgba(255,255,255,.28);
}
.fq-calc-tabs .fq-calc-tab.is-active{
  color:var(--accent,#3ee8a8);
  background:var(--accent-soft,rgba(62,232,168,.12));
  border-color:var(--accent,#3ee8a8);
}
.fq-calc-tabs .fq-calc-tab.is-active:focus-visible{
  outline:2px solid var(--accent,#3ee8a8);
  outline-offset:2px;
}


/* LOCKED: calculator input focus parity — purple #8C52FF, no inner outline */
.fq-calc-print-wrap .fq-calc-num:focus-within{
  border-color: #8C52FF;
  box-shadow: 0 0 0 1px #8C52FF;
}
.fq-calc-print-wrap .fq-calc-num input:focus,
.fq-calc-print-wrap .fq-calc-num input:focus-visible{
  outline: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
  color: var(--text-primary);
  background: none;
}
.fq-calc-print-wrap .fq-calc-num input[type=number]::-webkit-inner-spin-button,
.fq-calc-print-wrap .fq-calc-num input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.fq-calc-print-wrap .fq-calc-num input[type=number]{
  -moz-appearance: textfield;
}

/* LOCKED: card hover/selected parity with approved prototype — do not modify from unrelated fixes */
.fq-calc-print-wrap .fq-calc-card:not(.is-on):hover,
.fq-calc-print-wrap .fq-calc-card:not(.is-on):focus{
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  border-color: var(--accent);
  color: var(--text-secondary);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.fq-calc-print-wrap .fq-calc-card.is-on:hover,
.fq-calc-print-wrap .fq-calc-card.is-on:focus{
  background: linear-gradient(180deg,var(--accent-soft),var(--bg-elevated) 70%);
  border-radius: var(--radius-sm);
  border-color: var(--accent);
  color: var(--text-secondary);
  box-shadow: 0 0 0 3px var(--accent-soft);
}


/* LOCKED: approved calculator component parity with original prototype -- do not modify from unrelated fixes */
.fq-calc-print-wrap .fq-calc-num input{
  border: none;
  border-radius: 0;
  padding: 12px 4px 12px 16px;
}
.fq-calc-print-wrap .fq-calc-num button{
  color: var(--text-secondary);
  padding: 0;
  border-radius: 0;
  border-left-color: var(--border);
}
.fq-calc-print-wrap .fq-calc-pill{
  padding: 11px 22px;
}
.fq-calc-print-wrap .fq-calc-pill:not(.is-on){
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.fq-calc-print-wrap .fq-calc-card{
  padding: 18px;
  border-radius: var(--radius-sm);
}
.fq-calc-print-wrap .fq-calc-card:not(.is-on){
  color: var(--text-secondary);
  border-color: var(--border-strong);
}

/* LOCKED: selected card text colors remain fixed after hover */
.fq-calc-print-wrap .fq-calc-card.is-on{
  color: var(--text-secondary);
}


/* LOCKED: primary button parity — mint default, dark outlined hover */
/* Diagnose: alle groene primaire knoppen delen dezelfde .btn-primary
 * component, maar in 3 losse contexten (.fq-calc-print-wrap, .cta-band,
 * #fq-calc-sticky) — elk met een eigen kopie van dezelfde declaraties,
 * omdat geen van deze drie eenzelfde voorouder deelt. Twee afwijkingen
 * gevonden t.o.v. PS1/PS2:
 * 1) #fq-calc-sticky definieerde --accent niet lokaal (zelfde
 *    scoping-issue als eerder bij .cta-band), waardoor de knop daar
 *    computed op background:transparent / border+tekst bijna zwart
 *    uitkwam i.p.v. mintgroen — hersteld met dezelfde fallbackwaarde.
 * 2) Er bestond geen aparte hoverstijl voor .btn-primary: alle knoppen
 *    deelden de generieke ".btn:hover{opacity:.9}" (fade), niet de
 *    donkere/transparante knop met mintgroene rand uit PS2. Hieronder
 *    toegevoegd voor alle drie de contexten, met opacity:1 om de oude
 *    fade-regel te neutraliseren. Geen wijziging aan breedte, hoogte,
 *    border-radius, padding of border-width — alleen kleur/transition. */
#fq-calc-sticky{
  --accent: var(--e-global-color-primary, #3ee8a8);
}
.fq-calc-print-wrap .btn-primary,
.cta-band .btn-primary,
#fq-calc-sticky .btn-primary{
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
/* LOCKED: primary button hover background #3EE8A81F */
.fq-calc-print-wrap .btn-primary:hover,
.cta-band .btn-primary:hover,
#fq-calc-sticky .btn-primary:hover{
  opacity:1;
  background:#3EE8A81F;
  border-color:#3ee8a8;
  color:#f4f4f5;
}
.fq-calc-print-wrap .btn-primary:focus-visible,
.cta-band .btn-primary:focus-visible,
#fq-calc-sticky .btn-primary:focus-visible{
  outline:2px solid #3ee8a8;
  outline-offset:2px;
}
.fq-calc-print-wrap .btn-primary:active,
.cta-band .btn-primary:active,
#fq-calc-sticky .btn-primary:active{
  opacity:.85;
}
.fq-calc-print-wrap .btn-primary:disabled,
.cta-band .btn-primary:disabled,
#fq-calc-sticky .btn-primary:disabled{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
}

/* LOCKED: wizard step fade-in transition — new step/result reveal only */
@keyframes fqStepFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fq-calc-print-wrap .fq-fade-in{animation:fqStepFadeIn 500ms cubic-bezier(.22,.61,.36,1) both}
@media (prefers-reduced-motion: reduce){
  .fq-calc-print-wrap .fq-fade-in{animation:none}
}

/* Scroll-triggered fade up: FAQ-sectie (Over deze calculator) en CTA-sectie (Dit is een startpunt, geen traject) */
@keyframes fqRevealFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fq-reveal{opacity:0;transform:translateY(20px)}
.fq-reveal.fq-reveal-in{animation:fqRevealFadeUp 300ms ease-out both}
@media (prefers-reduced-motion: reduce){
  .fq-reveal{opacity:1;transform:none}
  .fq-reveal.fq-reveal-in{animation:none}
}

/* LOCKED: mobile numeric fields — stack inputs and hide steppers on phones */
@media (max-width:767px){
  .fq-calc-print-wrap .fq-calc-grid2,
  .fq-calc-print-wrap .fq-calc-grid4{
    grid-template-columns:1fr !important;
  }
  .fq-calc-print-wrap .fq-calc-num button{
    display:none;
  }
}

/* LOCKED: mobile 1RM result spacing — prevent value/exercise overlap */
@media (max-width:767px){
  #fq-orm-result .fq-calc-stat.hero b{
    line-height:1.15;
    margin-bottom:8px;
  }
  #fq-orm-result .fq-calc-stat.hero .band{
    margin-top:8px;
    margin-bottom:8px;
  }
  #fq-orm-result .fq-calc-stat.hero span:last-child{
    display:block;
    margin-top:6px;
  }
}