/* ===========================
   VARIATIES ONLY (v2) — CSS (FULL) — HERO-ALIGNED
   ✅ ONLY FIX: full-width (Astra-proof) + hero inner = 1400 + 30
   ❗️Verder niets gewijzigd aan styling/layout
=========================== */

.fx-offer{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#0f2940;
  background:#fff;

  /* ✅ altijd onder elkaar */
  display:block;
  width:100%;
  max-width:100%;
  float:none;
  clear:both;
  box-sizing:border-box;

  /* ✅ als parent ooit flex-row is */
  flex:0 0 100%;
}

/* (veilig) */
.fx-offer, .fx-offer *{ box-sizing:border-box; }

/* ✅ INNER = exact dezelfde startlijn als hero */
.fx-offer .fx-inner{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 0px;
}

/* QUALITY */
.fx-quality{
  padding:56px 0 64px;

  /* ✅ behoud “rustige” content-breedte zoals vroeger (1100),
     maar NIET centreren → links uitgelijnd op hero-startlijn */
  max-width:1280px;
  margin:0;
}

.fx-quality h2{margin:0 0 10px;font-size:26px;font-weight:1000}
.fx-quality p{margin:0 0 10px;font-size:16px;color:rgba(15,41,64,.78)}

/* =========================
   ASTRA OVERRIDES (no blue outlines / no underline)
========================= */
.fx-offer a,
.fx-offer button,
.fx-offer [role="button"]{
  -webkit-tap-highlight-color: transparent;
  text-decoration:none !important;
  outline:none !important;
}
.fx-offer a:focus,
.fx-offer a:focus-visible,
.fx-offer button:focus,
.fx-offer button:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}
.fx-offer a::-moz-focus-inner,
.fx-offer button::-moz-focus-inner{
  border:0 !important;
}

/* compare row (✅ links onder tekst) */
.fxCompareRow{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 18px;
}

/* compare button */
.fxCompareBtn{
  border:1px solid rgba(15,41,64,.10) !important;
  background:rgba(15,41,64,.06) !important;
  color:#0f2940 !important;
  font-weight:900 !important;
  font-size:13px !important;
  padding:8px 10px !important;
  border-radius:14px !important;
  cursor:pointer !important;
  line-height:1 !important;
  white-space:nowrap;
  box-shadow:none !important;
  outline:none !important;
}
.fxCompareBtn:hover{
  background:rgba(15,41,64,.08) !important;
  color:#0f2940 !important;
}
.fxCompareBtn:focus,
.fxCompareBtn:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(15,41,64,.18) !important;
  color:#0f2940 !important;
}

/* ✅ Ons advies inline naast button */
.fxAdviceInline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  max-width:100%;
}
.fxAdviceTag{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(255,107,59,.12);
  border:1px solid rgba(255,107,59,.22);
  color:#0f2940;
  font-weight:1000;
  font-size:13px;
  line-height:1;
  white-space:nowrap;
}

/* ✅ Harde override: advies-tekst = normaal (niet vet) */
.fxAdviceText{
  font-size:13px;
  font-weight:400 !important;
  color:rgba(15,41,64,.72);
  line-height:1.35;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.fxAdviceText,
.fxAdviceText *{ font-weight:400 !important; }

/* GRID */
.fx-quality-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  width:100%;
  max-width:100%;
}

/* RADIO CARDS */
.fx-q{position:relative}
.fx-q input{position:absolute;opacity:0;inset:0;pointer-events:none}

/* ✅ label is de tegel */
.fx-q label{
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(15,41,64,.12);
  padding:22px;
  cursor:pointer;
  transition:.15s ease;
  position:relative;
  height:100%;
}

/* ✅ multi hover bounce blijft */
.fx-q label:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(15,41,64,.12);
}
.fx-q input:focus-visible + label{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(15,41,64,.18) !important;
}

/* ✅ multi oranje selectiegloed blijft */
.fx-q input:checked + label{
  border-color:#FF6B3B;
  box-shadow:0 0 0 3px rgba(255,107,59,.18), 0 14px 30px rgba(15,41,64,.10);
}

.fx-q h3{
  margin:0 0 6px;
  font-size:17px;
  font-weight:1000;
  color:#0f2940;
}

