/* Vergelijken: the "Vergelijk" toggle, the tray at the bottom and the /vergelijk table ---------- */
.civios-vergelijk-form { display: contents; }

/* Toggle on product cards and the fiche: outline when off, teal with a check when on. */
.civios-vergelijkknop {
  border-color: var(--civios-line);
  background: var(--civios-wit);
  color: var(--civios-teal);
}
.civios-vergelijkknop:hover { border-color: var(--civios-teal-mid); background: var(--civios-sage-soft); }
.civios-vergelijkknop.is-actief { border-color: var(--civios-teal); background: var(--civios-teal); color: var(--civios-wit); }
.civios-vergelijkknop.is-actief:hover { background: var(--civios-deep); }
.civios-productkop-acties .civios-vergelijkknop { min-height: 2.5rem; }

.civios-vergelijklink { position: relative; }

/* Tray: fixed to the bottom of the screen while products are chosen. The page gets room below its footer. */
.civios-vergelijkbalk {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  border-top: 3px solid var(--civios-gold);
  background: var(--civios-teal);
  color: var(--civios-wit);
  box-shadow: 0 -12px 28px -18px rgba(22, 64, 61, .6);
}
.civios-vergelijkbalk[hidden] { display: none; }
/* Room for the tray below the footer. The chips stay on one row below 768px, so only the refusal message changes its height. */
body:has(> .civios-vergelijkbalk:not([hidden])) { padding-bottom: 7rem; }
body:has(> .civios-vergelijkbalk:not([hidden]) .civios-vergelijkbalk-melding) { padding-bottom: 13rem; }

.civios-vergelijkbalk-inhoud {
  padding-block: .75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "titel knop" "lijst lijst" "melding melding";
  align-items: center;
  gap: .5rem 1rem;
}
.civios-vergelijkbalk-titel {
  grid-area: titel;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--civios-font-display);
  font-size: .9375rem;
  font-weight: 600;
}
.civios-vergelijkbalk-aantal {
  padding: .125rem .5rem;
  border-radius: var(--civios-r-full);
  background: var(--civios-gold);
  font-family: var(--civios-font-sans);
  font-size: .75rem;
  font-weight: 700;
  color: var(--civios-deep);
}
.civios-vergelijkbalk-lijst { grid-area: lijst; display: flex; gap: .375rem; min-width: 0; overflow-x: auto; }
.civios-vergelijkbalk-lijst li {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  flex: 0 1 auto;
  min-width: 7rem;
  max-width: 10rem;
  padding: .125rem .125rem .125rem .75rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--civios-r-full);
  background: var(--civios-teal-soft);
  font-size: .8125rem;
  font-weight: 600;
}
.civios-vergelijkbalk-lijst li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.civios-vergelijkbalk-weg {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: var(--civios-r-full);
  background: transparent;
  color: inherit;
  font-size: .75rem;
  cursor: pointer;
}
.civios-vergelijkbalk-weg:hover { background: var(--civios-deep); }
.civios-vergelijkbalk-weg:focus-visible { border-radius: var(--civios-r-full); }
.civios-vergelijkbalk-knop { grid-area: knop; }
.civios-vergelijkbalk-melding {
  grid-area: melding;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: var(--civios-r-md);
  background: var(--civios-gold-soft);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--civios-deep);
}

/* Comparison page ------------------------------------------------------------- */
.civios-vergelijkuitleg {
  display: grid;
  gap: .375rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--civios-line);
  border-radius: var(--civios-r-xl);
  background: var(--civios-sage-soft);
  font-size: .875rem;
  color: var(--civios-tekst);
}
.civios-vergelijkuitleg i { color: var(--civios-teal-mid); }

/* Scrolls sideways on narrow screens; the first column stays in view. */
.civios-vergelijktabel-kaart { margin-top: 1.5rem; padding: 0; overflow-x: auto; }
.civios-vergelijktabel-kaart:focus-visible { outline: 3px solid var(--civios-gold); outline-offset: 2px; }
.civios-vergelijktabel { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: .875rem; }
.civios-vergelijktabel th,
.civios-vergelijktabel td { padding: .875rem 1rem; text-align: left; vertical-align: top; }
.civios-vergelijktabel td { color: var(--civios-muted); }
.civios-vergelijktabel tbody tr { border-top: 1px solid var(--civios-line); }
.civios-vergelijktabel th[scope=row] {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 11rem;
  background: var(--civios-wit);
  font-family: var(--civios-font-display);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--civios-teal);
}
.civios-vergelijktabel thead > tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--civios-wit); }
.civios-vergelijktabel thead th { vertical-align: bottom; border-bottom: 2px solid var(--civios-line); }

.civios-vergelijktabel-groep th {
  padding-block: .625rem;
  background: var(--civios-paper);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--civios-muted);
}


.civios-vergelijktabel-naam {
  display: block;
  font-family: var(--civios-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--civios-teal);
  text-decoration: none;
}
.civios-vergelijktabel-naam:hover { text-decoration: underline; text-underline-offset: 4px; }
.civios-vergelijktabel-weg {
  margin-top: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .5rem;
  border: 1px solid var(--civios-line);
  border-radius: var(--civios-r-full);
  background: var(--civios-wit);
  font-size: .75rem;
  font-weight: 600;
  color: var(--civios-muted);
  cursor: pointer;
}
.civios-vergelijktabel-weg:hover { border-color: var(--civios-teal-mid); color: var(--civios-teal); }


.civios-vergelijktabel-prijs { font-family: var(--civios-font-display); font-weight: 600; color: var(--civios-teal); }
.civios-vergelijktabel .civios-standaarden { margin-top: 0; }
.civios-vergelijktabel .civios-check { font-size: 1.125rem; }
.civios-vergelijktabel-lijst { display: grid; gap: .375rem; }
.civios-vergelijktabel-lijst li { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }

@media (min-width: 640px) {
  .civios-vergelijkbalk-lijst li { max-width: 14rem; }
  body:has(> .civios-vergelijkbalk:not([hidden]) .civios-vergelijkbalk-melding) { padding-bottom: 11rem; }
}

@media (min-width: 768px) {
  .civios-vergelijkbalk-inhoud { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "titel lijst knop" "melding melding melding"; }
  .civios-vergelijkbalk-lijst { flex-wrap: wrap; overflow-x: visible; }
  .civios-vergelijkbalk-lijst li { min-width: 0; max-width: 100%; }
  body:has(> .civios-vergelijkbalk:not([hidden])) { padding-bottom: 4.5rem; }
  body:has(> .civios-vergelijkbalk:not([hidden]) .civios-vergelijkbalk-melding) { padding-bottom: 8.5rem; }
}