/* Vergelijkingsmodules en redactionele blokken (inc/vergelijker.php)
   Kleuren volgen het bestaande TastyDaily-palet van de site. */

.fb-vgl,
.fb-vgl-blok {
  --fb-groen: #5EAD39;
  --fb-donker: #243F2F;
  --fb-grijs: #6b6b6b;
  --fb-lijn: #e4e7e4;
  --fb-vlak: #f6f8f5;
  --fb-actie: #fff6e8;
  --fb-actie-lijn: #f0dcc0;
  color: var(--fb-donker);
  margin: 0 0 28px;
}

.fb-vgl *,
.fb-vgl-blok * { box-sizing: border-box; }

/* --------------------------------------------------- matrix (omgedraaid) */

.fb-vgl__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--fb-lijn);
  border-radius: 14px;
  background: #fff;
}

.fb-vgl__scroll:focus-visible { outline: 2px solid var(--fb-groen); outline-offset: 2px; }

.fb-vgl--matrix .fb-vgl__tabel {
  width: 100%;
  min-width: 760px;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  line-height: 1.45;
}

.fb-vgl--matrix th,
.fb-vgl--matrix td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--fb-lijn);
  background: #fff;
}

.fb-vgl--matrix tbody tr:last-child th,
.fb-vgl--matrix tbody tr:last-child td { border-bottom: 0; }

.fb-vgl--matrix thead th {
  background: var(--fb-vlak);
  font-size: 15px;
  min-width: 150px;
}

.fb-vgl--matrix thead td { background: var(--fb-vlak); }

/* Eerste kolom blijft staan bij horizontaal scrollen */
.fb-vgl--matrix tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 150px;
  min-width: 130px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fb-grijs);
  background: var(--fb-vlak);
  border-right: 1px solid var(--fb-lijn);
}

.fb-vgl__rij-voorbeeld td,
.fb-vgl__rij-portie td { font-weight: 700; }

.fb-vgl__naam {
  color: var(--fb-donker);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--fb-groen);
  text-underline-offset: 3px;
}

.fb-vgl__status {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 6px;
}

.fb-vgl__status--ja { background: #e9f4e3; color: #2f6b17; }
.fb-vgl__status--nee { background: var(--fb-actie); color: #8a5a12; }

.fb-vgl__voetnoot {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fb-grijs);
}

/* ------------------------------------------------------------ prijstabel */

.fb-vgl--prijs .fb-vgl__tabel {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.45;
  background: #fff;
  border: 1px solid var(--fb-lijn);
}

.fb-vgl--prijs th,
.fb-vgl--prijs td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--fb-lijn);
}

.fb-vgl--prijs thead th {
  font-size: 13px;
  background: var(--fb-vlak);
}

.fb-vgl--prijs small {
  display: block;
  font-size: 12px;
  color: var(--fb-grijs);
}

/* Acties zijn visueel apart van normale prijzen */
.fb-vgl--prijs .fb-vgl__kop-actie,
.fb-vgl--prijs .fb-vgl__actie {
  background: var(--fb-actie);
  border-left: 3px solid var(--fb-actie-lijn);
}

.fb-vgl__actie a {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--fb-donker);
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .fb-vgl--prijs .fb-vgl__tabel,
  .fb-vgl--prijs tbody,
  .fb-vgl--prijs tr,
  .fb-vgl--prijs th,
  .fb-vgl--prijs td { display: block; width: 100%; }

  .fb-vgl--prijs .fb-vgl__tabel { border: 0; background: transparent; }
  .fb-vgl--prijs thead { display: none; }

  .fb-vgl--prijs tr {
    margin: 0 0 14px;
    background: #fff;
    border: 1px solid var(--fb-lijn);
    border-radius: 12px;
    overflow: hidden;
  }

  .fb-vgl--prijs tbody th { font-size: 16px; background: var(--fb-vlak); }

  .fb-vgl--prijs td { display: grid; grid-template-columns: 42% 1fr; gap: 10px; }
  .fb-vgl--prijs td::before {
    content: attr(data-label);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--fb-grijs);
  }
  .fb-vgl--prijs td:last-child { border-bottom: 0; }
  .fb-vgl--prijs .fb-vgl__actie { border-left: 0; }
}

/* ------------------------------------------- korte samenvatting per merk */

.fb-vgl--kort {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.fb-vgl__merk {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--fb-lijn);
  border-radius: 14px;
}

.fb-vgl__merk h3 { margin: 0; font-size: 20px; }

.fb-vgl__merktype {
  margin: 2px 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fb-groen);
}

.fb-vgl__merk p { font-size: 15px; line-height: 1.55; margin: 0 0 10px; }

.fb-vgl__pluismin {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
}

.fb-vgl__pluismin li {
  margin: 0 0 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--fb-vlak);
}