/* prijs + pill */
.fx-q .fx-price{
  font-size:18px;
  font-weight:1000;
  margin-bottom:8px;
  display:flex;
  align-items:baseline;
  gap:8px;
  color:#0f2940;
}
.fx-q .fx-pill{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 8px;
  background:#fff;
  border:1px solid rgba(15,41,64,.10);
  font-size:12px;
  font-weight:1000;
  color:rgba(15,41,64,.80);
}

/* garantie */
.fx-q .fx-guarantee{
  margin-bottom:10px;
  line-height:1.1;
}
.fx-q .fx-guarantee strong{
  font-size:13px;
  font-weight:1000;
  color:#0f2940;
}

/* bullets */
.fx-q ul{padding:0;margin:0;list-style:none}
.fx-q li{
  padding-left:20px;
  position:relative;
  font-size:14px;
  font-weight:400 !important;
  color:rgba(15,41,64,.75);
  margin-bottom:6px;
}
.fx-q li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:#FF6B3B;
  font-weight:1000;
}

/* ✅ CTA IN GESELECTEERDE TEGEL */
.fx-card-cta{
  display:none;
  margin-top:auto;
  padding-top:14px;
  justify-content:center;
}
.fx-q input:checked + label .fx-card-cta{ display:flex; }

.fx-card-cta .fxCardBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:auto;
  max-width:240px;
  padding:10px 14px;
  border-radius:14px;

  font-weight:1000;
  text-decoration:none !important;

  transform:none !important;
  box-shadow:none !important;
}
.fx-card-cta .fxCardBtn:hover{ transform:translateY(-1px); }
.fx-card-cta .fxCardBtn:focus,
.fx-card-cta .fxCardBtn:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(15,41,64,.18) !important;
}

/* ✅ “Aanrader” badge (multi) */
.fx-q.has-reco label h3{ padding-right:92px; }
.fx-q.has-reco .fx-reco{
  position:absolute;
  top:14px;
  right:14px;
  left:auto;

  background:rgba(255,107,59,.14) !important;
  border:1px solid rgba(255,107,59,.28) !important;
  color:#FF6B3B !important;

  font-weight:1000;
  font-size:11px;
  padding:4px 8px !important;
  border-radius:999px;
  z-index:3;
  line-height:1;
  box-shadow:none !important;
}

