/* Feedback4Sports rekentool "Sanne, Mark en Joris" (bron: F4S-tarieven-rekentool.html, opgemaakt naar wireframe p7). */
.f4s-calc{
  --f4s-navy:#122642; --f4s-blue:#35B3CE; --f4s-green:#6CB549; --f4s-tint:#E2F2F8; --f4s-grey:#F2F2F2; --f4s-muted:#5E7288; --f4s-line:#E1E8ED;
  box-sizing:border-box; width:100%; background:var(--f4s-tint); border-radius:40px; padding:72px 64px;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:64px; align-items:center;
  font-family:'Poppins',Arial,sans-serif; font-size:18px; line-height:1.55; color:var(--f4s-navy);
}
.f4s-calc *, .f4s-calc *::before, .f4s-calc *::after{box-sizing:border-box;}
.f4s-calc h2, .f4s-calc p{margin:0; padding:0;}

.f4s-calc__faces{display:flex; gap:14px; margin:0 0 28px;}
.f4s-calc__face{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:18px; font-weight:600;}
.f4s-calc__dot{width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:600; color:#fff;}
.f4s-calc__dot--1{background:var(--f4s-blue);}
.f4s-calc__dot--2{background:var(--f4s-navy);}
.f4s-calc__dot--3{background:var(--f4s-green);}

.f4s-calc .f4s-calc__title{margin:0 0 24px; font-size:56px; line-height:1.08; font-weight:600; letter-spacing:-.02em; color:var(--f4s-navy); text-wrap:balance;}
.f4s-calc .f4s-calc__title span{color:var(--f4s-blue); display:block;}
.f4s-calc .f4s-calc__text{color:var(--f4s-muted); font-size:21px; line-height:1.6; max-width:620px;}

.f4s-calc__tool{background:#fff; border-radius:32px; padding:40px 40px 30px; box-shadow:0 16px 40px rgba(18,38,66,.08);}
.f4s-calc .f4s-calc__label{display:block; margin:0 0 12px; font-size:19px; font-weight:600; color:var(--f4s-navy);}
.f4s-calc__seg{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; background:var(--f4s-grey); border-radius:20px; padding:6px; margin:0 0 26px;}
.f4s-calc .f4s-calc__opt{border:none; background:none; border-radius:16px; padding:14px 4px; margin:0; font:700 18px/1.2 'Poppins',Arial,sans-serif; color:var(--f4s-muted); cursor:pointer;}
.f4s-calc .f4s-calc__opt small{display:block; font-size:14px; font-weight:600; margin-top:2px;}
.f4s-calc .f4s-calc__opt.is-on{background:var(--f4s-navy); color:#fff;}
.f4s-calc .f4s-calc__opt:focus-visible{outline:3px solid var(--f4s-blue); outline-offset:2px;}

.f4s-calc__money{display:flex; align-items:center; border:1.5px solid var(--f4s-line); border-radius:18px; padding:0 20px; margin:0 0 26px; background:#fff;}
.f4s-calc__money span{font-weight:600; font-size:22px; color:var(--f4s-muted);}
.f4s-calc .f4s-calc__money input, .f4s-calc .f4s-calc__money input[type=number]{border:0 !important; border-radius:0; outline:none; box-shadow:none; -moz-appearance:textfield; appearance:textfield; width:100%; padding:18px 10px; margin:0; font:600 26px 'Poppins',Arial,sans-serif; color:var(--f4s-navy); background:transparent;}
.f4s-calc__money input::-webkit-outer-spin-button, .f4s-calc__money input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.f4s-calc__money:focus-within{border-color:var(--f4s-blue); box-shadow:0 0 0 3px rgba(53,179,206,.25);}

.f4s-calc__result{background:var(--f4s-tint); border-radius:24px; padding:26px 20px; text-align:center;}
.f4s-calc .f4s-calc__result p{font-size:20px; color:var(--f4s-navy);}
.f4s-calc__num{display:block; font-size:88px; line-height:1.05; font-weight:700; letter-spacing:-.02em; color:var(--f4s-blue); margin:4px 0;}
.f4s-calc .f4s-calc__note{margin:18px 0 0; font-size:15px; color:var(--f4s-muted); text-align:center;}

@media (max-width:1024px){
  .f4s-calc{grid-template-columns:1fr; gap:36px; padding:48px 36px;}
}
@media (max-width:767px){
  .f4s-calc{padding:28px 20px; border-radius:28px; gap:28px;}
  .f4s-calc__dot{width:58px; height:58px; font-size:24px;}
  .f4s-calc__face{font-size:15px;}
  .f4s-calc .f4s-calc__title{font-size:32px;}
  .f4s-calc .f4s-calc__text{font-size:17px;}
  .f4s-calc__tool{padding:24px 20px;}
  .f4s-calc .f4s-calc__label{font-size:16px;}
  .f4s-calc .f4s-calc__opt{font-size:16px; padding:12px 2px;}
  .f4s-calc__num{font-size:60px;}
}

/* lege invoer: geen grote tekst, alleen een korte aanwijzing */
.f4s-calc__result.is-leeg p{display:none;}
.f4s-calc__result.is-leeg .f4s-calc__num{font-size:18px; font-weight:500; line-height:1.5; letter-spacing:0; color:var(--f4s-navy); margin:0; padding:22px 4px;}
.f4s-calc__num{overflow-wrap:anywhere;}