.fb-vgl__pluismin .is-min { background: #fbf3ee; }
.fb-vgl__pluismin .is-test { background: #fff; border: 1px dashed var(--fb-lijn); }

.fb-vgl__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: auto !important;
  font-size: 14px;
}

.fb-vgl__links a {
  color: var(--fb-donker);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fb-vgl__links .fb-vgl__uit { color: var(--fb-grijs); font-weight: 600; }

/* --------------------------------------------------- controle en melding */

.fb-vgl__controle {
  margin: 0 0 18px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  background: var(--fb-vlak);
  border-left: 4px solid var(--fb-groen);
  border-radius: 0 10px 10px 0;
}

.fb-affiliate {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: #6b6b6b;
}

.fb-affiliate a { color: inherit; text-decoration: underline; }

/* ------------------------------------------- redactionele blokken (pagina) */

.fb-vgl-blok.fb-vgl-blok h2 { margin: 0 0 12px; }
.fb-vgl-blok.fb-vgl-blok h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.3; }
.fb-vgl-blok p { line-height: 1.65; }

.fb-vgl-advies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin: 16px 0 0;
}

.fb-vgl-advies > div {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--fb-lijn);
  border-radius: 12px;
}

.fb-vgl-advies.fb-vgl-advies p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
.fb-vgl-advies.fb-vgl-advies p:last-child { margin-bottom: 0; }
.fb-vgl-advies.fb-vgl-advies .fb-vgl-min { font-size: 14px; color: #7a4a2a; }

.fb-vgl-antwoord {
  padding: 18px 22px;
  background: var(--fb-vlak);
  border: 1px solid var(--fb-lijn);
  border-radius: 14px;
}

.fb-vgl-antwoord ul { margin: 8px 0 0; padding-left: 20px; }
.fb-vgl-antwoord li { margin: 0 0 6px; line-height: 1.55; }

.fb-vgl-verschil {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 700px) {
  .fb-vgl-verschil { grid-template-columns: 1fr; }
}

.fb-vgl-verschil > div {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--fb-lijn);
  border-radius: 12px;
}

.fb-vgl-faq details {
  border-bottom: 1px solid var(--fb-lijn);
  padding: 12px 0;
}

.fb-vgl-faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  list-style-position: outside;
}

.fb-vgl-faq details p { margin: 8px 0 0; }

.fb-vgl-verschil.fb-vgl-verschil p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
.fb-vgl-verschil.fb-vgl-verschil p:last-child { margin-bottom: 0; }
.fb-vgl-verschil ul { margin: 0; padding-left: 18px; }
.fb-vgl-verschil li { margin: 0 0 6px; font-size: 15px; line-height: 1.5; }
.fb-vgl-verschil + p { margin-top: 16px; }
.fb-vgl-antwoord.fb-vgl-antwoord p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .fb-vgl-advies > div,
  .fb-vgl-verschil > div { padding: 14px 14px; }
  .fb-vgl-antwoord { padding: 14px 14px; }
}

/* ------------------------------------------------------- logo's en koppen */

/* Kolomkop in de matrix: tegel boven de naam */
.fb-vgl__kop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: var(--fb-donker);
  text-decoration: none !important;
}

/* Alle logo's in een tegel van hetzelfde formaat */
.fb-vgl__tegel {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 44px;
  padding: 5px 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--fb-lijn);
  border-radius: 8px;
}

.fb-vgl__tegel .fb-vgl__logo {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: contain;
  border-radius: 0;
}

.fb-vgl__tegel--cover { padding: 0; }
.fb-vgl__tegel--cover .fb-vgl__logo { object-fit: cover; }

.fb-vgl__tegel--tekst {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.3px;
  color: var(--fb-donker);
}

.fb-vgl .fb-vgl__naam {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--fb-donker);
  text-decoration: none;
}

.fb-vgl__kop .fb-vgl__naam {
  text-decoration: underline;
  text-decoration-color: var(--fb-groen);
  text-underline-offset: 3px;
}

.fb-vgl__kop:hover .fb-vgl__naam { text-decoration-thickness: 2px; }

/* Kaartkop: tegel links, naam rechts */
.fb-vgl .fb-vgl__merkkop,
.fb-vgl .fb-vgl__stapelkop {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}

.fb-vgl .fb-vgl__merkkop .fb-vgl__naam,
.fb-vgl .fb-vgl__stapelkop .fb-vgl__naam { font-size: 18px; }

.fb-vgl__merk header { margin-bottom: 10px; }
.fb-vgl .fb-vgl__merktype { margin: 8px 0 0; }

/* Matrix: koppen en laatste rij netjes uitlijnen */
.fb-vgl--matrix thead th { vertical-align: bottom; padding-top: 14px; padding-bottom: 12px; }
.fb-vgl__rij-links td { vertical-align: middle; }

/* Duidelijke link naar de review */
.fb-vgl .fb-vgl__review,
.fb-vgl__links a.fb-vgl__review {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff !important;
  background: var(--fb-donker);
  border-radius: 8px;
  text-decoration: none !important;
}

