/* ============================================
   Vergelijkingstabel (components/comparison-table.njk)
   Waarden 1-op-1 uit de Angie-widget "comparison_table_3278"
   (wp-content/angie-snippets/prod/snippet-3278/style.css). Lettertype: dat van de
   pagina (systeemletter), zoals in het origineel.
   ============================================ */
.comp-table {
  display: block;
  width: 100%;
  border: 1px solid #ECECEA;
  border-radius: 8px;
  border-spacing: 0;
  background-color: #FFFFFF;
  overflow: hidden;
  font-family: inherit;
}
.comp-table__head,
.comp-table__body { display: flex; flex-direction: column; }
.comp-table__row { display: flex; align-items: center; }
.comp-table__col {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  padding: 0;
  font-weight: inherit;
  text-align: start;
}

.comp-table__head .comp-table__row { padding: 18px 24px; background-color: #4B4D50; }
.comp-table__head .comp-table__col {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.comp-table__head .comp-table__col--1 { color: #FFFFFF; }
.comp-table__head .comp-table__col--2 { color: rgba(255, 255, 255, 0.55); }
.comp-table__head .comp-table__col--3 { color: #FEBD18; }

.comp-table__body .comp-table__row {
  padding: 16px 24px;
  border-bottom: 1px solid #ECECEA;
  background-color: #FFFFFF;
  transition: background-color 0.2s ease;
}
.comp-table__body .comp-table__row:last-child { border-bottom: none; }
@media (hover: hover) {
  .comp-table__body .comp-table__row:hover { background-color: #F7F7F5; }
}
.comp-table__body .comp-table__col--1 { color: #1A1A1A; font-size: 14px; font-weight: 700; }
.comp-table__body .comp-table__col--2 { color: #C0392B; font-size: 14px; }
.comp-table__body .comp-table__col--3 { color: #27AE60; font-size: 14px; font-weight: 700; }
.comp-table__dot { margin-right: 8px; font-size: 10px; }

@media (max-width: 767px) {
  .comp-table__row,
  .comp-table__head .comp-table__row,
  .comp-table__body .comp-table__row { flex-direction: column; align-items: flex-start; padding: 16px; }
  .comp-table__col { width: 100%; margin-bottom: 8px; }
  .comp-table__col:last-child { margin-bottom: 0; }
}