/* Feedback4Sports tarieven: kop, ledenschuif en pakketten (bron: F4S-tarieven-pakketten.html, opgemaakt naar wireframe p7). Poppins komt uit de Elementor-kit. */
.f4s-tar{
  --f4s-navy:#122642; --f4s-blue:#35B3CE; --f4s-tint:#E2F2F8; --f4s-pill:#A9DDEC; --f4s-orange:#FF9222; --f4s-orange-h:#EE8212;
  --f4s-muted:#5E7288; --f4s-line:#E1E8ED;
  box-sizing:border-box; width:100%; font-family:'Poppins',Arial,sans-serif; font-size:18px; line-height:1.55; color:var(--f4s-navy);
}
.f4s-tar *, .f4s-tar *::before, .f4s-tar *::after{box-sizing:border-box;}
.f4s-tar h2, .f4s-tar h3, .f4s-tar p{margin:0; padding:0;}

/* paneel bovenaan (schuift over de hero) */
.f4s-tar__top{background:var(--f4s-tint); border-radius:40px; padding:56px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:48px; align-items:center;
  box-shadow:0 16px 40px rgba(18,38,66,.06);}
.f4s-tar h2{font-size:48px; line-height:1.08; font-weight:700; letter-spacing:-.02em; color:var(--f4s-navy); margin:0 0 28px; text-wrap:balance;}
.f4s-tar h2 span{color:var(--f4s-blue); display:block;}
.f4s-tar .f4s-tar__intro p{font-size:20px; line-height:1.5; color:var(--f4s-navy); max-width:540px; margin:0 0 32px;}