/* =========================
   INBEGREPEN / VERWACHTING
========================= */
.fx-what5{margin:18px 0 0;color:#0f2940}
.fx-what5 .line{
  padding:10px 0;
  border-top:1px dashed rgba(15,41,64,.18);
  font-size:14px;
  font-weight:400;
  color:rgba(15,41,64,.78);
  line-height:1.45;
}
.fx-what5 .line:first-of-type{border-top:0;padding-top:0}

/* tags */
.fx-what5 .tag{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 8px;
  background:transparent;
  border:1px solid rgba(15,41,64,.14);
  font-size:12px;
  font-weight:1000;
  color:rgba(15,41,64,.72);
  margin-right:10px;
}

/* extra zin */
.fx-what5 .underExpectation{
  margin-top:6px;
  font-size:14px;
  font-weight:400;
  color:rgba(15,41,64,.78);
}
.fx-what5 .underExpectation strong{font-weight:1000;color:#0f2940}

/* =========================
   COMPARE MODAL (v2)
========================= */
.fxModal{display:none;position:fixed;inset:0;z-index:999999}
.fxModal.is-open{display:block}
.fxModalBackdrop{position:absolute;inset:0;background:rgba(15,41,64,.45);backdrop-filter:blur(2px)}
.fxModalPanel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(760px, calc(100% - 28px));
  max-height:min(78vh, 720px);
  overflow:auto;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(15,41,64,.12);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(15,41,64,.22);
  padding:14px;
}
.fxModalTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(15,41,64,.10);
}
.fxModalTitle{margin:0;font-weight:1000;font-size:16px;color:#0f2940}
.fxModalSub{margin:6px 0 0;font-weight:400;font-size:13px;color:rgba(15,41,64,.70);line-height:1.45}

.fxModalClose{
  border:1px solid rgba(15,41,64,.10) !important;
  background:rgba(15,41,64,.06) !important;
  color:#0f2940 !important;
  font-weight:900;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:none !important;
  outline:none !important;
}
.fxModalClose:hover{ background:rgba(15,41,64,.08) !important; color:#0f2940 !important; }
.fxModalClose:focus,
.fxModalClose:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(15,41,64,.18) !important;
  color:#0f2940 !important;
}

.fxCompareGrid{margin-top:12px;display:grid;gap:10px}
.fxCompareCard{
  border:1px solid rgba(15,41,64,.12);
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 22px rgba(15,41,64,.06);
  padding:12px;
}
.fxCompareHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fxCompareName{font-weight:1000;color:#0f2940;display:flex;align-items:center;gap:8px;min-width:0}
.fxPricePill{
  display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;
  background:rgba(255,107,59,.12);
  border:1px solid rgba(255,107,59,.22);
  color:rgba(15,41,64,.92);
  font-weight:900;
  font-size:12.5px;letter-spacing:.2px;white-space:nowrap;
}
.fxStatList{margin:10px 0 0;display:grid;gap:8px}
.fxStatRow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.fxStatKey{font-size:13px;font-weight:700;color:rgba(15,41,64,.70);}
.fxStatVal{
  font-size:13px;font-weight:600;color:rgba(15,41,64,.72);
  display:inline-flex;align-items:center;gap:8px;text-align:right;
}
.fxStatVal--advice{ text-align:right; line-height:1.45; max-width:420px; font-weight:600; }
.fxStatPill{
  display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;
  background:rgba(15,41,64,.06);
  border:1px solid rgba(15,41,64,.10);
  font-size:12px;font-weight:800;color:rgba(15,41,64,.80);white-space:nowrap;
}

/* responsive */
@media(max-width:900px){
  .fx-quality-grid{grid-template-columns:1fr}
  .fx-q.has-reco label h3{ padding-right:84px; }
  .fx-card-cta .fxCardBtn{max-width:220px}
}

/* =========================================================
   ✅ SINGLE INCLUDED OVERRIDES (ALLEEN voor fx-offer--included)
========================================================= */

/* single grid: 1 tegel */
.fx-offer--single .fx-quality-grid{
  grid-template-columns:1fr;
}

/* 2-koloms layout enkel bij included */
.fx-offer--included .fx-quality{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:18px;
  align-items:start;
}

/* ✅ Titel + intro onder elkaar, links (force) */
.fx-offer--included .fx-quality > h2{
  grid-column:1 / 2;
  margin-bottom:8px;
}
.fx-offer--included .fx-quality > p{
  grid-column:1 / 2;
  margin-top:0;
}

/* kaart links */
.fx-offer--included .fx-quality-grid{
  grid-column:1 / 2;
}

/* ✅ kaart: statisch + licht oranje achtergrond */
.fx-offer--included .fx-q label{
  cursor:default;
  background:rgba(255,107,59,.08);
  border:1px solid rgba(255,107,59,.18);
}
.fx-offer--included .fx-q label:hover{
  transform:none;
  box-shadow:none;
}
.fx-offer--included .fx-q input:checked + label{
  border-color:rgba(255,107,59,.18);
  box-shadow:none;
}

/* ✅ aanraders in single: weg */
.fx-offer--included .fxSingleBadges{
  display:none !important;
}
.fx-offer--included .fxSingleBadge{
  display:none !important;
}

/* ✅ verberg "12 maanden garantie" regel */
.fx-offer--included .fx-q .fx-guarantee{
  display:none !important;
}

/* =========================
   ✅ TIPS BOX (ALLEEN DEZE WIJZIGEN)
   - witte achtergrond
   - label in oranje
   - clean & ontsmet / extra services / korting bold
========================= */

/* tips rechts */
.fxTips{
  grid-column:2 / 3;
  margin:0;
  padding:14px;
  border-radius:18px;

  /* ✅ wit */
  background:#fff;
  border:1px solid rgba(15,41,64,.12);
}

/* stack tag boven tekst */
.fxTips__item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:10px 0;
}
.fxTips__item--split{
  border-top:1px dashed rgba(15,41,64,.18);
}

/* ✅ label wit + oranje border/tekst */
.fxTips__tag{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:5px 9px;

  background:#fff;
  border:1px solid rgba(255,107,59,.35);
  color:#FF6B3B;

  font-size:12px;
  font-weight:1000;
  white-space:nowrap;
  line-height:1;
}

.fxTips__text{
  font-size:14px;
  font-weight:400;
  color:rgba(15,41,64,.78);
  line-height:1.5;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ✅ hier mag wél vet: extra services, korting, Clean & ontsmet */
.fxTips__text strong{
  font-weight:1000 !important;
  color:#0f2940 !important;
}

/* mobiel: tips onderaan */
@media(max-width:900px){
  .fx-offer--included .fx-quality{
    display:block;
  }
  .fxTips{
    margin:18px 0 0;
  }
}