.fb-vgl .fb-vgl__review:hover,
.fb-vgl .fb-vgl__review:focus-visible { background: var(--fb-groen); color: #fff !important; }

.fb-vgl__links { align-items: center; }

.fb-vgl__status { margin: 0 4px 4px 0; }
.fb-vgl__status--loopt { background: #eef3fb; color: #2b4a7a; }

/* ------------------------------------------- gestapelde vergelijking */

.fb-vgl__stapel { display: none; }

@media (max-width: 1024px) {
  .fb-vgl--matrix .fb-vgl__scroll { display: none; }

  .fb-vgl__stapel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
  }

  .fb-vgl__stapelkaart {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--fb-lijn);
    border-radius: 14px;
  }

  .fb-vgl .fb-vgl__stapelkop {
    margin: 0 0 6px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--fb-groen);
  }

  .fb-vgl__stapelkaart dl { margin: 0 0 14px; }

  .fb-vgl__stapelkaart dl > div {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--fb-lijn);
    font-size: 14px;
    line-height: 1.45;
  }

  .fb-vgl__stapelkaart dl > div:last-child { border-bottom: 0; }

  .fb-vgl__stapelkaart dt { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.45; color: var(--fb-grijs); }
  .fb-vgl__stapelkaart dd { margin: 0; }
  .fb-vgl__stapelkaart .fb-vgl__rij-voorbeeld dd,
  .fb-vgl__stapelkaart .fb-vgl__rij-portie dd { font-weight: 700; }

  .fb-vgl .fb-vgl__stapellink { margin: auto 0 0; }
  .fb-vgl .fb-vgl__stapellink .fb-vgl__review { display: flex; justify-content: center; width: 100%; }

  /* Prijstabel als kaarten: tegel en naam naast elkaar */
  .fb-vgl--prijs .fb-vgl__kop { flex-direction: row; align-items: center; gap: 12px; }
  .fb-vgl--prijs tbody th { padding: 12px; }
}

/* Bij een tekstlogo staat de naam al in de tegel; de losse naam alleen voor schermlezers */
.fb-vgl .fb-vgl__naam--verborgen {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.fb-vgl .fb-vgl__rij-links .fb-vgl__review { white-space: nowrap; }

/* ------------------------------------------------ ritme binnen .fb-kaart
   De kaart zelf regelt de ruimte tussen widgets (16px, mobiel 12px).
   Binnen een tekstblok staan onderdelen 16px uit elkaar en blijft er
   onderaan geen marge hangen, zodat elke kaart even veel lucht heeft. */

.fb-kaart .elementor-widget-container > * {
  margin-top: 0;
  margin-bottom: 16px;
}

.fb-kaart .elementor-widget-container > *:last-child,
.fb-kaart .elementor-widget-container > *:last-child > *:last-child,
.fb-kaart .fb-vgl-blok > div > :last-child,
.fb-kaart .fb-vgl-antwoord > :last-child,
.fb-kaart .fb-vgl-antwoord li:last-child,
.fb-kaart .fb-vgl-faq details:last-child {
  margin-bottom: 0;
}

.fb-kaart .fb-vgl,
.fb-kaart .fb-vgl-blok { margin-bottom: 16px; }
.fb-kaart .elementor-widget-container > .fb-vgl:last-child,
.fb-kaart .elementor-widget-container > .fb-vgl-blok:last-child { margin-bottom: 0; }

.fb-kaart .fb-vgl-advies { margin-top: 0; }
.fb-kaart .fb-vgl-verschil + p { margin-top: 0; }
.fb-kaart .fb-vgl__controle { margin: 0; }
.fb-kaart .fb-vgl__voetnoot { margin: 10px 0 0; }
.fb-kaart .fb-vgl-faq details:first-child { padding-top: 0; }
.fb-kaart .fb-vgl-faq details:last-child { border-bottom: 0; padding-bottom: 0; }
.fb-kaart .fb-vgl-antwoord ul { margin: 0 0 0; }
.fb-kaart .fb-vgl-antwoord p + ul { margin-top: 8px; }
.fb-kaart .fb-affiliate { margin-top: 0; }

@media (max-width: 767px) {
  .fb-kaart .elementor-widget-container > * { margin-bottom: 12px; }
  .fb-kaart .fb-vgl,
  .fb-kaart .fb-vgl-blok { margin-bottom: 12px; }
  .fb-kaart .fb-vgl-antwoord,
  .fb-kaart .fb-vgl-advies > div,
  .fb-kaart .fb-vgl-verschil > div,
  .fb-kaart .fb-vgl__stapelkaart,
  .fb-kaart .fb-vgl__merk { padding: 14px 12px; }
  .fb-kaart .fb-vgl-advies,
  .fb-kaart .fb-vgl-verschil,
  .fb-kaart .fb-vgl__stapel,
  .fb-kaart .fb-vgl--kort { gap: 12px; }
  .fb-kaart .fb-vgl__controle { padding: 8px 10px; }
}