.f4s-tar__tog{display:inline-flex; background:#fff; border-radius:40px; padding:6px; gap:4px; flex-wrap:wrap;}
.f4s-tar .f4s-tar__tog button{border:none; background:none; margin:0; padding:14px 30px; border-radius:40px; font:700 18px/1.2 'Poppins',Arial,sans-serif; color:var(--f4s-navy); cursor:pointer; display:inline-flex; align-items:center;}
.f4s-tar .f4s-tar__tog button.is-on{background:var(--f4s-navy); color:#fff;}
.f4s-tar__tog i{font-style:normal; font-size:12px; font-weight:700; background:var(--f4s-pill); color:var(--f4s-navy); border-radius:12px; padding:3px 10px; margin-left:12px;}
.f4s-tar button:focus-visible, .f4s-tar a:focus-visible, .f4s-tar input:focus-visible{outline:3px solid var(--f4s-blue); outline-offset:3px;}

.f4s-tar__finder{background:#fff; border-radius:32px; padding:44px 48px;}
.f4s-tar__finder label{display:block; font-weight:600; font-size:20px; color:var(--f4s-navy);}
.f4s-tar .f4s-tar__count{margin:10px 0 22px; font-size:22px; color:var(--f4s-muted);}
.f4s-tar__count output{font-size:64px; font-weight:700; letter-spacing:-.03em; color:var(--f4s-blue); line-height:1; font-variant-numeric:tabular-nums;}
.f4s-tar input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:10px; margin:8px 0; border-radius:6px; cursor:pointer; border:0;
  background:linear-gradient(90deg,var(--f4s-blue) 0 var(--p,37%), #E1E8ED var(--p,37%) 100%);}
.f4s-tar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:32px; height:32px; border-radius:50%; background:#fff; border:5px solid var(--f4s-navy); box-shadow:0 2px 8px rgba(18,38,66,.25);}
.f4s-tar input[type=range]::-moz-range-thumb{width:24px; height:24px; border-radius:50%; background:#fff; border:5px solid var(--f4s-navy);}
.f4s-tar .f4s-tar__fit{margin:26px 0 0; font-size:19px;}

/* pakketkaarten */
.f4s-tar__grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:56px;}
.f4s-tar__card{position:relative; background:#fff; border:2px solid var(--f4s-line); border-radius:32px; padding:40px 28px 28px; display:flex; flex-direction:column;
  box-shadow:0 8px 24px rgba(18,38,66,.06); transition:border-color .15s, transform .15s;}
.f4s-tar__badge{position:absolute; top:-16px; left:28px; background:var(--f4s-blue); color:#fff; font-size:15px; font-weight:700; border-radius:20px; padding:4px 16px; display:none;}
.f4s-tar__card.is-fit{border-color:var(--f4s-blue); transform:translateY(-6px);}
.f4s-tar__card.is-fit .f4s-tar__badge{display:inline-block;}
.f4s-tar__card:hover, .f4s-tar__card:focus-within{border-color:var(--f4s-blue);}
.f4s-tar__card--multi{background:var(--f4s-tint); border-color:var(--f4s-tint);}
.f4s-tar h3{font-size:26px; font-weight:600; color:var(--f4s-navy); line-height:1.25;}
.f4s-tar .f4s-tar__q{font-size:18px; color:var(--f4s-muted); margin:6px 0 22px;}
.f4s-tar .f4s-tar__amt{font-size:44px; font-weight:700; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums;}
.f4s-tar .f4s-tar__per{font-size:18px; color:var(--f4s-muted); margin:4px 0 20px;}
.f4s-tar .f4s-tar__alt{font-size:18px; color:var(--f4s-muted); margin:0 0 16px;}
.f4s-tar .f4s-tar__terug{font-size:18px; font-weight:600; color:var(--f4s-navy); margin:0 0 28px;}
.f4s-tar .f4s-tar__btn{margin-top:auto; display:block; text-align:center; text-decoration:none; font:700 19px/1.2 'Poppins',Arial,sans-serif; padding:20px 16px; border-radius:40px;
  border:1.5px solid var(--f4s-line); color:var(--f4s-navy); background:#fff; transition:border-color .15s, background .15s;}
.f4s-tar .f4s-tar__btn:hover{border-color:var(--f4s-blue); color:var(--f4s-navy);}
.f4s-tar .f4s-tar__btn--or{background:var(--f4s-orange); border-color:var(--f4s-orange); color:#fff;}
.f4s-tar .f4s-tar__btn--or:hover{background:var(--f4s-orange-h); border-color:var(--f4s-orange-h); color:#fff;}
.f4s-tar .f4s-tar__note{margin:28px 0 0; text-align:center; font-size:14px; color:var(--f4s-muted);}

@media (max-width:1200px){
  .f4s-tar h2{font-size:40px;}
  .f4s-tar__grid{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:36px;}
}
@media (max-width:1024px){
  .f4s-tar__top{grid-template-columns:1fr; gap:32px; padding:40px 32px;}
}
@media (max-width:767px){
  .f4s-tar__top{padding:28px 20px; border-radius:28px;}
  .f4s-tar h2{font-size:32px; margin-bottom:18px;}
  .f4s-tar .f4s-tar__intro p{font-size:17px; margin-bottom:22px;}
  .f4s-tar__finder{padding:26px 22px; border-radius:24px;}
  .f4s-tar__finder label{font-size:17px;}
  .f4s-tar__count output{font-size:48px;}
  .f4s-tar .f4s-tar__fit{font-size:18px;}
  .f4s-tar__tog{display:grid; grid-template-columns:1fr 1fr; width:100%; border-radius:22px;}
  .f4s-tar .f4s-tar__tog button{padding:12px 8px; border-radius:18px; font-size:16px; flex-direction:column; justify-content:center;}
  .f4s-tar__tog i{margin:4px 0 0;}
  .f4s-tar__grid{grid-template-columns:1fr; margin-top:40px;}
  .f4s-tar__card{padding:32px 22px 22px; border-radius:26px;}
  .f4s-tar .f4s-tar__amt{font-size:38px;}
}
@media (prefers-reduced-motion: reduce){ .f4s-tar__card{transition:none;} }

/* Titels, prijzen en knoppen op dezelfde hoogte in alle vakjes (uit klant-HTML 29-10) */
@supports (grid-template-rows: subgrid){
  .f4s-tar__card{display:grid; grid-row:span 5; grid-template-rows:subgrid; row-gap:0;}
  .f4s-tar__card h3{align-self:end;}
}