/* Feedback4Sports terugverdiencalculator (bron: F4S-terugverdien-calculator.html). Lettertype Poppins komt uit de Elementor-kit. */
.f4s-tvc{
    --f4s-blue:#35B3CE; --f4s-blue-ink:#1F8FA6; --f4s-navy:#122642; --f4s-orange:#FF9222;
    --f4s-ground:#E2F2F8; --f4s-track:#C9E4EF; --f4s-muted:#5E7288;
    box-sizing:border-box; width:100%; max-width:none; margin:0; background:var(--f4s-ground); border-radius:24px;
    padding:56px 56px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center;
    font-family:'Poppins',Arial,sans-serif; color:var(--f4s-navy); line-height:1.5;
  }
  .f4s-tvc *, .f4s-tvc *::before, .f4s-tvc *::after{box-sizing:border-box;}
  .f4s-tvc h2, .f4s-tvc p{margin:0; padding:0;}
  .f4s-tvc__eyebrow{display:flex; align-items:center; gap:12px; font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--f4s-muted);}
  .f4s-tvc__eyebrow::after{content:""; width:28px; height:1px; background:var(--f4s-blue);}
  .f4s-tvc__left{display:grid; gap:22px; min-width:0;}
  .f4s-tvc__intro{display:grid; gap:10px;}
  .f4s-tvc h2{font-family:'Poppins',Arial,sans-serif; font-size:34px; line-height:1.2; font-weight:600; letter-spacing:-.01em; color:var(--f4s-navy); text-wrap:balance;}
  .f4s-tvc h2 span{color:var(--f4s-blue); white-space:nowrap;}
  .f4s-tvc .f4s-tvc__intro p{font-size:14px; line-height:1.6; color:var(--f4s-muted); max-width:34ch;}

  .f4s-tvc__ctl{display:grid; gap:10px;}
  .f4s-tvc__head{display:flex; justify-content:space-between; align-items:baseline; gap:12px;}
  .f4s-tvc__ctl label, .f4s-tvc__lbl{font-size:12px; font-weight:600; color:var(--f4s-navy);}
  .f4s-tvc__ctl output{font-size:16px; font-weight:600; color:var(--f4s-blue); font-variant-numeric:tabular-nums;}
  .f4s-tvc input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:24px; background:transparent; margin:0; padding:0; border:0; cursor:pointer; --p:50%;}
  .f4s-tvc input[type=range]::-webkit-slider-runnable-track{height:6px; border-radius:3px; background:linear-gradient(to right,var(--f4s-blue) var(--p),var(--f4s-track) var(--p));}
  .f4s-tvc input[type=range]::-moz-range-track{height:6px; border-radius:3px; background:var(--f4s-track);}
  .f4s-tvc input[type=range]::-moz-range-progress{height:6px; border-radius:3px; background:var(--f4s-blue);}
  .f4s-tvc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--f4s-navy); margin-top:-7px; box-shadow:0 2px 6px rgba(18,38,66,.2);}
  .f4s-tvc input[type=range]::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--f4s-navy); box-shadow:0 2px 6px rgba(18,38,66,.2);}
  .f4s-tvc input[type=range]:focus-visible{outline:2px solid var(--f4s-blue); outline-offset:4px; border-radius:4px;}

  .f4s-tvc__seg{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;}
  .f4s-tvc .f4s-tvc__seg button{font:500 12px 'Poppins',Arial,sans-serif; color:var(--f4s-muted); background:transparent; border:1px solid var(--f4s-track); border-radius:10px; padding:8px 6px; margin:0; cursor:pointer; display:grid; gap:1px; text-align:center; min-height:44px;}
  .f4s-tvc .f4s-tvc__seg button b{font-weight:600; font-size:13px; color:var(--f4s-navy);}
  .f4s-tvc .f4s-tvc__seg button[aria-pressed="true"]{background:#fff; border-color:var(--f4s-blue); box-shadow:0 2px 8px rgba(53,179,206,.18);}
  .f4s-tvc .f4s-tvc__seg button[aria-pressed="true"] b{color:var(--f4s-blue-ink);}
  .f4s-tvc button:focus-visible{outline:2px solid var(--f4s-blue); outline-offset:2px;}
  .f4s-tvc__hint{font-size:11px; color:var(--f4s-muted);}
  .f4s-tvc .f4s-tvc__reset{background:none; border:0; padding:0; margin:0; font:600 11px 'Poppins',Arial,sans-serif; color:var(--f4s-blue-ink); text-decoration:underline; cursor:pointer;}

  .f4s-tvc__right{display:grid; gap:12px; min-width:0;}
  .f4s-tvc__card{background:#fff; border-radius:20px; padding:26px 24px 22px; box-shadow:0 10px 30px rgba(18,38,66,.08); display:grid; gap:16px; text-align:center;}
  .f4s-tvc__k{font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--f4s-muted);}
  .f4s-tvc__big{font-size:52px; line-height:1; font-weight:700; color:var(--f4s-blue); letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
  .f4s-tvc__bigsub{font-size:13px; color:var(--f4s-muted); margin-top:-6px;}
  .f4s-tvc__viz{display:grid; gap:8px;}
  .f4s-tvc__people{display:flex; justify-content:center; flex-wrap:wrap; gap:4px;}
  .f4s-tvc__person{width:24px; height:28px; display:block;}
  .f4s-tvc__person.cost{color:var(--f4s-blue);}
  .f4s-tvc__person.win{color:var(--f4s-orange);}
  .f4s-tvc__legend{display:flex; justify-content:center; gap:16px; flex-wrap:wrap; font-size:11px; color:var(--f4s-muted);}
  .f4s-tvc__legend span{display:inline-flex; align-items:center; gap:6px;}
  .f4s-tvc__legend span::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--c);}
  .f4s-tvc__tiles{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .f4s-tvc__tile{background:var(--f4s-ground); border-radius:12px; padding:12px 10px; display:grid; gap:2px;}
  .f4s-tvc__k2{font-size:11px; color:var(--f4s-muted);}
  .f4s-tvc__v{font-size:16px; font-weight:700; color:var(--f4s-navy); font-variant-numeric:tabular-nums;}
  .f4s-tvc .f4s-tvc__note{font-size:11px; line-height:1.6; color:var(--f4s-muted); padding:0 4px;}

  @media (max-width:780px){
    .f4s-tvc{grid-template-columns:minmax(0,1fr); padding:28px 20px; gap:28px; border-radius:20px;}
    .f4s-tvc h2{font-size:28px;}
  }